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.

Advertisements

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

Fujitsu’s Senior Smartphone Debut : A Falling Leaf, A Coming Fall

stylistic_s01_front_frFujitsu recently launched its first Android based smartphone with France Telecom. I know there’s nothing ‘exciting’ to blog about, but there’re some serious implications from it, just like people can tell the fall is coming from the falling of a leaf. 

1. Accessibility to a whole new level.

Every UI/UX designer should take accessibility into consideration these days, but in most cases people do it just to conform to regulation requirements. It has never be in the center of the design stage before. But by choosing to release its first smartphone as a senior oriented phone with unique features and user interface, Fujitsu made a serous commitment to accessibility, from regulation abiding level to business sell point level. There are cold numeric business calculation behind it yes, but it’s still heart warming to see seniors are targeted and well thought out designs are making their use of smartphone much easier. Seniors want a piece in the mobile trend also!

2. Android OEMs start to tap into niche market already

This is something where iOS ecosystem is lagging behind actually. Don’t get me wrong. iPhone is still very popular and I’d even say it’s still main stream and leading the innovation. But on niche markets, they are not making much progress. Reason? Simple. Because Apple is but ONE company and they release but ONE phone per year. This is a pretty hard limitation. Yet for Android, there is always your ambitious ‘new comers’ want to do something different to strike from different angle, thus the senior demographic targeting Fujitsu. If you ask an elderly which phone he will use, a dedicated designed senior phone or iPhone with some accessibility enhancements. I don’t think the answer will be too hard to guess.

3. Flexible UI Themes for iOS to close the gap

Yet hope is not all lost for iOS ecosystem. When Steve Jobs first release the iPhone, one notion he brought up in his keynote about why traditional handset OEMs did wrong is hard keyboard. He claimed that what hardware can do on one thing, software can do equally well on the same thing with one hundreds different ways. And that leads to the rise of mutli-touch technology and touch screen becoming the ‘de facto’ choice for phones just because it’s so flexible.

Along the same line, the user interface potential for iOS to evolve and become more flexible to address more niche markets are huge. For example, by introducing different user interface design tweaks as different ‘themes’, your iPhone can actually look and feel like a senior phone, or enterprise phone, or kid phone. At the center, it’s still iOS, but on the user experience level, it can be optimized for different purposes.  This has been the strength point for Android from the very beginning, ability to tweak the interface, and iOS do need to play catch up.

A good start of this would be introducing ‘Dashboard’ of Mac OS into iOS. Put all the relevant information and widgets on top, so the ‘update hungry’ users can quench their thirsty in one glance. I’ll try to write a separate blog on this in the future. 

All in all, a move to make dedicated device for older guys is always welcomed, and I had a feeling that we’ll see more of these kinds of dedicated devices in the future.

Form Follows Function: Great HTML5 Demo

Came across this gorgeous demo site for what HTML5 can do. The interaction and effect are amazing and the minimalism design helps too, highly recommend, link here.

You really need to click into every one of them and see the ‘live’ effect to fully appreciate them, but just for teasing purpose:

FFF

Pick your experience.

FFF_Bokeh

Bokeh. Dreamy color manipulation, works great even for a screen-saver.

FFF_Color_Pixel

Color Pixelated. Create your own Pixel-art with a simple click.

FFF_Ripple_Reflection

Ripples on the green. The reflection of the city actually ripples as if it’s on water surface.

FFF_Wiper

Waver Typography. All the letters is raining from the top of the screen, and the black waver wiping them left and right, the physics engine of HTML5 is really impressive.

FFF_Raining_Men

Raining Man. It works almost like a James Bond movie opening.

My language pales before the real thing, so go check it out!

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.

BMW’s 4G LTE Hotspot Idea: Luxury car meet cheap technology


1Series_Hero

Image: by BMW

Sometimes we get so used to ‘always connected’. We carry out iPhone 5 or Android Galaxy around all the time, we walk with them, sleep with them, play with them. We happily indulge ourselves to this ubiquitous Internet availability brought to us by our sexy little mobile phone. Yet until recently, this is  mostly limited only to your mobile phones. Or is it?

BMW recently announced a new feature that will turn your beloved automobile into a moving WiFi hotspot. Leveraging the newest 4G/LTE technology, the feature creates a WiFi hotspot in your car and gets Internet access via the 4G/LTE connection.  The feature also makes use of the vehicle’s outside antenna to boost signal strength. Current BMW owners can buy a small accessory and install it in the car to enable the feature.

So you might ask, what’s the difference between this and my MiFi box? Big and small if you ask me. Why? Because technology wise there’s nothing new. The technology they use are standard 4G technology and the WiFi hotspot they use in-car won’t be any faster than your 50$ T-Link one from last year’s holiday sale. Maybe the outside antenna has some tricks in it about no rocket science there either. The big difference will be the experience they will be able to offer. We all know if you never drove a beamer you’ll never know how it felt like driving it. Why is that? Because you won’t know just by reading the spec and watching their commercials. You’ll need to BE THERE, to actually drive it, feel the push on your back, listening to the humming of the engine, let the seat warm you up in cold winter, and let the wind hit your face with the skylight on. All these little features by its own is nothing new, just like the new WiFi hotspot feature, yet adding them together, you get the unique BMW experience. And that’s where the most value comes from.

BMW has wrapped a bunch to hardware/software features to work together with the feature:

WPS fast WiFi connection. This uses standard  WPS technology to make it easier for the passenger to get connected to the hot spot.

NFC support. So passenger can also connect to the WiFi if they have NFC in their mobile phone/tablet.

BMW App Platform. Which is a bunch of BMW developed apps running on every new models of cars, that will allow user to use Twitter, connect to Facebook, or have the car analyse your driving habits and give you better driving suggestions. (‘Slower on this corner!’ Kidding, I never used it.)

So overall, with the WiFi hotspot feature, BMW will make it very easy to still stay connected sitting in the car, and let the mighty Internet enhance your driving experience. I believe this is only the beginning. We all know the theory of ‘three screens’: One is your computer screen, one is your TV screen, and one is your mobile phone screen. Well, maybe in the near future, your car screen will easily become your 4th screen. Average Americans spent 15 hours a week in their car after all.

I’ll try to elaborate the user experience potential in more details for applying Internet and apps into your car in another post some time in the future.