Download - 1Human-Computer Interaction Human Computer Interaction Designing Websites using the Design Process
2Human-Computer Interaction
The Web Page Represents... User's view of information on screen. Unit of navigation:
What you get when you click a link. Navigation: you need to be able to understand what will
happen when a button is pressed, to understand where you are in the interaction.
Address to get information over the net (URL). Storage of the information:
On the server and the author's editing unit.
Page: atomic unit – unifies(يوحد ) these concepts.
3Human-Computer Interaction
http://www.asu.edu.jo
http://www.msn.com/pic/flower.bmp
URL
Protocol
File Path
File
URL
Protocol
4Human-Computer Interaction
Hyper Text Transfer Protocol (http) is protocol for transferring data over the internet.
5Human-Computer Interaction
Terms Webpage: one page on the internet. Website: collection of pages, such as all the pages on the
school site. Subsite: smaller site on a larger site, such as the virtual
classroom site which is a subsite of the school website Main page: the first page that is seen at a site, generally the
index.html file. Dynamic: content changes automatically (ie, you get new
mail). Static: nothing changes unless you edit the page (like these
notes).
6Human-Computer Interaction
Anatomy of a websiteالتشريح ) ) علم
Websites come in all shapes, colors and sizes, but most good websites utilize the consistency principle and follow these standards: Menu: All websites should have some sort
of menu that is either at the top or along the left of the page. This should have links to all other pages and subsites on the website.
7Human-Computer Interaction
Anatomy of a website (Cont.) Contact Information: Generally, phone numbers,
emails, addresses, etc… can be found on each page, or there is a well-marked contact page for people to use and send feedback.
Content
Banner(شعار ) : Generally, at the top of your page there is a banner/icon that presents your site. Often, there is a “footer” banner at the bottom as well.
8Human-Computer Interaction
Elements in a webpage Text:
Hyperlink. Static text.
Pictures: Linked. Image maps.
Sounds: Background sounds. Event sounds.
Other controls: Text boxes. Radio buttons, check boxes. Buttons.
9Human-Computer Interaction
Applying the Principles
1. Consistency: Menu at top or left. Contact information at bottom. Standard set of pages:
Personal: About me, photos, contact, etc… Business: Online store, order items, company info,
product info, customer support. Non-profit: Mission statement, current projects,
contact information, past projects, get involved. Tutorial: Introduction, help.
Pages should all share same basic layout.
10Human-Computer Interaction
Consistency
In layout, color, images, icons, typography( الطباعة …text, etc ,( أسلوب
Within screen, across screens.
Stay within metaphor everywhere.
Metaphor:Tying presentation and visual elements to some familiar relevant items
14Human-Computer Interaction
Applying the Principles(Cont.)
2. Feedback: Confirmation pages. Thank you pages.
3. Aesthetics(الجماليات ): Most important principle of website design. Appealing colors, shapes, sizes. Information should be easy to find.
15Human-Computer Interaction
Applying the Principles(Cont.)
4. Simplicity: Websites have multiple pages for a reason—don’t put too
much information on! Page should fit on one screen (unless you have lots of
text to read… clicking next is annoying).
5. User in control: Don’t play sounds without the user asking first. Allow user to stop and close your web page at any time.
16Human-Computer Interaction
Design Methodology in Website Design
Design Know the user:
What group? How old? What gender? What nationality? What type of connection?
Know the purpose: Why this website needed? How this website different from similar websites
out there? Why will people want to look at your site?
17Human-Computer Interaction
Design Methodology in Website Design (Cont.)
Make scenarios: At least, make a list of different types of information that
your website will present to the user. Scenarios help us envision someone using our website.
Draw it out: Flowcharts. Make storyboards.
18Human-Computer Interaction
Design Methodology in Website Design (Cont.)
Prototype Prototype this website using Dream-weaver. Often websites are pro-typed in art programs such
as paint. Test
Have different people in your focus group use your website, and comment on things that they did/didn’t like.
Give the users a list of things that they should do (i.e. create a new account, find a class, find an assignment).
19Human-Computer Interaction
Design Methodology in Website Design (Cont.)
Watch the user when using your product, take notes at the places where the user has problems.
Don’t help the user!!! You won’t be there for them when the page goes online!
Iterate: Normally, iteration is continuous.
20Human-Computer Interaction
Top 8 Mistakes in Web Design
8. Long download times. 7. Outdated information. 6. Link colors & consistency. 5. Lack of navigation support. 4. Long pages. 3. Orphan pages. 2. Complex URLs. 1. Animations.
22
I would like to add:
Spelling Mistakes No Clear call to Action Pop Up Windows Increased number of clicks Non-interactive designs Not Formatting a Print View
Text Layout
Human-Computer Interaction
23Human-Computer Interaction
8. Overlay Long Download Times 10 second rule:
“amount of wait time before users lose interest” Traditional human factors studies back this up.
15 seconds may be acceptable on web: People are getting trained to endure(تحمل ). But only for a few key pages.
Web is getting slower, not faster.
24Human-Computer Interaction
7. Outdated Information
Hire a web gardener for your team: “Root out the weeds and replant the flowers”.
Cheap way of enhancing content: Still relevant -> link to new pages. Otherwise remove them.
25Human-Computer Interaction
6. Non-standard Link Colors
Links to: Pages that haven’t been seen are blue. Previously seen pages are purple/red.
Consistency is important for learning: Don’t underline other objects with blue/red!
26Human-Computer Interaction
5. Lack of Navigation Support
Users don’t know much about your site: They always have difficulty finding information. Give a strong sense of structure and place.
Communicate site structure: Provide a site map.
So users know where they are & where they can go.
Provide a good search feature.
27Human-Computer Interaction
4. Long Scrolling Pages
Only 10% of users scroll beyond visible section when page comes up.
All critical content & navigation should be on the top part of the page.
Leaf nodes can be longer: People who have that interest will be reading it. Still good to be brief.
28Human-Computer Interaction
3. Orphan Pages
All pages should have a clear indication of what web site they belong to. Users may not come in through your home page.
Every page should have: A link up to your home page. Some indication of where they fit within the
structure of your information space.
29Human-Computer Interaction
2. Complex URLs Shouldn’t have exposed machine address. Users try to decode URLs of pages:
To infer the structure of web sites
URL should be human-readable: Names should reflect nature of the information
space. Sometimes need to type in URL->minimize typos
Use short names with no special character. many people don't know how to type a character ( ~ ).
30Human-Computer Interaction
1. Constantly Running Animations
Don’t have elements that move incessantly: Moving images have an overpowering effect on
the human peripheral vision. No animations, scrolling text.
Give your user some peace and quiet to actually read the text!
32Human-Computer Interaction
Color can be a powerful tool to improve user interfaces, but its inappropriate use can severely reduce the performance of the systems we build.
Why Study Color?
33Human-Computer Interaction
The Power of Color
We perceive color through receptors at the back of our eyes. They translate the different wavelengths of light reflected from surfaces into distinctive stimuli that our brain converts into red, green and blue and other colors. So, the eye sees the light and the brain interprets it and identifies the colors.
But it does more than just identify. It makes certain judgments based upon basic human instincts, and on other learned information.
34Human-Computer Interaction
Color communicates! We all know that red is a warm color, because it
is associated with fire. Blue is a cool color, because that is the color of the sky, and water. Green is a fresh color, we associate it with grass and lush foliage. All these associations are programmed into the human brains.
35Human-Computer Interaction
Color Models 1. RGB Color Model: colors are produced from three primary colors:
Red, Green and Blue
2. CMY Color Model:
C =Cyan, M= Magenta, Y=Yellow
36Human-Computer Interaction
Color Models 3. HSI Color Model: Independent dimensions of color that can be used for
coding (the HSI system)Hue
Position of the color in the spectrum: blue, violet, red, orange, yellow, green
A coding scheme for hue might follow the spectrum: starting with red at 0 green at 0.33 blue at 0.66 and wrapping around back to red at 1.0.
37Human-Computer Interaction
Use of color
Saturation: Purity of the color, brightness
pure red vs. pink vs. white pure green vs. pale green vs. white
Intensity: (lightness or darkness of a color)
Amount of light: It is a measure of how 'bright' the color is.( amount of white or black in the color)
black vs. dark green vs. bright green black vs. dark red vs. bright red
38Human-Computer Interaction
Use Web Safe Colors for Text and Backgrounds
Web browsers use HTML to display colored text, links, and background colors. There are two ways to specify color in HTML, either with hexadecimal values (e.g., FFFFFF) or with color names such as red, or green. Unfortunately, few of the named colors are browser-safe, so it's best to stick to browser-safe hexadecimal values when specifying HTML-based color.
39Human-Computer Interaction
Relationships between RGB & HSI
RGB is often measured on a scale of 0-100
(0 %, 100 %, 0 %) Html uses a hexadecimal scale of 00 to FF (0-255) HSI often uses a scale of:
0-360 degrees for hue (R=0, G=120, B=240) 0-100% for saturation 0-100% for intensity
The following figure shows 100% intensity with saturation indicated by the radius and hue by the angle
40Human-Computer Interaction
Relationships between RGB & HSI (Cont’d)
The following is the same figure with Value at 66%
Conversion formulae: Value= max(R, G, B)
Saturation = 100 * (V - min(R, G, B)) / V
Hue = angle of the vector addition of R, G, and B components = tan( R - cos(60) * G - cos(60) * B, sin(60) * G - sin(60) * B) = tan (R-0.5(G+B), 0.866(G-B))
42Human-Computer Interaction
happy, caution, joy
Honest, integrity, Prudish, cool, sad, glum, downcast, gloomy, Unhappy, quality
Nature , health
Hot, urgent, danger, blood, devil, angry, enraged, optimistic
Confident, creative, adventurous, fun, sociable
43Human-Computer Interaction
evil, death, unknown, fear, mystery, dark, night, sad
Earth, nature, dirt, coffee
Royalty, intelligence, wealth, beauty,royal, sophisticated, Barney
purity, virginal, fairness, snow, frost, milk
female, cute ,
44Human-Computer Interaction
The Meaning of color in CulturescolorWestern
Europe & USA
ChinaJapanMiddle East
Danger, Anger, Stop
Joy, FestiveAnger, DangerDanger, Evil
Caution, Cowardice
Honour, Royalty
Nobility, Childish, Gaiety
Happiness, Prosperity
Safe, GoYouth, Growth
Future, Youth, Energy
Fertility, Strength
Purity, VirtueMourning, Humility
Death, Mourning
Purity, Mourning
Masculinity, Calm, Authority
Strength, Power
Villainy, (dirty work(
Masculinity, Calm
Death, EvilEvilEvilMystery, Evil
46Human-Computer Interaction
1 .Use color purposefully to attract attention.
•Take a few seconds to read all of the text in this paragraph and see what, if anything stands out from the rest of the text. Color is a very powerful attention getting method; however it needs to be used sparingly. When too many colors are used on a screen they compete for the users' attention and nothing stands out from the rest. Use color conservatively•Many programmers and novice designers are eager to use color to brighten up displays, but the results become counter productive.
47Human-Computer Interaction
2 .Don't rely on color alone, use other highlighting.
It is also important to remember that 9% of men and 2% of women have some form of color blindness. Therefore, it is important to never rely on color alone to call attention to an item. This screen shows how to use a secondary highlighting technique and not rely strictly on color.
48Human-Computer Interaction
3. Don't overuse color.
Too many colors on one screen sends confusing signals to the user about which item is important to look at. This screen shows the effect of overusing color. Instead of attracting it becomes distracting.
50Human-Computer Interaction
4 .Use appropriate background colors for text .
Backgrounds should never distract the user from accomplishing the task at hand.
Using dark colors, or patterns and textures as backgrounds causes eye fatigue and makes reading text more difficult.
Users attempting to print web pages using dark or patterned backgrounds often end up with an unreadable document.
Using light-colored backgrounds with black or dark-colored text offers the most contrast and improves readability for users. Judge for yourself which combination is most readable.
51Human-Computer Interaction
Using blue and red in close proximity causes the eyes to work hard to focus.
Dark backgrounds with light text make the text appear out of focus.
Patterned or textured backgrounds make text more difficult to read .
52Human-Computer Interaction
As shown in these 3 examples, lighter colored text, even on light colored backgrounds does not provide enough contrast and is more difficult to read.
53Human-Computer Interaction
These examples show that light, solid-colored backgrounds with black text are the easiest to read.
54Human-Computer Interaction
Other Color Guidelines Avoid using color in non-task related ways.
Older users need higher brightness levels to distinguish colors.
Use color to draw attention, communicate organization, to indicate status, to establish relationships.
Be consistent with color associations from jobs and cultures.
Allow users to tailor their preferred colors.
55Human-Computer Interaction
Other Color Guidelines Limit coding to 8 distinct colors (4 better).
Make sure colors do not “vibrate”.
Opponent colors go well together: (red & green) or (yellow & blue)
Use color for the following purposes: Helps in searching tasks (Color is good for supporting
search).
To sell the system (users like color(.
56Human-Computer Interaction
Other Color Guidelines Use colors to help express information as follows:
To express contrast (To express difference, use high contrast colors (and vice versa)), use contrasting colors:
Use light colors on dark background Use dark colors on light background
To express similarity, use similar colors
To emphasize, use bright, saturated colors (e.g., Red)
To de-emphasize, use dark, unsaturated colors (e.g., Grey)
Consider the emotional effects of colors Bright saturated colors ‘shout’ and are annoying Reds, oranges and brighter colors appear more joy
57Human-Computer Interaction
Effects on physical color perception
Saturated colors and opposing colors (red/green, yellow/blue) cause after-images when used together
Stare at this image for at least 20 seconds