Monday, October 20, 2014

Wanted: Good & Bad UI Examples from Mobile Realm

From time to time, I give a presentation on what I consider to be the most important guideline in software development: Make interfaces easy to use correctly and hard to use incorrectly. Over the years, I've collected a variety of interface examples that either adhere to this rule or, more commonly, violate it, and I try to update the presentation to keep the examples contemporary.

I'd like to add some examples from the mobile realm (smart phones, ebook readers, tablets), but--gasp!--I don't have any such devices. Yes, I'm stuck in a technological time warp hovering in the 1990s. But you're not, and I'm hoping you'll be willing to share with me examples of mobile interfaces that are easy to use correctly and hard to use incorrectly...or that aren't. If you could provide screen shots, that'd be ideal.

I break "easy to use correctly and hard to use incorrectly" down into the following sub-guidelines, so interfaces that either uphold these ideas or trample all over them would be especially helpful:
  • Adhere to the principle of least astonishment.
  • Choose good names.
  • Be consistent.
  • Use progressive disclosure.
When I talk about interfaces, that includes APIs, so I'd be happy to receives examples of good and bad API designs for mobile platforms, too.

Thanks for any help you can offer.

Scott

14 comments:

  1. I was only just reading your UI guidelines the other day.
    Couldnt stop smirking at the PATH entry UI under windows.

    ReplyDelete
  2. 2 part answer:
    First part, UI examples, http://www.lukew.com/ gives sufficient.
    Second part, good/bad UX is identified by applying http://abbytheia.com/ 's teaching on live sightings of those examples.

    ReplyDelete
  3. @Vipul Chawathe: Can you be a little more specific? I don't know where to look at those sites for specific examples.

    ReplyDelete
  4. For concrete evolving/bleeding edge C++ source example, we may examine Direct2D Implementation Progress from wxWidgets, which defines a common API across platforms, but uses the native graphical user interface (GUI) on each platform. Windows RT on ARM supports certain DirectX feature level, so how this API blends Luke's and Abby's insights is exciting as C++ (non-game) immersive app's indie dev.
    As more mature example, from the main SVN trunk wxQt being Qt based and Qt using OpenGL/ES to port to Direct3D must be bringing awesome user experience like KDE UI to mobile phablet realm by it's API.
    An alternative is to learn XAML or web-apps and consume cross-platform porting "stuff", and that demands being mindful of too many things to do anything substantial at all.

    ReplyDelete
  5. @Vipul Chawathe: Thanks for the links. I'll explore them to see if I can find examples that work with my presentation.

    ReplyDelete
  6. @Scott Meyers Thank you, for taking initiative to bring interface & experience architects' guidance to native development, while other efforts, commonly reformed as game engines invest in dependency spaghetti (anti-?)patterns to work in the opposite direction,i.e. send native development's benefits to immersive experiences. I wish I had more refined insights and hope your influence will be fundamental on all relevant future interfaces.

    ReplyDelete
  7. See also the material design spec from Google : Google Material Design

    Lots of do / don't applied to mobile context.

    ReplyDelete
  8. @Unknown: Thanks for the link, but I'm looking for specific examples pertaining to interfaces that are easy to use correctly and hard to use incorrectly, not to general UI guidelines.

    ReplyDelete
  9. There's a lot of annoying UI choices in the world of mobile website design. (In particular, see the classic "download our app" pop-up: https://xkcd.com/1174/)

    The mobile version of the Slate website now displays the "top comment" midway through each article, as though it were a picture. I once thought that was, naturally, the start of the comment section, so I stopped reading the article early. I was quite confused when my friend mentioned something the author said below the point where the comment was displayed.

    ReplyDelete
  10. @BatmanAoD: Again, my interest here isn't in UI design in general, but rather the more focused issue of "easy to use correctly and hard to use incorrectly," but I think that a UI element that makes you think you've read to the end of an article when you haven't qualifies as a great example violation of "hard to use incorrectly." Can you post or email an image of this?

    ReplyDelete
  11. ...well, yes, that's why I gave that particular example. Here's a screenshot: https://plus.google.com/+KyleStrand/posts/BiyoY1M6NAW?pid=6077596338289977698&oid=101125821906050896492

    Note that the sentence starting "The summit, then..." is a continuation of the article. If you have not scrolled down far enough to see the start of this sentence, you might think that the article is over (despite not seeing a bio of the author).

    ReplyDelete
  12. @BatmanAoD: Yes, this is a great example. Thanks for contributing it.

    ReplyDelete