All posts in User Experience

Add-ons Manager Redesign Status Update

Meta-bug for redesign: bug 550048, wikiQA
Meta-bug for look and feel: bug 586066, wiki

The basic redesigned add-ons manager functionality is running in Minefield nightly builds.  Many smaller parts of the functionality, and especially edge cases, have open bugs and are being actively designed and fixed.  API changes are being made majoritively by David Townsend, and final CSS visual polish is being done majoritively by Blair McBride.  Majoritively is actually not a word.  Individual bugs are not being filed for most of the small steps required to visually style the manager to match the current mockups.

The add-ons manager consists of a separate panel for each category of add-ons, called List View (☑ bug 585950). Individual add-ons’ details can be viewed in Detail View (☑ bug 562902).  The other main parts of the add-ons manager are search, a client-side “Get Add-ons” pane (bug 558158, spec), and the Update Pane (bug 598738).

Unfinished Functionality

  • Extension manager API rewrite (bug 461973, wiki, documentation). Dave Townsend is making API improvements clean up a number of issues, including to allow the main UI to operate without having to speak RDF.  This bug currently has 52 dependencies, including some user experience issues:
    • Having extension compatibility controlled on a per-addons basis (bug 527861)
    • Controlling order of add-ons in manager (bug 595847) and adding a search plugin provider (bug 552747)
    • Installing and upgrading add-ons in the add-ons manager:
      • Allowing the user to pause installations (bug 553024)
      • Using Firefox’s download manager to manage add-on downloads (bug 555753)
      • Handling failed installations to bad directories (bug 557897)
    • Viewing add-ons in the add-ons manager:
      • Allowing thumbnails and full-size screenshots to display in Detail View (bug 553563)
      • Assuring multiple copies of add-ons don’t appear in manager (bug 562922)
  • UX-centric functionality bugs for viewing add-on information:
    • Implement lightbox-style viewer for add-on screenshots (bug 553462)
    • Create numbered badges for active items on category titles (bug 553486)
    • Hovering over backgrounds should give a live preview (bug 562832)
  • UX-centric functionality bugs for installing and updating add-ons:
    • Allow user to undo a cancelled restart (bug 562300)
    • Checking for updates needs more visual feedback (bug 562925)
    • Showing newly installed add-ons prominently in the UI (bug 565522)
  • UX-centric functionality bugs for using add-ons:
  • In-content UI work needed
    • The add-ons manager currently does not visually  incorporate the navigation bar.  Incorporating the navigation and (if applicable) bookmarks bar, as in the mockups, distinguishes in-content pages as a part of the browser, not a part of the web.  It presents a steamlined, simple interface for dealing with what is essentially a panel of Firefox itself.  It also makes such pages distinct and unspoofable.  Bug 571970 is tracking progress on this change.  An added challenge of this change is making in-content UI work when the user has set tabs to display on bottom (see comment 23).  While a decent design solution could be found, this may not be worth the work and time before Firefox 4, and fixing the multiple back forward buttons present with tabs on bottom (bug 597178) is likely a better temporary solution
  • Unresolved issues
    • Giving a better experience for third-party installed extensions. Namely, to outright disable them on upgrade or not? (bug 596343)

Unfinished Graphics

  • Gradients and texture files needed for background of all in-content pages.  This could get slightly tricky with window resizing, anchored images
  • Concept and icon for what we’ve been calling the “gear” menu.  Gear works fine for OSX, not so much for Windows and Linux.  Even current placeholder gear is too close to native OSX window “tasks” menu
  • Final images and colors on sorter bar and search header
  • Final mockup for Update panel and in-line updates

Add-ons Manager UI Update

I’ve posted quite a few mockups on this blog of Firefox’s redesigned add-ons manager’s features and interactions. What I haven’t shown are screenshots of how the manager will actually look in Firefox 4.0. The following are designs, based on Stephen Horlander’s work on the new Firefox theme, of the add-ons manager in OSX and Windows 7.  The icons are still placeholders, but the rest of the design is pretty near finalized.

In the image below, you’ll see three windows for each operating system.  The first row shows list view, where a short summary of each add-on and its description are shown.  Buttons allow the user to disable an add-on or launch its preferences.  Clicking “More” takes the user to detail view.

The second row shows detail view, where the user sees more information about a single add-on.  The full description is displayed as well as a contribution box if the add-on’s author chooses.

Finally, appearance view shows installed themes and backgrounds (previously personas).  Since these add-ons are primarily visual, the interface gives a large preview of each item and does not display a description.

Dave Townsend and Blair McBride have been working hard on implementing these visual changes as well as the slew of under-the-hood improvements that are making the add-ons manager faster and more stable.  To see how it’s coming along, try running a nightly build in your operating system of choice.  Hope you like it!

LinkedIn Accidentally Sends Private Email to Group List

A few minutes ago, I got a message from LinkedIn via the Bay-Area-UX list, a group I’m a member of.  The message is clearly not intended for me, but is a private discussion between a recruiter and a job applicant.  It potentially went out to every member of the Bay-Area-UX list.

I clicked “View/reply to this message” in order to notify the sender that his email had been mis-sent,  and I saw the following error:

This is a serious problem from a site which prides itself on security and privacy.  Hopefully this is a one-off error and not a common occurrence.  The conversation I received is clearly about a startup whose business is still under wraps.  All it takes is one mistake like this to ruin a business model and potentially the success of a fledgling startup.

Removing Firefox’s Status Bar and Rehousing Add-on Icons (Part 3 of 2) (wut)

It’s World Cup month! Let’s start it out right. With another post about removing the status bar.

I know I implied in my last post that you’d be free of this topic forever, but something was bothering me. A piece of the puzzle was missing. I talked it over with my skilled user experience cohorts last week. Whiteboards were involved. I think the kinks were worked out.

The problem with putting add-on icons in the bookmark bar by default is that Firefox’s interface could become easily overcrowded if add-ons add more than just a 16 by 16 pixel icon. If an add-on creates a long horizontal widget, for instance, the whole bookmark bar could taken up after its installation.

Also, many add-ons have come to rely on bottom-anchored functionality – partially because of the location of the status bar. Firebug, for instance, uses a status bar button because its interface is anchored to the status bar.

My first post on this topic noted that users should be able to easily move their add-on icons and widgets wherever they want just by dragging it – to the bookmarks bar, the UI panel, the title bar, wherever. This is still going to be a huge benefit to users who wish to configure their browser. Where add-on icons should be encouraged to install by default is the open question. My proposal is this:

When a user has no add-on installed, there is no status bar.

As soon as the user installs one add-on that wants to use the status bar, a small bar appears in the bottom right of the Firefox window. It’s only long enough to accommodate the add-on icons and widgets the user currently has installed.

If the user hovers over the status bar, a small arrow appears on its left.  If the user clicks this arrow, the status bar shrinks into a small button in the bottom of the window.  This button gives a faint glow as the status bar animates into it.  If clicked, this button will bring the status bar into visibility again.  The button is only visible if the user mouses near it, minimizing visual clutter.

The benefit of this design is that only the smallest possible status bar is shown, and if the user prefers it can be entirely dismissed. The panels for rich interaction would still be added to the API, as well as a way for add-ons to identify themselves as acting on the current page content (perhaps via a subtle “glow” effect).

I think this design addresses the multiple goals for add-ons in the ui: minimal disruption to current add-on functionality, minimal visual clutter, and trivial configuration if the user wishes to modify the default behavior.

Removing Firefox’s Status Bar and Rehousing Add-on Icons (Part 2 of 2)

Recently, I wrote about Firefox’s status bar and how we’d love to remove it, relocate its functionality, and dedicate that area back to page content. Though many add-ons currently place icons in the status bar, these icons could be displayed elsewhere in Firefox’s user interface. By treating add-ons as UI elements that users can move within Firefox’s UI, the bottom of the browser window could be dedicated to content while the functionality of add-ons preserved.

I proposed that by default, add-on icons display in the bookmark bar of the Firefox window.

But, if the user wishes, he can move the add-on icons to other areas. Firefox can subtly change the appearance of an add-on icon to visually match where it is placed.

Several commenters on my previous post noted that they preferred add-ons in the bottom right of the window, both because of particular add-on functionality and familiarity. Indeed, it should certainly be an option to reenable the status bar, and one way to do this should be to drag an add-on icon to the bottom of the window in customize mode.

The cases that would be especially suited to enabling the status bar are add-ons that require long, horizontal space in the main UI. Especially newer add-ons built by Jetpacks are increasingly using this horizontal space in creative ways. If users want this kind of functionality, giving up a significant portion of the bookmark bar should not be the only way to achieve it.

While this horizontal layout that some add-on developers choose is useful for many kinds of information display, it takes up a lot of space in Firefox’s interface and may not always be necessary. Providing API support for rich content panels that launch off of add-on icons could allow add-ons to provide rich interactive content, accessible with a click, that takes up little UI.  This is a win for developers because it would enable them to easily add rich content to their add-ons.  It’s also a win for users, because accessing rich add-on content won’t always mean sacrificing interface space.  Some possible uses for such panels include:

Firefox engineer Dietrich Ayala and Labs engineer Myk Melez are already at work to add an API to Jetpack that will allow these panels to launch from add-ons.

Defeating the Cookie Monster: How Firefox can Improve Online Privacy

As we choose priorities for the next version of Firefox’s features and development, the Firefox team has been considering the state of the web and looking for areas where online content has changed faster than browser functionality. One area of concern is the growing use of private user data, especially by advertisers. User data being silently and persistently passed between sites and advertisers is disturbing for those with an interest in user choice and transparency on the web.

Privacy vs. Security

Privacy and security are related but distinct topics. Security refers to the prevention of material harm to the user. Avoiding theft, fraud, and data loss are all security issues. Browsers have been working to improve security for decades, prompted by increasingly sophisticated viruses, malware, and other exploits.
Privacy is a broader topic than security. It refers to users’ control over what they reveal about themselves online, whether or not what they reveal might lead to material harm. All internet users reveal some information about themselves to some sites, but the user has privacy if his discretion determines what information is shared with whom.

Firefox has Local Privacy but Needs Network Privacy

The Firefox team has already done some great work on local privacy with improvements such as Private Browsing mode, Clear Recent History, and Forget about this Site. These features give users better control over when their data is exposed and hidden on their own computer. However, wider privacy issues surface when data is shared over a network.

One major problem of the modern web is the ability for private user data to be collected by advertising companies via third-party cookies.

If sites provide rich interaction, they usually require user data. The problem occurs when users willingly share data with a site they trust, but unknowingly their data is shared with other sites and companies via third-party cookies. This is common practice and a growing revenue model online. It first received national attention in November of 1999, when the Federal Trade Commission held a workshop on online profiling and reported that it presented a privacy concern to consumers. The practice has grown since then, despite some failed attempts at regulation by the US’s Federal Trade Commission, the Interactive Advertising Bureau, and Britain’s Office of Fair Trading.

Any website you visit can contain ads and other components that send cookies from your browsing session on the domain you trust to an advertising domain. These third-party cookies can be used to track information about users across multiple sites and multiple browsing sessions, allowing web habits to be profiled and tracked. This data can tell companies limitless kinds of information, such as what purchases you make, what news you read, your income, if you’ve applied for work, and what dating sites you prefer. One manifestation of this data sharing is seeing to ads targeting users based on data and actions from other sites.

The ability for advertisers to gain and use this data violates user privacy for several reasons:

  • It’s nearly impossible to detect. Much of the data-sharing happens in the background during a browsing session without asking or notifying the user. Users usually only discover what has happened when they are seeing targeted ads (long after the data has been transferred).
  • It occurs without user consent. Of the sites that are even aware of third-party cookie sharing, few give users control over how their data is shared with advertisers. Sites that do offer preferences sometimes phrase them in ways that disguise their purpose, such as “do you want relevant content to be shown based on your usage” rather than “do you want ads to be shown based on your personal data.”
  • It contradicts the user’s reasonable expectation of privacy. Some sites that knowingly share data present a false image of being responsible with user data. They may show the user preferences that imply control, assure users that their data is “safe,” or offer to let users read a lengthy privacy policy in order to hide their actual practices. Of course there’s a very special hell set aside for sites that change privacy settings to be more permissive once users have already signed up and entrusted their data.
  • It’s nearly impossible to prevent. Even a user who is privacy conscious and reads all privacy policies, keeps his privacy settings up to date, and avoids sites that don’t guarantee privacy isn’t necessarily safe. Any site he’s given data to could potentially use it without asking, and third-party cookies could be sent via ads and web bugs without the knowledge of the site’s owners. Heck, any site could be scraping identifiable information from his digital fingerprint.
  • It potentially embarrasses the user. Data sharing via third-party cookies takes information given by the user at some point in time and exposes it at another time. While the user may be discrete about where he is viewing certain content and even use Private Browsing Mode for items to not appear in history, advertisers using third-party cookies can expose user actions at times out of the user’s control.

So what can Firefox do to improve its story on privacy?

1. Provide intelligent defaults for third-party cookie behavior

Simply disabling third-party cookies isn’t the solution. Third-party cookies are necessary for legitimate web functionality such as embedded content, session management, mashups, etc. Most bank websites depend on third-party cookies for functions such as bill paying. The goal should not be to outright disable third-party cookies, but to be more intelligent about what behavior is allowed.

The http-state working group is currently working to produce a specification in multiple documents to lay out how clients should behave with regard to cookies (see current drafts here). Dan Witte, the cookie module owner at Mozilla, has been in communication with them and is doing his own work to develop a modern cookie standard. The goal is to create a guideline that Mozilla can follow that aligns with our Manifesto to protect user choice on the web. Dan’s already working on one way Firefox could address the problem by enabling third-party cookies, but only temporarily. His idea is to keep third-party cookies active only for the life of one tab. When the tab is closed, the cookies are deleted – advertisers could not track users from site to site. Dan will be blogging about this later with more details on his work.

2. Give users better control over how sites can access their information in Preferences

Currently, Firefox gives users precise, fine-grained control over the many ways that sites can access user data. All the user needs to do is change their on each Preference panel that effects site privileges:

As can be seen above, the current Firefox interface gives each site privilege type – saving passwords, cookies, etc – its own separate preference window. This design is framed around the implementation model rather than the user’s mental model, meaning it’s designed in a way that corresponds with how it was built rather than how users perceive the action they want to take. Having an individual window for each permission makes sense from an implementation standpoint, because each site privilege is separate in code. From the user’s perspective, however, it’s impossible to tell what privileges a particular site has. A better design would present controls in a site-centric rather than technology-centric view. If a user decides that he doesn’t trust site X and doesn’t want it to have any access, it would be more efficient to control all of site X’s access in one – not 15 – Preference windows. Alex Faaborg made this mockup to illustrate how a site-centric UI could be achieved:

While all of Firefox’s Preferences need to be improved, including site-centric privacy controls like Alex’s above for Firefox 4.0 would go a long way towards putting users back in control of their data.

3. Give users better control of their data while they are browsing

While a site-specific Preference panel will help users have better fine-grained control of their privacy when they’re configuring Firefox, there’s some options and information that can be exposed while the user is browsing. If a site has access to geolocation, for instance, this should be constantly indicated in Firefox’s interface. If a site is storing a password, this should be easy to change or remove without opening Preferences. Firefox’s Site Identity Button, which currently gives very little information about a site, could be improved to give information about a site’s privileges and the ability to change them.

It’s our goal for Firefox 4.0 to give users more control of their data, both by literally giving them controls and, more importantly, creating intelligent defaults that protect a user’s privacy and anonymity without breaking web functionality. It’s my hope that even simply exposing what access sites have to data will be positive for the web by eroding the sense of false security that many sites try to create for their users and creating awareness of and control over how, where, and when data is being shared.

Removing Firefox’s Status Bar and Rehousing Add-on Icons (Part 1 of 2)

One of the major goals in redesigning Firefox is presenting a simpler, cleaner, and smaller user interface. Firefox currently has more chrome (space taken up with user interface) than any of the major browsers, and all that chrome reduces screen space given to page content. We’d like to be more efficient with space in Firefox, maximizing the usefulness of the interface and the amount of content shown.

The process of reducing Firefox’s chrome has meant looking critically at each part of the interface and how it’s being used. The goal is to find places where chrome can be minimized, both through efficient redesign and pure removal where functionality just isn’t providing enough benefit. This process led us to an obvious candidate for chrome reduction: the status bar. In addition to taking up page content, the status bar is the only part of Firefox’s permanent UI located on the bottom of the browser. This placement leads to the status bar being easily obscured, and sometimes requires resizing the window to view. For an entire toolbar of UI, it seems this slacker may not be pulling its weight in usefulness.

The status bar is home to a few pieces of functionality. However, with the new Firefox design, much of this functionality is already being relocated to the top of the browser. Other parts are not extremely useful.

  1. Add-ons icons
  2. Link URL preview (answers “where does this link go?”)
  3. Resize window control
  4. Current loading task
  5. Progress bar for page loading
  6. Notification that the page has finished loading
  7. Link to Download Manager with download summary

Already we can start crossing items off this list. #3, the window resize control, does not require a toolbar. #4, the currently loading task, is not widely useful; most messages display unintelligible processes which are flickered too fast to be read. #5, the progress bar, we’re already planning to move to the top of the browser, attached to the tab that is loading. #6, the “Done” announcement, should be handled in the negative: if the progress bar is gone, the page is done. #7, the download manager link, we’re also planning to move to the top of the browser.

So, two pieces of functionality remain: add-ons icons, and link URL preview. Let’s look at add-ons first.

Add-ons are tricky to plan for because developers can do whatever they want with them, and put them anywhere in the UI. Also, add-on icons in the UI can do anything, from affect page content to launch a menu. Unlike the other parts of Firefox’s chrome, we have no control over the function and placement of add-ons. The best we can do is provide a space for add-ons, recommend add-on developers take advantage of it, and give them tools to do so.

An idea that’s been bounced around is saving the area to the right of the URL bar for add-ons. This is similar to what Chrome does.

The benefit of this placement is that it doesn’t add any additional UI to Firefox. The problem is that while this works for one or two add-ons, the more icons the user installs, the smaller the space for the URL and search becomes. Heavy add-on users would eventually have to choose between not having all the add-ons they want or having less space to browse and search. A better solution would be useful both to users who have only a few add-ons and users that have many.

One way we could handle this is by considering add-on icons to be modifiable, movable objects that the user can control. Since we can’t know what these icons will do nor launch, we can’t make decisions about their placement based on functionality. Why not gives users the ability to modify their placement, just as users can modify the bookmarks on their toolbar and the buttons on their UI? It seems inconsistent that we’ve been giving users easy control of so many objects in the Firefox UI, but not the placement of add-on icons.

By treating add-ons as movable objects, we can modify the appearance of add-on icons based on where they’re placed in the UI. For instance, let’s assume an add-on icon by default displays in the bookmarks bar. It would then display as a regular 16 x 16 icon. However, if the user moves that add-on icon to the upper toolbar of the window, we could draw a border for it so that it has a consistent look with the other buttons in the toolbar. Moving it elsewhere, such as to the top of the window, would produce a different look. The user would then have the ability to modify their interface depending on how they use their add-ons.

Next, incorporating add-ons that display more than an icon in the interface.

The Best Design Process Fits the Task

My colleague Alex Faaborg wrote an excellent blog post (in response to my last post in response to Ivanka Magic’s post) about some of the limitations of the contextual design process and designing using personas. I fully agree with most of what he writes, and wanted to draw attention to some of his points to present a more complete picture.

Contextual Design isn’t a Hammer, the World isn’t only Nails

Contextual design isn’t a blunt tool that can be blindly applied to any design problem. It’s an extremely structured, formal process that is best used when approaching a complex design task with highly diversified users. A task it was ideal for, for instance, was my thesis project in which my team designed a mobile device for Nasa engineers to report and diagnose problems. We were working in a complex space and for very specific users, where the very structure of workflow of tasks had to be redesigned before solutions could be considered. By following the contextual design process nearly to the letter, my team was able to explicitly shift our focus first to the user and the user’s space, then to the user’s workflow, then to the workflow within a system, and finally to design solutions that corrected the problems the user faced.

Every problem truly has its own “context,” and choosing an appropriate design process to fit the task at hand is an important challenge in user experience design. This process, even for simpler design tasks, should resemble at its core contextual design and the specifically the scientific method. It should begin by identifying the problem. It should progress to a phase of research and investigation into users and user needs. It should enter an iterative design phase, in which ideas are tried out, tossed aside when shown not to work, and improved upon. It should be subjected to user testing, and the subsequent data should inform the design.

I do disagree that studying users in-depth is less useful when designing for a larger audience. It’s true that the most you could say about what Ubuntu users have in common is that they are humans who use Ubuntu, and they certainly aren’t as similar as the relatively few Nasa engineers I was designing for. But all users have some similarities that they’ll apply to tasks. For instance, in general humans can learn, humans try to understand new tasks by leveraging what they know about other tasks, humans like to not be bothered, humans like to feel respected, humans like to feel in control, etc. Human similarities means that giving a few humans a task will allow the designer to draw inferences about what other humans will do in similar circumstances. User testing is basically this: extrapolating from a few people in a specific context what others in the same context will do. It’s valuable information, and something I think we should be doing much more user testing in open source.

Personas can be Useful for Shared Language and Understanding in a Design Team

Faaborg brings up personas (not the lightweight Firefox theme, but the notion of creating a small set of hypothetical users who embody the attributes of users you are designing for) as an idea that’s not useful when designing a product as universal as an operating system or browser. The usefulness of personas in user experience design is a bit of a hot button issue. Personally, I have found them to be useful, but only in response to user data and within a design team. Faaborg mentions that Microsoft created “aspirational” personas – the hypothetical user they were designing for who they wanted to create. I can see why this could be useful in marketing, but in user experience I believe you should design for the users you have and not the ones you want. Personas are useful if, when you did that user testing, certain participants with similar backgrounds behaved in similar ways. For instance, in Firefox, certain users perform all browser operations with their mouse. Other users, especially ones who consider themselves tech-saavy, tend to use key commands. We’re designing a browser for both of these groups, so giving them explicit names and characteristics can help create a shared language for a design teams to think of these groups in. It’s not the only way to approach data, but it’s one clear method of giving a lot of data and shared understanding an explicit label so it can be described without citing or explaining the shared understanding.  Also, we do this naturally by saying things like “my mom couldn’t do this,” “my grandpa won’t get it,” “the Linux guys’ll be mad.” Why not be explicit about user groups, give them names, and in the process be nicer to your poor old mother?

Ubuntu Buttons: Redesign them if There’s Cause to, Mmkay?

Faaborg’s advice on what to focus on for the actual task of redesigning Ubuntu’s windows is dead on. What I hope the Ubuntu team will focus on are issues like visual language that explains the task, natural mapping, target size and shape (will these controls be blocked by other windows? are they hard to hit? is it easy to hit the wrong one if you’re in a hurry?). I hope they will identify user-centered reasons that the buttons should be designed rather than changing them because they’re old or it seems like time for change. And, of course, I hope they’ll test their design with users and explain their rationale.

That Pesky Design Process

Lead Ubuntu designer Ivanka Majic has been taking some flak for her recent blog post about redesigning buttons in Ubuntu’s window manager. And, rightly so; she opens by asking several vague questions, says analysis happened in the form of a sketch, and then reveals that Ubuntu’s window manager buttons will be redesigned. “Is it better or worse? It is quite hard to tell,” she writes.

Unfortunately, Aza Raskin was right when he Tweeted that this kind of “wishy-washy design speak” hampers the fledgling growth of design in open source. We’ve heard criticisms that user experience is just “change for change’s sake,” or that it’s all subjective opinion with no structure behind it. When user experience decisions fail to follow a design process or are described poorly, it does resemble arbitrary change for the sake of change.

However, there’s no excuse for design decisions, in open source or elsewhere, to be arbitrary. While good user experience design does involve creativity and risk-taking, it is not art: it is not left up to the particular tastes of the creator. The goal of user experience design is to solve problems and improve how people interact with technology. The path from a design problem to a solution is one that designers handle differently, but at its core should always resemble the scientific method: a deliberate process that improves and changes based on data. Hugh Beyer and Karen Holtzblatt refer to this as the contextual design process. I’d like to outline the basics of this process as they describe it in their book, Contextual Design. While many variations on this system can be formulated to adapt to various problems, it’s a solid way to approach a design task with a well-defined structure that prevents arbitrary decisions.

Step 1: Contextual Inquiry

In this step, the designer’s goal is to understand the users of the system they are designing. This can be accomplished by interviewing people in the environment they will use the product in to discover who the users are, what problems they face, and what goals they wish to accomplish.

Who are Ubuntu’s users? What kinds of tasks do they use Ubuntu’s window manager for? What do we know about their current usage of Ubuntu’s window manager? What problems are they currently facing? Why are they facing these problems? Let’s sit down with users and find out who they are and what their current experience with Ubuntu is like.

Step 2: Work Modeling

At this step, the designer analyzes what he has learned in the Contextual Inquiry stage. Now the users and their world are known, but this information is often intangible; creating data models that represent the users’ world help identify its structure, successes, and failures. In practice, the most important part of modeling this information is identifying “breakdowns” – places where users encounter problems or frustrations. At Carnegie Mellon’s HCII, we identified these on our models with big red lightening bolts: they are the key towards successful redesign, because they show where the current system is failing the user.

Now that we know Ubuntu’s users and have modeled their work, what breakdowns do they experience? Where in users’ workflow do inefficiencies and frustrations occur? What slows users down and makes their window management a poor experience?

Step 3: Work Redesign

It’s tempting in tech to jump to a technical solution to a problem, but this misses the mark. It is the user’s workflow where problems were identified, and this is the first place to look to solve them. The designer should now identify how the workflow can be improved structurally to avoid breakdowns. Shelley Evenson recommends making storyboards at this stage; drawing the user a new workflow that fixes the structural problems identified.

Now that we’ve identified how Ubuntu’s users’ workflow is impeded by the current design of the window manager, how could this workflow be improved? How could particular window management tasks be improved?

Step 4: User Environment Design

Now that the designer knows how users’ workflow can be improved, it’s time to look at the function and system that he’s designing for. At this stage the designer must decide how the parts of the system work together from users’ point of view. While a system will have a defined technical structure, what users mentally model the system to be is different and more relevant to them. How the system is presented to users should be explicit and distinct from the system’s technical structure.

From the point of view of users, what are the relevant parts of Ubuntu’s window manager and how are they related? How will users understand the various control and window functionality within the system of their Ubuntu desktop?

Step 5: Mock-up Solutions and Test Them

At this point, how users’ experience can be improved structurally has been identified. It’s time to apply that understanding to actual design solutions. This should begin as rough sketches which should be tested with users at very early (or low fidelity) stages. Some designers even begin testing when all they have are paper sketches, having a participant pretend they are using an actual system while the designer moves paper to simulate one. In this way, problems and successes are identified early. That information should guide the design as it becomes higher and higher fidelity. At each stage, user testing should refine the design, and the design should respond to this data and become more solidified at each pass.

Here’s five sketches of how Ubuntu’s window manager can be improved: time to test them with actual users. With these results, perhaps quick prototypes can be banged together in JavaScript, Flash, etc. Once we’ve done user tests with those, it should become clear which design directions are performing best.

Step 6: Ship it! But Consider your Community

The designer has now done the research, the design, the testing – it’s time to get this thing implemented and out the door. But now the designer must carefully consider their organization, community, or company. Every change to a system that people use will create pain, anger, and force users to relearn their habits. It should never be done lightly or curtly. In open source, we have the advantage of transparency. Rather than waiting until Step 6 to debut the design, we can and should be talking openly about it all along. But it’s especially at this stage, when the decision is made, that being respectful of the community is crucial.  A designer can expect that a design won’t be popular just from a screenshot, so explaining the process above – the rationale, the research, the work, the decision-making – is the way to show the design decision is far from arbitrary. A designer in open source can follow the most rigorous and careful design process imaginable, but if they blog saying “Here it is, you’re welcome,” the community has a reason to be upset.

Knowing what I do about Ubuntu users and the Ubuntu community, how can I explain the design decisions that have been made? How can I talk about the relevant points of my design research and process so the users know that this decision has been made in a sincere attempt to improve their workflow? How can I argue successfully for my design, knowing that users will be upset at having to change their work habits?

So, that’s the roughly contextual design process as Beyer and Holtzblatt describe it. Yes, this process is highly formal and structured, and few designers out of school follow it exactly to the letter. However, serious user experience designers use variations on this process for their work. The decisions they make should never be or appear arbitrary.  Designers should be constantly trying to understand users, design for those users, and determine if a design is successful through testing with users.

I hate to call out Majic in particular here, but I did want to highlight that more goes into successful user experience design than her post suggested. And indeed, this might just be a problem of communication: a rigorous design process may have been masked by sloppy language. Given that (in my opinion) Ubuntu’s user experience has been blossoming and improving by leaps and bounds over the past few years, I suspect that Majic and the rest of her team do indeed follow successful design practices. But especially in open source, designers need to carefully consider the implications of what they publish. I should know this, because I’ve said some stupid things in my blog and have been rightly called out on them. Designing in open source is a new animal, and we’re only starting to find effective ways to harness the incredible power of open source communities towards improving user experience. But if a designer makes a decision that appears arbitrary, you have every right to call them out on it. It’s not enough to design well: designers must successfully argue for their designs and the rationale behind them.

Themes and Personas in the Add-ons Manager

Personas and Themes are a bit of a strange beast in the add-ons kingdom. Themes completely change the look of Firefox, from its color and menus to the shape of buttons. Currently, Firefox needs to restart to switch Themes. Personas, or “Backgrounds” as I’ll refer to them here, are a kind of light-weight skinning which puts an image behind Firefox’s user interface, but makes no other changes. These can be applied without a restart.

This gets slightly complicated when a Theme and a Background are used at the same time. For instance, if someone wants to use a Theme with circular buttons, but also a freakin Twilight Background behind them. So, the UX question: how explicitly should we make the difference between Backgrounds and Themes in the user interface for the add-ons manager?

One solution is to ignore most of the complexity: allow users to use both a Theme and a Background and simply mark what is being used. This makes for the simplest interface, but can lead to the user being confused about results (“Why does using this Theme disable my other Theme, but my Background remains the same?”).

Or, we could be more explicit about it: give the user an indication that they can only have two items, and only one of each type.