1. 31/03/2009
Usabilidad y
U bilid d
convertibilidad Web
Ainhoa Serna Nocedal
aserna@eps.mondragon.edu
http://mudle.mondragon.edu/mgep
1

2. 31/03/2009
Indice
1. Introducción.
2. Usabilidad Web.
2.1.
21 Diferencias entre Usabilidad y Accesibilidad
Accesibilidad.
2.2. Directrices de ayuda al usuario.
2.3. Priorizar los problemas de usabilidad.
2.4. Principios para el diseño de sitios Web.
2.5.
25 Técnicas de estilo de te to
texto.
2.6. Organizar información para los sitios Web.
2.7. Enlaces.
2.8. Elementos multimedia.
2.9. Arquitectura de Navegación.ó
3. Convertibilidad Web.
3.1 Concepto de convertibilidad
3.2 Posicionamiento en buscadores y visibilidad en la Red
3.3 Home page
3.4 Categorización de productos
3.5 Presentación del producto
3.6
36 Proceso de compra / reserva
4. Evaluar la usabilidad.
5. Bibliografía.
2

3. 31/03/2009
Descripción
• Este curso está enmarcado dentro del Programa de
Formación en Tecnologías Turísticas (FORTT 2). Este
Formación en Tecnologías Turísticas (FORTT‐2) Este
programa tiene como objetivo fundamental la
capacitación profesional (formación continua) en
negocio electrónico para trabajadores del sector
turístico. Este colectivo está formado por gerentes de
hotel, expertos en márketing, gestores de cuenta,
hl ák d
responsables de canal de venta,… y la formación está
específicamente diseñada para este colectivo
específicamente diseñada para este colectivo
proveniente de pymes turísticas, especialmente del
sector del alojamiento.
j
• Colaboración Diputación Gipuzkoa
3
3

4. 31/03/2009
Introducción
Definición de usabilidad
(http://griho.udl.es/mpiua/mpiua/definicionusab.htm)
(h // h dl / bh )
/ /d f
Coloquialmente suele definirse usabilidad
como la propiedad que tiene un determinado
sistema para que sea quot;fácil de usar o de
utilizar y de aprenderquot;;
4

5. 31/03/2009
El organismo de estandarización ISO (International
El organismo de estandarización ISO (International
Standarisation Organization) propone dos
definiciones del término usabilidad.
1- La medida en la que un producto se puede usar por
determinados usuarios para conseguir objetivos específicos con
efectividad, eficiencia y satisfacción en un contexto de uso
especificado (ISO 9241-11 (Guidance on Usability - 1998) ).
2- La
2 L capacidad que tiene un producto software para ser atractivo,
id d ti dt ft t ti
entendido, aprendido, usado por el usuario cuando es utilizado bajo
unas condiciones específicas (esta definición responde más a
criterios en términos cualitativos la ISO/IEC 9126 (2001))
cualitativos. (2001)).
5

6. 31/03/2009
Definición de usabilidad Web.
Aporta el enfoque imprescindible para que las
páginas de una empresa o entidad tengan el
páginas de una empresa o entidad tengan el
suficiente atractivo como para que el visitante no
sólo se quede y las visite, sino que, además,
q y , q, ,
regrese en el futuro.
El diseño de las páginas, sus funciones, mensajes
y contenidos deben estar diseñados e
implantados para que lo pueda usar cualquier
i l td lo p eda sar c alq ier
persona.
6

7. 31/03/2009
Definición de usabilidad Web.
La usabilidad asume cada día una parte mucho más
importante de la economía de Internet.
importante de la economía de Internet.
En el entorno tradicional de los productos físicos los usuarios
no pueden experimentar la usabilidad hasta que lo pagan y lo
adquieren.
adquieren
La web invierte la imagen: ahora, los usuarios experimentan
la usabilidad de un sitio antes de que se hayan comprometido
a usarlo y antes de que hayan pagado nada por ello.
7

8. 31/03/2009
Definición de usabilidad Web.
En el diseño de productos software:
1
1‐ los usuarios pagan de antemano
antemano.
2‐ experimentan la usabilidad después (una vez tienen el
software instalado en sus ordenadores)
En la web:
1‐ primero experimentan la usabilidad (acceden a la página
principal y navegan con el propósito de satisfacer sus
objetivos personales).
2
2‐ después, si han quedado satisfechos, pagan [NIE00]
[NIE00].
8

9. 31/03/2009
Beneficios
1‐ Desarrollo
• Reducción de los costes de producción.
• Reducción de los costes de mantenimiento y apoyo.
• Reducción de los costes corporativos.
2 Uso interno
2‐ Uso interno
• Reducción de los costes de producción.
• Reducción de los costes de mantenimiento y apoyo.
• MjMejora la calidad de vida de los usuarios
l lid d d id d l i
3‐ Ventas
• Incremento de las ventas.
• Mejora en la calidad del producto.
• Menor soporte al cliente.
9

10. 31/03/2009
Beneficios ‐ Ventas
• Incremento de las ventas. Un producto más usable permite
un mejor marketing debido a la mejor imagen del producto,
j g j g p
es más compresible, y por tanto más fácilmente vendible.
• Mejora en la calidad del producto: En el entorno web se
mejora la imagen y el prestigio del sitio, lo que favorece el
aumento de la tasa de conversión de visitantes a clientes.
• Menor soporte al cliente: Los sistemas usables son más
fáciles de aprender y de utilizar, comportando un menor coste
de implantación y de mantenimiento.
de implantación y de mantenimiento.
10
10

11. 31/03/2009
Diferencias: Usabilidad y Accesibilidad
Usabilidad
• Los usuarios deben ser capaces de alcanzar
db dl
sus objetivos con un mínimo esfuerzo y unos
resultados máximos.
ld á
Accesibilidad
• Acceso universal a la Web
Acceso universal a la Web.
11

12. 31/03/2009
Principios para el diseño de sitios Web
El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades
del usuario.
2. Autonomía, los usuarios deben tener el control sobre el
2 Autonomía los usuarios deben tener el control sobre el
sitio web. Los usuarios sienten que controlan un sitio web si
conocen su situación en un entorno abarcable y no infinito.
3. Todos lo enlaces deben de FUNCIONAR.
4. Escribir los contenidos resumidos un 25% de lo que sería en
un papel (leer en pantalla cuesta mucho)
un papel (leer en pantalla cuesta mucho)
www.useit.com/papers/webwriting
www.nngroup.com/reports=>teens
12

13. 31/03/2009
Principios para el diseño de sitios Web
5. Los colores han de utilizarse con precaución para no dificultar el
acceso a los usuarios con problemas de distinción de colores (aprox.
acceso a los usuarios con problemas de distinción de colores (aprox
un 15% del total).
6. Consistencia, las aplicaciones deben ser consistentes con las
expectativas de los usuarios, es decir, con su aprendizaje previo.
7. Eficiencia del usuario, los sitios web se deben centrar en la
p
productividad del usuario, no en la del propio sitio web. Por
, pp
ejemplo, en ocasiones tareas con mayor número de pasos son más
rápidas de realizar para una persona que otras tareas con menos
pasos, pero más complejas.
pasos, pero más complejas.
8. Reversibilidad, un sitio web ha de permitir deshacer las acciones
realizadas.
13

14. 31/03/2009
Principios para el diseño de sitios Web
9. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón
esta en función de la distancia y el tamaño del objetivo. A menor distancia
y j
y mayor tamaño más facilidad para usar un mecanismo de interacción.
10. Calidad es igual a rapidez. (más de 20 segundos el 80% de los visitantes
se irá sin ver la página, poner precarga)
Reducción del tiempo de latencia. Hace posible optimizar el tiempo de
espera del usuario, permitiendo la realización de otras tareas mientras se
completa la previa e informando al usuario del tiempo pendiente para la
finalización de la tarea.
11. Sitio sencillo. Aprendizaje, los sitios web deben requerir un mínimo
proceso de aprendizaje y deben poder ser utilizados desde el primer
momento.
14

15. 31/03/2009
Principios para el diseño de sitios Web
12. El uso adecuado de metáforas facilita el aprendizaje de un
sitio web, pero un uso inadecuado de estas puede dificultar
enormemente el aprendizaje.
13. La protección del trabajo de los usuarios es prioritario, se
debe asegurar que los usuarios nunca pierden su trabajo como
consecuencia de un error.
id
14. Legibilidad, el color de los textos debe contrastar con el
14 Legibilidad el color de los textos debe contrastar con el
del fondo, y el tamaño de fuente debe ser suficientemente
grande.
15

16. 31/03/2009
Principios para el diseño de sitios Web
15. Seguimiento de las acciones del usuario. Conociendo y
almacenando información sobre su comportamiento previo se
almacenando información sobre su comportamiento previo se
ha de permitir al usuario realizar operaciones frecuentes de
manera más rápida.
16. Interfaz visible. Se deben evitar elementos invisibles de
navegación que han de ser inferidos por los usuarios, menús
desplegables, indicaciones ocultas, etc.
16

17. 31/03/2009
Accesibilidad
• Web accesible independientemente del tipo
de hardware, software, infraestructura de red,
de hardware software infraestructura de red
idioma, cultura, localización geográfica y
capacidades de los usuarios. (Por ej: una web deja de ser
capacidades de los usuarios
accesible cuando para poder visualizarla correctamente necesitamos un plugin
especial o navegador, muchas Web de EEUU sólo funcionan con IE).
Para todos los usuarios independientemente
P td l i id di t t
de las circunstancias y los dispositivos
utilizados a la hora de acceder a la
tili d lh d d l
información. (Por ej: una página accesible lo será tanto para una persona
con discapacidad, como para cualquier otra persona que se encuentre bajo
con discapacidad como para cualquier otra persona que se encuentre bajo
circunstancias externas que dificulten su acceso a la información).
17

18. 31/03/2009
Directrices de ayuda
• Explicitar al usuario dónde está y a dónde puede ir:
–N b d l
Nombre de la compañía o logotipo en la esquina superior
ñí l ti l i i
izquierda.
– 1 Enlace directo a la página principal.
pg p p
– Un buscador (mejor en la esquina superior derecha)
• Orientar al usuario hacia el resto del sitio.
– Migas de pan (situación actual con respecto a la jerarquía
del sitio) http://www.mondragon.edu/telematika
•LLos usuarios han podido llegar a la página actual por rutas
ih did ll l ái tl t
diferentes y pueden haberse perdido información contenida
en páginas de niveles superiores.
18

19. 31/03/2009
Priorizar los problemas de usabilidad
“Usabilidad:prioridad en el
diseño Web”.
Autores: Jakob Nielsen y
Hoa Loranger.
Ed: Anaya
Cada porción = Porcentaje de
infelicidad del usuario por
cada fallo de diseño
19

20. 31/03/2009
Priorizar los problemas de usabilidad
“Usabilidad:prioridad en el
Cada porción = Agrupados
p gp diseño Web”.
Web
por gravedad (búsqueda>) y Autores: Jakob Nielsen y
categorías de fallo de diseño Hoa Loranger.
(naranja>) Ed: Anaya
20

21. 31/03/2009
Priorizar los problemas de usabilidad
“Usabilidad:prioridad en el
Usabilidad:prioridad
diseño Web”.
Autores: Jakob Nielsen y
Hoa Loranger.
Ed: Anaya
Ed A
Cada porción =
Porcentaje de
fracaso del
usuario
21

22. 31/03/2009
“Usabilidad:prioridad en el
Cada porción = GRANDES categorías
diseño Web”.
Web
Catalogados por frecuencia q causan al
Autores: Jakob Nielsen y
usuario el fracaso de tareas
Hoa Loranger.
Ed: Anaya
22

23. 31/03/2009
Principios para el diseño de sitios Web
Otros principios para el diseño de sitios web son:
a) Los usuarios deben ser capaces de alcanzar sus objetivos
con un mínimo esfuerzo y unos resultados máximos.
b) Un sitio web no ha de tratar al usuario de manera hostil.
Cuando el usuario comete un error el sistema ha de
solucionar el problema, o en su defecto sugerir varias
solucionar el problema o en su defecto sugerir varias
soluciones posibles, pero no emitir respuestas que meramente
informen del error culpando al usuario.
23

24. 31/03/2009
Principios para el diseño de sitios Web
c) En ningún caso un sitio web puede venirse abajo o producir
un resultado inesperado. Por ejemplo no deben existir
un resultado inesperado Por ejemplo no deben existir
enlaces rotos.
d) U i i
Un sitio web debe ajustarse a los usuarios. La libertad en el
bd b j l i L lib d l
uso de un sitio web es un término peligroso, cuanto mayor
sea el número de acciones que un usuario pueda realizar,
mayor es la probabilidad que cometa un error. Limitando el
número de acciones al público objetivo se facilita el uso de un
sitio web.
sitio web
24

25. 31/03/2009
Principios para el diseño de sitios Web
e) Los usuarios no deben sufrir sobrecarga de información.
Cuando un usuario visita un sitio web y no sabe donde
Cuando un usuario visita un sitio web y no sabe donde
comenzar a leer, existe sobrecarga de información.
f) U iti
Un sitio web debe ser consistente en todos los pasos del
bd b it t td l dl
proceso. Aunque pueda parecer apropiado que diferentes
áreas tengan diseños diferentes, la consistencia entre los
diseños facilita al usuario el uso de un sitio.
g) Un sitio web debe proveer de un feedback a los usuarios, de
Un sitio web debe proveer de un feedback a los usuarios, de
manera que éstos siempre conozcan y comprendan lo que
sucede en todos los pasos del proceso.
25

26. 31/03/2009
Evitar
• Abrir nuevas ventanas de navegación. La excepción:
documentos PDF y similares.
• Elementos de diseño que parecen publicidad.
• Contenido etéreo y promoción vana (Ej: Zinc Bistro,
montblanc).
montblanc)
• Contenido denso y texto extenso (Ej:ssa.gov).
• Tiempo lento de descarga. http://www.useit.com/ (poco
p g p // / (p
estético y carente de diseño, descarga rápida y positivo
usuario)
• Pá i
Páginas splash
lh
(http://mercadeoglobal.com/articulos/articles/28/1/Mirada‐
critica‐a‐las‐paginas‐splash/Pagina1.html)
26

27. 31/03/2009
Marcos
– Antes:
• Inhabilitaban el botón de “Atrás” de los navegadores
Inhabilitaban el botón de Atrás de los navegadores
(desastre en usabilidad).
• Imprimir las pág. resultaba muy difícil.
• Interfería en los motores de búsqueda
• Ej: Hotel niza (https://www.hotelniza.com/)
– Ahora:
• Funciona el botón atrás.
• Imprimir las páginas resulta más fácil.
27

28. 31/03/2009
• Flash
– Antes:
Inhabilitaba el botón “Atras”.
•
Animaciones innecesarias.
Animaciones innecesarias
•
No permitía a los usuarios controlar su propio destino.
•
Introducen sus propios controles GUI no estandarizados, reduce la
•
usabilidad del sitio.
usabilidad del sitio
• Multimedia y videos largos.
– El ancho de banda ha aumentado
El ancho de banda ha aumentado.
– La duración de los videos debe ser inferior al minuto.
• Diseños congelados (anchura fija).
Diseños congelados (anchura fija).
– Evita desplazamiento horizontales, los verticales son los
que esperan. Evitar moverse en 2 dimensiones.
– Con el aumento de pantallas grandes no es tan grave este
problema de usabilidad.
28

29. 31/03/2009
Incompatibilidad de plataformas múltiples
Incompatibilidad de plataformas múltiples
– No sólo funcionar en diferentes ordenadores Mac,
.. sino también en diferentes navegadores Firefox,
g ,
IE, Safari (Apple), Opera.
– Esperar 5 0 6 años a partir del lanzamiento de una
p p
nueva versión de un navegador para
despreocuparse de la anterior.
– Examen de los registros de servidor para ver qué
porcentaje de sus clientes actuales emplea una
versión.
ió
– Dispositivos portátiles. Necesita un diseño mucho
más simple.
ái l
29

30. 31/03/2009
1º Ejemplo: busca la carta de menús para comer
30

31. 31/03/2009
Encarga como regalo de empresa 10
plumas negras
plumas negras
31

32. 31/03/2009
¿Si estás fuera de US puedes recibir Social Security
benefits?
32

33. 31/03/2009
Compra fertilizantes para el cesped
33

34. 31/03/2009
¿Es usable este diseño?
34

35. 31/03/2009
35

36. 31/03/2009
¿Cómo queda la camisa
Cadillacs Cotton Rayon Short Sleeve Shirts de la
marca Koko Island en azúl marino?¿Qué pone en el texto que rota?
36