«
»

UI Guidelines for mobile and tablet web app design

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.

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.

Share

Tags: , , , , , , , , ,

This entry was written by and posted on Friday, October 15th, 2010 at 4:00 pm and is filed under UI. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. #1 written by DM Cook October 19th, 2010 at 18:08

    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?

    RE Q

  2. #2 written by RK October 19th, 2010 at 23:44

    Awesome job getting all this together in one place!

    RE Q

  3. #3 written by Michelangelo Capraro October 20th, 2010 at 14:33

    here’s documentation for Windows Phone 7.. lets not forget them ;)

    http://msdn.microsoft.com/en-us/library/ff637515(v=VS.92).aspx

    RE Q

  4. #4 written by Mark Jones October 20th, 2010 at 17:38

    RE Q

  5. #5 written by DM Cook October 21st, 2010 at 13:10

    Is MeeGo a “platform”? Guess I just haven’t heard anything about it, really…

    RE Q

  6. #6 written by Alejandro Pedroza October 22nd, 2010 at 17:15

    RE Q

  7. #7 written by Dex October 24th, 2010 at 15:44

    RE Q

  8. #8 written by Avinash October 27th, 2010 at 04:36

    Please point out the pitfalls of NOT following the guidelines, mentioned above, perhaps then, people would understand how important they are & follow them!

    RE Q

  9. #9 written by srinath October 28th, 2010 at 03:54

    Awesome job :)

    RE Q

  10. #10 written by James Pearce December 27th, 2010 at 22:50

    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.

    RE Q

  11. #11 written by firt December 27th, 2010 at 23:02

    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!

    RE Q

  12. #12 written by terri January 12th, 2011 at 21:42

    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.

    RE Q

  13. #13 written by Ash Singh January 20th, 2011 at 09:40

    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

    RE Q

  14. #14 written by David March 7th, 2011 at 11:33

    RE Q

  15. #15 written by Michael Plumb December 2nd, 2011 at 22:29

    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.

    RE Q

  16. #16 written by Sachin Malhotra February 28th, 2012 at 15:45

    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?

    RE Q

  17. #17 written by alek January 19th, 2013 at 00:00

    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.

    RE Q

SetPageWidth