It may seems obvious that every User Experience and User Interface Design’s goal is efficiency, however, the vast majority user interfaces could be much more effective and user-oriented if they slightly changed a few things.
First of all, researching the eye-tracking and click map software analysis proves that the majority of design/layouts are still explored by user diagonally. Just as we all thought before.
This particular model of behavior comes from early typography, precisely newspapers, meaning that the first element that user scans is heading (where we use to put logo in websites) next is subheading and body text etc.
This model could be applied to both, obsolete (such as php-nuke and earlier template monster’s ones) and modern website layouts. So, we still can use the ancient rules to create more trendy things to attract user’s attention with awesome hero images, video backdrops etc.
And I believe that our webpage plays a good example here:
As you see from the example above, even a long distance (between logo and navigation) is not a big barrier for user to use a nav bar. On the first glance, it may seem that 50% user prefer top navigation rather than centered button. But, deeper research shows that the top navigation was used only when user wanted to scroll up/down. Thus, the first element that was clicked was our pink button “Find out More”. That means that user’s path was diagonal, starting from logo (left top corner) to the button in the center of the page. Therefore, the closer element is to left bottom corner, the less clicks you will get. And vise-versa.
Here is the web prototype for multi-screen web page:
Secondly, a good readability leads to a better User Experience. Here are few tips to make you content more convenient to read:
Center-aligned blocks works best for headings and subheadings.Sometimes it is possible to have a small paragraph. The best way is to have no more than 5 lines in it. Long centered text block are terrible to read. Believe me.
- Full-width text is rarely applicable for some taglines and in unique cases when you can not break the line.
- Inversion. There are many debates over whether does the black background any white text affects or improves the readability. I would say: If it looks sexy – do it!Do not overuse it. Also, think twice when it comes to a scientific data or other professional information.
- Space/Padding. For better readability spacing above and below text block should be the same.Put some space for user to read. In mobile design, this may be increased double.
- Line-spacing. There is no specific formula to use the right spacing. Usually Photoshop’s auto is pretty good, but in mobile design I increase this indicator until I’m sure that it will be pretty easy for user to read at arm’s length.
I hope that this article will help you to create Top Notch User Experience for websites and applications and avoid many mistakes that I had made personally. Enjoy!
