-
Continuemos nuestro recorrido de estas heurísticas de diseño
-
Antes de hacerlo, me gustaría recordarles que muchas de las interfaces
-
que miraremos podrían ajustarse a diferentes heurísticas
-
y lo más importante es identificar el problema:
-
Si se identifica y soluciona el problema, la etiqueta es de importancia secundaria
-
Nuestra próxima heurística es "reconocimiento antes que recall (alarmado, notificación)"
-
Crear interfaces que hagan más visibles o más fácilmente recuperables los objetos, las acciones, opciones e instrucciones
-
Y uno de mis ejemplos favoritos de esto es que cada vez que uno ve una Post-It
-
probablemente representa que la información relevante no está donde debería
-
Aquí está una foto que tomé de uno de nuestros almuerzos
-
Y pueden ver que tenemos shwarma y falafel
-
Cada uno tiene uno número
-
Y tenemos uncódigo para distinguir qué número corresponde a qué clase de sandwich
-
Y por supuesto, la razón para hacer esto es que alguien pasó todo su tiempo preprarando estas delicias
-
y no llegaron a tener tiempo para escribir la etiqueta
-
Entonces, es entendible y arreglable.
-
Pero, desde el punto de vista del diseño de interfaces, sería más rápido encontrar el shwarma de pollo
-
si tuviera la etiqueta directamente sobre sí, en lugar de codificada
-
Aquí hay un screenshot de un sitio de compra via tickets y podemos ver
-
que da un par de opciones como comprar tickets para hoy o para un día futuro
-
Hay algunos problemas desde la perspectiva heurística con esta pantalla
-
Para los principiantes -y volveremos a este punto en un momento- el layout está un poco invadiéndolo todo
-
pero además está esta pantalla inermedia
-
que a mi criterio podría sacarse siguiendo un diseño más inteligente
-
Por ejemplo, traerte a una página
-
que ofrezca los shows del día y un dialog para cambiar el día
-
Entonces, configurando valores por defecto razonables, se pueden evitar obstáculos
-
Además de adelantarse con valores por defecto razonables, provee previsualizaciones valiosas
-
Este es un sitio de diseño que ofrece templates
-
Sin embargo, todos los templates están expuestos en una lista de textura, que no es lo más apropiado para la tarea
-
Hay que pensar si esto es realmente lo que uno quiere, y esa certeza es difícil de lograr
-
En contraste, este es un sitio de diseño que ofrece previsualizaciones de todos los templates disponibles
-
y así es mucho más fácil de ver cuál diseño te gusta
-
Lo siguiente, flexibilidad y eficiencia
-
Un ejemplo simple y directo de esto
-
es proveer shortcuts y atajos para los expertos
-
Este es el menú View del navegador Firefox
-
y es un gran ejemplo de cómo ofrecer flexibilidad y soporte para un experto de dos maneras diferentes:
-
Primero, vemos que hay shortcuts
-
y segundo, el menu View Source te permite recuperar el source de cualquier página que estés mirando
-
entonces se puede mirar bajo la capucha -no usual para la mayoría, pero muy valioso para expertos
-
Este es el buscador de Expedia hotel
-
y logra muy bien exponer fácilmente los casos comunes
-
las ciudades más populares se muestran con un radio button
-
Pero también, si querés ir a una ciudad menos popular,
-
hay un campo de ingreso libre para tipear lo que se desea
-
Es un buen ejemplo de la combinación de buenos valores por defecto con opciones
-
Las interfaces flexibles también resaltan en primer plano la información de ambiente relevante
-
Esta es una pantalla de BusyCal,
-
que permite ver el pronóstico del clima en la vista semanal del calendario
-
Aquí hay otro ejemplo de productividad: Gmail
-
donde, si uno clickea Spam sobre un recipiente que tiene la información para desuscripción
-
ofrece esta acción automáticamente
-
Y pienso que esto es un ejemplo de cómo podemos ser proactivos
-
necesitamos hacerlbo bien y ofrecer un beneficio claro, inmediato y relevante a la tarea
-
Generalmente, a la gente no le gustan mucho las interfaces proactivas que distraen, interrumpen, rompen el flujo natural o proveen información irrelevante
-
Otro buen ejemplo de soporte para un uso más intensivo es la oferta de recomendaciones sobre una página en particular
-
Aquí puede verse que si te gusta este trago, hay estos otros que probablemente te gusten
-
Otra vez: si vamos a ofrecer recomendaciones (u otra clase de proactividad), que sea RELEVANTE
-
Un ejemplo de Amazon, de discusión de productos para foros
-
que no tienen relación alguna con el producto que se está mostrando
-
solamente distrae al usuario de su objetivo principal -ellos se preguntan
-
por qué diablos estas cosas aparecen al pie de una página sin relación alguna con el contenido
-
Finalmente, mientras que la flexibilidad tiene un increíble valor, es sin embargo posible excederse
-
Esto es una fotografía de Bill Moggridge que muestra una entrevista con un usuario
-
que hackeó el control remoto para limitarlo únicamente a la funcionalidad que necesita
-
Y así, la flexibilidad puede a veces encontrarse en tensión con el minimalism
-
Nuestra octava heurística es "estética y diseño minimalista"
-
Cuando la gente ve una página, por ejemplo, la ven en una pantalla
-
y entonces no ven toda la página pero un poco de pantalla en cada maomento
-
Lo que ven es lo que se conoce con el nombre de "sobre el doblez" (viene de los diarios)
-
Aquí hay un ejemplo de una pantalla donde la información relevante
-
el pronóstico del tiempo- no es visible por sobre el doblez
-
Todo lo visible sobre el doblez es acerca de chrome y cosas extras
-
pero la infromación imporante no está, hay que scrollear hacia abajo para encontrarla
-
Y sobre la base de que estamos optimizando la experiencia del usuario
-
sería mejor tener la información relevante por sobre el doblez
-
Tal como veremos en diseño gráfico, si uno va a usar colores y otras señales
-
debemos usarlas con significado, juiciosamente
-
Aquí hay un ejemplo de una página de checkout que usa muchos colores
-
y presenta una real cacofonía en términos de organización de la pantalla, sin ningún propósito
-
y aquí una pantalla de Google's help
-
Google generalmente es tomado como ejemplo de diseño minimalista porque generalmente lo hacen bien
-
quiero mostrarles un ejemplo donde, en mi opinión, podría eliminarse información
-
o mejor dicho eliminarse ruido
-
me refiero a esto aquí
-
donde lo que más se ve son los bordes de la tabla y esas cosas
-
cuando lo que uno realmente quiere son los datos de la encuesta
-
y así, si uno se deshace de esas líneas extras y esa basura de gráficos
-
claramente se ven las partes que a uno realmente le interesan
-
Aquí hay un log en una pantalla que en mi opinión hace bien el trabajo de mantener la dirección de correo en un solo lugar
-
porque está justo arriba aquí, y entonces uno puede decir
-
si es un cliente que ya existe o uno nuevo.
-
Si es un cliente que ya existe, ingresa el password; si es un nuevo cliente
-
como muestra esta pantalla aquí, crea un nuevo password y lo tipea y continúa a partir de allí
-
En contraste, este sitio de búsqueda de vuelos contiene exactamente la misma información-
-
cantidad de paradas- en dos lugares diferentes
-
Es posible que sea para clarificar
-
pero es al costo de complejidad, y también al costo de una pantalla vertical
-
donde por listar algo dos veces, mandás lo demás para abajo
-
A menudo, si somos dinámicos en lo que mostramos o prevemos cómo mostrar las cosas sólo una vez
-
logramos que toda la información relevante se ajuste en la pantalla claramente y con menor desorden
-
una de las presunciones más fáciles de hacer es que el usuario actuará con cuidado
-
y se tomará tanto tiempo para usar el sitio como el tiempo que invertimos construyendo el sitio...
-
asumiendo esto enseguida llegamos a tener un kilombo de features y campanitas y pitos y hasta chismes
-
Pero eso no es lo que la gente desea
-
aquí hay un ejemplo de un sitio de préstamo estudiantil que ofrece la capacidad de agregar widgets al home
-
Ahora, esta es la clase de sitio en el que uno entra quizás dos veces al año (risas)
-
No es un sitio que uno vaya a adornar con muchos gadgets
-
Ahora hablemos de ayudar al usuario a reconocer, diagnosticar y recuperarse de los errores.
-
El primer paso es haciendo que el problema se vea en forma clara.
-
Aquí hay una reserva de hotel donde lo único que dice el sitio es: "Error.mes.atrás".
-
es difícil saber qué hacer...
-
Aquí hay uno un poquito mejor: un sitio de registración para eventos
-
Y lo que vemos es que hay que llenar todos lso campos requeridos.
-
Ok, está mejor, pero cuáles son los campos que no están llenos?
-
Esta página tiene varias pantallas de largo; hay muchas cosas para chequear
-
Cuál de todas estas cosas olvidé chequear?
-
Mejor podría mostrarse una página con las dos cosas que olvidé
-
en lugar de toda la info obligándome a scrollear desde el inicio nuevamente
-
Aquí hay un dialog box que muestra y explica claramente el error
-
pero no ofrece solución
-
dice que no hay espacio suficiente en el iPod, qué mal.
-
Una solución más efectiva sería ofrecer alguna vista que indique qué es lo que está ocupando lugar
-
junto con maneras de limitar la cantidad de media
-
que estás tratando de cargar, de mdoo que pueda caber.
-
Y en este caso particular, las versiones más recientes de esta aplicación, han mejorado este problema.
-
Un error común en los mensajes de error es ofrecer una dialog box para todas las posibilidades
-
aquí hay una pantalla tratando de abrir un archivo cuyo tipo no se conoce
-
y dice: "la aplicación que usted eligió ('(null)'), no se encuentra.
-
revise el nombre del archivo o elija otra aplicación".
-
Bueno, sería mucho mejor si habláramos en lenguaje de usuario:
-
"null" no es la mejor opción
-
y tamibén ofrecer una aplicación razonable para el tipo de archivo
-
Muchas tareas en la web están relacionadas con búsquedas
-
Aquí hay una pantalla de la búsqueda de un vuelo
-
donde la restricción especificada no da solución posible
-
para búsquedas complejas, si el usuario especifica restricciones no razonables
-
una de las mejores cosas que pueden hacerse desde el diseño
-
es ofrecer la apertura de esas restricciones de modo que se pueda trabajar mejor
-
Años atrás, trabajé con Chuck Rich en Mitsubishi Research, en Boston
-
Y él estaba trabjando en un sistema de investigación llamado Collagen
-
que buscaba maneras de abrir de forma inteligente esas restricciones
-
-entre otras cosas- para ayudar a los usuarios a hacer mejor su trabajo
-
Y este tipo de apertura inteligente es realmente una técnica poderosa
-
Quisiera terminar hablando acercad e los errores de una manera positiva
-
Aquí hay un navegador cuyo dialog box te informa
-
que si vas a una URL que podría ser sospechosa
-
el navegador te avisará que probablemnte no desees estar allí
-
y te ofrece sacarte y explica con más detalle sobre el por qué del bloqueo de la página
-
No hay probablemente en el futuro otras innovaciones que pueden suceder en este tipo de trabajo de error.
-
Pero pienso que es una buena manera de comenzar y mucho mejor que lo que es actualmente
-
Y nos trae a nuestra última heurística, que es mejorar la ayuda y la documentación
-
Es fácil pensar la ayuda como fuera del alcance de la aplicación
-
Afortunadamente, en la web, la ayuda y la documentación se han integrado más
-
Uno de mis ejemplos favoritos son los sitios de aprendizaje de programación como php, .net
-
donde se aprende a través de los ejemplos provistos
-
Aquí hay estrategia basada en los ejemplos en el sitio de UPS.
-
Ofrece la oportunidad de suscribirse a listas de correo
-
Y si unos e pregunta qué ofrece cada lista
-
en otra pantalla las puse todas juntas
-
Muestran ejemplos del contenido de cada una de las listas.
-
Es una estrategia de preview poderosa
-
y aquí hay un ejemplo de un dialog box de impresión que dice cuál es el problema
-
pero no ofrece ayuda para la búsqueda de solución
-
Para los principiantes, pineso que alguien quisiera saber, si las cosas que están fuera del margen son relevantes?
-
Es solamente que está formalmente fuera de los márgenes, pero en realidad nada se ha cortado?
-
o hay partes importantes del documento que han sido cortadas de la página?
-
y cuál sería el mejor camino para resolverlo?
-
Debo cambiar el tamaño de la página, la orientación, o mover pies y encabezados de página? Ayúdenme a resolverlo!
-
Aquí hay un dialog box para el merge de fotos de Adobe
-
que es una feature muy copada si la configurás correctamente.
-
sin embargo, se necesita especificar varias fotos como entrada al proyecto
-
Y esto es algo que realmente el dialog box podría ofrecer como guía
-
y luego mostrar resaltando dónde hay que seleccionar las fotos
-
aquí hay dos pantallas de eBay
-
a la izquierda tenemos un enfoque interesante, donde eBay construye su propio sistema de mensajes interno
-
Y, para ser coherentes, decidimos que esto es lo correcto
-
y que el sistema interno de mensajes es mejor que responder directamente vía mail
-
no estoy seguro de eso, pero lo asumimos por ahora
-
ellos han hecho una cosa inteligente, que es, cuando respondés, la direcciónd e reply dice
-
"Hey, use el botón amarillo" y en el mdio de la respuesta, ves "Ooops, cometí un error.
-
Ok, necesito usar el sistema interno de mensajes".
-
una jugada interesante.
-
y aquí hay otra pantalla de eBay, a la derecha
-
donde se presenta una nueva funcionalidad
-
por ejemplo, poder comparar varias opciones en la tarjeta
-
puede llamar a esa función desde la interface de usuario
-
Y creo que hacer que la ayuda sea parte de la misma interface de usuario
-
es una de los avances más promisorios en esta área
-
y algo que solía ser menos usual en aplicaciones de escritorio
-
aquí hay un ejemplo de algo que me parece interesante
-
es el dialog de desuscripción para una lista de correo
-
y si chequeás "recibo demasiados correos"
-
te dice "Esperá, podés cambiar la frecuencia"
-
y podés recibir con un intervalo mayor
-
Creo que realmente esta es una buena solución
-
porque a veces uno desea recibir el correo, pero no demasiado
-
En otros casos, puede ser que uno vea esto como acosante
-
y desear que se haga rápido
-
pero en cualquier caso, pienso que sería una solución interesante y creativa
-
Creo que es realmente importante que la ayuda sea honesta
-
y existe una clase de ayuda e información adicional
-
que creo que al menos en los hechos, no provee al usuario con la información que necesita
-
me refiero a los EULAS e ifnormación de licenciamiento
-
aquí tenemos dos ejemplos de pantallas de EULA donde es fácil clickear sin leer nada
-
e intuyo que todos clickean sin leer
-
Si nadie necesita conocer los términos del licenciamiento, ok
-
pero creo que la razón por la cual existe el acuerdo y aceptación
-
es precisamente porque tiene consecuencias de las que el usuario debe enterarse
-
Entonces, si querés diseñar un sitio que incluye términos de licenciamiento para los usuarios
-
pensá en "¿habrá alguna forma de por lo menos resumir las cosas importantes que ofrezco al usuario para su aceptación y acuerdo?"
-
evitando que los usuarios clickeen sin leer
-
y para cerrar con una nota positiva, una cosa buena
-
recomendada para la ayuda en un sitio es que el usuario se divierta
-
llenar formularios es usualmente aburrido
-
aquí un ejemplo de un sitio de un hotel, donde las opciones incluyen un poco de humor
-
y ese cachito de informalidad puede enriquecer la experiencia de usuario
