Artículos

Guía rápida de diseño de interfaz para NO diseñadores.

Aprender diseño visual lleva tiempo y práctica pero afortunadamente existen tips que pueden hacerlo más fácil y dan buenos resultados. Si no eres diseñador de interfaces pero te toca hacerlo en tu trabajo, abajo te dejo algunas recomendaciones que pueden servirte.

Alinea los elementos de la interfaz.

La desalineación de los elementos de una interfaz (imágenes, bloques de texto, videos, botones, etc) hace que una pantalla sea vea desorganizada y que las personas no sepan qué hacer.

Usa una cuadricula como referencia, la alineación de los objetos va a mejorar mucho el diseño y hacerlo más organizado visualmente.

Screen Shot 2017-09-01 at 11.51.57 AM
Fuente: https://developer.apple.com/design/tips/

Usa suficiente contraste.

Usa colores que brinden suficiente contraste en el fondo y el texto para no dificultar la vista. Fondos blancos y textos negros son la mejor opción. Evita el amarillo, verde y grises muy claros.

Screen Shot 2017-09-01 at 11.58.09 AM
Fuente: https://developer.apple.com/design/tips/

Menos es más.

Como lo dijo el Arquitecto Mies van der Rohe: menos es más, esto significa “reducir algo a lo mínimo, a los elementos esenciales que componen la cosa. Todo lo demás disturba.”

Trata de ser minimalista a la hora de diseñar, los sitios simples con poca saturación de colores, imágenes, animaciones, etc. se ven actuales. Si le sumas una buena alineación a este punto el producto va a ser un diseño más organizado.

simple design.jpg
Fuente: Pinterest.

Primero lo importante.

Muestra el contenido importante primero y hazlo resaltar, la función modular del sistema deberá estar a la mano siempre. A esto se le llama jerarquía visual y es importante en diseño web para priorizar el contenido mediante el diseño.

Screen Shot 2017-09-01 at 12.11.41 PM
Fuente: https://developer.apple.com/design/tips/

Tamaño del texto e interlineado.

Usa tamaños de textos que sean legibles, aumenta el tamaño del texto para que sea fácil de leer y usa interlineados que le den espacio al texto.

Screen Shot 2017-09-01 at 12.16.33 PM
Fuente: https://developer.apple.com/design/tips/
Screen Shot 2017-09-01 at 12.18.11 PM
Fuente: https://developer.apple.com/design/tips/

Usa paletas de colores ya definidas.

El buen manejo del color es un arte que no todos dominamos. En este caso, busca paletas de color ya definidas o puedes ayudarte de Adobe KulerColor Tool de Material Design.

Screen Shot 2017-09-01 at 12.35.08 PM

Screen Shot 2017-09-01 at 12.36.27 PM

Aprovecha las convenciones visuales.

Usar patrones que los usuarios identifican y saben usar es la manera de facilitar el uso de una aplicación. Las convenciones son eso, patrones aprendidos por los usuarios. Por ejemplo cuando al dar click al logo en una web te dirige al Home, el color azul de un link, el ícono de carrito para la cesta de compra en un e-commerce, el hover de un botón, etc.

Aprovecha los conocimientos de los usuarios y no trates de innovar cuando no es necesario. Los usuarios buscan familiaridad en los sitios que usan.

Sigue las guías de diseño de Apple o Google.

Google Material Design y Apple Human Interface Guidelines son guías donde se establecen las mejores prácticas de diseño de interfaces y experiencias, son súper útiles y tienen recursos gráficos como íconos, colores, guías de diseño, etc.

 

Con esta sencilla guía notarás cambios en las interfaces que diseñes pero sé persistente, aprender a diseñar lleva práctica y tiempo.

¿Qué te pareció el artículo? ¿Lo encontraste útil? Si tienes dudas o comentarios no dudes en compartirlo.

Fuentes:

  1. https://developer.apple.com/design/tips/

5 Blogs de UX en español que tienes que seguir.

En esta entrada me gustaría compartirles cinco blogs que considero tienen excelente contenido acerca de diseño de experiencia de usuario y temas similares. Si bien en Inglés existen gran cantidad de sitios dedicados al diseño UX como foros, blogs, páginas de internet, escuelas en línea, etcétera en español el escenario es muy diferente.

Sin embargo aunque pocos, sí existen buenos blogs en español. A continuación enlisto cinco que considero difunden contenido de calidad para que los que estamos aprendiendo tengamos información en nuestro idioma.

Torres Burriel Estudio

En este blog producto del estudio de Daniel Torres Burriel consultor de usabilidad y experiencia de usuario, diariamente se publican artículos que bien pueden hablar de investigación de usuarios, mejores prácticas, diseño de interfaz, analytics, arquitectura de información, entre otros. Colaboran varias personas en escribirlo y definitivamente es una fantástica referencia para los diseñadores y profesionales del ámbito.

Screen Shot 2017-08-30 at 5.30.30 PM

 

No solo Usabilidad

Es una revista electrónica sobre personas, diseño y tecnología de carácter multidisciplinar, que pretende servir de herramienta para la difusión, divulgación e intercambio de conocimiento entre profesionales e investigadores. Cualquier profesional o investigador que quiera colaborar puede enviar sus trabajos para que sean publicados en la revista cumpliendo con algunas normas.

Algunos de los temas de los que se comparten son: Interacción Persona-Ordenador, Experiencia del Usuario, Usabilidad, Accesibilidad, Diseño de Interacción, Arquitectura de la Información, Diseño web mediante estándares, Web Semántica y Web 2.0, Recuperación de Información y Minería de Datos, Visualización de Información entre otros.

Screen Shot 2017-08-30 at 5.32.39 PM

 

Intuitivamente

Es un blog en donde su autora Andrea Cantú especialista en diseño de usuario para productos digitales, comparte recursos que ayudan a el aprendizaje de nuevos diseñadores mediante artículos teóricos, cursos, tips prácticos, entrevistas a expertos, entre otros.

Andrea escribe acerca de diseño, metodologías, investigación de usuarios, arquitectura de información, entro otros temas y además comparte guías rápidas para quien esté interesado en desempeñarse como diseñador de UX o investigador de usuarios. Excelente recurso para los que quieren desenvolverse en diseño UX.

Screen Shot 2017-08-30 at 5.33.31 PM


Uxuarios

Es una comunidad latinoamericana que comparte sus conocimientos y aprendizajes sobre experiencia de usuario. Sus contenidos se enfocan al nivel principiante-intermedio para diseñadores, desarrolladores y marketers y buscan inspirar a la realización de excelentes sitios web. Sin embargo, cualquiera interesado en la realización de sitios web es bienvenido.

Al ser una comunidad abierta aceptan las colaboraciones de profesionales que quieran contribuir escribiendo sobre su especialidad.

Screen Shot 2017-08-30 at 5.35.00 PM

 

Accesibilidad en la Web

Es un blog distinto a los otros enlistados por ser sobre una temática específica. Como su nombre lo dice en este espacio se comparte todo tipo de información sobre accesibilidad en la web, por ejemplo errores de accesibilidad, ejemplos de páginas inaccesibles, noticias, software, hardware, ayudas técnicas, tecnologías de apoyo, consejos, pautas y guías de accesibilidad, etcétera.

 

Screen Shot 2017-08-30 at 5.36.47 PM

 

¿Qué te pareció el artículo? ¿Conoces otros blogs acerca de UX? Si tienes dudas o comentarios no dudes en compartirlos.

Freebie: Kit de elementos UI para móvil en Sketch.

La entrada de hoy es para compartir con ustedes un librería con componentes para interfaces móviles para Sketch. Esta colección fue creada por mi y está libre de derechos para usarse en cualquier sitio. ¡Disfrútenla!

Descárgalo aquí.

Si te gustó este freebie ¡compártelo!

¿El diseño UX es para ti?

Cada profesión requiere el uso y desarrollo de habilidades, y demanda en algún grado un tipo de personalidad. El diseño de experiencia de usuario es una profesión compuesta por varias disciplinas como psicología, negocios, diseño, investigación, entre otras. Y los diseñadores de UX requieren de empatía y objetividad entre algunos otros rasgos de personalidad.

Siendo así entonces ¿cómo sé si el diseño de experiencia de usuario es para mi? A continuación enlisto una serie de habilidades y características que considero un diseñador debe tener para realizar una buena práctica.

El diseñador de UX soluciona problemas.

Por naturaleza, aunque no seamos conscientes de ello todos somos solucionadores de problemas, a lo largo de la vida se nos presentan situaciones que intentamos resolver de la mejor manera. El objetivo para el diseñador de UX será convertir esto en un hábito por medio del cual seamos capaces de resolver diferentes tipos de problemas.

¿Cómo desarrollar esta habilidad?

  • Implementa metodologías y sigue mejores prácticas.
  • Trata de simplificar grandes problemas.
  • Identifica diferentes maneras de resolver un problema (brainstorming).
  • Detecta cómo evaluar o medir una solución.

El diseñador de UX tiene facilidad para aprender.

En una práctica tan amplia como diseño UX en el que se involucran disciplinas y diferentes habilidades, el aprendizaje continuo resulta de mucha importancia.

¿Cómo desarrollar esta habilidad?

  • Toma cursos regularmente.
  • Asiste a seminarios o reuniones donde el tema sea UX.
  • Platica con otros diseñadores.
  • Lee.

El diseñador de UX es buen comunicador.

Una de las habilidades esenciales es poder comunicar adecuadamente las ideas o argumentos que se tienen. Un diseñador de UX deberá tener la capacidad de dirigirse a usuarios y empatizar con ellos para que brinden retroalimentación de la interacción con el sistema. También debe preocuparse por establecer comunicación clara con miembros del equipo técnico como ingenieros y managers; así cómo brindar argumentos a un stakeholder de las decisiones tomadas en el desarrollo de un producto.

¿Cómo desarrollar esta habilidad?

  • Escucha e identifica al receptor del mensaje, no todos comprenderán lenguaje técnico.
  • Identifica semejanzas con la otra persona y haz rapport para establecer un puente de comunicación.
  • Pregunta.
  • Sé receptivo y abierto.
  • Sé genuino.

El diseñador de UX es bueno escuchando.

Parte esencial de saber comunicar es saber escuchar. Un diseñador de UX presta atención a lo que la gente intenta comunicar de manera verbal y no verbal. Es importante mantenerse receptivo y atento a lo que los usuarios dicen de nuestro producto, lo que los miembros del equipo expresan acerca del stack técnico, limitaciones y otra información relevante del proyecto; así cómo los stakeholders y las decisiones de negocios y diseño que se toman.

¿Cómo desarrollar esta habilidad?

  • Sé respetuoso.
  • No interrumpas mientras otros hablan.
  • No emitas juicios inmediatamente.
  • Pide a los demás que elaboren mejor lo que dicen, pregunta todas tus dudas.

El diseñador de UX es analítico.

Un buen diseñador respaldará sus decisiones de diseño en mejores prácticas y en información cuantitativa y cualitativa producto de investigaciones y evaluaciones.
El diseño del producto representará el análisis exhaustivo de la información recabada.

¿Cómo desarrollar esta habilidad?

  • Usa mejores prácticas.
  • Compara la solución con los datos.
  • Haz a un lado tus preferencias personales.
  • Piensa en cómo la información afecta el diseño.

El diseñador de UX presta mucha atención al detalle.

Dice el dicho que “el diablo está en los detalles” y en diseño UX es cierto. Es de suma importancia prestar atención a los pequeños detalles que pueden hacer que el producto sea mejor o peor, por ejemplo durante la investigación de usuarios, pruebas de usabilidad e incluso en el diseño de visuales. Un detalle como una micro interacción puede hacer la diferencia para un producto.

¿Cómo desarrollar esta habilidad?

  • Haz revisiones frecuentes, es mejor si otros miembros del equipo colaboran.
  • Itera la idea.
  • Divide una tarea grande en pequeñas tareas.
  • Haz listas de pendientes.
  • Quita las distracciones.

El diseñador de UX es empático.

La empatía la defino como “ponerse en los zapatos del otro” . Es mas acertado y ofrece soluciones más puntuales cuando somos capaces de sentir lo que otro siente y piensa al usar un producto. Además, el diseñador será el defensor del usuario y sus puntos de vista, que muchas veces son pasados por alto por el resto del equipo.

¿Cómo desarrollar esta habilidad?

  • Escucha atentamente.
  • Sé receptivo.
  • Trata de establecer conversaciones profundas.
  • No juzgues creencias u opiniones que no compartas con las personas.
  • Valida sus puntos de vista.

El diseñador de UX es un ‘big picture thinker’.

Ser un “big picture thinker” implica entender holisticamente el desarrollo de un producto tomando en cuenta la requerimientos de negocio, necesidades de los usuarios, estrategia comercial, etc. Al mismo tiempo se necesita atención al detalle y disposición para trabajar con diferentes miembros del equipo e incluso con diferentes departamentos. Un “big picture thinker” no solo se limita a ejercer el trabajo de diseño.

¿Cómo desarrollar esta habilidad?

  • Trabaja en proyectos de temáticas diferentes.
  • Sé abierto a nuevas experiencias.
  • Trata de ganar perspectivas diferentes a la tuya hablando con personas.
  • Aprende algo nuevo.

¿Qué te pareció el artículo? ¿Crees que el diseño UX es para ti? Si tienes dudas o comentarios no dudes en compartirlos.

Fuentes:

  1. http://uxdesignmastery.com/is-ux-design-a-good-fit-for-you-8-personality-traits-you-must-have/

10 libros esenciales para diseñadores de UX.

Hay cientos de libros relacionados con experiencia de usuario lo cual puede dificultar encontrar lecturas que ayuden a los diseñadores a aprender o a fortalecer los conocimientos de UX.

La mayoría de libros que se consideran como esenciales en el Diseño UX están en Inglés ya que han sido producidos por las figuras más importantes en usabilidad, cognición etc.
A continuación enlisto los libros que yo considero que ayudan a mejorar el conocimiento en Usabilidad, Arquitectura de Información, Diseño de Interacción, Investigación de Usuarios, etc.

  1. Don’t Make me Think de Steve Krug
    dont make me thing
  2. The Design of Everyday Things de Don Norman
    the design of everyday things
  3. The Elements of User Experience: User-Centered Design for the Web
    the elements of ux
  4. 100 Things Every Designer Needs to Know About People de Susan M. Weinschenk
    1000 things every designer
  5. A Practical Guide to Information Architecture de Donna Spencer

    a practical guide to ai

  6. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics de William Albert de Thomas Tullis
    measuring UX
  7. Emotional Design: Why We Love (or Hate) Everyday Things de Don Norman
    emotional design
  8. Mental Models: Aligning Design Strategy with Human Behavior de Indi Young
    mental models cover
  9. A Project Guide to UX Design: For user experience designers in the field or in the making de Russ Unger & Carolyn Chandler
    a project guide to UX
  10. Simple and Usable Web, Mobile, and Interaction Design de Giles Colborne

    simple and usable

 

Los anteriores cubren la teoría general del Diseño UX. También considero importante conocer algo acerca de metodologías y marcos de desarrollo de proyectos por eso les recomiendo:

11. Lean UX: Applying Lean Principles to Improve User Experience – Jeff Gothelf with Josh Seiden

lean ux

¿Qué te pareció el artículo? ¿Lo encontraste útil? Si tienes dudas o comentarios no dudes en compartirlo.

A quien seguir en UX: Dan Ariely

Hoy les quiero compartir a un experto en economía de la conducta que considero una excelente referencia para UX.

Dan Ariely es un catedrático en psicología y economía conductual de la Universidad de Duke y fundador del centro de retrospectiva avanzada. También posee un doctorado y un master en psicología cognitiva de la Universidad de Carolina del Norte y un doctorado en Negocios en la Universidad de Duke.

Tras obtener sus doctorados trabajó en el Instituto Tecnológico de Massachusetts de 1998 a 2008. Posteriormente, volvió a Duke como profesor de psicología del comportamiento económico. Además de sus escritos académicos ha publicado los libros Irrationally Yours, Predictably Irrational, The Upside of Irrationality and The Honest Truth About Dishonesty.

En el 2015 lanzó (Dis)Honesty, una película documental que explora cómo y por qué la gente miente. La película recopila experimentos conductuales que miden nuestra propensión a mentir – a veces incluso sin saberlo. En el filme, Dan examina las razones detrás de nuestro comportamiento y las implicaciones de nuestra deshonestidad.

Los estudios de Dan se centran en la irracionalidad de los actos de las personas, y cómo esta afecta nuestras decisiones. Sus investigaciones pueden ser valiosas en Diseño UX como referencia de un conocimiento general del comportamiento inconsciente de las personas.

El documental lo pueden encontrar en Netflix y por lo pronto les dejo el trailer.

 

 

¿Qué te pareció el artículo? ¿Te pareció interesante conocer a Dan? Si tienes dudas o comentarios no dudes en compartirlos.

Fuentes:

  1. http://danariely.com/
  2. https://es.wikipedia.org/wiki/Dan_Ariely
  3. http://www.imdb.com/title/tt2630898/plotsummary?ref_=tt_ov_pl

¿Qué los son modelos mentales?

Como ya lo he compartido anteriormente el diseño de experiencia de usuario está compuesto de principios de diversas disciplinas entre las que destacan ciertos fundamentos psicológicos relacionados con la cognición.

Al diseñar un producto es importante reunir información acerca del usuario ya que entre más aproximación tengamos a su modelo mental, este percibirá el sistema como predecible y usable, debido a que encuentra patrones similares a sistemas anteriormente vistos o usados

¿Qué es un modelo mental?

“Un modelo mental es la representación interna de la realidad externa que vive un individuo.”

Son concepciones generales, que nos ayudan a interpretar el mundo y dirigen nuestras acciones y comportamientos. Adaptando nuestra conducta según las experiencias que acumulemos y a nuestra adaptabilidad a las circunstancias, con estos las personas podemos lograr una mayor eficacia para hacer frente a lo que nos rodea.

Los modelos mentales tienen las siguientes características:

  1. Son personales y por lo tanto subjetivos, cada persona lo construye según sus propias experiencias, contexto, habilidades, etc. Incluso la genética juega un papel influyente en el desarrollo de los modelos mentales.
  2. No son estáticos. Los modelos mentales se pueden ampliar, e incluso especializarse según el contexto. También pueden enlazarse entre sí para crecer y reforzar el conocimiento en areas específicas.
  3. Están basados en las experiencias personales únicas de cada individuo, los modelos mentales que hemos desarrollado son condicionados por los lugares donde hemos vivido, con quienes hemos convivido, etc.
  4. Son exteriorizados de diferentes maneras según los canales de comunicación que tenemos mejor desarrollados. Cada persona comunica su pensar y sentir en diferente manera.

¿Por qué a los diseñadores nos deben importar los modelos mentales?

Diseñar implica comprender al cliente, sus objetivos y su modelo mental; así como comprender a los usuarios, sus objetivos, necesidades y modelos mentales. A partir de esta adquisición de conocimiento, transformamos nuestros propios modelos mentales, con el fin de reducir la brecha entre nuestros modelos y los de los usuarios para aproximarnos lo más posible a la solución mas adecuada para ellos.

La comprensión del modelo mental del usuario puede ayudar a dar sentido a los problemas de usabilidad en el diseño. Cuando la gente comete errores en el sistema, es frecuentemente porque se han formado un modelo mental erróneo acerca de este.

En la creación del producto existen dos estrategias para con los usuarios, la primera la considero más adecuada para productos nuevos o para solucionar problemas puntuales de usabilidad y la segunda cuando existe un desajuste en los modelos mentales del sistema y usuario:

  1. Hacer que el sistema se ajuste a los modelos mentales de los usuarios. Este es el enfoque generalmente recomendado para solucionar los problemas de Arquitectura de Información. Si la gente busca algo en el lugar equivocado, entonces deberíamos moverla al lugar donde lo buscan. El card sorting es una forma útil de descubrir el modelo mental de un usuario en un espacio de información para diseñar su navegación.
  2. Mejora los modelos mentales de los usuarios para que comprendan mejor el sistema. se logra explicando mejor las cosas y haciendo que las etiquetas sean más claras para que la interfaz de usuario sea más transparente (aunque el sistema subyacente no cambie).

Si quieres ahondar en el tema, recomiendo el libro Mental Models: Aligning Design Strategy with Human Behavior de Indi Young.

Y te comparto la siguiente caricatura que ilustra cómo afecta al desarrollo de un producto los modelos mentales de la gente.

mental_models_v61

¿Qué te pareció el artículo? ¿Lo encontraste útil? Si tienes dudas o comentarios no dudes en compartirlos.

Fuentes:

  1. https://emowe.com/modelos-mentales/
  2. http://www.nosolousabilidad.com/manual/2_2.htm
  3. http://www.nosolousabilidad.com/manual/2_3.htm
  4. https://www.nngroup.com/articles/mental-models/
  5. https://www.smashingmagazine.com/2012/04/mental-model-diagrams-cartoon/