logo

fb tw ins you
 

El diseño es una inversión, no un gasto. Con el riesgo de decir lo obvio: No es suficiente para diseñar un producto bonito; también tiene que ser utilizable, y si vas a extraer el ROI más grande de un producto, su usabilidad -que generalmente se refiere a la facilidad de uso- adquiere una importancia vital.

 

Los productos bien diseñados tienen una gran facilidad de uso. La gran usabilidad es un contribuyente significativo a la calidad del producto y una experiencia de usuario sin fisuras.

 

Hay algunas maneras que la utilidad de un producto se puede probar: un método de inspección llamado análisis heurístico es uno de ellos. Esto generalmente significa ejecutar una evaluación heurística en un producto, ya sea existente o nuevo.

 

¿Qué es la heurística y qué es un análisis heurístico?

 

Un análisis heurístico se utiliza para identificar problemas comunes de usabilidad de un producto para que los problemas puedan resolverse, y así mejorar la satisfacción del usuario y su experiencia, y aumentar las posibilidades de éxito de un producto digital en general.

 

Centrándose en la usabilidad, un análisis heurístico es un método de evaluación en el que uno o más expertos comparan el diseño de un producto digital con una lista de principios de diseño predefinidos (comúnmente denominados heurísticos) e identifican dónde el producto no sigue estos principios.

 

Un crítico experto realiza un análisis heurístico de un sitio web para identificar problemas de usabilidad

 

Un crítico experto realiza un análisis heurístico de un sitio web para identificar problemas de usabilidad
 

Un conjunto específico de heurísticos contiene reglas empíricas, mejores prácticas, normas, reglas y convenciones que se han probado o observado durante largos períodos de tiempo. Apegarse a estos estándares heurísticos produce diseños de UX que simplemente funcionan mejor.

 

“La evaluación heurística implica que un pequeño grupo de evaluadores examine la interfaz y juzgue su cumplimiento con los principios de usabilidad reconocidos (la heurística).” — Jakob Nielsen, The Nielsen Norman Group

 

Una evaluación heurística no es una prueba de usabilidad (por ejemplo, una prueba individual moderada con los usuarios). Tampoco es un tutorial cognitivo, que también es un método de inspección de usabilidad. Con tutorías cognitivas, el énfasis está en las tareas del usuario. El proceso implica identificar las metas del usuario y llegar a una lista de tareas para lograr esos objetivos. Los evaluadores luego señalan los problemas que los usuarios pueden tener al usar el producto.

 

Un experto en evaluación heurística -el evaluador- es idealmente un experto en pruebas de usabilidad que tiene una comprensión profunda del conjunto elegido de heurísticas. Por lo general, provienen de las disciplinas de factores humanos, diseño de interacción (IXD), HCI (interacción hombre-computadora) y/o Diseño UX, con antecedentes complementarios en disciplinas como la psicología, la informática, las ciencias de la información y el comercio.

 

Durante la evaluación, los evaluadores individuales asignan una “clasificación de gravedad” a cada uno de los problemas de usabilidad identificados. Como regla, los diseñadores de UX trabajan su manera abajo de los asuntos más críticos en el backlog al menos crítico. (Con el fin de obtener la mayor explosión de UX para el valor de una evaluación heurística, es típico para el equipo de diseño para dar a los problemas con mayor grado de gravedad la mayor atención.)

 

Es útil tener en cuenta que a pesar de que un solo experimentado profesional del UX es generalmente experto en identificar los problemas de usabilidad más críticos, un grupo de evaluadores es generalmente la mejor opción. Entre 5 y 8 individuos es el punto dulce: deben ser capaces de señalar más del 80% de problemas de usabilidad. Sin embargo -como muestra el siguiente gráfico- el uso de más de 10 evaluadores heurísticos no producirá mejores resultados.

 

La proporción de problemas de usabilidad identificados cuando se utiliza un grupo de evaluadores heurísticos

 

A medida que aumenta el número de evaluadores, aumenta la proporción de problemas de usabilidad identificados. Pero después de 10 evaluadores, las ganancias potenciales son insignificantes.
 

¿Por qué hacerlo?

 

La razón principal para realizar un análisis heurístico es mejorar la usabilidad de un producto digital. Otra razón es la eficiencia (en este contexto, “eficiencia” es la velocidad con que un producto puede ser utilizado como consecuencia directa de una mejor usabilidad). “Usabilidad” se refiere a componentes de calidad tales como capacidad de aprendizaje, detección, memorización, flexibilidad, satisfacción del usuario y manejo de errores. El UX de un producto se mejora mucho cuando estos componentes se entregan con una alta calidad.

 

¿Cuándo hacerlo?

 

No hay reglas duras y rápidas. Un análisis heurístico se puede realizar en cualquier etapa avanzada del proceso de diseño (Obviamente, no sería productivo hacerlo demasiado pronto). Con los nuevos productos, un análisis heurístico suele realizarse más tarde en la fase de diseño, después de hacer wireframes y prototipos, y antes de que comience el diseño visual y el desarrollo de la interfaz de usuario. Hacerlo demasiado tarde y hacer cambios se hará costoso. Los productos existentes que tienen mala usabilidad a menudo tendrán un análisis heurístico ejecutado antes de que comience un rediseño.

 

¿Cuál es el producto esperado?

 

Al igual que con otras pruebas de usabilidad o métodos de inspección, el producto típico es un informe consolidado que no sólo identifica problemas de usabilidad, sino que los clasifica en una escala de severa a ligeramente problemática. En su mayor parte, un informe de evaluación heurística no incluye soluciones: afortunadamente, muchos problemas de usabilidad tienen soluciones bastante obvias, y una vez identificados, el equipo de diseño puede comenzar a trabajar en ellos.

 

Un ejemplo de evaluación heurística: problemas de usabilidad identificados utilizando un experto heurístico evaluador

 

Utilizando un evaluador heurístico experto imparcial, los problemas de usabilidad se identifican rápidamente y las soluciones de diseño de UI mejor a menudo se vuelven obvias.
 

Ventajas y Desventajas de una Evaluación Heurística

 

Ventajas:

 

  • Descubre muchos problemas de usabilidad y mejora significativamente el UX de un producto.

  • Más barato y más rápido que las pruebas de usabilidad completas que requieren la contratación de participantes, la coordinación, el equipo, la ejecución de la prueba, grabación, análisis, etc.

  • La heurística puede ayudar a los evaluadores a enfocarse en problemas específicos (es decir, falta de retroalimentación del sistema, mala detección, prevención de errores, etc.).

  • La evaluación heurística no lleva consigo los problemas y problemas éticos y prácticos relacionados con los métodos de inspección que implican a usuarios reales.

  • Evaluar diseños utilizando un conjunto de heurísticas puede ayudar a identificar problemas de usabilidad con flujos de usuario específicos y determinar el impacto en la experiencia general del usuario.

 

Desventajas:

  • Expertos expertos en usabilidad son a menudo difíciles de encontrar y pueden ser caros.

  • El valor de las cuestiones descubiertas por los evaluadores está limitado por su nivel de habilidad.

  • A veces, un análisis heurístico puede desencadenar falsas alarmas: Los problemas que no necesariamente tendrían un efecto negativo en el UX general si se deja solo son a veces marcados como fijos.

  • A diferencia de los tutoriales cognitivos, la evaluación heurística se basa en nociones prejuzgadas de lo que hace “buena” usabilidad.

  • Si los evaluadores no forman parte del diseño o dev team, pueden desconocer cualquier limitación técnica en el diseño.

 

Cómo Ejecutar un Análisis Heurístico Eficaz

 

La preparación es la clave para llevar bien el análisis. Después de un conjunto establecido de pasos se asegura que un análisis heurístico funcionará eficientemente y producirá resultados máximos. He aquí una lista de comprobación del análisis heurístico:

 

  1. Definir el alcance.

  2. Conocer los requisitos empresariales y demográficos de los usuarios finales.

  3. Decidir qué herramientas de reporte y heurísticas utilizar.

  4. Evaluar la experiencia e identificar problemas de usabilidad.

  5. Analizar, agregar y presentar los resultados.

 

Paso 1: Definir el alcance

Tanto en proyectos grandes como pequeños, los presupuestos pueden ser limitados. Esto puede ser especialmente el caso en grandes sitios de comercio electrónico: Por ejemplo, puede no ser factible examinar todo el sitio, ya que podría tomar un tiempo muy largo y por lo tanto, ser demasiado caro.

 

Aquí es donde entra en escena el análisis heurístico.

 

Los parámetros se pueden establecer para examinar sólo las áreas más importantes del sitio. El alcance limitado sólo puede tener la capacidad de centrarse en flujos específicos de usuario y funcionalidades, tales como inicio de sesión/registro, búsqueda y navegación, páginas de detalles del producto, carrito de la compra, y checkout.

 

Paso 2: Conoce los requisitos del negocio y los usuarios

 

En primer lugar, los evaluadores deben entender las necesidades de negocio del producto/sistema. En segundo lugar, como con cualquier proceso de diseño típico centrado en el usuario, es crucial conocer a los usuarios. Para facilitar el análisis heurístico se deben establecer personas específicas del usuario. ¿Son los usuarios finales novatos o expertos? ¿Cuáles son los datos demográficos del usuario?

 

Por ejemplo, aunque las heurísticas debían funcionar como estándares universales de usabilidad, tal vez se debe hacer especial hincapié en la accesibilidad para una audiencia más vieja -o tal vez se necesite tener en cuenta diversas audiencias multiculturales-.

 

Paso 3: Decide qué herramientas de reporte y heurísticas utilizar

 

Es increíblemente importante decidir qué conjunto de heurísticas los evaluadores van a utilizar. Un conjunto seleccionado de heurísticas proporcionará pautas comunes para que cada uno de los expertos pueda hacer su evaluación, así como asegurarse de que todos están en la misma página. Sin ella, el proceso de análisis heurístico podría caer en un caos absoluto-producir informes inconsistentes y conflictivos y, en última instancia, ser ineficaz.

 

Como parte del plan de evaluación heurística, debe acordarse un sistema, un formato y las herramientas a utilizar. Esto podría ser Google Docs, hojas de cálculo y presentaciones, o alguna otra herramienta común de informes que todos puedan utilizar ya la que el “observador” tendrá acceso fácil. (Más sobre el observador más tarde.)

 

Las 10 Heurísticas de Usabilidad para el Diseño de Interfaz de Usuario de Jakob Nielsen son probablemente el conjunto más utilizado de heurística de usabilidad. Hay otros como la lista de seis Principios de Diseño de Usabilidad por Don Norman, y las 20 heurísticas de usabilidad de Susan Weinschenk y Dean Barker que se enumeran a continuación. Incluso hay un conjunto que contiene nada menos que las 247 Guías de Usabilidad Web por el Dr. David Travis.

 

20 Heurísticas de Usabilidad utilizadas durante el análisis heurístico para identificar problemas de usabilidad

 

Susan Weinschenk y Dean Barker (Weinschenk and Barker 2000) investigado las directrices de usabilidad y heurísticas de muchas fuentes (incluyendo Nielsen’s, Apple, y Microsoft) y generó este conjunto de 20 Heurísticas de Usabilidad para realizar pruebas.
 

Paso 4: Evaluar la experiencia e identificar problemas de usabilidad

 

Cuando se realiza una evaluación heurística con un grupo de expertos, cada individuo evalúa la interfaz de usuario por separado. Este enfoque de la revisión de expertos se hace para asegurar que las evaluaciones sean independientes e imparciales. Cuando todas las evaluaciones están completas, los hallazgos son recopilados y agregados.

 

Para ejecutar la evaluación de manera eficiente, es aconsejable utilizar un “observador”. Puede agregar un poco de gastos generales a las sesiones de evaluación, pero definitivamente vale la pena, ya que hay muchas ventajas. El observador participa en cada sesión y se encarga de tomar las notas, por lo que es capaz de entregar un informe consolidado al final del proceso de evaluación, en lugar de que haya un conjunto separado de documentos de cada evaluador.

 

Identificación de problemas de usabilidad durante una evaluación heurística

 

Un ejemplo de evaluación heurística: en algunos casos con un solo evaluador, no solo identifican problemas de usabilidad sino que también pueden proporcionar recomendaciones.
 

Durante la inspección, el observador también puede ayudar a responder a las preguntas de los evaluadores con experiencia limitada en el dominio (por ejemplo, en el caso de una UI de empresa especializada dirigida a usuarios expertos). También pueden ayudar a guiar la sesión cuando se está evaluando un prototipo con funcionalidad limitada.

 

Con el fin de ayudar al equipo a avanzar hacia soluciones de diseño, los resultados deben describir los temas con precisión. Las notas vagas tales como “esta disposición retardará el proceso de registro” no son en absoluto productivas o de ningún valor. Las notas deben ser específicas e identificar claramente la heurística que el problema ocasiona. Por ejemplo: “Durante el registro, el diseño de la interfaz de usuario es confuso, inconsistente y viola las reglas de control del usuario, retroalimentación y consistencia (# 1, # 20 y # 16 respectivamente)”.

 

En aras de la velocidad, las UI pueden ser marcadas visualmente con notas que se pueden consolidar más adelante (ver la siguiente). Este método ayuda a agregar rápidamente las notas finales del experto, y el observador no tiene que buscar los componentes de la interfaz de usuario que se están tratando. También pueden codificarse para una fácil identificación por el equipo de diseño.

 

Análisis heurístico que identifica problemas de usabilidad de la interfaz de usuario del producto

 

Evaluación heurística de interfaces de usuario. Un ejemplo de un evaluador heurístico que identifica problemas de usabilidad (Dashboard por Guohao.w en Dribbble).
 

Paso 5: Analizar, agregar y presentar los resultados

 

Al concluir un análisis heurístico, el gestor de la evaluación -u observador- lleva a cabo algunas tareas domésticas y de organización, como la eliminación de duplicados y la recopilación de los resultados. El siguiente paso del observador es agregar los informes de evaluación heurística y construir una tabla que incluya las puntuaciones de severidad de los problemas de usabilidad y de las cuales el equipo de diseño puede dar prioridad.

 

“Para que las pruebas de usabilidad sean valiosas, los resultados del estudio deben identificar claramente los problemas y ayudar al equipo a avanzar hacia soluciones de diseño.” – The Nielsen Norman Group

 

La salida de un análisis heurístico debe ser una lista de problemas de usabilidad que no sólo identifican problemas específicos, sino que hacen referencia a la heurística de usabilidad que los problemas ocasionan (preferible un número de código para facilitar la referencia). Por ejemplo, la pantalla anterior señala que el uso de texto de bajo contraste en la interfaz de usuario viola las heurísticas de “visibilidad” y “descubrimiento”.

 

El uso de códigos de referencia del conjunto seleccionado de heurísticas ayudará a construir una tabla de datos que luego se puede ordenar. Cuando el equipo de diseño ve que un gran número de cuestiones hacen referencia a un pequeño número de infracciones (identificadas por código), pueden concentrar sus energías en mejorarlas. Por ejemplo, puede haber problemas generalizados de visibilidad y descubrimiento como en el ejemplo anterior.

 

El análisis heurístico no proporciona necesariamente correcciones a los problemas de usabilidad, ni ofrece un “puntaje de probabilidad de éxito” si se van a implementar las mejoras de diseño. Sin embargo, debido a que una evaluación heurística compara la interfaz de usuario con un conjunto de heurísticas de usabilidad conocidas, en la mayoría de los casos es notablemente fácil identificar la solución a un problema específico y llegar a un diseño más convincente.

 

Conclusión

 

Algunas aplicaciones nuevas en desarrollo y muchos productos convencionales sufren de mala usabilidad. La mayoría de ellos se beneficiarían de una dosis de análisis heurístico realizada por expertos y, como consecuencia, verían una mejora dramática en sus UX sin romper el presupuesto.

 

Un solo experto UX experimentado puede descubrir un número sustancial de problemas de usabilidad durante un análisis heurístico. Sin embargo, si el tiempo y el dinero lo permiten, entre 5 y 8 expertos parece ser el punto ideal: esta opción debería revelar la mayoría de los problemas de usabilidad y ofrecer un ROI significativo. Este ROI se basaría en el aumento de la productividad del usuario, así como en el estimado aumento esperado en las ventas de productos debido a una mayor satisfacción del cliente, mejores calificaciones y un alza en las revisiones positivas.

 

Por favor ten en cuenta

Debe mencionarse que aunque los análisis heurísticos son definitivamente una manera sólida de identificar problemas de usabilidad con respecto a los productos digitales, no deben ser considerados como la única fuente de datos. Los estudios demuestran limitaciones a la revisión de expertos debido a razones psicológicas como el sesgo cognitivo.

 

 

Si es posible, con el fin de lograr resultados óptimos, el análisis heurístico debe combinarse con tutorías cognitivas y pruebas individuales del usuario. Y que debe producir diseños de producto impresionante.

 

 Articulo via Toptal

 
 

Esta mañana la canción “This Magic Moment” de The Drifters apareció en mi cabeza sin ninguna razón aparente.

 

Esas inquietantes redes neuronales en nuestro cerebro hacen cosas divertidas. Hacen que aparentemente conceptos y pensamientos no relacionados se conectan.

 

Golpeándome la frente me dije: “Pero, por supuesto …”

 

Recientemente he estado pensando en esos momentos mágicos en UX que suceden cuando interactuamos con nuestros dispositivos o servicios digitales. Encontramos momentos perfectos, cuando todo cae en su lugar, exactamente en el camino correcto, exactamente en el momento adecuado, como si fuera mágico. Podría ser en tu banco, en tu coche, una máquina expendedora, o en tu teléfono.

 

Creo que la era del diseño anticipatorio está aquí, o al menos a nuestro alcance.

 

Nuestras GUIs limitadas están cambiando como resultado de la evolución de las tecnologías y los métodos de entrada. Es una evolución orgánica, natural - ¡ por supuesto, ya estamos hablando con nuestros dispositivos!

 

Por ejemplo, mientras conducimos podríamos decir: “Llama a Anna.” Le pedimos a Siri que inicie un cronómetro o que las películas estén jugando cerca. Y le pedimos a Alexa que toque música o nos ordene el café. Sin embargo, las metáforas y los elementos gráficos establecidos hace más de cuatro décadas no han cambiado mucho.

 

El Pasado

Ten en cuenta que la GUI original de Xerox PARC tiene 44 años, pero nuestras interfaces de usuario todavía se ven muy bien.

 

La estación de trabajo Xerox Star introdujo el primer sistema operativo de interfaz gráfica de usuario (GUI) comercial en 1973

Hoy en día, todavía estamos viendo pantallas bidimensionales y en su mayoría utilizan teclados y ratones para la entrada, dispositivos diseñados para métodos de interacción optimizados para ordenadores, no para humanos.

 

Las máquinas con las que interactuamos - ordenadores portátiles, escritorios, tablets, móviles , máquinas expendedoras, etc., diseñados y construidos con modelos mentales y tecnologías que son sistemas heredados del pasado.

 

Es como si estuviéramos utilizando modelos de interacción de la era de Los Picapiedras en un mundo de Los Supersónicos. Todavía dependen de mucha interacción de los usuarios (entrada) para pasar al siguiente paso y mostrar información útil (salida).

 

 

¿Qué es el diseño anticipatorio?

 

La aplicación del diseño anticipatorio es más importante que nunca si las empresas digitales son para simplificar y facilitar el curso de nuestras vidas digitales.

 

A la luz de esto, ¿qué es el diseño anticipatorio?

 

Es de salida, sin mucha necesidad de entrada.

 

Un mundo donde nuestras máquinas de computación están diseñadas para los métodos de interacción optimizados para los seres humanos, no para las computadoras. Un mundo digital donde nos movemos de la intención del usuario que es determinista a probabilística.

 

Aaron Shapiro de Hugedefine el diseño anticipatorio como un método para simplificar los procesos respondiendo a las necesidades un paso por delante de las decisiones del usuario, es decir, respondiendo a las necesidades de los usuarios que aún no han expresado.

 

 

El diseño anticipado en su forma más fina va mucho más allá de la personalización.

 

Por ejemplo, Netflix que muestra películas para ver en función de tus preferencias y el historial para la personalización. Con un diseño anticipado, la interfaz cambia realmente en el momento en que estás interactuando con una aplicación.

 

 

An example of personalization-not anticipatory design.

El diseño anticipatorio significaría -en el caso de las compras en línea, por ejemplo- que el sistema conocería y personalizaría una experiencia en la medida en que se sentiría como una mano mágica guiando tu experiencia. En realidad, cambiaría la interfaz de usuario al instante, eliminaría cualquier información extraña y sólo presentaría las opciones más relevantes de manera oportuna, sencilla y eficiente.

 

Esto no es demasiado difícil de lograr hoy.

 

Digamos que alguien está comprando una guitarra muy cara en guitarcenter.com. Al momento de pagar el sitio presentaría automágicamente “enviar a la tienda para ser recoger” como una opción por defecto porque sabe al observar el comportamiento pasado de otros usuarios comprando guitarras caras, estos preferirían recogerlas en la tienda más cercana.

 

Para otro ejemplo, vamos a fingir que estás comprando una camisa en Amazon.

 

Amazon ya personaliza toda una serie de cosas para ti y debe saber tu tamaño y las preferencias de color ya que has comprado camisas en el sitio antes.

 

Al ir a la página de detalles del producto, podría pre-seleccionar tu tamaño, y mostrar las de color azul marino, blancas y a cuadros en primer lugar, y no poner importancia en los rosados ​​y amarillos, y no obligarte a seleccionar tu tamaño cada vez que veas distintas camisas.

 

¿Por qué?

 

La promesa del diseño anticipatorio es la eliminación de la fricción y un aumento en la eficiencia que mejoraría en gran medida las experiencias de los usuarios y, a su vez, impactaría en los resultados. La gente vuelve a los productos y servicios que ofrecen lo que quieren cuando lo desean.

 

Nuestras interacciones diarias con sistemas digitales han alcanzado una escala sin precedentes. Sin embargo, muchas de estas interacciones se sofocan con fricción y sentimientos subsiguientes de frustración.

 

 

Hay una necesidad real de personalización y en una escala mayor que deleitaría a los usuarios, y simplificar sus vidas.

 

Toma las máquinas expendedoras de billetes de autoservicio (ó ATMs), donde los viajeros pueden recargar tarjetas de viajero.

 

Todavía están diseñados para ser mudos - impulsados por la entrada del usuario en el que todo el mundo se toma a través de la misma plétora frustrante de opciones.

 

Uno podría fácilmente imaginar un sistema mucho mejorado, más personalizado, donde el historial de recarga podría ser almacenado en su tarjeta.

 

En lugar de un sinnúmero de solicitudes de entrada: selecciona esta opción primero, luego selecciona esta otra opción, y así sucesivamente, toda la interacción podría comenzar con la inserción de la tarjeta que siempre se quiere recargar y el sistema inmediatamente mostraría: “Hola, ¿te gustaría volver a llenar esta tarjeta con $ 20, usando tu Mastercard? “

 

El siguiente paso sería pagar y terminar la operación.

 

Se reduciría el tiempo necesario para recargar las tarjetas por lo menos en un 75 por ciento, aumentar la eficiencia, mover a la gente más rápido y, posteriormente, hacerlos más satisfechos.

 

Esto ya es posible, pero no sé de una sola máquina de venta de billetes que haga esto.

 

 

Una interfaz de usuario "tonto" que requiere una gran cantidad de entrada frente a uno que es "anticipatorio"?

 

Interfaces del futuro.

 

Cuando la IA se vuelve más penetrante, un mayor grado de personalización permitirá un mayor nivel de diseño anticipatorio.

Basado en todo tipo de seguimiento de comportamiento autorizado por el usuario - historiales de compra, preferencias, etc., el sistema lo reconocería y, con un alto grado de certeza, predecirá cuál podría ser tu próxima elección.

 

La falta de diseño anticipatorio es sorprendente dado que las tecnologías existen hoy en día que haría que hacerlo no es tan difícil.

 

Algunas empresas ya están practicando las primeras formas de diseño anticipatorio. Dos ejemplos son Google Now Uber.

 

¿Cómo ponemos en juego el diseño anticipatorio?

 

No hay varita mágica para pronunciar “abracadabra”, así que ¿cómo diseñamos para esos momentos mágicos ahora? ¿Cuáles son los pasos que podemos tomar hoy para entregar esos momentos mágicos, usando el diseño anticipatorio?

 

 

Algoritmos sofisticados y personalizados en el trabajo en Metromile crean una sensación de anticipación e increíblemente útil para los clientes (evitar entradas de estacionamiento)

Hasta que tengamos algoritmos predictivos increíblemente sofisticados, IA completamente desarrollada y aprendizaje de máquinas, las empresas pueden extraer datos existentes para oportunidades de personalización, reduciendo así los posibles puntos de dolor y barreras.

 

También pueden participar plenamente en el proceso de diseño centrado en el usuario, emplear investigaciones profundas, extensas pruebas de usuario y herramientas de uso, como una biblioteca de software de código abierto, para la inteligencia de la máquina, como Tensorflow.

 

Las investigaciones profundas nos ofrecerán una observación mucho-contextual quizás o estudios etnográficos- donde podamos observar lo que los usuarios están dispuestos a hacer de momento a momento en su flujo. Podríamos mapear estos viajes de usuario paso a paso, y diseñar la interacción en consecuencia.

 

El resultado ideal de la aplicación de la minería de datos y la personalización, junto con los métodos de diseño centrados en el usuario, crearía experiencias fluidas y sin precedentes anticipación que agradaría a los clientes y generar lealtad por tener las cosas aparecen como por arte de magia.

 

Se avanzaría el estado del arte de la experiencia del usuario y crear una situación de ganar-ganar tanto para empresas y usuarios, ofreciendo una mayor satisfacción del cliente que repercute positivamente en la línea de fondo.

 

Articulo via Toptal

 

19 eBooks Gratuitos Que Todo Diseñador Debería Leer

 

¿Alguna vez pudiste dominar el arte del diseño gráfico? El alcance cada vez mayor y cambiante de esta industria hace que la pregunta anterior parezca casi ridícula. Cualquier diseñador talentoso sabe que, para mantenerse relevante, la investigación es clave.

 

Sin ella, estás seguro que caerás detrás de la manada y perderás lo que sea que te hace diferente. Entonces, ¿dónde debes comenzar tu lista de lectura? Bueno, afortunadamente, hay una gran cantidad de recursos gratuitos por ahí en la forma de poco práctico ebooks de diseño. Aquí hay sólo 19 para empezar a lo largo del camino.

 

1. Design’s Iron Fist — Jarrod Drysdale

 

Design's Iron Fist — Jarrod Drysdale

 

Es posible que hayas oído hablar de Drysdale antes de ahora. Este tipo no es nada nuevo en la escena. El diseñador establecido también es famoso por su riqueza de ensayos sobre cómo seguir a través de sus procesos. Estos textos ofrecen algunos consejos tangibles que beneficiarían a casi cualquier persona en la industria.

 

El eBook, Design’s Iron Fist (o el Puño de Hierro del Diseño), es una colección de trabajo anterior de Drysdale, todo envuelto en un pequeño paquete aseado. Aparte de tutoriales prácticos y procesos, este libro también ofrece ayuda sobre cómo entrar en la mentalidad de ser un gran diseñador.

 

2. The Creative Aid Handbook — Kooroo Kooroo

 

The Creative Aid Handbook — Kooroo Kooroo

 

La creatividad no sucede de la noche a la mañana. Es algo que cada diseñador tiene que trabajar en un día a día. Si encuentras que tus jugos innovadores se están secando, The Creative Aid Handbook (o El Manual Para la Ayuda Creativa) podría ser la respuesta. La guía examina cómo puede aumentar tu intelecto, fomentar tu bienestar y, lo más importante, ser más creativo.

 

3. Designbetter.co — InVision

 

Designbetter.co — InVision

 

Recientemente, InVision lanzó tres fantásticos libros de diseño que están disponibles de forma gratuita. Cada libro discute varios aspectos del diseño como proceso del diseño, gerencia, y negocio. Además, algunos de los materiales están disponibles en formato de audio.

 

4. The Freelancer’s Bible — Route One Print

 

The Freelancer's Bible — Route One Print

 

El mundo del freelance es duro. Se necesita ser un diseñador experto para hacerlo (y ganarse la vida) en el clima actual. Con esto en mente, el libro de diseño gratuito de Route One Print, The Freelancer’s Bible (o La Biblia del Freelancer), es una lectura obligada para cualquier creativo que quiera trabajar por sí solo.

 

Antes de sumergirse en los reinos de las facturas, los clientes y pitching, asegúrate de leer este eBook. Aparte de asesoramiento freelance general, hay algunas joyas reales en este. Usted descubrirá cómo comercializar tu negocio, cómo encontrar tu USP, cómo manejar las relaciones con los clientes, y mucho, mucho más.

 

5. Type Classification

 

Type Classification

 

Si tu tipografía no está en su punto máximo, este eBook es para ti. Type Classification (o Clasificación de Tipografías) es una guía útil para principiantes de la tipografía. Debería darte las fundaciones que necesitas no sólo para comenzar a clasificar las diversas formas de tipo, sino también la comprensión de cuándo y cómo usarlos para un gran efecto alarmante. Cubre una historia de cada una de las formas tipo y los hechos básicos que necesitas saber sobre ellos.

 

6. Brand House Book — Roger Lindeback

 

Brand House Book — Roger Lindeback

 

Comenzando en el sector de la marca o el branding puede ser una hazaña intimidante, por decir menos. Este aspecto particular del diseño es desalentador cuando se lo aborda por primera vez. Lo que es más, viene con una gran ayuda secundaria de palabras frecuentemente usadas en el medio del branding, que actúa como una barrera o táctica de miedo a los que son nuevos en el área.

 

Por lo tanto, lo que realmente necesitas es un libro que dice las cosas claras y vaq directamente al grano. Ahí es donde entra en juego el libro de Brand House. El eBook gratuito ofrece una solución sin jerga a sus problemas de marca.

 

Para simplificar este campo minado de un tema, Lindeback compara la marca de una empresa a la construcción de una casa y rompe el proceso en seis pasos manejables. Es realmente una lectura obligada para los diseñadores del newbie que desean hacer su marca en el mundo.

 

7. How to Be Creative — Hugh MacLeod

 

How to Be Creative — Hugh MacLeod

 

Con toda una carga de experiencia bajo su cinturón, MacLeod ciertamente sabe del tema cuando se trata de diseño y creatividad. En este eBook, el famoso ejecutivo de publicidad ofrece 26 pequeños consejos y trucos que le ayudarán en el camino hacia una versión más creativa de sí mismo.

 

Piensen en este texto no como tu ayuda de diseño estándar, sino como un manifiesto. Es el tipo de libro electrónico que querrá tener contigo (en formato digital) en todo momento para que puedas remitir a él como te plazca.

 

8. Breaking the Time Barrier — Mike McDerment & Donald Cowper

 

Breaking the Time Barrier — Mike McDerment and Donald Cowper

 

Uno de los principales problemas con los que muchos diseñadores freelance luchan tiene que ser la ecuación de precio vs. tiempo invertido. Lo último que cualquier creativo quiere es trabajar por demasiado tiempo en un proyecto que paga una tasa baja. Es matemática simples, y sin embargo muchos venden sus servicios por poco dinero, por miedo a perder en un potencial cliente.

 

Breaking the Time Barrier es el eBook para ayudarte a combatir este problema. McDerment y Cowper analizan las formas en que puede abordar este problema y aumentar su potencial de ganancias sin fin. Si estás buscando consejo con sentido, lo has encontrado.

 

9. Designing for the Web — Mark Boulton

 

Designing for the Web — Mark Boulton

 

Este es un recurso útil para los diseñadores que quieren ampliar su repertorio y mirar en el sector de diseño web. A lo largo del eBook, encontrarás una gran cantidad de tutoriales y reglas sencillas para diseñar toda tu vida. Es más, es una manera fácil de encontrar algunas herramientas de diseño de investigación con sólo el clic de un botón.

 

10. Time Management for Creative People — Mark McGuinness

Time Management for Creative People — Mark McGuinness

 

Una cosa es ser “creativo” — Es otra muy distinta manejar tu tiempo lo suficiente como para hacer pagar ese talento. Aunque McGuinness es un escritor y un poeta, su consejo mundano en este ebook libre se puede aplicar a cualquier persona en las industrias creativas. Y, con más de 100.000 descargas hasta la fecha, es sin duda una guía popular.

 

Si estás constantemente distraído por todo, desde correos electrónicos a tus propios pensamientos, este libro debe ser tu guía de vida. Explica todo, desde minimizar las distracciones y recordar sus compromisos para priorizar el trabajo “correcto” y concentrarse cuando empieces a trabajar.

 

11. Everything There Is to Know about Logo Design

 

Everything There Is to Know about Logo Design

 

Un logo excelente puede ser la joya de la corona de cualquier marca. El diseño del logotipo es un aspecto crucial del proceso y uno con el cual muchos diseñadores se desconcertan. En este libro de texto fácil de entender, tienes la oportunidad de familiarizarte con los conceptos básicos cuando se trata de proyectos de logotipo. Podrá no fascinarte y sorprenderte con ideas nuevas e innovadoras, pero te dará la ayuda y el apoyo honesto que puedes necesita ahora mismo.

 

12. Adobe Printing Guide — Adobe

 

Adobe Printing Guide — Adobe

 

Mantenerse en la cima del siempre cambiante mundo de Adobe debe ser un valor de diseño central. Después de todo, no se trata meramente de la innovación o la creatividad — se trata de garantizar que comprenderás plenamente las herramientas que utilizas todos los días. Sin esa visión, encontrarás una tensión para incluso empezar algunos proyectos. Así que vayamos directamente a la fuente aquí y leamos la Adobe Printing Guide.

 

13. The Design Funnel — Stephen Hay

 

The Design Funnel — Stephen Hay

 

Tratar con clientes no es nada fácil. Un obstáculo con el que muchos de ustedes estarán familiarizados es el vago problema de la brevedad. Es decir, cuando un cliente te da un resumen con poco o nada de información y de alguna manera espera que tú hagas milagros con él.

 

En el embudo del diseño, Stephen aborda el problema de frente. El concepto es simple: puedes transformar casi cualquier resumen de cliente en un trabajo de diseño significativo y bien pensado. Simplemente necesitas saber cómo y por dónde empezar.

 

14. The Building Blocks of Visual Hierarchy

 

The Building Blocks of Visual Hierarchy

 

Las interfaces visualmente intuitivas son el futuro del diseño web. No cometas ningún error al respecto. Si estás tratando de mejorar la forma en la que diseñas sitios web, este pequeño ebook es un lugar ingenioso para empezar. El texto libre no sólo predica las reglas del diseño de la interfaz de usuario al lector; en su lugar, analiza varios ejemplos del mundo en línea. Una excelente introducción a este arte algo complicado.

 

15. The Shape of Design — Frank Chimero

 

The Shape of Design — Frank Chimero

 

La mente creativa es un laberinto. Puedes fácilmente encontrarte perdido profundamente en tus propios procesos de pensamiento sin salida obvia. Eso es exactamente lo que la forma de diseño es todo, cómo aprovechar al máximo tu creatividad e incluso cómo dominarla. Chimero reflexiona sobre la narración, el diseño y la creación denuevas cosas en este libro de forma pensante pero intrigante.

 

16. Pixel Perfect Precision Handbook 3 — Matt Gypps

 

Pixel Perfect Precision Handbook 3 — Matt Gypps

 

USTWO, una de las principales agencias de diseño del mundo, nos ha bendecido con no uno, sino tres manuales a lo largo de los años. En su núcleo, este eBook gratuito es simplemente un manual de las mejores prácticas que se pueden aplicar a casi todas las áreas de la industria del diseño. Sin embargo, una vez que comiences a leer el texto, notará que hay mucho más que eso.

 

La última versión de este libro ofrece la mayoría de todo lo que un diseñador novato podría desear saber. Es básicamente un resumen enciclopédico de las últimas tendencias, metodologías y procesos. Incluso si crees que estás al día en todo lo anterior, todavía vale la pena revisar de vez en cuando.

 

17. Flat Design & Colors — UXPin

 

Flat Design and Colors — UXPin

 

Agregar un poco de sazón en tu diseño web no es tan fácil como suena. Flat Design & Colors cuenta con las mejores prácticas y conceptos más avanzados en este área altamente lucrativa. Los temas incluyen paletas de colores, texturas y las ideas centrales detrás del diseño plano. Incluso si no utilizas inmediatamente los consejos de este eBook, vale la pena para entender nuevas tendencias en el sector.

 

18. Resilient Web Design — Jeremy Keith

 

Resilient Web Design — Jeremy Keith

 

El pecado cardinal de muchos libros de diseño web es que te dan codificación y herramientas, pero no hay consejos prácticos. Ahí es donde el libro electrónico Resilient Web Design es diferente. No se trata de los elementos que se utilizan en este arte; se trata de cómo usarlos y de los muchos enfoques diferentes que puede optar por tomar.

 

En resumen, Keith te llevará a través de cada una de ellas, una idea cuidadosamente elaborada a la vez. También se trata de una visión histórica de diseño web y cómo muy rápidamente ha cambiado en los últimos años. La noción es que tú puedes utilizar este profundo conocimiento para informar sus propios proyectos en el futuro.

 

19. The Vignelli Canon — Massimo Vignelli

 

The Vignelli Canon — Massimo Vignelli

 

Si aún no has oído el nombre de Massimo Vignelli, debes haber estado viviendo bajo una roca durante toda tu carrera de diseño. Este hombre es un maestro cuando se trata de la artesanía y el diseño en general. Por lo tanto, cualquier eBook que él publica debe ser devorado en un instante. No hay dos formas de hacerlo. Aprende y vive con su ejemplo.

 

The Vignelli Canon (ó El Canon Vignelli) es una exploración de lo que realmente significa ser un diseñador y un creador en el mundo moderno. Dentro del eBook, Vignelli pone abajo algunos de sus principios y reglas dominantes que informan su trabajo. En teoría, este texto debe ayudarte a perfeccionar tus habilidades como diseñador y crear piezas que impacten.

 

 Articulo via Toptal

 

 

 

 
 

Imagina esta situación: Estás trabajando en un nuevo sitio web y en el proceso de creación de los wireframes. En tus reuniones de revisión, recibes comentarios de su cliente y equipo, prefaciando la generación inevitable de solicitudes de cambios, sugerencias de mejoras y actualizaciones. Después de varias reuniones de revisión, te sientes como si estuvieras atrapado en un bucle sin fin, los cambios se están haciendo y revirtiendo, la demanda de tu cliente para más características parece seguir para siempre, y llegar a un acuerdo parece imposible.

 

O, tal vez, ocurre lo contrario: presentas tus wireframes, todo el mundo asiente con la cabeza de acuerdo, y los wireframes están bien para pasar a la siguiente etapa. Pero, a medida que el trabajo avanza, te das cuenta de que no refleja tu intención-más características están siendo abarrotadas y el flujo se siente.

 

¿Que pasó? La respuesta es simple: falta de comunicación.

 

Comunícate más Eficazmente con tus Wireframes

 

Una de nuestras principales herramientas de comunicación como diseñadores de UX son los wireframes, los “blueprints” en blanco y negro que nos convierten en los arquitectos del diseño web. Aunque los wireframes carecen de los detalles coloridos del diseño visual, son la base para el diseño del producto, del mismo modo que los planos arquitectónicos son la base para la construcción final de un edificio.

 

Los wireframes son más que un mapa estático. Usando la analogía de una casa, no sólo muestran una habitación, sino más bien toda la casa y todas las diferentes maneras que un usuario puede mover a su alrededor. También incluyen el interior, definiendo el propósito principal de cada habitación.

 

Además, los wireframes muestran más que sólo habitaciones. Ayudan a planificar los viajes y definir la experiencia que un visitante tendrá en un paseo por la casa. Puedes usar wireframes para muchas cosas, y son muchas cosas que tu equipo y cliente necesitarán entender a medida que un proyecto evoluciona. Parte del trabajo de diseñador de UX es ser traductor, asegurando que todos los involucrados comprendan la visión prevista.

 

Llevando tus Wireframes al Siguiente Nivel con un Mapa de Wireframes

 

Entonces, ¿cómo comunicamos el viaje del usuario? ¿Cómo se puede mapear la experiencia del usuario de una manera que sea fácil de leer para que tu equipo y tu cliente pueda visualizarlo? ¿Cómo puedes asegurarte de que el viaje siga siendo sencillo y ofrezca todos los elementos necesarios para cada habitación sin crear barreras frustrantes?

 

Aquí hay una herramienta útil para comunicar y organizar tus wireframes con mayor eficacia: un mapa wireframe.

 

Un mapa wireframe es una forma de hacer coincidir tus wireframes con el sitemap de tu sitio web (o con los flujos de usuario de tu producto). Para este proceso de asignación, necesitas plantillas de estructura de wireframes que representen un tipo de página específico (por ejemplo, página de formulario vs. página de destino vs. página de lista de productos vs. página de detalles del producto). Es como decidir el propósito de cada habitación en una casa primero, que luego determina los elementos dentro de cada habitación. Una plantilla sería un cuarto de baño con un inodoro y un fregadero como elementos de contenido común.

 

La creación de un mapa wireframe le beneficiará de varias maneras:

 

  • Ayuda a estimar el alcance del proyecto (¿Cuántas plantillas de wireframe necesito?)

  • Proporcionar una visión general de todas las plantillas diferentes que deben crearse (que también puede ser valioso como un índice para un estilo, o una simple lista de verificación para identificar plantillas que pueden ser reutilizadas para otras páginas)

  • Mejorar la comunicación con respecto al objetivo de sus wireframes y ayudar a sus clientes a entender mejor el viaje del usuario

 

¿Cómo Crear un Mapa de Wireframe?

 

Hay tres pasos involucrados en la creación de un mapa wireframe.

 

Paso 1: Identificar Elementos de Contenido

 

Antes de empezar a bucear en wireframes, es útil pensar en todas las diferentes piezas que necesitan vivir en un wireframe, como los elementos que desea tener en cada habitación para decidir cuán grande debe ser su habitación. Para un sitio de comercio electrónico, los ejemplos pueden ser: barra de búsqueda, filtrado de productos, descripción del producto, imagen del producto, precio, selector de cantidad, botón ‘añadir al carrito’, productos recomendados, icono del carrito de compras … Considerando los componentes de IU necesarios.

 

  • Comienza a enumerar todos los elementos de contenido (componentes) en los que puedas pensar: piensa en la funcionalidad que desea ofrecer para ayudar al usuario a avanzar y cumplir con los requisitos del negocio.

  • Agrega otra columna para el tipo de página (por ejemplo, la página de detalles del producto, el carrito de la compra, la página de destino, etc.) para agrupar los elementos de contenido.

  • En una tercera columna, clasifica sus artículos de contenido por importancia (es decir, bajo, medio, alto).

  • Si tienes historias de usuarios, puedes agregar otra columna para referirte a los números de historia relacionados.

 

Lista de elementos de contenido para un mapa wireframe

 

Un ejemplo de una lista de elementos de contenido
 

¿Por qué es útil la clasificación de los elementos de contenido? Tiene dos propósitos principales:

 

  1. Creación de una jerarquía: El ranking define la jerarquía de contenido de cada página y le da una guía para sus wireframes (qué contenido debe estar en la parte superior).

  2. Evitar el desorden: Priorizar los elementos de contenido ayudará a mantener el enfoque minimalista, así como ayudarte a tomar decisiones con ty equipo sobre qué contenido realmente necesita.

 

Los elementos de contenido definen el ámbito del trabajo. Tener una lista de elementos de contenido te ayudará a pasar a la fase de planificación más fácilmente y se puede utilizar para definir el proceso y estimar el trabajo de los wireframes. (Por ejemplo, ¿cómo estructuramos nuestros sprints?, ¿qué contenido abordamos primero?)

 

La lista de contenido también es muy útil durante cualquier discusión con respecto a los requisitos. Puede identificar fácilmente los elementos de contenido que acordó y qué elementos adicionales se solicitan y se consideran una solicitud de cambio.

 

Paso 2: Definir el Mapa del Sitio y los Flujos de Usuario

 

Tienes los elementos de contenido que necesitas proporcionar y los agrupas en páginas. Echemos un vistazo a una visión general por ponerlos fuera. ¿Cómo están interconectados? ¿Cómo navega un usuario a través de ellos para lograr sus objetivos?

 

Llega a este nivel creando un sitemap (para sitios web) o un flujo de usuario (para aplicaciones):

 

  • Mapa del sitio: Muestra una visión general de todas las páginas y su jerarquía.

  • Flujos de usuario: Visualiza cómo se interconectan las páginas para los escenarios clave de casos de uso.

 

 

Mapa de sitio y flujo de usuario

 

 
Versión simplificada de un mapa del sitio y del flujo de usuario
 
 

Paso 3: Mapea tus Wireframes

 

Ahora que ya sabes qué contenido debe proporcionar, en qué páginas debe proporcionarlos y cómo están conectados, puedes empezar a trabajar en tus wireframes.

 

  • Define las plantillas de página que necesitan wireframes basadas en el mapa del sitio y los flujos de usuario. (Cada página que requiera funcionalidad única va a ser una plantilla diferente).

 

Plantillas de wireframe

 

Plantillas de alambre que representan páginas únicas
 
  • Si encuentras variaciones menores para determinadas plantillas (por ejemplo, una página de contenido con un control deslizante en el encabezado o no), trabaja en páginas maestras y omite estas variaciones menores. Tus wireframes deben incluir todos los componentes principales que vivirían en esta plantilla de página maestra.

  • Ahora traza sus wireframes al mapa del sitio y los flujos de usuario. Puedes actualizar tu sitemap con miniaturas de wireframes para cada tipo de página. La codificación de colores o la numeración mantendrán las cosas en sincronía, ayudarán a dar una mejor visión general y ayudarán a los clientes a entender qué wireframes necesitan.

 

A color-coded sitemap

 

Un ejemplo de mapa de sitio con código de color
 

Plantillas de wireframe con código de colores

 

Un ejemplo de mapa de sitio con código de color
 

Plan de sitio con códigos de colores y plantillas de wireframes

 

Un ejemplo de un mapa de plantilla wireframe. El mapa del sitio está a la izquierda y los wireframes están a la derecha con los códigos de color correspondientes.
 

Mapa del sitio numerado y wireframe

 

Para sitios muy complejos, un sistema de numeración puede tener sentido frente a la codificación de color
 

¿Por qué es útil este proceso de mapeo? Es una gran herramienta para usar al crear la visión general de alto nivel de un proyecto. En lugar de simplemente mirar los wireframes autónomos página por página, el mapa wireframe le permitirá a ti y a tu equipo ver los wireframes en su contexto. ¿De dónde vienen los usuarios? ¿A dónde van ahora?

 

Para volver a la analogía de la casa, es el plano que se crea para visualizar la estructura de la casa, en consecuencia pasar a mirar las primeras representaciones de cada habitación (que son los wireframes para cada plantilla de página), y luego para compartir el resultado final y la visión general.

 

Llevando el Flujo de Trabajo de Wireframe al Siguiente Nivel

 

En resumen, aquí es por qué los mapas de wireframe son una comunicación útil y una herramienta de organización:

 

  • Ayudarán con la planificación. (¿Qué contenido tenemos y qué wireframes necesitamos?).

 

  • Serán útiles como una lista de verificación durante el proceso de creación del proyecto. (¿Qué componentes puedo reutilizar para mantenerme constante?).

 

  • Ayudarán con la estimación de costo y tiempo del proyecto, así como para reducir las ineficiencias.

 

  • Te ayudarán a rastrear tus tareas (trabajo completado vs. trabajo todavía en el backlog).

 

  • Te ayudarán a comunicar mejor el propósito y el objetivo de sus wireframes durante las revisiones (como los wireframes se están utilizando para el proyecto en general).

 

Un mapa de wireframes es una herramienta útil para estimar el alcance del trabajo al principio de un proyecto, y como una lista de verificación a través de su proceso de trabajo. Ayudará a mejorar el proceso de toma de decisiones de tu equipo, mantendrá a todos en la misma página y periódicamente los reenfocará en la visión general de alto nivel del proyecto. ¡Feliz mapeo!

 

Articulo via Toptal