Shared publicly  - 
 
Yahoo! released their beautiful new weather app on Android! Congrats!
Of course the interwebs are OUTRAGE!  so I'm gonna talk about it...

Because I am hopelessly naive and idealistic I see this as an opportunity to talk about designing for Android, the role of guidelines and design consistency, innovation in design balanced against user expectations and consistency, and the "brand versus platform" issue.

So what's the big deal? Yahoo! made a beautiful app. It also happens to deviate in some ways from the Android Design Guidelines:
http://developer.android.com/design/index.html

Depending on who you are this is either "a brave and liberating stand for creative freedom, releasing Android from a stilted hegemony of cookie cutter designs," or "a horrifying violation of the one true design, confusing users to no end, and reinforcing the image of Android as an incoherent jumble." Yeah. 

Rather than dive into that fray, perhaps I can offer some perspective on what the design guidelines are for, and how you should approach them.

Maybe some day computers will tailor their interfaces exactly to each and every user, but until that day comes designers and developers need to make difficult decisions about how to present their functionality to their users. This is true for seemingly simple choices like what icon should represent "my profile", as well as far more complex choices like how exactly should scrolling decay over time, or at what delay should touch feedback be displayed in order to avoid flashing in appropriately when the user is trying to scroll.

These choices are hard not just because the problems are complex in of themselves, but they are extra hard because often times a single question can have many valid answers. This is made worse because some of those equally valid choices will interact with each other in unforeseen ways - some choices are fine by themselves, but actually kind of terrible when you consider other choices that you've made in the design.

That's where consistency fits in. The whole point of consistency is to make it easier on users to understand and use things. Let's take a trivial example. Say you're designing screw top lids for jars of marmalade. It would seem you could have complete creative freedom here right? I mean if you made the lid solid colored or checkered, short and wide or tall and narrow it'll work just fine right? Your primary concern is how well does the lid represent your brand right?

Obviously not. WIll your lid unscrew with clockwise rotation or counter clockwise rotation? By itself it's an arbitrary choice right? I mean they both open the jar. Of course we know that's not true. If you make your lid unscrew in a clockwise direction you will drive everyone crazy because everyone expects lids to unscrew in the opposite direction. 

Oh sure, it only takes a second to adjust. I bet in user tests of the bizarro world jars most users would eventually succeed at the task. No biggie right? Good luck with that. I hope we can all intuitively understand why this seemingly trivial inconsistency would become maddening. So unless you're interested in selling frustration instead of tasty fruit products, clockwise jar opening is a bad move.

Can you think of other ways in which your lid design is constrained? How about a lid which says, "Push to open" ? A lid with arrows in the wrong direction? Those are obvious, but then there's more subtle ones like the graphic pattern on the lid unintentionally implying the wrong rotation direction? In reality you could get away with doing all of those things because the power of convention is so strong most people would just try to open the lid by rotating counter clockwise. The point is convention and consistency is powerful.

But why not clockwise?!

Sure. Why not?

Imagine a country where everyone decided lids should open in the opposite direction. It might have happened - heck we can't all agree what side of the road to drive on so the fact we're on the same page when it comes to lids is kind of amazing. However if there was such a country and you did want to import your tasty jam to that country what's the right design? Do you stay "consistent" to your brand? (Here's a hint: Popular Japanese car brands in America do not have the driver's seat on the right hand side, and yet have tremendous international brand loyalty and recognition).

Oh sure, if you were the only source of jam in that entire country, you might be wildly successful! But would that make it a good design for users of that country? Would you really be proud of causing a million little bits of frustration every morning as your brand or innovation get in the way of legions of adorable doe eyed children and their morning treat?

Connecting this metaphor to the topic at hand is left as exercise for the reader.

Consistency and conventions are there to help your users. They help users get things done and not worry about how to get things done. Design guidelines are there to help you understand the consistency and conventions, especially if you're not from around here.

Does that mean you should slavishly adhere to all of them? Of course not. Especially if you have something new to add that brings unique value to your users. But if you're being different for the sake of being different, or simply because "that's how they do it in my country", you might find that you're not doing anyone any favors - even if they good naturedly tolerate your eccentricities. 

Also not all guidelines are created equal. Visual conventions like a color palette, typography, tactile vs skeuomorphic vs flat design approaches - these are all more about comfort and emotional acceptance than fundamental usability. If you try and sell homey distressed handwritten hipster jam in a culture that expects only clean bauhaus typographic jams you may find yourself rejected or appealing only to a small sub-audience. However if that's a conscious choice, particularly because the benefit is precisely in offering that specific emotional and aesthetic response, more power to you.

On the other hand conventions that relate to behaviours - especially behaviours that are invisible (like which direction do you have to twist the jar, what part of the UI element is a valid touch target, or what will happen when you scroll) - there's very seldom a benefit that's worth the frustration that comes with inconsistency - even brand or cross platform consistency.

If you do this you should be doing it consciously.

 As usual a good litmus test is "are you actually proud of what you've made?" If you actually saw somebody struggle or hesitate over that little inconsistency - both in your design and they when they go back to use the other products that they know and love on their platform - are you actually proud? If you met that person at a party and you heard them gush about how much they love your product and they're so happy they can use it, but they just wish one small thing worked they way they were used to - would you actually feel good about the part that frustrates them?

Here's where a pithy one line summary of my position would go - but it's hard to capture a nuanced position in a pithy one liner. Maybe :

Most of all, do the right thing - we're here to help if you'd like.

P.S. If it doesn't seem like we're here to help, that just means we're probably not doing a very good job. Just let us know and we'll try and do better!

P.P. S. Yes I wrote this post at breakfast, how'd you guess?
1192
405
Tim Morley's profile photoSteve Keate's profile photoCarlo Di's profile photoSebastian Ortega's profile photo
89 comments
 
Was bacon involved? If not, I will unfollow.... 
 
A little bit of an "either/or" argument when in reality there's a little more grey area. But still valid nonetheless.
 
It's nice to hear leaders talking about nuance, and the art of design decision-making as something other than a black-and-white rules...everything is all about what you're trying to accomplish, not just design! You put it wonderfully, +Matias Duarte :)
 
Really well written and explained
 
Amazing post! This is a better 101 design concept then any design books I have laid hands on.

Thanks +Matias Duarte .
BTW - Was that a cookie jar??
Umar Mustafa
+
19
20
19
 
It's almost as beautiful as your collection of shirts 
 
You should totally post this on #Twitter . But you'll have to cut off some letters words paragraphs, I guess...
kamal ahmed
+
19
20
19
 
I installed the yahoo app on my htc one but soon uninstalled because the app did not have an android menu button.... So on the htc one u get a black bar with a menu button on the bottom. Looks ugly
 
Or people can stop being crybabies.
 
Seriously?? Of all the metaphors?

Now I want jam... 
 
I think that inconsistency with no clear outcome is pointless. Now, the Yahoo! app is beautiful. It can remain beautiful, as shown in this mockup (http://androiduiux.com/2013/08/16/how-i-would-further-improve-yahoo-weather-app/) by +Taylor Ling. It keeps with most of the Design Guidelines, yet remains a beautiful, unique experience. The same can be said about the +Google+ app. It has a unique experience, but it also keeps with most of the Guidelines. Consistency ≠ Uniqueness. You can have both.

/rant
 
Well said. People are to literal about the guidelines.

More importantly. Jam is tasty :3
 
Like those legions of adorable doe eyed children being denied their morning treat, Yahoo is denying the legions of adorable Android users of established and consistent Android design guidelines. 

I would have expected more professionalism from a company as large as Yahoo. Considering who their CEO is it's even more bizarre that this level of reckless design would even be tolerated. I understand where her priorities are, but at least have some respect for the company that gave you the opportunity and put you there. 
 
Its not running smoothly on my GNEX fix pls.
 
guidelines are just that. That's why they don't say they are rules. Creativity should never be stifled. If it was, we wouldnt have CM mod, Paranoid Android etc. 
Carlo Di
+
9
10
9
 
+karthik Gopalan Did you read the entire article? Beautiful design is irrelevant if it's hobbled by frustrating and inconsistent design choices that go against the flow of every other application. It's actually possible to have a beautiful AND consistent design. Yahoo, apparently, is unaware of this process.
 
I wasnt specifically referring to the yahoo app. I was referring to design as a whole process. It shouldn't be restricted is my point. Guidelines as fine. As long as they are not treated as rules. Not defending the yahoo app in any way what so ever. 
 
Please change the shade of green in Google Play's Apps section. It hurts my brain :(
Hunter Caron
+
19
20
19
 
Dude, if you wrote a book I would buy the hell out of it.
tobby o
+
1
2
1
 
Reference removed, this is serious business.
 
I love these long posts! More, please! :)
 
I personally like the layout the app provides. Its nice. I dont use any yahoo services but this app alone could be a stand alone entry to further yahoo services for some.
 
Now that I read it, here's my summary:

. If you're going to design something, stick to your ideas and stand your ground.
. UIG is a framework you can diverge from
.. If you're going to diverge from the UIG, you best be knowing what the hell you're doing.
. Having something you're proud of, that works well and that users like is worlds better than blogs chanting  #holoyolo at you.
 
In the end it's all about a set of rules that following them will make your app more natural for the user to use. The user is expecting a standard, deviating from this standard will lead your app to either a failure or success. Although success is only a place for the few...thanks +Matias Duarte 
 
I particularly enjoy the soft menu key appearing and having no use whatsoever.
 
I don't mind that slightly different layout. It's good that android is no longer a place where every app is based on different principles but if someone really wants everything to be subject to rigorous criteria then there is 'the other company' that specialises in that. All that said I think the basics of jar-opening are a little older than ui design.
P. S. I hate sweet food for breakfast 
 
+Umar Mustafa Agreed. Must find out where those shirts come from and personally I am hoping that he writes a "How to Dress like a Designer" book someday. 
 
Doesn't matter if it has great visual design if it has an always running service. I have too many apps installed with always running services as it is and installing this makes the process thrashing even worse. Problem with developers testing on clean developer devices with no other apps installed. 
 
On Twitter I was trying to say, you are Google design guys, you should make efforts to standardize UIs, I'm a Linux user and I understand how difficult is to make an app for GTK, Qt users... and don't scare non geek users, well, on android should be the same, we could have a grandpa using android, he is happy with android gestures and common interfaces, he maybe know how use some specific apps like flipboard and this yahoo app, now he download another "unique app" like ms office, he would hate the device, finding it a complex device... I'm not saying Yahoo app isn't beauty because it really is, but it's a Google responsibility to make generic standards to avoid this problems. Of course, I can't blame Android, it's nature it's to be a free platform, no crazy restrictions, but Google play should make a enterprise vision and not make an entropy of android app user experience, just that.

I really don't think yahoo polemic app it's bad, but seems to simulate some native android design guidelines, but really aren't they, that shouldn't be really praised, it's a beauty app, just that.
 
The best part is their "sharing animation". Made my day.
Absolutely agree with this post.
 
Wow people are really that bothered about the yahoo weather app? I think it does look beautiful and brings something else to the table. My only gripe would be its handling of the sidebar/menu thingy, but other than that, can we really complain? 
 
Nice. Feels like a free college lecture! Thank you. 
 
Its the first time in my history I have downloaded anything Yahoo. Its also the second time in my history I ever downloaded something Yahoo.
I loved it enough I started a flickr account as well and started contributing to photos in my area.
Yahoo did something right. Everyone complaining can go open their artisan hipster jam. 
 
+Matias Duarte Great post to teach app designers/developers the importance of design. I guess App designers/developers have to learn to  accept the fact that IOS is a minority platform and it's share is going to decline more and more as more time goes by. Android will win in numbers and eventually the balance of new and better apps will be in favor of Android. The move has already begun so it's up to the developers to accept the fact or live in their Fruity world and slowly loose relevance along with a shrinking platform.
Google has done a lot with new tools to make developers life easier....Just my 2 cents
 
This rant is very Apple-esque, and that's probably a good thing. It means Android conventions deserve to be observed. But most ports fall down long before they get to the UI conventions. They don't use SyncAdapter instead of synchronous CRUD-over-Internet. They don't implement any intents or APIs. They don't do anything useful in the background.

As others have pointed out, Google's apps with a distinctive L&F are justified, and so is a distinctive L&F for Yahoo's apps, if it is worthwhile and consistent. If you want an example of dubious priorities, look no farther than Keep, which isn't integrated with the to do list in the calendar and doesn't have a Share command. But damn it has slide-in cards!
 
Should give us an option to hide the software keys to make the app look truly beautiful. Not just the Yahoo app but every app. Android 5.0 should give us the option to make the software keys appear by gesture. 

Full screen apps are beautiful and black software keys tied to the bottom of the screen kill the look. Especially in the new Yahoo app.
 
I couldn't help thinking of Firefox while reading this...
 
I'm not a designer or programmer, but that was very interesting to read, +Matias Duarte :) 
 
Personally I like apps to push the boundaries and show alternative UI's - for a few years now any.do has had an awesome UI that I think is far more attractive and engaging than the inelegant Android design standard. Google need to to look at apps like these and learn from them rather than criticise them for not fitting the cookie cutter mould that leaves us with drab looking apps.
 
Now I have to try their weather app to see what all this is about.

Edit: Huh, yeah, it's an odd bird. Thing that actually stuck out at me the most is that scrolling down precisely 3/4 a screen to see the forecast is a weird mechanic for the second-most-used feature besides startup. Something like Feedly's (also nonstandard!) card-flipping mechanic, where basically any flick upwards scrolls by one screen, would still let you see the forecast "by scrolling", though you'd have to have some cue to n00bs that it's possible. Or, they could do something boring like have a link.

But also, the legacy menu button shouldn't be there and the side drawer should work like everyone else's (open with a swipe, close on Back or swipe), which'd force them to get rid of side-swiping to switch cities. No one is really going to reorder the later sections either, so long-press-to-reorder and those subtle grippy things on the corners could disappear entirely. I can bear the visual quirks; blurring/darkening the photo as smaller text scrolls in at least feels thoughtful. Indeed, suspect Yahoo! wouldn't've put much effort into their weather app at all if they couldn't put some bio-digital Yahoo! jazz in it.

I've never seen the iOS version. I wonder to what extent the problem was a hasty port without consideration for Android conventions versus just a mixed bag of good and bad new UI ideas.
 
Great article! 
By the way, may I translate your article to Chinese and post to my blog? I'll note the article is from +Matias Duarte . 
 
There's still two objective problems, that stand out glaringly:

1. Menu button. Looks ridiculous on phones without one.
2. Sliding pane doesn't track my finger when I drag. 
 
+Matias Duarte I think it is too simplistic a comparison with the mermalade jar lid. We're not saying innovative design should invert the conventions, like cars with left-hand/right-hand drive, or more specifically, you changing OK-Cancel to Cancel-OK (starting from Honeycomb), these are disruptive but does not add any value to the existing design. But what if a new design out performs the existing design. Like the sidebar which you have adopted, moving away from the popup menu. Who will make these innovations? What if my marmalade jar just opens up when I put my finger on the lid? Isn't it much better and more intuitive as well?
Are the Android design guidelines against such futuristic (simple and much better) designs? Or is it even appropriate to keep the creative decision making process only to a bunch of Googlers rather than have a larger crowd of designers take part in it? I agree this could add a lot of noise/clutter to the eco system, but how else can we evolve.

Have been designing for Android from  Cupcake, but lately I am really skeptical to think creatively, because it's not much encouraged by the community/evangelists. I get the reason behind it, but hope we can find a better solution where in we can slowly infuse fresh design paradigms into the ecosystem.

If not guys like me, atleast people like Yahoo! who have an awesome bunch of designers should be allowed/encourage to experiment and innovate around design.
Paul W
 
+Jaime Martinez that exists already.

+Steve Keate Firefox are incredibly consistent with the design guidelines. What exactly do you feel is missing? 
Paul W
 
In regards to the app, I think +Taylor Ling got it spot on. You can achieve the same design and conform to the guidelines. That way, users without a menu button don't get shafted. There is a world outside of Nexii and Galaxies. 
 
It could have been an awesome daydream, unfortunately there is no daydream included, it probably takes only a half hour to add this. I would use it if it was included.
 
The primary thing that Yahoo deviates from is its own APIs, which continually breaks compatibility with the clock/weather widgets in existing ROMS, thus rendering them useless.

Personally I think a far better solution would be to just stop depending on a company as unreliable as Yahoo, and switch to another weather data provider, or better yet some kind of decentralised system that doesn't depend any commercial interests, of the feckless variety or otherwise.
 
+Paul W : Yes I did. What exactly makes you arrogantly presume I didn't?
 
+Paul W it's not built into stock android as it should and I'm not one of those people who root and put custom ROMs on my phone.

So no, it doesn't exist.
 
+Paul W : Please explain what is "off topic" about pointing out that Yahoo breaks its weather API, in a post about the Yahoo weather app and Yahoo's failure to adhere to standards?
Paul W
 
+Jaime Martinez sorry my bad, just checked and you can't hide it, though you can minimise it. It was covered on Android Design in Action and I forgot. 
Paul W
+
1
2
1
 
+Homer Slated This is about design, you're talking about development. One is about how an app looks and the other is about how any particular app communicates with Yahoo owned services. 
 
I can't fault Yahoo's devs, I grasped how to work the app in minutes, and it IS beautiful (if less informative than others that I prefer).

Would someone please club Weather Underground's Android devs over the head and send them to Yahoo for some tutoring? ;-) 
 
+Matias Duarte Excellent piece, your examples apply to far more than just app design. Developers of just about any product line would benefit from reading this.
 
+Matias Duarte hats off to you for even spending one breakfast to write this post! The point is really that Yahoo! has gone ahead and done exactly what the other bigwigs like Apple and Microsoft have been doing for a while now - steal from others and try to pretend like they have something better of their own now. We all know how that story is unfolding for both of them. However, there's a stand to be taken against hapless stealing in the hopes to be different for the sake of being different. I am sad to see such misplaced sense of self-righteousness on the part of Yahoo! The true designers and developers of the Android platform agree a 100% with you. 
 
+Paul W : Your limited interpretation of relevance is of no interest to me. Yahoo's casual disregard for standards is the point, whether it affects network APIs, GUIs or anything else.
 
Meanwhile, the app is crap because it's not as timely, accurate or reliable as the National Weather Service.  Which, it's kind of a bummer NOAA doesn't have an official app.  +NOAA Weather is almost there, but it lacks a status-line persistent status with the current local conditions, and the author doesn't implement notifications or alerts for severe conditions claiming that the CMAS will handle that.  Which might be true if you're someplace that has more reliable CMAS/voice service than data, which isn't something I've observed for most of the midwest.
 
The only app that gives me my local weather is Accuweather. Every other weather service only gives me the weather for my nearest city, which for me is 30 miles away.

This might be more useful if I ever actually went into that city, which I don't, or if its weather conditions were even remotely similar to those in my high altitude locale, which they aren't.
 
All this talk about the Yahoo Weather app and no mention of the fact that it is a battery killer.

In my experience, battery is one of the top concerns of Android users, and yet here we have a high-profile app that abuses users' battery to an unnecessary degree (IMO), and it gets no attention.

Maybe I'm wrong to accuse it such (does a weather app really need the 'run at startup' permission, but I think this issue is worth discussion too.
Translate
 
+Matias Duarte an alarm clock app named Timley came out today ( https://play.google.com/store/apps/details?id=ch.bitspin.timely ) and its interface reminded me of what you explained in this post. I'm not a designer but it seems to me that this app follows the guidelines just enough to make users feel comfortable while also implementing many new and interesting ideas. I think it looks gorgeous and its a joy to play around with. It'd be nice to hear (read) your thoughts about it!  
 
+Matias Duarte But see, from your perspective, Android is the product. However, sometimes as designers, we are working with clients who extend Android and have their own platform, user research, design patterns, and legal constraints. Or we are working on a multiscreen experience where users expect certain interactions to be the same across multiple platforms. We can't always follow the Android UI guidelines. If all of you great people at Google could respect that, it'd be awesome.
 
Matias porque yahoo ase lo que quiere y siempre an amado a ios y ponen su estupidos iconos en una app para android .para mi qyr soy un amante de android puro ,es una falta de respeto.saludos desde chile
Translate
 
When android or nexus phones could have a hardware standard, just like DSLR, to have different combinations with different accessories. This would be amazing
 
Yahoo app is pile of junk bloatware
 
I installed Yahoo Weather after reading this article, just to know what was all about... I had no clue on how to use it! Yes, it is beautiful, but useless if I cannot change the units, or set my location. So i agree creativity is good, but is also important to adhere to the platform conventions your program is running under.
 
I just realized that if you run the application in portrait mode, all options becomes available. I was running on a tablet in landscape mode. Now... I just loved it! It might be different, but not difficult to use at all.
 
+Luis C. Castro Skertchly that landscape vs portrait thing you just described is a problem itself.  Why is the app "useless" in landscape mode? I have my Prime almost always docked so the app is useless for me in my tablet.
 
Latest Yahoo! Weather app looks beautiful and stunning, but I totally agree with the Consistency and Convention, they just need to adjust a bit without sacrificing aesthetic of it, I think its kinda easy, don't you think?
 
Matias; serious question — what's your opinion about Google violating Apple's HIG by using Android–like share buttons in their iOS apps?

If Google strongly wants platform developers to use Android design patterns and motifs, why doesn't it care about following Apple's wishes on iOS?
 
+Alan Zeino Iconography is an interesting middle ground between the visual emotional and brand elements of a platform and the functional elements. Some icons have become universal, like the magnifying icon for search. Others are strongly branded, like the +1 or thumb up. Share sits in a middle ground where many consider it a brand element of their platform or service, while it is at the same time being so ubiquitous that recognition is important. There's many other "universal" icons in the HIG that popular services deviate from because they feel that their unique spin does not hamper usability and is part of their brand. Consider the Twitter compose button with it's fanciful quill.

The share icon Google uses in it's properties (and the share icon that Android endorses) is an opensource icon and one that we feel well describes the connective nature of sharing. In a sense you could say we believe it's part of our brand and  that Google's brand is to embrace the open and universal standard.
 
I love the Yahoo Weather app. It's just perfect.
Add a comment...