Human Factors in Web Design Mohsen Asgari

Contents 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 Physical Aspects Perceptual Aspects Cognitive Aspects Social Aspects Physical Aspects Perceptual Aspects Cognitive Aspects Social Aspects

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, At the heart – The User User Profiles At the heart – The User User Profiles

HCI Cont, Interaction Fitts' law T = A + B*log(D/S) Mouse or Trackball finger is held down or relaxed Arm or Wrist Muscles Content Scan Scan Links : Fonts - Size - Meaning Interaction Fitts' law T = A + B*log(D/S) Mouse or Trackball finger is held down or relaxed Arm or Wrist Muscles Content Scan Scan Links : Fonts - Size - Meaning

HCI & 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 & WWW The Open Environment Who Are the Users? Who Is This User? Where in the World? Commercial Context Multiple Decision Points. Web-time Development The Open Environment Who Are the Users? Who Is This User? Where in the World? Commercial Context Multiple Decision Points. Web-time Development

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

Presentation of Information Page Level Issues Page Layout Summery – Link – Full Fixed – Variable Width Links Text links versus non-text links Link placement Link titles Visited links Page Level Issues Page Layout Summery – Link – Full Fixed – Variable Width Links Text links versus non-text links Link placement Link titles Visited links

Fixed-Width Design

Variable-Width Design

Summary

Full

Links

Other Topics Presentation of Information Tables and Graphs Text and Fonts Color Graphics & Images Form Controls Site Maps Search User Assistance, Help, and FAQs Presentation of Information Tables and Graphs Text and Fonts Color Graphics & Images Form Controls Site Maps Search User Assistance, Help, and FAQs

Other Topics Search Engines & Interface Agents Universal Access Usability & Design Process Task Analysis Specific Web Applications Information Security Web Psychology Search Engines & Interface Agents Universal Access Usability & Design Process Task Analysis Specific Web Applications Information Security Web Psychology