Estos son consejos para mejorar la experiencia de usuario de sus proyectos SIN horas de experiencia del usuario, creación de prototipos en papel o cualquier otra palabra de moda.

(En serio, busque el "pensamiento de diseño". ¡100,500 resultados!)

¿Para quién es este artículo?

• Desarrolladores Ha creado su propia aplicación, pero cada usuario está atormentado con ella. Y ya sabes: si te dicen esto en persona, entonces el asunto es realmente malo.
  
• Diseñadores gráficos . Estudiar UX en artículos en Internet es una ... una forma muy dolorosa de morir.
  
• Gerentes de proyecto . Ya eres un cuarto diseñador de UX. Sería bueno aprender el resto de las habilidades.
  
• Y los otros ladrones . Todos los que acumulan sus proyectos en las tardes y fines de semana. También será útil.

Si ya eres un diseñador de UX, es poco probable que el artículo te vaya a la perfección. Me salteé áreas enteras para concentrarme completamente en la habilidad principal de la que carecen los nuevos diseñadores de UX (o personas de áreas relacionadas que tienen que hacer esto).

Esta habilidad es "entender el idioma de la interfaz" .

Al comienzo de mi carrera, me sorprendió la frecuencia con la que los clientes pasaban borradores iniciales (o prototipos activos y en vivo) con errores UX completamente obvios . No estoy hablando de errores que pueden identificarse después de una larga prueba A / B. Estoy hablando de los errores simples y más estúpidos .

Por falta de un mejor ejemplo:


En algún lugar hay un grupo de desarrolladores que conocen HTML pero no saben la diferencia entre un botón de opción y una casilla de verificación

Mis clientes no son tan malos, pero maldita sea, no necesita tener siete tramos en la frente para comprender: si puede seleccionar UN elemento de la lista, necesitará INTERRUPTORES, no banderas. Para comprender esto , solo necesita conocer el idioma de la interfaz. Y para mí es el más loco. La fluidez en la interfaz está disponible para todos . No necesitas una universidad, no necesitas cursos, etc.

Para ser honesto, solo necesita la presencia del espíritu para (A) detenerse y pensar cuando una aplicación lo avergüenza o le molesta, (B) verbaliza lo que le molesta / molesta en la interfaz y luego (C) descubre cómo evitar esto error específico en tus propios proyectos.

Repita este procedimiento constantemente y conviértase en un profesional en el menor tiempo posible.

Hoy quiero hablar sobre cuatro pequeñas reglas que ayudarán a eliminar estos puntos débiles en sus propios proyectos. Estas heurísticas son uno o dos niveles más profundos que "usar interruptores si el usuario puede seleccionar solo un elemento". Pero, si cumple con los requisitos de esta lista, sus proyectos serán mucho más fáciles de usar desde el principio, lo que liberará tiempo para otras cosas más importantes.

(¡Entonces comience a escuchar conferencias de otros diseñadores de UX sobre los últimos métodos de investigación de usuarios académicos!)

Esto es lo que cubrimos:

1. Ley de localidad
   
2. Cualquier cosa menos listas desplegables
   
3. Prueba de los ojos
   
4. Estudios de caso

No hay preguntas Entonces adelante.

1. La ley de la localidad.

Coloque los elementos de la interfaz donde causan cambios.

En igualdad de condiciones, los elementos de la interfaz deben colocarse al lado del lugar donde se produce el cambio . Porque cuando el usuario quiere hacer cambios en el sistema, involuntariamente mira el lugar donde ocurrirán estos cambios .

Digamos que tienes una lista de artículos. ¿Dónde colocar el botón "AGREGAR NUEVO ARTÍCULO"?


Pregunta: Bueno, ¿dónde está el cambio ?

Respuesta: al final de la lista.

Ok, pon un botón al final de la lista.

ESPERA Crees que esto es bastante simple. Pero hay una tentación.

La tentación es simplemente ponerlo donde hay espacio libre.

Por ejemplo, si tiene un menú, entonces podría pensar: “¡Tenemos un menú! ¿Por qué no simplemente ponerlo en el menú?


Violación de la ley de localidad en la interfaz musical.

La respuesta es obvia: porque nadie la buscará allí.

(Y la respuesta completa radica en el hecho de que si simplemente coloca los elementos en lugares libres, al final la aplicación quedará inutilizable para el caos, del que las personas huirán lo antes posible).

¿Crees que estoy bromeando? ¿Alguna vez conociste esta interfaz?


Violación de la ley de localidad en la interfaz de Evernote

Una alternativa igualmente mala y generalizada es simplemente tomar la decisión que vio en Dear Technical Company, sin pensar si esto tiene sentido para usted . "¿Necesita un botón" Agregar "? No hay duda Vi uno de esos botones. ¡Sostén la cerveza!



Echa un vistazo Otro botón donde los usuarios nunca lo buscarán . En términos generales, sospecharán que este botón agrega algo nuevo al gran espacio en blanco vacío. Porque es allí donde está ella.

Sus usuarios quieren que siga la ley de localidad.

Así que ahora usémoslo.



Bam

Quizás eres un diseñador nato de UX y siempre imaginas visualmente lo que sucederá si hay miles de elementos en lugar de cinco , y entiendes que habrá un problema. Si el usuario crea una tonelada de listas de reproducción, el botón bajará cientos de píxeles.

Por lo tanto, puede ser mejor anclar el botón al final de la lista para que siempre esté visible, independientemente de la cantidad de listas de reproducción.

¡Brillantemente! Eso es exactamente lo que hizo Spotify.


Para obtener una bonificación (1) use el botón incorporado hasta que salga de la pantalla, y en ese momento cambie al elemento anclado y (2) haga que sea más visible que el botón Spotify, que personalmente noté solo unos meses más tarde, haciendo clic derecho sin ayuda ¡Haz clic para agregar canciones individuales a las listas de reproducción!

Otra opción es reconocer que no podemos mostrar el botón de manera confiable y consistente al final de la lista. ¿Dónde está el lugar adecuado más cercano para ella?

Y la respuesta (creo que es bastante obvio) está en la parte superior de la lista .


Este es mi deseo

¡Maldita sea! Eso es exactamente lo que hizo Rdio, el competidor de Spotify, antes de que Pandora lo comprara.


Reconstrucción de la memoria (como toda realidad, si lo piensas)

La conclusión es clara. Nunca venda su empresa y siempre, siga siempre la ley de localidad.

(En realidad, hay tres leyes de localidad, y "colocar elementos de la interfaz de usuario donde influyan en el cambio" es solo la primera. Si está interesado, lea aquí ).

¡Siguiente!

2. Cualquier cosa menos listas desplegables

Cada vez que sienta la tentación de usar la lista desplegable, piense en todas las alternativas posibles.

Una lección no obvia en el diseño de UX es que las listas desplegables suelen ser la peor opción .


Bienvenido al infierno!

No siempre son malos, pero los siguientes factores juegan en tu contra:

• Las listas desplegables requieren demasiados clics / clics . Uno para abrir, varios más para desplazarse a la opción deseada (en el teléfono móvil), otro para seleccionar la opción correcta y (en el teléfono móvil) el último para cerrar (compare con un clic para seleccionar de las opciones enumeradas).
  
• ¡Las listas desplegables no muestran opciones ! Para verlos, primero debe hacer clic en la lista, y en el teléfono móvil a menudo no se muestra la lista completa a la vez.
  
• En largas listas desplegables es difícil navegar . Puede haber más de 195 elementos en la lista desplegable de países. En algún momento, casi cualquier otra versión de la IU será más rápida que desplazarse por la lista desplegable.

Es bastante simple, así que veamos las principales alternativas a la lista desplegable.

Si la elección es entre dos opciones ...

Tenemos algunas formas fantásticas de elegir una de dos opciones. Todos ellos (a) muestran inmediatamente las opciones y (b) requieren menos clics / clics.

Para preguntas que no tienen una respuesta "predeterminada", pruebe el botón segmentado .



Si hay un estado predeterminado que coincide con 'APAGADO', intente marcar la casilla . También es bueno para configuraciones que no afectan el cambio hasta que el usuario haga clic en "Guardar" o "Enviar" .



El interruptor funciona de manera similar: es bueno para los cambios que deben aplicarse de inmediato .



Las banderas y los interruptores solo tienen sentido cuando hay dos opciones. Los siguientes elementos son útiles cuando el número de opciones es de dos a aproximadamente cinco, por lo que puede probar algunas de ellas.

Si la elección es entre 2-5 opciones ...

Arriba, miramos los botones segmentados (aquí también se usan). Vale la pena señalar que con más opciones, los botones segmentados verticales brindan una mayor flexibilidad a lo largo del texto.



Los interruptores (botones de radio) funcionan de manera similar, pero son especialmente útiles para mostrar subelementos de cada opción.



Para una visualización detallada de varias opciones, las tarjetas son muy adecuadas.



Me gusta el truco de mostrar las opciones visuales literalmente, no una lista.


Al parecer, a Tesla también le gusta.

Si la elección es entre muchas opciones ...

Cuando hay muchas opciones y el desplazamiento es molesto, considere completar el tipo de escritura anticipada . Parece una barra de búsqueda que muestra los mejores resultados al ingresar caracteres.

Si eliges una fecha ...

Para una fecha, las listas desplegables son las peores. Si alguna vez hago eso, entonces realmente fallé como diseñador de UX.



Que alternativa Bueno, depende de las circunstancias. Primera pregunta: ¿qué tipo de fecha eliges ?

1. Fechas de Poisson . Primero, fechas más probables , y luego en la lista, fechas menos probables. Por ejemplo, la fecha de una reunión o vuelo programado.
   
2. Fechas con alta volatilidad . Fechas que tienen aproximadamente la misma probabilidad en un amplio intervalo de tiempo . Por ejemplo, un cumpleaños.

(Sí, llamé "fechas de Poisson" en honor a la distribución matemática :-)

Los diferentes tipos de controles son adecuados para diferentes tipos.



Para las fechas de Poisson, queremos HACER LA SIMPLIFICACIÓN MÁXIMA de fechas en el rango más probable (por ejemplo, para programar una reunión, puede ser el siguiente, digamos, 14 días). Es perfectamente normal seleccionar una fecha fuera de este rango será un poco más difícil.

El control de calendario cumple completamente estos requisitos para las fechas de Poisson. Si sabes que es muy probable que la fecha caiga dentro de las próximas 2-4 semanas, estás en chocolate.



De manera bastante creativa, Google Flights por defecto le ofrece un vuelo en aproximadamente dos semanas, lo que a veces causa confusión ("¡No elegí esto!"), Pero esta es probablemente la opción más probable para la distribución de Poisson.



El cuadro de texto de fecha es probablemente la mejor opción para fechas con alta variabilidad, donde (A) no hay razón para preferir una fecha sobre otra, es decir (B) todas las opciones son igualmente difíciles de elegir.


Recuerda que input [type = date] es tu amigo ... al menos en el escritorio

Si eliges un número ...

Los números vienen en muchas formas. Lo más probable es que sienta la tentación de poner una lista desplegable para la cantidad de algo: boletos, personas, habitaciones, etc.

¿Con qué frecuencia necesita 1 boleto? Muy a menudo .

¿Con qué frecuencia necesitas 10 boletos? No demasiado

¿Con qué frecuencia necesita 10,000 boletos? ¿Es esto una especie de broma cruel?

Aquí nuevamente tratamos la distribución de Poisson y debemos usar un control desplazado a números más bajos: por ejemplo, un paso a paso .



Para números en un amplio rango (por ejemplo, números de seguro social), todavía no iba a usar la lista desplegable ... espero .

¿Puedo usar listas desplegables al menos en alguna parte?

Por supuesto

Recuerda que funcionan bien cuando ...

• Los usuarios rara vez necesitan cambiar el valor predeterminado.
  
• Hay muy pocas opciones . Por ejemplo, en el control de iOS, solo tres opciones son visibles de forma predeterminada.
  
• El usuario no está en el teléfono móvil (en el escritorio, muchos de estos problemas se mitigan)

Quizás el más observador entre ustedes haya notado que en la interfaz de Google Flights, que elogié anteriormente, ¡en realidad hay tres listas desplegables notables !


Lo que es notable, en la interfaz móvil no hay una lista desplegable de 'Economía'

Realmente hicieron un buen trabajo aquí. Los posibles problemas de usabilidad se mitigan rápidamente con lo siguiente:

• Controles especiales que, cuando se presionan, muestran todos los parámetros (incluso en un teléfono móvil) y reemplazan cuatro listas desplegables (adultos, niños, bebés en el asiento, bebés en sus brazos) con cuatro pasos en una lista desplegable .
  
• Eliminar la lista desplegable 'Economía' en la interfaz móvil
  
• Pocas opciones y valores predeterminados inteligentes para cada elemento

Esta bien Vamos más allá.

3. Prueba de estrabismo

Si entrecierra los ojos, lo más importante debe ser lo primero que llame la atención, y los elementos menos importantes: lo último.

Pregunta de seguridad: ¿qué debe hacer un usuario para usar esta página ?

(Nota: lo solté, así que sigue mis instintos, pero puedo darte una pista: este es el formulario de entrada de datos)



Sugeriría dos cosas :

1. Establezca todas las casillas de verificación relevantes (??) en el área amarilla
   
2. Haga clic en el botón azul Enviar

¿Tú también lo pensaste?

Error y error.

1. Las "banderas" son en realidad campos muy pequeños para ingresar datos textuales (si lees la sección anterior, sabes que debería haber steppers).
   
2. Lo más importante ("Opciones de búsqueda", por cierto, esta es una forma muy confusa de decir "Enviar") está enmarcado por un botón gris y discreto. Una cosa mucho menos importante ("Ayuda") está justo al lado, pero más grande y más visible.

La prueba de los ojos entrecerrados dice que lo más importante debería ser lo más notable . ¿Qué es lo más importante aquí? Este es un cuadro de texto (o un paso a paso;) y un botón "Enviar".

Si va más allá, la página siguiente es aún peor.



¿Qué presionará: el botón gris a la izquierda o el mismo botón gris a la derecha ?

¡Espero que hayas elegido el izquierdo!


A toda prisa en este formulario, primero hice clic en el botón Ayuda. Ouch Cuando entré por segunda vez, hice clic en "Atrás", incluso escaneé los nombres de ambos botones con fluidez, porque en el 99,999% de otros sitios (con la dirección de la letra de izquierda a derecha), el botón "Atrás" siempre se deja

Nuevamente, si entrecierras los ojos, no puedo decir qué es importante.

Al igual que la ley de la localidad y la exclusión de las listas desplegables, la prueba de la mirada es bastante simple. Corrección del esquema en 30 segundos.


En un rediseño real, me gustaría poner una selección del número de tickets en la MISMA PÁGINA. Pero esta es una ley diferente para un momento diferente

Funciona



Dilo tu mismo. Cuatro interruptores y un botón. Y un pequeño enlace a continuación.

No estoy tratando de encontrar fallas en el sitio web AlaskaTrain.com , esto es común.

Aquí está la pantalla de registro para mi red social favorita basada en las recomendaciones de Foursquare (bien visto, por supuesto).



¿Cómo enviar realmente los datos ingresados ​​(lo más importante)?

Sugerencia: el botón está oculto detrás del texto plano en la esquina superior derecha.



Pero Foursquare aquí simplemente sigue los estándares de diseño de Apple. Desafortunadamente, a menudo se encuentra una violación de la prueba de estrabismo incluso entre los líderes de la industria.



Una forma de identificar el elemento principal en una página es considerar cuánto de las visitas a la página incluye una acción particular. Aquí están los indicadores relevantes del programa Anki (un programa para memorizar palabras, expresiones y cualquier otra información usando repeticiones de intervalos - aprox. Por.).



Por cada cien cartas que he visto, iré a ...

• Mostrar respuesta (aproximadamente 95 veces)
  
• Volver a la lista de tarjetas (dos veces)
  
• Comience a agregar tarjetas (dos veces)
  
• Algunas otras características (muy raras)

Tal análisis realmente sugiere qué interfaz funcionará mejor aquí.

• Acentuar las funciones más utilizadas (en una primera aproximación, el "más utilizado" es igual al "más importante")
  
• Afloje, oculte o elimine las características menos utilizadas

Pero esto es solo el comienzo (por ejemplo, me gustaría ver si los usuarios entienden que un botón con una ventaja sin una firma agrega tarjetas ). Pero con solo unas pocas heurísticas simples, hemos reducido la interfaz desordenada y confusa de diez elementos de la interfaz de usuario a solo cinco. Esto ... mira aquí mis cálculos ... la mitad.

Para obtener más información sobre la prueba de estrabismo, puede ver mi video que demuestra el rediseño de la aplicación web Timezon.es . O, si no tiene diez minutos, aquí hay un artículo ilustrado del blog con el mismo rediseño paso a paso.

4. Estudios de caso

Si presenta a los usuarios conceptos nuevos, entonces algunos ejemplos valen más que mil palabras que la gente aún no leerá.

Tenemos una extraña tendencia a tratar de explicar todo en palabras, cuando los ejemplos son mucho más claros.

Tomemos la nueva startup Teeming.ai, quien recientemente me contactó para consultar sobre el diseño de la página principal. Encabezados en esta página:

• "Teeming elimina el aislamiento en el trabajo remoto "
  
• "Teeming ayuda con la creación de equipos remotos ", también es " aprender, resolver problemas, divertirse y motivarse mutuamente "
  
• "Abundancia y video para síncrono [comunicación] "
  
• "Funciona con todas tus plataformas de video favoritas "

Pero aquí está la pregunta. ¿Qué hace realmente abarrotar?



Es dificil de decir. Está claro que esto está relacionado de alguna manera con ... ¿ positivo para los trabajadores remotos ? Pero no tengo ideas concretas de cómo esto me ayudará personalmente, así que no probaré este servicio, lo recomendaré, etc.

(Lo siento, Teeming, ya sabes, te amo).

A continuación, eche un vistazo a IFTTT . Tal vez ya sabes lo que están haciendo, luego finge que no lo sabes y trata de entenderlo en los títulos de la página principal:

• Ilumina automáticamente el camino para un chico con entrega de pizza (Dominoes + Hue)
  
• Publique sus fotos en todas partes y mírelas en todas partes (Instagram + Twitter)
  
• Haga que su asistente de voz sea más personal (Asistente de Google + Calendario iOS)

No tiene que enumerar muchos ejemplos para dibujar una imagen bastante clara: IFTTT reúne las aplicaciones para hacer lo que no son capaces de hacer por separado .

Lo loco es que en la página principal lo explican primero con el texto:

IFTTT ayuda a que sus aplicaciones y dispositivos trabajen juntos de una manera nueva. IFTTT es una forma gratuita de hacer que todas las aplicaciones y dispositivos se comuniquen entre sí. No todo en Internet funciona bien, por lo que nuestra misión es construir un mundo más conectado.

Bliiin

Pregunta: ¿qué explica mejor la idea de la aplicación ? ¿Ejemplos o descripción?

Pensar ejemplos. La descripción es completamente clara solo cuando veo algunos ejemplos de cómo esto puede ayudarme.

Pero se necesitan ejemplos no solo en la página de destino. Esto es lo que vemos cuando ingresamos por primera vez a la herramienta de administración de proyectos Basecamp .



En lugar de una página completamente en blanco, verá dos proyectos claramente preparados que enseñan con ejemplos cómo funciona toda la aplicación (y también dan una idea de cómo se verá el sistema cuando lo use por un tiempo).

En serio, puedo leer chats falsos de usuarios falsos que hablan sobre descargas de archivos falsos y tareas falsas en el programador .



¿Hay incluso una amigable ... montaña? ... que dice que puedo ver un video explicativo de dos minutos sobre este tutorial.

Y gracias, Sr. Gora, por la orientación: ¡los videos de demostración son otra forma de aprender con el ejemplo ! Los ejemplos muestran cómo se verán mis proyectos, y el video muestra cómo usar el software.

Brillantemente

Si su aplicación ofrece a los usuarios algo para crear , entonces una demostración es una excelente manera de mostrar las posibilidades con un ejemplo.

aplicación maravillosa para dibujar Procreate ganó el Apple Design Award, el Editor’s Choice en App Store y App Store Essential, y John Gruber lo calificó de "innovador", etc., pero ningún premio se deleita como ejemplos reales del trabajo creado en este editor.


Esta no es una aplicación de dibujo

wow ordinaria .

Esto no es MS Paint.

La demostración es una herramienta poderosa para comprender las capacidades de su aplicación.

Entonces, si su aplicación hace algo nuevo y desconocido o se basa en conceptos nuevos y desconocidos, debe aprender a aprender con ejemplos . Si los usuarios no han visto esta aplicación antes, entonces debe hacer inmediatamente la pregunta: ¿cómo dar un ejemplo para que quede más claro?

En resumen, mis formas favoritas de hacer esto son:

1. En cualquier página que intente ofrecer al usuario una función / aplicación, etc., muestre ejemplos de lo que se puede hacer con esta herramienta.
   
2. Utilice el método "bootstrapping", muestre datos de muestra y un ejemplo de cómo se verá una aplicación que funcione correctamente.
   
3. Incruste estratégicamente información de fondo (como artículos, videos o consejos) junto con ejemplos de uso.
   
4. ¿Tu aplicación te permite crear algo creativo? Muestre una galería de obras para estimular la imaginación.

¿Tiene sentido? Ven y termina.