6 Principios y consejos de diseño de interfaz que todo diseñador web debe saber

Un buen diseño de interfaz es como el aire que respiramos: está ahí cuando lo necesita y lo usa sin pensar. Si alguna vez ha usado un diseño de interfaz defectuoso, ha luchado para desplazarse por un sitio, ha hecho clic para alejarse porque no podía entender lo que estaba pasando, no había podido completar una tarea que tenía en mente o simplemente estaba confundido. Sabrás los peligros de salir mal en esta área.

Los sitios web no son imágenes bonitas, están ahí para ser usados ​​y consumidos, por lo que es muy importante que como diseñadores web pasemos una buena parte del tiempo pensando en la usabilidad. En este artículo consideraremos algunos de los grandes problemas de usabilidad y mis consejos para ser un mejor diseñador de interfaces..

Esta publicación es el día 7 de nuestra sesión de diseño web. Sesiones creativas "Session Day 6Session Day 8"

1 - Análisis de audiencias


Al diseñar Psdtuts +, tomamos en consideración las diferentes formas en que las personas usarán el sitio.

En cualquier sitio web hay al menos tres partes distintas involucradas: el cliente o propietario del sitio, los usuarios del sitio y el diseñador o constructor del sitio. De hecho, a menudo hay varios grupos de usuarios, algunos representantes de clientes diferentes y posiblemente algunas personas en el equipo de diseño. Estas son todas las personas a las que les gusta referirse como partes interesadas (una palabra que me hace imaginar a un grupo de personas con t-huesos).

Ahora lo que pasa con las partes interesadas es que, por lo general, todos quieren algo diferente. Sus clientes tienen una agenda, ya sea complacer al jefe, hacer que el logotipo sea más grande y, por supuesto, transmitir su mensaje. Sus usuarios tienen una agenda: las tareas que intentan realizar, la información que intentan encontrar. Y, por supuesto, tiene una agenda: hacer que su diseño aparezca en una galería de CSS favorita, complacer a su jefe, ajustar un diseño rápido antes de las 5 pm cuando salga ...

Bueno, en el mundo de las partes interesadas, siempre es importante recordar que los usuarios son lo primero. Si desea un sitio exitoso, tiene que negociar sus propios planes con las necesidades de sus clientes de tal manera que los usuarios estén contentos y encuentren lo que necesitan. Esta es la razón por la que una de las primeras cosas que hace al planificar un sitio web es averiguar quién es el público objetivo..

Clases de audiencia

Las palabras a las que se dirige el público parecen implicar que se trata de un grupo de personas a las que nos dirigimos para usar el sitio. La realidad es más como que hay un montón de personas que van a usar el sitio, nos guste o no, y depende de nosotros averiguar cómo servir a estas personas. Así que prefiero pensar en las clases de audiencia, que son diferentes grupos de personas que van a usar un sitio.

Cada clase de audiencia tendrá un conjunto de tareas que intentarán realizar e información en la que estén interesados. Como diseñador web, su tarea es averiguar quiénes son estas clases de personas, qué quieren y cómo van a utilizar el sitio. . Para complicar las cosas, generalmente puede dividir una audiencia de varias maneras diferentes, algunas de las cuales serán más útiles que otras.

Entonces, por ejemplo, en Psdtuts + se podría decir que tenemos estas cuatro clases de audiencia:

  1. Photoshop y los aficionados al diseño
  2. Diseñadores gráficos y web
  3. Artistas Gráficos por computadora
  4. Visitantes de interés casual

Ahora, este es probablemente un buen método de segmentación de audiencia si me interesaba qué tipo de contenido colocar en el sitio, por ejemplo. ¿Deberíamos tener más tutoriales de diseño web o más tutoriales de mezcla 3D? Pero en términos de la facilidad de uso del sitio no es muy útil. Otra forma de separar a la audiencia es decir que tenemos estos grupos:

  1. Personas en una misión para aprender Photoshop.
  2. Los lectores regulares sólo mantienen sus habilidades
  3. Lectores regulares que buscan matar el tiempo.
  4. Lectores regulares que participan en la comunidad.
  5. Visitantes ocasionales o ocasionales

Viéndolo de esta manera, verá que diferentes tipos de audiencias llegan a Psdtuts + con un objetivo diferente en mente. De esta ruptura podríamos deducir que las personas de las categorías 1 y 2 tienen más probabilidades de llegar a nuestro sistema Plus, las categorías 1 y 4 estarán interesadas en el grupo de Flickr, y así sucesivamente. Luego, estimará diferentes tamaños de grupos de audiencia y tendrá una idea de lo que es más y menos importante en el sitio..

Priorizar tareas de usuario

Una vez que haya identificado los conjuntos de usuarios, descubra qué es lo que quieren hacer en el sitio y, aproximadamente, qué tan grandes e importantes son los diferentes conjuntos, puede establecer prioridades para las diferentes tareas de los usuarios. Es importante que los objetivos de sus clientes / propietarios entren en juego aquí, ya que pondrán en valor la importancia de los diferentes grupos de usuarios..

Así que volviendo a nuestro ejemplo de Psdtuts +, una de las tareas más importantes del usuario es registrarse en el sistema Plus porque es lo que paga por el sitio, por lo que aunque "la gente con la misión de aprender Photoshop" no es un grupo de audiencia tan grande como Los "lectores regulares que buscan matar el tiempo" y los "lectores regulares que participan en la comunidad", sin embargo, son más importantes. En consecuencia, le damos algo de nuestro mejor espacio de pantalla (arriba a la derecha de la barra lateral) a un cuadro sobre cómo unirse a Plus.

"Lectores regulares que participan en la comunidad" por otro lado es un grupo bastante grande pero también pasa a ser un grupo de personas que están familiarizadas con el sitio y que están dispuestas a trabajar un poco más, por lo que algo como el grupo de Flickr puede ubicarse en la barra lateral, donde es accesible pero no inmediatamente evidente.

Part Instinct, Part Analysis, Part Common Sense

Al final del día, pensando en los grupos de audiencia, lo que quieren y harán es una mezcla de instinto, análisis y sentido común. A menudo siento que estoy haciendo suposiciones educadas, mientras que estoy seguro de que en proyectos con un gran presupuesto puede realizar encuestas y estar un poco más seguro. Creo que sea cual sea su nivel de habilidad y presupuesto, aunque es un buen hábito escribir un breve análisis de los diferentes grupos. A menudo lo obliga a ver relaciones y problemas que de otra manera no podría pensar.

A continuación, puede presentar su análisis al cliente. En la mayoría de los casos, debería descubrir que pueden decirle cosas acerca de los grupos de audiencia que de otra forma no habría conocido. Y cuanto más sepa sobre los usuarios, mejor podrá diseñar un sitio para ellos..


2 - Puedes aprender mucho observando a la gente.


Es bastante fascinante (y exasperante) ver lo que la gente realmente hace en un sitio

La mejor manera de saber cómo las personas van a utilizar un sitio web es ver cómo lo hacen. Esto se llama prueba de usuario y durante mucho tiempo tuve la impresión de que era algo que solo las grandes agencias interactivas de lujo podían hacer. Claro, hacer pruebas formales con los usuarios es probablemente algo que está fuera del presupuesto de la mayoría de los proyectos de diseño web, pero hay algunas cosas que puedes hacer incluso si solo eres una persona sentada en un sótano tomando proyectos web a través de eLance.

Las pruebas de usuario son buenas para usted como diseñador web

Lo primero que debes reconocer es que cuando realices cualquier tipo de prueba de usuario, te convertirás en un mejor diseñador web. Podrá ver exactamente cómo la gente usa sus diseños web y hay una buena posibilidad de que se sorprenda de cómo lo hacen. Las cosas que crees que son obvias a menudo no lo son, el texto que pensabas que explicaba algo, ni siquiera se lee, y en general los usuarios hacen cosas que no debían hacer. Incluso si el único usuario que está probando es pedirle a algunos amigos que usen un sitio mientras los observa, ya será mejor para él, independientemente del proyecto en sí..

Hay pruebas de usuario adecuadas

Si desea realizar pruebas de usuario formales, uno de los métodos más simples y menos costosos es utilizar la Evaluación Heurística de Jakob Neilsen. A pesar del nombre aterrador, esto es básicamente conseguir que un grupo de conejillos de indias use un sitio y luego los evalúe en función de un grupo de criterios especiales llamados heurísticos. El conjunto de heurísticas más comúnmente utilizado es el conjunto de 10 Heurísticas de usabilidad de Neilsen y el proceso real de cómo se realizan las pruebas se explica por Neilsen en un artículo razonablemente fácil de entender.

Lo bueno de la evaluación heurística es que no se necesita mucha gente para realizar la prueba, de hecho, 5 personas deben encontrar alrededor del 75% de todos los problemas de usabilidad, mientras que duplicar a 10 solo lo llevará hasta el 85%. Me imagino que las 5 personas deben ser razonablemente diversas, sin embargo, porque la idea es que diferentes personas tenderán a encontrar diferentes problemas..

Según un estudio de caso, el "relación beneficio-costo para un proyecto de evaluación heurística de 48: el costo de usar el método fue de aproximadamente $ 10,500 y los beneficios esperados fueron de aproximadamente $ 500,000" (Neilsen 1994) - lo que suena bastante asombroso, aunque sé que no he trabajado en muchos proyectos en los que podría haber pasado otros 10 mil dólares más allá del cliente.

Y hay pruebas de usuario en bruto

¡El hecho de que no tengas $ 10,500 para gastar no significa que no puedas beneficiarte de las pruebas de usuario! Al final del día, todo lo que realmente necesitas son algunas personas (a.k.a. amigos) con las que puedes pasar 10 minutos. De antemano necesitas organizar algo para probarlos. Esto puede ser cualquier cosa, desde papel y bolígrafos, hasta maquetas de Photoshop o sitios web que funcionan a medias. A continuación, debe averiguar algunas ideas sobre lo que está buscando, qué tareas realizará una persona en el sitio y aclarar en su mente lo que espera ver..

Ahora siente a tu conejillo de indias, infórmales para que entiendan lo que están tratando de lograr, es decir, "estás intentando comprar un boleto para Fiji y has llegado a esta página ...", luego, muéstrales el conjunto de archivos JPEG. o trozos de papel o el sitio de los huesos pelados. Si no es algo que sea realmente funcional (es decir, un conjunto de JPG o documentos), entonces producir la funcionalidad, ya sea explicando lo que sucede cuando "hacen clic" en algún lugar o cambiando a la siguiente pantalla que ven.

Personalmente, creo que los JPG son mejores porque puedes ver dónde se mueve el mouse de la persona, están viendo algo que se acerca a lo que realmente verán, pero al mismo tiempo no es necesario que hayas ido y creado un sitio completo..

Mientras estás probando no deberías estar diciendo demasiado, recuerda que estás observando! Al final, pasas un par de minutos más haciéndoles cualquier pregunta que tengas. "¿Por qué diablos hiciste clic ahí, imbécil?" y haciendo las notas que necesites. "Nota para uno mismo, hacer ese botón mucho más grande".

¡Y eso es! No necesita una bata blanca de laboratorio, no necesita un equipo especial, realmente no necesita nada ... excepto algunos amigos o personas a quienes puede sobornar, que no son diseñadores web..

Servicios pagados por terceros

Después de escribir todo esto, se me ocurrió que podría haber algunos servicios de terceros relativamente baratos que puedan proporcionar pruebas a los usuarios. Efectivamente, hay una compañía llamada UserTesting.com que le proporcionará un video y un resumen escrito de una persona real que usa su sitio desde $ 19 para un solo evaluador hasta 100 probadores por $ 1,699. No puedo decir qué tan objetivas son estas personas, pero debo decir que gastar $ 100 para que 5 personas corran a través de un sitio no es tan malo para un proyecto pequeño o mediano. Si nada más, seguro que suena impresionante cuando le dice a su cliente que va a organizar un conjunto de pruebas de usuario!

Debe tener en cuenta que solo puede usar un servicio como este con un sitio web que realmente funcione. Si está intentando realizar pruebas en la etapa de maqueta de Photoshop o en la etapa de estructura de papel y lápiz, tendrá algunas dificultades.!

Herramientas de análisis post lanzamiento

En esta época, hay muchas herramientas estadísticas que puede usar para probar cómo las personas usan un sitio. Aquí hay algunas herramientas para analizar:

  1. Haga clic en el análisis - CrazyEgg, Superposición del sitio de Google Analytics, ClickHeat
    Con estos servicios puedes ver mapas de calor donde las personas hacen clic. El único que realmente he usado es el de Google Analytics (haga clic en Contenido> Superposición del sitio en el menú lateral). Esto es bastante bueno para ver aproximadamente a dónde va la mayoría de las personas en una página determinada, pero, por supuesto, no sabe mucho más sobre lo que los usuarios están haciendo o tratando de lograr, por lo que realmente es solo la mitad de la historia..
  2. Análisis de ruta -La mayoría de los buenos paquetes de análisis
    Descubrir qué rutas toman los usuarios a través de un sitio puede ser determinado por paquetes de estadísticas como Google Analytics. Entre la configuración de objetivos, embudos y eventos, el seguimiento de las páginas de salida y la navegación por contenido y la búsqueda de rutas de navegación, realmente hay más información de la que se puede sacudir. Personalmente, me parece un poco abrumador a veces y solo uso objetivos y embudos, pero creo que es mejor tener más de lo que necesita, que estar necesitado..
  3. Prueba de división - La mayoría de los buenos paquetes de análisis
    La prueba de división es cuando alternas entre dos versiones diferentes de una página para ver cómo se convierte cada una. Es una técnica muy útil para descubrir cómo optimizar las ventas y las páginas de destino en particular, pero se podría usar en casi cualquier tipo de diseño de interfaz..

3 - "No me hagas pensar" ... demasiado


¡Qué título! Que libro!

Don't Make Me Think es el título de un famoso libro del experto en usabilidad Steve Krug y prácticamente resume la facilidad de uso en esa afirmación. Un diseño utilizable no debe implicar pensamiento, debe ser obvio qué hacer y cuándo hacerlo. En el libro, Krug explica que las personas usan los sitios de una manera muy diferente a cómo nos gustaría creer que lo hacen (algo que se aclarará cuando hagas un poco de prueba de usuario) y que es importante saber esto para que puedas diseñarlos apropiadamente Al no complicar demasiado el texto, diseñar para escanear, aceptar que las personas no van a leer sus largas instrucciones, etc., puede trabajar con la realidad de los hábitos y el comportamiento de los usuarios para producir diseños más utilizables..

Quizás se pregunte por qué agregué "... demasiado" a este encabezado. Bueno, tengo que admitir que me molesta que los sitios web de expertos en usabilidad como Steve Krug y Jakob Neilsen sean tan condenadamente básicos. Supongo que entiendo por qué lo hacen, pero no me importa que los usuarios piensen un poco si eso significa tener un mejor impacto visual. Supongo que soy más un tipo de usabilidad de 37Signals que un devoto de Jakob Neilsen.


4 - Navegación y Orientación.


Adobe.com hace un buen trabajo con su rastro de ruta de acceso para mantenerlo informado sobre qué diablos está en su sitio gigante.

No creo que pueda escribir un artículo sobre el diseño de la interfaz sin tocar el tema de moverse por un sitio. Las reglas cardinales de la navegación son:

  1. Los usuarios siempre deben poder averiguar dónde están en un sitio
    Esto se denomina orientación y puede lograr un buen resultado a través de los elementos del menú resaltados, las rutas de navegación y los encabezados. Poder orientarte en un sitio es clave para que sea comprensible y utilizable. En el mundo real, el equivalente físico de la orientación son las señales de tráfico, le permiten saber dónde se encuentra ahora..
  2. La navegación debe ser consistente
    No hay nada más confuso que mover una barra de menú a otro lugar, cambiar dramáticamente o simplemente desaparecer. La navegación de un sitio es una de las herramientas más importantes que utilizan los visitantes para comprender un sitio. En el mundo real, el equivalente físico de la navegación es un mapa de calles, le permite averiguar a dónde puede ir.

La mejor manera de entender por qué la navegación y la orientación son tan importantes es imaginar que, de repente, lo transportaron a una ciudad remota y le dijeron que llegara a alguna parte, ya que el problema era que no había señales y que su mapa se reorganizaría, desaparecería periódicamente. y reaparecer. El dolor es menor en un sitio web, pero solo porque un clic del ratón te saca de allí!

Hay muchas otras convenciones e ideas sobre lo que hace una buena navegación / orientación, pero todo lo demás está subordinado a esas dos reglas..


5 - Haz tuyos los problemas.


Aunque el libro 37signals tiene más información sobre el desarrollo web que sobre el diseño, tiene algunas secciones interesantes sobre cómo resolver sus propios problemas. Y lo mejor de todo el libro es gratis leer en linea.

Ningún problema es más claro que el tuyo. Esta es una de las razones por las cuales siempre se aconseja a los nuevos empresarios que inicien negocios que resuelvan sus propios problemas. Los diseñadores web también pueden beneficiarse de la solución de problemas que ellos mismos han experimentado. Hay algo en experimentar el dolor de primera mano que aclara exactamente cómo podrían mejorar las cosas..

Como es poco probable que pueda elegir trabajar solo en sitios web con los que tiene experiencia directa, un mejor método es obtener experiencia con los sitios web en los que está trabajando. Usted puede hacer esto ya sea por:

  1. Usando el sitio actual (si existe) para su cliente
  2. Usando sitios de la competencia que hacen cosas similares.

Lo importante a tener en cuenta es que cuando digo "uso", no quiero decir simplemente hacer clic durante unos segundos y luego marcar esta opción en tu lista de tareas pendientes. quiero decir De Verdad utilizar un sitio Determine algunas tareas típicas (por ejemplo, "Necesito comunicarme con la oficina de ventas en Delaware", "Quiero hacer una reserva") y luego ejecutarlas por completo. Cuando realmente entienda las tareas y los problemas que enfrentará un usuario en un sitio web, podrá diseñar una solución mucho mejor..


6 - Las convenciones son familiares y fáciles


Los iconos son un excelente ejemplo de convenciones. Mire los íconos de arriba y vea cuántos lo hacen pensar automáticamente en alguna tarea o acción. Por cierto, estos iconos están disponibles en una licencia de Creative Commons a través de los aplicadores web

Ha pasado más de una década desde que la web se convirtió en algo común y en ese momento hay muchas cosas sobre el aspecto y el funcionamiento de los sitios web que han llegado a ser generalmente aceptados. Por ejemplo, cuando hace clic en un botón que dice "Inicio" que espera ir a la página de inicio, no espera ir a una página que muestra la casa de una persona. Suena obvio y tonto, pero eso es lo que son las convenciones..

Como corolario de nuestro consejo anterior "No me hagas pensar", el uso de estándares aceptados significa exactamente eso, los usuarios no necesitan pensar. Si coloca la barra de navegación en el pie de página de cada página, los usuarios se confundirán, se molestarán y se irán. Si usa íconos comunes para fines poco comunes, no etiquete los artículos correctamente, no presente "¿Está seguro?" confirmaciones de acciones irreversibles, etc., corre el riesgo de alienar a sus usuarios, y eso es lo último que desea hacer.

Claro que hay ocasiones en las que es posible que no sigas los métodos convencionales, pero deberías tener una buena razón para hacerlo y hacer todo lo posible para aclarar lo que estás haciendo..

Esta publicación es el día 7 de nuestra sesión de diseño web. Sesiones creativas "Session Day 6Session Day 8"