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/