Ficha de datos Créditos Institucionales:. 6 créditos

Presentación del tema: "Ficha de datos Créditos Institucionales:. 6 créditos"— Transcripción de la presentación:

1 Ficha de datos Créditos Institucionales:. 6 créditos
Ficha de datos Créditos Institucionales: 6 créditos. Titulo de la guía para la Unidad de Aprendizaje: “Recomendaciones para el diseño de páginas Web”. Nombre del programa educativo: Turismo Unidad de Aprendizaje: Tecnologías Aplicadas al Turismo Espacio Académico : Centro Universitario UAEM Valle de Teotihuacán. Nombre del Responsable: M. en S.C. Jaqueline Sánchez Espinoza 1

2 ÍNDICE Diseño Centrado en el Usuario (D.C.U.) Ejemplos de un buen diseño Tipos de Diseño Principios y Técnicas para conocer a los usuarios Ejemplos de Bosquejos Proceso de diseño Iterativo Diseño basado en objetivos y principios Donde aplicarlo Diseño Evaluación

3 La gente abandona un sitio web si:
Suponen que hay que dedicarle demasiado esfuerzo a navegar por el sitio. Suponen que no tiene el producto o servicio que están buscando. Se desilusionan Sienten que toma demasiado tiempo bajar la página. Para evitar esto se debe ser claro, pero en función de los usuarios y clientes potenciales.

4 Temas centrales del Diseño Centrado en el Usuario (D.C.U.)
Facilidad de uso Rendi-miento Conte-nido Diseño (web) centrado en el usuario Satisfac-ción Valor de marca

5 Ejemplos de buen diseño: Google y Yahoo!
¿Gran diseño gráfico? ¿Propuesta atractiva y seductora? ¿Utiliza la última tecnología? ¿el último plugin de flash etc.? Simplicidad, facilidad de uso, mejores resultados, fácil descarga. En Yahoo! (y en Google) se realizan estudios de campo, entrevistas con usuarios, se hacen evaluaciones de usabilidad, etc. En líneas generales el diseño está orientado a satisfacer las necesidades de los clientes.

6

7

8 Tipos de diseño Diseño centrado en el usuario:
Mezcla mercadeo (marketing) con usabilidad. Se centra en el problema de obtener público y mantenerlo. Trata que el primer uso sea disfrutable y procura que los visitantes se transformen en clientes. Se trata de combinar objetivos diversos: negocios, marketing, usabilidad, experiencia del usuario (“Good Customer Experience”) La tecnología y el diseño son herramientas para dar poder a la gente.

9 Tipos de diseño Diseño centrado en la compañía:
Las necesidades e intereses de la compañía dominan la estructura del sitio. Puede haber poca información útil. Utilizan un léxico sólo conocido por expertos. No hay ideas claras de porqué alguien visitará el sitio. Diseño centrado en la tecnología: Mucha animación, audio, streaming, banners. Poca usabilidad, utilidad y deseabilidad. La tecnología es un fin en lugar de un medio.

10 en función de los usuarios
Valor tangible en función de los usuarios Diseño centrado en el usuario o cliente, implica comprender a la gente, sus tareas, la tencología disponible y cómo todo eso se relaciona con el contexto social u organizacional del cliente y, potencialmente, también de nuestro cliente.

11 Principios y técnicas para conocer a los clientes
Los clientes son diferentes: Niños, jóvenes, adultos, ancianos. Nivel educativo. Qué otros sitios utilizan. Experiencia en la web. Preocupación por la estética o la funcionalidad. Los clientes son iguales: Habilidades cognitivas. Fitts, Hicks, Gestalt, ergonomía, psicología cognitiva. Limitaciones perceptuales

12 Técnicas para conocer a los usuarios
No enfocarse en lo que los clientes quieren. Enfocarse en lo que necesitan (!) Análisis de tareas (Task analysis). Personas: quiénes son; intereses; perfil demográfico, etc. Tareas: ¿qué actividades realizan? ¿qué buscan en nuestro producto? ¿con qué frecuencia lo hacen? ¿qué habilidades informáticas tienen? ¿poseen dificultades físicas? Tecnología: ¿qué equipamiento poseen? Disco, potencia, monitores, software, conexiones. Aspectos sociales: factores organizacionales o sociales que afectan a los usuarios. Lugar donde realizan sus tareas. Entorno. Seguridad.

13 acá arrancamos

14 Técnicas para conocer a los usuarios
Técnicas tradicionales de marketing para conocer a los usuarios. Focus groups (antes de diseñar el sitio) y encuestas (teléfono, en línea, con diferentes tipos de potenciales clientes). Tests pilotos antes de mostrar el sitio a potenciales clientes. Testear antes las encuestas y los focus groups. Retroalimentación constante. e.g: encuestas en línea. muchas técnicas se utilizan para el análisis ex post facto.

15 Ejemplo de escenario Victoria es una joven estudiante universitaria buscando un regalo para su hermana más joven, quien va a cumplir 16 años en dos semanas. Victoria tiene un presupuesto ajustado, pero quiere tener algo memorable y útil para su hermana en este importante cumpleaños. Ella ha escuchado a alguno de sus amigos acerca de ebirthdayz.com, por lo tanto, decide probar. En la página principal, ve que hay una opción de recomendación de regalos. Victoria encuentra la pantalla de recomendaciones y ve regalos basados en la edad e intereses de su hermana, y en su presupuesto menguado. El sitio muestra algunas sugerencias, y Victoria elige un regalo popular y lo compra, con envoltorio para regalo. Tiempo total empleado: 20 minutos.

16 Técnicas para conocer a los usuarios
Construir escenarios. Antes de decidirse a diseñar las funcionalidades para que el escenario sea una realidad, hay que determinar si la opción de recomendación de regalos es una buena idea. ¿Es una buena idea? ¿Parece útil? ¿Problemas? sesgo

17 Ejemplos de bosquejos(sketchs)
con los sketchs se hacen storyboards

18

19 Técnicas para conocer a los usuarios
Organizar la información descubierta. Ordenamiento de cartas (card sorting). Cómo agrupar la información de forma que le permita a la gente encontrar lo que están buscando, en base al reconocimiento de los grupos. Card sorting can be a useful exercise if you need to create or validate the organization of a site. For example, suppose your site starts with the following content: Apples Oranges Bananas Apples Oranges Bananas Fruit

20 Técnicas para conocer a los usuarios
Organizar la información descubierta. Ordenamiento de cartas. Apples Oranges Bananas Tropical Local Fruit Apples Oranges Bananas Citrus Pyrus Fruit Musa para nosotros si son frescas si son para un botánico

21 Técnicas para conocer a los usuarios
Focus Groups Es buena idea realizar varios grupos de enfoque. Se aprende mucho de sus actitudes y percepciones, pero no mucho sobre lo que realmente hacen en la práctica. Por eso se utilizan más en las primeras etapas de diseño, cuando no hay que evaluar que es lo que harían al utilizar el sitio. profession respondents!!!!!!!!!!!!!!!!

22 Ciclo de diseño iterativo
Prototipado Evaluación se enraiza con los patrones

23 Proceso de diseño iterativo
Razones para utilizar diseño iterativo Ayuda a encontrar problemas mientras estos son aún baratos y fáciles de arreglar. Asegura que se está construyendo un sitio que tiene las prestaciones que los clientes necesitan. Asegura que se están construyendo dichas prestaciones en una forma que los clientes puedan utilizar. Es generalmente considerada como una técnica de gran valor para el diseño interfaces pero, mas importante aún, al utilizar esta técnica se reconoce que ningún grupo de diseño es perfecto. build the right site build the site right

24 build the right product
build the product right

25 Diseñar con objetivos y principios.
Objetivos medibles a través de tests. Completar en menos tiempo la tarea. Completar exitosamente más tareas. Mayor facilidad de aprendizaje. Cometer menos errores (¿back button es un error?) El abandono de menos carritos compras. Mayor placer o satisfacción. Mayor diversión. Mayor tasa de conversión de visitante a cliente. Incremento en la repetición de visitas de los clientes. Mayor ganancia económica. encuestas

26 Diseñar con objetivos y principios.
Objetivos medibles a través de tests. Para obtener resultados estadísticamente satisfactorios, es necesario contar con participantes, según la variabilidad de su perfil y desempeño. Para medir aspectos subjetivos se puede realizar encuestas en línea. Se puede enviar a un volumen representativo de usuarios (no a todos). Se puede enviar preguntas cuando los usuarios realicen alguna tarea en particular. Por ej.: a aquellos que abandonan una lista de compras, preguntarles por qué lo hacen. tener en cuenta que hay un tipo de usuarios que llena las encuestas.

27 Diseñar con objetivos y principios.
(Otros) principios de diseño. (hay muchos…) Ser consistente a lo largo de toda la aplicación (color, letras, disposición, términos, etc.). Ofrecer respuesta informativa (status del sistema, qué está sucediendo, que el usuario sepa dónde está, etc.). Basarse en reconocimiento sobre memoria. Ayudar a los clientes a prevenir y recuperarse de los errores. Permitir libertad y control al usuario (p.ej. múltiples formas de navegar). Ayudar a usuarios frecuentes con el uso de aceleradores (shortcuts). Esforzarse en un diseño minimalista y estético. (Grid Layout). otros principios

28 ¿Dónde aplicar el diseño basado en objetivos y principios?
Arquitectura de la información Identificar, estructurar, presentar grupos de contenido relacionado, de manera lógica y coherente. Diseño de la navegación Diseñar métodos para que los usuarios puedan encontrar su camino dentro de la estructura de la información. Diseño gráfico Desarrollar la comunicación visual de la información, utilizando elementos como el color, la imagen, la tipografía, la disposición (layout).

29 ¿Dónde aplicar el diseño basado en objetivos y principios?
Traditional HCI Design Usability Evaluation Information Architecture Navigation Design Los tres enfoques son necesarios. De lo contrario el diseño queda desbalanceado. Graphic Design

30 Prototipado rápido Site map Storyboard (secuencia de páginas web).
Diagrama o grafo que refleja la estructura del sitio y algo sobre la estructura o flujo de navegación dentro del sitio. Storyboard (secuencia de páginas web). Secuencia de páginas web, mostrando cómo el usuario va a realizar determinada tarea. Se puede acompañar el storyboard con un texto explicando acerca de la tarea. Schematics (esquemas) Representaciones de la disposición (layout) y contenido que aparecerá en las páginas individuales. No contienen imágenes aunque sí están indicados los lugares donde estas van.

31 Site map

32 Storyboard

33 Schematics

34 Ciclo de diseño iterativo
Exploración Comenzar Diseño Prototipado Evaluación Refinamiento Descubrimiento Producción Mantenimiento Implementación Lanzamiento

35 Proceso de desarrollo Descubrimiento. Comprender los objetivos de los usuarios y sus necesidades, y conocer los objetivos del sitio web. Exploración. Generar varios diseños iniciales, de los cuales uno o algunos se elegirán para un desarrollo más avanzado. Refinamiento. Pulir la navegación, layout y flujo del diseño elegido. Producción. Desarrollar un prototipo interactivo y una especificación de diseño. Implementación. Desarrollar el código, contenido e imágenes del sitio web. Lanzamiento. Publicar el sitio para un uso real. Mantenimiento. Mantener el sitio existente, recogiendo y analizando métricas de éxito y preparándose para el próximo (re)diseño. Proceso de diseño especificación de diseño, documento de diseño, etc.

36 Evaluando el sitio web Revisión de expertos Evaluaciones informales
Evaluaciones formales

37 Bibliografía Alzado.org. Diseño de información, desarrollo web, presentación de datos multimedia.  ARONSON, L. The HTML Manual of style. Emeriville, California: Ziff-Davis Press, 1994. BERNERS-LEE, Tim. Style Guide for online hypertext.  CUADRA DE COLMENARES, Elena de la. En Bibliotecas y centros de documentación: Internet para bibliotecarios y documentalistas. Madrid, Servicios de Documentación Multimedia UCM y Fundación Sánchez Albornoz, julio, 2001.  DAVIS, Jack. MERRIT, Susan. Diseño de páginas web. Soluciones creativas para la comunicación en pantalla. Madrid, Anaya Multimedia, 1999.  Desarrollo Web.