Usabilidad y Arquitectura de la Información

Máster en Comunicación Digital y Branding

Vicente RosComunicación Digital CEU

CLASE 2: Usabilidad

http://digital.ceu.es

@ÍNDICE:

# Arquitectura de la Información # Usabilidad # Accesibilidad # Trabajo Final

Vicente RosVicente Ros

Comunicación Digital CEU

#Arquitectura de la Información

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.

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

#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

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

Fases de Análisis

Esquemas Estructuras

Exacto

Alfabéticos

Cronológico

Geográfico

Ambiguos

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

#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 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

#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

Sistemas básicos Sistemas no básicos

Sistemas Integrados

Sistemas Constantes

Sistemas Locales

Sistemas Contextuales

Sistemas Complementarios

Índices

Guías

Sistemas de Personalización

Sistemas de Navegación visual

Sistemas de Navegación social

Tipología Sistemas de Navegación

Ej.Sistemas de #NavegaciónDesign Patterns: #Sistemas de Acordeón

Ej.Sistemas de #Navegación# Design Patterns: Search & Search Results

Ej.Sistemas de #NavegaciónDesign Patterns: #Logo

#Teaser Menu

Ej.Sistemas de #Navegación

#sistemas de carrousel

Design Patterns: #migas de pan (breadcrumbs)

Ej.Sistemas de #NavegaciónDesign 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

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

#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-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

#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.hablamosdeturismo.es/situaciones-graciosas-en-las-busquedas-de-google/

#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 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

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.

#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/

#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.

#BluePrints

#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

#Wireframes

#WireframesDisposición de la información

#Wireframes

1º Prototipo de twitter

#eyetracking

http://www.useit.com/alertbox/reading_pattern.html

#eyetracking

#Ejemplo Categorizaciónhttp://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.epicurious.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.thebrowncorporation.com

#Usabilidad

#Usabilidad Web

“La usabilidad es un atributo de calidad que evalúa cuanfáciles son las interfaces de usuarios (UI) de usar”. – Jakob Nielsen

Tienes 5 segundos para convencerme

¿Eres Usabilidoso?

Nuestros productos no son para @Nosotros SINO para nuestros #Clientesy que pasa si son así:

•Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

#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?

#Usabilidad

#Usabilidad aplicada a los formularios

#Accesibilidad

#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».

#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!!!

#Accesibilidad

http://www.tawdis.net/

#Trabajo Final

#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 fernando@uch.ceu.es antes del viernes 14 de enero.

#Muchas Gracias!

#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

Usabilidad y Arquitectura de la Información

Education

Transcript of Usabilidad y Arquitectura de la Información

Arquitectura y usabilidad. Versión resumida

Arquitectura de información, usabilidad y estandares web para proyectos e-learning

Análisis de la usabilidad en el Portal Web Cdiscount Colombia · usabilidad, arquitectura de la información y experiencia de usuario y los diferentes métodos para evaluar la usabilidad.

Arquitectura de la Información y Usabilidad - Clase 3

Usabilidad en Sistemas de Información e Interfaces

Usabilidad y Arquitectura de Información, un pretexto para hablar de la satisfacción del usuario

Arquitectura de la Información - jbarahona.com · Brief de Encargo Imagen Corporativa Definición Tecnológica Usabilidad Test Heurístico Test Usuarios Analísis LOGS Benchmark

Servicios Arquitectura Información y Usabilidad Intranets ...ALARO AVANT FORMACIÓN v 1 Noviembre de 2004 Servicios Arquitectura Información y Usabilidad Intranets CIO FORMACIÓN

Arquitectura de información y usabilidad: nociones básicas ...scielo.sld.cu/pdf/aci/v12n6/aci04604.pdf · Arquitectura de información y usabilidad: nociones básicas para los profesionales

Arquitectura de la información y Usabilidad

Arquitectura del negocio en Internet y usabilidad web

Informe APEI sobre usabilidad€¦ · cepto de usabilidad, como todos aquellos directa-mente relacionados (simplicidad, arquitectura de información, experiencia de usuario, etc.).

Servicios de Información en Línea; usabilidad, visibilidad y colaboración

Usabilidad para dispositivos móviles basada en la evidencia: los ...diposit.ub.edu/dspace/bitstream/2445/121056/1/LJI_TESIS.pdf · Usabilidad 45 3.1.4. Arquitectura de la información

Usabilidad de los tag-clouds: estudio mediante eye-tracking · Palabras clave: Tag-clouds, Eye-Tracking, Usabilidad, Recuperación de Información, Búsqueda de Información Abstract

Usabilidad y arquitectura de la información, septiembre 2010

Usabilidad de Sitios Web Hugo Carrion · Arquitectura de la Información • La información es una fuente de conocimiento. Pero, si no está organizada, procesada y disponible para

USABILIDAD DE TIC Y CONSUMO DIGITAL EN EL SECTOR ...altec2017.org/pdfs/ALTEC_2017_paper_299.pdfFigura 1. Arquitectura de la información Dispositivos y Software TIC Servicios basados

Usabilidad de los Sistemas de Información en Salud … · Usabilidad de los Sistemas de Información en Salud dentro de escenarios de atención crítica: un estudio de los sistemas

"Arquitectura de información, usabilidad y estándares en los proyectos e-learning"