Logical order of page components
There is a natural flow to many
visual interactions - the flow of a visual dialogue between page your
features and your user's private mental commentary.
When laying out forms and other
screen elements, read the layout like a
conversation, working from the page origin. Arrange the elements to
ensure the dialogue makes sense, and it will be a better user
experience.
The browser's mental monologue
When we use a web page, like any
software or media, we all have a subtle mental commentary running
inside our heads. It makes decisions, gives instructions, asks
questions, passes comment and argues with the page.
Example of mental monologue
- "What's this?"
- "No, I do not want to receive more
information!"
- "That looks like the one."
- "Where did I see that link?"
- "Yes, I want to send a message!
Where am I supposed to click?"
I imagine that when the features I
design on a web page interact with a user's mental monologue, it
produces a dialogue. In this two-way conversation, each party takes
their turn to speak and listen.
Sometimes, the dialogue is extremely
efficient and quick, like the exchange between a highly skilled hotel
concierge and an honoured guest.
Sometimes, the dialogue becomes
confusing, or breaks down completely. This is either because the
relevant information is not presented, or it's presented the wrong way.
A common problem I find on web pages
is that the information is presented in the wrong order.
Sometimes it just feels like someone isn't listening to you, or that
life somehow isn't as simple as it should be. Very often, it's simply a
case of layout.
Example
The screenshot below shows a short
form from my web host's site. All the forms on the recently redesigned
site are attractive and use a consistent layout, with icons in the top
bar and form inputs in the paler box beneath.
The problem is it doesn't read
properly.
The conversation goes
something like:
The page asks, "Who are you?".
I say, "I'm customer number xxx."
I say, "I can prove it because here's my password."
I say, "Now let me in..."
And then I get stuck because the
login button isn't there!
In fact, the button is close nearby,
but it's quite hard to spot because it's not where you expect
to find it (and expectation is significant).
The eye doesn't want to look up,
because logic says the next thing isn't likely to be back up
the page. It's bound to be to the right and/or down, but it isn't. The
icon I need to click is actually up and left
of where I am now.
