UICraft: Yahoo’s Search Page UI Evolution

For people who take note, Yahoo! has been undergone many changes on their culture, products and more subtle things. Like the recent updated search page UI, which is claimed by Yahoo! to “puts your results front and center.” If you are a designer like me, these words will appear in your mind when you think of Yahoo!’s past search page design: ‘obsoleted, busy and full of clutter’. That’s why people have some love to themselves usually don’t want to visit Yahoo!, it makes their eyes ‘bleeding’. It makes mine do at least. But, the recent changes on the search page UI did breathe some fresh air into it. Let’s have a closer look:

yahoo-search-beforeyahoo-search-after    Image via : The Verge

The change is quite observable, and on the right direction. Overall the layout is cleaner, the information are better organized and navigation is easier. It feels to me that the rather strict discipline mostly found in mobile app are applied here. The designers in Yahoo! are using space as if it’s as scarce as in mobile device, even when they are designing a full webpage. This leads to a ‘mobile app’ grade experience and consistency across all platforms.

I totally understand if you stopped here, but if you are interested in what exactly get improved on the UI design of Yahoo! search page, I’ll explain in more details:

1. Change of search results font color

This might not seem to be a big deal, but it’s a huge relief to the eyes. The old page use pure blue, which is also the default color of URL link on web. When the Internet is born, having a different color to separate URL link with plain text is functional, but many years has past and people demand much more. The default blue color provides too much contrast and not very comfortable to the eyes. Also using default blue will make it easy for people to relate to those ‘crude’ and poor designed website, doesn’t really what Yahoo! want its viewer to relate to.  A subtle change to a lighter blue on the new design make things much better.

2. Stronger Application of Grid System

As can be seen from the old design, the alignment is lackluster, especially on the center search results part. The only strong alignment you can find is that all the text are left aligned. Whereas on the new design, we observed that now all the search results are placed in a fixed width container. The search bar on top of the page also shares the same width with the container, creating very strong alignment. The page now are very clearly divided into three columns. Left column is all the different search types user can choose from, middle column is the content (search results, as Yahoo! claimed, front and center), right column is ads area, slightly out-of-the-way (where ads should be). The strong alignment and layout make it much easier for user to find their way around.

yahoo-search-grid

 

Three Columns

 

3. Less User Interface, More Content

It has become more of a trend in nowadays web design that user interface gets out-of-the-way and make the content front and center. This is the direction Yahoo!’s new search page design is heading. A very observable part on the old page is the ‘search types’ tabs on top of the search results, it has now been moved over to the left column, leaving only the search results in occupying the entire center column.

yahoo-search-types

Search Types Tabs are removed on new design

These changes aren’t rocket science, but it shows that Yahoo! starts to care about user experience. It might be a very small step, but it is welcomed nonetheless.

Apple Adopting Flat Design? Yes, Please !

 

apple logo 2

There’s report that Apple’s legendary design master Jonathan Ive is leading Apple’s iOS user interface toward another direction: ‘flat design’.

This is really long time coming!  It’s about time we get some fresh air on iOS UI. And Apple shouldn’t let Microsoft steal all the thunder with Metro UI. I just can’t wait to see Apple’s interpretation of flat design!

 

 

 

Facebook News Feed Design Upgrade: Making Ads Count

Facebook recently released their new design of the ‘News Feed’. From the announcement, even though they didn’t mention a word about ads, I still smelt it. All of the design changes in a large part are to make Ads count. Here’s why:

1. Bigger photo = Bigger canvas for Ads

The new design comes with bigger photos and albums to offer a more engaging and immersive experience. While user contents become more immersive and prominent, so do embedded ads. (Facebook already embedded ads into user Timeline)

Bigger canvas means a LOT for advertisers in that it blurs the lines of a banner and a real ad page. Facebook should be able to charge a higher CPM rate if it proves to be more efficient.

2. Less clutter leads to more focus, on both user content and ads.

facebook-news-feed-update-march-7-2013jpg-d3f1ae554d07c445

Facebook’s current news feed feels cluttered. It easily triggers the ‘cognitive overload‘ issue and a lot of the users just back away from it, or totally ignore the blob of ads on the right side of the page. With the design changes, there are less contents in one page, but they will get more attention and focus. Coupled with more compelling photos, even boring ads that no one wanted to station their eyeballs before will get some love with the new design now. Less really is more.

3. Better content curating can also mean better ads targeting.

Another big part of the design is better curating. Facebook promised to offer the best ‘personalized newspaper’. Every ‘Like’ or ‘Share’ you make on Facebook will all being monitored and analysed to further ‘fine tune’ content to your taste. Your timeline will then become more relevant and personalized. This all sounds fantastic on the surface, but wait! Ads will become more relevant and personalized too! This is not necessarily a bad thing though. With better targeted ads (and hopefully higher CPM rate), Facebook could actually afford to not bombarding ads to their user, and offer less intrusive experience. 

Summary

Overall, I think designers in Facebook deserve some applause. They make the layout more streamlined, promoting ads without downgrading experience, and finally being consistent with their mobile experience. Like I pointed out in my another blog, done right, it could be a win-win to everybody. 

E-Ink Smartphone Could Work

fndroid02

An E-Ink smartphone could work, for 3 Reasons:

1. Long battery life

E-Ink consumes very minimum power.

2. Price

Since video performance is no concern at all, I imagine good pick of chipset and E-Ink screen will actually make it very affordable.

3. Easy to the eyes

Self-explanatory. We all love E-Ink for it.

Combine these 3 treats, I came to a very interesting conclusion:

E-Ink smartphone is perfect for enterprise!

  • It’s cheap so it can be deployed to a wider range of staff.
  • It last longer so good for long business trips.
  • And it can’t be used to play games, watch videos, etc. Reducing distraction and increase productivity

4. Always on, no  locking/unlocking hassle

Drew Wilken pointed out to me that another advantage for E-Ink is that after the pixel is printed, it cost no power at all, which means the device can be always on without much battery drain. So you don’t have to lock your smartphone or turn off the screen to save power, just leave it on and anytime you want to check time, new message or tweets, it will be there. Handy!

UI of Twitter’s new ‘Vine’ app: Subtle Evolution

Recently Twitter released its new standalone short video sharing app ‘Vine’. It’s début isn’t without some controversies, but overall it’s a solid app with great potentials. All the dramas aside, I want to go ahead and do a bit of UI analysis on this hot social app, and see if we can find something interesting:

1. Biggest Screen Ever

Unlike the quite prevalent ‘5 Tabs Nav Bar’ design pattern other social apps have adopted, Vine doesn’t have a global navigation bar at all. It gives user the most screen real estate to display content, while UI gets out-of-the-way. Launch the app and you’ll see a video playing right away in loops, instantly immersive. Keep scrolling down and you’ll get end-less (literally) content, and there’s no bottom bar with 5 different icons to increase your cognitive load. The interface is clean and minimum.

Vine vs other SNS app

Notice that in above pictures, Twittbot, Twitter, Instagram all have the bottom navigation bar. It’s useful if user wander between these app sections a lot. But for a lot of users, most of the time they stay at their timeline viewing, thus the nav bar only gets in the way unnecessarily. Vine isn’t the first app to come up with this kind of ‘flat’ approach to content presentation. Path, which is another ‘intimate social network’ service, also shares the same ‘put content front and center’ philosophy.

Path Timeline and side menu

Path don’t have global navigation bar either, and they uses a side menu that’s hidden from the content panel, only revealed when the content panel slides to the right. Without the navigation bar, Path is able to keep the interface clean and display more content also.

2. Better Icon-Label Connection

Again using the picture above as an example, it’s really hard if not impossible to figure out what those little navigation bar icons stands for. Twitter at least put the label beneath the icons (but it’s very small, hard to read), Twittbot and Instagram only use icons, thus users will hesitate and ask themselves what those tabs are for before touching them. As we all know it, making users stop and think = bad user experience.

4 Section Design

Vine uses a drop-down menu to switch between app sections. In the menu, pretty and sizable icons are displayed along with the section name. When user gets into the respective section, the icon will stay on the top left corner, and the title will be in the middle of the title bar, further strengthen the connection.

3. Making ‘Like and Comment’ Easier

People are comparing ‘Vine’ with ‘Instagram’ by claiming ‘Vine is the Video Instagram’. They do have some resemblances in UI design. One case in point, they all use a ‘Like’ and ‘Comment’ button for the viewer to leave feedback. The difference is size, where Vine’s buttons are bigger than Instagram, which makes them more ‘touchable’, encouraging people to express their opinion, further foster the social part of the app.

Like & Comment Button Size

4. Curated ‘Explore’ Page
Exploring is an essential part of  social sharing apps. Whether the application can help user find the content they want will determine how far an social media can go.
Curated vd non-curated
As we can see from above pictures, Vine’s ‘Explore’ page has ‘Editor’s Picks’ and ‘Popular Now’, along with 12 most popular or interesting tags, this will cover a lot of ground already. Instagram, on the right side, only list photos that are currently popular. It’s more direct, but also due to the lack of sophisticated algorithm, the results as we can see, are quite random. User will have to input tags they want to search to get access to it, which is not very convenient.

5. Some flaws?

During the review, I also found some design hard to understand. For example, it is a video sharing app, but the only way you can capture a video is to go to ‘Home’ and touch the top right corner icon (no labels either). For such a prominent function as creating video, this is a bit too modest. Maybe Vine’s design team think this app as more of a major content consuming app than a content creating app I don’t know, but if making a video is not as easy as taking a photo, this will hurt its subscribers growth. Video is harder to capture and thus needs more love from UI/UX.

To Sum it up

Overall, I felt the application’s UI and UX is carefully designed. It’s not as sophisticated as Twitter, or as fancy as Path, but it gets the job done very efficiently. The UI gets out-of-the-way as much as possible, people will not have a hard time finding their way around because it’s just not that many layers worthy of the term ‘Information Hierarchy’. Everything is quite buttoned up. It’s simple and even ‘shallow’. (Interestingly, some say the early contents are also ‘shallow’, but addictive.) But simple can be powerful, and easier to get viral, which is critical critical for a new social service.

Skeuomorphism vs. Flat Design: Some Inspirations

The design industry is rethinking Skeuomorphism lately. Whether flat design is a more appealing approach or Skeuomorphism is still  in its prime time.I was reading all those arguments and think to myself: Maybe they can work hand-in-hand instead of mutual exclusive? So I went out and did some inspirations search. The results are encouraging, not exactly proved my point but still offer a possible direction, here’s what I found:

1. Tiny Tower

Tiny-Tower-Level-Upgrade

‘Tiny Tower’  is a mobile business simulation game developed by NimbleBit. It’s 8-bit ‘Pixel Art’ style created a new genre on game graphics. Look at the above picture closely, you’ll find there are some little ‘glow’ effect on top of the arcade machine, and some strong shadow on the wall from ceiling down. So the art style is 8-bit pixelized and very 2-D (flat), but it also has some shadows, glows and subtle textures (which all add up to the chrome just like skeuomorphism design do), to create some depth and visual appeal.

2. Minecraft

lonely_night_in_minecraft__by_xmax247-d5ksm9y

Minecraft’s graphic design is ‘crude’. The entire world is built by all the little square blocks. Yet, if you put up some torches on the little hut you just built at night, you’ll find a very cozy orange glow around the torch. The glow is totally not ‘crude’. Another good example of combining lo-fidelity ‘flat’ elements with subtle hi-fidelity effects.

3. Fez

Fez-08

Fez is another platformer game using pixel art style. The game play is quite unique. You are a 2D creature that performing all the jumps and climbing in a 2D world, but you can change perspective, which will result in a 90 degree turn where a 3D world is revealed to you.(See picture above) The visual is 2D, but the interaction and the more dynamic part of the design is 3D, which offer another new approach.

4. Path

Path-UI-Style

Path is a perfect example of the strength when you combine flat and simple UI elements with subtle textures and effects. They really get it right and have the best of both worlds. The title bar is very subtly ‘textured’ yet still looks very clean and digital.(Upper part of the picture) The ‘Flyout Menu’ (red circle with ‘+’ or ‘x’ int he middle) has a very light ‘glossy effect’, but all the other action buttons are represented by flat circles (Middle part of the picture). All the emotion icons are totally flat though. (Lower part of the picture) The overall design language is flat for sure, but they spice it up with some textures, shadows, glossy effects here and there without breaking the clean look and feel. Really a marvelous job done.

5. Clear

Clear_swipe

Clear is the app that pioneer the ‘movement’ from skeuomorphism to flat design. But even Clear has gradient in it. It also support different themes, so if user get bored with one color scheme, they can switch to another one that they like.

Photo-Feb-06-5-17-49-PM

Image: By TheNextWeb.com

Also, Clear’s static visual design is flat and simple, its interaction animation is very interesting. For example, to create a to-do item in the middle of a list, user can simply pinch apart the list where they want the item created, then the list will unfold like a folded paper. It’s 100% skeuomorphism in action, drawing reference from real world experience of childhood paper-folding.

To Sum it up…

Skeuomorphism and Flat design are all but two different design languages. Each has its strength and limitation, and will fit into different scenarios to solve design problems. There’s no absolute right or wrong about using them, it’s just how well it fits into the problem you want to solve and the audience you want to please. And be creative! The above examples proves that you can use them both and still yielding fascinating results!

 

Apple iMessage UI Breakdown: Read Receipts

Finally got time to write something that I hold dear and near to: User Interface!

Today I just want to start with a very ‘minor’ feature in IOS’s iMessage UI, the ‘Read Receipts’.

The ‘Read Receipts’ feature lets you tell the people who send message to you whether you’ve read the message or not.

imessage 02

If you set it to ‘Off’, your friend will see this:

imessage 03

Notice that under the text message ‘Test’, there’s a small gray word ‘Delivered’. This means your friend will know the message got delivered to you, yet not sure whether you’ve read it or not.

If you set it to ‘On’, your friend will have more information now:

imessage 01

Now notice that the gray small word is now ‘Read’, means the message not only get delivered, it also get read by you.

So what’s user experience design thoughts have been put into this simple little feature? Let’s have a closer look.

1. Give power user the freedom of control, but keep it simple for normal users.

This ‘Send Read Receipts’ setting is by default turned off, which means most user won’t even aware of its existence. Most user don’t want to think too much of all the ‘fine tweaks’ they can do on their mobile phone. They want to just pick it up and start using it. This setting design does exactly that. A lot of my friends using an iPhone don’t even know they can do this, and they’ve been using iMessage for a long time without any problem. For the power user, they can choose to turn the feature on, and they fully understand the meaning of it. (Not being able to use ‘I didn’t get your message’ as an excuse maybe?)

If it’s designed the other way around. Then normal user will start to complain ‘Why others can know whether I read their message? When did I allow that to happen? And where can I turn it off?’ This is bad experience because it makes user start to think, start to ask questions, and likely won’t get answer easily.

2. Display the information in a non-intrusive, out-of-the-way style. 

As can be seen from the above figures, the ‘Read’ word are gray and small. User can easily choose to ignore them if they only want to read the conversation text. Yet for user that want to know whether their message has been sent or read, the information is there. The visual hierarchy here is well designed.

3. Only display on the newest message to reduce screen clutter. 

Another subtle thing I noticed (but not shown in the above figures) is that only the newest message will have a ‘Read Recipient’ displayed underneath it. Come to think of it, it actually make a lot of sense. Older messages are either replied to or become irrelevant for user to know its delivery/read status. My friend has already replied all my messages I sent to him yesterday, so they definitely got and read all of those messages. The only message I want to know whether it’s delivered or read is the message I just sent. Designing this way instead of display ‘Read Recipient’ on each message has its pros and cons. The good thing is only the most relevant information is displayed, and much less screen clutter. The drawback is that user won’t have a message by message status information (which most of the users don’t care anyway). So I believe Apple make a deliberate decision (Remember design is all about making deliberate decisions for the user) to choose good experience for the 90 percent of the user, rather than sought thoroughness for the rest 10%.

So as we can see from the analysis above, even designing for a small feature like ‘Read Recipients’, there are a lot of design thinking behind it, and being aware of all the pros and cons of the different solutions and making the correct (yet tough) decision for the user is the key to great user experience.