Mobile design/Wikipedia navigation/Whiteboard

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

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

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 reply 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