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

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

tomas laurenzo

cecal · inco · fing · udelar Interacción persona computadora.

www.fing.edu.uy/inco/cursos/inpercom

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 DuyneJames A. LandayJason I. Hong

La web es interesante porque

• nóvel…• …mas establecida

• ubicua.• usability-driven• usuarios volátiles• alta competencia• rápida evolución

Etapas en la evolución del diseño

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

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

3. Diseñá un sitio que brinde valor real y experiencia positiva al usuario. Son sitios web centrados en el cliente.

Temas centrales del D.C.U.

Diseño (web)

centrado en el usuario

Facilidad de uso

Rendi-miento

Valor de marca

Satisfac-ción

Conte-nido

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.

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.

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.

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.

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.

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.

Nueve mitos del diseño

1. 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, ...


2. 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 (!)

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


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

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


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

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


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


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

valor tangibleen 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.

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.


• 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– Preocupación por la estética o la funcionalidad.


• 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 +.

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.


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.

Técnicas para conocer a los usuariosConstruir 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.

Ejemplo de escenarioVictoria 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.


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?

Ejemplos de bosquejos(sketchs)


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.


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.

Técnicas para conocer a los usuariosObservar 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.


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.


Organizar la información descubierta.– Diagrama de afinidad.


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.

Apples Oranges Bananas


Fruit


Organizar la información descubierta.– Ordenamiento de cartas.


TropicalLocal

Fruit


CitrusPyrus

Fruit

Musa


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.

Técnicas para conocer a los usuariosFocus 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.


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.


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)

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

Ciclo de diseño iterativo

Diseño

Prototipado

Evaluación

Proceso de diseño iterativo

Razones para utilizar diseño iterativo

1. Ayuda a encontrar problemas mientras estos son aún baratos y fáciles de arreglar.

2. Asegura que se está construyendo un sitio que tiene las prestaciones que los clientes necesitan.

3. 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 productbuild the product right

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?


Objetivos medibles a través de tests.• Para obtener resultados estadísticamente satisfactorios, es

necesario contar con 20-50 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.


(Otros) principios de diseño.(hay muchos…)

1. Ser consistente a lo largo de toda la aplicación (color, letras, disposición, términos, etc.).

2. Ofrecer respuesta informativa (status del sistema, qué está sucediendo, que el usuario sepa dónde está, etc.).

3. Basarse en reconocimiento sobre memoria. 4. Ayudar a los clientes a prevenir y recuperarse de los errores. 5. Permitir libertad y control al usuario (p.ej. múltiples formas de

navegar).6. Ayudar a usuarios frecuentes con el uso de aceleradores

(shortcuts).7. Esforzarse en un diseño minimalista y estético. (Grid Layout).

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

¿Dónde aplicar el diseño basado en objetivos y principios?

Information Architecture

Navigation Design

Graphic Design

Traditional HCI DesignUsability

Evaluation

Los tres enfoques son necesarios.

De lo contrario el diseño queda desbalanceado.

Prototipado rápido

• Site map – 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.

Site map

Storyboard

Schematics

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.


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


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

Prototipos horizontales y verticales

• Prototipos horizontales:– 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.

Evaluando el sitio web

• Revisión de expertos

• Evaluaciones informales

• Evaluaciones formales

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.

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.

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.

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

Un proceso de desarrollo de sitios centrados en el usuario

Proceso de desarrollo

1. Descubrimiento. Comprender los objetivos de los usuarios y sus necesidades, y conocer los objetivos del sitio web.

2. Exploración. Generar varios diseños iniciales, de los cuales uno o algunos se elegirán para un desarrollo más avanzado.

3. Refinamiento. Pulir la navegación, layout y flujo del diseño elegido.

4. Producción. Desarrollar un prototipo interactivo y una especificación de diseño.

5. Implementación. Desarrollar el código, contenido e imágenes del sitio web.

6. Lanzamiento. Publicar el sitio para un uso real.

7. Mantenimiento. Mantener el sitio existente, recogiendo y analizando métricas de éxito y preparándose para el próximo (re)diseño.

Pro

ces

o d

e d

ise

ño

Ciclo de diseño iterativo

Diseño

Prototipado

Evaluación

Descubrimiento

Exploración

Refinamiento

Producción

Implementación

Mantenimiento

Lanzamiento

Comenzar

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.

La fase de descubrimiento

Objetivos: comprender tres cosas:

1. El público objetivo y sus necesidades (gente, tareas, tecnología y aspectos sociales).

2. Los objetivos como negocio del proyecto.

3. Los servicios que el sitio web debería proveer a los usuarios cuando el trabajo esté terminado.

La fase de descubrimientoPrimeras 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.

La fase de descubrimientoProblemas 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.


Documentos a entregar:

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

2. 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?


Documentos a entregar:

3. Documento de especificación o de requerimientos. Describe funcionalidades del sitio, restricciones sobre el sistema. No especifica “el cómo” pero si “el qué”.

3. Descripción del proyecto: propósito y objetivos últimos, desde la perspectiva del cliente y del usuario.

4. Lista de tareas, escenarios y storyboards.5. Lista de funcionalidades propuestas: clasificadas según su

importancia como “debe tener”, “debería tener”, “podría tener”. Comparación competitiva.

6. Objetivos generales de diseño: como ser: reducir el número de errores, disminuir tiempos, etc.

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

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.

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.

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.

La fase de implementaciónObjetivo: 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.

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.

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.

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.

La fase de mantenimientoEntregar:• Métricas periódicas del sitio web: la mayoría de las métricas

provienen de la fase de descubrimiento.

• Reporte de problemas: e-mails 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

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

Documents

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