9 ms·

Android Design

437 points by rtsuk 15y ago

aw3c2 15y ago
I know it is silly and offtopic but that gorgeous website's navigation does not work without Javascript for no good reason.
alexchamberlain 15y ago
I like the density-independent pixel concept...
kevinh 15y ago
The website felt odd to me. It's clearly aimed at developers, given the subject material, but it felt like it was written as an ad for prospective buyers. It listed a bunch of features and user interface methods that apps should have, but I couldn't find any resource for actually implementing what they suggested, apart from the link to the android developer page at the end.
- alexchamberlain 15y ago
  Isn't it for Designers, rather than Developers?
  - notatoad 15y ago
    Designers, managers, or any other project stakeholders. Many of whom may have the same understanding as customers.
- wattjustin 15y ago
  I completely agree. The wording is so basic and kind of insulting as seen here for instance, "Text fields allow the user to type text into your app. They can be either single line or multi-line." Very elementary for either a developer or a designer to read.
  - deleted 15y ago
    [deleted]
  - feralchimp 15y ago
    If the goal is to bring devs in from other platforms, who might have all kinds of crazy notions about what Android dev entails, erring on the side of over-simplification will give more people the sense that "hey yeah, not so hard."
- aChrisSmith 15y ago
  I think it might be too early to pass judgement. I would hope that over time Google releases sample applications, better widgets, and so on to take care of the boilerplate. (Similar to HTML "grab and go" type sites.)
wmf 15y ago
Do they have a schedule for when Google's apps will follow these guidelines?
- deniz 15y ago
  This really appears to be for Android 4.0+. Google's core apps follow these guidelines but Android 2.3 down seems to be left behind. I'm not sure as an Android developer I'm ready to leave those users behind just yet which means a lot of extra work maintaining 2 different sets of UI code. The action bar is the killer.
jc4p 15y ago
As an Android developer for many years I was excited when I read the blog post about the site. When I went to the site, I was very disappointed. I've spent the better part of 10 minutes on the site so far and haven't seen anything other than marketing text and screenshots of what my phone looks like. How do I make these "beautiful designs" work across all Android phones? How do I use an Actionbar on a non 3.0+ device without external libraries? How can I supply a consistent look and behavior for my application when some android OEM keyboards don't even offer the same modules as other ones? How am I supposed to follow these guidelines when every Google application has a different implementation of the Actionbar itself?
- Pewpewarrows 15y ago
  The link at the bottom to the core developer site shows you how to implement most, if not all, of what they discuss here. Though it would be nice if they had links interspersed throughout the design text to their tutorials and API guides about the UI features. http://developer.android.com/index.html http://developer.android.com/index.html
  - jc4p 15y ago
    That's definitely true, I don't know why they didn't put a "click here for more technical info!" next to each point. The things that really bother me are: 1. If I implement one of the new themes they're discussing on the linked page, it only works in 3.9% of Android phones on the market, so if I want my apps to look like Google's on older phones I'm left to implement my own version of the themes. This is the same thing that happened when they announced "Homepages with square buttons for activities are the new way you should do everything!" and didn't release source code for how to do it for years afterwards with the Google I/O app, so every app that tried it did it a different way. 2. How am I supposed to use the action bar if Google's own applications can't decide on how to use it? Look at the "What's up with the bar" section of this blogpost: http://minming.posterous.com/google-currents-yet-another-contribution-to-t http://minming.posterous.com/google-currents-yet-another-con...
    - 15y ago
Pewpewarrows 15y ago
This is a long overdue but very well put-together UI and Usability Guide for Android Developers. My only qualm from reading it thus far is the very last section under Navigation [1] regarding System-to-app navigation: "For the Back key, you should make navigation more predictably [sic] by inserting into the task's back stack the complete upward navigation path to the app's topmost screen." No. This piece of advice is the sole reason why the back button is confusing to users. Injecting activities artificially onto a user's Back Stack based on some arbitrary and imaginary path that they might have taken to get there is horrible. If I'm in the middle of reading a book and get an email notification, and I touch that notification to quickly read the email, that Back button better damn well take me BACK to what I was doing. Don't take me UP to the list of emails in my inbox. This is where the average user will become lost and not understand why they aren't taken back to reading their book, and will just end up touching Home out of frustration. Bad Google! [1] http://developer.android.com/design/patterns/navigation.html http://developer.android.com/design/patterns/navigation.html
- estel 15y ago
  I'm not sure where I stand on this; and it's possible the context should determine the behaviour. But equally, perhaps Google just want consistency?
- jra101 15y ago
  The ideal behavior would be if the app is launched via another app it should not touch the back stack. If I launch the email app from the home screen or app folder, it should populate the back stack so that hitting back brings me from the email I had open to the inbox.
- dminor 15y ago
  I happen to like this functionality and don't think it's confusing at all. As long as pressing back eventually gets me back to where I was before it's just fine.
  - barrkel 15y ago
    In the email app (not the gmail app, the email app) I frequently have to press back 20 or more times, bouncing between earlier emails I read, before I get back to the app that I was on before the email notification popped up. Whatever way you look at it, that's pathological behaviour.
ge0rg 15y ago
Utterly worthless. This looks like a web designer on crack had too much time to promote the beauty of the new Android. However, from a developer's point of view this is almost unusable. By not providing the according XML/Java code, we are forced to reimplement everything from scratch, making smaller and larger errors, introducing inconsistency and making the look and feel not quite the same between apps. Then again, it fits well with the current way Google is doing UX design (http://minming.posterous.com/google-currents-yet-another-contribution-to-t http://minming.posterous.com/google-currents-yet-another-con...).
- manmal 15y ago
  Some of the pieces DO work (48dp as hit-target is a good advice, and colour palette etc. is pretty usable). I think it's a good start for all the Android devs (non-designers) who put apps together which are 99% crappy looking. I am quite frustrated however that they do not tell us how to get the same behaviour on older devices - they should release a look-and-feel compatibility library or something. Actionbar is also very inflexible (tabs with buttons in one row, anyone? adjustable tab width?) and making the same code work for 2.x - 4.x devices is just plain spaghetti.
- f7u12 15y ago
  I found the site by way of an @AndroidDev tweet [1], and I was incredibly frustrated. Their old documentation [2] was completely useless, and this is even worse. Am I supposed to purchase and learn proprietary design tools to develop an effective Android app? This turns me off to the platform as a whole. [1]: https://twitter.com/#!/AndroidDev/status/157570583800971264 https://twitter.com/#!/AndroidDev/status/157570583800971264 [2]: http://developer.android.com/guide/practices/ui_guidelines/index.html http://developer.android.com/guide/practices/ui_guidelines/i...
- drivebyacct2 15y ago
  All of the UI elements are available in source provided by Google. Koush (on Twitter) tweeted with Tim Bray about them being split out into a more-easily-consumed library.
  - 15y ago
adpowers 15y ago
Ha! I love that they are using Hipster Ipsum: http://developer.android.com/design/static/content/ui_overview_app_ui.png http://developer.android.com/design/static/content/ui_overvi... http://hipsteripsum.me/ http://hipsteripsum.me/
emehrkay 15y ago
I like the date picker http://developer.android.com/design/building-blocks/pickers.html http://developer.android.com/design/building-blocks/pickers....
- jc4p 15y ago
  Fun fact: the up and down arrows work exactly opposite how you expect them to.
  - emehrkay 15y ago
    Hilarious because i've been flip flopping on how they worked. The arrows seem to be a paradigm from mouse-based computing, can you scroll these lists like on ios?
    - jc4p 15y ago
      If you scroll them they actually remove the arrows and make a lot more sense. Before you drag: http://i.imgur.com/4MUXO.png http://i.imgur.com/4MUXO.png After you press to drag: http://i.imgur.com/BqXMY.png http://i.imgur.com/BqXMY.png To be fair, it's a huge improvement over: http://i.imgur.com/2exF7.png http://i.imgur.com/2exF7.png
      - BrianHV 15y ago
        As a day 1 Droid user after 10 years on Palm OS, I was stunned that the control in your third picture made it into a release, and even more stunned it persisted so long. On Palm OS you could pick a time with a maximum of three taps. There's no reason it should take more than five: one for each digit plus AM/PM. I'm not a fan of the swiping, but you're right. It is a huge improvement.
        jc4p 15y ago
        At my job the application we're currently working on is aimed for Android 2.1 and above so we can't the new TimePickerDialog. I actually had testers come up to me and report bugs about the Android TimePickerDialog as bugs in our application saying that it didn't work as expected and it was against the UI specifications (which of course only have pictures for the iPhone version of the application). I had to actually replace them with two dropdown sliders and a button so that the testers would be happy.
njs12345 15y ago
This is great! If apps start following this it should significantly improve the Android user experience, as well as making it much easier to design good Android apps.
krosaen 15y ago
I like this bit on using multipane layouts to be flexible on both tablets and mobile: http://developer.android.com/design/patterns/multi-pane-layouts.html http://developer.android.com/design/patterns/multi-pane-layo... Good advice for rich web apps too.
georgechen 15y ago
Am I missing something? I'd like to get my hands on the templates, mocks, wirefames, etc. Let me play with those (as a designer) and I'll be able to better follow the specs and guidelines. Note: Microsoft (for once) actually one-up Big G. here. They provide the PSD and fonts for Windows Phone 7 on MSDN + the UX Guidelines. Also, for Apple, 3rd party made all the PSD and templates for them...
- mdwrigh2 15y ago
  There's some third party work done for Android as well: http://designmodo.com/android-kits-developers/ http://designmodo.com/android-kits-developers/
  - georgechen 15y ago
    Thanks. Nice. But since Big. G. is heavily pushing ICS, they should really put the ICS files up there.
- amirkhella 15y ago
  I've recently updated Keynotopia templates to include Android ICS UI components for Keynote and PowerPoint (http://keynotopia.com/android-prototyping-templates/ http://keynotopia.com/android-prototyping-templates/)
  - nielsandersen 15y ago
    Great resources on your site. Should you ever feel inclined to port your stuff to Axure you have at least one paying customer right here.
- njs12345 15y ago
  One of the nice features of the Android hierarchy viewer (provided with the Android SDK) is that it lets you dump your app's visual structure as a PSD with layers - very useful for working with a designer. Ask your developer!
  - 15y ago
amirkhella 15y ago
I think this is the most consistent UI for Android so far. It still feels a bit more like a "style guide" rather than "human interface guidelines", but it's a great step forward. Kudos
evanw 15y ago
Regarding the Design Principles page: http://developer.android.com/design/get-started/principles.html http://developer.android.com/design/get-started/principles.h... I love that they included the ICS home screen's "glass desktop" effect in the "Delight me in surprising ways" section (http://developer.android.com/design/static/content/principles_delight.png http://developer.android.com/design/static/content/principle...). It's a completely unimportant feature, but the first time I swiped past the edge of my rightmost homescreen and saw the effect, I appreciated the attention to detail. Where I disagree is with their "Pictures are faster than words" suggestion. I completely agree that many things are best said with images, but I've had a hard time identifying the function of several features in the icon-driven UI's featured in both ICS and in new Google web redesign. In ICS's Gmail app, I'd understand the words "Mark Unread" much quicker than the "sealed envelope" icon which I had to experimentally discover. It's also interesting to note that in ICS Gmail, Mark Unread is an icon and Report Spam is text, where in web Gmail, Mark Unread is text and Report Spam is a stop sign.
- drivebyacct2 15y ago
  I'm not saying it's right or good usability, but the new "picture based buttons" can be long-pressed for a textual toast-style popup that tells you what they do.
- radley 15y ago
  Google is heavy on logic but weak on intuition. Why their designs seem to look good but are hard to follow.
vlokshin 15y ago
Simply put, and coming from an Apple fan-boy, this is REALLY nicely done. I honestly think this will significantly improve the usability of the platform as a whole by attracting the right designer/developer talent.
JacobIrwin 15y ago
For Android/Google on web, it's possibly the most apple.com-like designed page I've seen yet.
swanson 15y ago
I kind of agree with the sentiment that a few others are having. I've spent the past 4 months working on an Android project and when I opened this page I was in shock. Everything looks so awesome and shiny - but where is the actual implementation? Is this stuff just a ICS theme (I haven't used it myself as our app is in 2.2 land)? Others pointed out to check the "Developer" link - but that is just the standard Android docs I've been digging through for months already. Searching for things like "Index Scrolling" (which would be awesome to add to an app) or "Switches" doesn't return anything useful - so what are the Building Blocks and how do I get them into my app? This page should either a) include demos (or links to the demos if they exist already) or b) be embedded in the code docs (android.widget.GridView should show the screenshot and UI guidelines).
- myko 15y ago
  I think by Index Scrolling it means to use the SectionIndexer interface: http://developer.android.com/reference/android/widget/SectionIndexer.html http://developer.android.com/reference/android/widget/Sectio... It would be amazingly helpful if they would link from the 'Android Design' page to the docs exactly what they are talking about.
pax 15y ago
Why did choose to put 2 phones on the homepage? Because one phone has 3, the other 4 buttons? Isn't that still a bit redundant. (If it where not for a design-centric page it wouldn't have troubled me)
- there 15y ago
  because part of that site talks about compatibility with different devices. the phone on the left is a nexus s, which has the (now) older style of dedicated hardware buttons. the nexus prime on the right is apparently what newer devices are supposed to have, which are software buttons that are actually just part of the main lcd and the operating system reserves a section of the screen to draw them in software. the big benefits of the newer style are that they can be hidden while playing movies or in other situations where they are not needed, they can be rotated when the device is rotated, and, maybe most importantly, the operating system now gets to control which buttons are there and in what order they're in. an annoying thing about the hundreds of different android phones prior to this was that every manufacturer seemed to put the 3 or 4 hardware buttons in a random order that made them inconsistent.
rwc 15y ago
I know some will criticize this is ticky-tacky, but it's one small thing that, when added with a lot of other little details, make Android feel like it's still designed by engineers. They've "touched nearly every pixel" and "App icons are works of art in their own right" but the contact name on their contacts icon is "Lorem Ipsum". Not exactly a warm, human feel. http://developer.android.com/design/static/content/design_elements_landing.png http://developer.android.com/design/static/content/design_el...
- alex_c 15y ago
  "Lorem Ipsum" is more of a designer thing.
- sp332 15y ago
  Lorem Ipsum is supposed to show you the "experience" of the design, and leave out any emotional or cognitive associations you might have with specific text. It's used as a content-free placeholder in design. It really has nothing to do with "engineers".
fufulabs 15y ago
Isn't ICS like just around 0.5%(or was it 5%) of Android handsets as of December 2011? This design guide is ALL about ICS and nothing about the 99% of the Android handsets used by people.
- thetrendycyborg 15y ago
  in 2 years everyone will have ics or better. carrier contracts.
  - nailer 15y ago
    That's kinda sad, compared to Apple, Microsoft, and RIM. ICS fixes bugs too. People shouldn't have to deal with them until they buy a new phone.
feralchimp 15y ago
I'm going to assume the internet has already somehow collectively dealt with the fact that the Android name for a drop-down list control is a "Spinner."
- thetrendycyborg 15y ago
  it doesn't always drop down. Sometimes it "drops" up, like if the element is at the bottom of the phone. You can "spin" through options. Makes sense.
problemspace 15y ago
I tried browsing this on my old Android phone... I couldn't get past the first page. I hope "people should be able to read your content" is one of the guidelines...
helpbygrace 15y ago
Does anyone know how to see Roboto font as anti-aliased in Windows7? In my windows 7, Roboto font looks really jagged and weird.
- AliCollins 15y ago
  Likewise on my XP Laptop in Chrome...and I have Roboto TrueType font installed. Then un-installed the font, and it looks far better!!
astrodust 15y ago
"Android Design" .../index.html It's the little things that matter. This is shameful for a company so big.
- ranebo 15y ago
  I'm confused, why does this matter?
  - astrodust 15y ago
    From a technical perspective, littering your URLs with implementation debris is not a good idea. What if you want to revamp the site, put it in a shiny CMS, and now it's in PHP or JSP or does it even matter? You have all these references to `index.html` you have to maintain or you'll be wrecking your linkage. Bury those. If you're doing a plain HTML site, use MultiViews to hide the extensions. They're not important to the content. When I see `index.html` in a URL, it's never a good sign. It's done by a sloppy "web designer" that knows how to use DreamWeaver and FTP things to the server. They make a tremendous mess for the next team that has to come along and somehow upgrade the site without breaking everything. It's not 1998 any more. You can afford to script your pages, have clean URLs, and still get great performance.
kizza 15y ago
Interesting how they make sure to say that you shouldn't use bottom tabs like in iOS. For my project I decided to do exactly that instead of using an Android standard action bar, because: 1:The bottom bar fits 5 items. An action bar needs to have the app name as well, which means it can't have 5 items anymore. Having a "More" option is just dumb. 2:The iOS bottom bar has text underneath its icons and the action bar doesn't. I'm afraid the icons I have aren't obvious enough without text. 3:This is a conversion from iOS so the images are already made 4:Getting an Android action bar to work on older versions is very difficult. The Android compatibility library doesn't help here, and the third party libraries I looked at were not mature enough. I'm doing this work as part of a fixed price contract so I can't waste days getting it to work reliably. Bottom line: Android apps would look a lot better if doing things the right way was also the easiest way.
- thetrendycyborg 15y ago
  you can break out tabs into a separate action bar or use scrollable tabs. You're using elements from another platform your users don't use. You're just going to confuse or annoy them.
  - kizza 15y ago
    For sure, but like I said, I don't have days to spend making half-baked action bar code work.
saket123 15y ago
This site is really useless. As an android developer I was hoping for more steps rather then another marketing docs. Its funny how little android provides out of the box and I have to just keep searching source to find how things are implemented and best way to implementing such designs. Sad state of affairs as I have to waste most of my time trying to understand these designs and corresponding code designs in source. Another thing I hated about the website is how sparse it is in technical details. If Google really hopes us to make use to these pattern why not release some of these as widgets or templates.
fdb 15y ago
I find the "app structure" schematic (http://developer.android.com/design/patterns/app-structure.html http://developer.android.com/design/patterns/app-structure.h...) a very useful visualization to see the screens of an app in one glance. Any ideas how they made this schematic?
nodata 15y ago
I wish they'd make this searchable. This is from Google after all. Does a button marked "on" indicate it is already on, or that pushing the button will make it "on"? I'd like to see that standardised.
buro9 15y ago
All we need now is an accessibility document for Android. Accessibility is notably absent from the design doc.
funkyboy 15y ago
Finally!. Isn't too late? Are OEM and carriers going to follow the same principles? Or they can build whatever skin/mess they want as they did so far?
funkyboy 15y ago
Google, good work on the Android design guidelines, but is that enough to tame the wild west in the marketplace and the current "anarchy"?

437 points by rtsuk 15y ago

aw3c2 15y ago

I know it is silly and offtopic but that gorgeous website's navigation does not work without Javascript for no good reason.

alexchamberlain 15y ago

I like the density-independent pixel concept...

kevinh 15y ago

The website felt odd to me. It's clearly aimed at developers, given the subject material, but it felt like it was written as an ad for prospective buyers. It listed a bunch of features and user interface methods that apps should have, but I couldn't find any resource for actually implementing what they suggested, apart from the link to the android developer page at the end.

alexchamberlain 15y ago
Isn't it for Designers, rather than Developers?
- notatoad 15y ago
  Designers, managers, or any other project stakeholders. Many of whom may have the same understanding as customers.
wattjustin 15y ago
I completely agree. The wording is so basic and kind of insulting as seen here for instance, "Text fields allow the user to type text into your app. They can be either single line or multi-line." Very elementary for either a developer or a designer to read.
- deleted 15y ago
  [deleted]
- feralchimp 15y ago
  If the goal is to bring devs in from other platforms, who might have all kinds of crazy notions about what Android dev entails, erring on the side of over-simplification will give more people the sense that "hey yeah, not so hard."
aChrisSmith 15y ago
I think it might be too early to pass judgement. I would hope that over time Google releases sample applications, better widgets, and so on to take care of the boilerplate. (Similar to HTML "grab and go" type sites.)

wmf 15y ago

Do they have a schedule for when Google's apps will follow these guidelines?

deniz 15y ago
This really appears to be for Android 4.0+. Google's core apps follow these guidelines but Android 2.3 down seems to be left behind. I'm not sure as an Android developer I'm ready to leave those users behind just yet which means a lot of extra work maintaining 2 different sets of UI code. The action bar is the killer.

jc4p 15y ago

As an Android developer for many years I was excited when I read the blog post about the site. When I went to the site, I was very disappointed. I've spent the better part of 10 minutes on the site so far and haven't seen anything other than marketing text and screenshots of what my phone looks like. How do I make these "beautiful designs" work across all Android phones? How do I use an Actionbar on a non 3.0+ device without external libraries? How can I supply a consistent look and behavior for my application when some android OEM keyboards don't even offer the same modules as other ones? How am I supposed to follow these guidelines when every Google application has a different implementation of the Actionbar itself?

Pewpewarrows 15y ago
The link at the bottom to the core developer site shows you how to implement most, if not all, of what they discuss here. Though it would be nice if they had links interspersed throughout the design text to their tutorials and API guides about the UI features. http://developer.android.com/index.html http://developer.android.com/index.html
- jc4p 15y ago
  That's definitely true, I don't know why they didn't put a "click here for more technical info!" next to each point. The things that really bother me are: 1. If I implement one of the new themes they're discussing on the linked page, it only works in 3.9% of Android phones on the market, so if I want my apps to look like Google's on older phones I'm left to implement my own version of the themes. This is the same thing that happened when they announced "Homepages with square buttons for activities are the new way you should do everything!" and didn't release source code for how to do it for years afterwards with the Google I/O app, so every app that tried it did it a different way. 2. How am I supposed to use the action bar if Google's own applications can't decide on how to use it? Look at the "What's up with the bar" section of this blogpost: http://minming.posterous.com/google-currents-yet-another-contribution-to-t http://minming.posterous.com/google-currents-yet-another-con...
  - 15y ago

Pewpewarrows 15y ago

This is a long overdue but very well put-together UI and Usability Guide for Android Developers. My only qualm from reading it thus far is the very last section under Navigation [1] regarding System-to-app navigation: "For the Back key, you should make navigation more predictably [sic] by inserting into the task's back stack the complete upward navigation path to the app's topmost screen." No. This piece of advice is the sole reason why the back button is confusing to users. Injecting activities artificially onto a user's Back Stack based on some arbitrary and imaginary path that they might have taken to get there is horrible. If I'm in the middle of reading a book and get an email notification, and I touch that notification to quickly read the email, that Back button better damn well take me BACK to what I was doing. Don't take me UP to the list of emails in my inbox. This is where the average user will become lost and not understand why they aren't taken back to reading their book, and will just end up touching Home out of frustration. Bad Google! [1] http://developer.android.com/design/patterns/navigation.html http://developer.android.com/design/patterns/navigation.html

estel 15y ago
I'm not sure where I stand on this; and it's possible the context should determine the behaviour. But equally, perhaps Google just want consistency?
jra101 15y ago
The ideal behavior would be if the app is launched via another app it should not touch the back stack. If I launch the email app from the home screen or app folder, it should populate the back stack so that hitting back brings me from the email I had open to the inbox.
dminor 15y ago
I happen to like this functionality and don't think it's confusing at all. As long as pressing back eventually gets me back to where I was before it's just fine.
- barrkel 15y ago
  In the email app (not the gmail app, the email app) I frequently have to press back 20 or more times, bouncing between earlier emails I read, before I get back to the app that I was on before the email notification popped up. Whatever way you look at it, that's pathological behaviour.

ge0rg 15y ago

Utterly worthless. This looks like a web designer on crack had too much time to promote the beauty of the new Android. However, from a developer's point of view this is almost unusable. By not providing the according XML/Java code, we are forced to reimplement everything from scratch, making smaller and larger errors, introducing inconsistency and making the look and feel not quite the same between apps. Then again, it fits well with the current way Google is doing UX design (http://minming.posterous.com/google-currents-yet-another-contribution-to-t http://minming.posterous.com/google-currents-yet-another-con...).

manmal 15y ago
Some of the pieces DO work (48dp as hit-target is a good advice, and colour palette etc. is pretty usable). I think it's a good start for all the Android devs (non-designers) who put apps together which are 99% crappy looking. I am quite frustrated however that they do not tell us how to get the same behaviour on older devices - they should release a look-and-feel compatibility library or something. Actionbar is also very inflexible (tabs with buttons in one row, anyone? adjustable tab width?) and making the same code work for 2.x - 4.x devices is just plain spaghetti.
f7u12 15y ago
I found the site by way of an @AndroidDev tweet [1], and I was incredibly frustrated. Their old documentation [2] was completely useless, and this is even worse. Am I supposed to purchase and learn proprietary design tools to develop an effective Android app? This turns me off to the platform as a whole. [1]: https://twitter.com/#!/AndroidDev/status/157570583800971264 https://twitter.com/#!/AndroidDev/status/157570583800971264 [2]: http://developer.android.com/guide/practices/ui_guidelines/index.html http://developer.android.com/guide/practices/ui_guidelines/i...
drivebyacct2 15y ago
All of the UI elements are available in source provided by Google. Koush (on Twitter) tweeted with Tim Bray about them being split out into a more-easily-consumed library.
- 15y ago

adpowers 15y ago

Ha! I love that they are using Hipster Ipsum: http://developer.android.com/design/static/content/ui_overview_app_ui.png http://developer.android.com/design/static/content/ui_overvi... http://hipsteripsum.me/ http://hipsteripsum.me/

emehrkay 15y ago

I like the date picker http://developer.android.com/design/building-blocks/pickers.html http://developer.android.com/design/building-blocks/pickers....

jc4p 15y ago
Fun fact: the up and down arrows work exactly opposite how you expect them to.
- emehrkay 15y ago
  Hilarious because i've been flip flopping on how they worked. The arrows seem to be a paradigm from mouse-based computing, can you scroll these lists like on ios?
  - jc4p 15y ago
    If you scroll them they actually remove the arrows and make a lot more sense. Before you drag: http://i.imgur.com/4MUXO.png http://i.imgur.com/4MUXO.png After you press to drag: http://i.imgur.com/BqXMY.png http://i.imgur.com/BqXMY.png To be fair, it's a huge improvement over: http://i.imgur.com/2exF7.png http://i.imgur.com/2exF7.png
    - BrianHV 15y ago
      As a day 1 Droid user after 10 years on Palm OS, I was stunned that the control in your third picture made it into a release, and even more stunned it persisted so long. On Palm OS you could pick a time with a maximum of three taps. There's no reason it should take more than five: one for each digit plus AM/PM. I'm not a fan of the swiping, but you're right. It is a huge improvement.
      - jc4p 15y ago
        At my job the application we're currently working on is aimed for Android 2.1 and above so we can't the new TimePickerDialog. I actually had testers come up to me and report bugs about the Android TimePickerDialog as bugs in our application saying that it didn't work as expected and it was against the UI specifications (which of course only have pictures for the iPhone version of the application). I had to actually replace them with two dropdown sliders and a button so that the testers would be happy.

njs12345 15y ago

This is great! If apps start following this it should significantly improve the Android user experience, as well as making it much easier to design good Android apps.

krosaen 15y ago

I like this bit on using multipane layouts to be flexible on both tablets and mobile: http://developer.android.com/design/patterns/multi-pane-layouts.html http://developer.android.com/design/patterns/multi-pane-layo... Good advice for rich web apps too.

georgechen 15y ago

Am I missing something? I'd like to get my hands on the templates, mocks, wirefames, etc. Let me play with those (as a designer) and I'll be able to better follow the specs and guidelines. Note: Microsoft (for once) actually one-up Big G. here. They provide the PSD and fonts for Windows Phone 7 on MSDN + the UX Guidelines. Also, for Apple, 3rd party made all the PSD and templates for them...

mdwrigh2 15y ago
There's some third party work done for Android as well: http://designmodo.com/android-kits-developers/ http://designmodo.com/android-kits-developers/
- georgechen 15y ago
  Thanks. Nice. But since Big. G. is heavily pushing ICS, they should really put the ICS files up there.
amirkhella 15y ago
I've recently updated Keynotopia templates to include Android ICS UI components for Keynote and PowerPoint (http://keynotopia.com/android-prototyping-templates/ http://keynotopia.com/android-prototyping-templates/)
- nielsandersen 15y ago
  Great resources on your site. Should you ever feel inclined to port your stuff to Axure you have at least one paying customer right here.
njs12345 15y ago
One of the nice features of the Android hierarchy viewer (provided with the Android SDK) is that it lets you dump your app's visual structure as a PSD with layers - very useful for working with a designer. Ask your developer!
- 15y ago

amirkhella 15y ago

I think this is the most consistent UI for Android so far. It still feels a bit more like a "style guide" rather than "human interface guidelines", but it's a great step forward. Kudos

evanw 15y ago

Regarding the Design Principles page: http://developer.android.com/design/get-started/principles.html http://developer.android.com/design/get-started/principles.h... I love that they included the ICS home screen's "glass desktop" effect in the "Delight me in surprising ways" section (http://developer.android.com/design/static/content/principles_delight.png http://developer.android.com/design/static/content/principle...). It's a completely unimportant feature, but the first time I swiped past the edge of my rightmost homescreen and saw the effect, I appreciated the attention to detail. Where I disagree is with their "Pictures are faster than words" suggestion. I completely agree that many things are best said with images, but I've had a hard time identifying the function of several features in the icon-driven UI's featured in both ICS and in new Google web redesign. In ICS's Gmail app, I'd understand the words "Mark Unread" much quicker than the "sealed envelope" icon which I had to experimentally discover. It's also interesting to note that in ICS Gmail, Mark Unread is an icon and Report Spam is text, where in web Gmail, Mark Unread is text and Report Spam is a stop sign.

drivebyacct2 15y ago
I'm not saying it's right or good usability, but the new "picture based buttons" can be long-pressed for a textual toast-style popup that tells you what they do.
radley 15y ago
Google is heavy on logic but weak on intuition. Why their designs seem to look good but are hard to follow.

vlokshin 15y ago

Simply put, and coming from an Apple fan-boy, this is REALLY nicely done. I honestly think this will significantly improve the usability of the platform as a whole by attracting the right designer/developer talent.

JacobIrwin 15y ago

For Android/Google on web, it's possibly the most apple.com-like designed page I've seen yet.

swanson 15y ago

I kind of agree with the sentiment that a few others are having. I've spent the past 4 months working on an Android project and when I opened this page I was in shock. Everything looks so awesome and shiny - but where is the actual implementation? Is this stuff just a ICS theme (I haven't used it myself as our app is in 2.2 land)? Others pointed out to check the "Developer" link - but that is just the standard Android docs I've been digging through for months already. Searching for things like "Index Scrolling" (which would be awesome to add to an app) or "Switches" doesn't return anything useful - so what are the Building Blocks and how do I get them into my app? This page should either a) include demos (or links to the demos if they exist already) or b) be embedded in the code docs (android.widget.GridView should show the screenshot and UI guidelines).

myko 15y ago
I think by Index Scrolling it means to use the SectionIndexer interface: http://developer.android.com/reference/android/widget/SectionIndexer.html http://developer.android.com/reference/android/widget/Sectio... It would be amazingly helpful if they would link from the 'Android Design' page to the docs exactly what they are talking about.

pax 15y ago

Why did choose to put 2 phones on the homepage? Because one phone has 3, the other 4 buttons? Isn't that still a bit redundant. (If it where not for a design-centric page it wouldn't have troubled me)

there 15y ago
because part of that site talks about compatibility with different devices. the phone on the left is a nexus s, which has the (now) older style of dedicated hardware buttons. the nexus prime on the right is apparently what newer devices are supposed to have, which are software buttons that are actually just part of the main lcd and the operating system reserves a section of the screen to draw them in software. the big benefits of the newer style are that they can be hidden while playing movies or in other situations where they are not needed, they can be rotated when the device is rotated, and, maybe most importantly, the operating system now gets to control which buttons are there and in what order they're in. an annoying thing about the hundreds of different android phones prior to this was that every manufacturer seemed to put the 3 or 4 hardware buttons in a random order that made them inconsistent.

rwc 15y ago

I know some will criticize this is ticky-tacky, but it's one small thing that, when added with a lot of other little details, make Android feel like it's still designed by engineers. They've "touched nearly every pixel" and "App icons are works of art in their own right" but the contact name on their contacts icon is "Lorem Ipsum". Not exactly a warm, human feel. http://developer.android.com/design/static/content/design_elements_landing.png http://developer.android.com/design/static/content/design_el...

alex_c 15y ago
"Lorem Ipsum" is more of a designer thing.
sp332 15y ago
Lorem Ipsum is supposed to show you the "experience" of the design, and leave out any emotional or cognitive associations you might have with specific text. It's used as a content-free placeholder in design. It really has nothing to do with "engineers".

fufulabs 15y ago

Isn't ICS like just around 0.5%(or was it 5%) of Android handsets as of December 2011? This design guide is ALL about ICS and nothing about the 99% of the Android handsets used by people.

thetrendycyborg 15y ago
in 2 years everyone will have ics or better. carrier contracts.
- nailer 15y ago
  That's kinda sad, compared to Apple, Microsoft, and RIM. ICS fixes bugs too. People shouldn't have to deal with them until they buy a new phone.

feralchimp 15y ago

I'm going to assume the internet has already somehow collectively dealt with the fact that the Android name for a drop-down list control is a "Spinner."

thetrendycyborg 15y ago
it doesn't always drop down. Sometimes it "drops" up, like if the element is at the bottom of the phone. You can "spin" through options. Makes sense.

problemspace 15y ago

I tried browsing this on my old Android phone... I couldn't get past the first page. I hope "people should be able to read your content" is one of the guidelines...

helpbygrace 15y ago

Does anyone know how to see Roboto font as anti-aliased in Windows7? In my windows 7, Roboto font looks really jagged and weird.

AliCollins 15y ago
Likewise on my XP Laptop in Chrome...and I have Roboto TrueType font installed. Then un-installed the font, and it looks far better!!

astrodust 15y ago

"Android Design" .../index.html It's the little things that matter. This is shameful for a company so big.

ranebo 15y ago
I'm confused, why does this matter?
- astrodust 15y ago
  From a technical perspective, littering your URLs with implementation debris is not a good idea. What if you want to revamp the site, put it in a shiny CMS, and now it's in PHP or JSP or does it even matter? You have all these references to `index.html` you have to maintain or you'll be wrecking your linkage. Bury those. If you're doing a plain HTML site, use MultiViews to hide the extensions. They're not important to the content. When I see `index.html` in a URL, it's never a good sign. It's done by a sloppy "web designer" that knows how to use DreamWeaver and FTP things to the server. They make a tremendous mess for the next team that has to come along and somehow upgrade the site without breaking everything. It's not 1998 any more. You can afford to script your pages, have clean URLs, and still get great performance.

kizza 15y ago

Interesting how they make sure to say that you shouldn't use bottom tabs like in iOS. For my project I decided to do exactly that instead of using an Android standard action bar, because: 1:The bottom bar fits 5 items. An action bar needs to have the app name as well, which means it can't have 5 items anymore. Having a "More" option is just dumb. 2:The iOS bottom bar has text underneath its icons and the action bar doesn't. I'm afraid the icons I have aren't obvious enough without text. 3:This is a conversion from iOS so the images are already made 4:Getting an Android action bar to work on older versions is very difficult. The Android compatibility library doesn't help here, and the third party libraries I looked at were not mature enough. I'm doing this work as part of a fixed price contract so I can't waste days getting it to work reliably. Bottom line: Android apps would look a lot better if doing things the right way was also the easiest way.

thetrendycyborg 15y ago
you can break out tabs into a separate action bar or use scrollable tabs. You're using elements from another platform your users don't use. You're just going to confuse or annoy them.
- kizza 15y ago
  For sure, but like I said, I don't have days to spend making half-baked action bar code work.

saket123 15y ago

This site is really useless. As an android developer I was hoping for more steps rather then another marketing docs. Its funny how little android provides out of the box and I have to just keep searching source to find how things are implemented and best way to implementing such designs. Sad state of affairs as I have to waste most of my time trying to understand these designs and corresponding code designs in source. Another thing I hated about the website is how sparse it is in technical details. If Google really hopes us to make use to these pattern why not release some of these as widgets or templates.

fdb 15y ago

I find the "app structure" schematic (http://developer.android.com/design/patterns/app-structure.html http://developer.android.com/design/patterns/app-structure.h...) a very useful visualization to see the screens of an app in one glance. Any ideas how they made this schematic?

nodata 15y ago

I wish they'd make this searchable. This is from Google after all. Does a button marked "on" indicate it is already on, or that pushing the button will make it "on"? I'd like to see that standardised.

buro9 15y ago

All we need now is an accessibility document for Android. Accessibility is notably absent from the design doc.

funkyboy 15y ago

Finally!. Isn't too late? Are OEM and carriers going to follow the same principles? Or they can build whatever skin/mess they want as they did so far?

funkyboy 15y ago

Google, good work on the Android design guidelines, but is that enough to tame the wild west in the marketplace and the current "anarchy"?