Los fundamentos de Great UX

Para beneficio del software y las aplicaciones en todas partes, UX se ha convertido en un paso cada vez más importante en el ciclo de vida del desarrollo de software. Aunque UX es una capa de diseño ligeramente subrepticia, no es menos importante. Por la naturaleza de su nombre, define la experiencia de los usuarios. Esa experiencia determina si quieren o no regresar por más, o correr gritando en la otra dirección.

UX es algo que cualquiera puede hacer. El problema es que no todos pueden hacerlo bien. Puedo realizar el diseño visual de un sitio web, pero le garantizo que se verá horrible y poco profesional..

Si no aprendes nada más sobre UX, te pido que recuerdes estas dos cosas..

  1. Conoce a tu usuario.
  2. Usted no es el usuario (en la mayoría de los casos).

Si no conoce su base de usuarios, sus hábitos y tendencias, y por qué hacen o no realizan ciertas acciones, no se puede esperar que diseñe una buena experiencia para ellos. Incluso si eres muy similar a tus usuarios, recuerda que solo eres una persona y eso no define las cualidades de tu base de usuarios como un todo. Conozca a sus usuarios y diseñe la experiencia con ellos en mente. El rol de un UXer es tener ese conocimiento, expandirlo constantemente y luego diseñar con esos usuarios en mente, creando experiencias increíbles que los deleitarán y cumplirán..

Veamos todos los pasos posibles que un UXer podría tomar para definir la UX de un producto. Estos pasos crean el proceso ideal. Estos pasos no siempre son posibles de completar en el mundo real, pero debemos cubrirlos todos para que esté consciente de cuándo puede omitir ciertos pasos y por qué. A veces no necesariamente se deja de lado un paso, pero se combina con otro paso, o se reemplaza con una combinación de experiencia, conocimiento e intuición..

Requerimientos

La recopilación de requisitos es uno de los primeros pasos en el diseño de la UX. Durante esta etapa necesitas hacer muchas preguntas. Es posible que muchas preguntas no puedan ser respondidas de inmediato, pero tenga en cuenta estas y sea persistente. Hay varios tipos de requisitos:

  1. Requisitos de negocio: Los objetivos y necesidades de otras partes de su empresa o lo que sea necesario para monetizar el producto. Desafortunadamente, esto a menudo triunfa sobre algunas cosas que tal vez quiera hacer. Es un mal necesario si su producto es algo más que un proyecto para el disfrute puro..
  2. Requerimientos de diseño: A veces puede haber consideraciones o necesidades especiales de diseño que deben cumplirse.
  3. Requisitos tecnológicos: Podría haber una necesidad tecnológica específica (plataforma, idioma, etc.) que deba considerar en el diseño. Cuales son tus limitaciones?
  4. Requisitos de usuario: ¿Para quien es este producto? ¿Quién es el público principal? ¿Hay una audiencia marginal y, si es así, quién es? ¿Cubre toda su base de usuarios o admite un subconjunto??

Bloque de construcción en Photodune

Estos requisitos serán la base que dará forma a su diseño. Sin estos tus diseños serán inútiles..

Análisis de usuario

Antes de que podamos diseñar para un usuario necesitamos conocer a nuestros usuarios. A veces tendrás mucho conocimiento preexistente sobre ellos. A veces solo sabrás un puñado de suposiciones sobre ellos. Si no tiene conocimiento de sus usuarios, su diseño es, en el mejor de los casos, una suposición educada. El análisis de usuarios es necesario para comprender las necesidades y las propensiones de los usuarios..


Pequeños usuarios en Photodune

Deberá hacer las siguientes preguntas como mínimo para comprender su base de usuarios:

  1. Para quien es esto? Demografía? ¿Le gusta disgustos? ¿Aficiones? Ocupación?
  2. Qué requisitos especiales ¿representan ellos? ¿Presentan un problema particular que necesitas resolver? ¿Se ajustan a una necesidad empresarial particular??
  3. Qué modelos mentales de la base de usuarios necesitas considerar? ¿Varían significativamente dentro de los subconjuntos??
  4. Cuándo, por qué, cómo ¿Los usuarios usarían este producto??
  5. Qué preocupaciones de accesibilidad necesitas incluir en el diseño?

Análisis de tareas

Una vez que hayamos completado nuestro análisis de usuarios, debemos pasar al análisis de tareas. ¿Cuál es la acción principal que deben realizar los usuarios?? Puede haber muchas cosas que alguien puede hacer en su sitio o aplicación, pero siempre hay una tarea principal. Debe averiguar qué es esa tarea y optimizar el UX para esa tarea para la base de usuarios en particular para la cual está destinado. Todavía no hemos llegado a la etapa de diseño, pero ahora sabemos lo que estaremos diseñando y para quién lo estamos diseñando..


Notas recordatorias sobre la fotoduna

También necesitamos determinar cualquier tarea secundaria. Hay muy pocos sitios / aplicaciones donde los usuarios solo pueden hacer una cosa; A menudo hay varias tareas relacionadas a realizar. Alcance todos estos para conocer la amplitud de lo que está diseñando hacia.

Otras cosas a resolver en el análisis de tareas:

  • ¿Qué tipo de ayuda / preguntas frecuentes necesitas??
  • Qué estados de error son necesarios?
  • ¿Cuáles son los casos marginales que sus usuarios podrían presentar??
  • ¿Existen varios métodos que sus usuarios podrían intentar realizar para realizar una tarea singular??

Asignación de funciones

La asignación de funciones es determinar qué necesita para manejar todas las funciones que usted determinó que deben suceder. Esto ocurre en varios niveles..

  • Tienes múltiples sistemas y / o servidores? ¿Cuáles manejarán mejor una función?.
  • ¿Qué tiene que pasar en el back-end vs. el front-end?
  • Cual páginas son los más adecuados para manejar una función particular? (La clasificación de tarjetas funciona muy bien aquí).
  • Que es automatizado (manejado por la computadora) vs. lo que es manual (controlado / manejado por el usuario)?

Tenedor, cuchara y cuchillo en Photodune.

Las respuestas a estas preguntas pueden influir dramáticamente en la eficiencia y la facilidad de uso de su producto..

Dibujando

Bosquejo. Mucho. Es rapido Es barato. Es efectivo.

Dibujar saca muchas ideas de tu cabeza y en papel rápidamente. Ayuda a dar forma a las buenas ideas y eliminar las malas. Puedes iterar en bocetos muy rápidamente. La inversión es baja para el retorno..


Casa de dibujo en photodune

La creatividad también es clave en este paso. Hacer algunas cosas extravagantes, fuera de la pared. Puede que no funcionen, pero podrían estimular otra idea. Intente variar sus bocetos significativamente para ver hasta dónde puede estirar una idea.

Lápiz / Lápiz + Papel = Un banco desde el cual comenzar a definir realmente sus diseños.

Wireframes de nivel medio

Ahora debes tener al menos una idea de a dónde quieres que vaya tu diseño. El primer conjunto de wireframes debería ser una iteración en sus bocetos y comenzar a mostrar más definición. La arquitectura de la información debería comenzar a tener lugar. Aquí es donde las cosas van desde un conjunto de conceptos y piezas de información poco conectados a una documentación más coherente de cómo se ve y funciona el producto..

Prototipos

Hay muchos prototipos diferentes que puedes hacer. Estos pueden ir desde un PDF en el que se puede hacer clic muy simple hasta un sitio web HTML / CSS que funciona casi completamente. Realmente depende de lo que necesite para su proyecto en cuanto a lo lejos que vaya con él. Hay un montón de herramientas por ahí para hacer que tus prototipos se desarrollen muy rápido. Una pequeña muestra incluye:

  • Adobe Edge Tools
  • Omnigraffle
  • Adobe Fireworks
  • Fundación
  • Oreja
  • Adobe Flash
  • Cualquier editor de texto (iA Writer es bastante bueno)
  • Axure
  • me levanto

Descubra la herramienta que se adapta a su flujo de trabajo y base de conocimientos para descubrir en qué puede hacer prototipos de manera rápida y eficaz. Los prototipos no deben tomar mucho tiempo, pero deben comunicar de manera efectiva su diseño e interacciones.

Los prototipos ayudan a descubrir dónde está la rareza en la interacción y cómo se siente cuando el producto está realmente en movimiento. Puede ayudar a descubrir algunas cosas que los wireframes estáticos no pueden descubrir completamente.

Wireframes de alta fidelidad

Aquí es donde luego regresas y comienzas a hacer los wireframes de alta fidelidad. Añade toda la definición que necesites. Cubra todos los detalles sobre el diseño y la interacción que pueda. Cualquier cosa que deje abierta a la interpretación puede tomarse fácilmente de la manera opuesta a la que usted desea. No asumas nada.

Una mejor calidad visual puede o no ser necesaria. La mayoría de las veces, esto debería ser atendido en la fase de diseño visual. Descubrí que a menudo es mejor recurrir a más elementos visuales de estructura alámbrica para evitar confusiones con los colores finales y las especificaciones de diseño visual. Sin embargo, sí uso el color si está relacionado con la funcionalidad (por ejemplo, rojo para los mensajes de error).

Pruebas de usabilidad

Este paso puede tener lugar donde lo necesite durante el proceso de diseño. A veces se ajusta al final y, a veces, más hacia el inicio de un proyecto. Sin embargo, aquí es donde obtiene comentarios reales de los usuarios. Pueden afirmar tus sospechas. Pueden poner sus pensamientos al revés. Esto es crucial, sin embargo, para conocer sus pensamientos y dónde están sus problemas..


Senior hombre usando la computadora en Photodune

Estás diseñando para el usuario. Esta información debe impulsar su diseño o rediseño para abordar los problemas que surgen durante esta prueba. Descontar o ignorar esta retroalimentación, sin verdaderos valores atípicos, es imprudente y es un pecado absoluto de UX..

Diseño visual

He visto que muchos procesos de UX consideran este punto en el que entregan su documentación sobre la cerca, se cruzan los dedos y esperan lo mejor. ¡Ese no debería ser el caso! Trabajo muy colaborativamente incluso después de que termine con la UX propiamente dicha..

Tus diseñadores visuales también deberían estar pensando en la UX. Si no lo son, yo diría que no están haciendo su trabajo completamente. Hacer que tus wireframes se vean mejor es genial, pero si tienen una idea que haga que la UX esté aún mejor dispuesta a escuchar e incorporar. A menudo, los diseñadores piensan lo suficientemente diferente como para generar grandes ideas y mejoras.

Desarrollo

Del mismo modo, deberías estar trabajando con desarrolladores. Es posible que esto no sea tan colaborativo, pero a menudo surgen problemas durante esta etapa en los que tendrá que ajustar la UX. Esto también le ayuda a comprender las limitaciones técnicas para proyectos futuros. Sus desarrolladores estarán mucho más felices de que obtenga este conocimiento en lugar de diseñar soluciones imposibles..


Código HTML en Photodune

Además, prueba tu UX contra el producto final. Aquí es donde regresa a los wireframes y se asegura de lo que diseñó a sus clientes. No es raro que algo no coincida y debe sentirse lo suficientemente cómodo con sus desarrolladores para señalar esos problemas. En última instancia, usted es responsable de la experiencia de sus usuarios, así que asegúrese de obtener el producto que diseñó..

Conclusión

Estos son solo los conceptos básicos para armar una gran experiencia de usuario. Es posible que no pueda realizar todos estos pasos, pero necesita estar al tanto de todos ellos para saber cuándo puede omitirlos..

Personalmente creo que UX no es una fórmula. Se diferencia proyecto por proyecto y se basa en una amalgama de conocimiento, experiencia, investigación e intuición. Nos adentraremos más en áreas específicas en futuros artículos, pero primero necesitamos una base de lo que hace un UXer en un día determinado en el trabajo. Los pasos descritos anteriormente lo ayudarán a saber cómo armar una gran experiencia de usuario para los productos que les encantarán a sus usuarios.