A veces miramos una gran marca como Apple y sabemos que hay decisiones tras bambalinas que hacen que esa marca sea lo que es, pero rara vez llegamos a ver cuáles son.
Recientemente, me encontré con Apple Pautas de interfaz humanay me llamó la atención la atención al detalle que esta empresa pone en todo lo que hace.
los Directrices de la interfaz humana de iOS fue escrito para desarrolladores, compartiendo los seis principios rectores que usa Apple para crear productos sobresalientes.
Pero pueden funcionar igualmente bien para crear una mejor experiencia web. Si trabajas en sitios web, crear aplicacioneso diseñar productos digitales, aplica estas reglas a tu propio trabajo… y podrías inspirar el mismo vínculo emocional con tu marca que Apple con la de ellos.
Una gran interfaz de usuario pone a las personas primero. No Google. No la funcionalidad de su dispositivo o software. Gente.
Necesitamos incorporar principios de diseño que se basen en la forma en que las personas piensan y trabajan. Y a veces, eso nos obliga a inventar nuevas formas de hacer las cosas.
Me gusta cómo lo dice Apple en la introducción a sus Directrices:
Una interfaz de usuario poco atractiva, intrincada o ilógica puede hacer que incluso una gran aplicación parezca una tarea ardua. Pero una interfaz de usuario hermosa, intuitiva y convincente mejora la funcionalidad de una aplicación e inspira un apego emocional positivo en los usuarios.
Continúan enumerando seis pautas que se incluyen en un diseño «humano» u orientado a las personas. Aquí están, junto con algunos ejemplos que encontré en línea.
La integridad estética no es una medida de cuán hermosa es una aplicación. Es una medida de qué tan bien se integra la apariencia de la aplicación con su función.
La marca Apple se construyó en torno al concepto de que la función por sí sola no es suficiente. La apariencia de un producto debe respaldar y mejorar su funcionalidad hasta el punto de que los dos parezcan inseparables.
Este mismo principio se aplica a los sitios web. Buen diseño lo hace asunto.
bit.lyEl sitio web de es principalmente funcional, pero proporciona a los usuarios un diseño atractivo que es un placer utilizar.
¿Cómo crea una funcionalidad atractiva en su sitio web? Estos son algunos consejos de Apple:
La consistencia en la interfaz permite que las personas transfieran sus conocimientos y habilidades de una aplicación a otra. Una aplicación consistente no es una copia servil de otras aplicaciones. Más bien, es una aplicación que aprovecha los estándares y paradigmas con los que las personas se sienten cómodas.
Cuando leí esto, inmediatamente me vino a la mente Adobe. Aprender el primer software en su Creative Suite fue difícil porque la interfaz no era intuitiva. Pero una vez que aprendí un producto de Adobe, pude elegir otros sin muchos problemas.
Aunque su interfaz no usa estándares que la gente haya visto en otros productos, al menos se mantiene consistente dentro de sus propios productos.
Google es otra marca que mantiene la coherencia en todos sus productos. Dentro de la Búsqueda, verá los mismos íconos que están en Google+.
Incluso te dan avisos sociales cuando es apropiado:
Idealmente, la coherencia debería facilitar que las personas interactúen con éxito con su marca desde los primeros minutos en su sitio.
Apple anima a los desarrolladores a pensar en estas preguntas:
Haga preguntas similares sobre su sitio web.
No hay necesidad de reinventar la rueda. Sea fácil con sus visitantes utilizando estándares de diseño comunes que la gente ya entiende.
Cuando las personas manipulan directamente los objetos en pantalla en lugar de usar controles separados para manipularlos, están más comprometidos con la tarea y comprenden más fácilmente los resultados de sus acciones.
Apple habla de la capacidad del usuario para tocar la pantalla directamente en lugar de usar un mouse. Pero este mismo principio puede aplicarse ya sea que use su dedo o un mouse.
Esencialmente, ¿su sitio web atrae a las personas?
Los garabatos de Google sorprenden y deleitan a los usuarios al agregar un poco de creatividad a la experiencia de búsqueda. Cuando abro Google y veo algo como esto, me detengo y juego antes de ingresar mi término de búsqueda.
Este mismo nivel de interacción se puede lograr en su sitio web.
azulbellota es el ejemplo perfecto de una página de inicio interactiva. Han creado un diseño con el que no puedes evitar jugar.
Por supuesto, las marcas más pequeñas generalmente no pueden pagar la programación que esto requeriría. Pero aún podemos crear una experiencia agradable en general.
Guy Kawasaki tiene una página de inicio simple y estática, pero el diseño es tan único que invita a una pausa.
Observe que la barra de navegación se sale de sus expectativas normales al ubicarse debajo de la imagen grande. Sin embargo, mantiene la consistencia al verse como deberían verse las barras de navegación. En respuesta, dedico unos minutos a revisar la imagen y luego decido en qué enlace quiero hacer clic.
Apple les dice a los desarrolladores que las personas pueden experimentar manipulación directa cuando:
En una página web, no puede integrar movimiento o gestos en su diseño, pero puede permitir que las personas obtengan comentarios inmediatos de sus acciones. Dos formas comunes de hacer esto son:
Incluso si no puede ser más elegante que esto, tenga en cuenta que las personas quieren poder interactuar con su sitio web. Dales tantas oportunidades para hacerlo como sea posible.
La retroalimentación reconoce las acciones de las personas y les asegura que se está procesando. Las personas esperan comentarios inmediatos cuando operan un control y aprecian las actualizaciones de estado durante operaciones prolongadas.
Cuando las personas interactúan con su marca, necesitan retroalimentación. Cosas como:
Honestamente, puede ser tan simple como eso.
Mi hija estaba en Groupon, y cuando un enlace no funcionó, recibió un mensaje que le decía: «Como un fantasma tímido…» lo que estaba buscando había desaparecido. Le dijo lo que estaba pasando y la hizo reír en el proceso.
Cuando te registras para recibir un correo electrónico, esperas un mensaje de confirmación. Esta es la versión de MailChimp, pero algo simple funcionaría igual de bien:
Aquí hay algunos consejos de Apple:
La animación sutil puede brindar a las personas comentarios significativos que ayuden a aclarar los resultados de sus acciones. Por ejemplo, las listas pueden animar la adición de una nueva fila para ayudar a las personas a realizar un seguimiento visual del cambio.
El sonido también puede brindar a las personas comentarios útiles. Pero el sonido no debe ser el mecanismo de retroalimentación principal o único porque las personas pueden usar sus dispositivos en lugares donde no pueden escuchar o donde deben apagar el sonido.
Estos consejos también podrían funcionar igual de bien en su sitio web.
Cuando los objetos y acciones virtuales en una aplicación son metáforas de objetos y acciones en el mundo real, los usuarios comprenden rápidamente cómo usar la aplicación. El ejemplo clásico de una metáfora del software es la carpeta: las personas colocan cosas en carpetas en el mundo real, por lo que inmediatamente entienden la idea de colocar archivos en carpetas en una computadora.
El punto es buscar formas de aprovechar las asociaciones que las personas ya tienen para cosas en línea o en la vida real. Apple expresa bien esta idea:
Las metáforas más adecuadas sugieren un uso o una experiencia sin imponer las limitaciones del objeto o la acción del mundo real en los que se basan. Por ejemplo, las personas pueden llenar carpetas de software con mucho más contenido del que cabría en una carpeta física.
Tomemos, por ejemplo, estos iconos. La tienda usa una bolsa de compras. YouTube se parece a un botón de «reproducir». Gmail parece un sobre y Sticky Notes parece un verdadero bloc de notas adhesivas.
En su sitio web, use íconos que creen asociaciones para sus visitantes. Asigne nombres intuitivos a sus botones de navegación. Mediante el uso de metáforas simples, puede involucrar a las personas tanto visual como verbalmente.
Los usuarios se sienten más en control de una aplicación cuando los comportamientos y los controles son familiares y predecibles. Y, cuando las acciones son simples y directas, los usuarios pueden entenderlas y recordarlas fácilmente.
Su sitio web debe ofrecer la mejor experiencia de usuario posible. Para ser honesto, la interfaz debe ser tan intuitiva y funcionar tan bien que parezca invisible.
Por ejemplo, aunque esta aplicación es gratuita, Amazon permite que los clientes tomen una prueba de manejo de 30 minutos de eso
Luego, contando los minutos, te permiten saber exactamente cuánto tiempo te queda. Sabes qué esperar y no te sorprendes cuando se te acaba el tiempo.
La idea es permitir que las personas cancelen una operación antes de que comience, darles la oportunidad de confirmar una acción que podría causar problemas y detener con gracia una operación que está en curso.
Siempre que sea posible, dé a las personas el control sobre su experiencia en su sitio web.
Gran parte de la ciencia detrás de la creación de una buena experiencia de usuario es simplemente buenos modales.
Cuando las personas estén en su sitio web, haga que se sientan como en casa. Trátelos bien. Entretenerlos. Y darles una razón para volver.
Dependiendo de su sitio web, es posible que no pueda utilizar todas las ideas presentadas aquí, pero independientemente de las capacidades que tenga, si tiene una mentalidad centrada en el cliente, aún puede ofrecer una gran experiencia para los visitantes.
Pon sus necesidades primero.
Haga que su vista sea tan visualmente atractiva como funcional.
Facilite la comprensión y el uso de su sitio web.
Y no tendrás problemas para crear la mentalidad de fanático que tiene Apple.
