Yahoo! Weather Gets One Step Ahead by Working with Apple

It has been a month since I chose Yahoo! Weather app as my default weather app on my iPhone. I liked the UI style of the app, simple, information matter on the front and center and the pretty Flickr local scenery photos, all with good touch. After WWDC 2013, it turns out that this app fits right into the new iOS design. Is Yahoo!’s designers THAT good? Or they can see into the future?

The question became very obvious right after I delve myself into Apple’s ‘out-of-the-oven’ Mobile Human Interface Guideline (can be found here, need to have developer account to access):

Yahoo-Weather-before-afterr

Since iOS default weather app actually use Yahoo weather, I think designers in both companies must have talked before releasing their version of the weather app. Good for Yahoo! I’d say. And maybe in the future if we want to get a sneak peek into iOS changes, we could pay a bit more attention to Yahoo’s weather app?

 

What Exactly Apple Did with iOS 7?

icon-ios7

So the biggest announcement in tech industry is behind us. Yesterday in Apple’s WWDC 2013, the new iOS 7 was released to the public. My feeling towards it is a mixed bag. I liked the simplicity of the new design language, but not a big fan of the somewhat ‘childish’ app icon colors. I’m excited about the huge potential of iOS for cars (which deserve another blog), but not so keen on the Control Center. When all the excitement and disappointment quiet down, I tried to put all the pieces together and wonder what exactly Apple did on iOS 7?

Here is what I found out:

1. Stronger Design Rules

  •  Grid system:  As Jonny Ive put it ‘Developing a grid system allowed us to achieve a much more harmonious relationship between individual elements‘. A well designed and implemented grid system will hugely improve the inner relationship between scatter around UI elements, thus making them feel like part of a single piece. This is essential in ‘flat design’ that iOS is obviously influenced by.  Not that iOS 6 is designed without a grid system, it’s just that the previous ‘skeumorphism’ UI style give ample affordance and visual clue, thus a grid system’s importance is not as critical as a simplicity centered flat design.

ios7_grid_system

 

  • Redesigned color palette:  Anyone familiar the old iOS will find the new one way more colorful, to the extent of making some uncomfortable. These colors come from a re-designed palette that go well together. This actually reminds me of when iMac is first introduced to the market. The beautiful neon colors really capture a lot of attention. Some would say the new look of iOS is actually childish and will hurt its image of a professional device. I tend to disagree. There is nothing wrong about being colorful, being bold as long as it’s still well thought out and designed to please human eyes. iOS color has been dull for soooo long, and it’s time for a change.

ios-7-palette

 

  • Dynamic UI that get out-of-the-way when not needed:   Nothing can be said better than Apple’s own terms, and forgive my laziness of directly quoting them here: ‘The interface is purposely unobtrusive. Conspicuous ornamentation has been stripped away. Unnecessary bars and buttons have been removed. And in taking away design elements that don’t add value, suddenly there’s greater focus on what matters most: your content.‘ Also a ‘flat’ UI make doing this easier, since all the elements are mostly colorful geometric shapes, it won’t hurt the snappiness of the UI as badly as a ‘unwieldy’ heavy textured UI.

2. Industrial Design and UI Design Integration

This has been criticized all along. People complained about the minimalist industrial design of iPhone doesn’t match the ‘skeumorphism’ style UI. Now it seems with the iOS 7, they are start to come to the same direction: Simplicity. One good example is the layered effect iOS 7 trying to create with the use of translucency. It might look very subtle, but it means a lot. It makes your iPhone felt more legit and physical, more ‘real’. In heart, the new iOS 7 is still trying to be ‘real’, but it has evolved from ‘visual skeumorphism’ to ‘psychology skeumorphism’. After all, Apple is all about making technology human. Or put it in their own words:

“Technology should never get in the way of humanity”

ios7layer

3. More Mobile Friendly

  • Conserving Power: A big development iOS 7 bring to the table is to conserve power usage when the app is not in the foreground. No other company came close to how deep Apple dig to save the 1 minute of battery power.
  • Flat Design uses less CPU power, thus smoother: I bet the new iOS 7’s built-in UI image resource size is much smaller than iOS 6. To put it in layman’s terms: It has become leaner and faster. Exactly what mobile demands.

4. Character?

This is a vague feeling of mine. I can’t really put my finger to it. But the bold color, the subtle translucent layers, the smart UI that will hide themselves when I need to view my content, the smarter and more human-sounding Siri, etc. all give me a feeling that iOS 7 somehow come to life, has its own character, and evolved to be smarter and prettier. There’s a slice of humanity in it, no matter how thin it is. Maybe it’s just me day dreaming, or maybe this is also Apple’s vision?

BTW, the Apple official iOS 7 Design page is by itself a design lesson, I recommend going through it. It’s not just a sales pitch.

 

UICraft: Why Facebook’s New ‘Stickers’ is Stupid Yet ‘Sticky’

Following Path’s step, Facebook recently introduced a sticker feature in their messaging experience. Stickers are a glorified version of ’emojis’ which user can send to their friend while chatting to express emotions. It usually comes with a package of different expressions/emotions. All Facebook’s current stickers are free to download, but the ‘Free’ tag could very quickly become ‘$0.99’ like most Path stickers do.

Facebook-Messenger-stickers

 

Image via: phandroid.com

Stickers are no new creation by Facebook at all. A bunch of Asian messaging apps and services have already embraced it for some time. This whole ‘cuteness’ thing might seem silly, yet before you shout ‘stupid and cheesy!’, let’s not forget all the ‘stupid’ videos that got millions visits on YouTube. There is something behind all these ‘stupid yet popular’ fads. Most of them share one treats: They play very well to your emotion. And emotion, my friend, is usually our weakness. That is what’s behind all these impulse purchasing, all these ‘my brain tries to say no but my body screams YES’ moments, all those ‘this is so stupid but I just can’t stop laughing’ videos.

This is also why some  apps are successful in creating attractive experience. Enter ‘Clear‘, the highly successful to-do app with flat and simple visual but powerful physics and interactions. By swiping the item right, user can mark complete the task. Swiping left is delete the task, pinch open to add an item and pinch close to fold the current task list. It might sound simple, yet it’s physics is so great that when you are doing all these simple operations, you feel like you are manipulate a real object, you are throwing the completed task away like throwing your empty can of Coke to the dump. It relates to your feelings and emotions.

I still remember when the first time Apple released iPhone and introduced multi-touch, people are instantly amazed by the interactions without rationally knows why. Like Steve Jobs once put it in his keynote when demonstrating a multi-touch feature :” I can play this all day!’. As human-beings, we are sophisticated, we use our brains, we developed science. But most of the times, we aren’t that smarter when it comes to our emotion. We fall in love, get hurt, heal through it, and do it again. That just how emotion works. It is sticky and always comes back. No wonder after Path first announced their Stickers and In-app shop, they said the first week it brings in more money than all the money the company has ever earned before. No wonder Facebook is following suit.

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!

 

 

 

Some thoughts on Google Keep

Google announced the new note-taking service Google Keep today. 

Image

I gave the web version a try. The UI looks very minimalism, using it is easy too. There aren’t many features to begin with though. It looks like just a lite, new service Google want to put on their cloud. Google didn’t mention whether they have bigger vision on the service, so we’ll just have to wait and see.

Some thoughts from a product design point of view:

1. Don’t have an ecosystem.  Take Evernote as an example, they have Chrome extension ‘Web Clipper’, Outlook plug-in, apps on all major mobile OS, PC/MAC software and a web-app. Making note taking available everywhere. Google Keep only have Android and web-app, kind of lacking still.

2. Multimedia support. Currently  it only supports text and photo.

3. Notes organization. I noticed that Keep lets you give a color to the note, and display the notes in ‘List’ view or ‘Grid’ view. Other than that, pretty much nothing. Maybe Google never really think about scaling? Or they want to position Google Keep as a lite note-taker instead of an information management tool?

3. Note sharing. Without sharing, Google Keep is likely to lose the biggest demographic of note taking: students. There are plenty of opportunities that Google could embedded Keep into their social media ecosystem. Share on G+ for one, follow friends/celebrities notes for another.

Obviously the service is still in its infancy. It will be interesting to see how it evolves. Hopefully it won’t be like Google Reader at least.

HTML 5 Development Cost Greater Than Native?

In the article from The Next Web: Accounting software startup Xero ditches HTML5 in favor of native iOS and Android apps

Our view is that HTML5 technologies can deliver as-good-as-native experiences…but the lesson from Fastbook is that it’s hard work – you don’t get those experiences out-of-the-box. And the lesson we’ve learnt over the last 12 months has been that the cost in time, effort and testing to bring an HTML5 application to a native level of performance seems to be far greater than if the application was built with native technologies from the get-go.

This surprises me a bit. One big reason for app developers to choose web app approach is because HTML5 is ‘cross-platform’, thus developers don’t have to deal with OS fragmentation and develop one version for each platform.

I guess this is due to immature of the ecosystem. By immature, it’s not just the technology itself, but also the developer talent pool as well as the tools and resources. We all know the ‘end-game’ for HTML5 is great, but to get there, there seems to be more hurdles than expected…

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.

UICraft: What Apple Map UI Done Right

A lot of people hate Apple Map. Bad directions, corrupted map data, police warnings, you name it. Yet most of the criticizes are pointing toward the back-end map data, not to the map user interface and user experience. Actually, no one seems to have talked about it. After a closer look, I found that Apple Map UI did one thing or two right:

1. Less clutter

The overall Apple Map layout is designed to avoid ‘cognitive overload’ as much as possible. Road names only get displayed when it helps the navigation, instead of throw all the names across the map.

Apple Map:

Photo-Mar-12-9-16-45-AM.png

‘I-75’ is displayed because that’s the road on which the car was currently driving. ‘Akers Rd’ is displayed because it offers a reference point of where the car is at the moment.

There is no clutter here. The user can know where they are at a glance (Driving on I-75 near ‘Akers Rd’’.) . Minimum ‘eye-off-the-road’ time. Good for safety.

Waze and Google Maps:

Google_maps_nav1.png

Google Map

waze-map-navigation.jpg
Waze Navigation App

Road names are everywhere and random.  The user needs good eyesight and extra time to figure out which road he is driving on and where exactly he is on that road. More ‘eye-off-the-road’ time. Bad for safety.

2. Clear information hierarchy with relevant information

The single most important part of a map navigation UI is the ‘Navigation Panel’ where all the navigation information is displayed. The most critical navigation questions we ask ourselves are:

  • ‘What should I do on the next Turn?’ (Left, right, exit highway, etc.)
  • ‘How far till I have to turn?’ (A number in miles or feet.)
  • ‘Which sign should I look at?’ (The road or exit sign.)

Apple Map:

navigating-panel-1

As we can see from above screenshot, the information is very clearly spelled out. User is able to get direction within 2-3 seconds.

Google Map:

nav panel google

All the information is on there, but they are all with same visual weight. User will have to read through the entire sentence to get what they need. They can’t skim, thus more time-consuming (5+ seconds).

3. Subtle color coding is intuitive

Apple Map:

Photo Mar 12, 9 19 17 AM

Light Blue:  Current route, Car Indicator (round badge), Next Turning Point

Green: Other reference road names.

Very easy to filter useful information. Blue = useful. Green: reference only.

Google and Waze Map:

waze map navigationGoogle_maps_nav1

No color coding on road or road names at all.

4. Lock-Screen peace of mind

Another thoughtful thing about Apple Map design is how navigation works with handset’s lock screen. When using the smartphone as GPS, battery life is always a concern. (You can’t expect people to always has a car charger around). When driving straight on a highway with the next turn is 100 miles away, there is no reason to keep the smartphone screen on all the time. But locking the screen risks missing the important exit (yes there’s always voice prompt, but we are driving at 70mph after all).

Photo Mar 12, 9 18 50 AM

How Apple Map solves this problem is quite smart. When navigation is on, if you lock your iPhone, the navigation screen will get on the lock screen. So if you want to check how far you’re to the next exit, just push Home or Power key to turn the screen on, don’t even need to unlock the screen. Better yet, when you’re approaching the next turn, the lock screen will automatically lit up until you successfully make the next turn.

Summary:

Adding all these together, I found Apple Map still holds its high standard when it comes to user interface and user experience design. The map data may be screwed up, but the design is still killer.

Eye-Tracking Smartphone UI: Yes and No

Came across this article ‘The Implications Of The Interface That Watches You” today. Eye-tracking as a new way of user interaction is intriguing, but after some thoughts, I think it’s very limiting:

eye-tracking

Image from: TechCrunch.com

1.  Eye movement is a’ subconscious’ behavior, hard to control.

When we move our hands, our brain needs to command it to do it and we’re aware of it. Eye movement is different. We do it unconsciously. We automatically blink when we read for a long time. We move our eye balls up and down when browsing the web without thinking about it. Now if an app or smartphone tracks our eye movements and makes the app responding to it, all these random moves will start to mess things up. User will grow nervous about their eye movements, adding HUGE pressure to the experience. A good app design should try as much as possible to NOT make user think. This is making user think MORE about something they never have to think about (eye movement) before. Totally wrong.

2. Dynamically changing UI screws location memory

The idea of changing the user interface based on people’s eye movement is even more absurd. Location memory is in the center part of user experience design. Human brains remember where things are and  it makes it easy for them to find it next time they want to use it. Dynamically changing where all the buttons and other UI elements are? User will become utterly confused as where things are.

3. Eye-tracking as data gathering tool is creepy but useful

So what is the better way of using eye-tracking technology? Simply put, using the data only. Quietly gathering eye movements data without messing around the UI, and then use the gathered data for better profile building, ads targeting etc. is actually a solid idea. Before, all the profile building technology stops at search and clicks. Google knows what website you clicks or searches, that’s how they build their targeting ads system that rakes in billions of ads dollars. But what if they can know which part of the screen get the most eye-balls? It’s definitely a step forward, both on precision and creepiness ironically.

Since camera has become so ubiquitous now, technologies like facial recognizing, eye tracking, gesture tracking will trickle down to our laptop and smartphones. Give or take, welcome to an era of new interactions.

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.