Visual design tips for app developers – consistency in the big picture: beyond where to place the button

In the book Visual Usability, we introduce what we call the "meta-principles" – three principles that are fundamental to the success of user interfaces. Consistency, hierarchy, and personality are not new to UI design. Considered primarily, however, they provide a structure for assessing and making decisions about the large and small visual characteristics of a UI design. When designing, keeping these principles in mind helps focus thinking about the effect of visual characteristics on how people interpret what they see from both the functional and aesthetic standpoints.

Interfaces have a big job to do. They need to provide information on multiple levels – convey content, communicate interactivity, and provide feedback. Before they can do that, they need to help someone know, or reinforce expectations of, what they are looking at. In Visual Usability, we go into detail about how visual characteristics of layout, type, color, imagery, and controls affect perception of consistency. Our goal is to raise awareness of these details and their effects. We want to help teams understand how people perceive visual characteristics, and make conscious decisions about them.

This post begins to address consistency in the big picture – as a principle for considering the approach to an interface rather than its details – concepts on a different strategic plane than where to place a button. From this perspective, it helps frame thinking about UX, and align UX with how it is represented through UI.

Internal consistency
Humans are wired to identify patterns in what we see and assign meaning to them. When establishing consistency within an application, lack of attention to consistent placement, color, styling, imagery (including symbols and icons), and typography can indicate difference to users, breaking the patterns they've perceived, and making them "stop and think."

This version of an older application had three separate ways of closing a window, forcing users to remember different paradigms every time they interacted with it.

Making sure a UI is internally consistent – that all the close buttons are styled similarly and placed similarly within a screen and from screen to screen within an application, for example – is familiar territory. Making sure that the patterns you choose to adopt and make consistent are in line with your users’ expectations is also familiar territory. What is different is calling out and thinking about the role consistency plays in affecting perception at the UI framework level.

External consistency
When Google created and launched Google Docs, the interface adopted symbols and patterns familiar to people who use desktop word-processing programs. This was a smart move strategically; consistent symbols reinforced similarities between the desktop and cloud word processing experiences, making Google Docs seem familiar and approachable. This helped Google transition users to word processing in the cloud. Consistency across platforms or applications is external consistency.

Google Docs UI, top; Microsoft Word 2010, bottom.

750words.com is also an application used for writing, but it has a different goal, and targets different users. Its tag line is "Private, unfiltered, spontaneous, daily," and the site focuses on people who want to write regularly. The UI provides only essential visual information – where to type – and the number of words written. The screen shows optional visual feedback for how often people are writing. UI elements and design characteristics do not say "word processing," but still encourage people to write. The decision to design the UI framework to be inconsistent with word processing applications helps the app show how it is different from – and better suited to – helping people write regularly.

750words.com only indicates where to write, and supports writing regularly.

Consistency and novelty
Advertising and promotional media in general rely on inconsistency – or novelty, as it's known in communication theory – to get people's attention. Novelty can be a differentiator. Novelty as an approach can succeed when it’s authentic and effectively represents and reflects a difference that people find valuable. 750words.com takes a novel approach to writing online, and the choices made in its interface reflect that. Novelty can make visual information more memorable, as several studies,including this October 2013 one [PDF], have found.

While there’s nothing wrong with using platform standards as the initial foundation for a design, relying on them for the final design inevitably results in an app that lacks unique visual appeal. An app designed this way may get to market more quickly than an app that doesn’t, and provides interface characteristics consistent with other apps, rendering it easy to pick up and use. But without key visual differentiators that distinguish it from its competitors and help audiences build affinity, it risks falling behind the pack by not standing out.

For example, compare OpenMBTA (below left), an app for Boston’s public transportation system, to Grocery Gadget (below right), a grocery shopping app:

The apps serve completely different purposes, but because both rely almost entirely on iOS 6 visual conventions, they look so similar that they might as well be the same app. Even the custom “prepare/shop” toggle at the top of the Grocery Gadget screen isn’t enough to visually distinguish it from OpenMBTA.

By contrast, public transportation app CG Transit, while basing some of its look and feel on iOS 7 flat design standards, applies simple visual upgrades that push it beyond the base set of rules. Color bullet points connect a list of stops, a gradated map gives a high-level overview of the subway line’s path through the city, and a side menu with icons and color highlights combine to create classic visual appeal that make CG Transit feel fresher and friendlier than OpenMBTA.

Striking a balance between consistency and novelty is at the heart of designing an effective and desirable user experience and interface. As one of the key visual principles behind what people notice and why, we hope you'll reconsider consistency, be aware of it, and use it when making decisions about how to approach and design visual interfaces.

Deborah A. Levinson also contributed to writing this blog post.

Error messaging – avoiding visual spankings

Error messaging is visual discipline. It has to walk a fine line: drawing attention to problems without doing more harm than good. Designing effective error display is about more than providing clearly worded messages describing what went wrong and how to fix the problem; it's an opportunity to express the voice of the system, and show your app's personality. Successful error messages combine wording and design to be noticeable, actionable, and appropriately expressive.


When the user rolls over a warning symbol in wordpress.com's CSS panel, the software provides a polite, in-context warning about thoughtful use of the !important declaration to force a style override.


Error messaging from an older version of Converse's custom shoe-design application is playful and whimsical, in keeping with the funky, independent personality of their brand.

How do you know when you have too much error messaging, or that your messaging is too strong? Is it this?

Orbitz's flight search interface

Or these form errors?

Qualtrics survey error message


Yelp! signup error

And surely it's this:

USDA SuperTracker food- and fitness-tracking application warnings displayed if a user exceeds daily limits for calories, fats, and sodium.

Color, a critical part of a site's visual language, is often tied to error messaging interface patterns. Using red for errors makes sense conceptually; an error is the right place to take advantage of contrast to attract the eye. However, use of this pattern can be heavy-handed and jarring, interrupting an application’s personality. Too much contrast in a warning that isn’t life-threatening or data-erasing can feel like a “visual spanking” – like the two form error screens, or SuperTracker's alert that a user has exceeded daily calorie, fat, and sodium limits. Calling so much attention to an error overwhelms the design and tells the user, "You've been very naughty. Go sit in a corner and think about what you've done."

Instead of overusing red, consider a small amount of a different contrasting hue to draw the eye, or a pale tint for your message instead of a solid, saturated color. In an urgent situation, such as a hospital setting, two levels of contrast, such as a light background tint and contrasting text style, may be necessary.


Polite error messaging on a login form

Your goal is the visual equivalent of a polite tap on the shoulder to provide guidance and redirection – not a spanking.

Visual Usability: Principles and Practices for Designing Digital Applications

Our work involves constantly reconciling use and appearance. This isn't a new or novel struggle; it's inherent to designing, and evident in the gap between applications that look great and those that are highly functional.

Digital interfaces rely on common visual design tools to communicate – layout, type, color, and imagery, along with controls and affordances. We've written Visual Usability: Principles and Practices for Designing Digital Applications to provide a common language for defining and evaluating visual user interfaces that's grounded in how people perceive and interpret what they see.

Visual Usability provides simple, clear frameworks for designing web and mobile interfaces for meaning and appeal. It helps application design and development teams make interface decisions by focusing on three "meta-principles" we believe form the foundation of great application visual design: consistency, hierarchy, and personality. Each chapter offers guidance on how to make strategic decisions about layout, type, color, imagery, and controls and affordances that will bridge the gap between beautiful and useful applications.

We're thrilled to announce that the book is now available on Amazon, bn.com, Elsevier.com, and elsewhere! We hope you check it out, and that it provides value to your team.

We are blogging examples of visual usability regularly via Tumblr at visualusability.tumblr.com, and tweeting them at @VisualUsability. We hope to see you there!

User experience for software and service updates

Changes to the things we use every day affect us and how we feel about the organizations that push change on us. Every time we decide to allow an update or buy a new release, we are taking a leap of faith. Sometimes those leaps are rewarded, and sometimes they are not.

Regardless, our time is required to relearn, and this investment is not acknowledged or appreciated. I've read that brand loyalty is at an all-time low. People are happy to try new restaurants and services with a coupon from Groupon, but vendors report that coupon use is not translating into repeat business. I don't know statistics about mobile and computing software specifically, but based on my extremely limited and unscientific example of myself I can only imagine that maintaining a positive customer experience after purchase is valuable.

Four tips for better software update experiences:

• Show me what I can expect. Let me preview what will change visually, not in a readme file after the fact. Google is doing this well with its beta interfaces.


• Let me choose. Give me a choice to retain an old interface. Twitter, Yahoo!, and Google have all allowed users the choice between new beta interfaces and the familiar old ones, even if eventually these choices were taken away.

• The UI should always be a high priority. I've seen more beautiful launches than I can count that degrade with the second release. It's great that the UI/UX were stunning at first, but if feature fixes and additions compromise the UI in subsequent rounds, the initial effort truly was for naught.


• Assume people will hate it. Your organization may think that the update is great and fixes all kinds of issues, but chances are users aren't aware of the problems; they're only aware of the change. If you keep in mind that people will hate the update, it's more likely that changes will be made in a way that has less negative impact on consumers – and communications will be less about what the organization thinks is better, and more about what people can expect.

Where's this coming from?
Recently, I downloaded an update for my Android mobile phone. I didn't think about it much before doing it. I saw the prompt, figured I had enough connection strength and time for the update, pushed the button and put the phone back in my bag.

image source: http://gadgetian.com/5770/verizon-moto-
droid-pro-software-update/

Taking a glance later, it was immediately clear that the interface had changed. One of my favorite things about the phone was the lovely graphic that reflects the time of day. Now, instead of late afternoon sunlight, I saw a generic blue screen and the time. Sigh. A few taps and I saw that the entire black-background, high-contrast interface had been brightened, buttons outlined with white hairlines, more prompts added. Clearly someone was trying to improve something, but even though I am usually on the designer's side in this situation, I was just annoyed that things had changed, that the changes appeared to be for the worse, and that I hadn't been warned. The thought crossed my mind that I could change to another carrier with another phone with a more appealing interface. If I have to adapt, I might as well adapt to something else.

No one likes change, even when it's for the best; it takes time and reflection to realize and appreciate change. A few years ago, I facilitated a working session for an organization to help them decide what values were important to convey as part of a new visual identity. In the session, there was a lot of excitement about the future for the group and its ability to be thought of as cutting-edge. When it came time to review logos that had been designed to reflect the key adjectives the organization wanted to portray, the same group overwhelmingly favored the identity that was least changed and most conservative. Asked to explain their choice, they cited the history of the organization and the need to appear consistent – the opposite of what they previously wanted to convey.

Consumer products and services are user experience-crazy right now, with everyone across all levels of organizations getting that experience matters. (Thanks, Steve!) Despite the desire to create products and services that people love, the software world manages product changes extremely poorly. The phone is one recent example; Netflix's proposed service changes are another. I know graphic designers who are running an operating system and software from 2005 because they are so afraid of the interface changes and the time needed to remaster the software with each release.

Helping customers manage software update changes is a seemingly small way organizations can go beyond saying customers matter and show customers that they matter.

Visual Design Tips for Web Apps: #4 – Visual hierarchy and why it matters

Note: As of June 2013, this post is out of date. To learn more about visual hierarchy and why it matters, we recommend chapter 2, "Hierarchy," of our book Visual Usability: Principles and Practices for Designing Digital Applications. You can find out more about Visual Usability in our blog post about the book.

This post is the fourth in an occasional series of tips for developers and other non-designers who don't have a designer to work with when needed, who want to improve the aesthetics (and usability) of their apps or who want insight into the designer's approach.

The single biggest issue we see in web application UI design is a lack of visual hierarchy – the arrangement and treatment of elements that represents their relative importance.

Developing a strong visual hierarchy is important because the presentation of elements will communicate to users whether you “design” those elements or not. Considering placement, treatment and use is essential to creating applications that make sense.


Left: lack of hierarchy – no clear direction is implied.
Right: variation in relative size, placement and treatment start to indicate a hierarchy.


When presented with a screen for the first time, users need to quickly grasp what they can do on the screen, how they can do it and why they might want to (i.e., what effect their actions will have). Establishing a visual system that outlines each element or group of elements’ relative importance will direct the eye, affecting the order of when elements are seen as well as user behavior – if form fields are filled out, if submit buttons are clicked, if links are found, and so on.

There are several factors that can be manipulated to establish visual hierarchy, with the main ones being placement on the screen, use of color, size of elements, font selection and treatment. We’ve already covered using type to establish a hierarchy, but now we’re going to review things at the higher level; future posts will address other factors individually and provide practical tips.

Super-brief introduction to the principles of visual hierarchy
Placing an element like a dot in a frame like a screen or a box creates a relationship between the element and the frame. The location of the element in the frame affects perception (Hofmann).


Left: Stable, static placement.
Right: Unstable, active placement. Movement is implied. Which dot looks more important? Which combination keeps the attention of the eye?

Placing more than one element in a frame creates relationships between the elements and between the elements and the frame. If shape, color and size are the same, relationships are based on proximity – how close the elements are to one another and the frame – which gives each object a perceived visual weight. Perceived visual weight is a key component of visual hierarchy – more weight equals more important.


Left: Which carries more visual weight? The single dot off-center or the four dots in the center?
Right: What about here? Less proximity (spacing) and upper placement create more visual weight than greater spacing and lower placement. This arrangement starts to suggest a hierarchy – that the group of dots in the upper left are more important yet somewhat related to the group in lower area.

The principles of perception hinted at in these dot/frame illustrations apply to web application elements as well.

Visual hierarchy on the web
In order to have a hierarchy, things need to be presented so that the more important things have more visual weight or prominence than less important things. Following are some ways to establish hierarchy.


In the Western world we read from left to right and top to bottom. This affects how we “read” screens as well. We know from eye tracking studies (Nielsen) that quadrant “1” is viewed more than the others. The “Inverted Pyramid” principle supports this as well (Lidwell, Holden and Butler).


Based on the principles of proximity and size, we know that small elements tucked very close to larger elements such as a border or edge – so that they appear as being inside the larger thing - are seen as less important than elements with more space all around them.


Elements with a lot of white space around them are viewed as important (take another look at the single dot in the center of a box).


Elements that are shown similarly to one another are seen as related. If one thing is more or less important than another thing, it should be treated differently – highlighted in some way.


A single element treated differently (highlighted) from similar elements nearby has greater visual weight and may be perceived as more important.


Large elements are seen as more important in comparison to smaller elements. Obvious, but only Apple seems to have mastered this consistently.

Defining a hierarchy
The main thing to consider when making decisions about where to place elements on a screen and how to treat them visually is to identify what most people need to do (or what an organization might want them to do) on the screen; and if that's more than one thing, the priority of the desired interactions. (For example, “we want everyone to sign up or log in, but if they don’t want to we at least want them to complete the checkout process.”) Ideally this effort is informed by 3-4 key user scenarios that have been defined with input from stakeholders or direct knowledge of user behavior.

An explicit way to define a hierarchy is to list the elements you need to have on your screen and number them from most to least important. An element is a unit of content or functionality. Your list may be something like this:

• search box
• submit/cancel buttons
• footer
• automatic update widget (for blog and twitter)
• latest 5 items
• featured content text
• promotional headline
• cart widget
• global navigation
• local navigation
• login area
• logout
• content areas

There can be more than one element with the same number – they will need to be treated in a way that suggests equal importance. The prioritized list serves as a blueprint for defining visual hierarchy, and can be used when making decisions about placement, size, color and treatment.

Next: Screen layout basics

References
1. Don’t Make Me Think by Steve Krug
2. "Communicating with Visual Hierarchy" by Luke Wroblewski
3. Graphic Design Manual by Armin Hofmann
4. Eyetracking research - findings from Nielsen Norman Group's usability studies using eye tracking technology
5. Universal Principles of Design by Lidwell, Holden & Butler

Visual Design Tips for Web App Developers: #3 - Use type to help establish and reinforce visual hierarchy

Note: As of June 2013, this post is out of date. To learn more about using type appropriately in web and mobile apps, we recommend chapter 5, "Type," of our book Visual Usability: Principles and Practices for Designing Digital Applications. You can find out more about Visual Usability in our blog post about the book.

Like a newspaper, web apps may have multiple text elements at similar levels of importance throughout the layout. Unlike a newspaper, web apps might not have editors and designers to direct and define the information hierarchy on a daily basis.

Defining rules for type styles and applying them consistently provide the cues people need to quickly process and make decisions about where to read or what to do in a web app. Aside from aiding usability, typography can be what transforms your design from good to great. We don't expect you to be type geeks, but we do think that with a few tips and examples, you'll be able to create and use simple and effective type hierarchies and avoid common mistakes.

Choosing a font
This blog post covers choosing fonts for an application's content and features, not for its logo (visual identity). Selecting fonts for identities requires different criteria, and for that reason, we assume that a professional designer will be responsible for creating a memorable identity.

In a web application, typically one font family is enough as long as it has three weights: for example, roman, bold and italic; or roman, semibold and bold. You can get away with a font with two weights if you add the use of caps to the hierarchy, but this needs to be done with restraint. (See examples later in this post.)

A serif font will make your application feel more traditional and print-like, while a sans serif is more workman-like. Serifs create more visual activity and sans serifs typically create less, but this varies from font to font. Many aspects of a font contribute to (or detract from) its readability online. This, combined with the fact that you may need to complement an existing style or establish a visual style for brand purposes, means that you may have to try a few different options before you find one that feels right for your application and its audience.


Typetester is a great tool for selecting and comparing fonts.

Choosing a size and weight
Size and weight differences are one way to establish visual hierarchy with type. For example, larger, bolder text emphasizes more important headers, and small, italic text is better for captions or in-context help, places where you are providing supporting, not lead content.

Use boldface and italics sparingly. They're cues to highlight information, and when applied too often, make your text less readable. Reserve them for headers as much as possible, and never use underlines unless you're indicating hyperlinked text.

In general, you won't want to use type any smaller than 8 pixels high onscreen, and even at that size, some browsers may begin to render the type with jagged edges. Check your type across multiple browsers and platforms to ensure it's legible everywhere, and consider sizing your type with the more accessibility-friendly em units.

Sample type hierarchies
To illustrate some of what we've been talking about, here are some sample type hierarchies. The goal of these hierarchies is to create a set of type styles that show a visual progression from strongest to weakest in relation to one another.

Tahoma hierarchy:


Georgia hierarchy:


Myriad hierarchy:


Choosing a link style
As the web has evolved, people have learned that underlines aren't the only way to identify a hyperlink – but the problem is that there is no one convention to take its place. Color change and highlighting are two other conventions.


Links on the MIT Media Lab's website display a light blue background tint on rollover.


Blue headlines are underlined on rollover on The New York Times' website.

Color change is an appealing cue, but it's prone to contrast problems, and rollover effects can't help users who never figure out where to roll over in the first place. The New York Times can get away with using non-underlined discoverable links because the online newspaper format is a convention its readers understand. If you have an application that does not follow known patterns and/or people need to learn it quickly to get things done, underlining is the clearest way to convey "clickability."

Type hierarchies in practice
The hierarchies shown progress in visual importance from most to least. However, in practice, hierarchies are often not linear progressions. For example, Level 1 heads often need to be less visually prominent so as not to upstage more important content – a case of being more important from a semantic markup perspective, but less important from a visual one.

The illustration below shows one way a hierarchy might map to levels of heads in a web app. (Click image to enlarge.)


Getting your font online
There's been an explosion of tools available to move type on the web beyond common system fonts such as Arial, Verdana and Georgia (although these are fine choices for web app fonts). CSS and JavaScript-based options – the @font-face attribute, Typekit, Google Font Previewer, Cufón, etc. – offer simple and often free methods of incorporating other fonts into your web apps as HTML, not Flash or graphics. Our preference so far is Typekit, for its inexpensive access to a wide range of well-known and well-designed fonts.

Licensing, however, remains a thorny problem, with each type foundry having its own set of rules about font embedding or linking. No matter which option you choose to bring additional fonts into your app, be careful to check the fonts' licensing requirements to make sure your application stays nice and legal.

Basic rules of thumb

1. Body text should be roman, with a limited column width (ideally no more than 600 pixels) to enhance readability.
2. It's okay to use caps, but they create a lot of emphasis, and making text bold and all caps is the VISUAL EQUIVALENT OF SHOUTING. Don't do it unless you really need to or you reduce the visual volume by shrinking the font size slightly and/or adding letterspacing. (See the hierarchy examples for effective uses of all-caps headers.) 
3. Just because you can use tons of fonts on the web now doesn't mean you should. Sticking with system fonts is better than using an unusual font that will distract from the content.

For more information

• Typetester is a great tool for selecting and comparing fonts.
• Thinking With Type: a site for a book by Ellen Lupton that has basic typographic information. More for traditional typography as opposed to screen/application typography, but still applicable for the basics.
• Becoming a Font Embedding Master, blog post by Jonathan Snook.
• For wannabe typegeeks: On Web Typography by Jason Santa Maria.
• A handy survey of commonly installed fonts by platform.

Visual Design Tips for Web App Developers: #2 - Use a small set of UI affordances, and apply them consistently

Note: As of June 2013, this post is out of date. To learn more about selecting affordances and using them consistently, we recommend chapter 1, "Consistency," and chapter 8, "Controls and affordances" of our book Visual Usability: Principles and Practices for Designing Digital Applications. You can find out more about Visual Usability in our blog post about the book.

When developing a complex application, using the fewest interface elements and behaviors consistently is critical to make your application look organized and behave as expected. For example, this version of an older application has three separate ways of closing a window:



Users must close the leftmost popup by mousing out of it, the center popup by clicking a link or a nearby button, and the top popup by clicking a link that looks completely different from the one in the center popup. Having one way to close a window rather than three would reduce the number of visual cues, improving the appearance, and would help the user know what to expect from the affordance, improving usability.

Here’s another example, the editing interface from the latest version of Microsoft's Photo Gallery software.



It looks like the design and development team tried to introduce some consistency by using an “x” icon for deletion. The problem is that not all the “x” icons do the same thing – the brushstroke icons at top left and bottom delete the photo, the heavily stroked red x at upper right closes the photo file without deleting it, and the small gray x at right closes the metadata pane. All of these actions have very different consequences – especially deletion and file closure! – so their icons should not feel so closely related, or should at least be more clearly identified than they are.

Consistency can be hard to achieve when different teams are working on different parts of an application, and when features are in flux. Set logical rules for where and how interface elements appear based on knowledge of how most people will use the application and existing conventions of any related application UIs. Work to maintain the consistent language as features gel. The payoff will be an application that looks and feels professionally designed, and rules that when documented can serve to guide further development.

For more information:

• Mashable’s list of 10 web UI kits and resources for designers (just as handy for developers in a pinch!)
  
• The JQuery UI wiki has a good page about its button design, hierarchy, and behaviors.
  

Visual Design Tips for Web App Developers: #1 - Align elements

Note: As of June 2013, this post is out of date. To learn more about alignment and layout, we recommend chapter 4, "Layout," of our book Visual Usability: Principles and Practices for Designing Digital Applications. You can find out more about Visual Usability in our blog post about the book.

We've worked with a lot of great developers who not only want to make their apps work well – they want them to look good, too. We’ve put together a list of tips for developers who don't have a designer to work with when needed, who want to improve the aesthetics (and the usability) of their apps or who want to have a bit of insight into the designer's approach. This post is the first in an occasional series.

1. Align elements
If you have a UI that has a lot of elements on it, one way to improve the look is to align elements "flush left" or along the left of the lines of a grid. We’re not talking about selecting or designing and using a grid – that needs to be done in advance of development, is more in the designer’s skill set and can be more than a developer wants to deal with. We’re talking about a quick and simple rule of thumb that can be done late in the game – aligning elements flush left to the fewest possible number of vertical lines.

Lines and grids aren’t literal representations of vertical and horizontal lines across the page; they’re virtual guides to help you place elements consistently and logically, which can present the illusion of fewer elements and create less visual activity for the eye. They just plain make your UI look “cleaner.” If you want the gory details of grid design and usage, there are plenty of places to look – see links at the end of this post. In the example image, not all elements align, but enough do to make this busy layout look organized and not chaotic.



To illustrate further, we’ve taken an old UI and reduced the number of left vertical “lines.” This decreases the visual “activity” created by the ragged white space created by aligning form labels right. The change increases the distance from field label to field, but the gaps created are not as distracting to the eye.

Before


After


More information about aligning page elements:

• Luke Wroblewski's web application form design page goes into detail regarding the pros and cons of form alignment.
• The ultimate guide for designing with grids – overview, techniques, examples and tools.
• The best old-school graphic design manual on grids is The Grid by Allen Hurlburt.