The typical user of an information system (a website, for example) will exercise perhaps three minutes of good will, during which he (or she) will give rein to curiosity, peek and poke, and try to understand how to find things. If no progress has made by this time, the user's relationship to the system will become permanently adversarial; further search attempts will not be considered worthwhile. There's a small window of time during which a user can be won over by the system - let's examine a set of principles that will facilitate that.
We start by designing a set of categories which will house some example information.
The first requirement of an intelligible set of categories is that they be mutual. By this I mean that they subdivide a population into commensurate partitions. Few things are more annoying than a presentation which breaks this rule. For instance:
- Monthly reports
- Sales reports
- Joe's reports
- New reports
Nobody wants to waste mental effort trying to guess where something is. To eliminate this, present the information in mutual categories:
- Monthly Reports
- Weekly Reports
- Quarterly Reports
- Sales Reports
- Expense Reports
- Tax Reports
- Joe's Reports
- Jack's Reports
But suppose you want to retain the option of finding Joe's reports and Sales reports and Monthly reports? You must rise to a higher level, at which these categories become mutual:
- Reports by Time Period
- Reports by Cash Flow Type
- Reports by Agent
- Reports by Age
To invent some terminology, let's say that a mutual set of categories must belong to the same species. So "time period" would be a species, and "monthly" would be a category within that. This leads to the next principle: the viewer should never have to look at more than one species at a time.
So, if a system has the following:
- Reports by Time Period
- Reports by Region
then this principle has been violated. Reports by "Region" and "Cubes" do not belong to the same species. Here is a better presentation:
These belong to the species, say, "Presentation Vehicle". "Reports by Region" and "Reports by Time Period" belong to the "Report" species.
To assemble these ideas, first note that each sub-division starts life as a category, and then becomes a species in its own right:
- Species: Presentation Vehicle
Categories: Reports and Cubes
- Species: Reports
Categories: Reports by Time Period; Reports by Cash Flow Type; Reports by Agent; Reports by Age
- Species: Reports by Cash Flow Type.
- Categories: Sales Reports; Expense Reports; Tax Reports
So the principle that a viewer should only see one species at a time is another way of saying that he should only see categories which are mutual to each other; or, to be more precise: a viewer should only see, at any one time, a species and its component categories.
If space permits, multiple species can be presented, as long as the boundaries are clear, and there is no ambiguity about organization.
Devising a set of categories can be very hard work; in some cases, this is nothing less than a conceptual description of an entire enterprise. In this respect, it is similar to designing a database.
There is one design decision fundamental to data organization: the choice between multiple and single membership. In a multiple membership system, information can be found in more than one category. "Sales for January" can be in the sales category or monthly category. An example of a single membership system is a restaurant menu, where the customer does not want to find (and the firm does not have space for) the same item under many headings.
Another decision is whether labels refer to information or users. A college website may have a tab called "faculty". This is ambiguous: does it contain information for, or about, faculty? Some college sites are explicit: tabs are labeled "for faculty" or "about faculty". However, in general, it is preferable to label the information, not the user. How does the web-designer know what a faculty member will want to look for?
Category labels should identify the contents of the category. This is so elementary that you may wonder if it is intended as a sarcastic remark. If only. So that we can refer back to this, let's give it a name: the principle of descriptive labeling.
Category labels may be meaningful to regular users, but not to newcomers. This should be overcome, by adding explanatory sub-labels. I once visited a theatrical web-site that had a choice labeled "Discovery Series". I never did find out what that was; the site had lost my good-will by that time. It would not have taken much space to clarify this, whatever it was. "Discovery Series—Our Saturday Night Lectures"; or "Discovery Series—Our Recorded Plays".
Visual monopoly: when a user is selecting a category, all the candidates are presented together.
Category selection should be organized, to coin a phrase, under a visual monopoly. Lists of choices tend to capture the attention; if the user is selecting from among a horizontal row of buttons, he is not simultaneously going to notice another row elsewhere on the screen. When he discovers it, he will be annoyed—he has already expended effort trying to locate his target within the first row; he has tried to form a mental picture of the information as housed within the categories he is looking at; this will be wasted effort if he finds another set of categories elsewhere.
This is not meant to be a prohibition against multiple rows, as long as they are shown together, as a single population of choices covering many lines; it is meant to prohibit one row, along with another row, far away on the screen, with different shaped icons, and having categories not clearly related to this first.
Psychological Stance of the User
The site designer must define the psychological stance of expected the user: is the user a passive consciousness, available for manipulation and control; or a directed consciousness, searching for information with a clear target in mind? In the first instance, the principles of advertising will govern the design; in the second, the principles of information display, which is the subject of this article. There is an intermediate state: someone who does not have a clear target, but who nonetheless wants to understand the informational geography of the site; such a user is also best served by the principles discussed here.
To see these principles (violated) in action, consider the choices you see in Microsoft Word, under the "Office" Button, Word Options:
First of all, to reach this list, you click the office button; you see a list of choices. "Options" is not on the list. You might spend several (not exactly joyful) moments trying to guess which item to choose. Finally, when you are ready to exit and look elsewhere, you notice a button marked "options" next to the "exit" button, far away from the other choices. This is a violation of the visual monopoly rule.
Having clicked the options button, you see the bullet point list shown above. Here we see category names that are not meaningful. How does a person know if the choice he is looking for is popular? How does he know if it is advanced? These labels break the principle of descriptive labeling.
Once you become sensitized to these things, you will hardly be fit company. Everything will offend you. It is the price you pay for initiation into the higher reaches of data presentation. You must become a light in the world and advance the cause.
This will be hard work
First, design the categories. This will be a hierarchy. At the top level, a set of species. Each species will contain a set of categories. Each category will become a species in its own right, with a set of categories under it. And so on. The top list of species, as well as all subordinate lists of categories, should be mutual: our guiding principle. The viewer should never see a list of categories unless they are mutual to each other. Categories are mutual if they subdivide a population into commensurate partitions. This will be hard work; it will represent the conceptual skeleton of the entire effort. So that you don't exaggerate this task, be clear about the contents of the project; it may be a small sub-set of the firm's activities or products.
You will need to define your aesthetic approach. I like simple, clean, uncluttered designs; I don't like things flashing at me; I like uniform displays, rather than, say, a horizontal list in some places and vertical lists elsewhere (although these can be handled tastefully). There is no reason to dwell on this; it is part of the creative process, and a good designer will want to develop his own standards.
Then decide on the ratio of label to information. Do you want the viewer to see labels only, with information appearing after he clicks a label? Or do you want information along with the labels, at the top level? This will depend on the nested depth and the quantity of labels.
Think carefully about icons; sometimes they are helpful; not always. Internet Explorer becomes less verbal with each release. There is a green circular arrow which signifies "history". I don't see the connection. There is a yellow square with the corner raised, meaning "discuss". Neither the yellow square nor the verbal "discuss" convey anything to me. Generally speaking, your clients will not be archeologists shining a flashlight on a cave-wall; they will expect intelligible symbols, not puzzles.
Here are the Principles:
- Categories should be mutual.
- A category is a component of a species. It may also become a species itself, if there are other categories below it.
- A viewer should be looking at one species (and its component categories) at a time.
- Decide between multiple and single membership systems. May an item be classified under more than one category?
- Be consistent in your use of labels: do they identify users or information? Make it obvious.
- Principle of descriptive labeling: users should be able to infer the contents of a category by reading the label.
- Sub-labels can be helpful if the labels are not self-explanatory. There is usually no excuse for this, but sometimes the label is a proper noun, referring to program, product or other proprietary attribute of the entity being modeled.
- Visual monopoly: when a user is selecting a category, all the candidates are presented together.
- I think you will be surprised at how much effort is involved in this activity. Most sites evolve historically, as things are added to some original design; this may turn out to be practical. Visualizing the whole thing in advance is major, but you get a shot at best practice.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post