||<>|| * '''Name:''' UI Review * '''Owner:''' Launchpad Team * '''Effective:''' Summer of 2009 = UI review process = These guidelines are to help all of us make UI reviews as straight-forward as possible. Currently one of the following is required to land a branch with UI changes: * a ui review by a graduated ui reviewer or a member of the Canonical DUX team. * two ui reviews by ungraduated ui reviewers (marked with an asterisk below). == Current UI reviewers == * Maris Fogels* (mars) * Paul Hummer* (rockstar) * Michael Nelson (noodles) * Edwin Grubbs* (EdwinGrubbs) * Curtis Hovey (sinzui) * Matthew Revell* (mrevell) == Reminder: Before starting a UI change == 1. Consult the ReadyToCode checklist. 2. If necessary create a LaunchpadEnhancementProposalProcess to clarify the feature scope. 3. Create and discuss the [[UI/Design|mockups]]. == Submitting your branch for review == === Ten questions to ask yourself about any page === 1. Is the

'''main heading'''

enough so that, if someone glances at it for two seconds, they know what this page is for ''without looking at any of the other navigation''? 2. Is the page title concise and meaningful enough so that it '''makes sense in a Go/History menu''', even when truncated at the end? Will people know it’s the page they want to go back to? (For example, "Bugs in “software-center” in Ubuntu Maverick" is better than "Ubuntu Maverick “software-center” bugs" or "Bugs : “software-center” source package : Maverick (10.10) : Ubuntu".) 3. If the page is accessible when logged out, is the page title enough so that it '''makes sense in Web search results'''? (For example, the Launchpad pages for many people or projects rank higher than their own Web sites. To disclaim this, the for these pages should end with “ in Launchpad”.) 4. If you were in the target audience but '''you’d never seen the page before''', would you understand what's going on? Does it need embedded help? Could you make help less necessary? 5. Do your changes make it '''easier to complete the task'''? Have you added visual complexity, or removed it? 6. Does this behave '''differently than other pages''' in Launchpad? Why are those exceptions there? 7. After finishing with the page, is there anywhere you'll very likely '''want to go next'''? Is that destination linked to near the bottom of the page? 8. In any '''form''', what happens if you skip a compulsory field? What happens if you enter disallowed characters? What happens if you enter 200 KB of text? 9. Does the page look '''elegant''' and well-balanced? 10. Is it '''fun''' to use? === Check your choice of words === Check through the [[UserInterfaceWording|User interface wording guidelines]] to ensure that you are using the recommended wording and capitalization etc. === Did you consider in-line help? === We all agree that the user interface should be self-explanatory but there are some terms and concepts that will not be familiar to everyone using Launchpad. If you feel there's room for confusion, you should either: * use [[PopUpHelp|pop-up help]] to explain a term, concept or short process * or link to the relevant page on the [[https://help.launchpad.net|help wiki]] to explain a more involved process or workflow. === Check your template code === Review the [[PageTemplateHacking|quick checklist for template code]] to ensure that your template code is consistent and therefore more maintainable. === Check your URLs === Have you added or changed any URLs in this branch? If so, look at our [[UI/UrlStyleGuide|URL Style Guide]]. === Make it easy to demonstrate your UI === If it is difficult to setup the sample data required to demonstrate your changes, consider pasting a harness script that can be used by the reviewer to setup the relevant data. It is always worth creating a single before/after screenshot and attaching it to the bug - this allows those people following the bug to provide input too. Or if your change involves some behavioral changes, consider creating a brief screen-cast using gtkRecordMyDesktop and attaching it to the bug. Again, other interested people to comment on your UI without having to merge your branch. == UI-reviewing a branch == === Tips for reviewers === 1. '''Don't read the merge proposal'''. Branch, fire up the page(s) that where changed, and write down your initial impressions. Sometimes a change causes other parts of the page to look out of place, so knowing what to look at may make you miss that. 2. '''Make mistakes'''. When going through a work flow, make as many mistakes on purpose. This will help you feel what a frustration scenario would look like. 3. '''What's the transition story?''' When we make significant changes to existing UI, or add new things, what's the transition story for people who just see that pop up one day? 4. '''What issues have already been raised?''' After playing with the branch with as little background knowledge as possible and forming your own ideas, it is important to go back and read all the related pre-implementation discussions on the related bugs or LEPs. 5. '''How wide is the reach of this change?''' If a certain change is for a specific corner case and this knowledge influences your decisions, then either ensure yourself that this is the case, or ask the developer and code reviewer to double-check.