Noodles UX/UI improvement


I've continued working on Noodles in the past couple of weeks since I got my certificate to improve various aspects, both in terms of functionality (UX) and in terms of visual appearance (UI). For instance, I've included an open source library to improve the swipe functionality. The iOS SDK has built-in support for swipe left gestures, but nothing for swipe right, and you can't put images in the actions tabs. I wanted the users to be able to start a timer by the swipe right gesture, and keep the swipe left for toggling the availability of a noodle and to delete. I've included SwipeCellKit using Cocoapods to my project and configured it. I had to create the icons I used for the actions sheets and I'm very happy with the result.

New swipe left actions

Here is the right side actions offered by a left swipe. I created the trash icon to replace the delete label (which would have to be localized). I put a red background to convey the fact that it's a disruptive action. The toggle availability action has been replaced with the same icon as the resulting action of tapping that action. For instance, in the image below, the noodle is listed as available as indicated by the check marked icon. In that case, the action lists a red-crossed icon which means that tapping that will list the noodles as unavailable. It's also the action that is set as the long-swipe left action.

right actions

New swipe right action (and long swipe)

And I've added a right-swipe action for starting a timer as shown in the following image. I also created the icon for that.

left actions

And the long-swipe right action, pictured below, is to start the timer. So it's very easy to do the two most common things right from the list view, by long-swiping either right (start a timer) or left (toggle the availability).

long-swipe right

New timer animation in list view

I've also made changes so that the time is displayed inside the timer animation in the list view, because that improves the user experience, as shown here.

timer with time displayed

blog comments powered by Disqus