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.

UICraft: Zite’s New Rating UI

Zite is a pretty awesome self-learning, self-evolving intelligent specie(app) in the app universe. He feeds you with content gathered from Internet and devour your rating (Like/Dislike) so he can evolve into a clone of your news taste.  The more rating you give him, the faster and stronger he’ll evolve, and you’ll be fed with better quality universe essence (selected content).

Well, enough of my ‘crappy’ Syfy analogy. Zite has always been my favorite news aggregator. The minimalism design and the personalized rating system make it perfect for my daily news consumption. The app got an upgrade lately and I found the rating UI also evolved a bit, and I love the changes.

Before:

Zite displays a ‘rating bar’ on the bottom of the screen, where user can ‘like’ or ‘dislike’ the content. The ‘liked’ content will be fed to the user more often, while the ‘disliked’ less. It’s a simple and effective user interface:

Photo Mar 14, 3 25 56 PM

User can touch the ‘thumbs up’ button to ‘like’ and ‘thumbs down’ button to ‘dislike’.

After:

The new UI looks the same, but adds another rating layer when you touch the ‘thumbs up’ button:

ZITE rating bar evolved

If you like the content on the page by touching the ‘thumbs up’ button, the rating bar will expand upwards and display multiple tags related to the page. You can further specify which tag represent the reason for your ‘like’, so Zite could know more precisely what part of the content you like and feed you more in the future.

 

Summary

Content rating system has become more and more important for all the content providers. Great content is no longer great enough for today’s indulged users.  As a content provider, you need to offer great personalized content. And to do that, you need to have a powerful and easy to use content rating system to learn your user’s taste. The system needs to powerful enough so it can efficiently pinpoint user’s like and dislikes, but not making the experience too complicated so user will get overwhelmed. That’s why ZITE’s new UI did such a great job. Simple and intuitive 2-steps UI that nailed the sweet point of the content for the user.

Maybe Netflix, YouTube and other content providers could all take one page or two from ZITE’s UI playbook.

Google Glasses UI Evolution : Makes Life Feel Like Playing a Game

Google’s first Project Glasses video stirred a lot of controversies because of its UI design gets in the way of people’s normal life. You really can’t use this gadgets in real life if the user interface is so prominent, in the middle of your view, and pop up all the time, like this:

Project-Glasses-1

It could even be dangerous when driving or biking. Yeah a map is good, but only if I can actually SEE the road!

Project-Glasses-2Today, Google releases another teaser of the highly anticipated gadget, called ‘How it Feels (through Glasses)’. This time, Google’s UI actually get a total re-haul. All the UI are only limited to the top right corner of your view, getting out-of-the-way.

google-glass Also there is a subtle transparency in it, which reminds me of ‘Iron Man’.

ironmanAnd since I play games a lot, I just can’t help but relate this to some of the game’s HUD (Heads-Up-Display) UI:

Starwar UIWatching the video, I totally felt like living other people’s life, first person viewpoint. This could be totally amazing. We already have Twitch.tv where gamers broadcast their gameplay for others to watch. How far are we before we can broadcast our real life using Google Glasses?

Project-Glasses-3

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.

Giant’s regret?

nokia-lumia-510

Image: Nokia

Nokia has recently confirmed in an interview that they won’t rule out Android’ as a future OS option just yet. Very interesting development in the mobile industry indeed.

Some said that the move for Nokia to partner with Microsoft (which at that time had no proven success in mobile, no ecosystem strength) is a misstep in the first place. The development we saw today may just be the hard facts starting to kick in. Things might be different should Microsoft and Nokia move faster and deliver more, but for two giants like they are, I’m not surprised they haven’t  managed more.  The entire tech industry’s shift to mobile happens not only in technology front, but also in mind-set. Being mobile means you’ll have to move faster (have more products delivered per year), be more creative (some time as destructive as Apple), be more flexible (enter Samsung, with their hundreds of different types of handsets released per year), to even survive.

Having said that, I still think there’s hope for the Microsoft-Nokia duo:

1. Windows OS is unique in experience

windows-phone-7-metro-490x343-1

Image: Metro UI via AnandTech

No matter how Android fans try to defend it, the Android OS offer similar if not inferior experience like iOS. But Windows  Modern UI (used to be Metro UI, they changed the term to avoid trademark problem) is totally designed from ground up to be unique and it’s a well thought out design at that. The Windows experience feels more ‘fluidly’ in using (surprise surprise!) thanks to all the smooth and cool screen transition animations. The interface is very minimalistic and easy to use, a breath of fresh air on the look and feel of the heavily-chromed Android/iOS UI and fits into Nokia’s conventional UI style quite well. Even the most die-hard Apple fan boy can’t accuse Windows Modern UI being a copycat.

2. Windows OS is patent-infringement proof

The entire industry is keeping a close eye on the ongoing Samsung’s ‘lawsuit of the century’ with Apple, and the attention is very well deserved. Because it will carve out the future shape of mobile OS landscape. If OEMs end up needing to pay a high loyalty fee to use Android OS, then suddenly Microsoft become very appealing as an alternative. Not all company has the deep pocket and thick face to go into a huge law suit war with Apple like Samsung did.

3. Scale wise, Microsoft-Nokia is the only candidate to compete with the Google-Samsung duo.

nokia-microsoft-wp7-1297413404

Scale still counts these days. Without Google’s influence on Internet and Samsung’s huge business machine on developing and delivering hundreds of devices per year, Android won’t be at the place they are today. To match it, similar scale is almost a must. (Look at Palm’s ‘downfall’ as a proof of this point, they have all the correct ingredients, just not big enough to push for ecosystem penetration to a tipping point. ) Combining Nokia’s market share and reputation on mobile device and Microsoft’s influence (mind share) on desktop OS, they definitely should be able to compete head to head with anyone.

Whatever Nokia or Microsoft want to do, they must act fast and don’t ever look back. Nokia might be the no.1 mobile device manufacturer and Microsoft the no.1 desktop OS, but those are history and holds very little credit on a fast paced, ever-changing mobile industry.