Recognising UI Patterns

As human users of websites and apps we focus on our purpose for interacting rather than the process of interacting. It is only when things refuse to work as we expect that we start to look more closely at the virtual buttons, tabs and other controls that drive the interaction.

This activity is designed to reveal how well you know common user interface (UI) design patterns and their behaviours. It aims to help you think about the most appropriate pattern to use in any given situation. This requires both a good knowledge of existing patterns and an understanding of the subtleties of their operation.

This SVG Avatar by Darin Senneff shows how animation driven by the user’s actions can turn a simple sign-up form into a mini comedy. As the form is completed the avatar changes expression and seem to be watching the user’s movements. A humorous punchline comes when the creature covers its eyes when the password is entered.

Instructions

Keep away from the computer, tablet or phone and using paper and pencil sketch one or more of the design patterns in the list below. Annotate the sketch to explain how things work and how the user is assisted to achieve their purpose without thinking too hard about the interactions. If necessary, draw a sequence of sketches to show how the interaction progresses.

Sketch these patterns

1. An email sign-up form that appears in a modal window.
2. Navigation tabs that appear above the content on a website.
3. A product slideshow that appears in a frame beside a product description.
4. The interface controls that appear around the live image in a smartphone camera application.

Check each one

1. At what point does the user know that the information entered is acceptable? If the user does not want to register how easy is for them to dismiss the modal?
2. How can the tabs accommodate long descriptions? How does the user know which tab indicates the current view?
3. How can the slideshow be clearly understood to be related to the product description? How can the user choose to see close-up images of parts of the product that they want to inspect closely.
4. How are the controls arranged so that they do not obscure the view of the scene being photographed? Which of the controls are most important?

Review your work by comparing to it to patterns in use within a mainstream website or application. Did you recognise any subtleties that perhaps you were competely unaware? Is your design better?