1Human-Computer Interaction Human Computer Interaction Designing Websites using the Design Process.

1Human-Computer Interaction

Human Computer Interaction

Designing Websites using the Design Process


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.


http://www.asu.edu.jo

http://www.msn.com/pic/flower.bmp

URL

Protocol

File Path

File

URL

Protocol


Hyper Text Transfer Protocol (http) is protocol for transferring data over the internet.


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).


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.


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.


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.


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.


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


Example

Home page

www.santafean.com


Content page 1


Content page 2


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.


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.


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?


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.



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).



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.


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.

21

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


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.


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.


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!


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.


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.


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.


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 ( ~ ).


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!


Using colors in the design process


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?


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.


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.


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


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.


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


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.


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


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))


Illusions (not color(

Can you guess the woman’s age? Keep looking.


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


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 ,


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


Color Guideline

How to use Color in our design.


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.


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.


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.



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.


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 .


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.


These examples show that light, solid-colored backgrounds with black text are the easiest to read.


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.


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(.


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


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


Effects on physical color perception

What you see here is a called an after image

People see the opposite colors, or a negative imagebecause staring at one color for an extended

period will fatigue the eyes rods & cones

Date post:	27-Dec-2015
Category:	Documents
Upload:	maximilian-stokes
View:	224 times
Download:	0 times

1Human-Computer Interaction Human Computer Interaction Designing Websites using the Design Process.

Documents