31/03/2009




        1
31/03/2009




Practica
 • Hay casos en los que los combos se utilizan para 
   quot;ahorrar operativa al usuarioquot;...
...
31/03/2009




Practica




                   3
31/03/2009




• RECUERDA: El usuario es el que tiene el control... no 
  la maquina... NUNCA se deben ejecutar operacione...
31/03/2009




 El adecuado uso de controles de formulario es 
 decisivo para el éxito.
 decisivo para el éxito
• Los form...
31/03/2009




Radio buttons
• Han de ser claramente excluyentes (sino inadecuada redacción).
• La cercanía espacial de lo...
31/03/2009




Combos usables 
• Los combos se utilizan para restringir la respuesta de 
  una pregunta a unas determinada...
31/03/2009




check‐boxes

• Los check‐boxes se utilizan en dos casos: 
  1) Para restringir la respuesta de una pregunta...
31/03/2009




Campos de texto

  Se utilizan cuando se quiere permitir cualquier tipo 
  de respuesta a una pregunta del ...
31/03/2009




En la dirección postal (tipo de vía, nombre de la vía, número, 
piso, escalera, puerta, etc.) es adecuado u...
31/03/2009




Siendo la dirección postal un campo que no se analiza en la 
Si d l di        ió     tl                    ...
31/03/2009




La fecha es uno de los campos de texto que más errores 
genera en la mayoría de los formularios. Casi siemp...
31/03/2009




• Un error típico es introducir el salto automático entre campos 
  de texto consecutivos y hacer innecesar...
31/03/2009




    Recomendaciones Generales
    Agrupar
•
    Para evitar la incomodidad del cambio entre teclado y ratón...
31/03/2009




Práctica: Convertibilidad Web

• Evalúa la Usabilidad del sitio web: 
  http://www.jpchocolates.com/
  http...
31/03/2009




Practica: ¿Quien consigue la venta?

Compara las web de reserva de vuelos:
• terminalA
         l
• Lastmin...
31/03/2009




Optimizar el formato Web para diferentes 
dispositivos
• Browser (css media screen) Ejemplo word, ejemplo h...
31/03/2009




Evaluar la usabilidad
• Evaluación automática.
   – WebMetrics http://zing.ncsl.nist.gov/WebTools/tech.html...
31/03/2009




eyetracking

• La aportación del eyetracking en el sector de 
  usabilidad 
  usabilidad
  (http://www.usol...
31/03/2009




eyetracking
• En el mapa anterior, se quiere transmitir que los 
  anuncios no son vistos, sin embargo se e...
31/03/2009




eyetracking

• http://www.poynterextra.org/et/i.htm




                                         130




  ...
31/03/2009




eyetracking
• ¿Es efectivo el diseño de la página de inicio?
• ¿Qué efecto tienen los 'blurbs' (párrafo que...
31/03/2009




eyetracking

• Una investigación de ‘seguimiento’ o ‘rastreo’ 
  de ojo ( eyetracking ) combinado con otras...
31/03/2009




patrón común
• Los ojos primero se fijaban con más frecuencia en la 
  parte superior izquierda de la págin...
31/03/2009




• La imagen superior es una representación simplista 
  del patrón más común de movimiento de ojo 
  del pa...
31/03/2009




eyetracking

• Otra observación del Eyetrack: los titulares 
  dominantes atraen la atención con más 
  dom...
31/03/2009




eyetracking
• En las páginas de inicio, los instintos de los lectores 
  los llevan a mirar primero la band...
31/03/2009




¿Desea que la gente lea, no escanee?

• El comportamiento de la gente fue 
  particularmente interesante cu...
31/03/2009




• Con el titular más largo que el ‘blurb’ y en una línea 
  separada, la gente tendía a ver los titulares y...
31/03/2009




• Subrayar los titulares desanimó a los 
  participantes en las pruebas a leer los  blurbs
  participantes ...
31/03/2009




• Las rupturas visuales –como una línea o regla–
  desaniman a la gente a mirar los ítems más allá de la 
 ...
31/03/2009




La vista parcial de los titulares y los ‘blurbs’ es 
más común
más común

• Cuando la gente mira los ‘blurb...
31/03/2009




• Este es el ‘heatmap’ (mapa de zonas calientes– es 
  una vista agregada de todas las fijaciones de ojo de...
31/03/2009




• Las personas típicamente escanean hacia abajo una 
  lista de titulares, y con frecuencia no los ven 
  l...
31/03/2009




• Lo mismo vale para los ‘blurbs no solo deberían 
  conservarse cortos, sino que el primer par de 
  conse...
31/03/2009




• El Eyetrack encontró que la gente típicamente 
  mira más allá de la primera pantalla. Pero sus 
  mira m...
Próxima SlideShare
Cargando en…5
×

Usabilidad Convertibilidad 4

405 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
405
En SlideShare
0
De insertados
0
Número de insertados
13
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Usabilidad Convertibilidad 4

  1. 1. 31/03/2009 1
  2. 2. 31/03/2009 Practica • Hay casos en los que los combos se utilizan para  quot;ahorrar operativa al usuarioquot;... ahorrar operativa al usuario ... Ej: comparar dos coches en la web de Supermotor Elijo la Marca A y el Modelo A (se recarga la pagina  sin que yo lo indique) Elijo la Marca B y el modelo B (se recarga la pagina  Elij l M Bl d l B( l i otra vez sin que yo lo indique) Y ahora es cuando puedo comparar.  Y ahora es cuando puedo comparar 2
  3. 3. 31/03/2009 Practica 3
  4. 4. 31/03/2009 • RECUERDA: El usuario es el que tiene el control... no  la maquina... NUNCA se deben ejecutar operaciones  la maquina NUNCA se deben ejecutar operaciones sin que el usuario lo haya ordenado. Recargar la  pagina es ejecutar una orden que el usuario ordena...  nunca la debemos hacer si su permiso.  ¿Qué ahorro hemos conseguido? Solo hemos  conseguido que el usuario se vea recargando la  d l dl pagina una y otra vez... 4
  5. 5. 31/03/2009 El adecuado uso de controles de formulario es  decisivo para el éxito. decisivo para el éxito • Los formularios son usados para comprar, registrarse, buscar,  suscribirse, asociarse, etc. todos ellos procesos básicos para la  suscribirse asociarse etc todos ellos procesos básicos para la supervivencia de un sitio web y su eslabón más frágil. Cuando un  usuario se decide a completar un formulario ya ha tomado una  decisión (compra, suscripción, registro, etc.) y esta dispuesto a  d i ió ( i ió it t) t di t llevarla a cabo, el sitio web ha tenido éxito y solo falta quot;rematar la  faenaquot;.  Entre la intención del usuario y una cumplimentación exitosa el  factor más importante es la usabilidad. De ella dependerá su ratio  factor más importante es la usabilidad. De ella dependerá su ratio de cumplimentación, es decir, el cociente entre el número de  usuarios que finalizan el formulario y número total de usuarios que  lo comienzan. l i 5
  6. 6. 31/03/2009 Radio buttons • Han de ser claramente excluyentes (sino inadecuada redacción). • La cercanía espacial de los radio buttons. • El número máximo de opciones oscila dependiendo de su longitud y  complejidad.  – Si las opciones son cortas y sencillas: máx 5 Si las opciones son cortas y sencillas: máx. 5 – Si las opciones son largas y de ideas complejas: max. 3  (disminuiría mucho su usabilidad, en estos casos es recomendable  dividir la pregunta compleja en dos más simples) 6
  7. 7. 31/03/2009 Combos usables  • Los combos se utilizan para restringir la respuesta de  una pregunta a unas determinadas opciones de  pg p respuesta (solo 1).  • Las respuestas de los combos están ocultas para  p p ocupar menos espacio en el formulario.  • Sencillas e inequívocas tras leer el enunciado de la  pregunta.  Ej: 1 combo quot;paísquot; se incluyen todos los países del mundo se hace muy  difícil de utilizar. El usuario escribe antes el nombre del país  seleccionándolo en un combo de más de 100 opciones. Además quot;paísquot; en  la mayoría de los casos no es un campo crítico y su ratio de errores muy  la mayoría de los casos no es un campo crítico y su ratio de errores muy bajo.  7
  8. 8. 31/03/2009 check‐boxes • Los check‐boxes se utilizan en dos casos:  1) Para restringir la respuesta de una pregunta a unas  1) Para restringir la respuesta de una pregunta a unas determinadas opciones de las cuales es posible  escoger varias.  escoger varias. 2) Para presentar una única opción que no es  obligatoria.  Ej: confirmar la lectura de cláusulas de contratos, optar por recibir correos  • electrónicos con publicidad, etc. Para que se produzca una confirmación real y  l tó i bli id d t P d fi ió l consciente del usuario, la check‐box deberá aparecer por defecto sin marcar, en  caso contrario el usuario puede perder confianza en el sitio e interpretar su política  como engañosa.  g 8
  9. 9. 31/03/2009 Campos de texto Se utilizan cuando se quiere permitir cualquier tipo  de respuesta a una pregunta del formulario. Son los  de respuesta a una pregunta del formulario Son los preferidos por los usuarios que saben que pueden  escribir casi cualquier cosa.  q La longitud del campo es importante porque da a los  usuarios la clave sobre la longitud de la respuesta  esperada, ello les hace ajustarla y comprender mejor  la pregunta.  l t 9
  10. 10. 31/03/2009 En la dirección postal (tipo de vía, nombre de la vía, número,  piso, escalera, puerta, etc.) es adecuado un solo campo de  piso escalera puerta etc ) es adecuado un solo campo de texto. Un usuario necesita menos tiempo para completar un único campo,  porque lo hace muy frecuentemente y no es fácil que cometa errores.  La excesiva separación de los datos en diferentes campos  La excesiva separación de los datos en diferentes campos provoca errores porque no es posible incluir absolutamente  todos los posibles elementos de la dirección (piso, escalera,  puerta, bloque, escalera, patio, etc.). Puede confundir al usuario y  originarle una falta de confianza en el correcto resultado del proceso.  10
  11. 11. 31/03/2009 Siendo la dirección postal un campo que no se analiza en la  Si d l di ió tl li l base de datos y simplemente se imprime en las etiquetas de  los sobres, no tiene sentido utilizar 4 o 5 campos diferentes  para su recogida (en caso de necesidad se puede usar el  código postal que se recoge en un campo distinto).  11
  12. 12. 31/03/2009 La fecha es uno de los campos de texto que más errores  genera en la mayoría de los formularios. Casi siempre incluye  un ejemplo de formato o requiere de usar combos muy  j ldf t i d b incómodos no justificados para un dato tan sencillo. El formato  más adecuado para la mayoría de los casos es este:  Una validación de errores tolerante con la falta de ceros a la  izquierda y que también acepte solo dos dígitos en el año  permitirá un funcionamiento adecuado.  12
  13. 13. 31/03/2009 • Un error típico es introducir el salto automático entre campos  de texto consecutivos y hacer innecesario el uso del tabulador.  Aunque este comportamiento puede parecer que facilita la tarea de introducción  de datos, no es adecuado porque quita control a los usuarios, no es un  funcionamiento estándar y es necesario mirar la pantalla para saber en que campo  se está. Todo ello puede provocar fácilmente errores, como por  ejemplo, introducir datos pertenecientes a un campo en el  j l it d idt t it l siguiente cuando no se introduce el formato esperado por el  salto automático.  En la validación de campos de texto, se recomienda aceptar  algunos quot;erroresquot; comunes como espacios en los números de  l quot; quot; i l ú d teléfono, los puntos de millares o el uso indistinto de  mayúsculas o minúsculas. 13
  14. 14. 31/03/2009 Recomendaciones Generales Agrupar • Para evitar la incomodidad del cambio entre teclado y ratón, cuando tenga  sentido, agrupar por un lado los controles que se manejan con el ratón  tid ld l tl j l tó (radio‐buttons, check‐boxes, combos) y por otro los que se manejan con el  teclado (campos de texto), en lugar de alternarlos. Situar: • Respecto a la situación, tanto los quot;radio buttonquot; como los quot;check‐boxquot;  siempre se han situar a la izquierda d l ti i h it l i q ierda de la etiqueta del campo, así se favorece  t dl íf la alineación vertical de todos los controles. Por el contrario los combos y los  campos de texto deben situarse a la derecha de la etiqueta del campo. 14
  15. 15. 31/03/2009 Práctica: Convertibilidad Web • Evalúa la Usabilidad del sitio web:  http://www.jpchocolates.com/ http://www jpchocolates com/ (Compra 2 cajas de Chocolate Cocoa Truffles)  124 15
  16. 16. 31/03/2009 Practica: ¿Quien consigue la venta? Compara las web de reserva de vuelos: • terminalA l • Lastminute • eDreams 125 16
  17. 17. 31/03/2009 Optimizar el formato Web para diferentes  dispositivos • Browser (css media screen) Ejemplo word, ejemplo html • Impresora (css media print) Impresora (css media print) • PDAS. 1‐Ser consciente de las limitaciones de los PDAs. Los ordenadores de bolsillo tienen una pantalla más  reducida, menos memoria y menos velocidad de proceso  que los ordenadores convencionales.  que los ordenadores convencionales 2‐Definir cuidadosamente la estructura del site. Con las secciones más importantes y enlaces a las mismas  Cl i ái tt l l i desde todas las páginas. La primera página ya ha de  mostrar información útil para el usuario, evitando páginas  de bienvenida o de selección de idioma.  17
  18. 18. 31/03/2009 Evaluar la usabilidad • Evaluación automática. – WebMetrics http://zing.ncsl.nist.gov/WebTools/tech.html: – https://addons.mozilla.org/es‐ES/firefox/addon/60 – https://addons.mozilla.org/es‐ES/firefox/addon/1843 • Tamaño de las pág Tamaño de las pág. • Tiempos de descarga. • Tamaños absolutos de fuentes y tablas Tamaños absolutos de fuentes y tablas. • Formato de los textos. • Enlaces rotos. • Evaluación heurística (por expertos)  http://www.useit.com/papers/heuristic/heuristic_list.html • Evaluación con usuarios (Selenium IDE,  l ó i(l http://seleniumhq.org/projects/ide/) 18
  19. 19. 31/03/2009 eyetracking • La aportación del eyetracking en el sector de  usabilidad  usabilidad (http://www.usolab.com/articulos/eyetracking‐usabilidad‐ comunicacion.php) p p) Mapa de Zonas ciegas Mapa de Calor 19
  20. 20. 31/03/2009 eyetracking • En el mapa anterior, se quiere transmitir que los  anuncios no son vistos, sin embargo se está usando  anuncios no son vistos sin embargo se está usando un mapa de visión dónde se destaca lo que se ve en  lugar de lo que no se ve. • Un recurso más apropiado es usar un mapa donde  aparecen tan sólo aquellas zonas han sido vistas por  algún usuario, un mapa de quot;zonas ciegasquot;. 20
  21. 21. 31/03/2009 eyetracking • http://www.poynterextra.org/et/i.htm 130 21
  22. 22. 31/03/2009 eyetracking • ¿Es efectivo el diseño de la página de inicio? • ¿Qué efecto tienen los 'blurbs' (párrafo que sigue al  ¿Qué efecto tienen los  blurbs (párrafo que sigue al título en la página de inicio) comparados con los  titulares?  titulares? • ¿Cuándo es apropiado utilizar recursos multimedia? • ¿Están los avisos publicitarios ubicados donde ¿Están los avisos publicitarios ubicados donde  puedan ser vistos por la audiencia? 131 22
  23. 23. 31/03/2009 eyetracking • Una investigación de ‘seguimiento’ o ‘rastreo’  de ojo ( eyetracking ) combinado con otras  de ojo (‘eyetracking’) combinado con otras medidas ya usadas por los administradores de  los sitios web –pruebas de usabilidad,  los sitios web pruebas de usabilidad sesiones de grupo, análisis de registros (log  analysis)–, pueden suministrar una guía para  analysis) pueden suministrar una guía para mejorar dichos sitios. 132 23
  24. 24. 31/03/2009 patrón común • Los ojos primero se fijaban con más frecuencia en la  parte superior izquierda de la página, luego se  parte superior izquierda de la página luego se quedaban en esa área antes de ir de izquierda a  derecha. Sólo después de leer con atención la  porción superior de la página por algún tiempo  hicieron que sus ojos exploraran más abajo. • Dependiendo del diseño de la página, este patrón  puede variar. 133 24
  25. 25. 31/03/2009 • La imagen superior es una representación simplista  del patrón más común de movimiento de ojo  del patrón más común de movimiento de ojo registrado a través de múltiples diseños de páginas  de inicio. 134 25
  26. 26. 31/03/2009 eyetracking • Otra observación del Eyetrack: los titulares  dominantes atraen la atención con más  dominantes atraen la atención con más frecuencia cuando se ingresa a la página – especialmente cuando están en la parte  especialmente cuando están en la parte superior izquierda, y con más frecuencia  (pero no siempre) cuando están en la parte  (pero no siempre) cuando están en la parte superior derecha. 135 26
  27. 27. 31/03/2009 eyetracking • En las páginas de inicio, los instintos de los lectores  los llevan a mirar primero la bandera/logo y los  los llevan a mirar primero la bandera/logo y los titulares principales en la parte superior izquierda. La  gráfica inferior muestra las zonas de importancia 136 27
  28. 28. 31/03/2009 ¿Desea que la gente lea, no escanee? • El comportamiento de la gente fue  particularmente interesante cuando se usaban  particularmente interesante cuando se usaban titulares y ‘blurbs’ (el párrafo que le sigue al  título) en las páginas de inicio. Los  título) en las páginas de inicio Los participantes en las pruebas del Eyetrack III  tendían a ver tanto el titular como el  blurb tendían a ver tanto el titular como el ‘blurb’  cuando el primero estaba en negrita y en el  mismo tamaño que el segundo, y ambos en el  mismo tamaño que el segundo y ambos en el mismo renglón. 137 28
  29. 29. 31/03/2009 • Con el titular más largo que el ‘blurb’ y en una línea  separada, la gente tendía a ver los titulares y saltar  separada la gente tendía a ver los titulares y saltar los ‘blurbs’;  • Los investigadores creen que es el contraste en el Los investigadores creen que es el contraste en el  tamaño de la tipografía lo que da cuenta de este  comportamiento, así como el tamaño de la tipografía  en si mismo.  • Cuando el titular es más grande que el texto de su  respectivo ‘blurb’, puede ser percibido como  elemento más importante en el bloque titular‐blurb  –así que la gente parece decidir que ver el titular es  así que la gente parece decidir que ver el titular es suficiente y salta el ‘blurb’–. 138 29
  30. 30. 31/03/2009 • Subrayar los titulares desanimó a los  participantes en las pruebas a leer los  blurbs participantes en las pruebas a leer los ‘blurbs’  en la página de inicio. 139 30
  31. 31. 31/03/2009 • Las rupturas visuales –como una línea o regla– desaniman a la gente a mirar los ítems más allá de la  ruptura, como un ‘blurb’. • La mayoría de ellos (22 de 25) usan ‘blurbs’ para  acompañar los titulares en sus páginas de inicio. Son  ñl l á d raros los que usan solo titulares: CNN.com,  NYPost.com y ProJo.com.  NYPost com y ProJo com • En términos del tamaño del titular, existe una  división equilibrada entre quienes usan un tamaño  división equilibrada entre quienes usan un tamaño de tipografía más grande y uno más pequeño. • 12 de los 22 sitios que usan ‘blurbs’ en sus páginas  12 de los 22 sitios que usan  blurbs en sus páginas de inicio ponen líneas bajo sus titulares. 140 31
  32. 32. 31/03/2009 La vista parcial de los titulares y los ‘blurbs’ es  más común más común • Cuando la gente mira los ‘blurbs’ bajo los titulares en  Cuando la gente mira los  blurbs bajo los titulares en las páginas de inicio, con frecuencia mira solo el  tercio izquierdo de ellos. La mayoría  mira solo el  tercio izquierdo de ellos. La mayoría mira solo el primer par de palabras –y solo sigue leyendo si es  animada por ellas‐. 141 32
  33. 33. 31/03/2009 • Este es el ‘heatmap’ (mapa de zonas calientes– es  una vista agregada de todas las fijaciones de ojo de  una vista agregada de todas las fijaciones de ojo de los sujetos de la prueba). Abajo, el área naranja fue  la más vista; la azul, la menos vista. 142 33
  34. 34. 31/03/2009 • Las personas típicamente escanean hacia abajo una  lista de titulares, y con frecuencia no los ven  lista de titulares y con frecuencia no los ven completamente. Si las primeras palabras las animan,  tienen la tendencia a continuar. En promedio, un  titular tiene menos de un segundo de la atención de  los visitantes. • Para los titulares –especialmente los más largos– parecería que el primer par de palabras necesitaran  ser verdaderas cautivadoras de la atención si usted  dd ti d d l t ió i t d desea captar los ojos. 143 34
  35. 35. 31/03/2009 • Lo mismo vale para los ‘blurbs no solo deberían  conservarse cortos, sino que el primer par de  conservarse cortos sino que el primer par de palabras necesita capturar la atención del visitante. • En los 25 sitios que revisaron hay una considerable  variedad de ‘blurbs’. La longitud promedio del ‘blurb’  g p varía de un mínimo de 10 palabras a un máximo de  25, con la mayoría de los sitios alrededor de 17. 144 35
  36. 36. 31/03/2009 • El Eyetrack encontró que la gente típicamente  mira más allá de la primera pantalla. Pero sus  mira más allá de la primera pantalla Pero sus ojos típicamente escanean las porciones más  bajas de la página buscando algo que capture  bajas de la página buscando algo que capture su atención.  •SSus ojos pueden fijarse en un titular  j d fij il interesante o palabra que se destaque, pero  no en otro contenido. De nuevo, esto señala la  id D ñl l necesidad de escribir titulares atractivos. 145 36

×