MozillaWiki

Firefox OS/UX: Difference between revisions

Page Discussion

Firefox OS/UX (view source)

Revision as of 23:41, 14 November 2014

14,179 bytes removed ,  14 November 2014
m
Updating 2.2 UX stuff geez
No edit summary
m (Updating 2.2 UX stuff geez)
Line 4: Line 4:
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have.  
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have.  


===Specs + Wireframes===
===Latest Specs + Wireframes===
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz


===Important Dates===
===Important Dates===
* April 29: Sprint 1 of 2.0 begins
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)
* May 12: Sprint 2 of 2.0 begins
* 2014-12-01 to 12-05: Portland Work Week
* May 26: Sprint 3 of 2.0 begins
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).
* 2015-05-18: 2.2 Code Complete
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).


===UX Team Schedules===
For Mozilla employees only.


https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing
=Web Components=
Building Blocks reflect OS-wide UX patterns and styles, and are taking the form of Web Components as of 2.3.  


=2.0 Visual Refresh=
===Bug Tracking===
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz
<bugzilla>
    {
        "blocks":"930561",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
==Visual Refresh Scope==
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer.
===2.0 Visual Refresh: Fuzzy Graphics Metabug===
<bugzilla>
    {
        "blocks":"1016987",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Messaging Metabug===
<bugzilla>
    {
        "blocks":"950175",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Email Metabug===
<bugzilla>
    {
        "blocks":"950208",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Calendar Metabug===
<bugzilla>
    {
        "blocks":"950209",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Clock Metabug===
<bugzilla>
    {
        "blocks":"950212",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Homescreen Metabug===
<bugzilla>
    {
        "blocks":"950751",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Dialer Metabug===
<bugzilla>
    {
        "blocks":"950760",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Contacts Metabug===
<bugzilla>
    {
        "blocks":"950765",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Settings Metabug===
RESOLVED WONTFIX as this was superseded by other work. Including here in case anyone is looking for this. See bug #950787.
<bugzilla>
    {
        "blocks":"950787",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Lockscreen Metabug===
Empty as it has no child bugs, yet. See bug #950884, currently assigned to Greg Weng for implementation, who has been working with Fang on visual design.
<bugzilla>
    {
        "blocks":"950884",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: Vertical Homescreen Metabug===
<bugzilla>
    {
        "blocks":"989848",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: DSDS Dialer Metabug===
Empty as it has no child bugs, yet. See bug #990536.
<bugzilla>
    {
        "blocks":"990536",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: DSDS Messaging Metabug===
Empty as it has no child bugs, yet. See bug #990537.
<bugzilla>
    {
        "blocks":"990537",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===2.0 Visual Refresh: DSDS Contacts Metabug===
Empty as it has no child bugs, yet. See bug #990539.
<bugzilla>
    {
        "blocks":"990539",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
===UI Components===
Formerly known as Building Blocks.
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE]
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]
Headers:
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Michael Henretty; needs to be integrated with Vivien's web components work.]
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [RESOLVED FIXED]
===Gallery===
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]
===Homescreen===
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]
===Font update===
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).
==System Front-end Visual Refresh==
* Summary: Visual updates to headers
* VXD: Przemek Abrowtowski
* Team: System Front-end
* Engineer: Sam Jochimek
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])
<bugzilla>
    {
        "blocks":"950756",
        "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"
    }
</bugzilla>
=Building Blocks=
==Overview==
==Overview==
"Building Blocks" is an umbrella term that encompasses system-wide:
"Building Blocks" is an umbrella term that encompasses system-wide:
Line 207: Line 30:
** Text within all of the above, as in notifications, error messages, and so on
** Text within all of the above, as in notifications, error messages, and so on


===What's the problem?===
==List of Components==
The Building Blocks effort tackles an array of usability problems with the above items, including:
* Inconsistent or absent usage and/or application of IxD patterns
* Application failure to call or otherwise utilize standard UI components
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles
* Inconsistent and poorly written copy that affects translations and confuses users
 
===How are we solving it?===
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.
 
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site.
 
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates.
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May.
 
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.
 
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).
 
* We are working the Mozilla technical writer for MDN to update and publish all of the above.
 
===Bug Tracking===
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])
 
===Who is doing what?===
* Stephany: project and vendor management
* Przemek
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj
* 2.0 List of component changes:
** Headers centered font
** Headers italic font (Bug 981928)
** Buttons (Bug 981887)
** Input fields (Bug 981882)
 
* 2.1 List of component changes (dependent on architecture changes)
** sub header & link
** sub header & link
** lists
** lists
Line 268: Line 53:
** system toasts
** system toasts
** invites & alarms
** invites & alarms
* Arnau
** Implementation of Przemek's updated Common Controls
** Have detailed list for 2.0 and 2.1
** Also working on implementation of Visual Refresh for 2.0.
* Casey
** Gaia style architecture:
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. 
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.
** Package management: Agree on package management scheme; create implementation plan.       
* Amy
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc.
* Harly:
** Define & gather documentation
** Finalize design
** Review & Circulate
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)
** Post on MDN
** Update continuously
* Esther:
** Working closely with Harly on defining, updating and sharing BB documentation
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).
* Chuck (Esther's writer):
** Copy audit and rewrite
** Updating and committing strings for localization updates
** Updated style guide (+ strings)will be a final deliverable
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/
** Will help designers and localizers
** Harly's BB slides touch on title and sentence case, some punctuation
* Reviewers:
** Rob and Harly (Frameworks team)
** Matej (copy)
** Axel (L10N visual and text)
** Jeff Beatty (committing new copy to repos)
===Updates===
====2014-04-18====
* We received are reviewing the copy audit project proposal from the contractor.
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward.
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1
====2014-04-01====
* Copy Audit & Strings:
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.
* Building Blocks:
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)
** Add right and left button language to Confirmation Dialogs
** Add input and keyboard behavior to Dialogs
** Add Wizards to BB (common in FTU, app set-up for email, etc.)
** Ok to have text in buttons in a Drawer
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible
** Create UX recommendations for Accordions
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container
** Add cursor and hint text behavior to Input
** Add a screen showing where Banners appear when the keyboard is up
** For Switches, clarify that L and R behavior is in regards to text, not the screen
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist
** Include an Integer Selector
** Add looping behavior as an option for Selectors (hours, minutes, months, days)
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.
** Consider naming Picker "Media Picker"
** Add a second type of Search for non-text content (a la iPhone App Store Search)


=UX Most Wanted=
=UX Most Wanted=
* Summary: These come from our usability studies, UX team members, and so on.
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])
<bugzilla>
<bugzilla>
     {
     {
         "blocks": "994991",
         "blocks": "994991",
         "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"
         "include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, ux-most-wanted-nov2014"
     }
     }
</bugzilla>
</bugzilla>
Swilkes
Confirmed users
208

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1033814"