A la hora de empezar a realizar un diseño web o de app o bien si tenemos que mejorar algún proyecto ya terminado, es recomendable seguir algunas pautas que nos permitan mejorar la usabilidad, la arquitectura de la información y la experiencia de usuario.
En los siguientes puntos voy a darles algunas recomendaciones para realizar una correcta auditoría web/app. ¿Qué elementos debemos tener en cuenta?:
Idioma y lenguaje
Es necesario segmentar al público objetivo al que vamos dirigido, tanto desde el punto del idioma que habla (español internacional, español de países hispano parlantes, lenguas regionales..), como la forma de expresar habitualmente (lenguaje familiar, técnico, jergas..) Debemos “hablar” el mismo lenguaje que el usuario, con palabras, frases y conceptos que le resulten habituales. Para que la información aparezca natural y lógica, es recomendable seguir estándares del mundo real intentando evitar mensajes incomprensibles.
Por ejemplo, los típicos mensajes de error como “Error de javascript en línea de código 234”.. Sólo el programador sabe que significa este aviso de error L.
Practicidad y sencillez
El sobreexceso de información en nuevos desarrollos en más que habitual, hemos pasado de lo minimalista a lo maximalista en diseño web. Algunas recomendaciones:
Es recomendable que no haya información irrelevante o que pudiera necesitarse de muy de vez en cuando. La información poco habitual, distrae y dificulta la navegación. Y si es obligatorio incorporarla al diseño, es preferible que tenga un link, para que quien necesite consultarla, lo pueda realizar pero sin molestar al resto de usuarios.
En multitud de ocasiones me he encontrado que la información que aparece en la web ha sido un copy&paste de un (mal) tríptico de la empresa. Es más recomendable utilizar párrafos cortos, enumeración en listas o facilitar la lectura de textos muy largos con el contenido divididos en páginas.
También es recomendable vigilar que los textos al imprimirse, tengan un ancho máximo de una página A4 estándar y que el color de letra no sea blanco ni muy pálido, así podrán leerse en fondo blanco y negro. O contar con una versión especial para ello.
Atención a los elementos gráficos: No utilizar la misma imagen para un botón de acción que para otro elemento decorativo.
Otra recomendación es destacar los contenidos nuevos, enriquece la experiencia del usuario y le da una pincelada de actualidad muy agradecida por los usuarios.
Facilitar la navegación
El website o la app debe tener los objetos, acciones y opciones a la vista. El usuario no tiene que estar recordando dónde estaban las cosas o cómo llegar hasta…. Algunas recomendaciones:
Categorización de los contenidos: Seguramemte, no será posible tener todas las opciones a la vista, sobretodo en sitios demasiado extensos, pero podemos ayudar a indicar camino a seguir. Con una buena redacción de los enlaces, las cabeceras de contenidos y los menús, ayudaremos al usuario para que no se pierda.
Breadcrumbs: las famosas “migas de pan” permiten orienter al usuario y le facilita saber dónde está. Cuando existan procesos que impliquen varios pasos a seguir, es conveniente informarle al usuario en qué etapa se encuentra y cuántas le faltan para acabar la tarea. Podemos ayudar al usuario enumeración de pasos, con navegación contextual4. También es recomendable que cada paso sea sólo de una acción y que reciba confirmación de que se ha ejecutado correctamente.
Bookmarks: El website debe ser fácil de añadir en una lista de favoritos. Y podemos lograrlo si evitamos el uso de frames o utilizando nombres de ficheros que no caduquen. Por ejemplo, con los post que sean noticias o textos temporales, lo recomendable es nombrar las páginas con la fecha para que al publicar un nuevo post no se sobreescriba el anterior anulando la URL que algún usuario puede haber marcado como favorita. Si existen formularios para obtener información (un buscador) es recomendable usar el método GET en lugar de POST, para que la cadena de búsqueda quede en la url y se pueda marcar el resultado (ej, si busco Zapatillas para running, los resultados se muestran en una página con una dirección que podría ser así: http://www.dominio.com/resultados?zapatilla+running).
Errores
En la medida que sea posible hay que evitar cualquier mensaje de error. Ningún diseño o copy, aunque sea el mejor del mundo, podrá evitar el mal sabor de boca que produce un mensaje de error. La mayoría de los errores cometidos por los usuarios están en el proceso de rellenar formularios o porque ya no exista una página en nuestro web o app.
Para los errores de formulario, lo más recomendable es utilizar sistemas de validación antes de que el usuario envíe su información y deba volver a rellenar todo le formulario (i.e. en javascript). Para los errores de páginas inexistente, la mejor recomendación en revisar constantemente Google Search Console o crear un evento 404 de control de enlaces rotos.
Consistencia
El website o la app deben ser consistentes y ello hace referencia a los nombres de las secciones, botones y contenidos.
Si un botón apunta a una sección que tiene un nombre totalmente diferente, el usuario siente que ha cometido un error. Lo mismo sucede con contenidos que aparecen duplicados y que tienen distintos nombres. Por ejemplo, un enlace a «ayuda» debe llevar a una página que se llame así y no «preguntas frecuentes». Igualmente, si existen preguntas frecuentes, deben estar en una página llamada así y no duplicarse para aparecer también en «ayuda».
Si hablamos de diseño, es recomendable seguir las convenciones habituales que utilizamos en internet, como por ejemplo, el color de los enlaces de texto (todos los sites tienen un color azul subrayado para indicar los enlaces y se usa sólo para eso), de manera que los enlaces sean claramente reconocibles en el site.
Cada site forma parte de un sistema global y por ello es recomendable evitar “reinos de taifas” dentro de cada sección como si se hubiese diseñado y programado por equipos diferentes.
Compatibilidad
El desarrollo debe ser compatible con distintas versiones de navegadores y sistemas operativos. Muchas veces hay scripts que no se ven en Firefox pero si en Chrome, y eso se nota aún más cuando se utilizan Mac’s o Iphone’s. Hay que tener cuidado con las fuentes, los colores y los scripts usados en el desarrollo.
Recordemos que más del 60% de tráfico web se visualiza desde un móvil, pero los desarrollos los hacemos con PC’s (y normalmente con pantallas de gran resolución). Es recomendable pensar en diseño para móviles.
Sección de ayuda
Lo más recomendable es que un desarrollo pueda ser navegado sin necesidad de ayuda, pero existen desarrollos complejos que deben contar con asistencia. Por ejemplo, un banco online que utiliza herramientas novedosas que pueden inducir a confusión. Para evitarlo, es importante tener la ayuda integrada en el contenido, es decir, enlaces a las secciones de ayuda que tienen relación con el contenido que se está consultando (por ejemplo, en un proceso de registro, al abrir una cuenta, al hacer un pedido, etc). Asimismo, debe existir una sección de ayuda completa, donde se pueda ver todo el contenido del website o app.
El usuario manda casi siempre
Los usuarios pueden realizar elecciones por error y es recomendable facilitarles una «salida de emergencia» para dejar las cosas tal como estaban. Es conveniente siempre tener una vuelta atrás, independientemente que el navegador ya tenga un botón «back». Un enlace para volver al inicio en cada página es de mucha ayuda.
El usuario debe sentir que es quien manda. Un usuario NO siente que manda cuando en una web o app:
Las fuentes tienen un tamaño fijo,
Aparecen ventanas que cubren toda la pantalla (eliminando el navegador y cubriendo todas las ventanas que pudiesen estar abiertas),
Las animaciones requieren plug-ins especiales y no tienen una forma de «saltarlas» (skip),
Los mensajes intrusivos aparecen por todos lados,
Nuevas ventanas que se abren permanentemente (proliferación de ventanas en la pantalla del usuario), etc..
La velocidad del website o app
Para SEO es fundamental y Google está especialmente quisquilloso con la pagespeed, tanto para versión PC como para versión móvil. Pero, aun así, también debemos tener en cuenta que cada usuario se conecta con una velocidad diferente, los anchos de banda de upload y download de nuestro server, scripts que fallan, librerías que caducan, etc… es decir, elementos técnicos que pueden dificultar la experiencia del usuario al navegar por nuestro desarrollo.
Para adelantarnos a posibles problemas de toda índole, el desarrollo debe mantener informado al usuario sobre qué está sucediendo, con feedback apropiado en un tiempo razonable. Por ejemplo, presentar mensajes de espera cuando se está efectuando una transacción (ej, un banco) o bien de confirmación cuando se ha efectuado una operación solicitada por el usuario (ej, «su pedido ha sido aceptado»).
Check List
Unas cuestiones rápidas a la hora de empezar o auditar un web o app:
Aspectos generales:
¿Cumple el desarrollo con sus objetivos?
¿Está diseñado para darle a los usuarios lo que ellos quieren?
¿Es eficiente?
¿Es intuitivo?
¿Mantiene una consistencia tanto en su funcionamiento como en su apariencia?
¿Facilita que el usuario se sienta cómodo y con el control del sitio?
Branding:
¿Muestra en la home page, la objeto del negocio y se identifica bien el logotipo o marca?
¿Aparecen elementos de la marca o de la imagen corporativa en todas las páginas?
¿Aparece la marca en un lugar importante dentro de la página? Recuerde que el logotipo suele utilizarse como un enlace a la home page del site.
Interfaz:
¿Tiene el site una interfaz amigable, con colores que concuerden con los objetivos y propósitos del site?
¿Hay espacios blancos (libres) entre el contenido, para descansar la vista? O existe una sobresaturación de elementos en la página que desconcierta al usuario?
¿Se ve el sitio exactamente igual tanto en PC como en móvil?
¿Y en Chrome como en Safari? Si no, recurra a código específico para que se muestre igual (simplifique a versiones anteriores de HTML o utilice JavaScript para reconocimiento de navegadores).
Navegacion:
¿Aparece la navegación en un lugar prominente, donde se vea fácilmente?
Si su navegación está hecha con imágenes, considere también tener una navegación en texto plano (puede ser al final de la página).
¿Los enlaces que son imágenes tienen su atributo ALT escrito?
Si ha usado JavaScript para la navegación ¿ha preparado también una navegación en modo texto?
¿Existen enlaces rotos o que no conducen a ningún sitio? Compruébelo y quítelos inmediatamente.
¿Tiene el sitio un site map o un buscador para quienes quieren acceder directamente a los contenidos sin tener que navegar?
¿Se mantiene una navegación consistente y coherente a lo largo del site?
¿Existen elementos que permitan al usuario saber exactamente dónde se encuentra dentro del site y cómo volver atrás (breadcrumbs)?
¿Indican los enlaces claramente hacia dónde apuntan? ¿Está claro lo que el usuario encontrará detrás de cada uno?
Imágenes:
¿Se han optimizado las imágenes para reducir el tamaño?
¿Tienen la resolución correcta?
Existen plugins que permiten reducir el peso de las imágenes más grandes. Considere este recurso si la velocidad en su site es un factor importante.
¿Tienen las imágenes que lo requieran una descripción mediante el atributo ALT?
Animación:
Evite las animaciones cíclicas (i.e. gif animados que se repiten hasta el cansancio), a menos que cumplan con un propósito claro.
Utilizar animaciones con html5, google lo prefiere, y el SEO lo agradecerá.
El Vídeo es el rey y no tiene por qué estar alojado en nuestro server. Utilice Youtube, Vimeo u otros servicios que permiten alojar y enlazar los vídeos hacia su proyecto.
Publicidad:
Si el sitio contiene banners, trate de optimizar el tamaño al mínimo.
Ubicación de los banners. Si el sitio «vive» de la publicidad considere la posibilidad de ubicarlos en la parte superior de la página o en los márgenes derecho e izquierdo (según estudios, funcionan mejor los que se encuentran a la derecha, cerca de la barra de scroll).
Para app, la parte inferior es la que se suele utilizar para alojar la publicidad de terceros.
Integrar su desarrollo con GDN puede ser una buena alternativa para obtener unos ingresos extras a final de mes.
Contenidos:
¿Es coherente el contenido con el contexto de la página o site?
¿La redacción es corta y precisa? Evite los textos demasiado extensos.
¿Existen referencias cruzadas entre textos que están relacionados?
Evite usar líneas horizontales para hacer separaciones en los textos, pueden ser interpretadas como el fin de la información.
Tecnología:
¿La tecnología utilizada en el site es compatible con el software y hardware de los usuarios objetivos? ¿No tendrán que descargar elementos como plug-ins para poder usarlo?
Si es importante utilizar recursos técnicos que requieran la descarga de plug-ins, ¿se le informa al usuario de esta situación y se le explica la importancia de hacerlo?
Feedback:
¿Se han previsto respuestas del sistema frente a interacciones del usuario? (por ejemplo: se le informa que se ha recibido satisfactoriamente un formulario enviado).
¿Puede el usuario ponerse en contacto para hacer sugerencias o comentarios?
Legal:
¿Cumplimos con la legislación actual de protección de datos?. Independientemente donde se encuentre nuestros usuarios debemos aplicar la legislación que les afecta. Por ejemplo: GDRP para usuarios en la Unión Europea.
Utilización de cookies de third party data. Cualquier información de cookies que compartamos con terceros, por ejemplo, compra programática o remarketing, debe estar recogida en un convenio de usuarios o condiciones generales de utilización que el usuario debe conocer y autorizar.