This document discusses design considerations for a mobile version of Firefox for tablets. It notes that tablets have large screens that encourage gestures, are used for content consumption, and benefit from magazine-like presentations. The goals are to maximize screen space for content, minimize typing, support touchscreen interaction, enable quick lookups, and connect users to their web activities. Tablets are considered to be in between phones and laptops in terms of their mobile and desktop-like characteristics.
It's been a few months now since we merged the mobile and desktop Firefox user-experience teams into one supercharged all-platform Firefox design juggernaut (in the good sense). In that time, we've been hard at work digging into the next set of features and improvements, as well as pursuing one of our major goals for the year: getting Firefox to feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.
I presented an overview of what we're working on at the Firefox Toronto Workweek last week. Here are the slides (and a direct link, just in case). I had a fair bit to say about them, so I'll be posting a video of the talk soon, but the mockups and wireframes in the slides are too awesome to wait. The team will be posting about each of these projects, individually, in more depth.
This presentation makes reference to the Kilimanjaro project, a set of short-term priorities around integrating the browser and ecosystem projects (identity, apps, marketplace) that Mozilla is working on right now. You can learn about it on the Kilimanjaro wiki page.
Many thanks to the team (see slide 2!) for all their hard work.
It's been a few months now since we merged the mobile and desktop Firefox user-experience teams into one supercharged all-platform Firefox design juggernaut (in the good sense). In that time, we've been hard at work digging into the next set of features and improvements, as well as pursuing one of our major goals for the year: getting Firefox to feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.
I presented an overview of what we're working on at the Firefox Toronto Workweek last week. Here are the slides (and a direct link, just in case). I had a fair bit to say about them, so I'll be posting a video of the talk soon, but the mockups and wireframes in the slides are too awesome to wait. The team will be posting about each of these projects, individually, in more depth.
This presentation makes reference to the Kilimanjaro project, a set of short-term priorities around integrating the browser and ecosystem projects (identity, apps, marketplace) that Mozilla is working on right now. You can learn about it on the Kilimanjaro wiki page.
Many thanks to the team (see slide 2!) for all their hard work.
20 minutes about designing for mobile, and how we applied it to Firefox. Credit to Barbara Ballard for the sweet mobile-user-characteristics taxonomy (she has a book!).
Presentation at the Mozilla/Maemo Danish Weekend (http://wiki.maemo.org/MozillaMaemoDanishWeekend) about things user-interface things to consider when writing a Fennec add-on.
20 minutes about designing for mobile, and how we applied it to Firefox. Credit to Barbara Ballard for the sweet mobile-user-characteristics taxonomy (she has a book!).
Presentation at the Mozilla/Maemo Danish Weekend (http://wiki.maemo.org/MozillaMaemoDanishWeekend) about things user-interface things to consider when writing a Fennec add-on.
2. Phone Characteristics
• Small screens
• Difficult to type
• Direct manipulation - touch-screens
• Many abilities - rich devices
• Constant but interruptible connection
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
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