Thursday, January 15, 2004

Try to integrate figure and ground (context).

Sharpening: If you want to have meaningful contrast then it should be sharp enough. 12pt text vs. 16pt text is usually not contrasted enough. Doubling each successive size works usually well (eg. 12pt and 24pt)

Use layering if you need to show lots of information on one screen. Think about a good map, where geological and administrative information seem to be on different layers, you can concentrate on one layer at a time and forget about the other. Use hue, orientation, type for separating the layers.

Contrast should be meaningful, not accidental or arbitrary

Sometimes it's needed that something (eg. a photograph) prepares user for getting some message.

Use scale and contrast to guide user through different layers and parts of the design in predictable sequence.

Window title bar is good example of combining different tasks into one element -- it shows title, provides space for dragging the window and space for system icons. And these tasks don't get into each other ways.

Simple paper clip -- Perfect design

One piece of wire accomplishes two tasks: providing tension and holding what's between. It seams easy to invent thing like this but the usually the easiest solution doesn't come to mind at first. If I were to invent a paper clip then I probably would have started with 2 pieces for holding and one spring for tension.

Irregularity will be interpreted as significant. Regularize non-critical elements.

Mullet & Sano

You can omit even something important if it's easy to deduce

1. Reduce to its essence
2. Regularize the elements
3. Combine elements for maximum leverage

Mullet & Sano

Maximum meanings, minimum means

Mullet & Sano

Eliminate unneccessary variation or detail.

Mullet & Sano

Emphasize by the absence of competing elements.

Mullet & Sano

If in anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.

Exupery

Program should support immediate use or invite further exploration.

Mullet & Sano

Some say it's most important to design action. For me, it's seems more natural to start with objects and structure and then add actions to the objects. That way browsing or exploring the structure of objects would be the most important aspect of the system both for user and for programmer.

"Action first" vs. "object first" is like procedural vs. OO programming. In the first case you start with finding an action/procedure (eg. "change employee's personal data") and then use it with some argument ("John Scott"). In the second case you first need to find an object from the structure ("John Scott") and then use one of it's actions/methods ("change personal data").

I find "object first" easier and more natural, but I'm a programmer, so it can be because of my different way of thinking. But I can't see why shouldn't it be easier for nonprogrammers also. Anyway, it's easier to make user interfaces for "object first" designs, so I will continue to do so until I'm fully convinced that most users prefer "action first".

What would be good design if you knew that users would be willing to learn the mental model of the design?

Hue is good for separating different types (or elements) on the same level because it does not imply order or hierarhy

Make "squint test" -- close one eye and almost close the other and then check your design to ensure that the elements in the same layer group together as unit but group itself can be separated from the rest.

Mullet & Sano, "Designing Visual Interfaces"

Make sure it's easy to distinguish between controls and data, and data and structure

Identify your communication goals before designing something. "What do I want to say?"

and answers

* Here one can enter records one-by-one
* This screen is a part of the system, where one can find and change information about employees
* This screen belongs to the "registry" section of the system
* Everything on the right part on the screen is about one certain employee
* If one finishes the work here, then possible new actions are ...
* and so on

Try to avoid bringing in additional elements (lines, frames) for grouping elements. Try to make the group emerge by itself (similarities, proximity between group elements and differences between different groups)

Make sure it's not possible to read some meanings from the design you didn't intend tu put there. Even slight accidental misalignment might look significant for another person. If two things look very similar but are not related then make them more different or user may go looking for the meaning of their similarity

Alignment is good for defining groups

Gestalt phenomena: "good continuation" -- eye is very sensitive to alignment

Groups can be defined by increasing similarities between group elements or by increasing differences between elements of different groups

Try to group elements like letter into words, columns/paragraphs so that they could be understand as a whole when needed.

Some space must be narrow, so that other space may be wide, and some space must be emptied so that other space may be filled.

Robert Bringhurst, "The elements of typographic style"

You need to find some axis on the screen for aligning elements. And be aware of those lines.

Visual design: beware of the "almost aligned"

I wanted to throw away some of my papers, so I'm storing some thoughts from those papers here.

A picture us worth a thousand words, unless you're talking about a picture of thousand words.

Don't remember who said it :(

Programmer has written a sql that is supposed to give some kind of insight about some data. He understands it because he has thought a lot about it. Now, user might not understand this analysis. Maybe it would be better sometimes if user were forced to do some efforts for getting this info out of the data. Programmer and software should help him as much as possible. Then the same data would be more useful for the user

You may well have insight into the future that users lack.
???

It's easy to feel that this task is easy for user if you forget to define it completely. Don't forget the "edges": how the action starts, how it ends, what leads to what.

Tasks may be simple when made separately, but problems may occure when user needs to order them into a sequence

You need to improve, not prove