Re: Hamburger menu (was Re: technique to include security)

Hiya,

I do see the point but have experienced problems with older users and some who struggle with the three lines, when the menu they are used to has disappeared

I don't think the issue your describing is the 3 lines icon. It's the fact the website layout changes during the browsing session and a menu disappeared.

That's a slightly different discussion to the points I am making as they relate to the hamburger icon.

Handling the transition between layouts is not the same thing as if the hamburger menu is an understandable affordance.

reducing the size of a window on a desktop/laptop computer.

I am extremely surprised your users are also seeing a change of layout during browsing a site.

I don't have the hard numbers in front of me, but I believe the number of sessions where a user change from one 'layout group' to another on the BBC site is in the order of single digits per 10k sessions. I will go see if I can pull some hard numbers out of our stats system to validate that. Does anyone else have numbers on this?

Did you ask the user to resize the window during the test session?

The advice we seem to be giving developers is all about personalisation and being able to easily get to items with icons and clarity of headings etc.  When the whole lot disappears it can be tough!

This is a good point and worth a discussion. I didn't infer that from your last email. Opps.

The rephrase the question:

1: Is there a need to provide guidance on handling layout changes?
A: how many users does this effect?
B: how severe is the effect?
C: ideas for how the effect can be mitigated.

Thinking about it. I would suggest that for 1C, the use of a consistent icons across sites is a good strategy for mitigation and the hamburger icon is he closest thing we have to a convention.

For the main BBC menu we have a 'partial reveal" method. We order the links by usage (eg what people click most) and as space diminishes we move the least used items into the 'more' menu first.

This is another strategy. We try to leave as much meaning content on the page as possible for as long as possible.

I realise that the latest figures from UK show more surfing is done on mobiles and the young and cognitively able understand the concept but that leaves out a large chunk of our population.

Have you observed users struggling with the menu outside of the 'page resize' scenario?

I don't have any data here beyond the BBC testing a few years ago.

Where's the demographic data showing tablet and mobile users are exclusively younger? We see a great deal of older tablet users too.

I think it's more likely for someone to have a first experience on a mobile device now regardless of age.

I think it's also important to watch the trend lines. Every change takes users time to adapt. While the hamburger menu has its downsides. It also has upsides, one of which is learnability.

Any recommendation we make against using the hamburger menu item will probably be ignored. With an eye on the demographics, I don't think the icon is a big issue.

However you do raise an insightful point about layouts changing during browser sessions. I think we should certainly discuss that further.

Sorry for the length!

Jamie + Lion




Sent from my iPhone

On 18 Aug 2015, at 13:36, EA Draffan <ead@ecs.soton.ac.uk<mailto:ead@ecs.soton.ac.uk>> wrote:

I do see the point but have experienced problems with older users and some who struggle with the three lines, when the menu they are used to has disappeared – reducing the size of a window on a desktop/laptop computer.  I realise that the latest figures from UK show more surfing is done on mobiles and the young and cognitively able understand the concept but that leaves out a large chunk of our population.

The advice we seem to be giving developers is all about personalisation and being able to easily get to items with icons and clarity of headings etc.  When the whole lot disappears it can be tough!

Best wishes
E.A.

Mrs E.A. Draffan
WAIS, ECS , University of Southampton
Mobile +44 (0)7976 289103
http://access.ecs.soton.ac.uk<http://access.ecs.soton.ac.uk/>
UK AAATE rep http://www.aaate.net/
http://www.emptech.info<http://www.emptech.info/>

From: Rochford, John [mailto:john.rochford@umassmed.edu]
Sent: 18 August 2015 13:13
To: Jamie Knight
Cc: public-cognitive-a11y-tf
Subject: {Disarmed} RE: Hamburger menu (was Re: technique to include security)

Jamie and All,

The points Jamie made are great ones, and ones I support.

John

John Rochford<http://profiles.umassmed.edu/profiles/display/132901>
UMass Medical School/E.K. Shriver Center
Director, INDEX Program
Instructor, Family Medicine & Community Health
www.DisabilityInfo.org<http://www.disabilityinfo.org/>
Twitter: @ClearHelper<http://twitter.com/ClearHelper>
[Facebook Button]<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>[Twitter Button]<https://twitter.com/NEINDEX> [WordPress Logo] <http://www.disabilityinfo.org/blog/>

From: Jamie Knight [mailto:Jamie.Knight@bbc.co.uk]
Sent: Tuesday, August 18, 2015 8:06 AM
To: EA Draffan
Cc: Steve Lee; Rochford, John; public-cognitive-a11y-tf; lisa. seeman
Subject: Hamburger menu (was Re: technique to include security)

Hiya.

The hamburger menu and it's three vertical dots friend 'the kebab menu' are not new at all.

We tested them a few years ago at the BBC. I don't remember the details, but I can remember the main take away being that explicit menu names were better. I don't remember how strongly that was found to be.

linked to memory load for making objects actions and options visible

I disagree at this point. Putting everything on the page also tests badly.

As screen space drops, the art is putting the right objects visible on the page and hiding those who are less important.

A blanket declaration that hiding menus behind iconography is a bit blunt, I don't think object memory is the difficulty here.

To play devils advocate, all emerging affordances and conventions have to emerge. Hamburger menus are used across the web and within native mobile apps. In this regard they are very consistent.

I would hazard that for many users (myself included) consistency of an icon to mean 'more things' is actually less overload than trying to figure out what the term picked actually means on each and every website. Three bars is much easier than interpreting 'more', 'menu', 'all", "..." The other myriad things people use as menu button labels.

In memory term, I remember one thing (3 lines means more thins) rather than having to try and remember the wording used on each and every site I visit.

In my mind consistency and convention lead to affordances and we have to be careful not to be too alarmed as new conventions arise.

We don't use the hamburger menu right now at the BBC. But I am sure we will test it again soon and see what happens.

I suspect we will see an inflection point. Where more users know what it means than those who do not. When that point is I don't know.

My final thought is that the hamburger menu is a convention from the mobile world. As more and more users use the web on mobile first we may find that the demographics start to make a big difference. For example younger users, or poorer users (who only have access to the web on mobile) are the first to understand the convention.

Sorry that for a bit long! Quite a digression! Will change the subject to help with the threading.

Jamie + Lion

On 18 Aug 2015, at 12:42, EA Draffan <ead@ecs.soton.ac.uk<mailto:ead@ecs.soton.ac.uk>> wrote:
I agree and interestingly Jakob Nielsen has just come out with some new guidance about those three lines that we now see as menu items for responsively designed sites – this is also linked to memory load for making objects actions and options visible in this case the fact that you lose the main menu system and are presented with what he calls a ‘hamburger menu’. http://tinyurl.com/nreydpa

Best wishes
E.A.

Mrs E.A. Draffan
WAIS, ECS , University of Southampton
Mobile +44 (0)7976 289103
http://access.ecs.soton.ac.uk<http://access.ecs.soton.ac.uk/>
UK AAATE rep http://www.aaate.net/
http://www.emptech.info<http://www.emptech.info/>

From: Steve Lee [mailto:steve@opendirective.com]
Sent: 18 August 2015 12:04
To: John Rochford
Cc: public-cognitive-a11y-tf; lisa. seeman
Subject: RE: technique to include security


That's very good

Steve Lee
Sent from my mobile device Please excuse typing errors
On 18 Aug 2015 11:58, "Rochford, John" <john.rochford@umassmed.edu<mailto:john.rochford@umassmed.edu>> wrote:
Hi Lisa,

My second impression about this approach is that it could be combined with recommendations for what developers *should* do.

Example:
“Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

Reference: Neilson 10 Principles at http://www.expressiveproductdesign.com/nielsens-10-usability-heuristics-user-interface-design/ , provided by Steve Lee to our list serve on 8/14.

John

John Rochford<http://profiles.umassmed.edu/profiles/display/132901>
UMass Medical School/E.K. Shriver Center
Director, INDEX Program
Instructor, Family Medicine & Community Health
www.DisabilityInfo.org<http://www.DisabilityInfo.org>
Twitter: @ClearHelper<https://twitter.com/clearhelper>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
MailScanner has detected a possible fraud attempt from "www.facebook.com" claiming to be From: Rochford, John
Sent: Tuesday, August 18, 2015 6:48 AM
To: 'lisa.seeman' <lisa.seeman@zoho.com>; public-cognitive-a11y-tf <public-cognitive-a11y-tf@w3.org>
Subject: RE: technique to include security<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Hi Lisa,<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
My first impression about this approach is that it does not provide developers any recommendations about what they *should* do, which is the optimal approach.<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
John<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
MailScanner has detected a possible fraud attempt from "www.facebook.com" claiming to be John Rochford
UMass Medical School/E.K. Shriver Center
Director, INDEX Program
Instructor, Family Medicine & Community Health
www.DisabilityInfo.org
Twitter: @ClearHelper<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
MailScanner has detected a possible fraud attempt from "www.facebook.com" claiming to be From: lisa.seeman [mailto:lisa.seeman@zoho.com]
Sent: Tuesday, August 18, 2015 6:02 AM
To: public-cognitive-a11y-tf <public-cognitive-a11y-tf@w3.org>
Subject: technique to include security<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Hi <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
I was thinking of the following technique as a way to include security and other considerations<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
"Do not require cognitive abilities when it is  avoidable"<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
In security this may include:<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Requiring that the user has a good working memory or short term memory required to copy a code<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Requiring that the user can remember complex passwords<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Requiring that the user can remeber spelling of terms used in security questions such as how to spell a strange pets name<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Requiring that the user can remember visual patterns<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
Having tokans, signing in via email account or face book, or biometrics are all alternatives to the above<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
In voice  systems this may include,<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
?        Requiring the user to understand categories,<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
?        Requiring the user to remember numbers<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
?        can all be used as a barrier to getting human help<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
is is aviodable by having 0 as a reserved digit to access a human<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
In the Web of things this may include:<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>

  1.  remembering what symbols mean<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
  2.  remembering sequences to run certain tasks<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
This is aviodable by having simple text with symbols and <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
clear discovrability of how o complete each task<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
and recovrability from errors<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
 <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
All the best

Lisa Seeman

Athena ICT Accessibility Projects
LinkedIn, Twitter<http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>
  <http://www.facebook.com/pages/New-England-INDEXShriver-CenterUMass-Medical-School/227064920160>




----------------------------

http://www.bbc.co.uk
This e-mail (and any attachments) is confidential and may contain personal views which are not the views of the BBC unless specifically stated.
If you have received it in error, please delete it from your system.
Do not use, copy or disclose the information in any way nor act in reliance on it and notify the sender immediately.
Please note that the BBC monitors e-mails sent or received.
Further communication will signify your consent to this.

---------------------