diseño (iterativo, web) centrado en el usuario

Presentación del tema: "diseño (iterativo, web) centrado en el usuario"— Transcripción de la presentación:

1 diseño (iterativo, web) centrado en el usuario
Interacción persona computadora. tomas laurenzo cecal · inco · fing · udelar 1

2 Diseño web centrado en el usuario
Basado en los capítulos 1, 3, 4 y 5 de The Design of Sites Douglas K. Van Duyne James A. Landay Jason I. Hong

3 La web es interesante porque
nóvel… …mas establecida ubicua. usability-driven usuarios volátiles alta competencia rápida evolución

4 Etapas en la evolución del diseño
Hacé un sitio web, y el público vendrá. Se ignoraba la perspectiva del usuario y cuál era la relación entre el sitio y el negocio. Avisá que vendés on-line y el público vendrá. Se ignoraba la complejidad del proceso de diseño para lograr facilidad de uso. Diseñá un sitio que brinde valor real y experiencia positiva al usuario. Son sitios web centrados en el cliente.

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

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

7 En un sitio web sin competidores también hay que considerar a los usuarios.
Sitios simples y bien diseñados permiten ahorrar tiempo a sus usuarios, reducen tiempo de mantenimiento y mejoran la satisfacción general.

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

9

10

11

12

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

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

15 Tipos de diseño Diseño centrado en el diseñador (ego design):
“Los diseñadores sabemos qué es lo mejor, por eso somos diseñadores” Esto puede ser bueno para algunos sitios (por ejemplo, portafolios de diseño), pero no en general. el éxito depende del número de visitantes. El diseñador (o el ingeniero) son una herramienta, un insumo más en el dominio de interés.

16 Nueve mitos del diseño Buen diseño requiere sólo sentido común.
Entonces, ¿por qué hay tanto sitio mal diseñado? A su vez, los diseñadores no son iguales a los clientes y por tanto desconocen sus: actividades, intereses, opiniones, actitudes, creencias, valores, experiencia, percepción, edad, ocupación, ingreso, geografía, idioma, cultura, ...

17 Nueve mitos del diseño Sólo expertos pueden crear buenos diseños.
Los expertos pueden hacer análisis más rigurosos y llegar más rápido a buenos resultados, pero (casi) cualquiera podría hacer un buen diseño si se dedica a ello (!) La interacción (las intefaces) pueden ser diseñadas en un rato. Se asume que el sitio posee las funcionalidades correctas y que esas funcionalidades fueron construidas correctamente. El problema es que si algo está mal, se va a conocer la verdad muy tarde.

18 Nueve mitos del diseño Buen diseño toma mucho tiempo y dinero.
Mayores costos al principio: hablar con los clientes, crear prototipos, obtener feedback, etc. Luego se reducen los costos posteriores (back-end costs): insatisfacción del cliente, pérdidas de clientes potenciales, llamadas telefónicas de ayuda, compras devueltas, mantenimiento general del sitio, etc. Buen diseño es solamente buen diseño gráfico. Una buena estética es importante porque ayuda a comunicar cómo utilizar la interfaz y cómo hacer llegar un mensaje. Es necesario tomar en consideración además qué es lo que los clientes quieren, qué comprenden, qué tareas desarrollan, en qué contexto hacen sus cosas.

19 Nueve mitos del diseño Buenas guías (guidelines) sobre las interfaces, nos guiarán hacia un buen diseño. Las guías evitan problemas comunes. Se dirigen a establecer un proceso. No habla de cuáles rasgos debería poseer, la organización general del sitio web, o el flujo entre páginas. Patrones, en cambio, ayudan a crear soluciones. Los clientes pueden apoyarse en la documentación y la ayuda. Las ayudas son muy poco utilizadas en general, y particularmente poco en un sitio web.

20 Nueve mitos del diseño Una investigación de mercado llega a comprender todas las necesidades de los clientes. Una cosa es lo que los clientes dicen, pero lo realmente importante es lo que ellos hacen. Tampoco los clientes, ni los investigadores saben qué sucederá al introducir productos disruptivos. Por tanto, debe balancearse con la observación directa. Hay que aplicar variedad de técnicas (desde observaciones hasta entrevistas) para conocer las necesidades verdaderas y enfocarse en las áreas más importantes para la mayoría de los clientes.

21 Nueve mitos del diseño Los grupos de verificación (testing) de software aseguran que los sitios funcionen bien. Los tests de software suelen estar más dirigidos hacia la tecnología que hacia la clientela. Los expertos verifican que el sitio siga la especificación, en lugar de observar lo que hacen los clientes reales en situaciones reales. El test se realiza luego de construido. Es difícil luego resolver errores mayores de diseño.

22 valor tangible en función de los usuarios

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

24 Principios y técnicas para conocer a los clientes
Idea base del diseño centrado en el usuario: uno (el diseñador) no es como sus clientes. Comprender los elementos (clientes, tareas, tecnologías, contexto social) y balancear las fuerzas. Cada elemento ejerce fuerzas que influyen en el diseño. Comprender a los clientes como personas. Comprender las personas como individuos. Comprender las características básicas de la gente en general.

25 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

26 Principios y técnicas para conocer a los clientes
Comprender las tareas y objetivos de los clientes. Catalogar y esquematizar lo que la gente puede hacer cuando utiliza el sitio web Quiero mandar un mensaje a un amigo Quiero comprar el mejor PC por 700 dólares. Reducir la carga cognitiva: Si es posible, utilizar una metáfora que la gente comprenda. Aprovechar las posibilidades de las computadoras. Nielsen: no usar metáforas, siempre que sea posible. Entrenamiento para realización de tareas: No tiene por qué ser 100% intuitivo en el primer uso. Es distinta la facilidad de uso con la facilidad de aprendizaje. Los diseñadores deben ser cuidadosos. Resulta muy difícil encontrar el BALANCE ideal. Ayudar a la gente a ser expertos: Términos básicos iniciales. Diccionario con términos usuales. Sección para primerizos. Todos los usuarios son potencialmente expertos. Tolerancia a errores. Google y +. los aspectos sociales de los clientes

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

28 acá arrancamos

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

30 Técnicas para conocer a los usuarios
Construir escenarios. Enfocarse más en lo que la gente hace (o pretende hacer) que en cómo lo hace (casos de uso). Los escenarios hablan de los clientes y sus características, las tareas que quieren hacer, el contexto del uso del producto. Crear muchos escenarios para cada uno de los diferentes tipos de personas. Tener a personas reales en mente. Los escenarios pueden incluir fotografías o secuencias de dibujos (storyboards), secuencia de páginas web que dan idea de cómo se realiza una tarea. Si bien podemos estar tentados a hacer bellos diseños, es importante no hacerlos en esta etapa. FORM FOLLOWS FUNCTION. estas técnicas no son sólo aplicables a la web, pero las vemos con ese sesgo. cabe preguntarse las diferencias entre la web y una aplicación tradicional Form follows function is a principle associated with modern architecture and industrial design in the 20th century. The principle is that the shape of a building or object should be primarily based upon its intended function or purpose.l y si son relevantes.

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

32 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

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

34

35 Técnicas para conocer a los usuarios
Elegir tareas (prototípicas o cruciales) Elegir los objetivos o tareas a ser desarrolladas por los usuarios.. Las tareas elegidas provienen del análisis de tareas y posteriormente de las observaciones y entrevistas con clientes reales. Las tareas deben ser representativas: deben ser tareas que los clientes quieren (o tienen que) realizar. No algo del tipo: “nadie ha hecho las tareas que mi sitio permitirá hacer”. Quizá sean nuevas en la web, pero –probablemente- no deban ser nuevas en la vida de las personas. Las tareas deben ser comunes o importantes. Las tareas deben describir una actividad completa. casos de uso

36 Técnicas para conocer a los usuarios
Observar y entrevistar a los clientes. Observar lo que hacen los clientes: Registrar las tareas que realiza el cliente a lo largo de uno o dos días. Usar una cámara para registrar el lugar donde desempeñe la actividad. Vea los sitios web que visitan los clientes. Pedirles que vean su sitio web o el de la competencia. Qué cosas le gustan o disgustan. Preguntemos para estar seguro de que entendemos lo que están haciendo.

37 Técnicas para conocer a los usuarios
Observar y entrevistar a los clientes. Entrevistar a los clientes: Preguntar si tienen ideas acerca de cómo organizar y estructurar las partes del sitio web o de la aplicación. Luego de un tiempo, mostrar escenarios y bosquejos, y preguntar acerca de si son correctos los conceptos manejados. Evitar que la respuesta sea simplemente sí o no. La realidad es compleja. Grabar las entrevistas, sin interrupciones, en el entorno habitual del cliente. Comenzar con preguntas fáciles. Realizar preguntas abiertas. Que los entrevistados hablen de sus pensamientos y experiencia. No juzgar ni confrontar al cliente. Hay que escuchar mucho más que hablar. Es una entrevista, no una conversación. evitar que los usuarios se sientan juzgados o medidos, analogía sastre

38 Técnicas para conocer a los usuarios
Organizar la información descubierta. Diagrama de afinidad. Todos los conceptos se organizan (en una pared :)), en diagramas jerárquicos. Cada concepto va en un papel independiente. Se agrupan los conceptos relacionados, y se unen con líneas los conceptos relacionados que estén en diferentes grupos. El diagrama de afinidad permite de un vistazo considerar los problemas y necesidades de los clientes. Puede ser la base de la arquitectura de la información. Puede ser la base para escenarios y storyboards. modelo conceptual.

39 Técnicas para conocer a los usuarios
Organizar la información descubierta. Diagrama de afinidad.

40 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. Sirve para establecer la terminología que podría ser fácil o difícil de comprender. 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

41 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

42 Técnicas para conocer a los usuarios
Encuestar a los usuarios Es útil para realizar estudios cuantitativos. Se precisa ser estrictos en los aspectos estadísticos. (muestra representativa (cantidad, calidad), bien hecha la muestra, etc.). Convencer a la gente a participar en una encuesta requiere de motivación. Una “atención” (camiseta, taza de café, etc.), o efectivo. Cuanto más larga sea la encuesta, más hay que pagar. Las encuestas muestran lo que la gente dice que hace, pero no lo que realmente hace. Esto puede ser problemático.

43 Técnicas para conocer a los usuarios
Focus Groups Es útil para realizar estudios cualitativos. Sirve para conocer por qué la gente hace lo que hace. Consiste en grupos (6-12 personas), representativos de la población objetivo, reunidos en una misma habitación. (preferiblemente, no se conocen entre ellos). Hay que preparar con antelación la reunión. Hay que conocer qué información se quiere relevar. Otros miembros (pocos) del equipo de desarrollo pueden estar en la reunión. Escuchar directamente a los clientes es mucho mejor que leer un informe. Es imprescindible la existencia de un moderador con experiencia, para que todos en el grupo puedan hablar, para que no haya predominancia de lo que uno opina y desvíe al grupo.

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

45 Técnicas para conocer a los usuarios
Analizar productos existentes Que usuarios potenciales evalúen productos existentes (propios o ajenos). Observar lo que dicen y quieren hacer en el producto, lo que realmente hacen, los pasos que dan para hacerlo. Tomar nota de los errores, lo que ellos dicen que les gusta o disgusta. Deben llenar un cuestionario con información demográfica, con sus intereses, etc. Tener cuidado con la info de los usuarios de tus productos (sitios o sistemas) son sesgados

46 La segunda lección más importante de la disciplina HCI es que es necesario involucrar a los usuarios al proceso de construcción del software Una herramienta para lograrlo es el diseño iterativo

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

48 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

49 build the right product
build the product right

50 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. ¿Cómo medirlos? encuestas

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

52 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

53 ¿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).

54 ¿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

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

56 Site map

57 Storyboard

58 Schematics

59 Refinamiento progresivo
Partir de prototipos fáciles de realizar (low-fidelity prototype) Utilizar papel (blanco y coloreado), Post-it, marcadores de colores, regla, tijeras, goma de pegar, fotocopiadora (o scanner), cinta scotch, trincheta , etc. Probar con clientes o usuarios potenciales. Simular a mano lo que haría la computadora (no utilizar computadoras por ahora). Esto permite realizar varios ciclos de Diseño, Prototipado y Evaluación en menos de un día. Anima al usuario a “meterle mano” al diseño.

60 Refinamiento progresivo
High-fidelity prototype. Representación en pantalla (Dreamweaver, Photoshop, etc). Unas 20 veces más lento el proceso de creación. Limita la interacción con los clientes. Conviene dejarlo para etapas más avanzadas del diseño. Evitar el uso de computadoras en las primeras etapas de diseño. Investigaciones muestran que: Aquellos que trabajan en papel exploran variadas alternativas de diseño. Aquellos que trabajan en computadora tienden a tomar una única idea y explorarla en detalle.

61 Refinamiento progresivo
Cuando se está pronto, pasar a la Computadora. En algunos casos no es buena imagen para los clientes (los que pagan) el mostrarle sketches en papel, pero eso se revierte con una clara explicación de los motivos. Una solución es realizar medium-fidelity prototypes, donde no se toman en cuenta detalles sobre fonts, colores ni otros temas gráficos.

62 Prototipos horizontales y verticales
Muestran las páginas principales, sin demasiada profundidad. Las páginas que implementan tareas específicas no están presentes. Sirven para ver la lógica general del sitio. Prototipos verticales: Implementan las páginas claves para completar una tarea específica. Apropiado cuando tareas complejas no son bien comprendidas. No es necesario que implementen links que conectan a otras tareas u otras partes del sitio.

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

64 Revisión de expertos Desarrollado (formalizado) por Jakob Nielsen
Tres a cinco expertos en usabilidad evalúan independientemente un sitio. Se utiliza una lista de principios a seguir. Se toma nota de cada violación y se sugiere una solución. Luego se juntan los jueces para unificar las listas. Problemas: Expertos pueden desconocer, o conocer demasiado la temática del sitio. Pueden haber alertas, falsos en la práctica (falsos positivos) Ventajas: Es barato (comparativamente), es rápido, es bueno para encontrar problemas de usabilidad.

65 Evaluación informal Diez potenciales usuarios, utilizan el prototipo del sitio y realizan algunas tareas mientras se registran las acciones. El prototipo aún puede estar en papel. Los usuarios pueden estar en sus hogares, oficinas o en lugares más controlados (oficinas de los diseñadores). Se le pide a los usuarios que piensen en voz alta y cada tanto preguntarles cosas como ¿y ahora qué está buscando? Sirve para obtener información cualitativa sobre qué funciona y qué no. Se evidencia si las cosas van sin problemas o si el usuario se confunde, dice cosas negativas, etc.

66 Evaluación formal Sirve para observar si el sitio alcanza los objetivos medibles que se han fijado. Por ej. saber si un usuario se puede registrarse y crear una cuenta bancaria en menos de dos minutos. Por ej. ¿los usuarios completan antes la tarea cuando tal botón está a la izquierda o a la derecha de la página? Por ej. ¿la interfaz A permite que más gente realice compras, en comparación con la interfaz B? Existen productos que permiten realizar estos test de manera automática: mandan mensajes a potenciales usuarios, les piden que completen tareas, realizan seguimiento de sus acciones y les piden que completen cuestionarios.

67 ¿Qué evaluación elegir?
Balancear las técnicas según el presupuesto y la etapa de desarrollo. Realizar revisión de expertos y evaluaciones informales en cada iteración. Realizar evaluaciones formales en las últimas etapas y aun luego de puesto en servicio. Es difícil convencer a un gerente de marketing la necesidad de cambios en una página de alto tráfico si no hay un estudio formal que lo avale. Para ello es bueno realizar un online usability testing con 50 a 200 participantes.

68 Un proceso de desarrollo de sitios centrados en el usuario
audio en móviles el banco algo del avión

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

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

71 Proceso de desarrollo Se itera mucho más en los primeros pasos (p.e. unas 10 veces en descubrimiento), que cuando se trabaja electrónicamente (p.e. unas 3 veces en refinamiento). Cada uno de los cuatro pasos iniciales se cierra con una presentación al cliente y una validación por parte del mismo. Los tres últimos pasos a veces son desarrollados por otro equipo, que puede pertenecer a la organización del cliente.

72 La fase de descubrimiento
Objetivos: comprender tres cosas: El público objetivo y sus necesidades (gente, tareas, tecnología y aspectos sociales). Los objetivos como negocio del proyecto. Los servicios que el sitio web debería proveer a los usuarios cuando el trabajo esté terminado. servicios = información o manipulación o productos o lo que sea

73 La fase de descubrimiento
Primeras preguntas: ¿Qué valor proveerá el sitio web a los usuarios? ¿Qué cosas se podrán realizar? ¿Se venderá algo, se promoveran productos, se educará, informará, provocará, comunicará, etc.? ¿Cuál será el foco del sitio web? ¿Qué valor le va a brindar el sitio web al cliente (o dueño)? ¿Qué papel juega el sitio en relación con la compañía? ¿Vale la pena hacer el sitio web? Técnicas: entrevistas con el cliente, entrevistas con potenciales usuarios, focus groups, encuestas, evaluar sitios web ya existentes. hay empresas que sólo hacen focus groups, de acuerdo al contexto global

74 La fase de descubrimiento
Problemas a evitar: Tentación a saltearse esta fase. Tratar de crear un sitio perfecto de primera. Las funcionalidades se deben desarrollar por etapas. Dedicarse primero a los detalles en lugar de a los aspectos fundamentales.

75 La fase de descubrimiento
Documentos a entregar: Documento de análisis de usuarios. La motivación de los usuarios para visitar el sitio. Un análisis de tareas de los potenciales usuarios. Documento de análisis del negocio. Plan de negocio: Necesidades del cliente y los objetivos de negocio del sitio web. Por ej. satisfacer mejor a los actuales usuarios, atraer nuevos usuarios, incrementar ventas, etc. Análisis competitivo: Funcionalidades que los competidores tienen, jerarquizadas según la importancia que le dan los usuarios. Funcionalidades propuestas al sitio que sean ventajas competitivas. Métricas de éxito: ¿Cómo se mide el éxito desde el punto de vista del negocio y del análisis competitivo? mas docs

76 La fase de descubrimiento
Documentos a entregar: Documento de especificación o de requerimientos. Describe funcionalidades del sitio, restricciones sobre el sistema. No especifica “el cómo” pero si “el qué”. Descripción del proyecto: propósito y objetivos últimos, desde la perspectiva del cliente y del usuario. Lista de tareas, escenarios y storyboards. Lista de funcionalidades propuestas: clasificadas según su importancia como “debe tener”, “debería tener”, “podría tener”. Comparación competitiva. Objetivos generales de diseño: como ser: reducir el número de errores, disminuir tiempos, etc. Métricas: para medir si el equipo de desarrollo alcanzó esos objetivos y requerimientos, como ser: mantener el tiempo de descarga en 20s para el 90% de los usuarios. Establecer en general cómo esas métricas serán evaluadas. last doc

77 La fase de exploración Objetivo: explorar y generar varios diseños, a ser presentados al cliente, para determinar cuál o cuales se desarrollarán. Documentos a entregar: Medium-fidelity site maps, storyboards y esquemas: se debe seguir los lineamientos de los documentos anteriores. Ninguno de estos entregables tiene demasiado detalle. Sólo expresan la idea general de los sitios. Testeo rápido con usuarios potenciales asegurando utilidad y usabilidad.

78 La fase de refinamiento
Objetivo: Pulir la navegación, diseño y flujo creados en la exploración, clarificando en qué forma el sitio web va a lucir. Precisar detalles (tipo de letra, imágenes, esquemas de color, paletas, etc).. Site maps son aun representaciones abstractas. Storyboards y schematics tienen imágenes, íconos, tipografía, esquemas de color sofisticados. Documentos a entregar: Medium y high-fidelity site maps, storyboards y schematics: son similares a los de la fase de exploración, pero con mucho mayor detalle. Testeo informal de cada ciclo en esta fase.

79 La fase de producción Objetivo: crear un conjunto detallado de entregables, que engloban y representan la idea final de diseño. Si el resto del proceso lo desarrolla otro equipo, hay que ser muy preciso y especificar en detalle todo para que no haya ambigüedad. (la transferencia puede ser una etapa más). Entregar: Documento de diseño: describe con detalle, cómo funciona el sitio web. Prototipos interactivos: Proveer suficiente detalle para que fácilmente se pueda ver cómo va a lucir el sitio web final. Especificaciones técnicas: qué servidor, qué lenguaje de scripts, qué base de datos, qué versión de html, etc. También métricas como cuantos usuarios simultaneos soporta el sitio. Opcionalmente se incluyen prototipos de ingeniería mostrando que las partes difíciles son técnicamente factibles. Dcumento de diseño: reglas a seguir en cada página web para minimizar inconsistencias entre páginas. Plantillas: para asegurar el evitar inconsistencias entre páginas. contrato de seguimiento

80 La fase de implementación
Objetivo: Crear el sitio. html, imágenes, base de datos y software necesario para un sitio web que puede ser lanzado y utilizado por sus usuarios objetivo. Aspectos a verificar durante la implementación: Controlar que se han implementado correctamente todas las funcionalidades especificadas. Chequear que las páginas web son compatibles con varios navegadores, incluso en aquellos usados por los ciegos. Testear que el sitio puede ser visto en diferentes tamaños de monitor. Ver si las páginas pueden ser bajadas en tiempo razonable por personas que tienen conexiones a Internet lentas. Test de stress, simulando cientos o miles de usuarios al mismo tiempo, para asegurar que funciona razonablemente. Chequeo de gramática y ortografía.

81 La fase de implementación
Entregar: Sitio web completo: html, base de datos, software. Herramientas de mantenimiento. Documento de mantenimiento: qué partes deben ser modificadas periódicamente, cuán seguido, por quién, como. Documento del plan de testeo: pasos a seguir para comprobar que el sitio funciona como se pretende. Actualizaciones: todos los documentos que estén obsoletos deben entregarse. Documentos de especificación, de diseño, guías de diseño, las plantillas de las páginas web. contratos

82 La fase de lanzamiento Puede lanzarse todo junto o en etapas.
En etapas significa: Se lanzan primero las funciones más importantes. Luego, el feedback obtenido ayuda al diseño del resto del sitio Google y la beta perpetua.

83 La fase de mantenimiento
Incluye: Cambiar código y arreglar bugs. Recolectar métricas de usabilidad y satisfacción. Verificar que todos los links están bien. Chequear que no existen errores gramaticales. Asegurar que las páginas en el sitio siguen las guías de diseño. Respaldar periódicamente el sitio web entero. Actualizar las FAQs. Chequear que se están haciendo las cosas para que aparezcan con un alto ranking en los motores de búsqueda. Mantenimiento de los registros (logs) que muestran de dónde viene la gente, qué ítems de búsqueda utilizan y qué hacen en el sitio. documentar, documentar, documentar. documentar.

84 La fase de mantenimiento
Entregar: Métricas periódicas del sitio web: la mayoría de las métricas provienen de la fase de descubrimiento. Reporte de problemas: s de usuarios, evaluaciones del sitio web y análisis de los logs sirven para encontrar errores. Hay que establecer la severidad y estimar costos para el arreglo. Respaldos periódicos: pasos a seguir para comprobar que el sitio funciona como se pretende. fin