No basta con tener un buen sitio, tambien es importante que lo puedan encontrar.

1. Findability
…¡porque un buen diseño web no basta!
Luis carlos Aceves | Marta Sylvia del Río

2. Luis Carlos Aceves
Consultor y conferencista en temas de usabilidad y
mercadotecnia electrónica
Autor del libro Mejores Prácticas en el Diseño de Portales
Gubernamentales
Columnista de l periódicos El N t y Reforma
C l i t d los iódi Norte R f
Socio de webusability.com.mx
Presidente del Observatorio Ciudadano del portal NL
Catedrático de posgrado en la Universidad de Monterrey
Marta Sylvia del Río
Conferencista en temas de usabilidad
Autora de 5 libros de tecnologías de información
Miembro del Consejo Editorial del periódico El Norte
Promotora y organizadora del Seminario de Usabilidad y
Accesibilidad para la Web 2007 y 2008
Promotora del Manifiesto Nuevo León para la Usabilidad y
Accesibilidad para Portales Gubernamentales Mexicanos
Directora de los posgrados en Ingeniería y Diseño de la
Universidad de Monterrey

3. agenda
Presentación y expectativas
El modelo causal
Arquitectura de información y findability
Funcionamiento de los buscadores
Diseño de contenidos
Experiencias
Cierre
Ci

4. Presentación y
P ó
expectativas

5. “ Encuéntrame, descárgame y úsame.
Déjate luego seducir
y vuelve a mí una y otra vez.
Yo por mi parte usaré mucho,
”
mucho sentido común
y trataré de sorprenderte cada día.
Ricardo Baeza-Yates
Director de Yahoo Research Latin America

6. ¿Dónde empieza
la experiencia
del usuario?

7. El modelo causal

8. Necesidades
esperadas
Diseño Uso
Ubicuidad Usabilidad
Arquitectura Minería
de de
Información Uso
Necesidades
reales

9. necesidades esperadas
vs
necesidades reales

10. Necesidades
esperadas
Diseño Uso
Ubicuidad Usabilidad
Arquitectura Minería
de de
Información Uso
Necesidades
reales

11. Ubicuidad: findability

12. 1
2
3 ?
Ubicuidad: visibilidad

13. Necesidades
esperadas
Diseño Uso
Ubicuidad Usabilidad
Arquitectura Minería
de de
Información Uso
Necesidades
reales

14. www.cemexmexico.com
Arquitectura de información: contenido y estética

15. Necesidades
esperadas
Diseño Uso
Ubicuidad Usabilidad
Arquitectura Minería
de de
Información Uso
Necesidades
reales

16. Minería de Uso

17. Ejercicio

18. www.eleconomista.com.mx

19. Tarea #1
Imaginen que se encuentran realizando una investigación sobre
p
personajes destacados en las Olimpiadas que han incurrido en
j p q
el uso de drogas.
Encuentren el artículo donde se dice que encontraron al
famoso nadador Michael Phelps fumando marihuana.

20. Tarea #2
Imaginen que acaban de leer un artículo dentro del sitio en el
que se menciona información que no es verídica, ustedes
cuentan con pruebas al respecto, por lo cual están muy
molestos y desean contactar a personal del periódico para
hacer una queja.
Encuentren una opción dentro del sitio que les permita
contactar a personal del periódico y traten de enviar su opinión
al respecto.

21. Tarea #3
Imaginen que acaban de leer una editorial de Bruno Donatello
y les gustó mucho su punto de vista respecto al tema tratado,
por lo cual, deciden buscar más editoriales del mismo autor.
cual autor
Encuentren una editorial de Bruno Donatello, una vez que la
encuentren busquen otra editorial del mismo autor. La tarea
será concluida si encuentran las dos editoriales del mismo
autor.

22. Break

23. Arquitectura de
Información

24. antecedentes
Biblioteconomía
La web como una gran biblioteca de información
Ecología de la información

25. metas del negocio,
financiamiento,
políticas, cultura, tecnología,
recursos, y limitaciones
Contexto
Contenido Usuarios
Audiencia, tareas,
Tipo de documentos,
necesidades, búsqueda de
tipo de datos,
información,,
contenidos, volumen
id l
comportamiento,
estructura existente
experiencia
Fuente: Information Architecture for the WWW

26. definiciones
Consenso en el Information Architecture Insititute
“ El arte y ciencia de organizar y rotular sitios web,
intranets, comunidades en l
d d línea y software para
f
soportar la usabilidad y la buscabilidad.
”
Fuente: IA Insititute, www.iainsitute.org

27. Crear esquemas organizacionales y de navegación
que permitan a los usuarios
moverse a través de todo el contenido d l sitio web
t é d t d l t id del iti b
de forma eficiente y efectiva
Fuente: The Elements of the User Experience

28. sistemas de
organización

29. Son formas de categorizar y agrupar el contenido
de en un sitio web
Está compuesto por:
– Esquemas de organización
– Estructuras de organización

30. www.boogar.com
Esquemas de organización: esquemas exactos
Alfabético

31. cuentame.inegi.gob.mx
Esquemas de organización: esquemas exactos
Geográfico

32. www.blockbuster.com.mx
Esquemas de organización: esquemas exactos
Cronológico

33. ww.netflix.com
Esquemas de organización: esquemas subjetivos
Tema

34. www.istockphoto.com
Esquemas de organización: esquemas subjetivos
Tarea

35. www.bananarepublic.com
Esquemas de organización: esquemas subjetivos
Audiencia

36. www.massociedad.org.mx
Esquemas de organización: esquemas subjetivos
Metáforas

37. Esquemas de organización: esquemas híbridos

38. Esquemas
polijerárquicos
Artes
Pintura
Renacimiento
Da Vinci
Ciencias
Física
Física Teórica
Da Vinci

39. 1 3
2
www.circuitcity.com
Esquemas de organización: clasificación facetada

40. Son formas de categorizar y agrupar el contenido
de en un sitio web
Está compuesto por:
– Esquemas de organización
– Estructuras de organización

41. www.cnn.com
Estructuras de organización: Taxonomías

42. www.cnn.com
Estructuras de organización: Hipertextos

43. www.slideshare.com
Estructuras de organización: clasificaciones sociales
(Folksonomías)

44. sistemas de
navegación

45. Formas en que el usuario se moverá a través de la
información de un sitio web
Compuesto por:
– Sistemas de navegación embebidos
– Sistemas de navegación complementarios o de cortesía

46. sistemas embebidos
Sistemas globales
Sistemas locales
Sistemas contextuales
Si l
Fuente: Information Architecture for the WWW

47. Formas en que el usuario se moverá a través de la
información de un sitio web
Compuesto por:
– Sistemas de navegación embebidos
– Sistemas de navegación complementarios o de cortesía

48. sistemas complementarios o
de cortesía
í
Mapas
M
Índices
Guías
Fuente: Information Architecture for the WWW

49. Identificando
sistemas de
navegación

50. www.bestbuy.com

51. www.bestbuy.com

52. www.bestbuy.com

53. www.bestbuy.com

54. www.bestbuy.com

55. sistemas de
Rotulado (labeling)
( )

56. Formas en que se representa la información de
forma que el usuario la pueda comprender
Tipos de rótulos:
– Enlaces contextuales
– Encabezados
– Opciones dentro de un sistema de navegación
– Índice de términos

57. www.cio.com
Enlaces Contextuales

58. www.london.gov.uk
www london gov uk
Opciones para Navegar

59. www.become.com
www become com
Opciones para Navegar

60. w3c.org
Opciones para Navegar

61. Ejercicio

62. Break

63. sistemas de
Búsqueda

64. Formas en las que se buscará la información
Criterios
– ¿Dónde buscar?
– ¿Qué presentar?
– ¿Cómo buscar?

65. Peter Morville ha definido findability bajo tres
puntos importantes (Morville 2006)
(Morville,
La cualidad de ser localizable y navegable.
g
El grado en el cuál un objeto en particular es fácil de
descubrir o localizar.
El grado en el cuál un sistema o ambiente apoya la
navegación y la extracción de información.

66. cómo funcionan los
buscadores

67. Título de cada página
p g
Descripción en la sección META
Palabras clave o keywords
Enlaces de entrada y salida
Diseño de Contenido

68. Títulos
No
N es sólo lo que el usuario ve, es pensar lo que el
ól l l i l l
buscador ve
Títulos diferentes para cada página
Títulos que describan el contenido de la página

69. Descripción
Debe f
D b reforzar el título
l í l
La descripción que el buscador ve + la descripción
q
que el usuario lee
Debe incluir algunas de las p
g palabras clave

70. Palabras clave
Metadatos de las á i
M t d t d l páginas
Palabras, frases,
Palabras frases oraciones
Definición de las palabras clave
– sentido común
– uso de herramientas

71. www.alexa.com
herramientas: compararme con competidores

72. www.google.com/insights
herramientas: qué busca el mercado

73. www.google.com/webmasters/querystats
g g / /q y
herramientas: qué buscan en mi sitio

74. www.google.com/analytics
herramientas: cómo buscan en mi sitio

75. Enlaces de entrada y salida
Mi popularidad y la de otros
l id d l d
Posicionamiento orgánico y pagado
El Page-rank

76. Ejercicio

77. Break

78. diseño de
Contenidos

79. http://www.humboldt.edu.mx/

80. Los usuarios son
diferentes

82. Regla #1
Aunque
leamos lo
mismo, y cada
uno entiende
algo
diferente

84. ¿Qué se menciona
Q
sobre restaurantes?

86. Regla #2
Un visitante lee lo menos
posible en un sitio
… hay que escribir con esto en
q
mente

87. ¿Quién inicia la conversación?

88. Regla #3
Un visitante entra a un sitio
para buscar algo

89. www.amazon.com

90. Momento
de
venta
www.amazon.com

91. 8 tips
para escritura web

92. Tip #1
¿Quién es nuestra
audiencia?

95. Tip #2
Simplifica los textos

96. 1
ergonómicamente,
ergonómicamente es más
cansado leer pixels que
impresos
2
muchas veces, el usuario
imprime para poder leer
Video Displays, Work, and Vision (1983)
http://www.nap.edu/openbook.php?isbn=0309033888&page=R9

97. Elimina
adjetivos
sustantivos “adorno”
adorno
necesidad, análisis, determinación

98. antes
Existe la necesidad de una revisión tanto de los
exámenes preoperatorios como de los
postoperatorios para la determinación de la
confiabilidad en los resultados.
después
Deben revisarse los exámenes pre y postoperatorios
p
para determinar su nivel de confiabilidad.

99. Separa párrafos largos
por funcionalidad
por tema

100. Antes
Bienvenido al BuscaChef donde se maneja un concepto
revolucionario para simplificar su tarea. Aquí no solo
podrá consultar todo tipo de recetas sino que podrá
cons ltar recetas, q e
hacerlo de varias formas. Si teclea un ingrediente, por
ejemplo chocolate, traerá todas las recetas
j p ,
relacionadas con este producto, desde mole hasta
pastel selva negra. Por otro lado, puede buscar una
receta específica, como puede ser el mole Por último
específica mole. último,
puede seleccionar un tipo de comida, como comida
mexicana, y traerá todas las recetas que se tengan
g
registradas.

101. después
El BuscaChef ahorra tiempo encontrando recetas
por ingrediente
traerá las recetas que contengan ese ingrediente, por ejemplo,
chocolate
h l t
por platillo
traerá las recetas de ese platillo, por ejemplo, mole
por tipo de comida
traerá las recetas relacionadas, por ejemplo, comida mexicana

102. p #3
s mensajes de error y las ayudas…
deben ayudar

103. 1
no reduzcas tanto que el
mensaje sea telegráfico
2 elimina tecnicismos

104. antes
No hay recaptura; ingrese en modo reescribir
después
En este momento no puede modificar el dato; debe
seleccionar el modo reescribir del menú.

105. antes
Podrá subir al servidor, mediante un FTP, las
imágenes que se seleccionen en la ventana del
g q
Explorador de Windows.
después
Podrá agregar las imágenes que usted
seleccione de su computadora.
p

106. Tip #4
utiliza mensajes positivos

107. antes
Cuidado: no rechace esta oportunidad de renovar su
membrecía a menos que ya haya utilizado todos los
b h l d d l
beneficios que se ofrecen.
después
Por favor reconsidere su cancelación. Lo apreciamos
como miembro, y esperamos que valore todos los
beneficios que la membrecía le ofrece.
(Price & Price, Hot text: web writing that works, 2002)

108. Tip #5
simplificar
ligas

109. 1
clarifica qué es la liga
2 elimina clics innecesarios

110. antes
En la sig iente página podrá encontrar …
siguiente
después
En la página de seguridad del producto podrá
encontrar…

111. antes
Da clic aq í para ver los res ltados
aquí er resultados
después
El 63% de los alumnos recomendarían el curso y 23%
sugieren mejoras, en base a nuestra encuesta de
satisfacción.

112. 3
simplifica la navegación e
incluye contactos
4 agrega info de los archivos a
descargar

113. antes
En conclusión, la junta directiva recomienda que estas
j q
mejoras se implementen hasta el 2009.
después
En conclusión, la junta directiva recomienda que estas
mejoras se implementen hasta el 2009.
Resumen | Propuesta | Recomendaciones
Mayor información con Alejandro Rivera

114. antes
El manual de identidad especifica los lineamientos a
p
seguir para las aplicaciones.
después
El manual de identidad especifica los lineamientos a
seguir para las aplicaciones. (PDF de 4.3 MB, requiere
Acrobat Reader
A b t R d 4.0 o más) á )

115. Tip #6
redacta bajo el estilo de
pirámide invertida

116. Blanca Nieves se casó con su príncipe azul tras
escapar de numerosos peligros, incluyendo un
cazador asesino y una manzana envenenada
envenenada.
(Woodtke, 2002, p.16) Busque más información sobre
el príncipe, los 7 enanos, la madrastra, la manzana
envenenada y el espejo mágico.

117. Tip #7
redacta para
buscadores

118. antes
<html>
<head>
<title>Universidad de Monterrey: Maestria en Diseno Grafico:
Usabilidad</title>
U bilid d /titl
</head>
…

119. después
<html>
<head>
<meta name=”keywords” content=”usabilidad, testing, card sort,
personas, arquitectura de informacion, diseno visual, navegacion”>
<meta name=”description” content=”Información b i para el di
t ”d i ti ” t t ”I f ió basica l diseno d
de
un sitio web, con referencias a libros y articulos especializados. Ideal
para personas que inician en el diseno de sitios web”>
<meta name=”robot” content=”all”>
t ” b t” t t ” ll”
<meta name=”revisit” content=”20 days”>
<title>Universidad de Monterrey: Maestria en Diseno Grafico:
Usabilidad</title>
</head>
…
(Price & Price, Hot text: web writing that works, 2002)

120. Tip #8
etiquetado intuitivo

121. www.udem.edu.mx/posgrados/mdg

122. Ejercicio

123. Maestría en Ingeniería Industrial y de Sistemas
Conocer, comprender e integrar el entorno nos permite mejorar la calidad de nuestras organizaciones.
Estudiar la Maestría en Ingeniería Industrial y de Sistemas es la mejor forma de
prepararse para ser especialista en el diseño y administración de sistemas logísticos,
sistemas de esbeltos y los distintos procesos que conforman las operaciones de una
empresa.
De esta manera, el egresado desarrolla una visión integradora y con enfoque práctico
al identificar y proponer estrategias creativas a la organización.
La Maestría en Ingeniería Industrial y de Sistemas prepara a especialistas en el diseño y
administración de sistemas logísticos sistemas esbeltos y procesos operativos de una
logísticos,
empresa, con un enfoque práctico al identificar y proponer estrategias creativas.

124. ¿Cómo buscaría mi
website si no me
conociera?

125. Break

126. Densidad de
palabras clave

127. Existen formas de “decirle” a un buscador
cómo deben encontrarte
Se req iere diseñar palabras cla e
requiere clave
relevantes
Deben ser las palabras más usadas en el
p
contenido

128. Nube de etiquetas

130. www.ranks.nl

131. accesibilidad
Utilizar alternate text
<img src=“archivo.jpg" alt=“breve descripción de la
imagen">
Imágenes decorativas deben tener un texto
alternativo nulo alt=""

132. www.wikipedia.org

133. accesibilidad

134. Experiencias

135. Frisa Aerospace
tengoevento.com
Gobierno d l E d d N
G bi del Estado de Nuevo León
L ó
Fundemex

136. En resumen
resumen…

137. expectativas

138. Contacto
luis.aceves@webusability.com.mx
l i @ b bilit
mdelrio@udem.edu.mx