Mobile design/Wikipedia navigation/Whiteboard

This is a place to post items related to UI prototype and beta development.

Monday, May 14, 2012:
New buttons will be posted soon.

Some minor tweaks from before:


 * highlight of rows in Contents and Search should be consistent
 * "Back to top" instead of "Jump back a section"
 * Main Menu - height of row needs to match height of search bar
 * Main Menu - needs solid border on left edge (or right edge)
 * from Contents, jump to section should open the section

Go ahead with second steps as in the wireframes below. It would be great to see three or four of those done this week.

Thursday, May 10, 2012:

 * Demo 3 can be moved to the beta site


 * Remove "Read" from the Main Menu


 * Swipe from the Contents sub-screen can open the Main Menu, as seen in this video:
 * https://accounts.usertesting.com/TestResults.aspx?j6a7p2f0m3c1o0a3

Some minor tweaks:


 * highlight of rows in Contents and Search should be consistent
 * "Back to top" instead of "Jump back a section"
 * Main Menu - height of row needs to match height of search bar
 * Main Menu - needs solid border on left edge (or right edge)
 * from Contents, jump to section should open the section

Next steps on alternate prototype

 * We need two new prototypes, both of which will put the W as an emblem inside the search field:
 * 1) Both buttons together on the left (or right)
 * 2) Buttons as they were, on the left and right, but using the new icons

In order to confirm this direction, Lindsey will prepare a brief survey of button placement in other sites and apps, with the understanding that search as a central function together with a main menu and other buttons is fairly unique to Wikipedia.

Since Jon has time before this survey is ready, it may be useful to see three alternatives in demo form:


 * Both buttons together on the left - the Main Menu button would be on the left edge, and the menu would slide in from the left


 * Both buttons together on the right - the main menu button would be on the right edge, and the main menu would slide in from the right


 * The main Menu button on the left, search field in the middle, and Action Bar button on the right

The icons to use are below, under May 8.

Next steps on alternate prototype

 * User testing feedback has indicated that the W and Action buttons are not discoverable and seen as part of the search box
 * New action and menu buttons to be moved to the right side of the nav bar
 * Main menu to slide in from the right side (opposite of the previous prototype)
 * W logo to be moved into the search box for visual branding only

Some minor tweaks:


 * highlight of rows in Contents and Search should be consistent
 * "Back to top" instead of "Jump back a section"
 * Main Menu - height of row needs to match height of search bar
 * Main Menu - needs solid border on left edge (or right edge)
 * from Contents, jump to section should open the section
 * Action button up/down orientation keeps flipping (but if this is a big deal, skip it)

New open issues

 * Search behavior in general needs to be addressed
 * search suggestions (Opensearch API) are sometimes slow
 * full-screen search shows a blank screen on opening, and when no suggestions match what the user typed
 * full-text search is currently not working when the Search button is tapped on the keyboard
 * "Did you mean" is not implemented on the site
 * Article text search has never been implemented in the site or apps

Next steps on prototype
http://jonrobson.me.uk/wikipedia/experiments/nav/demo.html


 * Action button is upside down
 * Search field in full-screen view is still wider than search field in article view
 * Is the color of the top bar in Contents the same as the color of the search bar in article view? (should be)
 * Let's change "Jump back a section" to "Back to top" and link to the top of the page
 * New W and Action buttons are posted here for the second prototype
 * [[File:Button menu more closed2.png]]
 * [[File:Button menu more open2.png]]
 * [[File:Button w no arrow2.png]]

Some detailed design tweaks:


 * Search bar and main menu rows both need to be 45px in height. I think they are around 40 right now.
 * Text labels for the main menu should be regular font weight, not bold.
 * Spacing between all elements on the search bar should be 7px.
 * Align search result text with search input text
 * Lighten search bar drop shadow to #6d6d6d
 * Lighten article action menu background to #757575

Next steps on design

 * Primarily second sets for browser and iPhone app flows
 * WLM photo upload flow
 * starting page for Android app beta
 * https://bugzilla.wikimedia.org/show_bug.cgi?id=36017

Open issues
Top and persistent Contents
 * As noted above, we will change "Jump back a section" to a "Top" link. Question: "Top" on one side and "Contents" on the other - or a persistent way to surface Contents?
 * "Top" was suggested by Erik after he saw a user testing video
 * possibly this will be the initial solution for the browser in terms of access to the top bar
 * there are currently some strange characters at the beginning of "Jump back a section"

Initial view of apps
 * What should appear initially?
 * there is a usability issue around the fact that it takes some time to download an article and the user may not perceive the possibility of searching immediately, especially in the apps where a spinner is very obvious as the page downloads
 * show the article spinner separately from the search spinner
 * a static screen showing links to some popular destinations, or instructions
 * the featured article or initial content of the home page with some obvious indication that search is available
 * the last viewed page, ideally from cache

Summon toolbar
 * persistent icon
 * tap anywhere (except a link)
 * scroll up

Comments from Trevor

 * animations are better done as CSS transforms on iPhone to take advantage of OpenGL
 * opening sections should not rely on URL, and JS should say false, so that Back functions intuitively
 * swipe down to open Action Bar, and swipe up to close

Next steps on prototype:

 * Use index-final2.html
 * Use a real article as the content
 * of medium length with normal number of sections
 * make sure Contents reflects the actual sections


 * Keep top bar in fixed position


 * Minor tweaks
 * change Contacts to Contact
 * move the W button slightly to the left
 * move the search field left too, to align with search suggestions in full-screen search
 * make the search field on the full-screen search page exactly the same width as on the article page (and same position)
 * add a drop shadow under the search bar on the article page, exactly the same as under Search in full-screen Search and under Contents in the Contents submenu


 * Another prototype
 * to test another version of the W and Action buttons, could you create another prototype exactly the same as above, but with the W and A that Lindsey will post on this page today
 * the new style is flat, meaning the buttons are not 3D, and the background color of the bar may be lighter
 * just go with what Lindsey posts here


 * Graphic assets
 * use hi-res graphics - when Lindsey posts them

Next steps on design:

 * Detailed submenu flows for browser and iPhone app
 * can start with 3 menu commands
 * Settings to include Beta opt-in


 * Finalize W and Action buttons
 * including pressed state


 * Determine language selection with Pau
 * last flow to be designed

Open issues:

 * Resolving zoom behavior in iPhone browser (also applies to iPad)
 * Nearby requires geo query service - renew GeoNames, determine state of internal service
 * Back behavior from Nearby in apps
 * Featured name could be configurable by language