How to create the best layout applying the Usability and UX concepts

Lila Velozo
4 min readJul 20, 2016

--

A good web project team always look for finding the perfect balance between a great design and usability, which isn’t an easy job. Sometimes we get a wonderful design on head, but little usual, or vice versa. Besides, we have to get worried about how will fit this relationship on the mobile devices.

The definition of usability is: capacity of a system on let that specifics users get their specific goals precisely. And UX talks about of perceptions and answers from users who are resultant from use and/or antecipation from a product, system or service usage. What means, the usability is related with the efficiency of an executed job, while UX is related to the emotional answers from users, getting them before, after and during the task.

User Experience: engage, art, fun.
Usability: make obvious, reduce errors, save time.

Some statistics

40% of people abandon a web page if it takes longer than three seconds to load;
46 % of mobile users reported having difficulty interacting with a web page, and 44 % complained that navigation was difficult;
Currently, only 55 % of companies are making online test user experience.

Seeing the statistics we can realize how important it is a beautiful, simple and easy to use layout. After all, you do not want anyone giving up navigate through your site / blog for not being able to use , isn’t ?

Usability and UX layout

  • Give spacings with consistency. Similar elements should have similar spacing. The space between paragraph lines, for example, must follow a default. As the margin around the images.
  • Try to give similarity to the behavior patterns.. It is possible to achieve consistency for the layout through colors, shapes, directions, positioning.
  • Balance the navigation of your menu. The lower the amount of items on your menu, the higher the hierarchy.
  • A page “about us” which explains about your team or yourself is very well seen by users, but try to keep objectivity in the information. Give only the necessary information, so that, the user stay interested in your business.
  • Contact Forms for the user to send direct emails from your website and contact information always visible.
  • Call to action always persuasive and straightforward. Dropbox, for example, is very interested that you register soon, therefore, already proposes that on the first page. Place the call-to-action on the home page and above the fold are also good tips.
  • Search field is always very important because not everyone has the time to find what are searching through your page navigation. The most popular position of the search field is at the top and right (in the West). Use the magnifying glass icon in the search field it is intersting also.
  • In the footer, a different design is interesting, as well as to put information found elsewhere in the site.
  • Create similar buttons.
  • Do not use many different fonts in your project. Native fonts for large texts, loaded fonts for titles. Recalling that native sources have greater compatibility and performance.

A little more about UX

When assembling a project it is important to know some of User behavior. There are some tools to help you identify it:

  • With Google Analytics you can identify all the navigation flow by your user, how people are finding your webpage, etc. It is a very complete platform.
  • Identify which SEO structure is the most appropriate for the segment of your project.
  • Mindmup creates a navigation map that helps you identify if there is unnecessary links in your project, among other things. A navigation map have great influences on SEO issues.
  • A program called heatmap identifies where exactly is being made navigation on your site

A little more about Usability

Before finalizing your project, making a usability test. Send the link of your project (in some alternative address) to your friends and family for example, and ask if they felt any difficulty about the navigation, if there was delay to find what they wanted.

Great video that helps to better understand the concept of usability: https://www.youtube.com/watch?v=NK1Zb_5VxuM

The best reading that I ever seen about usability :
Do not make me think — Steve Krug

You can see my other posts!

Thank you for reading! If you enjoyed this piece, please click the ♥ below. It really helps interested readers find this article.

--

--