Mobile design/Wikipedia navigation/Whiteboard

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

Tuesday, May 29, 2012:

Today Jon did the following:

hide underline on main menu (see https://gerrit.wikimedia.org/r/#/c/9234/)

fixed problem with two on/off switches appearing next to beta opt-in in Settings (Android 2.3.6)
removed Login from Settings

(see https://gerrit.wikimedia.org/r/8343)

Back button:

allowed flicking between overlays and article using browser back and forward buttons

https://gerrit.wikimedia.org/r/9243

Languages:

implementing add this text to the top of the article language submenu:
- This article is written in [X] languages

(see https://gerrit.wikimedia.org/r/9241)

Reviewed language page (Didn't find your language? See more.) and decided that this was too much to achieve in the current time frame and should be implemented at future time (about same length of time as was required for settings page)

Menu and Action buttons:

The buttons need updating in general, and it is clear from all user tests so far that the Action icon is not intuitive
Heather provided some overall input that is helpful:
- the visual focus is currently on the top left corner, so we could move the W in gray to the right side of the search field
- it is not obvious that Action refers to the article - a visual cue could help
- currently the Menu and Action icons are dissimilar - one is a pure symbol and the other is a metaphor
  - current proposal in the design team is to use the horizontal bars for Menu and three vertical dots for Action
  - This Action icon should be grayed out (or not selectable) when no sub-actions (ie- language, table of contents) are functioning for that page

Bar icon asset
Dot icon asset
W Beta asset
Wikipedia asset
Pointer asset
Mobile action icon A1 revision May 29
Mobile action icon A2 revision May 29
Mobile action icon A3 revision May 29

Friday, May 25, 2012:

Outstanding:

items in Main Menu don't need to be links - minor point and your suggestions is fine
- I think they should be. 1) for accessibility reasons. Some screen readers will expect them to be links to know they are actionable 2) on older browsers without touchscreen it is important to signal they are clickable
- (we could hide the underline on the link and rely on the hover though if this is what is disliked!!)
two on/off switches appearing next to beta opt-in in Settings (Android 2.3.6)
remove Login from Settings

Back behavior:

going back from submenus should go to the article view, not the menu open view
Back button from Contents and Languages should do the same as the back arrow - reveal the same article (currently first click of Back does nothing and second click goes to the previous article)

Language:

let's mimic the site and have any language change carried across the board; this also creates consistency between the mobile site and the desktop site

add this text to the top of the article language submenu:
- This article is written in [X] languages
add this text to the bottom of the article language submenu:
- "Didn't find your language? See more. [more is a link to the Language setting in the Main Menu]"

add Language showing the current language to the top of the Main Menu
add this text to the top of this Language list:
- "Wikipedia is available in 285 languages, choose one:"
- If the article is not in the chosen language, show the home page of that language version

If time:

fix beta opt-in - possibly due to external problems

Wednesday, May 23, 2012:

Outstanding:

Placeholder text missing in Contact / Technical problem subject and message fields
- This has me very confused.. on my location instance the placeholder text is there but for some reason it doesn't show on the Wikipedia site..
items in Main Menu don't need to be links
- I think they should be. 1) for accessibility reasons. Some screen readers will expect them to be links to know they are actionable 2) on older browsers without touchscreen it is important to signal they are clickable
- (we could hide the underline on the link and rely on the hover though if this is what is disliked!!)
Contact should adopt the same screen layout as Contents or Language (title in top bar with back arrow on the left, etc.)
- I disagree.. it is not a page specific function. It is a special page. Just like login/logout and eventually the settings page.
Back behavior in Contact seems inconsistent
- Further information required.

Done:

References broken in beta
- fixed in https://gerrit.wikimedia.org/r/8766
Featured and Contact should close the menu upon selection (no animation)
- Done https://gerrit.wikimedia.org/r/8759
back behavior sometimes opens menu (is the same as the above)
Why does Contact not show any languages?
- https://bugzilla.wikimedia.org/show_bug.cgi?id=37088
"Close this section" instead of "Jump back a section"
- https://gerrit.wikimedia.org/r/8758
bugs in Korean and Opera Mini regarding Action Bar icons (no bugs filed yet)
- https://gerrit.wikimedia.org/r/8762
landscape view problems in Mobile Safari, Opera Mobile, Opera Mini and Android (no bugs filed yet)
- https://gerrit.wikimedia.org/r/8764

Open issue:

beta opt-in solution needed for user testing and general release (beta URL works as teaser)

Friday, May 18, 2012:

clickable rows in Main Menu
"Close this section" instead of "Jump back a section"
close Action Bar when going to an action, like Contents
back behavior should keep screen as before (including Action Bar being open)
disable Contents and Language if no sections or only one language
beta opt-in solution needed for user testing and general release (beta URL works as teaser)

Keep going with second steps as in the wireframes below.

Monday, May 14, 2012:

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

Friday, May 11, 2012:

iOS App Detailed Sub-steps

Set 1
Set 2
Set 3
Reading/Subfunction Diagram

Mobile Browser Detailed Sub-steps

Set 1
Set 2
Set 3
Set 4

Thursday, May 10, 2012:

Demo 3 can be moved to the beta site
- http://jonrobson.me.uk/wikipedia/experiments/nav2/demo3.html

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

Wednesday, May 9, 2012:

Next steps on alternate prototype

We need two new prototypes, both of which will put the W as an emblem inside the search field:

Both buttons together on the left (or right)
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.

Tuesday, May 8, 2012:

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

Design
New Icons
W Logo

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

Friday, May 4 and Monday, May 7, 2012:

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

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

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

Weekly meeting on May 3, 2012:

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