web design rabie a. ramadan, phd 1
TRANSCRIPT
Web Design
Rabie A. Ramadan, PhD
http://rabieramadan.org
1
2
About my self
Rabie A. Ramadan
My website and publications • http://www.rabieramadan.org
3
Class Rules
I am not here to punish you
Trust yourself and do your best
I want you to learn and compete with others working on the same field
I want you to be confident when you speak with others
Class Rules
You can bring anything to drink but NO FOOD PLEASE
When you come in , DO NOT knock on the door
When you want to leave , do not tell me Just leave but you will be counted as absent• I do not take attendance every class but sometimes I
do
5
Class Rules
Attendance is a vey important
Assignments must be delivered on time
• All assignments are individual assignments unless it is clearly stated that you can work on groups.
• Assignments or part of them that are copied (including the programming assignments) will not be counted towards your grades.
6
Class Information Textbooks
7
Class Information Website
http://www.rabieramadan.org/classes/2011/summer/wwwdesign/
THE PAST, PRESENT, ANDFUTURE OF THE WEB
Old days :• What to do to send a letter ?
• Send stamped mail not e-mail
• What was the standard way to send an assignment ? • Handwritten
Present • Internet to do everything
Future • Different life
Introduction to the Internet
some of the slides are exerted from Mehmud Abliz slides
Internet, Packets and Routing
Internet is a network of computers Data is transmitted by packet switching
using the standard Internet Protocol (IP) Packet – a unit of information carriage Packet switching – process of moving
packets from one node (computer device) to another
A Visualization of Internet
A Visualization of Internet
Internet, Packets and Routing
At the sender, data is broken into packets and sent to the nearest node (router)
At each router, it sends the packet to another router that is closer to the final destination
At the receiver, packets are reassembled to get the original data
A simple analogy: mailing system
Mailing System
A B
Pitt MIT
Admin Admin
TCP/IP and Domain Names
Basic task of IP – moving packets as quickly as possible from one router to another
Yet, it doesn’t check whether packets are delivered
successfully, thus need TCP
TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK packets
TCP/IP and Domain Names
We need some sort of address in order to identify different nodes, as if every house has a mailing address in order to receive mail from others
The one used by Internet Protocol is called IP address
Every host on the Internet has a unique IP address, made up of four numbers. E.g.. 192.56.215.131, each number is between 0 and 255
TCP/IP and Domain Names
The numbers in an IP address is hard to remember, while names are easier
Domain Name System – a mapping between the human-readable name (domain name) of a host and its IP address
A domain name consists of two or more parts, e.g. cs.pitt.edu
The rightmost label conveys the top-level domain, e.g. edu
TCP/IP and Domain Names Each label to the left specifies a subdomain, in our example,
subdomain is pitt (University of Pittsburgh), and sub-subdomain is cs (computer science).
A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-subdomain, so on.
The database contains the mapping between a domain name and an IP address is stored on a DNS server.
World Wide Web
The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext documents accessed via the Internet.
It is created to share files/documents and overcome the barrier of different file formats
Hypertext refers to text on a computer that will lead the user to other, related information on demand.
World Wide Web
hypertext documents are created using a special kind of document formatting or “markup” language called HyperText Markup Language (HTML).
HTML is sent or received over the network using HyperText Transfer Protocol (HTTP).
A browser is a software program which interprets the HTML documents and displays it on the user’s screen.
URLs and Client-Server Model
Each document/resource on the WWW needs to have an identifier in order to be accessed by others.
A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource by describing its network “location”.
URLs and Client-Server Model
Two things are given by the URL
• Exact location of the document
• The method or protocol by which to retrieve and display the document
Example, http://www.cs.pitt.edu/~mehmud/cs134/index.html
• http:// – specifies the protocol
• www.cs.pitt.edu – specifies the host name / domain name
• /~mehmud/cs134/index.html – specifies the path of the document on the host
Putting it All Together
Web Standards
24
Current Web Standards
HTML (XHTML)• Structuring your document
Cascading Style Sheets (CSS)• Formatting and displaying your page elements
JavaScript
Why do I need CSS?
You have a quote in a book (in a web page) :“In the good old days, your code would look something like this:”
In HTML
In XHTML and CSS
And in a CSS file , you write
What makes a difference ?
Assume you want to repeat this quote for 100 time in the webpage. • Both work
What if you want to change the color only • CSS will much easier
What can you do with CSS? Example
What can you do with CSS? Example
Keeping Project on Track
Web Project Requirements
Budget needs to be set
Deadline has to be respected
Scope needs to be addressed: • What are you going to do (e.g. building new
website or redesign new one)
•
Web Project Management
Old School • planning everything in advance
• Assigning dates (milestones) and people (resources) to each task.
• Everything is planned and documented in advance,
• Stakeholder sign-off is obtained on the documentation,
• A project manager makes sure everything stays on track.
33
Web Project Management
Old School Problems • Web projects requires more flexibility than any other
projects
• May be more than one technology being used
• Web technologies changes in ranges of months
Stay away from waterfalls: the traditional approach
A project is planned as much as possible up front.
Planning continues until a consensus (agreement) on “perfection” is reached, and then work commences.
Spiral Model Approach
36
The Nine Knowledge Areas
The Nine Knowledge Areas
Project Integration Management:• This area looks at planning and integrating all the
various parts of the project.
Project Scope Management:• What work has to be done to complete the project and how
that work is going to be broken down between the various “resources”.
• It also identifies how any changes will be handled during the project.
The Nine Knowledge Areas
Project Time Management: • This area defines how long a project is going to take,
identifies how many people, and specific Skills.
Project Cost Management: • Money is another important factor.
• This area defines the budget for the project and how things will be controlled to stay within that budget.
The Nine Knowledge Areas
Project Quality Management: • How will you make sure that what you produce
works and does what it’s supposed to do?
• What kind of testing will be done, and what test results are acceptable?
• Different Testing Approaches
Testing Approaches White box testing
• Is when the tester has access to the internal data structures and algorithms including the code that implement these.
Black box testing • Treats the software as a "black box"—without any
knowledge of internal implementation. Stability testing
• Stability testing checks to see if the software can continuously function well in or above an acceptable period.
Testing Approaches
Usability testing• Needed to check if the user interface is easy to use
and understand.
• It approach towards the use of the application.
Security testing• Essential for software that processes confidential
data to prevent system intrusion by hackers.
The Nine Knowledge Areas
Project Communications Management: • This area covers how things will be shared amongst
the project team and the stakeholder(s),
• How progress will be communicated and tracked, and how things will be documented.
Project Risk Management: • This area looks mostly at the risks involved if the
project fails (or succeeds; there may be risks either way).
The Nine Knowledge Areas
Project Procurement Management: • How/where will products or services be acquired when
needed, and how will subcontractors be managed (if applicable)?
Project Human Resource Management: • Where are you going to get your team members?
• What skills do they need? Do you need to train anyone? How will the team be managed?
45
Human Computer Interface (HCI)
46
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
47
What is HCI?
48
49
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.
50
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.
51
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.
52
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
53
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
54
When a Mental Model goes Wrong
Which thermostat setting should be chosen to warm up the room to 21 degrees more quickly?
55
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.
56
What is a Metaphor?
A metaphor is something that is based on a concept that the user is already familiar with:
57
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...
58
Data Display
Organization
Affordance
Visual effects
59
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, colors, capitalization
• Efficient information assimilation e.g. neat columns, proper use of spacing
• Minimal memory load on user - requires careful organization 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
60
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.
61
The Cooker
62
The cooker (2)
It’s a sensible organization - so why do I often make mistakes?
63
Affordance
Affordance:• A visual cue as to what an object does
64
Affordances
Which tap is which? How do you turn these taps on?
65
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…
66
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.
67
Example: Las Vegas Effect
68
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.
69
Some colour-blindness tests
70
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.
71
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
72
Design Guidelines Middle-level : Principles
73
Middle-level : Principles
We look at Shneiderman’s principles:
• Principle 1 : Recognize Diversity
• Principle 2 : Follow the Eight Golden Rules
• Principle 3 : Prevent Errors
74
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
75
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
76
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
77
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
78
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
79
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
80
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)
81
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.
82
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
83
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
84
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.
85
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
86
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
87
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