#marcoteorico

28/03/2019  

Diseño de Interacción

The Design of everyday things - Don Norman

Principios de diseño de Don Norman

Visibilidad

Se puede ver el estado del producto y sus posibles acciones, los problemas empiezan cuando no es notorio cómo se usa el producto.

Esconder ciertas funciones dentro de la interfaz puede ser ventajoso, algunas se mantienen invisibles hasta que son necesarias; solo se muestra lo necesario y contiene  un grupo similar de opciones.

Feedback

Que está haciendo ahora y que acción acaba de realizar.

El feedback debe ser en la mayoría de los casos inmediatamente seguido de la acción del usuario. El sonido también puede ser parte del feedback como los estados del botón.

Affordance

Son las propiedades del objeto que te da pista de su operación. Es una clave visual que puede ser percibida de su funcionamiento.

Mapping

Es la relación de los controles y el efecto que tiene en el producto. El arreglo espacial de la interfaz puede ser un factor a considerar, y trata de no depender de las etiquetas para explicar un diseño.

Restricciones

Restringe el tipo de interacciones que se puede tener la interfaz, esto ayuda a bajar la probabilidad de errores y concentrar la atención de un usuario en una tarea.

Es común verlo implementado en menús de programas de creación de contenido.

Consistencia

Es diseñar interfaces para que tengan operaciones y elementos similares para completar una tarea parecida.

Los sistemas son usables y más fáciles de aprender cuando los conceptos se expresan de maneras similares.

Esto a su vez ocasiona que el usuario pueda transferir conocimiento previo de otros contextos, disminuyendo la curva de aprendizaje para poder concentrarse en su objetivo.

Las convenciones en el diseño es una manera de alcanzar rápido y eficientemente este resultado.

Existen cuatro tipo de consistencias;

Estéticas: El estilo y la apariencia se repite para mejorar el reconocimiento, comunica una relación y un tono emocional. Mercedes Benz constantemente muestra su logo en sus vehículos, generando reconocimiento,consistencia y sentido de pertenencia. Se asocia a calidad, prestigio y confianza.

Funcional: Es la consistencia de significado y funcionalidad, mejora la usabilidad y el aprendizaje, ya que permite a los usuarios usar modelos existentes para entender cómo funciona un diseño. Los símbolos de play, delantera y stop se introdujeron en la videocasetera pero ahora se usan en todos los dispositivos de audio y video, siendo estos ya una convención de diseño.

Interno: Es la consistencia de elementos dentro de un mismo sistema, ayuda a crear confianza, orientación en el uso del mismo, y comunica que el sistema fue creado como un todo y no por piezas separadas.El sistema de carreteras, y su señalética está pensado para un nivel nacional y es consistente a lo largo del país.

Externo:Consistente con otros elementos del entorno. Extiende los beneficios del interno sobre múltiples sistemas independientes. Es difícil de lograr pues se debe de aplicar el mismo estándar y lenguaje de diseño a través de distintos dispositivos y sistemas. Un ejemplo sería material design y el lenguaje de diseño de apple.

Emotional Design: Why We Love (or Hate) Everyday Things - Don Norman

El diseño de un producto debe contar tres niveles de procesos cognitivos y emocionales, esto provee una estructura  para modelar las respuestas de un usuario a un producto y un contexto racional para las intuiciones de los diseñadores.

Estos son los tres niveles de diseño según Don Norman:

Visceral

Es el nivel inmediato de procesamiento, reaccionamos al aspecto de un producto antes de que una interacción significante ocurra, nos ayuda a hacer decisiones sobre lo que es bueno, malo, seguro y peligroso. Es uno de los más interesantes tipos de comportamiento humano, y de los más complicados de reflejar en productos digitales.

Esta sensación es inmediata y muchas veces fuera de nuestro control.

De comportamiento

Es el nivel medio, y es donde entra la interacción del usuario con el producto, como se siente al usarlo, sigue siendo agradable visualmente y que tan fácil es de usar, aquí se concentra el diseño de interacción y la usabilidad y es la más significante de las tres, y el visceral y el reflectivo influyen en ella.

Reflectivo

Es el nivel menos inmediato de procesamiento y involucra consideraciones y reflexiones de experiencias pasadas. Esta puede incrementar el modelo de comportamiento pero no tiene relación aceso directo con el visceral. Nos ayuda a generar en nuestros usuarios un mayor impacto que se representa incluso posteriormente de su uso.

Después del uso del producto el usuario reflexiona si este aun le parece agradable, útil de emplear y le asigna un valor.

A través de la reflexión podemos integrar las experiencias de nuestros productos en aspectos mayores de nuestras vidas, asignándoles un valor superior a nuestro producto.

About Face: The essentials of interaction Design 4th edición -  Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel

El modelos de usuarios; personas y sus metas son ayudará a poner la investigación visualmente y observar las relaciones y patrones que al diseñar para los usuarios podemos encontrar entre cada tipo de usuario deseable del producto.

El desarrollo de personas nos permite una forma precisa de observar cómo distintos grupos de usuarios piensa, se comunica que desea cumplir y como.

Son arquetipos basados en comportamientos descubiertos durante nuestra investigación. Podemos entender a través de estas los objetivos de los usuarios en sus distintos contextos.

El tratar de incluir en un producto la funcionalidades de varios tipos de usuario aumenta  la carga cognitiva, la curva de aprendizaje resultando en menos satisfacción para los usuarios.

La mejor forma de acomodar a varios usuarios específicos, es crear un producto con necesidades específicas.

El diseño de personas nos ayuda a determinar lo que un producto debe hacer y cómo comportarse, comunicar  con el resto del equipo un lenguaje común para la toma de decisiones.

Construir consensos y compromiso en el diseño, personas ensamblan personas reales y son más fácil de relacionar que una lista de “features” y diagramas ayudando a crear un entendimiento en común.

Miden la efectividad de un diseño, decisiones de diseño pueden ser probadas en personas permitiendo iterar en el diseño del producto más rápido, aunque no quita la necesidad de las pruebas de usuario.

Los usuarios tienen motivaciones que establecen su comportamiento, las personas deben capturar estas motivaciones en la forma de objetivos. El entender por que el usuario realiza ciertas tarea permite a los diseñadores mejorarlas o incluso eliminarlas.

Patrones de diseño de Aplicaciones

“Stacks” es el más común en el diseño de aplicaciones, por su factor forma vertical y angosto, se basa en una lista de contenido desplegable con una barra de navegación superior o inferior con controles de navegación.

El carrusel en contraste con “stacks” cuenta con una interacción horizontal en la que la pantalla se maneja como tarjetas, normalmente llevan un marcador de página en la parte inferior para darle al usuario el sentido de la ubicación, y en su mayoría son un ciclo.“Swimlanes” es una mezcla del carrusel y el “Stacks”.

Diseño de Experiencia

Usable Usability: Simple Steps for Making Stuff Better - Eric Riess

El contexto para tomarse en cuenta en la usabilidad nos habla sobre la conveniencia y cómo están relacionadas las cosas entre sí. El contenido tiene que estar relacionado, en una tienda en línea. Al estar comprando una aspiradora es conveniente que dentro de la misma página se encuentre un link para comprar sus bolsas.

Hacer todo lo que la gente necesita disponible a la mano, el contenido debe ser de fácil acceso, amazon agrupa distintas categorías de compra en cajas y les asigna un color distinto, desde el comprar, devolución y más opciones de compra.

Lograr que un sistema sea aprueba de tontos puede ser un reto para el diseñador, se nos mencionan tres claves; recordar, alertar y forzar.

Recordar les dice a los usuarios que pudieron haber olvidados algo, microsoft word a la hora de cerrar un documento te pregunta si quieres guardar el archivo.

Alertar le dice al usuario que algo está mal y debe revisar su información como al iniciar sesion y contar con algo mal se le avisa que hay un problema con su mail o contraseña.

Forzar es eliminar opciones que no están disponibles en ese momento para evitar confusiones al usuario. Hay botones que no aparecen grises en un editor de texto significando que no se pueden usar, pero cuando se hace una selección estos cambian indicando al usuario que una acción es ahora posible.

La personalización es lo que una app hace con la esperanza de satisfacer las necesidades del usuario. Recordando un password o una dirección. Amazon en base a los libros comprados el usuario selecciona otros que creen puedan gustar también al usuario.

Es también lo que le hacemos al sistema para que cumpla nuestras necesidades, como cambiar el protector de pantalla o el tono del teléfono

Construir mensajes de error que ayuden al usuario y lo lleven a una acción para tratar de resolverlo. Ser claros con el texto y utilizar los espacios en blanco, es decir si en una app de música la primera vez que la abrimos no tenemos artistas guardados el espacio en blanco nos podrá alertar de esto y mandarnos con un botón a buscar unos para agregarlos y así generar contenido.

Las cosas deben de hacer lo que se esperan que hagan, un botón con la etiqueta comprar te debe de llevar precisamente a esta sección, y para desarrollar este sistema visual se debe de tomar en cuenta los siguientes aspectos:

Visibilidad: el hecho de que sea visible

Entendible: Se lo que veo y sé cómo funciona

Lógico: Las cosas que veo y su procedimiento tienen sentido

Consistencia: Las reglas no cambiarán inexplicablemente ( los botones de compra son de un color determinado)

Predecible: Antes de que haga algo tengo una clara idea de lo que sucederá después.

Simple and Usable - Giles Colborne

Los usuarios y las personas tienen distintas cualidades, es importante asignar cada una en la que mejor destacan.

Las computadoras son buenas guardando información, calculando pero las personas hacen mejor sentido de esta información, ellas están a cargo de la planeación, el usuario debe estar en control. Cuando el usuario dirige y la computadora guía la experiencia se siente mucha más simple.

Tareas para el Usuario

Marcar metas y planeación,Cálculo aproximado/variante,reconociendo información,haciendo esquemas,escogiendo de listas pequeñas,estimando e imaginando.

Tareas para la Computadora

Siguiendo procedimientos, cálculo acertado, almacenando y recuperando datos, copias, guardando listas largas, midiendo, referenciando información detallada.

La clave para crear una experiencia de usuario simple es mover la complejidad en el lugar adecuado, para que cada momento se sienta simple. Experiencias simples le dan espacio a las personas para poder imaginar como lo que están haciendo cuadra en su vida.

It’s not the interface that makes the experience - Dave Malouf

“If you think of the interface as the experience, you are missing the point.”

Olvidemos el concepto de que no se puede diseñar una experiencia, sólo podemos diseñar para una experiencia.

Para esto tenemos que movernos más allá de las interfaces que empoderan y limitan esas experiencias.

Diseñados interfaces sin tener en consideración el impacto humano que nuestros diseños pueden ocasionar en sus usuarios.

El valor no está en la interfaz si no en lo que la interfaz entrega al usuario, expresando la hipótesis de valor de la propuesta. Para que esta sea ejecutada satisfactoriamente en una interfaz gráfica (si es el caso) debe haber un plan previo, siento este el Diseño de Experiencia.

The State of UX in 2016 - Fabricio Texeira

Se diseña para sistemas que cuentan con un lenguaje visual ya establecido.

El estilo visual flat, ha provocado que poco a poco cada vez todo se vea igual. Tal vez esto no sea tan malo, pues se ha vuelto el reflejo de lo que los usuarios esperan de una interfaz, la aplicación de patrones de diseño para su funcionamiento y control. Incluso este tipo de “layout” se ha vuelto familiar, siguiendo las convenciones preestablecidas, considerando las expectativas del usuario.

La implementación de nuevas tecnologías y el uso de estas en nuevos dispositivos permitió tener una experiencia consistente a través de ellos con el diseño responsivo y de aplicaciones. Muchos “frameworks”, han simplificado el desarrollo, lo cual influye en el desarrollo de un producto, siendo este más rápido evitando la necesidad de reinventar la rueda.

La innovación solo por el hecho de innovar, como la creación de una barra de navegación totalmente disruptiva puede traer problemas de usabilidad y de curva de aprendizaje para tus usuarios. Para esto hay que preguntarnos si es realmente necesario introducir un nuevo patrón de interacción o concentrarnos en la meta del usuario: Lograr que haga sus cosas de una manera fácil y familiar.

Las aplicaciones ya no son necesariamente el último destino de un usuario, es decir algunos usuarios podrán meterse a la aplicación del clima para ver el pronóstico, pero lo mejor que puede hacer la aplicación es avisar al empezar el dia que va a llover y recordarte que lleves tu paraguas contigo. Una simple notificación puede llegar a ser más útil al usuario por su simplicidad, con las nuevas implementaciones de el “notification center” de iOS, “Now on Tap” en android las personas verán la GUI de la aplicación cada vez menos, además el usuario puede tomar acción desde una notificación (responder un texto, compartir un enlace) todo eso sin entrar a la aplicación.

Todo esto nos regresa a diseñar para experiencias y no para pixeles.

The end of Apps as we Know them - Paul Adams - Intercom

El contenido de las aplicaciones, su información y utilidad es lo realmente enriquecedor y útil para el usuario, entonces tenemos la opción de dividir estas unidades de información, incluyendo el contenido y la acción para que se muestren donde sea (afuera de la aplicación) en cualquier dispositivo y ensambladas bajo un contexto específico.

En un mensaje de texto por ejemplo el contexto influye sobre la interacción que tienes con ese contenido, si vas manejando al recibirlo tu smartwatch o android auto/apple car pueden leerlo y poder contestar a través de Siri/Google mientras que el receptor se puede encontrar en su escritorio, la acción para responder cambia para el. La aplicación se convierte en una herramienta de publicación que puede ser accesada por otra interfaz, y no abriendola específicamente.

Esto no quiere decir que ya no abriremos las aplicaciones, aún son y serán necesarias en bajo muchos contextos, por ejemplo en la creación de contenido, flujos dedicados y extensos y cambiar las preferencias. Pero no tanto para ver el  último contenido o el más interesante.

Referencias:

Don Norman,(2013). The Design of everyday things, Estados Unidos: Editorial Basic Books

Don Norman,(2005). Emotional Design: Why We Love (or Hate) Everyday Things. Estados Unidos:Editorial Basic Books.

Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel, (2014).

About Face: The essentials of interaction Design 4th edición. Estados Unidos: Editorial Wiley

Eric Riess,(2012). Usable Usability: Simple Steps for Making Stuff Better. Estados Unidos: Editorial Wiley.

Giles Colborne, (2010). Simple and Usable. Inglaterra: Editorial New Riders

Dave Malouf,(2016). It’s not the interface that makes the experience

Recuperado de https://medium.com/user-experience-design-1/it-s-not-the-interface-that-makes-the-experience-fb16f8e29299#.3oz5hcbf6

Fabricio Texeira, (2016). The State of UX in 2016.

Recuperado de  https://medium.com/user-experience-design-1/the-state-of-ux-in-2016-4a87799647d8#.qdeovksjh

Travis Gertz (2015). Everything looks the same

Recuperado de : https://louderthanten.com/articles/story/design-machines

Antonio Patras (2015). Every Website looks the same, and that’s ok

Recuperado de : http://www.webdesignerdepot.com/2015/10/every-website-looks-the-same-and-thats-ok/

Paul Adams - Intercom (2016) The end of Apps as we Know them -  Intercom

Recuperado de :