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:

Anonymous said...

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

Scott Meyers said...

@Anonymous: Ah, the classics :-)

Vipul Chawathe said...

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.

Scott Meyers said...

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

Vipul Chawathe said...

@Scott Meyers I am honored.
Mobile & Multi-Device Design: Lessons Learned
Mobile Design Details: Performing Actions Optimistically
Design for Mobile: iPad Design Tips
Muscle Memory & Multiple Devices
Windows Phone: User Interface Teases & Transitions
Better Mobile Form Design
If Luke's UI guidance is more platform centric, then Abby's is more (mobile) app centric, so more challenging to cherry-pick.
Design with, not for.
It is Friday, but we aren’t in love.
Designing my UX Portfolio
What is this UX thing anyways?
Lessons from an Ontology Nerd

Vipul Chawathe said...

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.

Scott Meyers said...

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

Vipul Chawathe said...

@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.

Unknown said...

See also the material design spec from Google : Google Material Design

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

Scott Meyers said...

@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.

BatmanAoD said...

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.

Scott Meyers said...

@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?

BatmanAoD said...

...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).

Scott Meyers said...

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