Tag Archives: UX

How to design effective website homepages?

A homepage is the main page of a website, it is the point of entry that gives detailed information about the purpose of such page and to all the information contained within.

Additionally, It helps to navigate the site by displaying links to other pages and articles. In order to have an effective website homepage, designers must ask the following four questions to get the “big picture” of the purpose of the page.

What is this homepage for?
What do users have here?
What can users do here?
Why should users be here – and not somewhere else?

These four questions help webmasters to design effective homepages with a more user-centered approach. Moreover, they can help to create easy (self-explanatory), efficient, and enjoyable homepage interfaces.

How can designers convey the right message in a homepage?

Homepages need a tagline: It is a brief description of the whole site. It must be coherent and informative. Also, it should communicate differentiation and a clear benefit.
A welcome phrase: It is concise information about the site. It can be a two or three lines paragraph displayed prominently.
Perform a usability test: Usability tests help designers to understand users’ needs and expectations, identify navigation problems, and generate ideas for improvement. Moreover, it helps to evaluate the homepage user interface (UI), and to find out the best way to present information on such page.
Do not hide information that users want and need such as contact information or prices for example.
Do not ask information users don’t really want or need to provide.
Design with professional graphic standards.
Research in advance the main things users want to do on your homepage and make them easy.
Tell users what do they want to know when landing in your homepage.
Save steps to users in every single navigation process.
Make it easy for users to recover from errors.

How to design accesible and more effective homepages?

Include the proper alt text to all the images.
Forms in the homepage should work with screen readers (use the HTML ‘label’ element to associate the fields with their prompts).
All the content needs to be accessible by keyboard.
Use JavaScript just when necessary.

Homepage design wireframe.

How to design a usable navigation system for a website?

The navigation system of a website is like the road map that directs users to all the different areas and information contained in it. When the navigation system is clear and well-structured it helps to create trust and credibility, allowing visitors to easily find the information and content they are looking for. However, when that navigation system is confusing and hard to follow it will result in frustrated visitors.

When users navigate in a website, they usually have three main questions to ask:

‘Where am I?’,
‘Where have I been?’ and
‘Where else can I go in this site?’

As a result, and to create easy and enjoyable navigation systems, designers need to follow these suggestions:

What are the attributes of a usable navigation system?

Have persistent navigation– a set of navigation icons displayed on each page. Persistent navigation should include these five elements:

The Site ID (logo) – must be placed on the top left
A search box placed on the top right
A home button or tab
Utilities(shopping cart, site map, help page etc.)
Sections

There is an exception with the homepage (often it doesn’t need the persistent navigation because it is not like other pages). Also, some forms pages like the checkout page in an e-commerce website don’t need persistent navigation.

Display a “You are here” indicator. Designers need to highlight, where the user’s current location is in navigation bars, menus or lists in the page.
Each page must have a page name. The tab that identifies the page name needs to display the content that is unique to this specific page. Also, it needs to be outstanding (it should say, “this is the heading for the entire page”). Moreover, the name needs to match what the user clicked.
Display Breadcrumbs. They are like a secondary navigation scheme that helps users to determine where they are; and an alternative way to navigate around a website They need to place them at the top of the site, organized in a hierarchical manner.
Use tabs. Tabs allow users to easily access different areas of a site or different parts of an individual page. They help to group content, connect related information, and as a tool to save space in a website.

Finally, the importance of a well structured usable navigation system is critical when it comes to differentiate a brand as it plays an essential role in encouraging visitors to stay, view the web content or buy a product.

How do we browse in websites.

What is website usability?

Website usability can span a few key concepts, but essentially it is focused on making any website as user-friendly and easy to navigate as possible.

In the book; “Don’t make me think!”, Steve Krug summarizes in a clear style the guiding principles that make a website, a mobile app or any software usable, emphasizing in simplicity and common sense as the foundation to design with a user-friendly approach.

In the second chapter of the book, Krug explains that making pages self-evident is like having good lighting in a store: it just makes everything seem better. This idea intends to clarify how people behave while browsing a website.

How do users interact in websites?

Users don’t read pages; they scan them. Usually users are in a hurry and they don’t need to read everything to find what they want.

Users don’t make optimal choices; they satisfice. Users don’t choose the best option – they choose the first reasonable option. Why do users do this? Because very often they are in a hurry; there’s not much penalty for guessing wrong; weighing options may not improve their chances.

Users don’t figure out how things work; they muddle through. Most of the time, it’s not important to users to figure out how things work in a website, and if they find something that works, they stick to it.

Interaction in websites.

People don’t like to wonder about how to do things. They enjoy puzzles in their place, when they want to have fun, be challenged or entertained but not when they are trying to find out things on the internet. The fact that the people who develop websites do not care enough to make things obvious and simple can undermine user’s confidence in the site and the company behind it.

How can we design usable websites?

Start with a clear visual hierarchy on each page following these recommendations:
1. More important items are larger/bolder/distinctive color
2. Things are “nested” visually to show what is part of what.
3. Things that are related logically are related visually.

Also, it is crucial for front-end developers to take these instructions into account:

Take advantage of conventions.
Divide pages into clearly defined areas.
Make obvious what is clickable.
Page elements should be uncluttered.

web usability diagram

In the next post, I will explain why developing usable websites applying these principles, helps to grab users’ attention more effectively and makes navigation easier.

Why is the concept of culture important when creating usable e-commerce websites?

The correlation between web usability and ecommerce is of greater significance as more companies from the developed world, seek to expand their operations into emerging markets.

According to internet usage data published by Nielsen//NetRatings, during the year 2015, 37.4% of the world’s e-commerce activity took place in the Asian market, followed by North America with a 31.7.9%, Europe with a 25.9% and Latin America with 6.3 %. Nevertheless, in the year 1996 most of the ecommerce activity took place in North America with 83% of the world total.

It is clear then, that the largest growth in e-commerce transactions occurred in emerging economies that are also more diverse in terms of cultural identity.

Similarly, with the overall growth of ecommerce business transactions in emerging markets, many companies are adapting their web sites to “local” versions. Such adaptation means a specific web design for each market niche that takes into account language and cultural context, preserving at the same the brand integrity.

For example, some studies explain that culturally adapted web sites crafted for each specific market reduce users’ cognitive efforts to process web information, making navigation easier and improving consumers’ attitudes toward the goods and services offered in such ecommerce site.

Why most companies are not adapting their ecommerce websites to each specific market?

The high costs of testing cultural-tailored websites, the obstacles to find key ethnographic elements that effectively contribute to the site’s visual layout and the propensity to cultural ambiguity are some of the reasons why most companies are reluctant to implement culturally adapted ecommerce websites. For instance, in nations such as China and India, the large number of languages and the different connotations images have in each region, may induce designers and web developers to make mistakes in the interpretation of cultural elements.

Even though the above mentioned issues can deter some companies to adapt their websites design to the cultural identity of each specific market, when companies undertake a comprehensive cultural analysis strategy, their ecommerce websites will become more profitable increasing at the same time, users’ satisfaction levels.

The local web