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.
Thanks for any help you can offer.
Scott
I was only just reading your UI guidelines the other day.
ReplyDeleteCouldnt stop smirking at the PATH entry UI under windows.
@Anonymous: Ah, the classics :-)
ReplyDelete2 part answer:
ReplyDeleteFirst 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.
@Vipul Chawathe: Can you be a little more specific? I don't know where to look at those sites for specific examples.
ReplyDelete@Scott Meyers I am honored.
ReplyDeleteMobile & 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
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.
ReplyDeleteAs 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.
@Vipul Chawathe: Thanks for the links. I'll explore them to see if I can find examples that work with my presentation.
ReplyDelete@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.
ReplyDeleteSee also the material design spec from Google : Google Material Design
ReplyDeleteLots of do / don't applied to mobile context.
@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.
ReplyDeleteThere'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/)
ReplyDeleteThe 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.
@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...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
ReplyDeleteNote 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).
@BatmanAoD: Yes, this is a great example. Thanks for contributing it.
ReplyDelete