Publicado en

La claridad del diseño

Mantener la claridad del diseño es pintar la información necesaria de manera optina. Tu objetivo es asegurar que el usuario sepa que hacer con la información disponible para lograr sus fines.

shazam un buen exemplo de claridad de diseño

Para optimizar la claridad del diseño necesitas:

  • pintar las opciones que son estrictamente necesarias. Así limitarás las indecisiones, confusiones y frustraciones frente a las cuales el usuario podría enfrentarse.
  • implementar los patrones existantes que son aplicables a la funcionalidad o vista. Harás todo lo posible para maximizar la aprendibilidad.
  • implementar un UI que apoya las decisiones previas: al ordenar el contenido lógicamente y al aplicar una jerarquia enfatizando el elemento el más esencial.
  • Siempre guardar en mente el perfil tipico de usuario que utiliza la app (es familiarizado al uso de las tecnologías, en que contexto utiliza la app,…?)
Spread the love
Publicado en

Errores ¿cómo gestionarlos en UX copy y UI design?

Nuestro trabajo de diseñadores UX es evitar enseñar alertas de error a los usuarios porque causan frustración y casi siempre demuestran que existe algún tipo de falla en nuestro diseño o desarrollo.
Nuestro papel es asistir el usuario para que no encuentre estos errores.

Validación de un formulario

El ejemplo el más obvio es la validación linear (inline validation) de un formulario que indica, cuando un campo ha sido rellenado, si la información cumple con los criterios esperados a gracias al uso de una palomita verde o de una cruz roja acompañado su mensaje de error.
De tal manera, no esperamos que el usuario cliquea en el botón que se ubica al final del formulario para comunicarle si lo relleno de forma correcta o no.

muestra de validación linear

OJO personalmente hago una diferencia entre inline validation, y live validation o validación en caliente. Esa última consiste a validar lo que escribe un usuario mientras lo está escribiendo.

Lee más sobre la live validation, llamada inline validation en el articulo de baymard.com

Sugestiones a errores de redacción

Otro ejemplo sería de corregir el usuario al momento que realiza una acción al proponerle una serie de propuestas alternativas que se acercan lo más a lo que quiere.
La autosugestión (autosuggest) de un buscador permite corregir un error de ortografía. No esperamos que el usuario acabe de escribir para proponerle un vocabulario correcto.

De cualquier caso, proponemos un resultado al usuario y la posibilidad de corregir lo que parece ser un error. En caso de no tener resultado, facilitar al usuario la manera de seguir navegando.

Spread the love
Publicado en

Navegación

El concepto de navegación explicado por Mike Stern en una conferencia de Apple (WWDC 2017), es resumido bajo el concepto de wayfinding, tomando como analogía la señaletica de los aeropuertos. Guiar el usuario de lo más global a lo más preciso, permitiéndole cambiar de ruta considerando su ubicación actual, o salir. Siempre indicando al usuario:

  • dónde se encuentra
  • dónde puede ir
  • cómo salir

y dándole la posibilidad de regresar al punto anterior.

La preguntas que un usuario se hace y a las cuales tenemos que contestar son:

  • dónde estoy? (app bar, menu bar, título)
  • dónde puedo ir? (todos los botones de navegación)
  • qué encontraré cuando estaré? (los iconos ayudan a eso)
  • qué hay cerca? (inpage navegación, back)
  • cómo salgo? (back, tab)

Spread the love
Publicado en

Material Design ama a Sketch y lo comprueba con el plugin Material Theme Editor

Que sea para trabajar en nuevos productos, o darle un update a una app o website, aconsejo seriamente ocupar Material Design que desde luego ofrece el mejor UI kit y guía para una experiencia de usuario consistente y robusta (IOS, website y Android por supuesto).

Material Design ha evolucionado mucho estos últimos años, desarrollándose a misma velocidad que las multiples aplicaciones de diseño de wireframe de mediana y alta fidelidad, dejando así pasar el tiempo necesario para identificar cual de ellos (Sketch, Adobe XD, UX Pin, Figma, Framer,…) tenía más potencial (en términos técnicos, oferta comercial, comunidad de usuarios,…). MD eligió el ganador al poner el plugin Material Theme Editor disponible para Sketch.

El plugin permite elaborar más rapidamente que nunca un wireframe a partir de 4 modelos de diseño realizados con Material Design, en los cuales puedes aplicar los cambios necesarios para alinearlos al branding de la marca del producto en el cual trabajas, cambiando los colores a partir de la paleta de color de MD que se reflejará en todos los símbolos. Los cambios que realizarás en las formas, y en las fuentes se propagarán de igual manera a todos los símbolos y componentes de la librería.

Además de la paleta de colores de Material Design, el plugin Material Theme Editor incluye la integralidad de la librería de componentes (iconos, botones, cards,…) y permite compartir el trabajo directamente en MD Gallery para poner a disposición la última versión del trabajo a todo el equipo involucrado en el desarrollo de la app o del website.

Entendemos que eso no simplifica de mucho el proceso de trabajo, de gestión de proyecto, de entendimiento y consistencia del producto. Sin hablar que todo eso está disponible en 2 clicks:

  • 1 click simple: download plugin,
  • 1 doble click para abrir e instalar el plugin.

Todos los componentes con 100% personalizables.
El color por ejemplo. Al seleccionar uno, el editor deduce automaticamente las variantes. ¡Una chulada!


La libraría de Material design es totalmente personalizable
Inferfaz del plugin Material Theme Editor en Sketch

Spread the love