Madhava Enros and Brian Dils at Mozilla, thinking about browser UI on tablets

1. tablet thinking so far - Madhava Enros and Brian Dils, April 2011

2. Phone Characteristics
• Small screens
• Difficult to type
• Direct manipulation - touch-screens
• Many abilities - rich devices
• Constant but interruptible connection

3. Mobile
User
is
Mobile

4. Mobile

5. Distractible

6. Available

7. Sociable

8. Contextual

9. Identifiable

10. phone
Design Goals for a mobile Firefox
• Maximize screen space dedicated to
content
• Minimize typing wherever possible
• Give primacy of interaction to a finger-
oriented touchscreen
• Support the quick lookup scenario
• Connect people to all their web-use
still mostly apply

11. Phone Small Tablet Large Tablet Netbook Laptop/Desktop
Touch Non-Touch
Virtual Keyboard Physical Keyboard
On the go In one place
index finger-focus thumb-focus Cursor
mobile characteristics desktop characteristics

14. Tablet-specific characteristics
• large surface encourages large movements/gestures
• “consumption” user-stance
• richer, magazine-like presentation

17. Firefox Home madhava
@username - that was the best mockup I have
ever seen, and I have seen some mockups in my t hu
mb
time nai
l
f Site 2
did you see this justin bieber whatever thing LOL
http://url.goes.here/oh_yes.html
7 more
Rdio
Flickr
t hu
mb
3 new from Contacts
nai
l
f Site 9
t hu
mb
nai
l
f Site 9
Subject of a new email...
t hu Who it's from date
mb
nai
l
Subject of a new email...
Who it's from date
f Site 9 Gmail.com 10+
Search your web

18. Shared with you
Subject of a new email...
Facebook Who it's from date t hu
t hu mb
gm mb nai
ai l nai l
Subject of a new email... l
Who it's from date
f gmail Site 1 f Site 2
Twitter
@username - that was the best mockup I have ever
seen, and I have seen some mockups in my time
ust
t hu twi t hu t hu
tc. J ly
mb tter mb mb
nai nai nai
ts, e al
l l l
wee e actu gReader
all t r
not s that a you.
one cted at f Site 9 f twitter Site 3 f Site 4
dire text of most recent
update from a person...
SMS flic f Flickr
just goes right here kr
t hu
mb
nai
inline. How long is 140
l
characters anyway
#closeenoughforamock
Mozilla up
Site 1
flic f Some other site
kr
Your apps
that also has syndicated content of some
Yahoo Thing Wikipedia Gmail kind. Facebook?
Search your web
Rdio Mint Twitter madhava

19. Firefox > Home
Flickr Open Tabs
t hu 3 new from Contacts t hu
mb mb
na il nai
l
f Site 9 f Site 9
t hu t hu
mb mb
na il nai
l
f Site 9 f Site 9
Subject of a new email...
Who it's from date t hu
mb
nai
l
Subject of a new email... Tabs from
Who it's from date other
Rdio Gmail.com
10+
f Site 9 computers
@username - that was the best mockup I have ever
seen, and I have seen some mockups in my time
did you see this justin bieber whatever thing LOL
http://url.goes.here/oh_yes.html
7 more
Search your web
10:38 3G

20. Firefox > Home
Open Tabs
Search your web
Flickr
t hu 3 new from Contacts
mb
nai
l
f Site 9
t hu
mb
nai
l
f Site 9
Subject of a new email...
Tabs from
Who it's from date
other
Subject of a new email...
Who it's from date
computers
Rdio Gmail.com 10+
t hu t hu t hu
mb mb mb
nai nai nai
l l l
f Site 9 f Site 9 f Site 9
10:38 3
G

21. Tabs from
other
computers
Page title
Search your web
Flickr
t hu 3 new from Contacts t hu
mb mb
nai nai
l l
f Site 9 f Site 9
t hu t hu
mb mb
nai nai
l l
f Site 9 f Site 9
Subject of a new email...
Who it's from date t hu
mb
nai
l
Subject of a new email...
Who it's from date
Rdio Gmail.com f Site 9
10+
@username - that was the best mockup I have ever
seen, and I have seen some mockups in my time
did you see this justin bieber whatever thing LOL
http://url.goes.here/oh_yes.html
7 more
10:38 3
G

22. t hu
mb
nai
Wombat Times of Canada t hu
mb
nai
Welcome to Flickr - Photo Sharing
l l
http://wombattimesofcanada.com http://wwww.flickr.com/
t hu
mb
nai
Twitter
l
http://mobile.twitter.com/ Search Google Search Amazon
for "wombat" for "wombat"
t hu
mb
gmail - thing about wombats
nai
l
http://gmail.com/ Search Wikipedia Search Twitter
5 new
for "wombat" for "wombat"
t hu
mb
Firefox: Customize with add-ons
nai
wombat
l
https://addons.mozilla.org/en-US/mobile
! ? , * : ( ) ; • / @
Tab q w e r t y u i o p
?123 a s d f g h j k l
z x c v b n m , .
;-) / English (US) ' -
10:38 3G

23. more thinking!

45. discuss!

46. Photo Credits
http://flickr.com/photos/darwin70/577151777/
http://flickr.com/photos/spidey-man/379064077/
http://flickr.com/photos/zwc/2332022534/
http://flickr.com/photos/40668062@N00/303473576/
http://flickr.com/photos/sharman/13121287/
http://flickr.com/photos/seandreilinger/2147807724/
http://flickr.com/photos/mimk/365755280/
http://flickr.com/photos/skampy/2329307921/