human factors in web design mohsen asgari. contents www & human factors relationship human and...
TRANSCRIPT
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