Chapter 6: Design and Usability

Iconic Representation

The use of image or symbol to recall signs and improve the recognition. There are 4 type of iconic representation:

Similar Icon
Use of  image that similar to the action, concept and object

Example:  Image of people exit from the place

Figure 6.1

Picture above show the symbol of people exit the place. Similar iconic representation can be found in this picture as the action of people exit the place can easily be understand. 

Example Icon
Use of image as example to show the complex action, concept and object

Example: 
Image of umbrella and motorcyclist 

Figure 6.1.1

The image above show the icon of umbrella and motorcycle. It use to represent the place as the shelter during rainy day

Symbolic Icon
Use of recognizable object to represent to the action, concept and object

Example:
Symbolic icon in escalator signs

Figure 6.1.2

The figure above show the warning sign in the escalator. The symbol of trolley is to represent that user cannot bring the trolley on the escalator. 

Arbitrary Icon

Use of image that has no relationship with the action, concept and object.

Example: 
Arbitrary icon in backpack

 

Figure 6.1.3

The figure above show the tumble drying sign. The icon is use at the most clothing and fabric product as guide for the user about do's and don't when cleaning the product. 

Affordance

Characteristic of product that effect its function

Example: Magnet button in the bag

Figure 6.2

The image above the magnet button on the bag. The magnet button use to seal the bag so that the things from the bag cannot easily fall out. 

Constraint

Constraints have limit possible action that can performed on a system. We use constraints in design to simply usability and minimize errors. There are 2 type of constraint: 

Psychological Constraints

Used to improve the clarity and intuitiveness of design. Psychological constraints limit the range of possible actions by the way people perceive and think about the world which is symbols, conventions and mapping. Symbols influence behavior by communicating through language, such as text, icon and warning sign.

Example: Rice cooker box

Figure 6.3

Physical Constraints

Used to reduce the sensitivity of controls, minimize unintentional input and prevent dangerous actions. Limit range of possible actions by redirecting physical motion in specific which is path, axes and barriers. 
Example: Warning symbol of water heater

The designer use the icon and text to make better understanding to users. 

Figure 6.3.1

The sticker warning is important to remind user for awareness. It is for users safety when use the water heater.

Visibility

Visibility is a system usable to indicate status, the possible actions that can be performed and the consequences of the actions once performed. The principle of visibility is based on the fact that people can be better at recognizing solutions when selecting from a set of options, then recalling solutions from memory. Visible controls and information serve as reminders for the possible outcome from our mind.

Figure 6.4

ATM machine is visibility system where determine the user ID and password before proceed cash withdrawal. The ATM machine provides selecting option for menus. Therefore, the users should memorize their on key password and knows to use ATM machine.

Mental Model 
People are tendency to understand how the system works based on the mental representation of the experience. 

Example: Mineral bottle

Figure 6.5

The figure above show the image of mineral bottle. The user can recall on how to open the bottle which is by twist the bottle cap based on their experience before on how it works. 

Mapping
Good mapping means the design of an object effects the users to use it easily when their know how to control their action on that object.

Example : grip carry and back support carry

Figure 6.6

This design of bag had 2 different of carry. This design of 2 carry bag make users know how to use the carry whether wants to grip or hang up at the back of body.