Mobile/Fennec/Extensions/UserInterface

Work in progress page

Introduction

When thinking about how to design the user-interface of your Fennec Add-on, there are a couple of constraints that are different from fitting with Firefox on the desktop. Here are two:

1. How should the design be different because it's for mobile 2. How can the design fit within the design of Fennec

These two overlap, given that the design of Fennec was itself heavily influenced by point number 1, above. Let's deal with this one at a time:

Designing a UI for mobile

There's a mid-sized and furiously-growing body of knowledge out there about designing UIs for mobile, and I'm not going to be able to cover it all here, but this should get you started.

There are two major categories of considerations in mobile. Simply, you have to take how both parties in the interaction, the device and the person, are different in a mobile context. The first -- that the constraints imposed by and the functionality available on a mobile device differ from their desktop counterparts -- is probably the more obvious and well-studied. The other, that the way that people behave and use technology while mobile is different than while they're at desks, is equally if not more important. A good design for mobile takes both into account.

Device Characteristics

• Small screens
• Difficult to type
• Direct manipulation - touchscreens
• Many abilities - rich devices
• Constant but interruptible connection

Mobile User Characteristics

Mobile user is mobile. Here is a taxonomy drawn

Mobile

• • On the move - already navigating in the real world
  • not much with them, otherwise
  • motor precision not at peak

• Interruptible and distractible

• • The outside world will take priority - user won’t necessarily be able to choose the best time for software
  • Fewer social cues that they’re busy

• Available

• • People take their phones/devices with them everywhere
  • Clay Shirky: coordination vs. planning
  • It’s not always a good time

• Sociable

• • Engaged in the world of people, as they should be
  • online sociability vs. sociability in person

• Contextual
  • more affected by context -- environment affects how a device is used; it's not that context is magically more important, but at a desk in an office context is made minimal - designed to block out the world
  • location
  • time
  • weather
  • schedule

• Identifiable
  • users are connected to and associated with their devices - phone numbers
  • Devices tend to be personal
  • Sharing, at least in North America and Europe, is rare

Other Resources

Other resources - apple iphone design guidelines

• On finger size: https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs
• http://patterns.design4mobile.com/index.php/Main_Page
• Books:
  • bb
  • gestural interfaces

Fitting in Fennec's user-interface

Fennec's design is the result of applying a lot of what comes up in section 1.1 and some of what comes up in 1.2 (look for more results from 1.2 in the future!). It had to be quite different from Firefox on the desktop, but it also tries to respect the spirit of the desktop design. Users coming from desktop Firefox, on encountering Fennec, shouldn't be too surprised about what's there and isn't, what they can expect to be able to do, and how certain key things (bookmarking, identity, tabs, etc.) work.

From a practical add-on developer's perspective, the first big question will be "where can I surface my add-on"?

Quick Fennec UI tour

	The titlebar
	The control strip
	Popup for additional detail

Equivalents for desktop UI areas

That's fine if you're creating something from scratch, but what about bringing your desktop Firefox add-on over to Fennec's different UI-space? What if you're using

• menubars
• toolbars
• sidebars
• statusbars
• context menus

Fennec doesn't have any of these! It's helpful to think about what these areas tend to provide, and then look for ways to accomplish the same ends with the tools that Fennec provices.

menubars: random access to many options toolbars: quick actions, alerts, ambient indicators, search sidebars: concurrent/background tasks, tools for content area statusbars: quick access, alerts, ambient indicators, context menus: object related actions, hiding many actions (unfortunately)

sidebars become permanent tabs?

quick access go on awesomebar screen? above titlebar or below content?

ambient indicators become alerts? or, better, peek indicators?

tap and hold for context access

be creative - here: or in gestures

What about preferences?

Most add-ons have preferences. On the desktop, some add-ons create a preferences dialog while others use pages in content. Pages in content are still a workable strategy in Fennec, but dialogs are something we've really tried to avoid. To help out add-ons authors, we've created a system to let you put your prefs inline in the add-ons manager:

http://starkravingfinkle.org/blog/2009/09/fennec-handling-add-on-options/ https://wiki.mozilla.org/Mobile/Fennec/Extensions/Options

Then there's the question of number of prefs. Keeping the list short is hard to do, but it's even more important on a mobile device's small screen than on the desktop (where we could all do a better job anyway). Many times, something ends up as a user preference because the designer couldn't make a decision about what the default behavior should really be. Make the effort here -- think about what your user is trying to do and then make a good choice on his or her behalf; if there's really a split amongst your users about what a behavior should be, you'll hear about it .

Fennec tries to do this too. This is the set of preferences in desktop Firefox 3.0 (as of August 2008):

That's seven tabs, one of which contains four sub-tabs (Advanced), over the course of which the user can click on buttons to bring up a further 23 windows or panels, one of which has a further five tabs. I'm not even going to count the individual preferences. This has been cut down to the following in Fennec:

If Fennec can do it, so can your add-on!

The Future