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_me...
But if you are not comfortable with editing a wiki page, please respond by email.
Thanks.
Phil
As a follow-up to the prototype sent Friday, here is an updated version with new icons:
http://jonrobson.me.uk/wikipedia/experiments/nav/index-final2.html
The visual design is still not final, but the icons are getting closer to final.
Thanks to everyone who posted comments on the feedback page, which is here:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation/Initial_me...
Thanks.
Phil
On Fri, Apr 27, 2012 at 3:27 PM, Philip Chang pchang@wikimedia.org wrote:
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_me...
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
Also, a very important point:
This new prototype refines the UI elements to be specific for Android browser.
http://jonrobson.me.uk/wikipedia/experiments/nav/index-final2.html
The actions to focus on are:
- open the Main Menu - open the Article Action Bar
The changes from the last version are:
- revised icons - Home is now Read - Back, Save and Share are not present (Back is present on Android generally, Save and Share are not yet available in the mobile site) - navigation to a sample TOC is not present - page scrolling is not working
Comments on the W button icon and the Article Action Bar icon are appreciated.
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation/Initial_me...
Phil
On Mon, Apr 30, 2012 at 2:01 PM, Philip Chang pchang@wikimedia.org wrote:
As a follow-up to the prototype sent Friday, here is an updated version with new icons:
http://jonrobson.me.uk/wikipedia/experiments/nav/index-final2.html
The visual design is still not final, but the icons are getting closer to final.
Thanks to everyone who posted comments on the feedback page, which is here:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation/Initial_me...
Thanks.
Phil
On Fri, Apr 27, 2012 at 3:27 PM, Philip Chang pchang@wikimedia.orgwrote:
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_me...
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
-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810
Comments on the W button icon and the Article Action Bar icon are appreciated.
Attached are some other icons that have been considered for the article actions. Hopefully these can help fuel some discussion around this.
On Mon, Apr 30, 2012 at 2:38 PM, Lindsey Smith lsmith@wikimedia.org wrote:
Comments on the W button icon and the Article Action Bar icon are appreciated.
Attached are some other icons that have been considered for the article actions. Hopefully these can help fuel some discussion around this.
-- Lindsey Smith Mobile UI/UX Designer Wikimedia Foundation
In order of preference...
- F ( "..." is good because it really implies further actions) - A (having it on the right no longer looks it's simply a separator I think) - E (looks good, but it looks a little like it's suggesting "Go" on the search action)
E or F.
On Apr 30, 2012, at 2:01 PM, Philip Chang wrote:
As a follow-up to the prototype sent Friday, here is an updated version with new icons:
http://jonrobson.me.uk/wikipedia/experiments/nav/index-final2.html
The visual design is still not final, but the icons are getting closer to final.
Thanks to everyone who posted comments on the feedback page, which is here:
https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation/Initial_me...
Thanks.
Phil
On Fri, Apr 27, 2012 at 3:27 PM, Philip Chang pchang@wikimedia.org wrote: 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_me...
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
-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810
Mobile-l mailing list Mobile-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
