Findability

503 views
283 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
503
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Findability

  1. 1. Findability …¡porque un buen diseño web no basta! Luis carlos Aceves | Marta Sylvia del Río
  2. 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 MonterreyMarta 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. 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. 4. Presentación yP óexpectativas
  5. 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. 6. ¿Dónde empieza la experiencia del usuario?
  7. 7. El modelo causal
  8. 8. Necesidades esperadas Diseño Uso Ubicuidad Usabilidad Arquitectura Minería de de Información UsoNecesidades reales
  9. 9. necesidades esperadas vs necesidades reales
  10. 10. Necesidades esperadas Diseño Uso Ubicuidad Usabilidad Arquitectura Minería de de Información UsoNecesidades reales
  11. 11. Ubicuidad: findability
  12. 12. 123 ? Ubicuidad: visibilidad
  13. 13. Necesidades esperadas Diseño Uso Ubicuidad Usabilidad Arquitectura Minería de de Información UsoNecesidades reales
  14. 14. www.cemexmexico.comArquitectura de información: contenido y estética
  15. 15. Necesidades esperadas Diseño Uso Ubicuidad Usabilidad Arquitectura Minería de de Información UsoNecesidades reales
  16. 16. Minería de Uso
  17. 17. Ejercicio
  18. 18. www.eleconomista.com.mx
  19. 19. Tarea #1Imaginen que se encuentran realizando una investigación sobreppersonajes destacados en las Olimpiadas que han incurrido en j p qel uso de drogas.Encuentren el artículo donde se dice que encontraron alfamoso nadador Michael Phelps fumando marihuana.
  20. 20. Tarea #2Imaginen que acaban de leer un artículo dentro del sitio en elque se menciona información que no es verídica, ustedescuentan con pruebas al respecto, por lo cual están muymolestos y desean contactar a personal del periódico parahacer una queja.Encuentren una opción dentro del sitio que les permitacontactar a personal del periódico y traten de enviar su opiniónal respecto.
  21. 21. Tarea #3Imaginen que acaban de leer una editorial de Bruno Donatelloy 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 laencuentren busquen otra editorial del mismo autor. La tareaserá concluida si encuentran las dos editoriales del mismoautor.
  22. 22. Break
  23. 23. Arquitectura deInformación
  24. 24. antecedentes Biblioteconomía La web como una gran biblioteca de información Ecología de la información
  25. 25. metas del negocio, financiamiento, políticas, cultura, tecnología, recursos, y limitaciones Contexto Contenido Usuarios Audiencia, tareas,Tipo de documentos, necesidades, búsqueda detipo de datos, información,,contenidos, volumen id l comportamiento,estructura existente experiencia Fuente: Information Architecture for the WWW
  26. 26. definicionesConsenso 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. 27. Crear esquemas organizacionales y de navegaciónque permitan a los usuariosmoverse a través de todo el contenido d l sitio web t é d t d l t id del iti bde forma eficiente y efectiva Fuente: The Elements of the User Experience
  28. 28. sistemas deorganización
  29. 29. Son formas de categorizar y agrupar el contenidode en un sitio webEstá compuesto por:– Esquemas de organización– Estructuras de organización
  30. 30. www.boogar.comEsquemas de organización: esquemas exactos Alfabético
  31. 31. cuentame.inegi.gob.mxEsquemas de organización: esquemas exactos Geográfico
  32. 32. www.blockbuster.com.mxEsquemas de organización: esquemas exactos Cronológico
  33. 33. ww.netflix.comEsquemas de organización: esquemas subjetivos Tema
  34. 34. www.istockphoto.comEsquemas de organización: esquemas subjetivos Tarea
  35. 35. www.bananarepublic.comEsquemas de organización: esquemas subjetivos Audiencia
  36. 36. www.massociedad.org.mxEsquemas de organización: esquemas subjetivos Metáforas
  37. 37. Esquemas de organización: esquemas híbridos
  38. 38. Esquemaspolijerárquicos Artes Pintura Renacimiento Da Vinci Ciencias Física Física Teórica Da Vinci
  39. 39. 1 32 www.circuitcity.comEsquemas de organización: clasificación facetada
  40. 40. Son formas de categorizar y agrupar el contenidode en un sitio webEstá compuesto por:– Esquemas de organización– Estructuras de organización
  41. 41. www.cnn.comEstructuras de organización: Taxonomías
  42. 42. www.cnn.comEstructuras de organización: Hipertextos
  43. 43. www.slideshare.comEstructuras de organización: clasificaciones sociales (Folksonomías)
  44. 44. sistemas denavegación
  45. 45. Formas en que el usuario se moverá a través de lainformación de un sitio webCompuesto por:– Sistemas de navegación embebidos– Sistemas de navegación complementarios o de cortesía
  46. 46. sistemas embebidos Sistemas globales Sistemas locales Sistemas contextuales Si l Fuente: Information Architecture for the WWW
  47. 47. Formas en que el usuario se moverá a través de lainformación de un sitio webCompuesto por:– Sistemas de navegación embebidos– Sistemas de navegación complementarios o de cortesía
  48. 48. sistemas complementarios ode cortesía í Mapas M Índices Guías Fuente: Information Architecture for the WWW
  49. 49. Identificando sistemas de navegación
  50. 50. www.bestbuy.com
  51. 51. www.bestbuy.com
  52. 52. www.bestbuy.com
  53. 53. www.bestbuy.com
  54. 54. www.bestbuy.com
  55. 55. sistemas deRotulado (labeling) ( )
  56. 56. Formas en que se representa la información deforma que el usuario la pueda comprenderTipos de rótulos:– Enlaces contextuales– Encabezados– Opciones dentro de un sistema de navegación– Índice de términos
  57. 57. www.cio.comEnlaces Contextuales
  58. 58. www.london.gov.uk www london gov ukOpciones para Navegar
  59. 59. www.become.com www become comOpciones para Navegar
  60. 60. w3c.orgOpciones para Navegar
  61. 61. Ejercicio
  62. 62. Break
  63. 63. sistemas deBúsqueda
  64. 64. Formas en las que se buscará la informaciónCriterios– ¿Dónde buscar?– ¿Qué presentar?– ¿Cómo buscar?
  65. 65. Peter Morville ha definido findability bajo trespuntos 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. 66. cómo funcionan losbuscadores
  67. 67. Título de cada página p gDescripción en la sección METAPalabras clave o keywordsEnlaces de entrada y salidaDiseño de Contenido
  68. 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. 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. 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. 71. www.alexa.comherramientas: compararme con competidores
  72. 72. www.google.com/insightsherramientas: qué busca el mercado
  73. 73. www.google.com/webmasters/querystats g g / /q yherramientas: qué buscan en mi sitio
  74. 74. www.google.com/analyticsherramientas: cómo buscan en mi sitio
  75. 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. 76. Ejercicio
  77. 77. Break
  78. 78. diseño deContenidos
  79. 79. http://www.humboldt.edu.mx/
  80. 80. Los usuarios son diferentes
  81. 81. Regla #1Aunqueleamos lomismo, y cadauno entiendealgodiferente
  82. 82. ¿Qué se menciona Qsobre restaurantes?
  83. 83. Regla #2Un visitante lee lo menosposible en un sitio… hay que escribir con esto en qmente
  84. 84. ¿Quién inicia la conversación?
  85. 85. Regla #3Un visitante entra a un sitiopara buscar algo
  86. 86. www.amazon.com
  87. 87. Momento de ventawww.amazon.com
  88. 88. 8 tipspara escritura web
  89. 89. Tip #1¿Quién es nuestra audiencia?
  90. 90. Tip #2Simplifica los textos
  91. 91. 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
  92. 92. Elimina adjetivos sustantivos “adorno” adorno necesidad, análisis, determinación
  93. 93. antesExiste la necesidad de una revisión tanto de losexámenes preoperatorios como de lospostoperatorios para la determinación de laconfiabilidad en los resultados.despuésDeben revisarse los exámenes pre y postoperatoriosppara determinar su nivel de confiabilidad.
  94. 94. Separa párrafos largos por funcionalidad por tema
  95. 95. AntesBienvenido al BuscaChef donde se maneja un conceptorevolucionario para simplificar su tarea. Aquí no solopodrá consultar todo tipo de recetas sino que podrá cons ltar recetas, q ehacerlo de varias formas. Si teclea un ingrediente, porejemplo chocolate, traerá todas las recetas j p ,relacionadas con este producto, desde mole hastapastel selva negra. Por otro lado, puede buscar unareceta específica, como puede ser el mole Por último específica mole. último,puede seleccionar un tipo de comida, como comidamexicana, y traerá todas las recetas que se tengan gregistradas.
  96. 96. despuésEl 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
  97. 97. p #3s mensajes de error y las ayudas… deben ayudar
  98. 98. 1 no reduzcas tanto que el mensaje sea telegráfico 2 elimina tecnicismos
  99. 99. antesNo hay recaptura; ingrese en modo reescribirdespuésEn este momento no puede modificar el dato; debeseleccionar el modo reescribir del menú.
  100. 100. antesPodrá subir al servidor, mediante un FTP, lasimágenes que se seleccionen en la ventana del g qExplorador de Windows.despuésPodrá agregar las imágenes que ustedseleccione de su computadora. p
  101. 101. Tip #4utiliza mensajes positivos
  102. 102. antesCuidado: no rechace esta oportunidad de renovar sumembrecía a menos que ya haya utilizado todos los b h l d d lbeneficios que se ofrecen.despuésPor favor reconsidere su cancelación. Lo apreciamoscomo miembro, y esperamos que valore todos losbeneficios que la membrecía le ofrece. (Price & Price, Hot text: web writing that works, 2002)
  103. 103. Tip #5simplificarligas
  104. 104. 1 clarifica qué es la liga 2 elimina clics innecesarios
  105. 105. antesEn la sig iente página podrá encontrar … siguientedespuésEn la página de seguridad del producto podráencontrar…
  106. 106. antesDa clic aq í para ver los res ltados aquí er resultadosdespuésEl 63% de los alumnos recomendarían el curso y 23%sugieren mejoras, en base a nuestra encuesta desatisfacción.
  107. 107. 3 simplifica la navegación e incluye contactos 4 agrega info de los archivos a descargar
  108. 108. antesEn conclusión, la junta directiva recomienda que estas j qmejoras se implementen hasta el 2009.despuésEn conclusión, la junta directiva recomienda que estasmejoras se implementen hasta el 2009. Resumen | Propuesta | Recomendaciones Mayor información con Alejandro Rivera
  109. 109. antesEl manual de identidad especifica los lineamientos a pseguir para las aplicaciones.despuésEl manual de identidad especifica los lineamientos aseguir para las aplicaciones. (PDF de 4.3 MB, requiereAcrobat ReaderA b t R d 4.0 o más) á )
  110. 110. Tip #6redacta bajo el estilo depirámide invertida
  111. 111. Blanca Nieves se casó con su príncipe azul trasescapar de numerosos peligros, incluyendo uncazador asesino y una manzana envenenada envenenada.(Woodtke, 2002, p.16) Busque más información sobreel príncipe, los 7 enanos, la madrastra, la manzanaenvenenada y el espejo mágico.
  112. 112. Tip #7redacta parabuscadores
  113. 113. antes<html><head><title>Universidad de Monterrey: Maestria en Diseno Grafico: Usabilidad</title> U bilid d /titl</head>…
  114. 114. 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)
  115. 115. Tip #8etiquetado intuitivo
  116. 116. www.udem.edu.mx/posgrados/mdg
  117. 117. Ejercicio
  118. 118. Maestría en Ingeniería Industrial y de SistemasConocer, 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 deprepararse 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 unaempresa.De esta manera, el egresado desarrolla una visión integradora y con enfoque prácticoal 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 yadministració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.
  119. 119. ¿Cómo buscaría miwebsite si no meconociera?
  120. 120. Break
  121. 121. Densidad depalabras clave
  122. 122. Existen formas de “decirle” a un buscadorcómo deben encontrarteSe req iere diseñar palabras cla e requiere claverelevantesDeben ser las palabras más usadas en el pcontenido
  123. 123. Nube de etiquetas
  124. 124. www.ranks.nl
  125. 125. 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=""
  126. 126. www.wikipedia.org
  127. 127. accesibilidad
  128. 128. Experiencias
  129. 129. Frisa Aerospacetengoevento.comGobierno d l E d d NG bi del Estado de Nuevo León L óFundemex
  130. 130. En resumen resumen…
  131. 131. expectativas
  132. 132. Contactoluis.aceves@webusability.com.mxl i @ b bilitmdelrio@udem.edu.mx

×