Physical Design

Introduction

We studied human cognitive processes, i.e. perception, thinking, and memory, at the very beginning of this course. All these concepts need to be kept in mind while designing a physical model. The details of our design must not conflict with those human cognitive processes. For example, the interface should have all possible operations listed on the screen so the user doesn’t have to remember them all.

All the principles and rules that we have learned must be kept in mind when designing the details. They serve as a good source of information to help the designers design usable products. Let’s discuss some aspects of physical design.

Interface widgets

We use interface widgets to display information. These widgets may include menus, icons, dialog boxes, input fields, toolbars, etc. The design and use of these widgets are commonly documented by a style guide. Style guides determine how the interface should look and feel. There are two types of style guides: commercial-style guideCommercially produced like a Windows style guide and corporate-style guideInternally produced in a company. For example, all Windows products have almost the same look and feel to them. In this lesson, we are going to study a few main widgets in depth.

Menu design

We have already familiarized you with how menus are used, their types, and grouping. In order to see how the process of designing a menu proceeds, let’s consider the shared calendar example again. Requirement gathering for this application revealed some user functions to include such as making a calendar entry, adding contact details, finding other people’s schedules, and arranging a meeting among two or more people.

• The main task of making an entry has a number of actions associated with it such as add, edit, move, and delete an entry. Adding contact details also has some associated tasks such as add, edit, and delete details.
• The most suitable menu grouping, in this case, is logical grouping. First, we create menu options of all the main tasks, and then we group all associated tasks under their respective option.
• After evaluating this prototype, we realize that neither arranging a meeting nor searching other people’s schedules have a subtask, nor do they fit in other group options. Therefore, these can better be represented as options in the toolbar rather than menu options. See the slides down below for a better understanding.

Icon design

Designing an icon is not as easy as it seems. A good icon design does not guarantee that it will be accepted by the majority of the user group.

• Icons are context-specific and cultural. For example, emergency exit signs are used in buildings to indicate an exit. People easily recognize these even if no label is used on them. The reason is that we have all become accustomed to seeing this sign at an emergency exit. Imagine a similar style sign was used to indicate the entrance of a restaurant. It would create great confusion for the people passing by and coming to the restaurant. Icons should be designed/selected carefully, keeping in mind the targeted audience.
• Another point to keep in mind is to design a simple and easily perceivable icon. Icons with lots of details, small sizes, or images placed together in a cluster are difficult to understand and perceive.

In the calender prototype, we represented the function “arrange a meeting” with an icon of multiple users. It is simple, easily perceivable, and conveys the proper meaning. Please keep in mind that this icon is just one of the possible icons and can be improved.

Example icon designs: Below are two sets of icons designed for the file operations copy, save, and delete. One set is based on abstract design and the other set uses paper as a metaphor and is based on naturalistic design. Some people may find abstract designs better to understand and use. On the other hand, some may find concrete designs easy to learn.

Screen and navigation design

A good screen design lets a user determine these four things:

• Where am I?
• What have I done or how did I get here?
• What can I do?
• What will happen or where am I going?

There are two structures of screen design based on navigation:

• Global structure
  This can be the whole site/application or a task divided into multiple screens. Global structure can be designed using task analysis that divides the whole task into small multiple subtasks. Each subtask can be translated into a separate screen design. This subtask can be a single decision or a simple data entry. Thus, dividing them into separate screens can be as frustrating as having all subtasks on one screen. A common ground should always be considered.
• Local structure
  This is an individual screen design. Local structure mainly focuses on how the current task and relevant information is displayed on the screen. It should be designed using proper colors, grouping, boxing, or motion so that when users first see the screen, their focus is immediately captured by important details required for the current task.