Los principios clave del diseño eficaz

La comunicación es, sobre todo, la vanguardia del diseño eficaz. El Diseño Gráfico por naturaleza se trata de comunicar una idea. Independientemente del medio, este es el estándar de facto para un diseño eficaz.

Mirada histórica rápida:

Hace casi 200 años, William Playfair (1786) comenzó el uso serio de gráficos para observar datos. Hace más de 50 años se desató una batalla en las páginas del Journal of the American Statistical Association sobre los méritos relativos de los gráficos de barras y los gráficos circulares (Eells 1926; Croxton 1927; von Huhn 1927). Hoy en día, los gráficos son una parte vital del análisis de datos estadísticos y una parte vital de la comunicación en la ciencia y la tecnología, los negocios, la educación y los medios de comunicación.

Fuente: Percepción gráfica: teoría, experimentación y aplicación al desarrollo de métodos gráficos en Journal of the American Statistical Association, vol. 79, núm. 387. (septiembre de 1984), págs. 531-554.

Larkin y Simon (1987) sugieren que las buenas presentaciones gráficas ofrecen las siguientes formas de eficiencia cognitiva.

• Sustitución de operadores visuales : las pantallas gráficas a menudo permiten a los usuarios sustituir operadores visuales menos exigentes en lugar de operadores lógicos más complejos en lugar de operadores lógicos más complejos. Los operadores visuales (por ejemplo, comparaciones de distancia y color, juicios de coincidencia espacial) a menudo pueden brindar a los usuarios la misma información que los operadores no visuales más complejos.

• Reducción de la búsqueda : las pantallas gráficas a menudo organizan la información de tal manera que reducen la cantidad de elementos que el usuario debe mirar para encontrar algo útil, o para agrupar la información requerida para dibujar una inferencia particular en una localidad espacial. Las técnicas gráficas como el sombreado y la disposición espacial pueden ayudar a guiar el ojo hacia información relevante o información irrelevante pasada.

Muchos diseñadores, especialmente hoy en día, se ven eclipsados ​​por la creatividad y pueden alejarse demasiado del objetivo inicial de comunicar un objetivo. Aquí hay un pasaje de Principios de diseño visual para interfaces utilizables (Watzman, Suzanne) que creo que es muy relevante:

Definición de diseño visual . El diseño visual no es meramente una serie de elecciones subjetivas basadas en colores favoritos o tipos de letra de moda; en el mejor de los casos, una idea cosmética de último momento considerada si hay suficiente tiempo y dinero. Un buen diseño visual es la representación tangible de los objetivos del producto. Tiene que ver con la "apariencia", el método y el estilo en que se presenta la información. Debe ser el resultado de un proceso reflexivo y bien considerado, no simplemente una idea decorativa de último momento.

La aplicación de los principios y herramientas de diseño visual/experiencia apropiados al mismo tiempo que se incorpora la perspectiva del usuario (diseño de información) mejora el valor, la percepción y la utilidad de los productos. Es la mejor combinación de los objetivos del proyecto, la perspectiva del usuario y la toma de decisiones informada.

El diseño está en relación directa con la economía. Cuando diseñamos para Ingeniería, es muy fácil ver cómo la solución de diseño debe cumplir con ciertos objetivos económicos. En arquitectura y diseño gráfico a menudo no es así. Pueden volverse ornamentados y saturados, especialmente cuando la economía es buena. El presupuesto está ahí. Cuando la economía es mala, las cosas se simplifican, se producen en masa, se vuelven reutilizables, las plantillas y los marcos, todo. Existen soluciones de diseño que son posibles dentro de estos parámetros y reducen el costo total de los bienes. Cuando los tiempos son buenos, o tienes la suerte de conseguir un cliente con el dinero para gastar, entonces es más fácil justificar nuevos paradigmas y razones.

Reducción de la búsqueda: donde entran los principios del diseño

Si el objetivo es comunicar una idea, para hacerlo mejor, nosotros, como diseñadores, debemos tener alguna idea de cómo las personas (a menos que estés diseñando para otras especies) perciben el mundo que nos rodea.

Procesamiento de arriba hacia abajo . Ampliamente visto como la mayor parte de nuestras capacidades de procesamiento es que comenzamos en las entidades más grandes antes de trabajar en los detalles. De esta manera nuestras expectativas afectan nuestras percepciones. Por ejemplo, probablemente escribiste la letra P hace un momento, porque tu cerebro esperaba que estuviera ahí. Hay una serie de pruebas que puede ver, incluida The Hollow Head , que engaña a su cerebro para que vea lo que no está allí. Lo hace debido al procesamiento de arriba hacia abajo que nos da expectativas sobre lo que DEBERÍA estar allí, en lugar de lo que ESTÁ allí. (Un ejemplo inmediato de esto en el ámbito tradicional del Diseño Gráfico sería la portada de Invisible Monsters de Chuck Palahniuk:

Procesamiento ascendente . También llamado procesamiento basado en datos, es cuando no tiene expectativas. Tienes que empezar poco a poco y trabajar para llenar los huecos hasta que encuentres una expectativa.

Estudio adicional: Lección de Khan Academy: Procesamiento de abajo hacia arriba versus de arriba hacia abajo

Como diseñador gráfico, puede pensar en esto como el momento "ajá". Si la mayoría de su público objetivo puede identificar inmediatamente el todo, entonces utilizan casi todo el procesamiento de arriba hacia abajo. Este es un ingrediente clave para un diseño exitoso. Requiere menos búsqueda de un lugar a otro con la esperanza de averiguar qué está pasando.

Voy a terminar esto aquí, al menos por ahora. En este punto, puede entrar en cosas más técnicas como los principios de la Gestalt que Dominic ha comenzado a discutir.

Aplicación / Implementación

Me doy cuenta de que algunas de estas cosas parecen bastante complejas, especialmente para que las entiendan los nuevos diseñadores. En los próximos días voy a agregar imágenes en esta sección, pero quería al menos obtener algunas cosas básicas por escrito para ayudar a las personas.

Primera iteración de un anuncio o sitio web :

En su primera iteración de un anuncio, finja que coloca una imagen de su producto en uso. Imagina por ahora que alguien bebe una botella de agua en una cancha de baloncesto llena de gente.

Lo miras y piensas, ¡guau, esta es una gran foto de nuestro producto! Les muestras a tus compañeros de trabajo y ellos piensan, ¡guau, nuestro diseñador hizo un gran trabajo mostrando nuestro producto! Sin embargo, le muestras al resto del mundo y ¿sabes lo que van a pensar? ¿Cuál es el producto?

Tendrán que buscar pistas en la página.

Segunda iteración

Para comenzar a arreglar esto, podría pensar, ¿cómo puedo aclarar esto? Las personas deberían poder escanear rápidamente el anuncio y saber exactamente lo que significa. Debe ser el mayor procesamiento de arriba hacia abajo posible.

Entonces, quizás el primer paso sea agregar un logotipo. Coloque un logotipo en la parte inferior derecha y el logotipo será visible en la botella de agua. Esa es una buena pista. ¿Es suficiente sin embargo? Probablemente no.

Tercera iteración

Trabajas en la copia y agregas un texto grande, "¡Agua siempre fría! ¡La primera botella de agua del mundo con paneles solares que puede mantenerte hidratado en los días más calurosos!"

Muy bien, estamos progresando. Ahora alguien ve una foto, identifica el logo y descubre por la copia que estamos hablando de una especie de botella de agua.

Cuarta iteración

Encierra en un círculo la botella de agua. Oscurece todo menos la botella de agua. Sobresaturarlo. ¡Haz algo, lo que sea, para que explote! Ahora estamos haciendo diseño gráfico. Ahora ya casi no queda búsqueda. Sin ningún texto, alguien podría mirar su pieza e inmediatamente saber enfocarse en la botella. Tal vez diferencia a la persona completa con la botella, está bien, todavía tiene el texto para respaldarlo aún más.

iteración final

La idea es encontrar un equilibrio. Cuántas iteraciones se necesitan depende de usted. Pero con cualquier diseño de cualquier cosa , tienes que mirarlo realmente como si fuera la primera vez o hacer que otros lo prueben por ti. Una vez que alguien conoce el producto, tiene expectativas. Ya están buscando su producto. Desea que su diseño comunique qué es ese producto lo mejor que pueda, permitiendo que los usuarios finales lo entiendan y lo recuerden, con el menor procesamiento de abajo hacia arriba posible. Cuanto menos tengan que escanear antes de comprender, mejor.

(Volveré a hacer este ejemplo con imágenes en los próximos días)

Lectura adicional:

Aquí hay un gran artículo sobre el procesamiento de arriba hacia abajo que hace la transición a esos mismos principios: ¿ Qué pasa con el procesamiento de arriba hacia abajo? por Cavanagh, Patrick.

Aquí hay un artículo maravilloso que salió en The Atlantic hoy (5 de mayo de 2014) que se mantiene en términos bastante abstractos que los que no son diseñadores pueden entender, pero establece claramente: Cosas que no puedes dejar de ver (y lo que eso dice sobre tu cerebro)

En resumen: lo que sabes influye en lo que ves.

Para utilizar los principios correctamente, primero debemos comprender cómo interactúan los usuarios con los diseños, cómo piensan y cuáles son los patrones básicos de comportamiento de los usuarios.

Parte 1

¿Cómo piensan los usuarios?

• Los usuarios aprecian la calidad y la credibilidad.
• Los usuarios no leen, escanean.
• Los usuarios de la web son impacientes e insisten en la gratificación instantánea.
• Los usuarios no toman decisiones óptimas.
• Los usuarios siguen su intuición.
• Los usuarios quieren tener el control.

No hagas pensar a los usuarios

Según la primera ley de usabilidad de Krug ,

el diseño debe ser obvio y autoexplicativo.

Cuando estás diseñando, tu trabajo es deshacerte de los signos de interrogación: las decisiones que los usuarios deben tomar conscientemente, considerando los pros, los contras y las alternativas.

No malgastes la paciencia de los usuarios

En cada proyecto en el que vaya a ofrecer a su usuario algún servicio o herramienta, intente mantener los requisitos mínimos de su usuario. Cuanta menos acción se requiere de los usuarios para probar un servicio, más probable es que un usuario aleatorio realmente lo pruebe.

Esfuérzate por la simplicidad

El principio de "mantenlo simple" (KIS) debe ser el objetivo principal del diseño. Esforzarse por la simplicidad en lugar de la complejidad.

No tengas miedo del espacio en blanco

En realidad, es muy difícil sobrestimar la importancia del espacio en blanco. Cuando un nuevo usuario se acerca a un diseño, lo primero que intenta hacer es escanear el producto/página y dividir el área de contenido en piezas de información digeribles.

Las estructuras complejas son más difíciles de leer, escanear, analizar y trabajar con ellas.

Si tiene la opción de separar dos segmentos de diseño por una línea visible o por algún espacio en blanco, generalmente es mejor usar la solución de espacios en blanco.

Las estructuras jerárquicas reducen la complejidad ( Ley de Simon ):

cuanto mejor consiga proporcionar a los usuarios un sentido de jerarquía visual, más fácil será percibir su contenido.

Comunicarse efectivamente con un “lenguaje visible”

En sus artículos sobre comunicación visual efectiva, Aaron Marcus afirma

tres principios fundamentales involucrados en el uso del llamado “lenguaje visible”: el contenido que los usuarios ven en una pantalla.

• Organizar: proporcionar al usuario una estructura conceptual clara y coherente. La consistencia, el diseño de la pantalla, las relaciones y la navegabilidad son conceptos importantes de organización. Las mismas convenciones y reglas deben aplicarse a todos los elementos.
• Economizar: hacer lo máximo con la menor cantidad de señales y elementos visuales. Se deben considerar cuatro puntos principales: simplicidad, claridad, distinción y énfasis.

La simplicidad incluye solo los elementos que son más importantes para la comunicación. Claridad : todos los componentes deben diseñarse de modo que su significado no sea ambiguo. Carácter distintivo : las propiedades importantes de los elementos necesarios deben ser distinguibles. Énfasis : los elementos más importantes deben ser fácilmente percibidos.

• Comunicar: hacer coincidir la presentación con las capacidades del usuario. La interfaz de usuario debe mantener en equilibrio la legibilidad, la legibilidad, la tipografía, el simbolismo, las vistas múltiples y el color o la textura para poder comunicarse con éxito. Usar máx. 3 tipos de letra en un máximo de 3 tamaños de puntos: un máximo de 18 palabras o 50-80 caracteres por línea de texto.

Las convenciones son nuestras amigas

El diseño convencional de elementos no da como resultado un producto aburrido. De hecho, las convenciones son muy útiles ya que reducen la curva de aprendizaje, la necesidad de descubrir cómo funcionan las cosas.

Con las convenciones puede ganarse la confianza, la confianza y la fiabilidad de los usuarios y demostrar su credibilidad.

Prueba temprano, prueba a menudo

Este llamado principio TETO debe aplicarse al proyecto de diseño, ya que las pruebas de usabilidad a menudo brindan información crucial sobre problemas importantes y problemas relacionados con un diseño determinado.

Prueba no demasiado tarde, no demasiado poco y no por las razones equivocadas.

En este último caso es necesario entender que la mayoría de las decisiones de diseño son locales; eso significa que no puede responder universalmente si un diseño es mejor que otro, ya que necesita analizarlo desde un punto de vista muy específico (considerando los requisitos, las partes interesadas, el presupuesto, etc.).

Algunos puntos importantes a tener en cuenta:

Según Steve Krug ,

probar un usuario es 100% mejor que probar ninguno y probar un usuario al principio del proyecto es mejor que probar 50 cerca del final.

Según la primera ley de Boehm ,

los errores son más frecuentes durante los requisitos y las actividades de diseño y son más costosos cuanto más tarde se eliminan.

La prueba es un proceso iterativo. Eso significa que diseñas algo, lo pruebas, lo arreglas y luego lo vuelves a probar. Puede haber problemas que no se han encontrado durante la primera ronda ya que los usuarios estaban prácticamente bloqueados por otros problemas.

Las pruebas de usabilidad siempre producen resultados útiles. O se le señalarán los problemas que tiene o se le señalará la ausencia de fallas de diseño importantes, lo que en ambos casos es una idea útil para su proyecto.

Según la ley de Weinberg ,

un desarrollador no es apto para probar su código.

Esto también es válido para los diseñadores. Después de haber trabajado en un diseño durante algunas semanas, ya no puede observarlo desde una nueva perspectiva. Usted sabe cómo está construido y, por lo tanto, sabe exactamente cómo funciona: tiene la sabiduría que los evaluadores independientes y el usuario de su diseño no tendrían.

Según The Non Designers Design Book de Robin Williams , uno de los cuatro principios básicos que se aplican al diseño de cualquier cosa es la proximidad .

Proximidad

“Agrupa elementos relacionados”.

Cuando varios elementos están muy cerca unos de otros, se convierten en una unidad visual en lugar de varias unidades específicas. Los elementos relacionados entre sí deben agruparse. El propósito básico de la proximidad es organizar .

Sin considerar los otros principios, aquí hay un ejemplo simple:

Lista desordenada:

Rasgos deseables de los miembros de la comunidad
Happy
Fan of Cat GIFs
Entusiasta
Mental en el buen sentido
Rasgos necesarios de los miembros de la comunidad
Respetuoso
Educado
Jugador de equipo
Enfocado en la comunidad

Lista organizada con solo el principio de Proximidad aplicado:

Happy
Fan of Cat GIFs
Enthusiastic
Mental en el buen sentido

Rasgos necesarios de los miembros de la comunidad

Respetuoso
Educado
Jugador de equipo
Enfocado en la comunidad

Como puede ver, el principio de proximidad es un fundamento básico pero poderoso para organizar un diseño. La proximidad es aplicable y relevante para todos los elementos de diseño, no solo para el texto.

Una forma rápida y sencilla sugerida en el libro para evaluar las relaciones de proximidad en su diseño es "Entrecerrar los ojos ligeramente y contar la cantidad de elementos visuales en la página contando la cantidad de veces que se detiene la vista".

Esta pregunta es fundamentalmente problemática. Parece una invitación a obtener una larga lista de sesgos de personas que probablemente no han entendido bien el diseño. Porque la misma frase:

¿Cuáles son los principios clave que comparten los diseños efectivos?

...parece estar construido sobre la noción de que el "diseño gráfico" (un campo de estudio y técnicas) es algo más que heurístico para apuntar a un "diseño efectivo". Los diseños más efectivos se adaptan a su audiencia de maneras a las que no se pueden aplicar las cómodas heurísticas. Pensar lo contrario es una ilusión.

Si la pregunta fuera "¿Cuáles son los principios clave del diseño gráfico?"... bueno, tal vez podría resumir el estado actual del arte. Es un objetivo en movimiento; los gustos cambian y también las percepciones. No es que un formato de preguntas y respuestas sea un buen lugar para ese resumen, con votos positivos y negativos, comentarios y todo eso.

Intentaré escribir una respuesta simulada de 3 viñetas a los "principios clave que comparten los diseños efectivos":

• "Un diseño efectivo no perdería información si se ajustara y se viera en blanco y negro; el color debe ser una adición a un diseño, no el mensaje. Porque, um, lo leí una vez y parecía haber corregido un aspecto evidente". error en un diseño inicial que hice".

• "Si uno descompone matemáticamente un diseño efectivo en una ecuación, la cantidad de parámetros se optimiza para reducir la cantidad total de variantes sin dejar de transmitir la información. Por lo tanto, en esencia... un buen diseño está 'comprimido'. Por lo tanto, todo en igualdad de condiciones, debe ajustar puntos cercanos pero no iguales a un punto de cuadrícula compartido para evitar distracciones creadas por pequeñas diferencias, que pueden distraer el ojo al parecer como un error. Es por eso que todos los humanos usan papel cuadriculado (es el papel universal idioma).

• "Un diseño efectivo no usa Papyrus o Comic Sans. Aprendí esto ayer, pero desde que lo aprendí ayer, ¡ahora sé mucho más que aquellos que podrían elegir estos del cuadro combinado!"

Voy a contenerme aquí. Pero mi respuesta hasta ahora impopular es todo lo que tengo:

Los únicos principios que comparten los diseños efectivos es que son efectivos y que son diseños .

Por tautológico que pueda parecer, esto llama la atención sobre las palabras mismas:

"Diseño"

Es más fácil para mí definir el diseño por lo que no es . Se opone rotundamente a lo que se logra mediante ejercicios aleatorios, como la simple yuxtaposición.

En ausencia de una intención clara, la mente buscará significado. Está entrenado para sintetizar significados por sí mismo. Ejercicios simples pueden revelar la capacidad del cerebro para construir su propia interpretación. Si le das a la gente una combinación de una fotografía y una frase de periódicos o revistas... o manchas de tinta, van a la ciudad. Pero es su propia ciudad. .

(Los resultados pueden ser fascinantes, pero está lejos de llamar "diseño" a la entrada del proceso).

El diseño es intención comunicable. Es lo opuesto al arte abstracto donde los espectadores se alejan, cada uno con su propia interpretación, y el artista se para con aire de suficiencia y dice "significa lo que tú quieras que signifique". Si todos se van con una impresión diferente y dicen "¡genial!" el trabajo que vieron no era el trabajo de los diseñadores .

"Eficaz"

Un diseño efectivo se aplica hacia un propósito. Si el diseño no cumple con el propósito, no es efectivo.

El campo del diseño gráfico es un conjunto de heurísticas diseñadas para ayudar a aquellos que intentan resolver problemas de diseño de modo que no tengan que encuestar de forma independiente a cada público objetivo cada vez que hacen algo. Si imprime una palabra en rojo y verde en una fuente de 3 puntos en la esquina de un cartel y superpone las dos palabras, y luego imprime otra palabra en una fuente de 500 puntos en negrita en blanco en el centro, y nadie ve o puede leer la letra pequeña pero todos notan la letra blanca... eso es bueno. (Si quisiera que vieran la letra blanca y no las cosas sobreimpresas en la esquina...)

Sin embargo, si estás buscando personas que leen en los márgenes y quieres ocultarte, eso es esteganografía . Ese también es un campo del diseño gráfico... simplemente al revés. Estás tratando de filtrar contra aquellos que solo ven las reglas. Un diseño que no es visto por aquellos que no quieres que lo vean (pero visto por aquellos que sí) es, según todas las definiciones, un diseño efectivo .

Podría ser en 3D, podría requerir anteojos. Es efectivo si te comunicas. No hay principio unificador más que el tautológico: fue diseñado , es eficaz . Todo lo demás es un ensayo de sesgo y no muy interesante en los niveles más altos de diseño.

Así diré:

El núcleo de todo diseño eficaz, realizado por un diseñador ER, es la voluntad de admitir lo que pretendían lograr, diseñar la solución y dar en el blanco.

El final: no se necesita una lista de lavandería.

parte 3

Y no puedo dejar de citar mis 10 principios favoritos de Dieter Rams del "buen diseño"

El buen diseño es innovador:

Las posibilidades de innovación no están, en modo alguno, agotadas. El desarrollo tecnológico siempre ofrece nuevas oportunidades para el diseño innovador. Pero el diseño innovador siempre se desarrolla junto con la tecnología innovadora y nunca puede ser un fin en sí mismo.

Un buen diseño hace que un producto sea útil:

Un producto se compra para ser usado. Tiene que satisfacer ciertos criterios, no solo funcionales sino también psicológicos y estéticos. Un buen diseño enfatiza la utilidad de un producto sin tener en cuenta cualquier cosa que pueda restarle valor.

El buen diseño es estético:

La calidad estética de un producto es parte integral de su utilidad porque los productos se usan todos los días y tienen un efecto sobre las personas y su bienestar. Sólo los objetos bien ejecutados pueden ser bellos.

Un buen diseño hace que un producto sea comprensible:

Aclara la estructura del producto. Mejor aún, puede hacer que el producto exprese claramente su función haciendo uso de la intuición del usuario. En el mejor de los casos, se explica por sí mismo.

El buen diseño es discreto:

Los productos que cumplen un propósito son como herramientas. No son objetos decorativos ni obras de arte. Por lo tanto, su diseño debe ser neutral y sobrio, para dejar espacio a la autoexpresión del usuario.

El buen diseño es honesto:

No hace que un producto sea más innovador, poderoso o valioso de lo que realmente es. No intenta manipular al consumidor con promesas que no se pueden cumplir.

Un buen diseño es duradero:

Evita estar a la moda y por lo tanto nunca parece anticuado. A diferencia del diseño de moda, dura muchos años, incluso en la sociedad de usar y tirar de hoy.

Un buen diseño es minucioso hasta el último detalle:

Nada debe ser arbitrario o dejado al azar. El cuidado y la precisión en el proceso de diseño muestran respeto hacia el consumidor.

Un buen diseño es respetuoso con el medio ambiente:

El diseño hace una importante contribución a la preservación del medio ambiente. Conserva los recursos y minimiza la contaminación física y visual a lo largo del ciclo de vida del producto.

El buen diseño es el mínimo diseño posible:

Menos, pero mejor, porque se concentra en los aspectos esenciales y los productos no están cargados de elementos no esenciales. De vuelta a la pureza, de vuelta a la sencillez.

mi ideología

• El contenido es lo primero

No pongas el carro delante del caballo. Define tu contenido antes de decidirte a diseñar

• Conozca a su audiencia

Considere las necesidades y expectativas de su usuario ideal y atraiga a esos usuarios en un nivel más intuitivo.

• Usa los medios apropiados

Utilice los medios disponibles más relevantes y fáciles de usar para transmitir información

• Sea intuitivo

Una estructura clara, pistas visuales y un diseño fácilmente reconocible ayudan a los usuarios a encontrar el camino hacia su objetivo.

• No temas los espacios en blanco

Los espacios en blanco reducen la sobrecarga cognitiva y facilitan la digestión de la información presentada en pantalla

• Quitar Barreras

Permita que el usuario explore su diseño y descubra sus servicios sin obligarlos a compartir datos privados primero

• Esfuércese por la simplicidad

Los usuarios rara vez visitan un sitio solo para disfrutar de un diseño: están buscando información.

• No reinventes la rueda

Las convenciones de diseño estándar reducen la necesidad de que los usuarios descubran cómo funciona su diseño.

• Se consistente

Mantenga el diseño y la marca consistentes en todas partes.

• Llamada a la acción

Guíe y anime a los usuarios a realizar acciones útiles y aumentar el uso.

Referencias: (para todas las partes)

• Diseño de interfaces de usuario efectivas por Suzanne Martin
• Resumen sobre diseño web
• Presentación UID (Flash)
• Pautas de usabilidad y diseño web basadas en investigaciones
• “La psicología de la programación informática” de Gerald Weinberg
• “Diseño de Usabilidad Web” por Jakob Nielsen [JN / DWU]
• “Priorizar la usabilidad web” por Jakob Nielsen
• "No me hagas pensar" de Steve Krug
• “Usabilidad para la web: diseño de sitios web que funcionen” por Tom Brinck, Darren Gergle, Scott Wood
• Un resumen de los principios para el diseño de la interfaz de usuario

Parte 2

Los 7 Principios del Diseño Universal fueron desarrollados en 1997 por un grupo de trabajo de arquitectos, diseñadores de productos, ingenieros e investigadores de diseño ambiental, dirigido por el difunto Ronald Mace en la Universidad Estatal de Carolina del Norte. El propósito de los Principios es guiar el diseño de entornos, productos y comunicaciones.

De acuerdo con el Centro para el Diseño Universal en NCSU, los Principios

"puede aplicarse para evaluar diseños existentes, guiar el proceso de diseño y educar tanto a los diseñadores como a los consumidores sobre las características de los productos y entornos más utilizables".

Principio 1: Uso equitativo

El diseño es útil y comercializable para personas con diversas capacidades.

1. Proporcionar los mismos medios de uso para todos los usuarios: idénticos siempre que sea posible; equivalente cuando no.
2. Evite segregar o estigmatizar a cualquier usuario.
3. Las disposiciones de privacidad, seguridad y protección deben estar igualmente disponibles para todos los usuarios.
4. Haz que el diseño sea atractivo para todos los usuarios.

Principio 2: Flexibilidad en el uso

El diseño se adapta a una amplia gama de preferencias y habilidades individuales.

1. Proporcionar opciones en los métodos de uso.
2. Se adapta al acceso y uso para diestros o zurdos.
3. Facilitar la exactitud y precisión del usuario.
4. Proporcionar adaptabilidad al ritmo del usuario.

Principio 3: Uso Simple e Intuitivo

El uso del diseño es fácil de entender, independientemente de la experiencia, los conocimientos, las habilidades lingüísticas o el nivel de concentración actual del usuario.

1. Elimina la complejidad innecesaria.
2. Sea coherente con las expectativas y la intuición del usuario.
3. Acomodar una amplia gama de habilidades de lectoescritura y lenguaje.
4. Organizar la información de acuerdo con su importancia.
5. Proporcione indicaciones y comentarios efectivos durante y después de la finalización de la tarea.

Principio 4: Información Perceptible

El diseño comunica la información necesaria de manera efectiva al usuario, independientemente de las condiciones ambientales o las capacidades sensoriales del usuario.

1. Use diferentes modos (pictórico, verbal, táctil) para la presentación redundante de información esencial.
2. Proporcionar un adecuado contraste entre la información esencial y su entorno.
3. Maximice la "legibilidad" de la información esencial.
4. Diferenciar elementos de manera que puedan describirse (es decir, que sea fácil dar instrucciones o direcciones).
5. Brindar compatibilidad con una variedad de técnicas o dispositivos utilizados por personas con limitaciones sensoriales.

Principio 5: Tolerancia al error

El diseño minimiza los peligros y las consecuencias adversas de acciones accidentales o no intencionadas.

1. Organice los elementos para minimizar los peligros y los errores: los elementos más utilizados, los más accesibles; Elementos peligrosos eliminados, aislados o protegidos.
2. Proporcionar advertencias de peligros y errores.
3. Proporcione funciones a prueba de fallas.
4. Desaliente la acción inconsciente en tareas que requieran vigilancia.

Principio 6: Bajo Esfuerzo Físico

El diseño se puede utilizar de manera eficiente y cómoda y con un mínimo de fatiga.

1. Permita que el usuario mantenga una posición neutral del cuerpo.
2. Utilice fuerzas operativas razonables.
3. Minimice las acciones repetitivas.
4. Minimizar el esfuerzo físico sostenido.

Principio 7: Tamaño y espacio de aproximación y uso

Se proporciona el tamaño y el espacio adecuados para el acercamiento, el alcance, la manipulación y el uso independientemente del tamaño del cuerpo, la postura o la movilidad del usuario.

1. Proporcione una línea de visión clara a los elementos importantes para cualquier usuario sentado o de pie.
2. Haga que el alcance de todos los componentes sea cómodo para cualquier usuario sentado o de pie.
3. Se adapta a variaciones en el tamaño de la mano y el agarre.
4. Proporcionar un espacio adecuado para el uso de dispositivos de asistencia o asistencia personal.

Según The Non Designers Design Book de Robin Williams , uno de los cuatro principios básicos que se aplican al diseño de cualquier cosa es el contraste .

Contraste

“Si dos artículos no son exactamente iguales, entonces hazlos diferentes. Realmente diferente.

El contraste en una página atrae nuestros ojos hacia ella; para que el contraste sea efectivo, los dos elementos deben ser muy diferentes. El contraste tiene dos propósitos, uno es crear interés en la página, el otro es ayudar en la organización de la información.

Sin considerar los otros principios, aquí hay un ejemplo simple:

Lista desordenada:

Rasgos deseables de los miembros de la comunidad
Happy
Fan of Cat GIFs
Entusiasta
Mental en el buen sentido
Rasgos necesarios de los miembros de la comunidad
Respetuoso
Educado
Jugador de equipo
Enfocado en la comunidad

Lista organizada con solo el principio de Contraste aplicado:

El contraste solo en este ejemplo es una forma muy débilmente efectiva de organizar la información. Pero como se indicó anteriormente, el contraste se utiliza mejor para atraer la atención hacia él como un interés visual.

Esto no significa que te asegures de que todo contraste con todo lo demás, sino más bien, usa el contraste para guiar a tu audiencia alrededor de tu diseño.

Agregue contraste a través de su elección de tipo de letra, anchos de línea, colores, formas, tamaños, espacio, etc.

No seas cobarde. Si vas a contrastar, hazlo con fuerza.

Según The Non Designers Design Book de Robin Williams , uno de los cuatro principios básicos que se aplican al diseño de cualquier cosa es la alineación . Este es también uno de los 125 principios universales cubiertos en Principios Universales de Diseño . Los extractos de cada libro estarán precedidos por NDDB y UPD respectivamente.

Alineación

      Definición de Principios Universales de Diseño:

           “La colocación de elementos de manera que los bordes se alineen a lo largo de filas o columnas comunes, o sus cuerpos a lo largo de un centro común”.

      Consejos del libro de diseño para no diseñadores:

           “Nada debe colocarse en la página de forma arbitraria. Cada elemento debe tener una conexión visual con algo más en la página”.

NDDB: para que todos los elementos de la página parezcan estar unificados, conectados e interrelacionados, debe haber algún vínculo visual entre los elementos separados.

UPD: los elementos de un diseño deben estar alineados con uno o más elementos. Esto crea una sensación de unidad y cohesión, lo que contribuye a la estética general y la estabilidad percibida del diseño.

NDDB: Sé consciente de dónde colocas los elementos. Siempre encuentre algo más en la página para alinearlo, incluso si los dos objetos están físicamente lejos el uno del otro. Incluso si los elementos separados no están físicamente cerca en una página, pueden aparecer conectados, relacionados, unificados con la otra información simplemente por su ubicación.

UPD: Como ocurre con todos los principios de este tipo, hay excepciones (por ejemplo, la desalineación de elementos para llamar la atención o crear tensión). Sin embargo, estas excepciones son raras y la alineación debe considerarse la regla general.

Para la mayoría de los diseños, alinee los elementos en filas y columnas, oa lo largo de una línea central. Cuando los elementos no están organizados en un formato de fila/columna, considere resaltar las rutas de alineación.

Use texto alineado a la izquierda o a la derecha para crear las mejores señales de alineación y considere el texto justificado para composiciones complejas. La columna invisible creada por bloques de texto alineados a la izquierda y a la derecha presenta una señal visual clara contra la cual se pueden alinear otros elementos del diseño.

NDDB: “No importa cuán caótica pueda parecer inicialmente una pieza bien diseñada, siempre puedes encontrar las alineaciones en su interior”.

Aquí hay algunos ejemplos rápidamente buscados en Google de buena vs mala alineación, por supuesto, la alineación no es el único factor en juego en estos ejemplos.

Según The Non Designers Design Book de Robin Williams , uno de los cuatro principios básicos que se aplican al diseño de cualquier cosa es la repetición . Los Principios Universales del Diseño no consideran la repetición como un principio universal , pero sí cubren el concepto más amplio de consistencia. Los extractos de cada libro estarán precedidos por NDDB y UPD respectivamente.

Repetición y consistencia

      Definición de su relación con el diseño a partir de los Principios Universales del Diseño:

           “La usabilidad de un sistema mejora cuando partes similares se expresan de manera similar”.

      Consejos del libro de diseño para no diseñadores:

           “Repite algún aspecto del diseño a lo largo de toda la pieza”.

NDDB: para que todos los elementos de la página parezcan estar unificados, conectados e interrelacionados, debe haber algún vínculo visual entre los elementos separados.

El propósito de la repetición es unificar y agregar interés visual . Piense en la repetición como consistente, lo cual estoy seguro de que ya lo hace. Luego, empuje las consistencias existentes un poco más : ¿puede convertir algunos de esos elementos consistentes en parte del diseño gráfico consciente? Entonces echa un vistazo a la posibilidad de añadir elementos cuyo único propósito sea crear una repetición.

Al principio, simplemente encuentre las repeticiones existentes y luego fortalézcalas. A medida que se acostumbre a la idea y el aspecto, comience a crear repeticiones para mejorar el diseño y la claridad de la información.

UPD: la consistencia permite a las personas transferir conocimientos de manera eficiente a nuevos contextos, aprender cosas nuevas rápidamente y centrar la atención en los aspectos relevantes de una tarea. Hay cuatro tipos de consistencia: estética, funcional, interna y externa.

La consistencia estética se refiere a la consistencia del estilo y la apariencia (p. ej., el logotipo de una empresa que utiliza una fuente, un color y un gráfico uniformes). La consistencia estética mejora el reconocimiento, comunica la pertenencia y establece expectativas emocionales.

La coherencia funcional se refiere a la coherencia de significado y acción (p. ej., un semáforo que muestra una luz amarilla antes de pasar a rojo). La consistencia funcional mejora la usabilidad y la capacidad de aprendizaje al permitir que las personas aprovechen el conocimiento existente sobre cómo funciona el diseño.

La coherencia interna se refiere a la coherencia con otros elementos del sistema (p. ej., las señales dentro de un parque son coherentes entre sí). La usabilidad interna cultiva la confianza con las personas; es un indicador de que un sistema ha sido diseñado y no improvisado. Dentro de cualquier agrupación lógica, los elementos deben ser estética y funcionalmente coherentes entre sí.

La coherencia externa se refiere a la coherencia con otros elementos del entorno (p. ej., las alarmas de emergencia son coherentes en los diferentes sistemas de una sala de control). La consistencia externa extiende el beneficio de la consistencia interna a través de múltiples sistemas independientes. Es más difícil de lograr porque rara vez se observan estándares de diseño comunes.

UPD: use enfoques consistentes cuando sea posible, pero no comprometa la claridad o la facilidad de uso por coherencia. En palabras de Emerson “Una tonta consistencia es el duende de las mentes pequeñas...”