I’m working on the improved viki.com experience across devices. It’s not only about the visual design, but also about the flow, interaction, and layout. “Details matter, it’s worth waiting to get it right, ” says Steve Jobs.
The thumbnail is the most used component on the website and app, but I think we haven’t done it well, with details that make the overall interface looks great. Inspired by Google Material Design, I’m using 8dp square baseline grid, and 4dp when it’s needed (e.g the space between ‘new ep’ badge and the left edge). The blue square is the target area for the overflow icon (40dp x 40dp).
Another challenge is to make the Top Volunteers more engaging, one variation:
I’m unifying and simplifying the flow across devices, focusing on the users key goals: discover shows and watch show. See one solution below:
See above design on Dribbble:
I still have a lot of things to be done, but everything looks great so far, and using 4dp/8dp baseline grid helps to lay things out perfectly on the screen.
Learn more about Google Material Design’s Metrics and Keylines.
I got a taxi using GrabTaxi this morning, and when I asked the driver “Do you find any difficulties using the App?” he answered with “No, I’m happy,” then he turned to me and with a big smile said “They give a good incentive.” This is interesting. So the way you feel might have an impact on the perceived ease-of-us, and this is somewhat related to the peak-end heuristic: “…people judge experiences largely based on how they were at their peak (i.e., their most intense point) and at their end, rather than based on the total sum or average of every moment of the experience.”
The app might not be the best, but at some peak point, maybe when he got the incentive, he felt so good, that he rated the overall experience as good. So the UX is not just about the UI. It’s not just about designing the experience when accessing the app. Applying Peak-end could help us to be more efficient, designing the experience effectively to the points that matter to the users, and those points might be outside of the app itself.
People enjoy surprises, our brains are hardwired to enjoy surprises. It’s so basic that it’s often overlooked and forgotten.
My Son’s Drawing
Whenever I open my sketchbook, I have a pleasant feeling that I might find some surprising drawings of my kids. From drawing of me as an Iron Man, to saying something sweet like Daddy I Love, they all make a routine activity of opening my sketchbook into something more pleasant.
Similar things can be applied to whatever app you have. When designing your app, ask some questions to remind you to give some pleasant surprises to the users: Continue reading
Applying animation principles is one of many ways to make the interaction feels great. Yahoo did it well by using Overlapping Action – one of the 12 basic principles of animation in their Flickr intro screens.
Follow through and overlapping action is a general heading for two closely related techniques which help to render movement more realistically, and help to give the impression that characters follow the laws of physics. “Overlapping action” is the tendency for parts of the body to move at different rates (an arm will move on different timing of the head and so on).
See the video that I captured below.
This was from the 12 Days app. When I clicked View, the next screen had ‘Cancel’ as the copy of the button that would bring me to the previous screen.
I stopped for a few seconds before I clicked on Cancel button, because it made me think that I was gonna commit to some action.
Which one is better for the copy: Back, or Cancel? What do you think?