Web Design

Rabie A. Ramadan, PhD

http://rabieramadan.org

2

2

Human Computer Interface (HCI)

Interaction of the user with computer software and hardware Includes topics such as:

• Software development and usability engineering

• Principles of good design

• Usability testing

• Styles of interaction

• Accessibility for people with disabilities

• Accommodation of human similarities and diversities

• Not just about application design – also WWW design

“User-friendly” is the common buzz word Good HCI is all about good design

3

What is HCI?

4

5

Why should we study HCI? When you produce an interface (a web page, or otherwise), you

affect how people use the interface.

When you write a program, you affect how people will use the program.

HCI affects you. You are a designer.HCI affects you. You are a designer.

In order to produce a high quality interface it is necessary to consider good design principles.

6

Design Guidelines Guidance for designers falls into three general

categories:

• High-level : Theories and models

• Middle-level : Principles

• Low-level : Specific practical guidelines

This design information is applicable to wide-ranging situations, not just software/interfaces.

7

What is a Mental Model? Think - How many windows are in the house (or

building) where you grew up?

How did you reach an answer?How did you reach an answer?

Users form a mental model of what is going on when they use software.

8

Two Main Types of Mental Model Structural Models

• How something is structured/built

• Understanding of the inner workings of the object

• Examples:

• Bicycle Brakes

• Repairers of appliances have structural mental models Functional Models

• How something functions

• Knowing how to interact with the object

• Examples:

• Cars

• TV / VCR / DVD

• Calculators

9

Uses of Mental Models

When we design, we must:• try to help the user develop a productive mental model...

• …by designing an interface that reflects that model

• refrain from performing actions that violate the model

10

When a Mental Model goes Wrong

Which thermostat setting should be chosen to warm up the room to 21 degrees more quickly?

11

Mental Models in Software

A simple example: Text Editing

• Part of a user’s mental model is that text displayed is what is actually in the file

Files stored in a hierarchy of folders

• Helps us to organize our files.

12

What is a Metaphor?

A metaphor is something that is based on a concept that the user is already familiar with:

13

Uses of Metaphors

The main point about the use of metaphors is that the user already knows how the familiar object works

This is both an advantage and a disadvantage –

• Shorter learning required when the metaphor fits.

• Behavior can be confusing when the metaphor doesn’t fit - this is the danger for the designer if a metaphor is taken too far...

14

Data Display

Organization

Affordance

Visual effects

15

Data Display - Organisation

Smith and Mosier’s objectives for data display:Smith and Mosier’s objectives for data display:

• Consistency of data display e.g. terminology, fonts, colours, capitalization

• Efficient information assimilation e.g. neat columns, proper use of spacing

• Minimal memory load on user - requires careful organisation of multi-action tasks

• Compatibility of data display with data entry

• Flexibility for user control of the data display - e.g. different views of working area

16

Structure

Make the structure of your display well-organized• Links in hypertext that accurately describe the destination

of the link ,

• Main work area, toolbars.

Remember the user’s mental model. Don’t violate it.

17

The Cooker

18

The cooker (2)

It’s a sensible organization - so why do I often make mistakes?

19

Affordance

Affordance:• A visual cue as to what an object does

20

Affordances

Which tap is which? How do you turn these taps on?

21

Using Affordances in Interfaces

Give visual cues to the user what to do with the interface• Buttons press, scrollbars move the view, arrows indicate that

something happens in that direction, textured surfaces indicate it’s touchable…

22

Visuals - Colour

Colour does attract attention, so should be used carefully and the brighter colours used sparingly.

Suggestion:

• Use mostly neutral colours, with up to four colours to complement these.

Example:

• Microsoft Word uses mostly blue shades, with gold for highlighting, and other colors used very sparingly on buttons.

23

Example: Las Vegas Effect

24

What is Colour Blindness?

Colour ‘blind’ people see colours, but they see a different range of colours from non-colour-blind people.

The cone receptors in their eyes (usually the red and/or the green cones) are different.

25

Some colour-blindness tests

26

Effects on everyday life

Lack of thought by designers is the major problem facing those who are colour-blind - colours are relied upon unnecessarily.

An example of bad design:

• A mobile phone charger with a red light to indicate charging, and a green light to indicate fully charged.

27

Colour-Blindness & Design

If you’re not colour-blind (or only mildly so), use colourblindness simulators to test your software interfaces yourself• Simulators available include www.vischeck.com - an online

image/web page tester

28

Middle-level : Principles

29

Middle-level : Principles

We look at Shneiderman’s principles:

• Principle 1 : Recognise Diversity

• Principle 2 : Follow the Eight Golden Rules

• Principle 3 : Prevent Errors

30

Principle 1: Recognize Diversity

“Know thy user”

“Recognize Diversity” does not necessarily mean “cater for all possible users” but you should consider the users who will actually use your site.

We consider two useful ways to think about this:• Usage profiles

• Task profiles

31

Recognize Diversity - Usage Profiles

Different people have different requirements for their interaction with computers. Consider:

A 10-year old playing a computer game

An elderly lady sending her first email to a friend

A student surfing the web for pictures to illustrate a presentation on

the decline of the honey bee

An employee using the company finance software

32

Recognize Diversity - Usage Profiles

Factors for consideration:• Age, gender, physical abilities, education, cultural

background, training, motivation, goals, personality…

Also consider experience:• Novice users

• Knowledgeable intermittent users

• Expert frequent users

33

Recognize Diversity - Task Profiles

It is important to consider what users are trying to do!• Analysis should consider needs of different types of users

and common tasks performed.

WWW examples:

• Purchasing a desired item

• Browsing a site to see what’s new

34

Principle 2: Follow the Eight Golden Rules

1. Strive for consistency

2. Enable frequent users to use shortcuts

3. Offer informative feedback

4. Design dialogues to yield closure

5. Error prevention/handling

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short-term memory load

35

Golden Rule 1 - Consistency

It is very confusing if similar actions are performed differently in different pieces of software.

Bad example:• Website colours of visited links and unvisited links

Good example:• Windows control buttons

36

Golden Rule 2 - Shortcuts

Experienced users greatly appreciate having quick ways to initiate actions.• Examples include reduction of movement from mouse to

keyboard and vice versa.

Example:• CTRL-X, CTRL-C, CTRL-V in Microsoft applications for

cut, copy and paste (also satisfies consistency rule as well)

37

Golden Rule 3 - Feedback

The user should be able to see some result for every action performed.

Bad example:• Text editors that allow you to type whilst an auto-save is in progress,

but you can’t see anything on the screen for several seconds.

Good example:• Current colour selection in a painting program offers automatic

feedback if the user changes the colour.

38

Golden Rule 4 - Closure

Design so that the user can see the beginning, middle and end of (non-instantaneous) actions.

Example: a progress bar, Ftp client

39

Golden Rule 5 - Error Handling

If a user makes an error, the system should as much as possible inform the user and offer opportunities for correction.

Good examples:• If the user chooses an existing filename when saving a file, a dialog

box pops up to see whether the old file should be replaced or not.

• Trying to leave a program without having saved work

40

Golden Rule 6 - Easy Reversal of Actions

Every user has performed actions they later wished they hadn’t. An UNDO button can be extraordinarily useful.

Note that an undo button may reverse just the latest action, or go backwards through a whole sequence.

Example:• The Back button in web browsers is a form of undo button; it is highly

useful for navigational purposes and is the second-most commonly used feature in a browser.

41

Golden Rule 7 - Feeling in Control

New users may well not feel in control as they are getting used to a system, but the experienced user strongly wants to feel in control.

Users should be initiators of actions, not merely surprised (and annoyed) if software performs actions without the user’s knowledge or permission.

Bad examples from Microsoft Word:• Hyperlinks automatically underlined and font-selected

• Automatic capitalization and spelling correction

• Automatic extension of text selection

42

Golden Rule 8 - Short-term Memory Load

Humans can only retain a small amount of information in short term memory.

Examples:

• Helpful pictures on buttons are good

• Tool tips

43

Principle 3: Prevent Errors

This is slightly different from the 5th Golden Rule – it’s all about prevention (better than cure!)• Errors can be prevented by good design.

It is important to understand the types of mistakes that users make.

Example: the design of USB sticks• What happens if the user tries to insert the stick the wrong way?

Example: Autocorrection

44

Your first Assignment

Design a website for the “web design course” or for yourself implementing the learned information introduced in the course.

Deliver the website to the TA and discuss the main concepts you build the website based on.

You may have a look at these websites

http://cis.umary.edu/