WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Re-order page content

for

From: Chagnon | PubCom
Date: Jun 3, 2017 5:31PM


Warning: this is a detailed comment to John's detailed comments and citations.

Quote: Citations please, this sounds like bunk to me.

Hm. That's just plain insulting to those of us who have studied this subject.

John, just because you haven't studied human behavior and design doesn't mean this is bunk or that the scientific research doesn't exist or that no one else in the world has studied it.

It just shows that you haven't studied it.

I'm away from my office for a few more weeks so I can't grab books from my research library nor delve into my file cabinet archives or even tap into the digital versions on my office server.

But one of today's best sources of information on behavioral research for design is Dr. Susan Weinschenk www.theteamw.com. Her excellent books are required reading for many in the design and marketing fields, including for the classes I taught at my college:

"100 Things Every Designer Needs to Know About People" https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535

"100 MORE Things Every Designer Needs to Know About People" https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0134196031

"Neuro Web Design: What Makes Them Click" https://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605

"How to Get People to Do Stuff: Master the art and science of persuasion and motivation" https://www.amazon.com/How-Get-People-Stuff-persuasion/dp/0321884507

Dr. Weinschenk has the citations to the research studies going back to the early 20th century. If you get a digital version of her work, the cites are usually hyperlinked to the research page, so click away and knock yourself out.


Quote: Second, I know of at least 1 immensely respected web-usability researcher who has been researching these questions for almost 2 decades now, Jakob Neilson / The Neilson Norman Group, and their scientific method of eye-gaze tracking...

Well we agree on one thing, John. Nielsen is a respected researcher. Have also been reading his material for decades. He's done a lot of good work for the communications industries. https://www.nngroup.com/

However, Nielsen researches only one part of the topic: eye tracking only shows where someone's eyes have landed on a webpage, printed page or wherever. The 2 other parts are:
1) When and where did the reader's brain kick in and start recognizing the content and comprehending it?
2) How did the user respond to the content, and how well was he/she able to recall it?

That's the behavior part that Nielsen usually leaves out of his research. But Weinschenk focuses on that and believes (rightly I think) that eye tracking metrics aren't sufficient.

RE: your comment about Nielsen's "F" eye movement pattern, it's really just a variation of the long-standing "Z" pattern. From what I can remember of Nielsen's piece on this, I think it has merit only on webpages that have a permanent left-hand navigation. Books, EPUBs, and webpages without a left-hand navigation would more likely be the traditional "Z" pattern because there's nothing at the left edge to draw the eye back to it, especially on a straight horizontal line back to the starting point.

But what's more important about the F/Z eye movement patterns is at what point does the brain start recognizing what the eye has seen. There is a time lag between when the eye sees something versus when comprehension and recognition happen in the brain.

Taking the F/Z example, I'm defining point 1 as the upper left starting point. Point 2 is the upper right pause point that is horizontally across from point 1. And point 3 is either at or near point 1 (in the F pattern) or slightly lower down the page on the left side (in the Z pattern).

Comprehension doesn't begin at point 1.

It generally begins at point 2--the far right side of the F/Z pattern.

And it's point 2 that has a greater impact on the user's behavior. Ads placed in the upper right corner produce greater sales (and therefore cost more to advertisers). Pithy quotes by politicians in the upper right corner stick longer in constituents' minds. Critical notices to students in the upper right corner are more likely to be read and acted upon.

And instructions on filling out a form field are more likely to be comprehended when they're on the right side of the form field, not the left. That was my original statement...but that's for sighted visitors. Those using screen readers are better served with the instructions first, before the form field.

Luckily we have today's technology that can make this work for both sighted users and those using screen readers.

For someone who has spent a career in design, marketing, PR, and advertising, my bosses and clients need results, not eye tracking metrics. They'll judge the design based on how many widgets were sold, or which political candidate was elected, or in academia, how well students were able to find the courses they need and successfully register for them. Or find the campus map and get their butts to the class.

By the way, it was hard to tell in John's post if he thinks Jakob Nielsen invented eye tracking methods. The wording is unclear. The study of eye movement started in the 1800s and I believe one of the first devices to track eye movements was developed by Yarbus in the 1960s.


RE: placement of logos, we agree again John. Logos usually should be on the left side, specifically in the upper left.

But that all depends upon the design of the webpage. Is this a content-rich internal webpage? Then yes.
Is this an opening splash page that's heavy on design and graphical appearance? Then maybe not. The logo's placement depends upon the entire design and content of that webpage.

I believe the placement of the logo on standard internal pages (in the upper left) isn't due to the F/Z eye tracking pattern, but more on what John states later: predictability and user expectations. Users today, now almost 30 years after the first www webpage was developed, are expecting to find the publisher's logo or identification in the upper left corner, just as they expect to find navigation at the top or along the left side.

Those items don't depend heavily on the F/Z eye tracking models. They're conventions just like driving on the right side of the road is the convention in North America, and driving on the left is the contention in the UK and other regions of the world. Neither one is better than the other; what most important is what you're used to doing.

And that's why visitors who use screen readers will find some way to skip all that verbosity at the top and left side of the page. And why sighted users won't comprehend those areas and mentally skip them, even those their eyes see them.

Finally...
We agree, John: Usability suffers when a site fails to meet users' expectations.

And that precept is central for good design for all users.

--Bevi Chagnon

- - -
Bevi Chagnon | www.PubCom.com
Technologists, Consultants, Trainers, Designers, and Developers
for publishing & communication
| Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
- - -

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of John Foliot
Sent: Friday, June 2, 2017 9:42 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Re-order page content

> 150 years' worth of scientific research on human behavior has proven
beyond any designer's doubt that if you want something to be noticed and read by visually sighted people, put it on the right side of the page, preferably on the upper right side. Sighted people do not focus on the left side of the page. They focus -- and comprehend -- on items on the right side.

Citations please, this sounds like bunk to me.


First, the world's population over 150 years has seen us with reading patterns that go left-to-right, right-to-left, and in the case of at least Chinese, vertical text (top to bottom). Making a blanket statement like that ignores these realities.

Second, I know of at least 1 immensely respected web-usability researcher who has been researching these questions for almost 2 decades now, Jakob Neilson / The Neilson Norman Group, and their scientific method of eye-gaze tracking (complete with the "images" to back up their findings) shows that the majority of first-time web-page users (i.e. the first time a user encounters a new page), their eyes follow a gazing pattern he has dubbed an "F" - in that most users will start at the top-left, with a horizontal and downward-vertical gaze, followed by a secondary vertical gaze below where we typically expect a horizontal tool bar to be. (Research findings and images at:
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)

In fact, in a separate study (looking at logo placement and a link back to
"Home") Neilson Group found that "right-hand placement" of a logo was actually the least effective in terms of branding as well as interaction:

When we compare the findings from our two research studies of logo placement on websites, we see that centered logos degrade website usability to some extent, but not as much as right-aligned logos. In other words, *logos should lean left*. We speculate that the reason for this difference is that left-aligned logos are the norm and what users expect, and so the more a design deviates from the norm, the worse the user experience. The location of a centered logo is not as far removed from the expected location as that of a right-aligned logo. To generalize this finding beyond logo design:


1.
Usability suffers when a site fails to meet users' expectations.
2. The more severely a design diverges from user expectations, the worse
the damage.

Branding and navigation are such critical functions for websites that anything which negatively impacts these goals should be avoided. Keep your logo where you can be sure users will find it, and your site will get the maximum value from this critical design feature.

(source: https://www.nngroup.com/articles/centered-logos/)


I will suggest however that the most germane point above is bullet point 1:


*Usability suffers when a site fails to meet users' expectations.*


**********

Specific to Joseph's question:

Not seeing the actual design in question, I still will suggest that for maximum usability (including sighted keyboard-only users) putting the repeat action (Log-In) ahead of the (presumably) one-time, or limited-time use of "Instructions" actually makes sense over the aggregate: non-sighted users won't need to hear the instructions *every* time they arrive at that page, only the first time (or perhaps the first few times - but the log-in process will be, and become, a rote activity over time).

(Think of this in terms similar to "skip-nav"... skipping over repeated or non-needed content to get to the "meat" of the page in question - here, to log-in. After logging in 5 or 6 times, I would hope the need for "instructions" has diminished significantly - if not, then I will suggest you have far bigger issues here.)

Joseph, while your reasoning is not incorrect, I think that *meeting user
expectations* coupled with Birkir's reminder that "...the content order only has to be logical..." leads me to suggest that the design itself maybe isn't as bad as you are thinking: the logic of that layout makes sense based upon eye-tracking, and the expected action that the page is delivering over the long-haul (as opposed to single use) - the ability to log-in (which should not be complicated, nor I will suggest, overly verbose).

If you have any influence over the design, I would suggest that as part of the lead-in to the log-in, that a hyperlink to "help" or "instructions"
ahead of the form input, linking to those "right-hand" instructions would give the first-time non-sighted user the option of "jumping to" and listening to the instructions the first (or first couple of) time(s), but allowing that user to also "pass-by" or "skip past" (tab) that link (and the verbosity of instructions I've already processed and learned months
ago) directly to the form inputs would provide the optimum user-experience.

The one other suggestion I would also offer would be that at the "end" of those linked instructions you would also provide another in-page link "back" to the beginning of the form, so that the user can quickly get down to business once they've read the instructions.

*** DOM ***

<h1> to identify the page

<div class="left-side">
Please log in (<a href="#instructions"> Instructions</a>)

<form id="log-in">...</form>
</div>

<div id="instructions" class="right-side">
<h2> Help Instructions
<a href="#log-in>Start Logging In</a> </div>

******
(Or something similar)

As always, just my opinion.

Cheers!

JF

On Fri, Jun 2, 2017 at 7:15 AM, Swift, Daniel P. < <EMAIL REMOVED> > wrote:

> " What I wanted to do for blind users is at least put the instructions
> first in the DOM."
>
> Place the directions in a div and the login inside another div. Float
> them both right ... directions are first in the DOM and will be far
> right followed by the login which will be to the left of the directions.
>
> Dan Swift
> Senior Web Specialist
> Web Team Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Joseph Sherman
> Sent: Thursday, June 01, 2017 2:12 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Re-order page content
>
> Hello all. I know that we want the visual order to match the DOM order.
> However I have a page with a login and instructions side by side. My
> folks want to put the login to the left, and the instructions on the
> right. This seems like bad design to me but I can't get them to change
> it. What I wanted to do for blind users is at least put the
> instructions first in the DOM. How can we best do this? Basically this
> is the reverse of the standard "don't use CSS to break visual and DOM
> order" as here I want to break it. I know it's not great, but if the
> designers want it to look at certain way I generally can't win that battle. Any help appreciated.
>
> Thanks.
>
> Joseph
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >



--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
<EMAIL REMOVED>

Advancing the mission of digital accessibility and inclusion