usabilidad y arquitectura de la información
DESCRIPTION
TRANSCRIPT
Máster en Comunicación Digital y Branding
Vicente RosComunicación Digital CEU
CLASE 2: Usabilidad
http://digital.ceu.es
Máster en Comunicación Digital y Branding
Vicente RosComunicación Digital CEU
@ÍNDICE:
# Arquitectura de la Información # Usabilidad # Accesibilidad # Trabajo Final
Máster en Comunicación Digital y Branding
Vicente RosVicente Ros
Comunicación Digital CEU
#Arquitectura de la Información
Máster en Comunicación Digital y Branding
InfoxicaciónLa 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 "24", transmitiéndose continuamente por 125 millones años.
Máster en Comunicación Digital y Branding
Culminación
Concepción
http://www.jjg.net/ia/
Necesidades del usuario
Objetivos del sitioEstrategiaEstrategia
Especificacionesfuncionales
Requerimientos decontenidoAlcance
Diseño de la interacción
Arquitectura deinformación
Estructura
Diseño de la interfaz Diseño de la navegación
Diseño de la informaciónEsqueleto
Diseño visualSuperficie
Web como interfazde software
Web como sistemade hipertexto
Autor: Jesse James Garrett
Máster en Comunicación Digital y Branding
#Arquitectura de la información"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
Máster en Comunicación Digital y Branding
Fases de la Metodología para la AIMetodologí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
Máster en Comunicación Digital y Branding
Fases de Análisis
Máster en Comunicación Digital y Branding
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)
#Tipología Sistemas de Organización
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@Esquema Álfabético
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@ Esquema Cronológica
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@ Esquema Cronológica
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@ Esquema Geográfico
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@ Esquema Geográfico
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@Esquema por tema
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@audiencia
http://www.gifts.com/
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@Esquema por metáfora
Máster en Comunicación Digital y Branding
#Tipología Sistemas de Organización@Esquema por metáfora
Máster en Comunicación Digital y Branding
#Estructuras de Organización
http://www.infoxicacion.cl
Máster en Comunicación Digital y Branding
Estructura básica
Máster en Comunicación Digital y Branding
#Ejem: Estructura básica
Máster en Comunicación Digital y Branding
Esquema de estructuras
Máster en Comunicación Digital y Branding
#Arquitectura de la información
Máster en Comunicación Digital y Branding
@Esquema de Navegación
Máster en Comunicación Digital y Branding
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
Tipología Sistemas de Navegación
Máster en Comunicación Digital y Branding
Ej.Sistemas de #NavegaciónDesign Patterns: #Sistemas de Acordeón
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación# Design Patterns: Search & Search Results
Máster en Comunicación Digital y Branding
Ej.Sistemas de #NavegaciónDesign Patterns: #Logo
#Teaser Menu
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación
#sistemas de carrousel
Design Patterns: #migas de pan (breadcrumbs)
Máster en Comunicación Digital y Branding
Ej.Sistemas de #NavegaciónDesign Patterns: #doormat (alfombrilla)
#column filter #table sorter-list
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#Vertical Main Menu
#Fly-out Main Menu
#Icon Menu
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#Barras y tabs/pertañas
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#Retractable menu
#overlay menu (superpuesto)
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#image navigation #split navigation
http://newsmap.jp/
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#Split Navigation
#Scrolling Menu
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#directory menu #category menu
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#dropdownlist menu
#top menu
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#Sitemap footer #Sitemap
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación
RT Patrones del diseño: http://www.welie.com/patterns/
#Paso a paso
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#por páginas
Máster en Comunicación Digital y Branding
Ej.Sistemas de #Navegación#por acceso directo a la página
Máster en Comunicación Digital y Branding
#Folksonomias, etiquetado social
Ej.Sistemas de #Navegación
Máster en Comunicación Digital y Branding
#Internacionalización
Máster en Comunicación Digital y Branding
“Si Bien buscas, encontrarás”- Platón
Máster en Comunicación Digital y Branding
#Findability / Buscabilidad
Máster en Comunicación Digital y Branding
#Proceso de @Búsqueda
Máster en Comunicación Digital y Branding
#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
Máster en Comunicación Digital y Branding
#Navegación: Berrypicking
Máster en Comunicación Digital y Branding
#Searching vs Browsing
-Buscamos en Plural/Singular-Sinónimos/polisemias-Faltas de ortografías
Máster en Comunicación Digital y Branding
#jugando con Google suggest!Google Suggest: http://whatdoyousuggest.net/
¿Qué busca la GENTE?
http://www.hablamosdeturismo.es/situaciones-graciosas-en-las-busquedas-de-google/
Máster en Comunicación Digital y Branding
#Herramientas de la AI
Mapa Visual de lluis Codina:http://www.mindomo.com/view.htm?m=9aab0edfbe3a4a939ee2eef58dc1e578
Máster en Comunicación Digital y Branding
Metodología para la Análisis de los UsuariosAná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
Máster en Comunicación Digital y Branding
Alicia le pregunta al Gato: ¿Cuál es el camino?
• No sabe dónde está: El usuario desconoce susituación actual en relación a la estructura globalde 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 desconocela ruta de navegación que ha seguido hasta laposición actual y por consiguiente no es capaz deidentificar las páginas ya visitadas.
• No sabe a dónde puede ir: El usuario no puedeidentificar los enlaces que contienen información relacionada con la página actual.
Máster en Comunicación Digital y Branding
#Basta ya de Escuchar a los Usuarios!!! Eliminen al Arquitecto de Información
Máster en Comunicación Digital y Branding
#CardSorting
Congreso Internet del mediterráneo
Máster en Comunicación Digital y Branding
#CardSorting
usalo.es/63/card-sorting-el-medio-es-el-mensaje/
Máster en Comunicación Digital y Branding
#BluePrintsUna 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 "vocabulario visual para describir arquitectura de información y diseño de interacción" (Garret, trad. Velasco. 2002). El sistema de diagramación está compuesto de símbolos geométricos, flechas y líneas.
Máster en Comunicación Digital y Branding
#BluePrints
Máster en Comunicación Digital y Branding
#BluePrints
Máster en Comunicación Digital y Branding
#WireframesUna 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
Máster en Comunicación Digital y Branding
#Wireframes
Máster en Comunicación Digital y Branding
#WireframesDisposición de la información
Máster en Comunicación Digital y Branding
#Wireframes
1º Prototipo de twitter
Máster en Comunicación Digital y Branding
#eyetracking
http://www.useit.com/alertbox/reading_pattern.html
Máster en Comunicación Digital y Branding
#eyetracking
Máster en Comunicación Digital y Branding
#Ejemplo Categorizaciónhttp://nosolonicosh.blogspot.com/2009/05/diseno-web-arquitectura-de-la.html
Máster en Comunicación Digital y Branding
#Ejemplo cardsorting web de Recetas de Comida
Máster en Comunicación Digital y Branding
Keep It Simple (KISS)
Máster en Comunicación Digital y Branding
#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
Máster en Comunicación Digital y Branding
http://www.ebay.com/
Máster en Comunicación Digital y Branding
http://usalo.es/207/malas-practicas-en-el-diseno-de-webs-universitarias/
Máster en Comunicación Digital y Branding
http://www.ikea.com/
Máster en Comunicación Digital y Branding
http://www.amazon.com/
Máster en Comunicación Digital y Branding
http://www.epicurious.com/
Máster en Comunicación Digital y Branding
http://www.allposters.com/
Máster en Comunicación Digital y Branding
-Y si somos Feos bueno y Que! by Chapuzas.S.L.(ejemplo dado por Oriols Ivars)
http://www.lingscars.com/http://www.thebrowncorporation.com
Máster en Comunicación Digital y Branding
Vicente RosComunicación Digital CEU
#Usabilidad
Máster en Comunicación Digital y Branding
#Usabilidad Web
“La usabilidad es un atributo de calidad que evalúa cuanfáciles son las interfaces de usuarios (UI) de usar”. – Jakob Nielsen
Máster en Comunicación Digital y Branding
Máster en Comunicación Digital y Branding
Tienes 5 segundos para convencerme
¿Eres Usabilidoso?
Máster en Comunicación Digital y Branding
Nuestros productos no son para @Nosotros SINO para nuestros #Clientesy que pasa si son así:
Máster en Comunicación Digital y Branding
•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/
Máster en Comunicación Digital y Branding
#Usabilidad“Después de todo, la usabilidad sólo significa elasegurarse que algo funcione bien: que una personacon capacidad y experiencia media (o incluso pordebajo de la media) pueda ser capaz de usar algo (yasea un sitio web, un avión de combate o una puertagiratoria) con el objetivo deseado sin sentirsecompletamente frustrado”
¿Recordáis la #diapositiva 30?
Máster en Comunicación Digital y Branding
#Usabilidad
Máster en Comunicación Digital y Branding
#Usabilidad
Máster en Comunicación Digital y Branding
#Usabilidad aplicada a los formularios
Máster en Comunicación Digital y Branding
#Usabilidad aplicada a los formularios
Máster en Comunicación Digital y Branding
#Usabilidad aplicada a los formularios
Máster en Comunicación Digital y Branding
#Usabilidad aplicada a los formularios
Máster en Comunicación Digital y Branding
#Usabilidad aplicada a los formularios
Máster en Comunicación Digital y Branding
Vicente RosComunicación Digital CEU
#Accesibilidad
Máster en Comunicación Digital y Branding
#AccesibilidadDefinició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».
Máster en Comunicación Digital y Branding
#Accesibilidad SÍ!http://www.w3.org/WAI/
W3C: "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!!!
Máster en Comunicación Digital y Branding
#Accesibilidad
Máster en Comunicación Digital y Branding
#Accesibilidad
http://www.tawdis.net/
Máster en Comunicación Digital y Branding
Vicente RosComunicación Digital CEU
#Trabajo Final
Máster en Comunicación Digital y Branding
#Trabajo Final UsabilidadEl 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 protected] antes del viernes 14 de enero.
Máster en Comunicación Digital y Branding
#Muchas Gracias!
Máster en Comunicación Digital y Branding
#Referencias- Lluis Codina. http://www.lluiscodina.com - Alfons Cornella. Cómo sobrevivir a la Infoxicación. http://www.infonomia.com- Jakob Nielsen. http://www.useit.com- Ainda.info: Usabilidad, diseño Web fácil de usar. www.ainda.info- 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- Webestilo: Usabilidad, programación. www.webestilo.com/- Domestika. www.domestika.com- Yusef Hassan Montero . www.nosolousabilidad.com- Eduardo Manchon. www.alzado.org?autor.php?id=3- Ricardo Baeza-yates. Modern Information Retrieval- HyperText.net. http://www.hipertext.net - Cómo funciona la web. http://www.ciw.cl/libroweb- The Information Architecture Institute http://iainstitute.org/- Pérez-Montoro Gutiérrez,Mario. “Arquitectura de la información en entornos web”, Ed.TREA- Rafael Castillo Guerrero. http://www.infoxicacion.cl- Patrones del diseño: http://www.welie.com/patterns- Jorge Serrano Cobos: http://www.directorioexit.info/ficha217
Máster en Comunicación Digital y Branding