@alfonsocala / October 22, 2018

How to create a website. The user goes first, then everything else

It seems obvious that this should not be the case, but too often the importance of the user in the genesis of an online project is ruled out. When you think about how to create a website, a design is always considered, a web map that explains all the services and products of the company, a content strategy is drawn up and SEO is oriented. Even the target buyer of the web is created, applying the inbound Marketing methodologies. But many times it is obvious that our website is going to be consumed by a person who searches for us on Google or types our url with clear objectives and very specific needs.

We put ourselves in the shoes of that user from the first moment and ask ourselves constantly during the development if the navigation structure is correct and if the important information is visible and accessible. After, creating a website has a clear objective, to offer a space to a series of users to visit and to do something there. Whether buying a product, visiting a project gallery or searching for a phone number. Therefore, let´s make it easy, we need to make sure that you will achieve your goal when you visit our website, whatever it may be. 

"Creating a website has a clear objective, to offer a space to a user to do something there, so let's make it easy"

The process is laborious and can become overwhelming but don't be scared, at INNN we have been doing it since 2008 and some of us started to lose some hair ;)

User experience. How to create a website. INNN INNN
An optimal user experience should be the main objective when we consider how to create a website. | INNN

Simplicity and common sense in web design

A phrase i have been hearing since I started pushing pixels back in 2003 (yes, I know i am an old-timer) is that a web design does not end when you put all the necessary elements on the screen but when one placed everything, review what was done and remove all leftovers. Well, that is the simplicity to power. 

Simple web map is focused on what the user is looking for

The famous mantra "Keep it simple" is applied daily in web design. Do not think about the company but about the user, are you interested in the history of your company or maybe it is more interesting to know your services and projects developed? Create a main menu with few elements and select the contents of each section, grouping those that can live together. When defining a web map I always think of myself as a user in restaurant menus. If you open the menu there are so many options that make you lazy to read it all and you have to give ¨Houston¨ a call and drop the phrase: Few elements but they are "delicious".

Simple navigation

The web is still young but has already matured. We browse daily for hundreds of APPS and websites and there are well-established standards. Mental structures that work automatically in the user's mind. I give you a couple of examples. When visiting the website of a company, where is your logo usually? Up and usually to the left, right? And, what happens when we press it? We go straight back to the home page, right? Well, we must take advantage of these established conventions, and many more than common sense provides, to make life easier for the user with a simple navigation where you feel comfortable, like being at home.

Neither John Snow nor Khaleesi, the kind is still the content

Be in the North, beyond the wall or in our mobile phones. The web is content and therefore we must be good subjects, take care of it and pay homage to it. 

Content is everything

Creating a website is, among many other things, organizing content and displaying it online. And we already know that the screen reads less so it must be concise, clear and legible. Everything superfluous must be eliminated and the focus must be on the really important content and its main functionalities. This translates into wider spacing, air in the designs to make them more attractive and easy to read as well as a few elements on the screen, just and necessary. 

Clear visual language

To make the user read our website better and for us walking the right way we add a design system on the simple navigation, and the well selected and readable content. A CTA must stand out and have enough contrast with the rest of the content so as not to go unnoticed. If we arrive at a place where we need the user to continue scrolling, we use an arrow or an icon to indicate it. That our "web signage" does not bother but helps. 

Hierarchy

If everything is important, nothing is really important. That is why we must establish effective hierarchies between elements that allow us to highlight one over the other. Use legible typographies and large sizes, without fear for headlines. Other examples: make an expressive use of the bold, lean on the margins and blank spaces to facilitate reading or carefully select the source of the text to make it easy to read. No, that funny comic sans is usually not a good choice. 

The movement helps, let´s dance

In the process of creating a website we can rely on animations, microinteractions, animated gifs and videos to make our content more attractive. 

Relying on animations and microinteractions 

If we rely on animations and microinteractions we make the process more enjoyableÑ we help the user and guide him/her during the trip. We refer to functional animations, not those with a mere aesthetic purpose such as an animated slider or a background of moving particles as decoration. This other type of animations are also necessary but for other reasons. 

We focus on those animations that help understand the transitions between screens, content blocks or functionalities. An example would be a contact button that by clicking directly displays a form converting itself to the ¨send¨ button. There is a transition between a button that should take us to a form and the transition that leaves us precisely in that form through an explanatory animation and perfectly integrated in the navigation. Material Design is a perfect example of this, a must!

Animated content loading for mobile. Invision. | INNN
An example of badly animated and well animated content loading for mobile. Source: Innvision, José Torre

The importance of the video

If the content is king, the video is the direct heir to the throne. There is more to do a quick search to receive countless statistics about the growing and unstoppable use of the video format. In web could not be less, fulfilling a double objective, aesthetic and narrative. 

Focusing on the narrative aspect we have an undoubted emotional component. In video we can count many things with micro videos using less text to make everything more digestible and offering a much closer content and a more memorable experience. 

In short, this is getting longer

Ready in a few lines the key of what we have seen: 

Try to offer a easy and user-friendly web experience. 
Keep it simple, always, do not forget it. 
Take care of the content, make it readable and accessible.
Lean on visual resources, animations and video to help the user navigate and make him fall in love. Simplicity and common sense. 

Business is business

Or to start right? Because at the end of the day it carries out a web design normally to generate business. Now you can improve your brand image or sell your products or services. You may ask, what does it have to do with usability that we are talking to the business? Well, everything really.

If it is a matter of selling, in whatever sense, we must put the user first so that our house, our website, responds to their needs. If we have a usability problem and our users can not finish the purchase process, do not understand the navigation or directly leave our website we have a serious problem, and it is a business, sales problem. So be prepared to have a UX designer on the steering committees because your figure is becoming more essential every day. And it is one of the most demanded profiles, eye on this. 
 

Avda. Málaga 4. Escalera D, ático. 41004, Sevilla. Spain | +34 955 156 465 | How to get to INNN?

info@innn.es +34 955 156 465

A little more INNN in your inbox

We enjoy sharing news that inspires us in our daily lives along with the campaigns that we proudly run. Would you like to hear from us? We send few but great quality emails.

Vive un Aprenday en INNN

¿Quieres venir a un Aprenday? Rellena este formulario y reserva tu plaza. ¡Te esperamos!

Plaza:

¿Podemos ayudarte con tu proyecto?

Contacta con INNN y nos pondremos de inmediato a trabajar en tu proyecto.