Human Factors in Web Design

Human Factors in Web DesignMohsen Asgari Mohsen Asgari

ContentsContents

WWW & Human Factors Relationship

Human and Computer Interaction HCI & WWW Information Presentation Other Topics

WWW & Human Factors Relationship

Human and Computer Interaction HCI & WWW Information Presentation Other Topics

Human Computer Interaction

Human Computer Interaction

Physical AspectsPerceptual Aspects Cognitive Aspects Social Aspects

Physical AspectsPerceptual Aspects Cognitive Aspects Social Aspects

HCI Cont,HCI Cont,

Useful Users get what they need

Usable Users can do these things easily and

effectively

Used Users actually do start and continue to

use it

Useful Users get what they need

Usable Users can do these things easily and

effectively

Used Users actually do start and continue to

use it

HCI Cont,HCI Cont,

At the heart – The User User Profiles

At the heart – The User User Profiles

HCI Cont,HCI Cont,

InteractionFitts' law

T = A + B*log(D/S)Mouse or Trackball finger is held down or relaxedArm or Wrist Muscles Content ScanScan Links : Fonts - Size - Meaning

InteractionFitts' law

T = A + B*log(D/S)Mouse or Trackball finger is held down or relaxedArm or Wrist Muscles Content ScanScan Links : Fonts - Size - Meaning

HCI & WWWHCI & WWW

Platform Independent Frames JavaScript

Navigation Hyper Space Broad vs. Deep Back & History

Correcting mistakes Dead ends Exploratory browsing

Platform Independent Frames JavaScript

Navigation Hyper Space Broad vs. Deep Back & History

Correcting mistakes Dead ends Exploratory browsing

HCI & WWWHCI & WWW

The Open EnvironmentWho Are the Users?Who Is This User?Where in the World?

Commercial ContextMultiple Decision Points.Web-time Development

The Open EnvironmentWho Are the Users?Who Is This User?Where in the World?

Commercial ContextMultiple Decision Points.Web-time Development

Presentation of Information

Presentation of Information

Site Level Issues Amount of Information to Present on a Page

Depth versus breadth Page load time

Using Browser Windows pop-ups Frames

Presentation of Navigation Options horizontal, vertical, and index. table of contents (TOC), vertical dropdowns, horizontal Drop-downs, and top and left.

Scrolling and Page Length Scrolling versus paging Placing important information above the fold Scrolling in search results pages Horizontal scrolling

Site Level Issues Amount of Information to Present on a Page

Depth versus breadth Page load time

Using Browser Windows pop-ups Frames

Presentation of Navigation Options horizontal, vertical, and index. table of contents (TOC), vertical dropdowns, horizontal Drop-downs, and top and left.

Scrolling and Page Length Scrolling versus paging Placing important information above the fold Scrolling in search results pages Horizontal scrolling

Depth versus breadthDepth versus breadth

In complex or ambiguous situations breadth still wins over depth

In very simple and clear situations Fewer choices per page wins.

Fewer choices in middle levels than in top or bottom levels of the hierarchy may be better

In complex or ambiguous situations breadth still wins over depth

In very simple and clear situations Fewer choices per page wins.

Fewer choices in middle levels than in top or bottom levels of the hierarchy may be better

Page Load TimePage Load Time

Pages with delays longer than 41 s were rated as less interesting and more difficult to scan.

Study Range 2 to 73 s. good ratings between 8 and 10 s,

with a 56k modem, the minimum bandwidth is about 4 Kbytes/s

Pages with delays longer than 41 s were rated as less interesting and more difficult to scan.

Study Range 2 to 73 s. good ratings between 8 and 10 s,

with a 56k modem, the minimum bandwidth is about 4 Kbytes/s

Navigation OptionsNavigation Options

Navigation OptionsNavigation Options

Presentation of Information

Presentation of Information

Page Level Issues Page Layout

Summery – Link – FullFixed – Variable Width

LinksText links versus non-text linksLink placementLink titlesVisited links

Page Level Issues Page Layout

Summery – Link – FullFixed – Variable Width

LinksText links versus non-text linksLink placementLink titlesVisited links

Fixed-Width DesignFixed-Width Design

Variable-Width DesignVariable-Width Design

SummarySummary

FullFull

LinksLinks

Other TopicsOther Topics

Presentation of InformationTables and GraphsText and FontsColorGraphics & ImagesForm ControlsSite MapsSearchUser Assistance, Help, and FAQs

Presentation of InformationTables and GraphsText and FontsColorGraphics & ImagesForm ControlsSite MapsSearchUser Assistance, Help, and FAQs

Other TopicsOther Topics

Search Engines & Interface AgentsUniversal AccessUsability & Design Process Task Analysis Specific Web Applications Information SecurityWeb Psychology

Search Engines & Interface AgentsUniversal AccessUsability & Design Process Task Analysis Specific Web Applications Information SecurityWeb Psychology