Your SlideShare is downloading. ×
0
CLASE 2: Usabilidad http://digital.ceu.es Vicente Ros Comunicación Digital CEU
Vicente Ros Comunicación Digital CEU @ÍNDICE: # Arquitectura de la Información # Usabilidad   # Accesibilidad  # Trabajo F...
#Arquitectura de la Información Vicente Ros Vicente Ros Comunicación Digital CEU
Infoxicación La cantidad de información digital  creada  en 2010  (1,2 Zettabytes)  es aprox. igual a: •  La información d...
Culminación Concepción http://www.jjg.net/ia/ Web como interfaz de software Web como sistema de hipertexto Autor: Jesse Ja...
#Arquitectura de la información "Arquitectura de la Información (AI) se refiere al diseño, organización,  etiquetado,...
Fases de la Metodología para la AI Metodología Fases de Análisis Fases de Diseño Fase de Implantación Análisis del context...
Fases de Análisis
#Tipología Sistemas de Organización Esquemas Estructuras Exacto Alfabéticos Cronológico Geográfico Ambiguos Tema Tarea Aud...
#Tipología Sistemas de Organización @Esquema Álfabético
#Tipología Sistemas de Organización @ Esquema Cronológica
#Tipología Sistemas de Organización @ Esquema Cronológica
#Tipología Sistemas de Organización @   Esquema   Geográfico
#Tipología Sistemas de Organización @   Esquema Geográfico
#Tipología Sistemas de Organización @Esquema por tema
#Tipología Sistemas de Organización @audiencia http://www.gifts.com /
#Tipología Sistemas de Organización @Esquema por metáfora
#Tipología Sistemas de Organización @Esquema por metáfora
#Estructuras de Organización http://www.infoxicacion.cl
Estructura básica
#Ejem: Estructura básica
Esquema de estructuras
#Arquitectura de la información
@Esquema de Navegación
Tipología Sistemas de Navegación Sistemas  básicos Sistemas no básicos Sistemas Integrados Sistemas Constantes Sistemas Lo...
Ej.Sistemas de #Navegación Design Patterns:  #Sistemas de Acordeón
Ej.Sistemas de #Navegación #   Design Patterns:  Search & Search Results
Ej.Sistemas de #Navegación Design Patterns:  #Logo #Teaser Menu
Ej.Sistemas de #Navegación #sistemas de carrousel Design Patterns:  #migas de pan (breadcrumbs)
Ej.Sistemas de #Navegación Design Patterns:  #doormat (alfombrilla) #column filter #table sorter-list
Ej.Sistemas de #Navegación #Vertical Main Menu #Fly-out Main Menu #Icon Menu
Ej.Sistemas de #Navegación #Barras y tabs/pertañas
Ej.Sistemas de #Navegación #Retractable menu #overlay menu (superpuesto)
Ej.Sistemas de #Navegación #image navigation #split navigation  http://newsmap.jp/
Ej.Sistemas de #Navegación #Split Navigation #Scrolling Menu
Ej.Sistemas de #Navegación #directory menu #category menu
Ej.Sistemas de #Navegación #dropdownlist menu #top menu
Ej.Sistemas de #Navegación #Sitemap footer #Sitemap
Ej.Sistemas de #Navegación RT Patrones del diseño:  http://www.welie.com/patterns/ #Paso a paso
Ej.Sistemas de #Navegación #por páginas
Ej.Sistemas de #Navegación #por acceso directo a la página
#Folksonomias, etiquetado social Ej.Sistemas de #Navegación
#Internacionalización
“ Si Bien buscas, encontrarás”- Platón
#Findability / Buscabilidad
#Proceso de @Búsqueda
#Searching vs Browsing Necesidades de las Personas (Broder 2002) -Informacionales:  Queremos aprender acerca de algo (40-6...
#Navegación: Berrypicking
#Searching vs Browsing -Buscamos en Plural/Singular -Sinónimos/polisemias -Faltas de ortografías
#jugando con Google suggest! Google Suggest:  http://whatdoyousuggest.net/ ¿Qué busca la GENTE? http://www.hablamosdeturis...
#Herramientas de la AI Mapa Visual de  lluis Codina: http://www.mindomo.com/view.htm?m=9aab0edfbe3a4a939ee2eef58dc1e578
Metodología para la Análisis de los Usuarios Análisis de usuarios Método No Participativos Métodos Participativos Software...
Alicia le pregunta al Gato:  ¿Cuál es el camino? •  No sabe dónde está:  El usuario desconoce su situación actual en relac...
#Basta ya de Escuchar a los Usuarios!!! Eliminen al Arquitecto de Información
#CardSorting Congreso Internet del mediterráneo
#CardSorting usalo.es/63/card-sorting-el-medio-es-el-mensaje /
#BluePrints Una notación muy usada por arquitectos de información y diseñadores de interacción para hacer la diagramación ...
#BluePrints
#BluePrints
#Wireframes Una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamient...
#Wireframes
#Wireframes Disposición de la información
#Wireframes 1º Prototipo de twitter
#eyetracking http://www.useit.com/alertbox/reading_pattern.html
#eyetracking
#Ejemplo Categorización http://nosolonicosh.blogspot.com/2009/05/diseno-web-arquitectura-de-la.html
#Ejemplo cardsorting web de Recetas de Comida
Keep It Simple (KISS)
#Qué pasa cuando somos grandes? http://www.allposters.es/ http://www.ikea.com/ http://www.ebay.com/ http://www.amazon.com/...
http://www.ebay.com /
http://usalo.es/207/malas-practicas-en-el-diseno-de-webs-universitarias /
http://www.ikea.com/
http://www.amazon.com /
http://www.epicurious.com/
http://www.allposters.com/
-Y si somos Feos bueno y Que! by  Chapuzas.S.L. (ejemplo dado por Oriols Ivars) http://www.lingscars.com/ http://www.thebr...
#Usabilidad Vicente Ros Comunicación Digital CEU
#Usabilidad Web “ La usabilidad es un atributo de calidad que evalúa cuan fáciles son las interfaces de usuarios (UI) de u...
 
Tienes 5 segundos  para convencerme ¿Eres Usabilidoso?
Nuestros productos no son para  @Nosotros  SINO para nuestros  #Clientes y que pasa si son así:
<ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
#Usabilidad “ Después de todo, la usabilidad sólo significa el asegurarse que algo funcione bien: que una persona con capa...
#Usabilidad
#Usabilidad
#Usabilidad aplicada a los formularios
#Usabilidad aplicada a los formularios
#Usabilidad aplicada a los formularios
#Usabilidad aplicada a los formularios
#Usabilidad aplicada a los formularios
#Accesibilidad Vicente Ros Comunicación Digital CEU
#Accesibilidad Definición:  «la accesibilidad indica la facilidad con la que algo puede ser  usado , visitado o accedido e...
#Accesibilidad SÍ! http://www.w3.org/WAI/ W3C: &quot;Hablar de accesibilidad web es hablar del acceso de  todos  a la web,...
#Accesibilidad
#Accesibilidad http://www.tawdis.net/
#Trabajo Final Vicente Ros Comunicación Digital CEU
#Trabajo Final Usabilidad El Alumno deberá realizar un Análisis de Usabilidad de 3 webs pertenecientes  a  un Sector concr...
#Muchas Gracias!
#Referencias <ul><li>- Lluis Codina.  http://www.lluiscodina.com  </li></ul><ul><li>- Alfons Cornella. Cómo sobrevivir a l...
 
Upcoming SlideShare
Loading in...5
×

Usabilidad y Arquitectura de la Información

4,327

Published on

1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,327
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
205
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "Usabilidad y Arquitectura de la Información"

  1. 1. CLASE 2: Usabilidad http://digital.ceu.es Vicente Ros Comunicación Digital CEU
  2. 2. Vicente Ros Comunicación Digital CEU @ÍNDICE: # Arquitectura de la Información # Usabilidad # Accesibilidad # Trabajo Final
  3. 3. #Arquitectura de la Información Vicente Ros Vicente Ros Comunicación Digital CEU
  4. 4. Infoxicación La cantidad de información digital creada en 2010 (1,2 Zettabytes) es aprox. igual a: • La información digital creada por cada hombre, mujer y niño que habita en la Tierra, al generar “tweets” de forma continua durante 100 años. • 75 billones de Apple iPads de 16 GB totalmente cargados de información, que llenarían hasta 41 veces toda la zona del Estadio de Wembley. • Un episodio completo de la exitosa serie de televisión de FOX &quot;24&quot;, transmitiéndose continuamente por 125 millones años.
  5. 5. Culminación Concepción http://www.jjg.net/ia/ Web como interfaz de software Web como sistema de hipertexto Autor: Jesse James Garrett Necesidades del usuario Objetivos del sitio Estrategia Especificaciones funcionales Requerimientos de contenido Alcance Diseño de la interacción Arquitectura de información Estructura Diseño de la interfaz Diseño de la navegación Diseño de la información Esqueleto Diseño visual Superficie
  6. 6. #Arquitectura de la información &quot;Arquitectura de la Información (AI) se refiere al diseño, organización, etiquetado, navegación y sistemas de búsqueda que ayudan a los usuarios a encontrar y gestionar la información de manera efectiva“ Lou Rosenfeld y Peter Morville
  7. 7. Fases de la Metodología para la AI Metodología Fases de Análisis Fases de Diseño Fase de Implantación Análisis del contexto Análisis del contenido Análisis de usuarios Inventario del contenido Modelos de contenido Representación del vocabulario Prototipado Evaluación Comunicación de propuesta Desarrollo del sitio Guía de estilo
  8. 8. Fases de Análisis
  9. 9. #Tipología Sistemas de Organización Esquemas Estructuras Exacto Alfabéticos Cronológico Geográfico Ambiguos Tema Tarea Audiencia Metáfora Híbrido Estructura jerárquica Basado en registros Estructura hipertextual en red Estructura secuencial Estructura en tabla (matriz)
  10. 10. #Tipología Sistemas de Organización @Esquema Álfabético
  11. 11. #Tipología Sistemas de Organización @ Esquema Cronológica
  12. 12. #Tipología Sistemas de Organización @ Esquema Cronológica
  13. 13. #Tipología Sistemas de Organización @ Esquema Geográfico
  14. 14. #Tipología Sistemas de Organización @ Esquema Geográfico
  15. 15. #Tipología Sistemas de Organización @Esquema por tema
  16. 16. #Tipología Sistemas de Organización @audiencia http://www.gifts.com /
  17. 17. #Tipología Sistemas de Organización @Esquema por metáfora
  18. 18. #Tipología Sistemas de Organización @Esquema por metáfora
  19. 19. #Estructuras de Organización http://www.infoxicacion.cl
  20. 20. Estructura básica
  21. 21. #Ejem: Estructura básica
  22. 22. Esquema de estructuras
  23. 23. #Arquitectura de la información
  24. 24. @Esquema de Navegación
  25. 25. Tipología Sistemas de Navegación Sistemas básicos Sistemas no básicos Sistemas Integrados Sistemas Constantes Sistemas Locales Sistemas Contextuales Sistemas Complementarios Mapa del sitio Índices Guías Sistemas de Personalización Sistemas de Navegación visual Sistemas de Navegación social
  26. 26. Ej.Sistemas de #Navegación Design Patterns: #Sistemas de Acordeón
  27. 27. Ej.Sistemas de #Navegación # Design Patterns: Search & Search Results
  28. 28. Ej.Sistemas de #Navegación Design Patterns: #Logo #Teaser Menu
  29. 29. Ej.Sistemas de #Navegación #sistemas de carrousel Design Patterns: #migas de pan (breadcrumbs)
  30. 30. Ej.Sistemas de #Navegación Design Patterns: #doormat (alfombrilla) #column filter #table sorter-list
  31. 31. Ej.Sistemas de #Navegación #Vertical Main Menu #Fly-out Main Menu #Icon Menu
  32. 32. Ej.Sistemas de #Navegación #Barras y tabs/pertañas
  33. 33. Ej.Sistemas de #Navegación #Retractable menu #overlay menu (superpuesto)
  34. 34. Ej.Sistemas de #Navegación #image navigation #split navigation http://newsmap.jp/
  35. 35. Ej.Sistemas de #Navegación #Split Navigation #Scrolling Menu
  36. 36. Ej.Sistemas de #Navegación #directory menu #category menu
  37. 37. Ej.Sistemas de #Navegación #dropdownlist menu #top menu
  38. 38. Ej.Sistemas de #Navegación #Sitemap footer #Sitemap
  39. 39. Ej.Sistemas de #Navegación RT Patrones del diseño: http://www.welie.com/patterns/ #Paso a paso
  40. 40. Ej.Sistemas de #Navegación #por páginas
  41. 41. Ej.Sistemas de #Navegación #por acceso directo a la página
  42. 42. #Folksonomias, etiquetado social Ej.Sistemas de #Navegación
  43. 43. #Internacionalización
  44. 44. “ Si Bien buscas, encontrarás”- Platón
  45. 45. #Findability / Buscabilidad
  46. 46. #Proceso de @Búsqueda
  47. 47. #Searching vs Browsing Necesidades de las Personas (Broder 2002) -Informacionales: Queremos aprender acerca de algo (40-65%) -Navegacional: Queremos ir a un sitio (25%-15%) -Transaccional: Queremos hacer algo (35-20%) -Acceder a un Servicio -Descargar -Comprar -Ambigüedades -Encontrar una lista de paginas -Búsqueda Exploratoria
  48. 48. #Navegación: Berrypicking
  49. 49. #Searching vs Browsing -Buscamos en Plural/Singular -Sinónimos/polisemias -Faltas de ortografías
  50. 50. #jugando con Google suggest! Google Suggest: http://whatdoyousuggest.net/ ¿Qué busca la GENTE? http://www.hablamosdeturismo.es/situaciones-graciosas-en-las-busquedas-de-google /
  51. 51. #Herramientas de la AI Mapa Visual de lluis Codina: http://www.mindomo.com/view.htm?m=9aab0edfbe3a4a939ee2eef58dc1e578
  52. 52. Metodología para la Análisis de los Usuarios Análisis de usuarios Método No Participativos Métodos Participativos Software de estadística de uso Análisis de sesiones de búsqueda Departamento de atención al cliente Métodos Persona y Modelos Mentales Cuestionarios Focus Group Entrevistas Card sorting Eye tracking Test de usuarios
  53. 53. Alicia le pregunta al Gato: ¿Cuál es el camino? • No sabe dónde está: El usuario desconoce su situación actual en relación a la estructura global de la información del sitio Web y no percibe la relación que hay entre la página actual y el resto de páginas. • No sabe dónde ha estado: El usuario desconoce la ruta de navegación que ha seguido hasta la posición actual y por consiguiente no es capaz de identificar las páginas ya visitadas. • No sabe a dónde puede ir: El usuario no puede identificar los enlaces que contienen información relacionada con la página actual.
  54. 54. #Basta ya de Escuchar a los Usuarios!!! Eliminen al Arquitecto de Información
  55. 55. #CardSorting Congreso Internet del mediterráneo
  56. 56. #CardSorting usalo.es/63/card-sorting-el-medio-es-el-mensaje /
  57. 57. #BluePrints Una notación muy usada por arquitectos de información y diseñadores de interacción para hacer la diagramación de sitios web es la propuesta por Jesse James Garret ( http://www.jjg.net ), y que consiste, según el propio autor, en un &quot;vocabulario visual para describir arquitectura de información y diseño de interacción&quot; ( Garret, trad. Velasco. 2002 ). El sistema de diagramación está compuesto de símbolos geométricos, flechas y líneas.
  58. 58. #BluePrints
  59. 59. #BluePrints
  60. 60. #Wireframes Una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios. Representación gráfica del contenido
  61. 61. #Wireframes
  62. 62. #Wireframes Disposición de la información
  63. 63. #Wireframes 1º Prototipo de twitter
  64. 64. #eyetracking http://www.useit.com/alertbox/reading_pattern.html
  65. 65. #eyetracking
  66. 66. #Ejemplo Categorización http://nosolonicosh.blogspot.com/2009/05/diseno-web-arquitectura-de-la.html
  67. 67. #Ejemplo cardsorting web de Recetas de Comida
  68. 68. Keep It Simple (KISS)
  69. 69. #Qué pasa cuando somos grandes? http://www.allposters.es/ http://www.ikea.com/ http://www.ebay.com/ http://www.amazon.com/ http://www.epicurious.com
  70. 70. http://www.ebay.com /
  71. 71. http://usalo.es/207/malas-practicas-en-el-diseno-de-webs-universitarias /
  72. 72. http://www.ikea.com/
  73. 73. http://www.amazon.com /
  74. 74. http://www.epicurious.com/
  75. 75. http://www.allposters.com/
  76. 76. -Y si somos Feos bueno y Que! by Chapuzas.S.L. (ejemplo dado por Oriols Ivars) http://www.lingscars.com/ http://www.thebrowncorporation.com
  77. 77. #Usabilidad Vicente Ros Comunicación Digital CEU
  78. 78. #Usabilidad Web “ La usabilidad es un atributo de calidad que evalúa cuan fáciles son las interfaces de usuarios (UI) de usar”. – Jakob Nielsen
  79. 80. Tienes 5 segundos para convencerme ¿Eres Usabilidoso?
  80. 81. Nuestros productos no son para @Nosotros SINO para nuestros #Clientes y que pasa si son así:
  81. 82. <ul><li>Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ </li></ul>
  82. 83. #Usabilidad “ Después de todo, la usabilidad sólo significa el asegurarse que algo funcione bien: que una persona con capacidad y experiencia media (o incluso por debajo de la media) pueda ser capaz de usar algo (ya sea un sitio web, un avión de combate o una puerta giratoria) con el objetivo deseado sin sentirse completamente frustrado” ¿Recordáis la #diapositiva 30?
  83. 84. #Usabilidad
  84. 85. #Usabilidad
  85. 86. #Usabilidad aplicada a los formularios
  86. 87. #Usabilidad aplicada a los formularios
  87. 88. #Usabilidad aplicada a los formularios
  88. 89. #Usabilidad aplicada a los formularios
  89. 90. #Usabilidad aplicada a los formularios
  90. 91. #Accesibilidad Vicente Ros Comunicación Digital CEU
  91. 92. #Accesibilidad Definición: «la accesibilidad indica la facilidad con la que algo puede ser usado , visitado o accedido en general por todas las personas, especialmente por aquellas que poseen algún tipo de discapacidad.» Organizacion Internacional del Trabajo dice: «se refiere al derecho de toda persona con discapacidad a participar en igualdad de oportunidades en las actividades cotidianas como son: empleo, transporte, educación, recreación y la tecnología sin ningún tipo de barrera o limitación». red.es dice: «accesibilidad electrónica es la facilidad de acceso a las TIC ya contenidos en Internet, para cualquier persona, sea con discapacidad, de edad avanzada o por privacicón circunstancial».
  92. 93. #Accesibilidad SÍ! http://www.w3.org/WAI/ W3C: &quot;Hablar de accesibilidad web es hablar del acceso de todos a la web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios» Recuerda que los Crawlers son Ciegos!!!
  93. 94. #Accesibilidad
  94. 95. #Accesibilidad http://www.tawdis.net/
  95. 96. #Trabajo Final Vicente Ros Comunicación Digital CEU
  96. 97. #Trabajo Final Usabilidad El Alumno deberá realizar un Análisis de Usabilidad de 3 webs pertenecientes a un Sector concreto (preferentemente relacionado con el trabajo Final). Para realizar dicho estudio se han facilitado una serie de Guías/Checklist en la Intranet del Máster . El alumno deberá pasar estos Tests a las 3 webs elegidas y adjuntar una memoria de conclusiones con el Análisis de los Puntos Fuertes y Débiles a mejorar. El trabajo se deberá enviar a [email_address] antes del viernes 14 de enero .
  97. 98. #Muchas Gracias!
  98. 99. #Referencias <ul><li>- Lluis Codina. http://www.lluiscodina.com </li></ul><ul><li>- Alfons Cornella. Cómo sobrevivir a la Infoxicación. http://www.infonomia.com </li></ul><ul><li>- Jakob Nielsen. http://www.useit.com </li></ul><ul><li>Ainda.info: Usabilidad, diseño Web fácil de usar. www.ainda.info </li></ul><ul><li>- Baquia. www.baquia.com - Desarrollo Web. www.desarrolloweb.com - Disc@pnet. www.discapnet.es - El Portal de la Unión Europea. www.europa.eu.int - Fundación Sidar - Acceso Universal. www.sidar.org - W3C World Wide Web Consortium. www.w3.org </li></ul><ul><li>Webestilo: Usabilidad, programación. www.webestilo.com / </li></ul><ul><li>Domestika. www.domestika.com </li></ul><ul><li>Yusef Hassan Montero . www.nosolousabilidad.com </li></ul><ul><li>Eduardo Manchon. www.alzado.org?autor.php?id=3 </li></ul><ul><li>Ricardo Baeza-yates. Modern Information Retrieval </li></ul><ul><li>HyperText.net. http://www.hipertext.net - Cómo funciona la web. http://www.ciw.cl/libroweb </li></ul><ul><li>The Information Architecture Institute http://iainstitute.org/ </li></ul><ul><li>Pérez -Montoro Gutiérrez,Mario. “Arquitectura de la información en entornos web”, Ed.TREA </li></ul><ul><li>Rafael Castillo Guerrero. http://www.infoxicacion.cl </li></ul><ul><li>Patrones del diseño: http://www.welie.com/patterns </li></ul><ul><li>Jorge Serrano Cobos: http://www.directorioexit.info/ficha217 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×