It'll probably be a while before we start work on the new native Wikipedia apps, but it's worth thinking about design now. :) I took some time today to throw together a quick mockup of an updated main app UI, based on what we've been doing for the mobile web site:

http://leuksman.com/misc/wikipedia-app-mockup/framed.html

Source on github: https://github.com/brion/wikipedia-app-mockup

Screen sizes for iPhones, iPads, and Nexus phone and tablet devices are switchable so you can see how the UI fits to different devices, and you can rotate between portrait and landscape mode. You can click through to articles, but note that section collapsing and search are not fully implemented -- it's a mockup, not a real app. ;)


First I wanted to check if this sort of mockup is a useful tool for visualizing for you guys. :) I figure it is, and we can make other future mockups similarly.

Second, just getting some feedback on ideas in the current mockup:
* this copies the "hamburger" menu from the mobile web site for general-app options. Don't worry too much about the contents of the menus at this stage.
* a similar page options menu on the right side is opened from an icon *inside* the content area
* I've replaced the search field with the branded Wikipedia logo and a search *icon* which would trigger full-screen search (or a popout dialog on tablets, perhaps)
* Back and forward buttons are placed next to the search, I'm still not sure about that.

I'm also considering doing back/forward through left/right swipes to free up icon space, but this might not be discoverable. (We could stick back/forward in page options or app menu maybe).

-- brion