First draft of new mobile navigation UI

List overview All Threads
Download

newer

older

Replacement for vertical-dots icon

Nav UI movie

Philip Chang

11 Apr 2012 11 Apr '12

8:07 p.m.

Folks, Lindsey just posted the first draft of the new mobile navigation UI: http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me… Please look at Design Comps in particular. The wireframes are also useful. For example, the initial view is with the search bar open. These are very much drafts and not intended as final renderings, but there is enough detail to generate specific discussion. Looking forward to your comments. 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

Attachments:

attachment.htm (text/html — 1.2 KB)

Show replies by date

Brion Vibber

11 Apr 11 Apr

8:21 p.m.

On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org> wrote:

...

Lindsey just posted the first draft of the new mobile navigation UI: http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me… Please look at Design Comps in particular. The wireframes are also useful. For example, the initial view is with the search bar open.

These are awesome! Looks like a good design language that can stay fairly consistent across most small-screen platforms, and should scale up to tablets (iPad, Android tablets, Blackberry PlayBook) reasonably well. A couple of things to consider for tablets: * style, positioning of callout menus Right now the search, 'read in', history, & saved pages lists all show on a left-hand column. We should probably plan to have them show close to where they're triggered -- so with the new slide-in menu design that might be search on the right and the others on the left. Also we should consider animation transitions; lack of smooth transitions is one of the complaints against our new iPhone app -- iOS is usually rich in animated transitions to make you feel like you're smoothly moving from one part of the UI to the next. We can do things like the slide-in menu with some animation on iOS and skip the animation on Android, for instance, if we know it's going to be too slow on Android or not be supported. (Ideally, CSS animations should work nicely on Android 3 & 4. In theory. :) -- brion

Philip Chang

8:32 p.m.

Brion, thanks for these comments. Not sure what you mean about the lefthand column. Hard to describe visual things verbally, I know... Regarding animation, Lindsey is working on a Keynote version that will show the animations in action. Having said this, slower phones and feature phones will need to display roughly similar screens without animation, so that is a primary consideration as we nail down this overall design. Or we might drastically simplify for feature phones. Also, the iOS browser presents a different challenge because of the toolbar that is already present. Phil On Wed, Apr 11, 2012 at 11:21 AM, Brion Vibber <bvibber(a)wikimedia.org>wrote;wrote:

...

On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org>wrote;wrote:

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

rupert THURNER

10:15 p.m.

...

Philip Chang

10:39 p.m.

Hi Rupert, We are considering ways to hide the top bar and calling it up easily, but the thought is to show it initially. For example, the Pinterest app hides toolbars when scrolling down a page, and reveals them when scrolling up starts. Another idea, based on the Kindle, is to show the toolbar initially and let it fade away, then a tap anywhere reveals it. Yet another idea is to keep the toolbar at the top of the screen, then after scrolling down a page, a tap on top status bar of the phone scrolls quickly to the top of the page. In fact, I just added these ideas to the project page: https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Toolbar_h… Any suggestions welcome. Thanks. Phil On Wed, Apr 11, 2012 at 1:15 PM, rupert THURNER <rupert.thurner(a)gmail.com>wrote;wrote:

...

Folks, Lindsey just posted the first draft of the new mobile navigation UI:

http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me…

Please look at Design Comps in particular. The wireframes are also

useful.

For example, the initial view is with the search bar open. These are very much drafts and not intended as final renderings, but

there

is enough detail to generate specific discussion. Looking forward to your comments. 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(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

rupert THURNER

12 Apr 12 Apr

8:54 a.m.

I can see a great benefit in showing it to new users of the app so its easy for them to grasp what can be done. But later, in daily use, I cannot see so much benefit, as most of the time is spent reading the contents. When searching, one has to type at least a word and the difference to additionally touch 2 times to bring up the search bar is negligible. So another option might be to let it hide via an app setting, what you think? Am 11.04.2012 22:39 schrieb "Philip Chang" <pchang(a)wikimedia.org>rg>:

...

Folks, Lindsey just posted the first draft of the new mobile navigation UI:

http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me…

Please look at Design Comps in particular. The wireframes are also

useful.

For example, the initial view is with the search bar open. These are very much drafts and not intended as final renderings, but

there

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

Jon Robson

4:49 p.m.

On the subject of hiding the search bar. This could be easily achieved via javascript. We could imagine scrolling down to the content on loading (we do this already to hide the address bar on certain mobile devices). That way the user sees the search temporarily and can scroll up to it but the content is what they are first presented with. In terms of the more button I like the idea of a puzzle piece more than the 3 dots although I'd worry it might mean configuration/settings to some people. It would be good as Brandon says to do a hallway test and show several icons and see what comes to people's mind when they see them. A bag might also work - the idea being that you see a bag and expect things to be inside it. Or maybe something as simple as a down arrow (either on its own or to the right of the 3 dots) to reinforce it as a button rather than a separator. We already use the down arrow to suggest expanding sections so this would work here to expand settings. On Thu, Apr 12, 2012 at 7:54 AM, rupert THURNER <rupert.thurner(a)gmail.com> wrote:

...

awesome! but the default is that there is nothing but the article, isn't it? no top bar, bottom bar, side bar, whatever taking screen estate away from this already small screen? because in the screenshots i did not directly see how to initially pop up the bar. rupert. On Wed, Apr 11, 2012 at 20:07, Philip Chang <pchang(a)wikimedia.org> wrote: > Folks, > > Lindsey just posted the first draft of the new mobile navigation UI: > > > http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me… > > Please look at Design Comps in particular. The wireframes are also > useful. > For example, the initial view is with the search bar open. > > These are very much drafts and not intended as final renderings, but > there > is enough detail to generate specific discussion. > > Looking forward to your comments. > > 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(a)lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/mobile-l >

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Philip Chang

8:27 p.m.

Thanks to all for the excellent comments. Rupert, please take a look at the email with Axel on this list. Jan, the UI will be tweaked per platform. And it is interesting to hear the reactions to the 3-dot icon. The main meaning of the icon is: "Actions on this article" We have tried many approaches with the W and it is a difficult problem. We will test this button approach to make sure it works for most people. We have been studying Facebook and others but how do you reconcile the three lines with the W? Phil On Thu, Apr 12, 2012 at 7:49 AM, Jon Robson <jrobson(a)wikimedia.org> wrote:

...

I can see a great benefit in showing it to new users of the app so its

easy

for them to grasp what can be done. But later, in daily use, I cannot

see so

much benefit, as most of the time is spent reading the contents. When searching, one has to type at least a word and the difference to additionally touch 2 times to bring up the search bar is negligible. So another option might be to let it hide via an app setting, what you

think?

Am 11.04.2012 22:39 schrieb "Philip Chang" <pchang(a)wikimedia.org>rg>: > Hi Rupert, > > We are considering ways to hide the top bar and calling it up easily,

but

> the thought is to show it initially. > > For example, the Pinterest app hides toolbars when scrolling down a

page,

> and reveals them when scrolling up starts. > > Another idea, based on the Kindle, is to show the toolbar initially and > let it fade away, then a tap anywhere reveals it. > > Yet another idea is to keep the toolbar at the top of the screen, then > after scrolling down a page, a tap on top status bar of the phone

scrolls

> quickly to the top of the page. > > In fact, I just added these ideas to the project page: > > >

https://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Toolbar_h…

> > Any suggestions welcome. > > Thanks. > > Phil > > > On Wed, Apr 11, 2012 at 1:15 PM, rupert THURNER <

rupert.thurner(a)gmail.com>

> wrote: >> >> awesome! but the default is that there is nothing but the article, >> isn't it? no top bar, bottom bar, side bar, whatever taking screen >> estate away from this already small screen? because in the screenshots >> i did not directly see how to initially pop up the bar. >> >> rupert. >> >> >> On Wed, Apr 11, 2012 at 20:07, Philip Chang <pchang(a)wikimedia.org>

wrote:

>> > Folks, >> > >> > Lindsey just posted the first draft of the new mobile navigation UI: >> > >> > >> >

http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me…

> > Please look at Design Comps in particular. The wireframes are also > useful. > For example, the initial view is with the search bar open. > > These are very much drafts and not intended as final renderings, but > there > is enough detail to generate specific discussion. > > Looking forward to your comments. > > 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(a)lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/mobile-l >

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

Steven Walling

8:49 p.m.

On Thu, Apr 12, 2012 at 11:27 AM, Philip Chang <pchang(a)wikimedia.org> wrote:

...

The main meaning of the icon is: "Actions on this article" We have tried many approaches with the W and it is a difficult problem. We will test this button approach to make sure it works for most people. We have been studying Facebook and others but how do you reconcile the three lines with the W? Phil

Yeah, I feel like despite its potential ambiguity, we're not coming up with a really solid alternative to the current action icon in the spec. Which probably means that unless someone has a eureka moment, that it's going to be just fine. :) -- Steven Walling https://wikimediafoundation.org/

Steven Walling

11 Apr 11 Apr

10:39 p.m.

On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org> wrote:

...

Agreed with the other commenters: this is very nice! At first glance, I thought the vertical dots were just a separator bar, not an action button.[1] Can we throw a paper prototype of this in front of someone (anyone really, maybe the HR or finance folks on their lunch break) and see what they would do when we ask them to share or save an article? (You have to make them pretend to click, using a highlighter or something.) My gut reaction there could be totally off base, of course. :) -- Steven Walling https://wikimediafoundation.org/ 1. https://www.mediawiki.org/wiki/File:Design-comp-actions.png

Philip Chang

10:59 p.m.

...

On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org>wrote;wrote:

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

Brandon Harris

11:02 p.m.

For what it's worth, I don't put a lot of faith in "hallway testing". The reason is that we're already experts on our product: we all know what it's *supposed* to do. We need to work with people who aren't as close to the problem as us. FWIW I'm not too keen on the three-dot solution myself, but I've not got a better solution at this time. --- Brandon Harris, Senior Designer, Wikimedia Foundation Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate On Apr 11, 2012, at 1:59 PM, Philip Chang wrote:

...

Yes, we will do some user testing, maybe even around the office as you suggest. With a Keynote presentation (in process), the UI would behave almost as if it was real. Phil On Wed, Apr 11, 2012 at 1:39 PM, Steven Walling <swalling(a)wikimedia.org> wrote: On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org> wrote: Folks, Lindsey just posted the first draft of the new mobile navigation UI: http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me… Please look at Design Comps in particular. The wireframes are also useful. For example, the initial view is with the search bar open. These are very much drafts and not intended as final renderings, but there is enough detail to generate specific discussion. Looking forward to your comments. Phil Agreed with the other commenters: this is very nice! At first glance, I thought the vertical dots were just a separator bar, not an action button.[1] Can we throw a paper prototype of this in front of someone (anyone really, maybe the HR or finance folks on their lunch break) and see what they would do when we ask them to share or save an article? (You have to make them pretend to click, using a highlighter or something.) My gut reaction there could be totally off base, of course. :) -- Steven Walling https://wikimediafoundation.org/ 1. https://www.mediawiki.org/wiki/File:Design-comp-actions.png _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l -- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810 _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Philip Chang

11:04 p.m.

What about a page icon, or something to represent an article? I think Steven was suggesting folks who would not know what we are trying to achieve or would be casual Wikipedia readers. Phil On Wed, Apr 11, 2012 at 2:02 PM, Brandon Harris <bharris(a)wikimedia.org>wrote;wrote:

...

Yes, we will do some user testing, maybe even around the office as you

suggest.

With a Keynote presentation (in process), the UI would behave almost as

if it was real.

Phil On Wed, Apr 11, 2012 at 1:39 PM, Steven Walling <swalling(a)wikimedia.org>

wrote:

On Wed, Apr 11, 2012 at 11:07 AM, Philip Chang <pchang(a)wikimedia.org>

wrote:

Folks, Lindsey just posted the first draft of the new mobile navigation UI:

http://www.mediawiki.org/wiki/Mobile_design/Wikipedia_navigation#Initial_me…

Please look at Design Comps in particular. The wireframes are also

useful. For example, the initial view is with the search bar open.

These are very much drafts and not intended as final renderings, but

there is enough detail to generate specific discussion.

Looking forward to your comments. Phil Agreed with the other commenters: this is very nice! At first glance, I thought the vertical dots were just a separator bar,

not an action button.[1] Can we throw a paper prototype of this in front of someone (anyone really, maybe the HR or finance folks on their lunch break) and see what they would do when we ask them to share or save an article? (You have to make them pretend to click, using a highlighter or something.)

My gut reaction there could be totally off base, of course. :) -- Steven Walling https://wikimediafoundation.org/ 1. https://www.mediawiki.org/wiki/File:Design-comp-actions.png _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l -- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810 _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

Brandon Harris

11:11 p.m.

On Apr 11, 2012, at 2:04 PM, Philip Chang wrote:

...

What about a page icon, or something to represent an article?

I don't think a standard "document" icon is going to work well. Most people see those and think things like "save" or "new document" or such. It's an overloaded icon. We had been using a "Puzzle Piece" icon to represent an article in various mockups, but that might not work with the public. --- Brandon Harris, Senior Designer, Wikimedia Foundation Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate

Jon Robson

13 Apr 13 Apr

2:05 p.m.

...

We had been using a "Puzzle Piece" icon to represent an article in various mockups, but that might not work with the public.

Now I think about this some more a puzzle piece tends to mean add-ons / extensions so I don't think it would be a suitable choice of icon.

Steven Walling

8:25 p.m.

On Fri, Apr 13, 2012 at 5:05 AM, Jon Robson <jrobson(a)wikimedia.org> wrote:

...

We had been using a "Puzzle Piece" icon to represent an article

in various mockups, but that might not work with the public. Now I think about this some more a puzzle piece tends to mean add-ons / extensions so I don't think it would be a suitable choice of icon.

Yeah, it seems like we're not hitting on a really good alternative, which probably means I wasted everybody's time by bringing it up... ;) -- Steven Walling https://wikimediafoundation.org/

Heather Walls

9:23 p.m.

Steven, Two days is not a long time, and in my opinion every aspect of this very visible project is by nature very important and not a waste of time. Please keep sharing your thoughts. Also, this looks fantastic and I am super excited for the changes. Beautiful job, Lindsey! Heather On Fri, Apr 13, 2012 at 11:25 AM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

...

On Fri, Apr 13, 2012 at 5:05 AM, Jon Robson <jrobson(a)wikimedia.org> wrote:

We had been using a "Puzzle Piece" icon to represent an article

in various mockups, but that might not work with the public. Now I think about this some more a puzzle piece tends to mean add-ons / extensions so I don't think it would be a suitable choice of icon.

Yeah, it seems like we're not hitting on a really good alternative, which probably means I wasted everybody's time by bringing it up... ;) -- Steven Walling https://wikimediafoundation.org/ _______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

Philip Chang

9:49 p.m.

Steven, as Heather said, this is exactly the kind of feedback we are looking for. And I don't think we have exhausted the list of alternatives by any stretch. I think someone else suggested this, but what about a big down arrowhead? That would correlate with the down arrow in the section headings. I am also thinking about symbols that imply action, or extending the reading of the article in some way. Phil On Fri, Apr 13, 2012 at 12:23 PM, Heather Walls <hwalls(a)wikimedia.org>wrote;wrote:

...

On Fri, Apr 13, 2012 at 5:05 AM, Jon Robson <jrobson(a)wikimedia.org>wrote;wrote:

We had been using a "Puzzle Piece" icon to represent an article

in various mockups, but that might not work with the public. Now I think about this some more a puzzle piece tends to mean add-ons / extensions so I don't think it would be a suitable choice of icon.

_______________________________________________ Mobile-l mailing list Mobile-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mobile-l

-- Phil Inje Chang Product Manager, Mobile Wikimedia Foundation 415-812-0854 m 415-882-7982 x 6810

Brion Vibber

12 Apr 12 Apr

12:36 a.m.

On Wed, Apr 11, 2012 at 2:02 PM, Brandon Harris <bharris(a)wikimedia.org>wrote;wrote:

...

FWIW I'm not too keen on the three-dot solution myself, but I've not got a better solution at this time.

The three-dots menu item looks like an Android 4 action bar overflow menu; if it were all the way to the right it would fit in nicely there. Feels a little funky in the middle, dunno. -- brion

4394

days inactive

4396

days old

mobile-l@lists.wikimedia.org

Manage subscription

18 comments

7 participants

tags (0)

participants (7)

Brandon Harris
Brion Vibber
Heather Walls
Jon Robson
Philip Chang
rupert THURNER
Steven Walling