xeral[arroba]galinus.com

Artigos de Galinus >

Patróns de deseño de interacción: exemplo práctico

Introducción

Os patróns de deseño e interacción ofrécennos soluzóns probadas a problemas comúns na web. Utilizándoos nos nosos deseños aforraremos traballo.

Neste exemplo queremos ilustrar o uso de patróns para mellorar un proceso. Cómpre salientar que hai outros patróns que axudan a fomentar valores máis abstractos, como a credibilidade.

Temos escollido a compra de billetes en Iberia.es polas nosas experiencias na súa web. Isto non é razón de abondo e habería que xustificar calquer cambio con probas de usuario, estudos de estatísticas ou chamadas de atención ao cliente.

Guiámonos polo libro The Design of Sites. Cando atopemos patróns similares na web, ligámolos. Se no os atopamos, facemos unha descripción sinxela do patron. Podes ver os

Aplicando patróns ao proceso de compra de billetes en Iberia

Estes son algúns dos patróns que poderiamos empregar para unha experiencia de usuario máis satisfactoria. Entre parénteses indicamos o patrón utilizado (patróns que contén o libro).

1� Sesións de usuario (H5-Persistent customer sessions).

Utilizamos sesións cando precisamos gardar temporalmente datos do usuario (proceso de rexistro ou pago, por exemplo) ou ofrecer contido especializado.

En Iberia comenzas unha sesión nada máis entrar na web, antes incluso de ter inserido datos que precisen gardarse temporalmente.

Problema: se o usuario abandoa a web por algún motivo, ao volta a ela pode atopar que a sesión cadoucou e ten que comenzar de novo, incluso antes de inserir datos confidencias.

O remate da sesión notifícase cunha mensaxe de erro que nos leva aos seguintes patróns.

2� Mensaxes de erro amables e explicativas (K13-meaningful error messages), Linguaxe Familiar (K11-Familiar language).

A web debe informar dos erros dun xeito claro e pouco alarmante. Debe evitar termos confusos e facer que o usuario siga adiante dun xeito sinxelo.

Un enorme sinal de atención, texto amoreado e varios menús deplegables non informan nin tranquilizan ao usuario. Ademáis, o erro debería dicirnos por que a nosa sesión caduca e como evitalo.

Os menús desplegables en distintos idiomas e distintas opcións por defecto non axudan a seguir adiante.

3� Proceso en tunel: axudar ao usuario a completar tarefas. The Design of Sites (capítulo de exemplo en PDF, 264 KB)

Unha vez que se comenza unha tarefa que precise varios pasos, temos que evitar que unha persoa abandoe o proceso por accidente.

Quitamos todas as ligazóns que non teñan que ver co proceso. As ligazóns de axuda deberían saltar nunha nova fiestra, para que o usuario non se saia de contexto.

Cómpre indicar claramente canto leva feito e canto lle queda para rematar. Os botóns de acción son a mellor forma de para saber como seguir adiante co proceso.

As pestañas superiores están presentes mentras completamos a nosa compra.

En Iberia cando comenzamos a compra seguimos tendo á vista tódalas ligazóns. Calquer clic pode levarnos a outra sección, co problema de que a volta atrás é lenta e as veces dá problemas pola cantidade de Javascript que se utiliza.

Unha implementación impecable dun proceso en tunel son as compras en Amazon. Unha vez comenzamos é case imposible sair por accidente.

4� Botóns de acción (K4-Action Buttons), botóns con visibilidade alta (K5-High-visibility action buttons). Podes ver o patrón en Web Design Patterns

As ligazóns de texto son axeitadas para moverse dunha páxina a outra. Pero cando o usuario ten tomar decisións importantes, como confirmar unha compra, convén utilizar botóns.

Usar botóns de aspecto tridimiensional, que se pareza a un botón real, e etiquetas con verbos que indiquen a acción que realizamos cando prememos o botón.

Botón "Tarifa" para seguir adelante con el proceso de compra.

En Iberia.es os botóns son planos e as veces conteñen sustantivos no canto de verbos. Hai casos no que é preciso aclarar a función dos botóns cun texto que o acompaña.

Conclusión

Este é un pequeno exemplo de como os patróns poderían axudar a unha persoa a completar unha compra dun xeito máis sinxelo.

Artigos relacionados

Patróns de deseño e interacción

Ligazóns

Bibliografía

The Design of Sites. Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience. Douglas K. Van Duyne, James A. Landay e Jason I, Hong.

Ver máis artigos

Licencia de Creative Commons

Artículo baixo licencia de Creative Commons.


En Galinus somos profesionais da comunicación en internet.

Si queres aproveitar ao máximo as posibilidades das tecnoloxías da comunicación, contacta con nós.