IA and the Small Screen Carolyn Watters & Bonnie MacKay Web Information Filtering Lab Dalhousie University

IASummit05Watters/MacKay2 The Problem How to display information on small screens so that it can be understood in its context?

IASummit05Watters/MacKay3 User Context Factors Distractions Movement Lighting Reduced screen space Bandwidth and memory restrictions Input constraints Two hands or one hand or no hand

IASummit05Watters/MacKay4 Trade-offs Content vs context  space needed to include contextual information reduces amount of content Full set vs full content  Remove images or some data items Completeness vs readable  Reduce font size so that everything is there but cannot be read Replication vs representative  Exact information or summary

IASummit05Watters/MacKay5 Design Decision Factors Tasks Browsing Reading Finding Re-finding Comparison Input Input data and/or manipulate data

IASummit05Watters/MacKay6 General Approach ElideTransform Syntactic Semantic Outlining Remove content Linearize Text summarization Retain Full Layout Text/Tables/Forms Bickmore-Schilit Matrix

IASummit05Watters/MacKay7 Designing for the Small Screen I. Usability Factors for Small Screens II. Design Decision Examples III. Transformation of Web Pages

IASummit05Watters/MacKay8 I.Usability Factors Scrolling  Vertical scrolling Skimming/scanning  Horizontal scrolling Reading/comparison problems Size and Reading  speed  comprehension Target Size and accuracy (Fitt’s law) Error rates for input  Mistakes  Slips  Feedback

IASummit05Watters/MacKay9 II. Design Decisions Menus Text Lists Images Forms Option Layout Tables Input

IASummit05Watters/MacKay10 Menus Shallow Hierarchy for performance Length Ellipses for long items Personalization Feedback

IASummit05Watters/MacKay11 Text Page vs scroll Keep clear context Reading  Chunk text to logical units  Eliminate sideways scroll Finding  Add search  Columns Font size

IASummit05Watters/MacKay12 Lists Breaking up the list  No effect on performance (Reseil & Shneiderman, 87)  Perform is affected (Duchnicky & Kolers, 83) Search option useful (Jones et al, 1999) Ellipsis … Keep context

IASummit05Watters/MacKay13 Forms on Small Screens Logic units Reconnect sections at server Avoid text boxes Avoid horizontal scroll

IASummit05Watters/MacKay14 Forms Partitions

IASummit05Watters/MacKay15 90% effective over 100 random sites with forms

IASummit05Watters/MacKay16 Grid vs. Hierarchy SPORT TOOL VEHICLEWEATHER BaseballDrillBicycleRain FootballHammerBoatSnow GolfSanderCarriageTornado HockeySawTrainWind Baseball Football Golf Hockey

IASummit05Watters/MacKay17 Results (Christie,Klein,Watters/03) screen size significantly influences performance in finding targets Consistently more efficient at finding targets using the grid layout  increasing from 16 to 25 items had no effect on performance once learned. users did not always prefer grid even when performance was better For performance, this suggests that grids work when  interface is static  buttons are large enough to read and use.  the number of potential options can fit on the screen (or device, if hard wired)

IASummit05Watters/MacKay18 Tables of Data

IASummit05Watters/MacKay19 Tables on Small Screens Using large tables on small devices Does it help to: O Use screen space for headings and context O Use screen space for a search function O Change the navigation model For: O Simple look up tasks O More complicated tasks

IASummit05Watters/MacKay20 Search (3 sizes:full/4x6/3x4) Search & Context No context & search Context

IASummit05Watters/MacKay21 Results Adding search affected complex task negatively  Got to the wrong place faster  May not always be worth the space (optional) For complex task  no further effect by size, once small had problems Adding context to smaller screen had sig impact both simple & complex tasks  i.e. worth the space

IASummit05Watters/MacKay22 Changing the TABLE model

IASummit05Watters/MacKay23 Alternate Views Default View (NetFront v3.0 and ThunderHawk ) Linear View ( OceanLake’s mScope and AvantGo ) Overview

IASummit05Watters/MacKay24 Task Complexity

IASummit05Watters/MacKay25 User Study (9 participants) Overview is significantly more stable as task complexity increases

IASummit05Watters/MacKay26 Input Choices Reducing Input Errors  Spell ahead  Big Targets  Feedback  Take-backs  Reduce direct input Menus/dropdowns  One handed options? Voice RFID Gesture/tilt Thumb buttons/touch

Web Pages on Small Screens Bonnie MacKay O Maintain the integrity of the information O Minimize transformation volatility when users switch between devices The Goal:

IASummit05Watters/MacKay28 Direct Migration Little or no transformation Advantages Little or no processing Access to most web pages Legible font size Disadvantages Vertical and horizontal scrolling Disorientation ?

IASummit05Watters/MacKay29 Linear Approach Layout changed to a linear or hierarchical structure (e.g. a list of items) Advantages No horizontal scrolling Legible font size Disadvantages Change in layout & order Increase in vertical scrolling

IASummit05Watters/MacKay30 Overview Approach Whole page shown with zoom capability Advantages Keep context & layout Disadvantages Font size is reduced Zoom disorientation may occur

IASummit05Watters/MacKay31 The Gateway Select Left Hand Menu

IASummit05Watters/MacKay32 Relationship to Task Reading Skimming/Scanning Finding Refinding Comparing

IASummit05Watters/MacKay33 Source Web Page

IASummit05Watters/MacKay34 Transformation Models Gateway LinearDirect Migration MacKay, Watters & Duffy, 2003

IASummit05Watters/MacKay35 User Study Results User Performance by Task User Preference/Opinion Finding a new story Gateway (1 st ), Linear (2 nd ) - close Re-finding a story Gateway (1 st ), Direct (2 nd ) Complex comparison Gateway (1 st ) (Linear, Direct - poor) Reading a story Gateway (1 st ), Linear (1 st ) - same General Browsing Gateway (1 st ) MacKay, Watters & Duffy, 2003

IASummit05Watters/MacKay36 Working Hypothesis “Maintaining the consistency of the layout and presentation of web pages improves efficiency and effectiveness of task performance when users switch between devices with different sized screens” Minimize transformation volatility.

IASummit05Watters/MacKay37 Transformation Volatility Factors Layout  location of items, colour, white space, # of words, model, images Navigation  orientation, movement, selection, # of steps, completeness Comprehension  content, font size, graphics

IASummit05Watters/MacKay38 So... Design Considerations

IASummit05Watters/MacKay39 So…Gaining Evidence User Testing  Lab vs. field testing?  Desktop simulation vs. handheld device?  How to capture user actions? Others...  We need to revisit the evidence developed in 80’s & 90’s

IASummit05Watters/MacKay40 Thank you!

IASummit05Watters/MacKay41 Pilot Study(1) Users (10) first viewed and used a web page on the large screen (Efficiency & Effectiveness) User Performance by task Preferance/Opinion Finding a new story Gateway and Linear Refinding a story Gateway and Direct Complex fact comparison Gateway Reading a story Gateway and Linear NOT linear!! NOT default!