WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Re-order page content

for

From: John Foliot
Date: Jun 2, 2017 7:41AM

> 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
>
> > > at http://webaim.org/discussion/archives
> > > > > >



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

Advancing the mission of digital accessibility and inclusion