Thursday, October 20, 2016

usability - Design Patterns for Discoverability


What are some tried and true design patterns for discoverability in UI/UX, where information or a feature isn't necessarily overt at first glance, but is discoverable by using the interface through progressive disclosure? How can one signal that an interface has discoverable elements?




Answer



The whole of the following linked article is interesting, but the following section is pertinent and I think worth including in the context of this question, even though not providing actual patterns.


From Scott Berkun's The myth of discoverability (2003)



How do you actually make something discoverable?


As a designer, you have a handful of resources for emphasizing things, and trying to draw attention to them:



  • Real estate: You get a certain amount of pixels to use however you want. Larger targets are likely to be located first, and easier to be found again. Big targets are easier targets.

  • Order: You can place things in specific orders, from left to right, and top to bottom, that might form patterns people can learn to follow, depending on their language (some are left to right, some are right to left, etc.).

  • Form: You can use color, font, shape, shadow, composition, and other graphic design constructions to help make use of the real estate you have.


  • Expectation & Flow: Depending on how you use the above, you can put things into forms or patterns that are in some way familiar to people. The most obvious examples are printed newspapers, and how columns, line breaks, and headings are used. This might be achieved by emulating another design from another website, or from something in the real world.

  • Consistency: If you use the screen in consistent ways, you can teach people to look for certain kinds of commands in certain places. By being predictable, you can score some extra discoverability points. This can often be assisted by using available conventions, and trying to make use of knowledge your users already have.


Every metaphor or paradigm you might be familiar with (GUI, Windows, Mac, amazon.com, etc.) makes use of real estate, order and form to achieve the results they do. Good systems provide some basic constructions for making elements discoverable that can easily be reused.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...