Details Matter It’s Worth Waiting to Get It Right

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).

the_perfect_show_thumbnail_2x_1x

Another challenge is to make the Top Volunteers more engaging, one variation:

home_screen_dark_1x

I’m unifying and simplifying the flow across devices, focusing on the users key goals: discover shows and watch show. See one solution below:

navigation_bar_1x

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.

Challenge The Assumption: Font Choice.

Quick survey, which one is more legible, left or right? (click on the image to see it in full size)

Roboto vs Open Sans

Roboto vs Open Sans

I’m working on Viki Design Language, which includes typography. Viki has been using Roboto for years, but I’m not happy with it. I prefer Open Sans. Open Sans is more legible. I think Roboto is too bold, the kerning and tracking don’t seem right, and the characters are not easily recognizable compared to Open Sans. Although Google is pushing Roboto through Material Design, I think we should be designing for what’s best, instead of just following some design guide blindly. We need to challenge the assumption that something is the best, and not just keep using it because it’s been used for long.

Looking at the comparison above, it wouldn’t be a surprise if you chose right for the more legible interface. It would be interesting to have some usability testing to see how fast users can read the video description. In the mean time, I’ll keep experimenting with different font-family and weight.

But We’ve Always Done It That Way. That’s Why It’s Bad.

I’ve been using mobile banking a lot, and it annoys me that the experience is bad. The visual design looks bad – feels like I’m taken back to 6-8 years ago, the layout is bad, the flows are bad. Almost everything is bad. I wonder why they couldn’t get it right. I’m imagining that whenever someone brought an idea to make it better, other people would say “But we’ve always done it that way.” That’s why it’s bad.

Existing Homescreen - UOB Mobile App

Existing Homescreen – UOB Mobile App

Steve Jobs said, “Innovation distinguishes between a leader and a follower.” We need to keep finding a better way in designing the experience. I challenged myself to improve the main screen in less than an hour. I make it a rule, never to criticize some design, unless I can offer a better one. With some help from my daughter and my son in selecting the icons (I was too tired to browse through all of my icons collection), I came up with the design below (You can also see this shot on Dribbble: UOB Mobile Banking App Main Screen). Continue reading

Anticipation to Add The Feeling of Surprise

It’s easier to present content in a static form, but some things can be more surprising and pleasurable if we add animation to them. Anticipation is one of the fundamental 12 basic principles of animation, and if it’s done correctly, can add the feeling of surprise to the users.

Anticipation Animation

Early on at the Disney Studio the animators learned that audiences could not easily follow the animation unless there was a “planned series of events” leading the eye. Therefore, in order to prepare the audience for an action, the animators would add a so-called anticipation drawing, allowing the audience to anticipate the main action in the scene. This would also help to make the action appear more realistic. –Anticipation on Wikipedia

See the example that I created above (you can view it on Dribbble as well: Profile Info Animation). Simple animation with animated counter – as preparation for presenting the main content, giving some delay to the users before they find out the final numbers. The element of surprise makes the interaction more fun.

Interface Claustrophobia

I have an Interface Claustrophobia. Small or lack of spaces in the interface makes me anxious. Space sounds like a simple thing, but it can give a significant improvement to the experience, especially if we want to simplify the interface. People love simplicity, it makes their lives easier (or feels like it’s easier). The right space would help in organizing content. Second law of simplicity from John Maeda: “Organization makes a system of many appear fewer.” Adding more space would help you organizing content better.

See the comparison of Viki’s Android app below. The left one, although it’s working fine, but somehow looks cluttered. One of the reasons is the content hierarchy is not clear, the organization of the content is not clear. I simply add more space by changing the top margin of the section header from 18px to 48px, and it looks better. If you view the interface on your phone, the improvement is even more obvious.

Viki - Space Improvement

So if you feel that somehow your interface looks cluttered, but you don’t know why, then adding more space would help.

Note
Claustrophobia is the fear of having no escape and being in closed or small spaces or rooms. See Claustrophobia on Wikipedia.

A Big Fan of SketchApp

I was a big fan of Adobe Fireworks, and since Adobe is killing Fireworks, I was forced to use Photoshop for interface design, and I was not enjoying the design process at all. Then SketchApp came, and I’m now a big fan of it. A lot of designers switched from Photoshop to SketchApp, you can search on Google for ‘Switch from Photoshop to SketchApp’. I’m using SketchApp as my main tool for interface design now, check out my dribbble for some designs I created using SketchApp. The communities are growing, one of the popular sites is SketchApp Source, where you can download a lot of awesome stuffs designed using SketchApp.

Check out a FREE stuff that I created, and featured by SketchApp Source:

Direct page on SketchApp Source: Simple iOS Voting App .sketch resource.