Design Basics - Engineering Perspectives - Lecture Slides, Slides of Process Engineering

Download Design Basics - Engineering Perspectives - Lecture Slides and more Slides Process Engineering in PDF only on Docsity!

Design basics and rules of

human interface

To Err is Human

• Many Accidents Are Inherent in Design or Installation of

Human Interfaces (Example)

• Bad interfaces are slow or error-prone to use
• Bad interfaces cost money and lives

• Making Mistakes is Human’s Nature

• Humans are not infallible consistent creatures
• Systems should be designed to reduce the likelihood of those

mistakes and to minimize the consequences when mistakes

happen

• The Core of Interface Design

• Put the user first
• Keep the user in the center
• Remember the user at the end

2

Local Structure

• Go-Seeking Behavior

– Users have some idea of what they are after and a partial

model of the system, and meander through the system to

try to get closer to their goals

– System needs to give the users enough knowledge to help

them get closer to their goals

4

Start (^) Goal

Local Structure

• Four Design Rules

• Users should know where they are
  • The web page or screen should make clear where the users are in terms of

the interaction or state of the system

• e.g. Some web pages show “breadcrumbs” at the top of the screen, the path of the titles which indicate where the page is in the entire website
• Users should know what they can do
• What can be pressed or clicked to go somewhere or do something
• Users should know where they are going (or what will happen)
• Where they will be taken after clicking a button or a link
• Icons that are not self-explanatory should always be accompanied by labels

or at the very least tooltips or some similar techniques

• Users should know where they have been (or what they have done) - The system should give feedback or confirmation of what the users have

done

• e.g. When a file in Microsoft Word is being saved, a status bar at the bottom of its page shows its progress 5

Global Structure

• Overall Structure of An Application

– The way how various screens, pages or device states link

together

• Hierarchy Organization

– Usually by functions of system elements, but can also by

roles, user types, modules, etc.

7

The system

info and help management messages

add user remove user

Functional Hierarchy of a Messaging System

Global Structure

• Hierarchy Organization (Cont.)

– Detailed knowledge of the intended user is essential

• Different people may have different internal structures for their

knowledge and may use different vocabulary

• It is not good to create a hierarchy that the designer understands but

not the users

– Deep hierarchies are difficult to navigate

• It is better to have broad top-level categories or to present just a few

levels of menu on one screen or web page

• Items on a screen or page should be structured, depending on the

user’s purpose

• e.g. If the user wants to look up information of a particular state in the

USA, an alphabetical list of all state names would be best; if the user wants

to search for states in a particular region, then a list by region would be

more appropriate

8

Global Structure

• Dialog (Cont.)

– Human-computer dialogue

• Overall patterns of interaction between the user and system
• Details may differ

– Network diagrams

• Principal states or screens are linked together with arrows
• They can
  • Show what leads to what
  • Show what happens when
  • Include branches and loops
  • Be more task-oriented than hierarchy

10

11

Main screen Remove user Confirm

Add user

Network Diagram Showing the Process of Adding or Removing a User from the Messaging System

Screen Design and Layout

• Form Follows Functions

– Let the required interactions drive the design and layout

• What actions do the users perform? What kinds of information do users need? In what order different kinds of information are likely to be needed?

• Visual Tools for Layout

– Grouping and structure of items

– Order of groups and items

– Decoration features

– Alignment of items

– White space between items

13

Screen Design and Layout

• Grouping and Structure of Items

– If items logically belong together, then they should

physically be grouped together

14

Billing details :

Name Address: … Credit card no

Delivery details :

Name Address: … Delivery time

Order details :

item quantity cost/item cost

size 10 screws (boxes) 7 3.71 25.

• Details for billing and delivery are grouped spatially
• The list of items actually ordered are separated from billing and delivery details by a line as well as spatially

Grouping Related Items in an Order Screen

Screen Design and Layout

• Alignment

– For users who read text from left to right, lists of text

items should normally be aligned to the left

16

Dix Finaly Abowd Beale

Dix Finlay Abowd Beale

Screen Design and Layout

• Alignment (Cont.)

– Numbers should normally be aligned to the right (for

integers) or at the decimal point

• Shape of the column gives an indication of magnitude

17

19

sherbet 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

sherbet 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

sherbet 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Leaders

Color Background

Right Aligning Text Items (good if the user scans the numbers frequently but only occasionally scans the names of items)

Screen Design and Layout

• White Space

– Space to separate blocks

• e.g. Gaps between paragraphs or space between sections in a report

– Space to create complex structures

– Space to highlight

• e.g. Used frequently in magazines to highlight a quote or graphic

20

E F

D

B C

A

Space to Separate

Space to Structure

Space to highlight