Archive for the 'Reading material' Category

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’

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.

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.

The Business of Design

A great book by Joseph DeSetto for beginners like myself.

The Business of DesignWho this book is for:

The Business of Design is the definitive book to teach business to artists pursuing a career in design. For many years, university design curriculum and books have been able to successfully teach the tough, process, and method of creating high impact corporate communications, yet many students still begin their career-and even advance into senior positions or start their own design firms-with only a limited understanding of the business and industry that employs these talents. This text was created to fill that void and better prepare designers to choose employers, work with clients, and successfully navigate a creative career.

Background

In this text, we focus mainly on visual design, though many other areas of practice-interiors, interactive, industrial-follow similar conventions and share the same challenges. This text is written for anyone in the design field to use, and though primarily intended for university classroom use, it is written in a more approachable, conversational stlye than the usual formal approach of a business textbook.

Introduction

Design reaches every industry around the world in some form. At its core, design is a method of solving problems. A designer must learn how their work is one piece of a much larger business puzzle. In this chapter, we introduce the industry, including a look at the amount of revenue design generates and what designers can expect to earn.

This book goes on to give some very interesting case studies. Good for learning designers. Take a look.

Notes on Colour

Notes from Color Harmony: Logos, an interesting little book with a lot of different color schemes in it.

Introduction

In a designer’s craft, logos represent a special achievement. They are the most succinct and company vehicles we use to communicate complex messages. They must embody select and specific qualities that connect with and linger the memories of their intended audiences.

Selecting Color

When it comes to the application of color to logos, several considerations must be weighed. First among them is the general (but recently declining) requirement that a logo should work in one color. Typically, one color means black, and is based on economy more than any color theory.

The Color Wheel

Color Wheel

The color wheel is anchored by three primary colors – red, yellow, and blue – which articulate an equilateral triangle within the wheel. Complementing these colors are three secondary hues – green, violet, and orange. These form a second, opposing equilateral triangle. This geometric color structure is further augmented by a tertiary palette of six mixed hues, derived by combining the primary and secondary palettes. Together these twelve segments create a complete, graduated color wheel.

Primary Colors

Primary colors form the basis of the color spectrum. In theory, these colors can be mixed with one another to create all other colors. In practice, this is not strictly true. Inscribing an equilateral triangle within the color wheel, the primary colors of red, yellow, and blue establish the basis by which secondary and tertiary colors are defined.

Secondary Colors

Secondary colors fall on the points of a second equilateral triangle, position opposite the first. Also called complementary colors, they are formed by mixing equal parts of the primary color points they bisect:

  • orange = red + yellow
  • green = yellow + blue
  • violet = blue + red

Tertiary Colors

The segments between the primary and secondary color segments are occupied by a range of tertiary hues created by mixing one primary and one secondary color. Tertiary colors are named for the two colors used to created, with the primary color being named first (for example, blue-green or red-orange).

Monochromatic

Monochromatic color schemes use a single hue, in combination with one or more of its tints or shades. Low in contrast, but nonetheless authoritative, these palettes can be both balanced and soothing.

Pros:

Blue Monochromatic

There’s no guess work with these color schemes – simply pick a color and go.

Cons:

Variant Color

Notice how a monochromatic color scheme lacks the diversity of hues that other color schemes exhibit.

Tips:

Green Monochromatic

The highest amount of contrast between shades and tints of a hue utilize the full potential of a monochromatic color scheme.

OK, that’s all for this post. I don’t want to get sued!

It’s quite an interesting book, particularly for ideas, so check it out if you get a moment.


Categories