Back to Blog

26 October, 2017

UX (second part)

3.Facilitate the process for the user and make the process more fluid.

3.1 Avoid the user to make calculations

Indicate how many elements are left for  exhaust the maximum available.  

3.2 Include the actual location of the user under your interface.

Highlight the actual section inside the menu of browsing.     Show “bread crumbles” or maps of sequence for facilitate complex interfaces. Show the most important information at the beginning of the page.

3.3 Simplify the make of decisions

Indicate the most selected option by the users.   Offer a list with the most searched terms. Each section of the menu must have a number of manageable options or categories.

3.4 Use the conventions of design that your user already know.

Use menus of browsing according to the accepted conventions by the users.   Place useful functions in the right upper corner.

3.5 Give information to the user after every interaction

Show the message of success after every important interaction   Highlight the element in which the user passes his cursor.

3.6 Minimize the negative effects of waiting periods.

Use attractive colours for decreasing the impatience of the waits.   Keep the users interested during long periods of waiting. Avoid users to upload non compatible archives. Summarize and show the different actions that are being carried out.

3.7 Avoid that the user has to remember data.

Avoid the tags of the forms disappear when introducing data.   Insert the help to the forms outside the field where normally data is inserted. Offer the possibility of copying passwords, codes, etc.

3.8 Do not abuse of the “zig zag” designs

Line up similar data so that the user could compare products.   In different forms, place some tags inmediately next to their

 3.9 communicate in a clear way, which areas you are allowed to click and also interactives

Give three-dimesional features to the buttons. use sharp edges to the areas where them can be dragged and drop elements. Use icons to help the comprehension the meaning of an action.

3.10 Use always familiar symbols and words

Use the same language for user, and don´t speak like a machine. Show a buttom to translate whatever content in other languages. AN IMAGE IS MISSING Chose and use congruent colors with meaning of each element.

3.11 Scan your interface as much as possible

Keep short paragraphs and highlight the most important words.   Place the most important information at the beginning of the lists. Add shading to the lines of your boards. Write headlines that have sense by itself. Break all the blocks of the large text with visual elements to give variety.

3.12 Your text has to be easy to read

create contrast between the text and the bottom.   Line up to the left site the most part of your text.

3.13 Use always the same form and the structure along the interface

create a style guide for your front-end design.   Keep the browsing menu in the same position through  all your pages.  

3.14 Tu diseño debe ser agradable a la vista y estar equilibrado

Diseña siguiendo principios matemáticos. Elige tipografías diferentes y con mucho contraste para texto y encabezados.  

4. Adáptate al máximo a todos los usuarios y situaciones

4.1 Adáptate al nivel de conocimiento y habilidad de los usuarios

Utiliza la cantidad justa de tutoriales en las primeras sesiones. Usa tooltips para ayudar a los usuarios nuevos, sin molestar a los usuarios expertos. Utiliza una estructura de cartas para organizar la información.  

4.2 Adáptate a las herramientas y métodos que utilizan tus usuarios

Deja que los usuarios controlen el aspecto de la información. Deja que los usuarios controlen el orden de la información. Deja que los usuarios controlen la cantidad de información. Crea “personas” para identificar métodos de trabajo específicos. Permite a los usuarios abrir páginas en nuevas ventanas o pestañas.  

4.3 Haz tu interfaz lo más accesible posible para todos los usuarios

Utiliza etiquetas semánticas en HTML5. Utiliza varias vías para comunicar la misma información.  

4.4 Ten en cuenta y adáptate a todos los posibles resultados

Evita que los mensajes automáticos tengan un resultado no deseado. Acepta varios formatos posibles en los campos de tu formulario. Muestra resultados que resuelvan la búsqueda del usuario. Gestiona erratas, sinónimos y variantes con tus formularios de búsqueda.  

4.5 Adáptate a todos los dispositivos y navegadores

Adapta las instrucciones al navegador de cada usuario. En móviles, usa menús del tamaño de la pantalla.  

5. Ayuda a los usuarios a evitar y superar posibles errores

5.1 Es mejor prevenir y eliminar la posibilidad de que se produzcan errores

Elimina, anula o reemplaza los botones una vez que el usuario ha hecho click. Ofrece sólo las opciones válidas para rellenar un campo. Ciertas opciones sólo deben estar disponibles cuando el usuario completa una acción concreta. Dale a cada campo de un formulario la estructura correcta.  

5.2 Identifica señales de que se ha producido un error

Localiza palabras que contradicen la intención del usuario. Recuerda a los usuarios que ya han comprado un producto.  

5.3 Diferencia claramente las acciones que podrían tener un resultado no deseado para el usuario

Diferencia las funciones más importantes mediante el color o dejando un espacio. Pregunta o confirma antes de realizar un cambio irreversible.  

5.4 Ofrece siempre la posibilidad de volver atrás o salir de una situación

Utiliza “deshacer” en lugar de obligar a confirmar cada paso. Ofrece siempre una vía de escape o la posibilidad de dejar un campo en blanco. Muestra una forma visible de cerrar los popups y mensajes del sistema.  

5.5 Minimiza los efectos negativos de abandonar una secuencia de acciones

Guarda todos los datos que introduzcan los usuarios. Permite a los usuarios volver atrás.  

5.6 Haz las áreas clicables y arrastrables lo suficientemente grandes

Añade un borde transparente para los botones pequeños. Espera uno o dos segundos antes de abrir un menú drop down. Coloca el enlace sobre todo el contenedor del menú, no sólo sobre el texto. Ofrece al usuario varios lugares en los que hacer clic para llegar al mismo lugar.  

5.7 Muestra mensajes de error que ayuden al usuario

Explica la razón por la que una contraseña no es válida. Cuando haya errores complejos, ofrece al usuario documentación o la posibilidad de hablar con Soporte. No digas “tú” en un mensaje de error.  

5.8 Ofrece un registro del historial de acciones del usuario

Muestra las búsquedas recientes del usuario. Usa un color diferente para los enlaces ya visitados. Indica los elementos que el usuario ya ha visto antes.  

5.9 Analiza el comportamiento de los usuarios para saber donde tiene problemas tu interfaz

Pide feedback al usuario en el lugar adecuado. Crea alertas en Google Analytics para saber si aumentan los errores 404. Identifica páginas con alto porcentaje de rebote.