Tell us about…

Please complete your full name.
Please enter your email address.
Please tell us where you live.
Please enter your company name.
Please tell us about your business.
Please select at least 1 category.
Please write a description of the project.
Drop us a line hola@moka.tv

Diseño

Cinco principios para un mejor diseño

Cuando decidimos comenzar a escribir este blog, uno de nuestros objetivos fue el de empezar a pasar en limpio nuestro know-how y recursos de la manera más clara posible (sin hacernos demasiados problemas en «revelar el truco»), con el fin de que no solo sean nuestros colegas o pares quienes nos lean, sino también nuestros propios clientes. Esto es porque creemos que este conocimiento también los beneficia a comprender mejor a sus usuarios o audiencias, y por ende, aprender a hablarles o presentar sus productos o contenidos de la mejor manera posible.

En esta oportunidad no vamos a hablar sobre criterios estéticos, ya que queremos mencionar algunos principios esenciales que siempre ponemos en práctica a la hora de diseñar sitios web y aplicaciones o herramientas digitales, y que nos ayudan a obtener un mejor resultado.

A continuación listamos algunos de los principios que más nos resultan de utilidad (acompañados de capturas de algunas películas que más nos gustan):

Modelos mentales (Mental models)

Moka-Matrix

Las personas entienden e interactúan con otros sistemas y entornos basándose en representaciones mentales que desarrollan a través de su experiencia. Cuando el resultado de su modelo de mundo coincide con el mundo real, su mapa mental es correcto. Cuando no coincide, su mapa es erróneo o está incompleto.

En relación al diseño de interfaces, existen dos tipos de mapas o modelos: uno es el modelo del sistema (sobre cómo funciona), y otro es el modelo de interacción (cómo la gente interactúa con el diseño).

Este principio se relaciona en la manera que nosotros diseñamos “para” los usuarios. Nuestra tarea como diseñadores es la de empatar ambos modelos mentales (diseño e interacción), creando una interfaz que permita la interacción entre ambos modelos. Este es, quizás, uno de los principios más importantes a la hora de idear y diseñar sitios web, aplicaciones o cualquier tipo de productos, ya que su éxito dependerá de que tanto estos dos modelos sean compatibles.

Ejemplo: Cuando diseñamos interfaces gráficas destinadas a usuarios con un rango de edad intermedia o elevada (40-65 años), y poca experiencia con el uso de Internet, uno de nuestros objetivos es destacar los botones o call-to-actions del resto del contenido, tomando como referencias aspectos del mundo real – leer Skeuomorphism(volumen, sombras, relieve, etc.) y comportamientos (presionado, activo y apagado) que claramente los identifiquen como tal.

Reconocimiento por sobre recordamiento (Recognition over Recall)

Moka-Clockwork-Orange

Nuestra memoria para reconocer cosas es mejor que nuestra memoria para recordar cosas.

Reconocer algo es más fácil que tener que recordarlo. El reconocimiento es simplemente la memoria de nuestros sentidos (vista, sonido, olor, tacto) sobre algo que fue experimentado anteriormente, y no necesariamente incluye recuerdos sobre su origen, contexto o cualquier ejercicio asociativo de la memoria. Por otro lado, recordar algo implica haberlo aprendido, requiriendo mayor esfuerzo y memorización, práctica y aplicación.

En un plano superior, nuestras propias decisiones y acciones son afectadas por medio del reconocimiento. Siempre preferimos una solución que nos es familiar frente a un problema, aún cuando una nueva solución (pero distinta) podría ser mejor. Son atajos que nuestro cerebro utiliza a la hora de tomar una decisión.

¿Cómo podemos hacer uso de este recurso? Diseñando interfaces consistentes y estableciendo una estructura de navegación uniforme, aplicando un mismo código o lógica para realizar determinadas acciones, teniendo en cuenta el aspecto visual y la ubicación de los botones, menús o encabezados, con el propósito de facilitarle la navegación a los usuarios.

Atractividad-Usabilidad (Aesthetic-Usability effect)

Moka-Prometheus

Los diseños atractivos son percibidos como más fáciles de usar que aquellos diseños menos atractivos.

Los diseños atractivos parecen más fáciles de utilizar y tienen mayor probabilidad de ser usados, aún cuando realmente sean o no más fáciles de usar. Estos diseños atractivos o estéticos generan mayores actitudes positivas en las personas que aquellos diseños no atractivos, haciendo que las personas sean más tolerantes ante cualquier problema o error. Un fenómeno similar ocurre con las personas y su grado de atractividad (principio similar llamado «Sesgo de atractividad»).

Es común para las personas apegarse a ciertos objetos que hayan producido actitudes positivas en sus vidas (como ponerle nombre a sus autos o computadoras). Sin embargo, es poco común que esto mismo suceda con objetos o diseños que provoquen actitudes negativas. Esto genera una brecha mayor con sus usuarios, haciendo que solo vean a esos productos como simples objetos, sin valor alguno.

Ejemplo: Hubo una época en donde Twitter fallaba cada dos por tres y veíamos la famosa pantalla de la ballena, bautizada Fail Whale. A pesar de que el servicio tenía problemas constantemente, fue gracias a este pequeño (pero bien diseñado) detalle, que las reacciones de las personas se veían influenciadas de forma positiva por este simpático personaje, minimizando el problema y haciendo que no resultara tan graves después de todo. Si en cambio, el problema se hubiese mostrado con una pantalla de advertencia en rojo, las reacciones habrían sido diferentes.

Costo-Beneficio (Cost-Benefit)

Moka-Fight-Club

Una actividad será desarrollada sólo si su beneficio es igual o superior a su costo.

Este principio es usado para conocer el retorno (muchas veces financiero) asociado a determinadas acciones y operaciones, pero también puede ser aplicado para determinar la calidad del diseño desde la perspectiva del usuario. Si el costo asociado a interactuar con un diseño supera los beneficios ofrecidos, el diseño es pobre. Si sus beneficios superan el costo, el diseño es bueno.

La calidad de todo diseño puede ser medida usando este principio: ¿Cuántos clicks se requieren para comprar algo online a través de Mercado Libre? ¿Cuánto tiempo necesitás estar en el sitio de la AFIP para encontrar la información que buscabas? Usando este mismo artículo como ejemplo: ¿Cuánta lectura es demasiada para llegar a una conclusión en el mensaje? La respuesta a estas preguntas dependen de cual sea el beneficio de estas acciones.

Ejemplo: Pensemos en un concurso a través de nuestra web en donde se requiera que los participantes se saquen una foto y la compartan para poder ganar. Si el premio en cuestión no es lo suficientemente atractivo o no tiene el valor suficiente para realizar todo el «esfuerzo» que implica sacarse una foto o seleccionarla de un archivo y subirla, nuestros usuarios no tendrán interés en participar.

Costo Flexibilidad-Usabilidad (Flexibility-Usability tradeoff)

Moka-2001-Odyssey

A medida que aumenta la flexibilidad de un sistema, su usabilidad disminuye.

Un diseño flexible permite hacer más cosas que un diseño especializado, pero de forma ineficiente. Los diseños flexibles son, por definición, más complejos y resultan más difíciles de usar.

Es un error común pensar que los diseños deberían ser siempre lo más flexibles posible. Sin embargo, esta flexibilidad implica un aumento de costos en términos de complejidad, usabilidad, tiempo y dinero. Por otro lado, quedará en nosotros saber anticipar los posibles usos que le darán los usuarios a nuestro producto, para poder determinar en qué medida tendremos que enfocar las funcionalidades en nuestro diseño.

Ejemplo: Instagram, inicialmente, era una aplicación que permitía a sus usuario hacer de todo, desde check-ins hasta publicar fotos. Quizás, si sus creadores no hubiesen rediseñado la aplicación limitando sus funcionalidades y haciendo foco solamente en las fotos, no hubiese tenido el éxito actual.

Estos principios están sacados del libro “Universal Principles of Design”, lectura que recomendamos a todos aquellos colegas diseñadores (y no diseñadores) que les interesen conocer nuevos recursos con aplicación práctica inmediata, pero que tienen un trasfondo psicológico mucho más profundo y significativo, digno de conocer.

En un próximo artículo, siguiendo con esta línea, vamos a hablar sobre como hacer para sumar valor en nuestros productos utilizando principios de diseño y también psicológicos (Horror Vacui, Veblen, etc.).