123
::inpercom usabilidad y web Tomás Laurenzo [laboratorio de medios :: inco :: fing]

::inpercom usabilidad y web

  • Upload
    odelia

  • View
    50

  • Download
    0

Embed Size (px)

DESCRIPTION

::inpercom usabilidad y web. Tomás Laurenzo [laboratorio de medios :: inco :: fing]. contenido. Basado en designing web usability (Jakob Nielsen) y en Web Style Guide (Lou Rosenfeld) . Motivación. Diseño de páginas. Diseño de contenidos. Diseño de sitios. Diseño de intranets. - PowerPoint PPT Presentation

Citation preview

Page 1: ::inpercom  usabilidad y web

::inpercom usabilidad y web

Tomás Laurenzo

[laboratorio de medios :: inco :: fing]

Page 2: ::inpercom  usabilidad y web

contenido

Basado en designing web usability (Jakob Nielsen) y en Web Style Guide (Lou Rosenfeld) .

Motivación. Diseño de páginas. Diseño de contenidos. Diseño de sitios. Diseño de intranets.

Page 3: ::inpercom  usabilidad y web

Motivación.

Page 4: ::inpercom  usabilidad y web

Motivación

¿Por qué usabilidad web? “La usabilidad controla la web”. Más de 100 millones de sitios. Alta competitividad por tráfico. Los usuarios desean satisfacción inmediata y no están

atados a un sitio. La usabilidad se experimenta desde el inicio de la

relación (¿distinto al modelo habitual?). Reducción de costos (una llamada a un helpdesk

cuesta en USA entre 30 U$ y 100 U$).

Page 5: ::inpercom  usabilidad y web

Motivación

Diseño web: ¿Arte o ingeniería?

“El cine no floreció hasta que los ingenieros perdieron el control de los artistas, lo mismo está pasando con las computadoras”. Paul Heckel (Elements of friendly software design)

"Hoy, el campo de diseño web es visto más como una artesanía que como un arte, donde la funcionalidad toma precedencia sobre la forma y el contenido es el rey“ (Sarah Horton)

Page 6: ::inpercom  usabilidad y web

Motivación

Hace unos años, la web era como un perro que habla

Sin importar lo que diga, atrae la atención, después de todo:

¡¡es un perro que habla!!

Page 7: ::inpercom  usabilidad y web

Motivación

Hoy, el medio ha madurado y la gente se preocupa del valor, conveniencia y facilidad de uso del mismo.

Page 8: ::inpercom  usabilidad y web

Motivación

Los primeros diseños cometían (y cometen) errores en todos los niveles del diseño web:

Modelo de negocios no asimilar el cambio fundamental que la web implica.

Gestión de proyectos. Administrar el proyecto como uno tradicional genera interfaces

de usuario inconsistentes: un sitio web ES UNA interfaz de usuario.

Arquitectura de la información. Sitios organizados en función de la estructura interna de la

empresa y no de las necesidades del usuario.

Page 9: ::inpercom  usabilidad y web

Motivación

Diseño de las páginas. No se tiene en cuenta las demoras en el acceso al sitio.

Autoría del contenido. Escritura lineal.

Estrategia de enlazado (linking). Considerar el sitio como si fuera el único importante.

Page 10: ::inpercom  usabilidad y web

Motivación

En todos los casos el enfoque natural ha demostrado ser erróneo.

La web es un medio relativamente nuevo y requiere un enfoque nuevo.

Page 11: ::inpercom  usabilidad y web

usabilidad

Definimos usabilidad en función de cinco componentes de calidad: learnability

¿cuán fácil es para los usuarios realizar tareas básicas la primera vez?

eficiencia una vez que los usuarios aprendieron el diseño, ¿cuán rápido realizan

sus tareas?

memorability cuando los usuarios retornan al diseño, ¿cuán fácil es reestablecer sus

habilidades?

errores cuántos errores comenten los usarusio, cuán sseveros son, y cuán

fácilmente se recuperan de ellos.

satisfacción

Page 12: ::inpercom  usabilidad y web

existen otros atributos:utilidadusabilidaduseful = usability + utility

Page 13: ::inpercom  usabilidad y web
Page 14: ::inpercom  usabilidad y web

usabilidad es importanteen la web es condición de supervicencianielsen: gastar el 10% del presupuesto

en usabilidad

¿cómo asegurarla?observación, tests, focus groups,

usuarios representativos, etc.

Page 15: ::inpercom  usabilidad y web

usabilidad

cuándo trabajar en la usabilidad: antes de comenzar un nuevo diseño, testear el

anterior para identificar pros y cons. testear los diseños de la competencia realizar un estudio de campo para ver cómo se

comportan los usuarios en su campo natural realizar prototipos de papel iterar muchas veces y refinar el diseño verificar el diseño contra guías establecidas lather, rinse, repeat

Page 16: ::inpercom  usabilidad y web

usabilidad

nielsen: “primera regla de la usabilidad: no escuche a los usuarios”.ver lo que hacen, no lo que dicen.

Page 17: ::inpercom  usabilidad y web

usabilidad

diseñar para múltiples dispositivos nielsen: sitios distintos + auto redirección links entre los sitios

sitios móviles menos herramientas menos contenido agrandar los elementos de interfaz

no se perdería nada gracias a los links

Page 18: ::inpercom  usabilidad y web

usabilidad

alternativa: responsive web design (RWD). no hay una estratificación tan clara de

dispositivos. los dispositivos se pueden agrupar por su

resolución y tamaño de pantalla.

Brad Frost: implementation is everything. decisión de ingeniería vs. decisión de usabilidad

Page 19: ::inpercom  usabilidad y web
Page 20: ::inpercom  usabilidad y web

Diseño de páginas.

Page 21: ::inpercom  usabilidad y web

Diseño de páginas

El diseño de las páginas es la parte más inmediatamente visible del diseño web.

Las páginas son el elemento constitutivo (pero no simultáneo) del sitio web.

Aunque el diseño del sitio es, a menudo, más importante para la usabilidad porque permite a los usuarios acceder a las páginas web.

Page 22: ::inpercom  usabilidad y web

Diseño de páginas

Las páginas deben dedicar la mayoría del espacio a contenido de interés para el usuario.

Muchas páginas dedican un porcentaje enorme a accesorios de navegación y publicidad.

Los navegadores ocupan mucho espacio, pero a los usuarios no les molesta (!).

El contenido debería ocupar por lo menos el 80% del espacio (quitar elementos redundantes).

Page 23: ::inpercom  usabilidad y web
Page 24: ::inpercom  usabilidad y web
Page 25: ::inpercom  usabilidad y web
Page 26: ::inpercom  usabilidad y web
Page 27: ::inpercom  usabilidad y web
Page 28: ::inpercom  usabilidad y web
Page 29: ::inpercom  usabilidad y web
Page 30: ::inpercom  usabilidad y web

Diseño de páginas

80% de contenido

20% dedicado a las herramientas de navegación.

Probar siempre sin una herramienta de navegación; si el sitio funciona descartarla.

Siempre preferir simplicidad sobre complejidad (less is more – Mies Van der Rohe)

Page 31: ::inpercom  usabilidad y web

Diseño de páginas

Sin embargo, el espacio en blanco no es inútil.

Pero hay espacio en blanco volitivo y espacio en blanco espurio, fruto de la incapacidad del diseño de ajustarse a las características del navegador.

Page 32: ::inpercom  usabilidad y web

Diseño de páginas.

La falta de espacio en blanco puede ser mala (feb 97)

Page 33: ::inpercom  usabilidad y web

Diseño de páginas.

Mejor (junio 1997)...

Page 34: ::inpercom  usabilidad y web

Diseño de páginas.

Rediseño sugerido por Nielsen:

Page 35: ::inpercom  usabilidad y web
Page 36: ::inpercom  usabilidad y web

Diseño de páginas

LOS USUARIOS TIENEN CONFIGURACIONES DIFERENTES y, en cierta medida, IMPREDECIBLES.

algunos ejemplos...

Page 37: ::inpercom  usabilidad y web

Es imprescindible testar los diseños en muchas configuraciones (plataformas / SO / navegadores, etc).

Page 38: ::inpercom  usabilidad y web

Diseño de páginas.

Es imprescindible testear los diseños en muchas configuraciones (plataformas / SO / navegadores, etc).

Page 39: ::inpercom  usabilidad y web

Diseño de páginas.

Page 40: ::inpercom  usabilidad y web
Page 41: ::inpercom  usabilidad y web
Page 42: ::inpercom  usabilidad y web
Page 43: ::inpercom  usabilidad y web
Page 44: ::inpercom  usabilidad y web

Diseño de páginas.

Proporción de velocidad de conexión.

Page 45: ::inpercom  usabilidad y web

Diseño de páginas

En el diseño tradicional de interfaces el diseñador tiene el control.

Uno puede controlar cada píxel de la imagen, en forma exacta (se sabe cómo es el sistema, cuáles fuentes están instaladas, etc).

El diseñador dirige el funcionamiento (el flujo de acciones) del sistema, utilizando ventanas modales, deshabilitando opciones, etc.

Page 46: ::inpercom  usabilidad y web

Diseño de páginas

En el diseño web el usuario tiene el control.

Caminos no preestablecidos: (digitación de URLs, acceso a través de búsquedas).

Se debe diseñar para la libertad de movimiento (e.g. poner un logo en c/página que lleve a la homepage)

Se debe diseñar para múltiples plataformas y configuraciones (el diseño independiente de la resolución es fundamental)

Page 47: ::inpercom  usabilidad y web

Diseño de páginas - multiplataforma

Diseño independiente de la plataforma: Separar contenido de presentación.

Idea original de Tim Berners-Lee: codificación semántica. Se codifica de acuerdo al contenido (e.g. <H2>) El usuario (o su sistema) determina la presentación.

Actualidad: Codificación sintáctica, el diseñador web intenta determinar la forma de presentación (problemático dada la heterogeneidad de accesos)

Page 48: ::inpercom  usabilidad y web

Diseño de páginas - multiplataforma

CSS y diseño basado en estándares, intento (parcialmente exitoso) de retorno a la codificación

semántica. separación del contenido (XHTML) y forma (CSS). no se utilizan tablas, excepto para las tablas… Web 2.0 -ish

¿es posible la separación completa?

Page 49: ::inpercom  usabilidad y web

Dis. páginas – tiempos de respuesta.

Todos los estudios de usabilidad muestran lo mismo: los usuarios piden mayor velocidad de respuesta.

Los diseñadores suelen pensar que, proveyendo un mejor diseño, los usuarios estarán contentos de esperar por él.

ESO ES FALSO.

Page 50: ::inpercom  usabilidad y web

Dis. páginas – tiempos de respuesta.

Estudios de usabilidad en sistemas de hipertexto: Los usuarios necesitan tiempos de respuesta más cortos que un segundo cuando se mueven de una página a otra. (imposible para la web).

Para la web, hay que replantearlo: tiempo máximo de acceso de 10 segundos (máximo tiempo en que las personas se mantienen enfocadas).

Page 51: ::inpercom  usabilidad y web

Dis. páginas – tiempos de respuesta.

Además, se necesitan tiempos de respuesta predecibles (poca variabilidad).

Los tiempos en la web tienden a ser variables, se necesita hacer un esfuerzo para minimizar la incertidumbre.

Avisar a los usuarios si se va a bajar algo más pesado que 50 kb (~1998)

Page 52: ::inpercom  usabilidad y web

Dis. páginas – tiempos de respuesta.

0.1 segundo: tiempo máximo para que el usuario perciba un continuo (el sistema reacciona instantáneamente, no se necesita respuesta excepto el resultado)

1 segundo: tiempo máximo para que el hilo de pensamiento del usuario no se interrumpa (aunque se nota la demora). Tampoco se necesita respuesta especial.

10 segundos: tiempo máximo para que el usuario se mantenga enfocado. Si se demora más tiempo, el usuario se pone a hacer otras cosas.

Page 53: ::inpercom  usabilidad y web

Dis. Páginas – tiempos de respuesta.

Factores que influyen en los tiempos: Carga del servidor.

Conexión del servidor a Internet.

Congestión de Internet.

Conexión del usuario a Internet.

Velocidad de rendering de la computadora y el navegador del usuario.

Page 54: ::inpercom  usabilidad y web

Dis. Páginas – tiempos de respuesta.

Es imprescindible diseñar en función de la velocidad.

Disminuir el peso de las páginas, reusar imágenes, etc.

  1 segundo 10 segundos

módem 2 KB 34 KB

ISDN 8 KB 150 KB

T1 100 KB 2 MB

Page 55: ::inpercom  usabilidad y web

Dis. Páginas – Tiempos de respuesta.

Caso de estudio: www.provenedge.com.

Páginas entre 32-33 KB tienen un porcentaje de abandono del 7% - 10%.

Páginas de 40 Kb (máximo permitido en el sitio), tenían un porcentaje de abandono del 25% - 30%

¿Se debía al contenido o al peso?

Page 56: ::inpercom  usabilidad y web

Dis. Páginas – tiempos de respuesta.

Al disminuir el peso de esas páginas a 32-33 Kb, el porcentaje de abandono pasó a ser de 7%-10%

¡Con esta mejora, el porcentaje de lectores del sitio aumentó en un 25 %!.

El tiempo de respuesta es uno de los principales factores determinantes de la usabilidad de un sitio.

Page 57: ::inpercom  usabilidad y web

Dis. Páginas – tiempos de respuesta.

Es preciso aumentar el contenido del primer vistazo (para minimizar el abandono). La parte superior debe tener sentido y ser importante. Utilizar ALT para las imágenes (livianas). Incluir WIDTH y HEIGHT para todas las imágenes y

tablas. La página debe ser lo más fácil de dibujar posible.

Utilizar servidores con HTTP Keep-Alive (HTTP 1.1 o superior). Utiliza una conexión TCP/IP sola para toda la página.

Page 58: ::inpercom  usabilidad y web

Dis. Páginas – Tiempos de respuesta

Page 59: ::inpercom  usabilidad y web

Diseño de Páginas – enlazado.

Los enlaces (links) son la parte más importante del hipertexto.

Se clasifican en: Enlaces de navegación estructural.

Links asociados al contenido de la página.

Links de “ver también” o “referencias adicionales”.

Page 60: ::inpercom  usabilidad y web

Links de “ver más”

Diseño de páginas enlazado

Page 61: ::inpercom  usabilidad y web

Diseño de Páginas – enlazado.

Es importante que el usuario sepa a dónde conduce el enlace.

Regla más vieja del enlazado: “evitar el click aquí (click here)”. Sólo los que usan mouse hacen click. Las palabras click y here no aportan información. En lugar de decir,

“para más información en la abeja de nariz azul, haga click aquí”

“tenemos más información acerca de la abeja de nariz azul”.

Page 62: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

No usar más de cuatro palabras como links, pero rodearlas de explicación de hacia donde conduce el link.

Siempre que sea posible, incluir un link de “más de lo mismo” o de referencias adicionales (Amazon).

Utilizar “link titles”: <a href=“http://www.google.com/” TITLE=“herramienta de búsqueda”>google</a>, lo cual levanta un popup cuando el usuario deja el mouse sobre el link.

Page 63: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Evitar links redundantes y páginas de presentación.

(y nunca suponer que el usuario quiere ver una intro en flash)

Page 64: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

La información a incluir en un “link title” podría ser: Nombre del sitio a que conduce el link Nombre del subsitio a que conduce (si se queda dentro

del mismo sitio) Más detalles sobre el tipo de información que se

encontrará en la página destino.

Page 65: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Resulta crítico para la usabilidad el respetar los colores estándares de la web: Los links no visitados son azules. Los links ya visitados son púrpuras o rojos.

Aunque no es imprescindible utilizar la misma tonalidad.

Page 66: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Page 67: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Page 68: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Page 69: ::inpercom  usabilidad y web

Diseño de páginas - enlazado

Evidentemente los links incidentes son la principal manera de obtener tráfico para un sitio.

Para maximizar este tráfico es imprescindible mantener la relación contenido – URL.

Sin embargo, lo principal es el contenido (los sitios externos deberán querer enlazar el nuestro).

Page 70: ::inpercom  usabilidad y web

Diseño de contenidos.

Page 71: ::inpercom  usabilidad y web

Diseño de contenidos

Evidentemente, el contenido de los sitios es la razón de las visitas de los usuarios.

El diseño del sitio y de las páginas existe para permitir a los usuarios acceder al contenido.

Los usuarios “escanean” la página buscando indicaciones de su contenido. Sólo luego de decidir que el contenido no es de su interés, miran los artefactos de navegación para seguir buscando.

Page 72: ::inpercom  usabilidad y web

About us, product, search result.

Page 73: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

¿Cómo escribir para la web? Es un problema importante pero rara vez discutido.

Algunos consejos: Ser sucinto (un 50% de la longitud de lo mismo escrito

para ser impreso, como máximo).

Escribir para la “escaneabilidad”: párrafos cortos, no obligar a los usuarios a leer demasiado de corrido, etc.

Utilizar el hipertexto, separando contenido muy largo en varias páginas (con criterio).

Page 74: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Mantener el texto corto: La gente lee un 25% más lento de los monitores y les

resulta más incomodo. A los usuarios no les gusta hacer scroll (!)

Los problemas de resolución (DPI) estarán resueltos en las PCs de escritorio (según Nielsen) en el 2005 (suponemos que los de frecuencia ya están resueltos).

Siempre que sea posible, contratar un editor web.

Page 75: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Un editor web puede resultar en un importante ahorro: para una empresa con 10 mil empleados, el costo de un único titular mal escrito es de casi 5 mil dólares: Todos los empleados gastan 5 segundos más del

necesario meditando. Un 10% de los empleados hacen clic en el titular, pero

el contenido no era de su interés y demoran unos 30 segundos en darse cuenta y volver.

El valor del empleado es de 50 dólares la hora (asumiendo 25 dólares por hora de sueldo).

Page 76: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Chequear que no haya errores ni faltas (si es posible, contratar un corrector profesional). dificultad de lectura “choca al ojo”, sensación de incomodidad. credibilidad, imagen, etc.

Page 77: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Aumentar la “escaneabilidad” (los usuarios son impacientes).

El 79% de los usuarios (según un test de Morkes & Nielsen) realizan el escaneo.

Estructurar los artículos con 2 ó 3 niveles de títulos, anidados, con títulos con sentido.

Utilizar listas “bulleted” Utilizar destaques para resaltar la info importante.

Page 78: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Imagen p 107

Page 79: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

No se da la información relevante: no se saben las diferencias básicas entre los modelos y las descripciones no son comparables.

Page 80: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web Comenzar cada página con la conclusión

(principio de la pirámide invertida).

Una idea por párrafo, con texto claro (evitar metáforas, etc.).

Page 81: ::inpercom  usabilidad y web

Contenidos – escribiendo para la web

Evitar el scroll, y utilizar el hipertexto, pero NO para partir una escritura lineal.

Sólo el 10% (1995) de los usuarios hace scroll en busca de contenido de interés.

Si el contenido interesó de entrada (pirámide invertida), el usuario siempre hace scroll.

Page 82: ::inpercom  usabilidad y web

Contenido – escribiendo para la web

Page 83: ::inpercom  usabilidad y web

Contenido – escribiendo para la web

Page 84: ::inpercom  usabilidad y web
Page 85: ::inpercom  usabilidad y web

Contenido – títulos de las páginas.

Uno escribe en la web con la intención de ser encontrado.

Los títulos de las páginas son fundamentales.

Entre 40 y 60 caracteres para explicar de que trata la página.

Por ej. En lugar de “Welcome to MyCompany” poner sólo “MyCompany”.

Page 86: ::inpercom  usabilidad y web

Contenido – titulares (headlines)

Los titulares de la web son muy distintos de los de la literatura impresa: Muchas veces se muestran fuera de contexto (por ej.

en los motores de búsqueda). En la web los títulos no se asocian tanto con las

imágenes cercanas, o los “colgados”.

Consejos: explicar el contenido claramente, evitar artículos, hacer que la primer palabra sea la más importante, no comenzar todos los titulares con la misma palabra.

Page 87: ::inpercom  usabilidad y web

Contenido – legibilidad

Aumentar la legibilidad (maximizar el contraste, utilizar texto positivo, etc).

Utilizar fuentes lo suficientemente grande y no fijas.

Evitar el movimiento (desplazamiento, blinking, zooming, etc), siempre.

Justificar a la izquierda el texto.

Utilizar una fuente sans-serif (por resolución).

Page 88: ::inpercom  usabilidad y web

Contenido – legibilidad

UN CONSEJO FINAL: EVITAR EL TEXTO TODO EN MAYÚSCULAS. LOS USUARIOS LEEN ESTE TIPO DE TEXTO UN 10% MÁS LENTO QUE LO HABITUAL, PORQUE RESULTA MÁS DIFÍCIL PARA EL OJO RECONOCER LA FORMA DE LAS LETRAS EN EL CONTEXTO MÁS UNIFORME Y EN BLOQUE CAUSADO POR LAS MAYÚSCULAS. NO LO HAGAN.

Page 89: ::inpercom  usabilidad y web

Contenido – legibilidad

Page 90: ::inpercom  usabilidad y web

Contenido – Multimedia.

Cada vez más popular: usarlos con criterio, son lentos.

Las imágenes en movimiento captan la atención, pero en general hay que evitarlas.

Hay casos en que la animación funciona (en particular los popups son útiles).

Existen casos especiales donde la multimedia (audio, vídeo) son el contenido que el usuario pretende.

Page 91: ::inpercom  usabilidad y web

Contenido – Multimedia.

Page 92: ::inpercom  usabilidad y web

Diseño de sitios.

Page 93: ::inpercom  usabilidad y web

Diseño de sitios.

Habitualmente se pone el énfasis en el diseño de páginas.

El diseño del sitio nunca se representa en forma explícita.

Pero muchas veces, desde el punto de vista de la usabilidad, el diseño del sitio es más importante que el de la página,

Page 94: ::inpercom  usabilidad y web

Diseño de sitios.

El diseño del sitio permite a los usuarios acceder a la página de su interés.

Un estudio llevado por Jared Spool indica que a partir de la “home page” sólo el 42% de los usuarios pueden llegar a la información que buscan.

Un estudio por Mark Hurst y Nielsen dio un 26% con una actividad levemente más compleja.

Page 95: ::inpercom  usabilidad y web

Diseño de sitios.

La usabilidad sufre dramáticamente si obligamos navegar mucho para encontrar lo que necesitan.

La web fue diseñada como un entorno para leer artículos y no ha mejorado con las nuevas funcionalidades...

Por lo tanto, hay que diseñar con la simplicidad en mente (less is more).

Page 96: ::inpercom  usabilidad y web

Diseño de sitios - homepage

La “home page” es la flagship (nave insignia) y, por lo tanto, debe ser diseñada distinta a las demás (por ej, no tiene que tener un botón home).

Debe responder las preguntas “¿dónde estoy?” y “¿qué hace este sitio?”.

La home sirve como un punto de entrada para el esquema de navegación del sitio.

Page 97: ::inpercom  usabilidad y web

Diseño de sitios - homepage

En la home también se ponen las promociones o las noticias que importen para todos los visitantes.

Pero los usuarios, en general, tienen un objetivo específico.

La mayoría de los sitios necesitan funcionalidades de búsqueda.

Page 98: ::inpercom  usabilidad y web

Diseño de sitios - resolución

¿Cuán ancha debe ser la página?

¿640x480, 800x600, 1024x768…?

Lo ideal es diseñar para cualquier resolución.

Si hay que ser específico, Nielsen aconseja 800px, ya que los usuarios odian hacer scroll horizontal. (~1998, ahora es 1024)

Page 99: ::inpercom  usabilidad y web

Diseño de sitios - splash screens

Nielsen: “Splash screens must die”

Las splash screens (pantallas de bienvenida) no aportan info al usuario y hacen perder tiempo.

Sólo sirven cuando hay que advertir al usuario de algo, e.j. sitios porno.

Page 100: ::inpercom  usabilidad y web

Diseño de sitios

Homepage vs páginas interiores: El nombre del sitio debe ser un elemento destacado de la

homepage y debe ser repetido en todas las páginas interiores.

Evidentemente, las páginas interiores tienen que enfocarse en contenido más específico.

Hay un conflicto entre la navegabilidad y la utilidad de las páginas

que puedan ser accedidas directamente.

Todas las páginas deben tener un link a la home.

Page 101: ::inpercom  usabilidad y web

Diseño de sitios - metáforas

Las metáforas eran sobreusadas en el diseño web.

Pueden ser útiles unificando la interfaz y la curva de aprendizaje.

Sin embargo, Nielsen sugiere utilizar un enfoque más literal, evitando el uso de metáforas.

Page 102: ::inpercom  usabilidad y web

Diseño de sitios – carrito de compra.

Ejemplo de metáfora: el carrito de compra.

El usuario sabe como funciona, puede poner y quitar items, el carrito recuerda su contenido y finalmente el usuario paga por él.

Tambien tiene sus desventajas (uno no repite la acción para comprar muchos items iguales y no los devuelve a la estantería).

Page 103: ::inpercom  usabilidad y web

Diseño de sitios – carrito de compra.

De hecho, los carritos se han convertido en un estándar de interfaz, dejándo de ser una metáfora y pasando a ser un elemento nuevo.

Otro tipo de metáforas (en particular las geográficas) deberían ser evitadas siempre.

Page 104: ::inpercom  usabilidad y web

Diseño de sitios – navegación

La web es un sistema de navegable La interfaz de navegación debe poder responder

estas tres preguntas:

¿Dónde estoy?¿Dónde he estado?¿Dónde puedo ir?

Page 105: ::inpercom  usabilidad y web

Diseño de sitios – navegación

¿Dónde estoy? Es la pregunta más importante, porque es fundamental

para poder entender la estructura del sitio.

La posición debería ser relativa al sitio y a la web como un todo.

Identificar el sitio, el subsitio (en la medida de lo posible, etc) de una forma consistente. Logos. Titulares. Secciones resaltadas.

Page 106: ::inpercom  usabilidad y web

Diseño de sitios – navegación

¿Dónde he estado? Es una pregunta difícil de responder.

Se pueden usar cookies.

History list.

Botón de back.

No cambiar los colores estándar de los links.

Page 107: ::inpercom  usabilidad y web

Diseño de sitios – navegación

¿Dónde puedo ir? Se responde con las opciones de navegación visibles.

Si el usuario tiene una noción de la estructura del sitio, puede suponer la existencia de partes invisibles en ese momento.

La estructura del sitio es un factor determinante.

Page 108: ::inpercom  usabilidad y web

Diseño de sitios – navegación

Hay tres tipos de links:

Embebidos: Los tradicionales subrayados.

Estructurales: Links que apuntan sistemáticamente a otros puntos de la

estructura del sitio. Es importante mantener la tipología de los links estructurales

en todas las páginas.

Asociativos: links de “ver también”.

Page 109: ::inpercom  usabilidad y web

Diseño de sitios – estructura

No importa que diseño de navegación se elija, todo lo que hace es mostrar la ubicación actual y los movimientos relativos que puede hacer.

Evidentemente, la estructura tiene un impacto importante en la navegabilidad del sitio.

La mayoría de los sitios proponen una estructura jerárquica (arborescente), con información cada vez más detallada, mientras que otros usan una estructura tabular, donde la info se puede ordenar según algunos parámetros

Page 110: ::inpercom  usabilidad y web

Diseño de sitios – estructura

Las dos reglas más importantes son: tener una estructura.

diseñarla para reflejar lo que los usuarios esperan y ven en el sitio (su info y sus servicios) y NO la estructura interna de la empresa.

Es dificil no reflejar la estructura interna porque no se puede dividir tan fácilmente las responsabilidades de creación de contenido o diseño.

Page 111: ::inpercom  usabilidad y web

Diseño de sitios – estructura

En general es mejor combinar la estructura por categorías con la posibilidad de consultar la información desde un punto de vista “tabular”.

Las herramientas de búsqueda son importantes.

Preferir simplicidad, pero brindando las herramientas para que el usuario decida su camino dentro del sitio.

Page 112: ::inpercom  usabilidad y web

Diseño de sitios – control.

Diseño de interfaz tradicional vs. diseño web.

El usuario controla el flujo.

Es importante ayudar a los usuarios a trabajar con grandes cantidades de información. Una búsqueda puede dar muchísimos resultados Existen muchas páginas (google: más de 3mil millones

indexadas, se estima que aparecen 7 millones de páginas por día (!) ).

Page 113: ::inpercom  usabilidad y web

Diseño de sitios – control.

Las interfaces de usuario no están pensadas para trabajar con tanta info.

Casi todas imitan a la interfaz de Macintosh que imita la de Xerox PARC de fines de los 70, las cuales están optimizadas para trabajar con unos pocos documentos.

Los browsers son aplicaciones de este paradigma, por lo que adolecen del mismo problema.

Page 114: ::inpercom  usabilidad y web

Diseño de sitios – control.

De hecho, el software actual es muy malo para enfrentar las necesidades de navegación de los usuarios (e.g. bookmarks o favoritos).

Esta necesidad se refleja en cómo han variado la manera de presentar los links en las páginas web.

También se ve con los “mapas del sitio” (aunque habitualmente están mal diseñados... Incluso falta el “Ud. está aquí”).

Page 115: ::inpercom  usabilidad y web

Diseño de sitios – control.

Reducción de los artefactos de navegación: Agrupación. Sumarización Filtrado. Truncado (con un link de “Más...”) Representaciones basadas en ejemplos. Etc.

Consejo: Evitar el 3D para la navegación.

Page 116: ::inpercom  usabilidad y web

Diseño de sitios – búsquedas.

Más de la mitad de los usuarios son “búsqueda dominantes” mientras que un quinto son “link domintantes”.

La funcionalidad de búsqueda tiene que ser fácilmente accesible desde todas las páginas.

Algunas veces se puede utilizar búsqueda por subsitios, pero en general no es buena idea. Si se utiliza hay que ser explícito e incluir un botón que

permita buscar en todo el sitio.

Page 117: ::inpercom  usabilidad y web

Diseño de sitios – búsquedas.

Búsqueda avanzada. La búsqueda booleana debe ser evitada porque los

usuarios no la usan correctamente (!).

Ej: utilizar “perros AND gatos” cuando en realidad es un OR.

Cuando un geek comete el error, puede acomodarlo... el usuario ordinario no tiene experiencia en debugging.

Si se utiliza, ponerle un nombre intimidante como “búsqueda avanzada”.

Page 118: ::inpercom  usabilidad y web

Diseño de sitios – búsquedas.

La página de resultados tiene que mostrarlos ordenados, con los mejores al principio.

En general los puntajes explícitos no tienen sentido para los usuarios.

Se deben evitar dar links repetidos.

Google (evitar los META es fundamental si uno busca en sitios externos, no así si uno confía en el contenido de las páginas).

Page 119: ::inpercom  usabilidad y web

Diseño de sitios – Diseños de URLs.

Tim Berners-Lee: si hubiera sabido el éxito que tendría la web, hubiera diseñado los URLs para que fueran más cómodos.

Conviene poner pepe.com y www.pepe.com como el mismo alias a la homepage.

La parte más importante es el nombre de dominio.

Page 120: ::inpercom  usabilidad y web

Diseño de sitios – Diseños de URLs.

Cuando uno pone un link, agregar el / del final.

Usar www.

Los usuarios tratan de descifrar el URL para comprender la estructura del sitio. Sería bueno que los browsers hicieran la

estructura explícita de alguna forma.

Crear URLs fáciles de escribir y entender (evitar O y 0, ó 1 y l, etc).

Page 121: ::inpercom  usabilidad y web

Diseño de sitios – Diseños de URLs.

Siempre que se reorganice un sitio hay que mantener los URLs viejos por los menos un año, preferiblemente dos o más.

Utilizar redireccionamiento (301 cuando es permanente o 302 por un movimiento temporal).

como siempre: Simplicidad sobre complejidad.

Page 122: ::inpercom  usabilidad y web

Usabilidad y web

Conclusión general: Diseñar con el tiempo como factor

principal.

Preferir simplicidad sobre complejidad.

Diseñar para la libertad de los usuarios.

Page 123: ::inpercom  usabilidad y web

Usabilidad y web

Más información relacionada se puede obtener en www.useit.com (sitio de Nielsen y Norman) http://www.webstyleguide.com/process/index.html http://www.sun.com/980113/sunonnet/ Sun's New

Web Design (1998) http://www.useit.com/papers/sunweb/ 1994 Design of

SunWeb - Sun Microsystems' Intranet