Logical order of visual components on web pages

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.