Is a simple design to show the placement of information elements on a screen and the space needed for each element?

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion

There are times when multiple elements might be appropriate for displaying content.  When this happens, it’s important to consider the trade-offs.  For example, sometimes elements that can help save you space, put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be. 

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies.  Once you know about your user, make sure to consider the following when designing your interface:

• Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
• Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly.  It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site. 
• Be purposeful in page layout.  Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
• Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.
• Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
• Make sure that the system communicates what’s happening.  Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user. 
• Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user.  This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.

References

First there were stone tablets, papyrus scrolls and paper. Then came computer screens and electronic tablets. As the technology to display a page evolves, it remains the designer’s job to arrange the content clearly. But what’s the best way? In short, visual hierarchy.

Here’s a definition of visual hierarchy: Visual hierarchy is the arrangement of graphic elements in a design in order of importance of each element. The visual weight defines the importance of an element in a design’s hierarchy, communicating to a viewer’s eyes what to focus on and in what order.

It’s an increasingly important question, as responsive frameworks force designers to think about many different pages at once. Faced with dense text and short attention spans, designers developed 6 principles to guide the reader’s eyes to the most important information.

These 6 principles of visual hierarchy will help you design everything from brochures to apps, guaranteeing a positive reading experience for the end-user.

1. Reading patterns _

All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.

Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design.

F-Patterns

F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck).

How can you utilize this? Align your important information left and make use of short, bolded headlines, bullet points and other such attention-grabbers to break up paragraph blocks.

Z-patterns

Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.

Web designers commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal.

In the below design for the 2010 Build conference, important elements include the logo (upper left), “register now” button (upper right), and speakers list (across the bottom), all of which are strategically placed at the sweet spots of the Z-pattern.

2. Size matters _

This one is simple enough: people read bigger things first. If your eye goes to “performance” before “cracking” in the below ad for the Young Vic theater, then you should get in touch with a perceptual psychologist immediately: you can probably make some good money undergoing testing as a rare anomaly.

What’s interesting, is that this tendency is actually strong enough to override the top-down rule. In the above image, “cracking” overrides “time to act” because it is both bigger and to the left (so left-to-right rule lends a hand).

But in the below page from Annual Report: Human Rights Campaign 2012 (designed by Column Five Media), we read the large-print “Fighting for Equality on the Campaign Trail” before the text directly above it, “Election 2012.”

“Election 2012” is the highest-level order of information: it tells us the general topic that the information below falls under. But the designer decided that the article heading was more interesting for readers and so sized it to be read first.

3. Space and texture _

Another way of drawing attention is to give content ample room to breathe. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights “badminton” and sets it into its own space.

In the third image, a background scribble interrupts the space of “Sports” but not “badminton,” and consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”

4. Typeface weight and pairing _

Typeface selection is critical to establishing visual hierarchy. Among a typeface’s most important attributes are weight – the width of the strokes that compose its letters – and style, like serif and sans serif. Other modifications like italicization can play a role too.

Note how typeface affects the hierarchy order of the words in the below web design for The Tea Factory: “the perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.

In some cases, the goal is to present a variety of information as equally urgent. Setting it all to the same size and weight would accomplish the equivalency, but would also make it monotonous. Differentiating the typefaces is one way to avoid this, as on the below Trendi magazine cover.

Here, the five teasers around the periphery of the page are all equal on the hierarchy, but achieve variety by altering between two well-paired typefaces – one a mid-weight serif, the other a lightweight but tall sans serif.

5. Color and tint _

Here’s another no-brainer: bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. The website for Where They At contrasts highlighter yellow and color illumination against a black-and-white grid to striking effect:

The Guggenheim website uses color to accentuate important information like location choice, the list of exhibitions currently on view, and the links to special exhibitions.

The website for the Whitney Museum, on the other hand, establishes hierarchy within a single typeface, weight and tone (black) by using tint (which refers to the addition of white to a base tone, making it lighter). “Cory Arcangel on Pop Culture” is clearly beneath “New on Whitney Stories” on the visual hierarchy, not only because it is placed lower but because its tint is lighter, making it less striking to the eye against the white background.

Color is of particular importance in mobile app design, where a small screen size limits your ability to use other strategies like size differentiation and broad spacing. On Grainger Industrial Supply‘s app, the “proceed to checkout” button is colored red, making it stand out from any page where it appears. The “Narrow Your Search Results” bar, by contrast, is grey, making it roughly equivalent on the hierarchy with other elements like the search bar and product links.

6. Direction _

Page layouts are typically designed according to a grid of vertical and horizontal lines, both by convention and because this is the most legible format. In such a system, a new way to establish hierarchy emerges: break the grid.

Text that is arranged on a curve or diagonal will automatically stand out against surrounding grid-locked text, taking center stage. This has long been an effective strategy in advertisements like the below bus stop poster by Frost Design.

What visual hierarchy principles do you think are the most important? Share in the comments!

What type of report provides details behind the summary values on a key indicator or exception report?

When displaying textual information we should also be careful not to hyphenate?

Which of the following are the guidelines for displaying tables?

Which of the following is a method by which users interact with an information system quizlet?