Principios de diseño | Estudio de caso de los diez principios de usabilidad de Nielsen

¿Qué tipo de producto crees que es un buen producto?

¿Te suena familiar esta pregunta? ¿Alguien te preguntó eso durante la entrevista?

¿Cuáles de los productos que utilizamos habitualmente son buenos productos?

Cuando hablamos de un producto APP, ¿qué es lo que más te preocupa como usuario?

En general, ¿es este producto fácil de usar? ¿Las funciones son complejas?

En lugar del color de la interfaz de usuario del producto. ¿Se ve bien?

¿Molan las dinámicas interactivas?

Internet ha penetrado en la vida de todos y nos afecta todo el tiempo.

Un buen producto nos brindará comodidad y hará nuestra vida simple y hermosa;

Algunos productos resultarán incómodos de usar y una mala experiencia con el producto hará que nuestra vida se vuelva complicada y problemática.

Por lo tanto, que un producto sea bueno o no y que pueda usarse durante mucho tiempo depende directamente de la experiencia del usuario.

La experiencia del usuario se centra en satisfacer las necesidades del usuario y brindarle una buena sensación.

A continuación, hablemos de los diez principios de Nielsen. Este es un método específico y completo para probar la viabilidad de la experiencia del usuario.

¿Quién es Nelson?

Jakob Nielsen es doctor en interacción persona-computadora y se graduó en el Centro de Transmisión de Datos de Copenhague. Posee 79 patentes estadounidenses, la mayoría relacionadas con métodos para hacer que Internet sea más fácil de usar. Junio ​​de 1995 65438 Los "Diez principios de usabilidad" se publicaron el 1 de octubre. Desde 1995, ha enseñado a miles de diseñadores web sobre usabilidad web a través de su lista de correo Alertbox y el sitio web useit.com. Si bien algunas de sus opiniones pueden ser controvertidas, es, al menos a los ojos de los diseñadores web, un líder superior en usabilidad web. En abril de 2006, fue admitido en el Instituto de Interacción Humano-Computadora de la Sociedad Estadounidense de Computación y recibió el Premio a la Trayectoria por la Práctica de Interacción Humano-Computadora. También ha sido llamado "gurú de la usabilidad de sitios web" por The New York Times y "Rey de la usabilidad" por Internet Magazine.

Los diez principios de usabilidad de Nelson, conocidos como "heurísticas",

son una regla general amplia en lugar de pautas de usabilidad específicas.

Aunque se propuso en 1995, todavía se considera la regla introductoria para los diseñadores de interacción.

No podemos elevarlo a un estándar, sino aprenderlo como una experiencia.

Luego úsalo en combinación con diseños reales.

Debido a que Teacher Ni propuso diez principios de usabilidad desde el diseño web,

Lo que queremos combinar son las características de la Internet móvil actual.

Luego discuta los objetivos de la experiencia del usuario bajo el marco de los "Diez Principios de Nelson".

¿Nielsen Top 10? El principio de practicidad es:

01. ¿Cuál es el principio de visibilidad del estatus?

02. ¿Principio de relevancia ambiental?

03. Principio de deshacer y rehacer

04 ¿Principio de coherencia?

05. Principio Poka-yoke

06. ¿Principio de accesibilidad?

07. ¿El principio de flexibilidad y eficiencia?

08. ¿Cuál es el principio de escaneo fácil?

09. ¿Principio de tolerancia a fallos?

10. Principio de la ayuda humanizada

Analicemos cada ítem por separado~

1?. ¿Principio de visibilidad del estado?

El sistema debe informar al usuario lo que está sucediendo y brindar la retroalimentación adecuada en el momento adecuado.

No engañes a los usuarios, la comunicación es la base de todas las relaciones, pase lo que pase. O equipo.

Ejemplo: en Taobao, me pidió que bajara y "soltara para actualizar", pero la actualización aún no había comenzado después de que publiqué, el estado cambió a "refrescándose", lo que indica que estaba actualizando; ahora.

Este diseño nos dice cuál es la interfaz actual y qué está haciendo. Podemos ver las descripciones de texto correspondientes durante todo el proceso de cambio de función.

Otros ejemplos: carga al desplegar para actualizar, mensaje de finalización de carga, pago exitoso, pago exitoso, error de pago real, etc.

2.? Principio de idoneidad ambiental

Las funciones y servicios se aproximan a los escenarios en los que los usuarios los utilizan y están en línea con la experiencia de los usuarios en el escenario actual.

Las funciones y servicios del producto deben acercarse al mundo real, haciendo que la información sea más natural y lógicamente más fácil de entender para los usuarios.

Por ejemplo: cuando compramos cosas en la tienda, a menudo escuchamos el sonido de "Llegó Alipay: 5 yuanes", que es un diseño cercano al medio ambiente. Los comerciantes necesitan confirmar si usted ha pagado, pero a menudo están demasiado ocupados para comprobar lo que están haciendo a tiempo;

Con el diseño de esta función, incluso si el comerciante está ocupado con lo que está haciendo, aún puede comunicarse por voz para confirmar la recepción de su dinero.

Este diseño es amigable y conveniente tanto para empresas como para consumidores.

3?. ¿Principio de deshacer y rehacer?

Comprender y controlar la página actual al utilizar el producto.

Si el usuario opera por error, puede revocarlo en cualquier momento, teniendo el usuario suficiente libertad para utilizar el producto.

Ejemplo 1: Estábamos chateando entre nosotros en WeChat Cuando escribimos muchas palabras, solo descubrimos que había errores después de enviarlas. En este momento, podemos usar la función de recuperación de WeChat. Aún mejor, hay una función de "reeditar" al lado del mensaje de recuperación, que permite que el texto editado previamente regrese al cuadro de diálogo y se vuelva a editar antes de enviarlo. . Como se muestra en la siguiente figura:

Ejemplo 2: eliminar y recuperar fotos en el sistema iOS

4. Coherencia

El texto, los estados y los botones idénticos deben activar las mismas cosas y seguir las convenciones comunes de la plataforma. Es decir, el mismo lenguaje, funciones y operaciones son consistentes. Incluye principalmente los siguientes cinco aspectos:

1. Coherencia estructural

Mantener una estructura similar hará que los usuarios piensen, y el orden de las reglas puede facilitar el pensamiento de los usuarios. carga.

Ejemplo: cada elemento del módulo en WeChat tiene un estilo estructural unificado de "mensaje de texto con ícono", lo que permite a los usuarios comprender rápidamente cada módulo.

2 Coherencia del color

Los colores principales utilizados en el producto deben ser consistentes, en lugar de cambiar la página, el color será diferente.

Por ejemplo: el color del icono de Taobao y el color de la interfaz principal son naranjas, y algunas etiquetas y texto resaltado son naranjas. Además de la información efectiva en la imagen, toda la interfaz se presenta en tres colores: gris, blanco y naranja, y la interfaz mantiene una buena coherencia;

3. p>Se puede encontrar en el producto Al actualizar, los usuarios pueden mantener su conocimiento del producto original y reducir los costos de aprendizaje de los usuarios.

Ejemplo: WeChat utiliza la interacción de operación deslizable hacia la izquierda en cuadros de diálogo y libretas de direcciones, como se muestra a continuación:

4 Coherencia de comentarios

Botón de operación del usuario o. Cuando se trabaja en un proyecto, el efecto de retroalimentación de los clics debe ser consistente.

Ejemplo: después de hacer clic en cada grupo QQ, la lista de miembros del grupo se expande hacia abajo

5. Coherencia del texto

Presentado a los usuarios del producto; El tamaño, el estilo, el color y el diseño del texto deben ser coherentes.

Por ejemplo: tome las fuentes de varias interfaces clave de WeChat: la estructura de contenido de las tres interfaces principales es diferente, pero las fuentes y el espaciado de los títulos de las listas son los mismos, lo que hace que toda la APLICACIÓN se vea muy cómodo visualmente. ;

5?. El principio de poka-yoke

¿Es mejor utilizar el diseño para prevenir que los mensajes de error? Evite que ocurran tales problemas. Cuando el usuario selecciona una acción. Antes de que nazca, es necesario evitar que los usuarios se confundan fácilmente o tomen decisiones equivocadas.

1. Restringir el alcance y las condiciones comerciales;

Ejemplo: antes de ingresar el código de verificación, el botón de inicio de sesión en la parte inferior aparece atenuado y no se puede hacer clic. Solo se podrá hacer clic en el botón de inicio de sesión en la parte inferior una vez que esté completamente completado. Esto es para evitar que los usuarios cometan más errores;

2. ¿Qué hacer con las cirugías riesgosas? Confirmación secundaria;

Ejemplo: al eliminar a un amigo, evite errores apareciendo dos veces.

6.? El principio de fácil acceso

Reduce la carga de memoria del usuario y brinda a los usuarios la información que necesitan obtener en el momento adecuado.

1. Proporcionar a los usuarios funciones como historial, atención, colección, etc.;

Por ejemplo: iQiyi proporciona a los usuarios registros de lectura y mi colección para ayudarles a recordar:

2.? Elija en lugar de invertir e intente reducir los costos de inversión;

Ejemplo 1: el software de llamada de taxi obtiene automáticamente la ubicación actual;

Por ejemplo, después de que el sistema IOS recibe el código de verificación , lo lleva automáticamente al teclado y hace clic directamente en Enter;

7.? Principios flexibles y eficientes

Para los nuevos usuarios, las funciones deben ser claras y claras, mientras que para los usuarios antiguos, las funciones de alta frecuencia deben usarse de manera rápida y eficiente. No ocupes una parte importante de tu información innecesariamente para un tipo de usuario. Principalmente reflejado en tres aspectos:

1. Personalizar la posición de visualización de funciones o módulos

Por ejemplo: las aplicaciones en la página de inicio de Alipay se pueden personalizar según sus propias preferencias; definir aplicaciones de uso común, ordenar, eliminar, agregar, etc. De esta manera, los usuarios pueden personalizar el método de distribución de la aplicación que más les convenga según sus intereses personales. Esta es la llamada personalización del usuario de funciones comunes, como se muestra en la siguiente figura:

2.? Resuma automáticamente los "usados ​​con frecuencia" para mejorar la eficiencia del uso;

Por ejemplo: habrá un módulo "usado recientemente" en la ventana emergente de emoticones de la interfaz de chat de WeChat para clasificar los emoticones que se usan con mayor frecuencia. usados ​​o utilizados por particulares. Al usarlo, los usuarios pueden encontrar rápidamente sus emoticonos favoritos o de uso común, lo que mejora la eficiencia del chat. Cada pedido en "Mis pedidos", incluido Ele.me, se puede realizar con un solo clic, como se muestra a continuación:

3. ¿Acortar el trayecto quirúrgico y mejorar la operabilidad? Eficiencia de uso y experiencia;

Por ejemplo: en el cuadro de diálogo de WeChat, cuando hace clic en " " para que aparezcan las siguientes opciones de operación, la foto que acaba de tomar o que tomó aparecerá de forma predeterminada, que es conveniente para que los usuarios busquen directamente, y aparece una lista de operaciones de acceso directo después de presionar prolongadamente la APLICACIÓN, como se muestra a continuación:

8.? Principio de escaneo simple

Traducción literal: estética y diseño minimalista; las páginas no deben contener información irrelevante o rara vez necesaria. Cada información adicional en la página reducirá la visibilidad relativa del contenido principal.

Ejemplo: La información de la siguiente lista es toda la información que interesa a los usuarios, como costos de envío, tiempo de entrega, distancia, etc. La interfaz de selección de boletos de Ctrip resalta el tiempo y el precio del boleto más importantes, lo que permite a los usuarios entenderlos de un vistazo, como se muestra en la siguiente figura:

? 9?. ? Principio de tolerancia a fallos

Traducción literal: ayudar a los usuarios a identificar, diagnosticar y recuperarse de errores; hacemos todo lo posible para evitar que los usuarios cometan errores, pero cuando ocurren errores, debemos hacer todo lo posible para apaciguar la frustración de los usuarios. .

? ¿Usar imágenes y texto en lugar de "404" para informarle claramente al usuario? Errores y soluciones.

Ejemplos: mensaje de actualización cuando falla la carga de la interfaz, verificación del número de teléfono móvil al iniciar sesión. Si el formato del teléfono móvil es incorrecto, se le indicará al usuario que el formato del teléfono móvil es incorrecto y correcto.

? 10?. ? Ayuda humanizada

La mejor manera de proporcionar indicaciones de ayuda es:

1. Sin indicaciones: muy fácil de entender, los usuarios sabrán cómo operar con solo mirar la interfaz sin indicaciones;

p>

2. Aviso único: los usuarios solo necesitan que se les pregunte una vez para saber cómo usarlo;

Ejemplo: nueva función común de arranque, ¿arranque? Espera, por ejemplo:

3. Recordatorio permanente:? Consejos importantes para guiar o ayudar a los usuarios;

Por ejemplo: al transferir dinero a través de Alipay, siempre hay un mensaje de confirmación de seguridad en la parte superior, y también hay un mensaje de tarifa de servicio al transferir dinero, como se muestra en la siguiente figura:

4. Documentación de ayuda: para software un poco más complejo, aunque debe ser lo más simple posible, es necesaria documentación de ayuda;

Ejemplos: "Ayuda y comentarios" en la interfaz de configuración de WeChat, "Comentarios de ayuda" que aparecen al transferir dinero a través de Alipay, la interfaz de preguntas frecuentes después de hacer clic;

Lo anterior es mi comprensión y una interpretación de ejemplo de los diez principios de diseño de interacción de Jakob Nielsen. Espero que sea de ayuda para todos. Si también está interesado en estos aspectos o tiene alguna idea después de leerlo, discútanlo juntos.