TapGlance Designing a Unified Smartphone Interface

1
TapGlance Designing a Unified Smartphone
Interface

• Daniel C. Robbins
• Microsoft Research

2
Good MorningIt is now 130 am in Seattle
3
Smartphones Everywhere

• Make Us Feel Dumb

4
Things that Look Different

• And Work Differently

5
Things that Look the Same

• And Work Differently

6
What CAN we do?

• Unify Smartphone Applications
• with one Metaphor

7
TapGlance Unified UI Metaphor

• Navigation?
• Views?
• Commands?

find stuff
show stuff
do stuff
8
The TapGlance Proposal

• 1

• 2

• 3

• 4

Calendar
Home
Calendar
Joe Smith
Calendar
Joe Smith
Tools
Info
Clock
Calendar
Mail
Person 1
Media
People
Person 2

• Open TopBar

• Open TopBar

• Open TopBar

• Open TopBar

• Home Tiles mapped to high-value sources

• Application opened from a tile

• Commands
• act on any item using universal menu

• Faceted Search
• across all items by using metadata or search terms

9
Inspirational Work

• A dash of desktop with a scoop of mobile
• But each is a point design

10
Flamenco
Filter Tiles
Query Area
Facets
Results Area

• Hierarchical Faceted Search

11
Phlat

• Faceted Search Tagging

12
mSpace Mobile

• Multi-view Faceted Mobile Search

13
FaThumb
Query Area
Filter Tiles
Results Area
Facets

• 9 Key Navigation of Faceted Search

14
K-Menu
Select K-Menu
Dynamic menu generation
Menu selection

• Dynamic Context Aware Menus

15
Zumobi

• Zooming Tiled Feeds

16
The Scope

• Glanceable Notifications

17
The TapGlance Design

• Challenges and proposals

18
UI Overview
Skip

• Click on Slideshow button in PowerPoint and then
  tap the space bar to proceed through this
  animation sequence

1010am
1010AM Friday 10/10/2007
206-555-1212
Home
Calendar
Rome

• Tiles

9 Number keys mapped to 9 tiles
Unlock
19
UI Overview
Skip
Calendar
Updated
3/25/08
Facets Filter any kind of information
Action button opens Universal Menu

• Tiles

20
Universal Metaphor Inbox
21
Smartphone Design Goals
22
Smartphone Design Goals
23
Goal 1 Optimized for Common Hardware
UI scales to different screens (color
resolution) (icons vs. text)
1-1 mapping between 9 keys and 9 tiles
Standard nav. keys
Standard 12 keys
24
Smartphone Design Goals
25
Goal 2 Respect Users Attention

• Attention modes ?
• Segmented nav ?
• Spring-loaded nav ?

Adaptive
No scrolling
Glancing
NOTE These are critical!
26
Goal 2 Attention Modes (Glance)

• Out of pocket look
• Every tile different
• Most urgent info

Home
27
Goal 2 Attention Modes (Peek)

• Press-and-hold 1-9
• Temporarily zoom in
• One item

Home
28
Goal 2 Attention Modes (Inspect)

• Run the application
• View style Query
• Multiple items

Applications
29
Smartphone Design Goals
30
Goal 3 Glanceable

• Distinct
• Identifiable
• Stable locations
• Prioritize information
• Icons /Labels ? Data

Home
31
Smartphone Design Goals
32
Goal 4 Common UI (Actions)
Create ?
View ?

• Loose Command Hierarchy

33
Goal 4 Common UI (Faceted Search)

• Loose Hierarchy

34
Goal 4 Common UI (TopBar)

• Call a phone number

• 206-555-1212

• Call Tiles

35
Goal 4 Common UI (TopBar)

• Home Tiles

Home

• Lock Tiles

36
Goal 4 Common UI (TopBar)

• Show recently listened to music from my friends

Friends
Music
Recent

• Clear TopBar

37
Goal 4 Common UI (TopBar)

• Things having to do with swimming near me

• Swimming

Nearby

• Clear TopBar

38
Goal 4 Common UI (TopBar)

• Show email about Project Beta just from my
  co-workers

Project Beta
Co-workers
39
Goal 4 Common UI (View Styles)

• A

• B

• C

• D

• 1 Reena Am Home
• 2 Susan Coh Work
• 3 Grandpa Work
• 4 Sung Park Work
• 5 Bro (Joel) Out
• Lee Ann W ?
• Michael T Work
• Bobby ?
• Steve Lom ?

Reena Amsara
Home
Network Friends
15 minutes ago Twittering Where can I find
edible pizza?

• Grid

• List

• Map

• Detail

Same items, different visualization
40
UI Schematic

• Everyone loves block diagrams

41
What is a TapGlance Application?
Items Results shown in an optimized view
Facets Item metadata used for filtering
View Style
Query Search Terms Chosen Facets
Commands Verbs to act on selection
42
How Does this Fit Together?
Application
Query Search Terms Chosen Facets
Home Screen
Available Facets Item metadata used for filtering
Items Results shown in optimized view
Commands Verbs to act on selection
43
Specifically Calendar
Application Calendar
Query Type Appointment, Date Today
Home Screen
Available Facets Date, Type, Status, Attendees
1
2
3
4
5
Calendar
Items Appointments in a timeline
7
8
9
Commands New, Edit, Delete, Accept, etc
44
Conclusions

• Lessons learned and next steps

45
Smartphone Design Goals
46
Smartphone UI Design Suggestions

• Avoid serial inspection
• Always show most important meta data
• Loose feedback loop
• No scrolling, checkboxes, etc
• Make sure its still a phone
• Dialing and answering are non-negotiable

47
Hard Choices

• Home tiles ?
• Facets ?

which urgent info?
local or cloud?
48
Final Lessons

• Map mobile apps into one metaphor
• Respect the users attention

49
What's Next?

• Build it
• Deploy it
• Test it
• Make it better

MSR cPhone project!
50
(No Transcript)
51
HomeTiles Progressive Refinement

• 1

• 2

• 3

• 4

Home
Home
Home
Home
305am
Rome
Rome
Rome
64o
Rainy
Gramps and Grams
2.3
Dow 2.3
Tools
Info
Clock
305am
305am
930 AM cPhone S 112/3181
930 AM - 1000 cPhone Status 112/3181 (AV)
930 cPho 112/
32 3 5
32 3 5
32 3 5
Call us. Why dont you write? We lo
Call us.
Call us.
Calendar
Mail
Person 1
abc
John S. Frank Alyssa
John Sanch Frank Mart Alyssa Roy
That Tim Regina Sp
That Regi
That Regi
Miss U! LOL
Media
People
Person 2
Miss U!
Miss U!

• Open TopBar

• Open TopBar

• Open TopBar

• Open TopBar

• First run

• Repeated use

• Differential sizing

• Emphasize single tile

52
Goal Scalable UI
World Clock

• Stable locations
• Icons /Labels ? Data
• Dynamic updates

Applications
Home
RSS Weather, Stocks
Person feed 1
Inbox (Email, SMS, etc)
Calendar
Person feed 2
People Updates
Now Playing
53
Scrap