Adapting for Small Screen

Adapting For Small Screen January 28, 2010 Ada Yuen

Minibus Lite • “[B]us Route Search Engine covers over 800 bus route information of [major Hong Kong bus companies]...” • “MAP” and “GPS information” available on Minibus GPS Hong Kong 3.0 2

Start with Scenario 3

Abby Au College student, early 20’s 6-month experience in iPhone and iPhone apps A*ernoon on Jan 24, Sunday Bought a Macbook here Take it home (Tai Wo in Tai Po) Less walking preferably 4

Her home She is here. http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/ 5 Hong_Kong_Tai_Po_District.svg/1000px-Hong_Kong_Tai_Po_District.svg.png

Let me use miniBus Lite to ﬁnd out: • If a bus can take me to Tai Po • Bus number • Bus stop location 6

Which function is right for Abby? Labels should: • Be unambiguous • Help users make selections. 7

iPhone Human Interface Guidelines: • “Use a disclosure indicator in a row when selecting the row results in the display of another list.” Use checkmark. 9

Good! I can take 373. Where is the bus stop? 11

Where is the bus stop? What do “Downwards” and “Upwards” mean? 12

Consider less noisy way to present pricing information. Unclear what “$-(-)” means 14

Today is Sunday. No 373 today. 15

Utilize current time: • Tell users that 373 is not available on previous screen. • Highlight “Monday to Saturday” here. 16

Utilize user input: • Display “From Sheung Wan...” timetable ﬁrst. 17

Enhance credibility: • Check spelling • Consistent language 18

! 373 (KMB) Sheung Wan Bus Terminus to Sheung Shui Bus Terminus Monday to Saturday 6:45am to 7:30am (4 times) Bus Stops & Fares Sheung Shui Bus Terminus to Sheung Wan Bus Terminus Monday to Saturday 6:45pm to 7:20pm (5 times) Bus Stops & Fares 19

111: Ping Shek to ... Adult: 9.3; Child / Senior: $4.7 Adult: 5.7; Child / Senior: $2.9 20

Now what? How to go home? 21

Recommend buses that go to other Tai Po areas. 22

Enable users to be less speciﬁc (i.e., choose the whole district). Group the bus results by smaller areas. 23

Important is seeing very precise results? (Satisficing) User Effort to Input All Bus Details Beneficial is seeing some results quickly? (Instant gratification) Quality of Search Results 24

What are “keywords”? Reduce trial and error: • Use descriptive labels. • Provide examples. 26

How to try again? Does not help users diagnose: • No bus from here to Tai Po? • Wrong input? 28

Same as “Point to Point (Easy)” function? 29

Buses do not go to Tai Po. Functionality of “Point to Point (Advanced)” is unclear. 30

Not easy to discover 31

In what scenarios: • Know the operator of a bus? • Group buses by bus operators? 32 30

Confusing icons http://upload.wikimedia.org/wikipedia/commons/ a/a5/HK_MK_Mongkok_Market_KMB_Bus_Stop_03a.jpg 33 30

Labels need to help users make selections. Provide examples. 35

Users do not expect ✔ ✘ the second input control to modify the ﬁrst one. 37

What does it mean by “Central” and “Bus Number”? 38

Does not help users diagnose and try again. 39

Valid scenarios: • I think 101 or 102 to go to Tai Po. Let me check. • 101 and 102 stop here. May be one of them go to Tai Po. Let me check. 41

Combine “Bus Number” and “All Bus Details.” 42

In what scenarios users would want to know what buses pass through Central? 43

How is it diﬀerent from “Point to Point (Easy)”? Combine with “All Bus Details.” Unclear scenarios 44

How is it diﬀerent from “Point to Point (Easy)”? Combine with “All Bus Details.” Unclear scenarios 45

Add indexed list and “Bus Number” function to speed up search. 47

Key Takeaways 48

Walkthrough your designs 49

Function design to base on scenarios 50

Use descriptive labels 51

Presenting information to support decision making 52

Presenting error to support correction 53

Thank You : info@AddiThink.com : 9426-9341, 9031-9443

Adapting for Small Screen

by Addithink on Jan 28, 2010

Accessibility

Tags

Upload Details

Usage Rights

1 Embed 63

Statistics

Adapting for Small Screen — Presentation Transcript