Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESARROLLO DE INTERFACES
UNIDAD 1. USABILIDAD WEB
Laura Folgado Galache
Usabilidad en la vida real
¿Cómo buscamos la
mermelada en un
supermercado?
¿Y la planta de
traumatología en
un hospital?
¿...
Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
3
Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
4
Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
5
Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
6
Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
7
Usabilidad
¨ “En realidad, usabilidad es que algo funciona bien:
significa que una persona de capacidady aptitudes
medias ...
Diseño de interfaces web
¨ Dar control al usuario.
¨ Reducir la carga de memoria.
¨ Mantener una interfaz consistente.
¡NO...
Objetivos de la usabilidad
Búsqueda
rápida,
cómoda y
eficiente de la
información.
Facilitar la
navegación
de los
usuarios....
Objetivos de la usabilidad
Laura Folgado Galache Septiembre 2015
11
http://www.theworldsworstwebsiteever.com/
Los usuarios
¿Son todos
iguales?
Laura Folgado Galache Septiembre 2015
12
Los usuarios
Características. Expectativas. Capacidades y
aptitudes.
Qué necesitan. Cómo acceden a
la web.
Qué experiencia...
La URL de mi sitio
Sencillez
• Facilidad para
recordarlo
• Facilidad para
escribirlo
Palabras compuestas:
• Juntar las pal...
Logotipo y tagline
¨ Taglines claras e informativas y con la extensión
justa.
¨ Deben estar junto al logotipo.
Laura Folga...
Logotipo y tagline
¨ Hay logotipos que no necesitan tagline
Laura Folgado Galache Septiembre 2015
16
Títulos de página
¨ Utiliza títulos en las páginas (<title>)
¨ Cada titulo debe tener entre 2 y 6 palabras.
¨ Diferentes p...
La página principal
Laura Folgado Galache Septiembre 2015
18
La página principal
¨ La página principal debe responder a:
¤ “¿Dónde estoy?”
¤ “¿Qué hace este sitio?”.
¨ Páginas adaptab...
Información accesible
Laura Folgado Galache Septiembre 2015
20
Información accesible
¨ Buena organización de los contenidos.
¨ Buen sistema de navegación.
¨ Todos los contenidos accesib...
Información accesible
Laura Folgado Galache Septiembre 2015
22
Navegación
¨ ¿Dónde está el logotipo de una página web?
¨ ¿Y el menú principal?
¨ ¿Y el buscador?
¨ ¿Y le carrito de la co...
Navegación
Laura Folgado Galache Septiembre 2015
24
Navegación
Laura Folgado Galache Septiembre 2015
25
¨ Migas
http://www.zalando.es
http://www.desigual.com
http://www.conla...
Navegación
• Arriba a la izquierda con enlace a inicio.
Logotipo
• Encabezado o pie.
Mapa del sitio
• Recorrido llevado a ...
Navegación
¿Dónde
estoy?
• Titulo de la
página.
• Estructura del
sitio SIN CAOS.
¿Dónde he
estado?
• Botón atrás.
• Links ...
Legibilidad
Laura Folgado Galache Septiembre 2015
28
Legibilidad
Utiliza colores
que contrasten
texto y fondo.
Evita fondos
gráficos.
Utiliza tamaños
de letra
suficientemente
...
Titulares
Laura Folgado Galache Septiembre 2015
30
Titulares
Utiliza
estándares.
Explica sobre
qué va la
información que
vas a leer.
Escribe en
lenguaje plano,
no literario....
Rótulos
Laura Folgado Galache Septiembre 2015
32
Rótulos
¨ Libros de informática
¤ Libros
¤ Música
¤ Deportes
¤ Viajes
¤ Mascotas
¨ Libros
¨ Música
¨ Deportes
¨ Viajes
¨ M...
Rótulos
Utiliza cabeceras (h1,
h2, h3…).
Si es más grande es
más importante.
Si está relacionado
lógicamente está
relacion...
Texto
¨ ¡No a los iconos excesivos ni tipografías extrañas!
http://www.valladolidwebmusical.org
Laura Folgado Galache Sept...
Texto
¨ ¡Elimina el ruido!
Laura Folgado Galache Septiembre 2015
36
Texto
¨ Utiliza tipografías coherentes
Laura Folgado Galache Septiembre 2015
37
Texto
¨ ¡No seas pesado! Escribe un 50% de lo que lo
harías en una publicación impresa.
Laura Folgado Galache Septiembre 2...
Texto
¨ El siguiente cuestionario se ha diseñado para
proporcionarnos la información necesaria que
nos ayudará a mejorar e...
Texto
Septiembre 2015Laura Folgado Galache
40
¨ ¡Divide el texto!
http://www.valladolidwebmusical.org
Texto
¨ ¿Animal, vegetal o mineral? ¡No seas ambiguo!
¿Qué es NAV?
¿Navegador?
¡Ah, no! ¡Norton
AntiVirus!
¿Inglés de UK,
...
Texto
Utiliza plantillas: no
más de 2 fuentes (3
para casos
específicos) y sin
tamaños absolutos.
Divide textos largos
en ...
Redacción de contenidos
http://todofueradelarmario.blogspot.com.es
Laura Folgado Galache Septiembre 2015
43
Redacción de contenidos
Lenguaje
sencillo y
directo
Dada la coyuntura existente
entre…
Evitar
estructuras
complejas,
palab...
Redacción de contenidos
Utilizar 2ª
persona en
lugar de 3ª
Si el usuario tiene
alguna pregunta…
Si tiene alguna
pregunta…
...
Redacción de contenidos
Utilizar la
misma
palabra
para la
misma cosa.
Documento, Certificado,
Escrito…
No utilizar
jergas,...
Consistencia y persistencia
¨ Los elementos deben tener el mismo aspecto y
funcionamiento en todas las páginas del sitio.
...
Los botones
¨ El otro día descubrí que la luz que se enciende en rojo
de mi tostadora es a la vez un botón que permite
exp...
Los botones
http://www.orrinatch.com
(Versión antigua)
¿¡Dónde pincho!?
Laura Folgado Galache Septiembre 2015
49
Los botones
http://www.todofp.com
Laura Folgado Galache Septiembre 2015
50
Los botones
http://www.musica.com
Laura Folgado Galache Septiembre 2015
51
Los botones
¡Tienen que tener forma de botón!
Laura Folgado Galache Septiembre 2015
52
Los botones
El texto no debe ser ambiguo
Laura Folgado Galache Septiembre 2015
53
Los botones
Forma de botón o
cambio al
colocarse encima.
Funciones de
vínculo (cursor
cambia a dedo).
Texto no
ambiguo.
Ic...
Los vínculos
¡Tienen que tener aspecto de vínculo!
¨ Subrayado.
¨ En color diferente al resto del texto.
¨ Los vínculos vi...
Los cuadros de búsqueda
¡Busquemos!
¨ ¿Búsqueda rápida? ¿Cuál es la búsqueda lenta?
¨ ¿De verdad tengo que elegir cómo bus...
Los cuadros de búsqueda
¿Cuáles son los estándares?
¿A dónde va esa flecha?
Laura Folgado Galache Septiembre 2015
57
Los cuadros de búsqueda
Laura Folgado Galache Septiembre 2015
58
Los cuadros de búsqueda
Laura Folgado Galache Septiembre 2015
59
Los cuadros de búsqueda
Búsqueda simple salvo
que el usuario quiera lo
contrario.
Botón con texto de
“Buscar”
NO “Encontra...
Multimedia
Tiempos de respuesta:
deben ser pequeños.
Imágenes: calidad
adaptada o thumbnails.
Animaciones: despistan,
solo...
Accesibilidad
• No usar páginas demasiado grandes.
• Utiliza cabeceras (h1, h2…).
• No uses tamaños absolutos del font.
• ...
Frames
¨ Simplemente…
Laura Folgado Galache Septiembre 2015
63
Créditos
¨ Capturas de pantalla propias.
¨ http://www.pixabay.com
¨ http://badusability.com
¨ Krug, S. No me hagas pensar....
Upcoming SlideShare
Loading in …5
×

Usabilidad web

2,638 views

Published on

Desarrollo de Interfaces (2º Desarrollo de aplicaciones multiplataforma)

Published in: Education
  • genial la presentación. Compré tu libro de montaje y también me gustó
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Usabilidad web

  1. 1. DESARROLLO DE INTERFACES UNIDAD 1. USABILIDAD WEB Laura Folgado Galache
  2. 2. Usabilidad en la vida real ¿Cómo buscamos la mermelada en un supermercado? ¿Y la planta de traumatología en un hospital? ¿Cómo sabemos qué dirección tenemos que seguir en una rotonda? ¿Y cómo recordamos el sitio donde hemos aparcado el coche en un parking subterráneo? Laura Folgado Galache Septiembre 2015 2
  3. 3. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 3
  4. 4. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 4
  5. 5. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 5
  6. 6. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 6
  7. 7. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 7
  8. 8. Usabilidad ¨ “En realidad, usabilidad es que algo funciona bien: significa que una persona de capacidady aptitudes medias (o incluso, por debajo de la media) pueda usar algo, tanto si es un sitio web, un mando a distancia o una puerta giratoria, para lo que se supone que sirve, sin frustrarse desesperadamente mientras lo hace”. ¤ Steve Krug Laura Folgado Galache Septiembre 2015 8
  9. 9. Diseño de interfaces web ¨ Dar control al usuario. ¨ Reducir la carga de memoria. ¨ Mantener una interfaz consistente. ¡NO ME HAGAS PENSAR! Laura Folgado Galache Septiembre 2015 9
  10. 10. Objetivos de la usabilidad Búsqueda rápida, cómoda y eficiente de la información. Facilitar la navegación de los usuarios. Facilitar la interactividad con el sitio. Tener en cuenta las necesidades de los usuarios. Laura Folgado Galache Septiembre 2015 10
  11. 11. Objetivos de la usabilidad Laura Folgado Galache Septiembre 2015 11 http://www.theworldsworstwebsiteever.com/
  12. 12. Los usuarios ¿Son todos iguales? Laura Folgado Galache Septiembre 2015 12
  13. 13. Los usuarios Características. Expectativas. Capacidades y aptitudes. Qué necesitan. Cómo acceden a la web. Qué experiencia previa tienen. Qué conocimientos tienen. Si tienen algún tipo de capacidad. Limitaciones técnicas (plataforma, conexión, etc.) Laura Folgado Galache Septiembre 2015 13
  14. 14. La URL de mi sitio Sencillez • Facilidad para recordarlo • Facilidad para escribirlo Palabras compuestas: • Juntar las palabras: pepitoperez.com • Usar abreviaturas: pperez.com • Usar guion: pepito- perez.com Laura Folgado Galache Septiembre 2015 14
  15. 15. Logotipo y tagline ¨ Taglines claras e informativas y con la extensión justa. ¨ Deben estar junto al logotipo. Laura Folgado Galache Septiembre 2015 15
  16. 16. Logotipo y tagline ¨ Hay logotipos que no necesitan tagline Laura Folgado Galache Septiembre 2015 16
  17. 17. Títulos de página ¨ Utiliza títulos en las páginas (<title>) ¨ Cada titulo debe tener entre 2 y 6 palabras. ¨ Diferentes páginas: diferentes títulos. ¨ Coloca los elementos claves al inicio del título. Laura Folgado Galache Septiembre 2015 17
  18. 18. La página principal Laura Folgado Galache Septiembre 2015 18
  19. 19. La página principal ¨ La página principal debe responder a: ¤ “¿Dónde estoy?” ¤ “¿Qué hace este sitio?”. ¨ Páginas adaptables al ancho. ¨ NO a las pantallas de entrada. ¨ Página principal vs Páginas interiores: ¤ Página principal: bienvenida y acceso a contenidos. ¤ Páginas interiores: no necesariamente. Laura Folgado Galache Septiembre 2015 19
  20. 20. Información accesible Laura Folgado Galache Septiembre 2015 20
  21. 21. Información accesible ¨ Buena organización de los contenidos. ¨ Buen sistema de navegación. ¨ Todos los contenidos accesibles desde el menú principal o desde algún enlace. ¨ No hay enlaces que no van a ninguna parte. ¨ Los enlaces muestran lo que se esperaba. ¨ No utilizar “En construcción”: poner el enlace cuando la página esté terminada. Laura Folgado Galache Septiembre 2015 21
  22. 22. Información accesible Laura Folgado Galache Septiembre 2015 22
  23. 23. Navegación ¨ ¿Dónde está el logotipo de una página web? ¨ ¿Y el menú principal? ¨ ¿Y el buscador? ¨ ¿Y le carrito de la compra? ¨ ¿Y el acceso a la información del usuario? ¨ ¿Cómo vuelvo a la página de inicio? Laura Folgado Galache Septiembre 2015 23
  24. 24. Navegación Laura Folgado Galache Septiembre 2015 24
  25. 25. Navegación Laura Folgado Galache Septiembre 2015 25 ¨ Migas http://www.zalando.es http://www.desigual.com http://www.conlagallinaacuestas.com
  26. 26. Navegación • Arriba a la izquierda con enlace a inicio. Logotipo • Encabezado o pie. Mapa del sitio • Recorrido llevado a cabo. • Letra pequeña con negrita en el último término • “Usted está aquí” Migas • Parte superior, secciones. Navegación Laura Folgado Galache Septiembre 2015 26
  27. 27. Navegación ¿Dónde estoy? • Titulo de la página. • Estructura del sitio SIN CAOS. ¿Dónde he estado? • Botón atrás. • Links visitados. • Migas. ¿A dónde puedo ir? • Links embebidos: hipervínculos. • Links estructurales: a otro nivel de la página. • Links asociativos: “ver también”. Laura Folgado Galache Septiembre 2015 27
  28. 28. Legibilidad Laura Folgado Galache Septiembre 2015 28
  29. 29. Legibilidad Utiliza colores que contrasten texto y fondo. Evita fondos gráficos. Utiliza tamaños de letra suficientemente grandes. No muevas el texto, ni lo escales ni hagas que parpadee. ¿Eres árabe? Justifica el texto a la izquierda. En caso de texto pequeño, utiliza letras sin serifa. Evita las mayúsculas. Laura Folgado Galache Septiembre 2015 29
  30. 30. Titulares Laura Folgado Galache Septiembre 2015 30
  31. 31. Titulares Utiliza estándares. Explica sobre qué va la información que vas a leer. Escribe en lenguaje plano, no literario. Omite artículos al comienzo. Pon la palabra clave al principio. Evita que los títulos de varias páginas comiencen igual. Laura Folgado Galache Septiembre 2015 31
  32. 32. Rótulos Laura Folgado Galache Septiembre 2015 32
  33. 33. Rótulos ¨ Libros de informática ¤ Libros ¤ Música ¤ Deportes ¤ Viajes ¤ Mascotas ¨ Libros ¨ Música ¨ Deportes ¨ Viajes ¨ Mascotas ¨ Libros de informática ¤ Programación ¤ Sistemas ¤ Bases de datos Laura Folgado Galache Septiembre 2015 33
  34. 34. Rótulos Utiliza cabeceras (h1, h2, h3…). Si es más grande es más importante. Si está relacionado lógicamente está relacionado visualmente. Todo se engloba visualmente. ¡Utiliza las convenciones! A menos que sea muy sencillo o imprescindible. Laura Folgado Galache Septiembre 2015 34
  35. 35. Texto ¨ ¡No a los iconos excesivos ni tipografías extrañas! http://www.valladolidwebmusical.org Laura Folgado Galache Septiembre 2015 35
  36. 36. Texto ¨ ¡Elimina el ruido! Laura Folgado Galache Septiembre 2015 36
  37. 37. Texto ¨ Utiliza tipografías coherentes Laura Folgado Galache Septiembre 2015 37
  38. 38. Texto ¨ ¡No seas pesado! Escribe un 50% de lo que lo harías en una publicación impresa. Laura Folgado Galache Septiembre 2015 38
  39. 39. Texto ¨ El siguiente cuestionario se ha diseñado para proporcionarnos la información necesaria que nos ayudará a mejorar el sitio y hacerlo más adecuado a sus necesidades. ¨ Por favor, seleccione sus respuestas en los menús desplegables y en los botones de radio inferiores. ¨ El cuestionario ha de completarse en tan solo 2-3 minutos. ¨ En la parte inferior de este formulario puede dejar, si lo desea, su nombre, su dirección y su número de teléfono. De hacerlo, contactaremos con usted en un futuro para que participe en una encuesta que nos ayude a mejorar este sitio. ¨ Si tiene comentarios o preguntas que hacer y que requieran una respuesta, por favor, contacte con el Servicio de Atención al Cliente. ¨ TOTAL: 103 palabras ¨ Ayúdenos, por favor, a mejorar este sitio contestando a las siguientes preguntas. Solo tardará 2-3 minutos en rellenar el cuestionario. ¨ Si tiene alguna pregunta o comentario que requiera respuesta contacte entonces con nuestro Servicio al Cliente. ¨ Total: 36 palabras. Laura Folgado Galache Septiembre 2015 39
  40. 40. Texto Septiembre 2015Laura Folgado Galache 40 ¨ ¡Divide el texto! http://www.valladolidwebmusical.org
  41. 41. Texto ¨ ¿Animal, vegetal o mineral? ¡No seas ambiguo! ¿Qué es NAV? ¿Navegador? ¡Ah, no! ¡Norton AntiVirus! ¿Inglés de UK, por favor? Laura Folgado Galache Septiembre 2015 41
  42. 42. Texto Utiliza plantillas: no más de 2 fuentes (3 para casos específicos) y sin tamaños absolutos. Divide textos largos en varias secciones. Escribe una idea por párrafo. Utiliza títulos y subtítulos. Utiliza listas bulleteadas. Utiliza negritas, colores, etc. ¡sin pasarte! Laura Folgado Galache Septiembre 2015 42
  43. 43. Redacción de contenidos http://todofueradelarmario.blogspot.com.es Laura Folgado Galache Septiembre 2015 43
  44. 44. Redacción de contenidos Lenguaje sencillo y directo Dada la coyuntura existente entre… Evitar estructuras complejas, palabras largas y conceptos abstractos. … la cualificaciónabsoluta de la población… No se debe dar por hecho que el usuario conoce el tema. … se hace necesario obviar… Laura Folgado Galache Septiembre 2015 44
  45. 45. Redacción de contenidos Utilizar 2ª persona en lugar de 3ª Si el usuario tiene alguna pregunta… Si tiene alguna pregunta… No utilizar el subjuntivo, pasivas, el lenguaje metafórico. Si se obtuviese… Este acuerdo ha sido establecido… Laura Folgado Galache Septiembre 2015 45
  46. 46. Redacción de contenidos Utilizar la misma palabra para la misma cosa. Documento, Certificado, Escrito… No utilizar jergas, abreviaturas e iniciales. Salvo que sean evidentes Sé literal, no metafórico. ¡Cuidado con el humor y el sarcasmo! Laura Folgado Galache Septiembre 2015 46
  47. 47. Consistencia y persistencia ¨ Los elementos deben tener el mismo aspecto y funcionamiento en todas las páginas del sitio. ¨ Los elementos se colocan siempre en el mismo lugar. http://www.mecd.gob.es Laura Folgado Galache Septiembre 2015 47
  48. 48. Los botones ¨ El otro día descubrí que la luz que se enciende en rojo de mi tostadora es a la vez un botón que permite expulsar las tostadas antes de tiempo. ¡Qué descubrimiento! Tardé meses en darme cuenta. Laura Folgado Galache Septiembre 2015 48
  49. 49. Los botones http://www.orrinatch.com (Versión antigua) ¿¡Dónde pincho!? Laura Folgado Galache Septiembre 2015 49
  50. 50. Los botones http://www.todofp.com Laura Folgado Galache Septiembre 2015 50
  51. 51. Los botones http://www.musica.com Laura Folgado Galache Septiembre 2015 51
  52. 52. Los botones ¡Tienen que tener forma de botón! Laura Folgado Galache Septiembre 2015 52
  53. 53. Los botones El texto no debe ser ambiguo Laura Folgado Galache Septiembre 2015 53
  54. 54. Los botones Forma de botón o cambio al colocarse encima. Funciones de vínculo (cursor cambia a dedo). Texto no ambiguo. Iconos solo si son muy evidentes. Iconos acompañados de texto explicativo. Texto de ayuda al colocarse sobre él. Similares a lo largo de todo el sitio. Laura Folgado Galache Septiembre 2015 54
  55. 55. Los vínculos ¡Tienen que tener aspecto de vínculo! ¨ Subrayado. ¨ En color diferente al resto del texto. ¨ Los vínculos visitados también tienen otro color. ¨ Al colocarse sobre él cambia de cursor a dedo. ¨ Al colocarse sobre él muestra el vínculo (title de la etiqueta <a>). ¨ El texto del vínculo debe ser representativo. ¨ Tamaño mejor menor de 60 caracteres. ¨ Evitar los links externos. ¨ Utilizar urls permanentes y páginas con contenidos similares. Para ver las fechas de exámenes pulse aquí. Consultar fechas de exámenes Laura Folgado Galache Septiembre 2015 55
  56. 56. Los cuadros de búsqueda ¡Busquemos! ¨ ¿Búsqueda rápida? ¿Cuál es la búsqueda lenta? ¨ ¿De verdad tengo que elegir cómo buscar? ¨ ¿Quijote es una palabra clave de El Quijote? ¿O vale como título? Laura Folgado Galache Septiembre 2015 56
  57. 57. Los cuadros de búsqueda ¿Cuáles son los estándares? ¿A dónde va esa flecha? Laura Folgado Galache Septiembre 2015 57
  58. 58. Los cuadros de búsqueda Laura Folgado Galache Septiembre 2015 58
  59. 59. Los cuadros de búsqueda Laura Folgado Galache Septiembre 2015 59
  60. 60. Los cuadros de búsqueda Búsqueda simple salvo que el usuario quiera lo contrario. Botón con texto de “Buscar” NO “Encontrar”, “Buscar aquí”, “Búsqueda”, “¡Búscalo tú mismo!”... Iconos evidentes: lupa, prismáticos. Laura Folgado Galache Septiembre 2015 60
  61. 61. Multimedia Tiempos de respuesta: deben ser pequeños. Imágenes: calidad adaptada o thumbnails. Animaciones: despistan, solo si es necesario. Vídeos: adecúa el tamaño al sitio. Audio: no lo utilices como fondo de página. En caso de que lo hagas, que pueda apagarse. Usuarios con discapacidades: ofrécele alternativas. Laura Folgado Galache Septiembre 2015 61
  62. 62. Accesibilidad • No usar páginas demasiado grandes. • Utiliza cabeceras (h1, h2…). • No uses tamaños absolutos del font. • Utiliza el atributo alt en las imágenes. Discapacidades visuales: • Transcripciones de sonidos y vídeos. Discapacidades auditivas: • Evitar mapas de opciones complejos y objetos interactivos. Discapacidades motrices (al mover el ratón o pulsar una única tecla): Discapacidades cognitivas. Laura Folgado Galache Septiembre 2015 62
  63. 63. Frames ¨ Simplemente… Laura Folgado Galache Septiembre 2015 63
  64. 64. Créditos ¨ Capturas de pantalla propias. ¨ http://www.pixabay.com ¨ http://badusability.com ¨ Krug, S. No me hagas pensar. Ed. Prentice Hall. ¨ Krug, S. No me hagas pensar. Ed. Prentice Hall. ¨ Nielsen, J. Designing Web Usability. Tr. Javier Vegas. ¨ Contenidos Desarrollo de Interfaces Web (DAW). FP a distancia Imágenes Textos Laura Folgado Galache Septiembre 2015 64

×