So far we've mostly been targeting iOS and Android for tablets, but there's
another interesting tablet OS coming down the line -- Windows 8, which will
run on both conventional PCs and tablets.
Windows 8 includes an HTML/JavaScript runtime for native apps using the new
"Metro" style interface paradigm which is heavily weighed towards
touchscreens, so we should be able to adapt the PhoneGap app or reuse much
of its code.
I've been looking into what it would take to support a Windows 8 Metro
style app well, and have written up some notes and screenshots:
http://www.mediawiki.org/wiki/Mobile/Windows_8_Metro
A standalone test application that runs on Windows 8 Consumer Preview and
implements some of the system integration (but none of the article
reading!) is on my github account:
https://github.com/brion/WikipediaMetroTest
There's also a preliminary solution & project file in the main app's git
repo, in the WikipediaMetro subdirectory, but this doesn't fully run right
now (the way we load some scripts violates a security rule) and doesn't do
any of the integration. I'll try and get it running proper soon...
-- brion
Hi All,
In our ongoing effort to upgrade the UI for all of our Wikipedia mobile
projects, we are converging on a design approach that achieves the initial
design objectives, which are:
* to separate the article-specific actions from more general actions
* to provide a flexible and rational way to add new functions going forward
* to not change the way search is prominently displayed and accessible in
the current UI
You can find the link to the project page at the end of this email.
This week we created a working prototype of the new navigation UI. The idea
is to look at this in an Android phone browser.
http://jonrobson.me.uk/wikipedia/experiments/nav/index-final.html
Please note that this is rough and only certain actions are supported,
which are:
- open Main Menu
- activate Search
- open Article Action Bar
- open Table of Contents
Also, please note that the visual design is not yet final.
In order to simplify communication, let's use the following terminology:
* Article Page (the view of the article with the search bar across the top)
* Search Bar (the toolbar at the top of the Article Page)
* Search Field (the rectangle where a search is initiated)
* Main Menu (what is revealed as the full-screen menu on the left)
* Main Menu Button (the W that causes the Article Page to slide to the
right)
* Article Action Bar (the toolbar that comes down from the search bar)
* Submenu (the screen or step that appears after selecting a menu function)
Let us know what you think!
As background about this project, please see:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation
The section Initial menu covers the current design work.
Prior feedback on icons and hiding of toolbars has been collected on that
page. Going forward, please use this page:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation/Initial_m…
But if you are not comfortable with editing a wiki page, please respond by
email.
Thanks.
Phil
--
Phil Inje Chang
Product Manager, Mobile
Wikimedia Foundation
415-812-0854 m
415-882-7982 x 6810
QRpedia is now deployed - for eight articles - at the historic Moor Street
Railway Station, Birmingham, England, courtesy of the Centenary Lounge cafe
there.
This is QRpedia's first train station, and indeed transport hub of any kind.
More details and pictures to follow.
--
Andy Mabbett
@pigsonthewing
http://pigsonthewing.org.uk
I stopped by the Windows Phone/PhoneGap/Cordova hackathon on Monday and
spent some time working on WinPhone support.
git master for the Wikipedia mobile app now builds and mostly runs on
Windows Phone 7.5 'Mango' (tested in emulator). The current styles aren't
compatible with the IE9 web engine so it doesn't look great, but since we
intend to do a major style change soon there's no rush in fixing that.
Some gotchas discovered during previous and current attempts at making it
work:
* You have to tweak jQuery's AJAX settings to make cross-domain requests
work
* local files must be AJAX-loaded with a full URL (eg message files,
sitematrix.json)
* as a weird hack, ask for 'text' and get JSON when loading sitematrix.json
(say whaaaaaaat)
IE9 doesn't support CSS gradients, and I'm not sure about multiple
backgrounds, so the header bars and buttons display incorrectly.
It's also currently rocking the iOS-style toolbar, which should be replaced
with a more native Metro-themed AppBar in the future.
Some system integration still needs to be added:
* sharing
* opening external links in Internet Explorer instead of in the app
* (potential) live tile updates -> stick today's featured article on the
app tile etc
I don't think there's a good way to hook into the global search, which is
unfortunate -- that's one of the things I like on Windows 8's Metro/tablet
interface.
We've also got a great community-sourced fork of an earlier version of the
app that has tried to do more of the system integration, so that should
give us good inspiration on how to get more of those going in the current
version.
-- brion
This was meant for the list but I only sent for Brion so resending!
---------- Forwarded message ----------
From: Jon Robson <jrobson(a)wikimedia.org>
Date: Fri, Apr 20, 2012 at 8:48 PM
Subject: Re: [WikimediaMobile] Navigation UI detailed wireframes
To: Brion Vibber <bvibber(a)wikimedia.org>
I had a Skype with Phil and it got my brain into gear so I have
several thoughts and ideas around these mockups....
Personally I think that we should always show the same initial menu on
a load. If my mum downloads the app I want her apps behaviour to be
consistent with mine so I can explain to her confidently how she uses
it.
I believe we are missing an opportunity to allow sliding to the left
or sliding to the right. In the current design I must swipe twice left
to get from search to nearby. I believe search to be the most useful
function so this seems wrong... it should be in the centre. When I
load the app I should be one slide away from all functions I might
possibly need.
I think each of the 3 menus should show arrows to be consistent and clear
> in the left menu (with nearby etc)
< and > in the centre menu
and < in the right menu
We should show the site logo in the centre of the search bar or just
above/just under it.
I think search should be hidden by default. When I load an article I
expect the page to scroll down to the start of the article. I can
scroll up if I want the main menu but the emphasis should be on
content.
I believe that the menu containing nearby should be restricted to
generic Wikipedia functions that are not needed but useful. E.g.
nearby,random etc...
I think anything page specific should reside in the page itself and be
separate to the navigation bar e.g. to the right of the article
heading. A pin might be a good way of invoking it or an arrow pointing
right to slide to the right.
That's all for now! Apologies for the brain dump!
On Fri, Apr 20, 2012 at 5:34 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote:
> On Thu, Apr 19, 2012 at 3:51 PM, Philip Chang <pchang(a)wikimedia.org> wrote:
>>
>> Here is an important question:
>>
>> Will it be easier to enable instant access to search through the current
>> method - tap on the search field - than through the approach shown in the
>> design comps of a search button exposing the search field and activating
>> search?
>>
>> It strikes me there might be some delay in the second approach, simply
>> because more JavaScript is involved.
>
>
> The animation shouldn't take any longer than it typically takes to move your
> thumb around the screen to start typing, ideally.
>
> -- brion
>
> _______________________________________________
> Mobile-l mailing list
> Mobile-l(a)lists.wikimedia.org
> https://lists.wikimedia.org/mailman/listinfo/mobile-l
>
Folks,
Lindsey has posted more detailed wireframes here:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#More_Deta…
This provides details at the submenu level.
There is one more workflow coming soon which shows the path of going to a
submenu, canceling, and going back to the last article, which is the reason
for the "Read" command at the top of the main menu.
Hopefully this is sufficient to begin some prototyping.
All of the prior discussion around icons and hiding the search bar have not
been forgotten. Those explorations will be next.
We are also doing some planning around testing the effect of showing the
search field open or closed. The site and apps have so far shown the search
field open, so we want to know if having it closed by default will affect
search behavior. Any thoughts out there about this?
Comments welcome.
Phil
--
Phil Inje Chang
Product Manager, Mobile
Wikimedia Foundation
415-812-0854 m
415-882-7982 x 6810
As of yesterday, the Wikipedia mobile app is now available for download in
Blackberry AppWorld for the Playbook tablet:
https://appworld.blackberry.com/webstore/content/105171/
For this initial release we've disabled the 'saved pages' functionality,
but it should come back in a future release (saving/loading code should
become more consistent after the API usage merges). GPS functionality for
'nearby' articles works fine.
Big thanks to the guys at RIM for submitting an appropriate build system
and for helping with the review process!
In theory we should be able to port to recentish Blackberry handsets as
well using the appropriate variant of the WebWorks SDK, so stay tuned!
-- brion
It would be great to get some feedback about going with a design that shows
the search field open at all times.
It is still true that we will pursue a way to hide any toolbars until they
are requested by the user.
Please see:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Search_fi…
The first alternative would be significantly modified in the iPhone browser
because there is already a toolbar at the bottom.
Phil
--
Phil Inje Chang
Product Manager, Mobile
Wikimedia Foundation
415-812-0854 m
415-882-7982 x 6810