Bruce Tognazzini

Bruce “Tog” Tognazzini (March 26, 1945 – ) is a usability consultant in partnership with Donald Norman and Jakob Nielsen in the Nielsen Norman Group, which specializes in human computer interaction. He was with Apple Computer for fourteen years, then with Sun Microsystems for four years, then WebMD for another four years. He has written two books, Tog on Interface and Tog on Software Design, published by Addison-Wesley, and he publishes the webzine Asktog, with the tagline “Interaction Design Solutions for the Real World”. Learn more about Bruce on Wikipedia

Let’s just look at the Basic Principles of Interaction Design:

Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work.

Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.

Effective applications and services perform a maximum of work, while requiring a minimum of information from users.

The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web. Of late, many web applications have reflected a lack of understanding of many of these principles of interaction design, to their great detriment. Because an application or service appears on the web, the principles do not change. If anything, applying these principles become even more important.

Learn more.

Anticipation

Applications should attempt to anticipate the user’s wants and needs. Do not expect users to search for or gather information or evoke necessary tools. Bring to the user all the information and tools needed for each step of the process.

Color Blindness

Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who won’t be experiencing any color coding today.

Approximately 10% of human males, along with a rare sprinkling of females, have some form of color blindness.
Continue reading ‘Bruce Tognazzini’

Advertisements

Usability Guidelines to Consider When Designing Interfaces

These are a few usability guidelines (from an article on Smashing Magazine) that I thought were very relevant to projects that I’m doing at the moment.

Form Labels Work Best Above the Field

Form Labels

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Users Focus on Faces

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

User Focuses on Faces

Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

User Focuses on Faces

And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

Blue is the Best Colour for Links

Google Blue Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.
What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

White Space Improves Comprehension

Netsetter

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.
White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.
In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

Additional Findings

  • The registration link is titled “sign up” (40%) and is placed in the upper-right corner
  • Sign-up forms have simple layouts, to avoid distracting users (61%)
  • The “submit” button is either left-aligned (56%) or centered (26%)

Restraint

A very interesting read that I’m glad I happened across (in actuality, I’m subscribed to the Blog on which it was published: Usability Post).

Restraint:

There is one attribute of good design that I often see overlooked: restraint. Restraint in design is the quality of holding yourself back and implementing something which solves the problem in the simplest way possible. Oftentimes designers want to show off, imprint their own identity on a piece of work or simply get carried away, producing work that is good but losing simplicity and elegance in the process.

“Simplicity is the ultimate sophistication.” — Leonardo da Vinci

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exuper

Some interesting quotes that I have come to cherish, although I’m yet to really follow them.

Let’s take a look at a set of modern mobile phones:

modern phones

You can see how one phone stands out from the rest: the iPhone. Ok, an obvious example, but it’s only obvious because it’s good.

The iPhone uses the minimal design possible. There is only one button and the whole phone is essentially just one big display. Apple always use simple geometric shapes — there are no unique curves or design elements sticking out — it’s just symmetrical curves, circles, rectangles and lines carefully arranged to form their iconic minimalist, industrial design.

You can sketch the iPhone with just a few lines and the resulting shape is clearly identifiable.

iPhone Outline

Now, I am a “PC” user but I also have an iPhone, which is a magnificent device, and I do adore the simplicity of the device (one of the reasons why I got it!)

A good read.

10/GUI

Over a quarter-century ago, Xerox introduced the modern graphical user interface paradigm we today take for granted.

That it has endured is a testament to the genius of its design. But the industry is now at a crossroads: New technologies promise higher-bandwidth interaction, but have yet to find a truly viable implementation.

10/GUI aims to bridge this gap by rethinking the desktop to leverage technology in an intuitive and powerful way.

Exciting stuff! Watch the 8-minute video here.

The Case for Conservative Website Design

Everyone wants a well-designed Web site. But what, exactly, makes a Web site well-designed? Conversations on the subject often plunge into a dialogue akin to Who’s on First:

Q: Say, what’s the key to Web design?
A: Usability. It’s gotta be functional, man.
Q: Yeah sure, but what makes a Web site functional?
A. Jesus! You’re dense. It just means that it’s easy to use.

Interesting read and has some useful pointers for developing interfaces.

Source.

The Myth of Metaphor – Alan Cooper

Found this an interesting read on metaphors in interface design by Alan Cooper.

If we depend on finding metaphors to create user interfaces, we encounter the several minor problems already mentioned, but there are two more major problems: metaphors are hard to find and they constrict our thinking.

It may be easy to discover visual metaphors for physical objects like printers and documents. It can be difficult or impossible to find metaphors for processes, relationships, services and transformations, the most frequent use of software. It can be extremely daunting to find a useful visual metaphor for buying a ticket, changing channels, purchasing an item, finding a reference, setting a format, rotating a tool or changing resolution, yet these operations are precisely the type we find in software most frequently.

Don’t get me wrong, there is nothing bad about using a metaphor if one happens to fit the situation. Look! Here’s a twenty-dollar bill lying on the sidewalk. Of course I’ll pick it up; I’d be a fool not to! But then, I’d be a bigger fool if I decided to make my living finding misplaced twenty-dollar bills. Metaphors are like that: use ’em if you find ’em, but don’t bend your interface to fit some arbitrary metaphoric standard.

Download and read the PDF.

von Restorff Effect

A phenomenon of memory in which noticeably different things are more likely to be recalled than common things.1

The von Restorff effect is the increased likelihood of remembering unique or distinctive events or objects versus those that are common. The von Restorff effect is primarily the result of the increased attention given to the distinctive items in a set, where a set may be a list of words, a number of objects, a sequence of events, or the names and faces of people. The von Restorff effect occurs when there is a difference in context (i.e., a stimulus is different from surrounding stimuli) or a difference in experience (i.e., a stimulus is different from experiences in memory).

Take advantage of the von Restorff effect by highlighting key elements in a presentation or design (e.g., bold text). If everything is highlighted, then nothing is highlighted, so apply the technique sparingly. Since recall for the middle items in a list or sequence is weaker than items at the beginning or end of a list, consider using the von Restorff effect to boost recall for the middle items. Unusual words, sentence constructions, and images are better remembered than their more typical counterparts, and should be considered to improve interactiveness and recall.

This distinctiveness may also come in the form of humor, in which case the humor effect occurs. Similarly, specific examples include the bizarreness effect and the serial position effect.2

See also cognitive biases and memory biases.

Examples

eat mor chikin billboard

The Chick-fil-A billboards use a combination of dimensionality and humor to attract attention and increase memorability. The billboards effectively command attention in visually noisy environments, clearly and intelligently promote the Chick-fil-A brand, and are quickly read and understood. As billboard design goes, it does not get much better.

Cadbury’s commercials seem incredibly random and without a point to most people. But it has been discussed that these adverts feed you with something completely (seemingly) irrelevant, and then flash you with their brand. Memorable, no?

  1. Also known as the isolation effect and novelty effect.
  2. http://en.wikipedia.org/wiki/Von_Restorff_effect

Categories