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

Back in May the BBC had a rather good article on the subject of the hamburger menu  http://www.bbc.co.uk/news/magazine-31602745  and here is the Ofcom statistics for tablet use and the elderly - UK biased http://media.ofcom.org.uk/news/2014/tablets-help-drive-increase-in-older-people-going-online/

Thanks Jamie for making clear my ramblings - much appreciated as there were several points to be made!
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: Jamie Knight [mailto:Jamie.Knight@bbc.co.uk]
Sent: 18 August 2015 16:27
To: Michael Pluke
Cc: EA Draffan; public-cognitive-a11y-tf
Subject: Re: Hamburger menu (was Re: technique to include security)

Hiya,

This sounds like the exact use case for alternative content or aria-literal. Provide a uniform method for providing literal translations for content which is non literal.

That said, the 'hamburger icon' is a little icon showing a list items. It's name does not match what the list is suppose to show granted, but the pictogram is intended to show items in a list.

 too think that the icon is not too obvious on many UIs and is all too easy to miss.

It competes with other content. This is probably more a case of size, position, shape and colour / contrast than of the icon itself. If it is not prominent enough, changing the pictogram on the icon won't help much.

So again I think that this may be a case where users may either need to personalize the interface to give them an icon that is more obviously an icon and actually means something to them or they might need a completely different, even messier, UI.

I'm in full support for personalisation. Standard hooks to swap out or replace common UI components with those better understood or preferred by the user is a very good thing. Agree totally there. Giving users the ability to swap out to hamburger icon if they don't understand it / prefer one which is more clearly literal is a good idea.

A separate 'messier' UI however I would not support. 'Accessible' versions (last time aimed at blind users) have major issues of their own. I would strongly object to encouraging their use again.

We should always aim for a single resource wherever possible. Much like with alt attribute content, drift is a big problem when there are multiple resources for authors to maintain.

Summery;

- hamburger icon, while badly named is literal. It sounds like the issues your describing is more about prominence / design related than the pictogram. Useful to hear your experiences tho. Helps to show how 'once you have met one autistic person. You have met one autistic person' :)

- personalisation good

- special 'accessible' versions bad

Hope that helps? Lots and lots of good topics falling out of this discussion :)

Jamie + Lion



Sent from my iPhone

On 18 Aug 2015, at 16:01, Michael Pluke <Mike.Pluke@castle-consult.com<mailto:Mike.Pluke@castle-consult.com>> wrote:
Hi

I recently attended a workshop where a young mobile-friendly autistic spectrum person said that she found many abstract icons totally meaningless and therefore tended to ignore them. This would include (and I think she mentioned) the hamburger icon. I too think that the icon is not too obvious on many UIs and is all too easy to miss.

So again I think that this may be a case where users may either need to personalize the interface to give them an icon that is more obviously an icon and actually means something to them or they might need a completely different, even messier, UI.

Best regards

Mike

From: EA Draffan [mailto:ead@ecs.soton.ac.uk]
Sent: 18 August 2015 13:36
To: Rochford, John <john.rochford@umassmed.edu<mailto:john.rochford@umassmed.edu>>; Jamie Knight <Jamie.Knight@bbc.co.uk<mailto:Jamie.Knight@bbc.co.uk>>
Cc: public-cognitive-a11y-tf <public-cognitive-a11y-tf@w3.org<mailto:public-cognitive-a11y-tf@w3.org>>
Subject: RE: Hamburger menu (was Re: technique to include security)

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.

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