Design Patterns proposal for Permissions UI

Larissa Co lco at
Wed Aug 7 01:15:50 UTC 2013

Hello everyone,

Sorry for the long wait. This is an initial draft of proposed design 
patterns for improving our permission UI in Firefox. (This isn't 
comprehensive. For now, I focused on the doorhanger/icon combo that asks 
if you want to enable a particular thing, such as location, on the page. 
I know we have other UI elements such as the info bar and 
About:Permissions, but I didn't include these in the scope since Boriss 
is working on some of this.)

Recently, there have been questions around permission UI design choices 
we've made (e.g. doorhangers, icons) for the upcoming Mixed Content and 
Click-to-Play features. Rather than addressing each concern piecemeal, I 
decided to take this opportunity to think about a more consistent, more 
flexible system for our permission UI in general.

I'd like your feedback on the goals below, and on the design patterns 
proposed here:

(Since many of these patterns are animation-dependent, the document is 
fairly text-heavy. Sorry about that! I'm working to get some animation 
prototypes going too.)

Note: If you have a specific concern about Mixed Content or CtP 
proposals for improving discoverability, please don't reply to this 
thread. I'm going to create a separate thread for those issues so that 
we can focus on one conversation at the time.



Permission UI Design Pattern Goals:

1. Apply the appropriate level of discoverability for the situation
⁃ The user should be able to find the interface easily when he needs to 
change the default permission.
⁃ When the default works, the interface should recede into the 
background and not be obtrusive to his task.
⁃ General guideline: If user input is urgent or likely necessary, the 
interface should be more discoverable; if input is unlikely or the UI is 
secondary, it should be less obtrusive.

2. Reduce the burden of constant decision-making and interruptions
⁃ Set "good-enough" defaults on user's behalf.
⁃ Extend the permission to the largest domain or period that makes sense 
for the situation (e.g. applying it to the entire site, not just a page)
⁃ Clearly emphasize the best choices for situation, whether they are the 
most usable or the most secure.

3. Make the impact of user decisions explicit and alterable
⁃ Provide (subtle?) reminders when the user has changed the default 
⁃ Make clear where and how the user can change his mind.

More information about the firefox-dev mailing list