[wp-hackers] Usability Expert Review

[Gabriel White]

Hi Ron,

(sorry this might not attach to the proper thread, I subscribed to
this list after the post was made)

Let me address the points that you've made:

1. Disagree with the implication that users want more popup/separate
windows.  It's pretty well established that's the last thing they
want.

People don't avoid sites that use popups in a useful constructive,
predictable way. They avoid sites that use popups to present content
that they don't want or need in an obstructive intrusive or disruptive
way (ie pop up advertisements).

The key issue with my recommendation here is around control.

When you're designing a software UI, it's important that users have
control over what happens with the software where they want or need
it.

The problem with the current UI is that it completely replacies the
"application view" in the browser with "online help" when you access
help content.

One effect of this is that users have to use the browser's Back button
to get back to where they were. Which is generally okay in the context
of an information site, but not good in the context of a web
application (think: do you ever press the back button when you're
using GMail, Hotmail or Yahoo Mail?). But in the context of a web
application, this is definitely a loss of control.

I wouldn't have such big qualms about replacing the application view
with help content if there was just one general help link on the page
(which is much more visually and conceptually separated from the rest
of the application UI). But with integrated contextual help, it's
important that the help behaves in a more application-like way (ie
users should not use the back button).

Also, people often read help along-side the task they are trying to
get assistance with, which the current design does not support very
well.

Also, when people use WordPress (or any web app), they are focussed on
actually using that application. But if in the process of invoking
support documentation, the application iteself entirely disappeared
users will most likely become slightly concerned that they've lost
work or logged out or something like that (even if it's not an
explicit concern). Having a pop-up in this context makes is much more
comforting: the user hasn't lost their application or their work, AND
they have the help available to them.

Overall, it's just a better experience.

2. Visually differentiating different links.

Expectations is important. When I do something on a computer I should
know beforehand eactly what effect my action is going to have on the
system. One of the problems with the web is that (when badly
designed), everything looks the same, so (for example) users can't
predict whether a link's going a) give them a short definition of a
concept b) go to a big article about the topic c) go to a completely
different web site d) let them buy a book about the concept. Ofthen
they just click and hope.

So, the best way to help people in this regard is to give them clear
cues about what the effect of clicking on a link is going to be. So
it's important to differentiate the different kinds of things that a
link can do, and then give the user the cues that they need to tell
beforehand what's going to happen.

Maybe the particular suggestion I made for the design solution to this
should be reconsidered, but I still stand by the recommendation to
differentiate the links.

3. Making WordPress easy for newbies should not have to mean long-term
sacrifice for its users for that sake.

First, I'm not sure screen real estate is actually a significant
issue. 65%+ of people have 1024x768 or higher. And given that WP users
are likely to be more technical, they're also more likely to have high
res screens. Increasing the visual weight of the menu may only mean a
few pixels lost.

http://www.w3schools.com/browsers/browsers_stats.asp

Second, this isn't just for newbies. Visual design (using colour,
shading, font, etc) makes it easier for everyone to use the
application. A well designed application doesn't require you to
remember how to do things; the design makes it immediately obvious
what you are doing, how to do it and what else can be done. So while
increasing the visual weight of these elements will help newbies
identify functions more easily, it will also help reduce the ambient
mental load for more experienced people who don't need to spend the .2
seconds thinking about how to get to a piece of functionality: the
visual design means that the elements are already mentally present
without requiring explicit attention.

Look at how GMail uses a very sophisticated set of subtle visual cues
to help you differentiate and structure the information on the screen.
Even though you might be an expert user, the visual cues means you can
just DO things immediately without even a small moment of reflection.

So, again the experience is better.

I'm in Beijing at the moment, and then back home visiting Australia
next week, so real time discussions just ain't gonna happen because of
the time differences. But I'll endeavour to follow up once a day on
any discussion here.

Cheers,

Gabe

> Gabriel White has prepared a draft report for WordPress, and is looking 
> for feedback from the community to revise it. Please check it out and 
> let the list know what you think:
> 
> http://www.gabrielwhite.com/wordpress/

Hyperlinks
Issues

Links to different kinds of content are handled in a uniform
way throughout WordPress. Links to external content or sites,
online help and post / page content are all represented as
underlined blue text, and all links open in the parent browser
window. Sometimes, system actions are carried out using
blue underlined text links (such as activation of a theme). This
design both make it difficult for users to determine the purpose and 
effect of these links, and is likely to cause
frustration when supporting content is displayed in place of
the WordPress application itself. Most users would expect
supporting content to be displayed in a window outside the
application itself (much like help content is displayed in a
separate window on desktop applications).

Disagree with the implication that users want more popup/separate 
windows.  It's pretty well established that's the last thing they want. 
  (Hint: The Web is not a "desktop application".)  People avoid sites 
that indulge in this kind of behavior, they certainly don't want it on 
their own sites.

* Differentiate links that provide access to help content.
   Instead of linking the text of field labels, place a
   hyperlinked question mark either after the label or after the
   field (e.g. "(?)". This makes the purpose of the link clear.

Actually, I think that change would only add confusion, not reduce it, 
by appearing to be a standard "Add page to Wiki" link.  Wiki is not the 
obscure thing it once was, and is becoming less so rather quickly.

Navigation Design
Issues
The second level tabs (i.e. the menu options presented below
the primary navigation options) are an efficient use of screen
real estate, but can be hard to notice (see example below).
Users may not realize there are multiple options available
below a major menu item.
Recommendation

 Enlarge the font size on the second level tabs, and give
the font more visual weight (e.g. use color and bolding).

Someone else said it before.  "Learning Curve".  Making WordPress easy 
for newbies should not have to mean long-term sacrifice for its users 
for that sake.  That real estate is a precious resource.  (The 
appropriate way to fix this for the visually impaired is with a local 
stylesheet override.)

- Ron