UX Requirements

Last updated: Mar 27, 2012 (Josh Carpenter)

Perceived performance is an key ingredient of the mobile user experience. Users on mobile devices expect consistently smooth movement, and instant responses. iOS has consistently set the benchmark in both areas.

Perceived performance is determined by several factors:

• Frames per second
• Responsiveness

Frames Per Second

We are encouraged to design without consideration of performance constraints (Chris Jones).

• First, because we have the ability to fix problem areas (our developers are very good, and they have complete control over technology stack).
• Second, because pushing the boundaries improves the web.
• Third, because UX awesomeness is the goal.

That said, there are some determinants.

Requirements

• Guarantee of consistent frames-per-second (fps) across all first-party Gaia UX. 60fps ideal, 50fps minimum.
• UX testing tools:
  • FPS tracker: A on device performance review tool (accessed from Settings > Debug), and corresponding review web-app.
    • On-device:
      • Sample FPS every 10ms.
      • Display value in on-screen modal overlay.
        • Color according to range: Green for optimum, yellow for sub-optimum, red for sub-minimum.
        • Record samples to device database, tagging each with:
          • FPS value
          • Active application name, version.
          • Device
        • Export database upon user command, with:
          • Recorded samples database
          • B2G version
          • Gaia version
          • Date
      • Web-app
        • Load new dataset
          • Load file from harddrive
          • Input name, date
        • View ranked apps summary: list apps, sorted by number of sub-optimum and sub-minimum samples, worst at top.
          • Filter by date range:
            • All (default)
            • [Individual weeks]
        • List individual datasets
          • Filter by:
            • Person
              • All (default)
              • [Individual developer names]
            • B2G version
              • All (default)
              • [Individual developer names]
            • Gaia version
              • All (default)
              • [Individual developer names]
            • Data range
              • All (default)
              • [Individual weeks]
        • View individual datasets
          • Filter by date range:
            • All (default)

Determinants

• CSS transforms are great. Because they are semantic, and therefore structurally appropriate. Transforms also don't affect rendering layout of page. They come in as last pass.
• DropShadows with large radii are bad. Especially when mixed with other CSS properties (gradients, etc). They begin to tax the CPU, causing performance drops. It's hard to do, but it can happen.

Research & Reading

• ADD TO...

People

• UX: Josh Carpenter
• UX: Patryk
• UX: Casey Yee
• Dev: Vivien
• Eng: Chris Jones

Design Specs

For the latest UX specifications, please visit https://mozilla.box.com/system

Responsiveness

Responsiveness is defined as the speed of the interface's response to user inputs. Immediate response is important to a user's sense of control over the device, and therefore the quality of the experience. Many mobile operating systems make the mistake of prioritizing internal system processes over responsiveness. An image will continue to load even as a user scrolls a website. Normally this is not a problem, but during heavy system load, this can cause interface slowdown while the image continues to load in the background. The user perceives delayed responses, interface redraw lags, "jumps", etc.

Gaia will ensure an enjoyable user experience by prioritizing user input responsiveness over other system processes. Scrolling a website that has not completed loading will pause loading and DOM rendering as necessary, even if it means revealing incomplete "holes" in the interface (such as revealing a "blank" underlying texture). Interface elements will animate with consistent smoothness (scrollbars, screen transitions, interface "holes", etc).

The benchmark for touch responsiveness on mobile is iOS. We will work to match it in quality and consistency.

Requirements

• Implementation of prioritized user input response.

Determinants

Touch responsiveness is determined by a wide range of technologies, making it a challenging to address:

• Gecko: Off Thread Main Compositing
• e10s Electrolysis "Processes separation between the application and the rendering of web pages"
• ADD TO...