Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too.
Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app.
- iOS Human Interface Guidelines (iPhone, iPod and iPad) – PDF version
iPad Human Interface GuidelinesiPad HIG was merged with iPhone in iOS HIG (see above)- UI Guidelines for BlackBerry 6.0 Smartphones – PDF version
- UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version
- Android User Interface Guidelines
- Nokia N9 & Meego 1.2 Harmattan UX Guidelines
- UI Guildelines for BlackBerry PlayBook – PDF version
- BlackBerry Browser Content Design Guidelines (PDF)
- Motorola’s Best Practices for Android UI
- Nokia Design & User Experience Library
- Symbian^3 UI Style Guidelines (PDF)
- Nokia Developer Design Portal (PDF)
- Symbian UI Wiki
- Nokia Series 40 UI Style Guide
- Bada Application UI Guide
- Sony Ericsson UI Rulebook
- UI Guidelines for Windows Mobile
- Windows Touch UI Guideline
- UI Design & Interaction Guide for Windows Phone 7 (PDF)
- webOS UI Guidelines
- Hildon UI Guidelines for Nokia Maemo
- MeeGo UI Design Guidelines (shared by Mark Jones)
More tips on mobile web design on the Programming the Mobile Web book.
Do you know any other UI Guideline? Insert the link on the comment area.
FANTASTIC post! Thanks so much for putting all this in one place. Be certain that it’s very much appreciated. I’m curious: do you find any of these guideline docs to be especially MORE thorough or complete?
Awesome job getting all this together in one place!
here’s documentation for Windows Phone 7.. lets not forget them ;)
http://msdn.microsoft.com/en-us/library/ff637515(v=VS.92).aspx
And MeeGo…
http://meego.com/developers/ui-design-guidelines/handset
Is MeeGo a “platform”? Guess I just haven’t heard anything about it, really…
i have some links on guidelines even its not precisely on mobile devices i think it should be useful
mac os x ui
http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html
gnome ui
http://library.gnome.org/devel/hig-book/stable/
kde ui
http://developer.kde.org/documentation/standards/kde/style/basics/index.html
http://developer.kde.org/documentation/design/ui/
eclipse ui
http://www.eclipse.org/articles/Article-UI-Guidelines/Index.html
And Maemo http://www.forum.nokia.com/Devices/Maemo/Documentation/
Please point out the pitfalls of NOT following the guidelines, mentioned above, perhaps then, people would understand how important they are & follow them!
Awesome job :)
Although the lines are blurry, it should be pointed out that many of these do not relate to web site or app UIs, but tend to mean those built with native technologies
Not that there need be a big cosmetic different between apps depending on how they are built, but some of the UI guidelines mentioned may actually be unimplementable in the browsers of some of these platforms.
James, you are right. Many of these guidelines are for native apps and there is no official guidelines for many platforms.
However, these are just UI guidelines. Even most native applications don’t implement them. They are just an idea of what the user should expect from UI interaction on each device. And that is helpful also for webapps/web UI design.
For example, I’m seeing a lot of webapps for Android implementing the top-left back button (like in iOS) without capturing the Android Back button at least to provide the same functionality. The UI designer must know these diferences between devices and what users should expect. Ok, you can not capture back button from Android Browser, but you can emulate it using hashs in the URL ;) Most UI patterns are being emulated by UI frameworks, like Sencha or jQuery Mobile on compatible devices.
Thanks!
What is a better user experience for a mobile phone game?
A. Hit the game play button,see a ‘how to play’ screen with a ‘no don’t show again’ button before being allowed to play the game.
B. Have a ‘help/how to play’ button on the main menu. But do not present this information unless a user actually clicks to read the how to play info.
thanks in advance.
Brilliant work:) but just wondering, as most of the platform support Java, so if i would like to implement some application which can be used on all the mobile devices(supported device), so what UI standard should i follow? can you please put some light on it or let me know some links or guidlines.
Thanks
Intel MeeGo 1.2 Tablet UI / UX Guidelines
http://appdeveloper.intel.com/sites/files/MeeGo_Touch_UI_V1.2_ExoPC_0.pdf
This is a great resource! Thank you. At the end of your list, you ask for readers to let you know, via the comments, of any other resources. I don’t have those, but I did want to let you know that BlackBerry must have taken down the Guidelines 4.x and 5.x, as I received a 404 error when I tried both the web link and the PDF link. I think the info now resides in the 6.0 version of the document, which you already have identified in the preceding item in your list.
Thank you again! This is a GREAT resource.
Hi, for mobile web apps, I have combinations of different screen resolutions with different densities I want to fix the image size for buttons for those combinations. Can anyone help?
for mobile web, use these native app guidelines as an indication of what not to include in your design. don’t dress your web app up like it is a native app. it will just irritate your users. instead follow a convention that does not look or feel like any OS.