Top Banner
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
84
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • diseo (iterativo, web) centrado en el usuariotomas laurenzocecal inco fing udelar

    Interaccin persona computadora.www.fing.edu.uy/inco/cursos/inpercom

  • Diseo web centrado en el usuarioBasado en los captulos 1, 3, 4 y 5 de

    The Design of Sites

    Douglas K. Van DuyneJames A. LandayJason I. Hong

  • La web es interesante porquenvelmas establecida

    ubicua.usability-drivenusuarios voltilesalta competenciarpida evolucin

  • Etapas en la evolucin del diseoHac un sitio web, y el pblico vendr. Se ignoraba la perspectiva del usuario y cul era la relacin entre el sitio y el negocio.

    Avis que vends on-line y el pblico vendr. Se ignoraba la complejidad del proceso de diseo para lograr facilidad de uso.

    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.

  • 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 estn buscando. Se desilusionanSienten que toma demasiado tiempo bajar la pgina.

    Para evitar esto se debe ser claro, pero en funcin de los usuarios y clientes potenciales.

  • En un sitio web sin competidores tambin hay que considerar a los usuarios.

    Sitios simples y bien diseados permiten ahorrar tiempo a sus usuarios, reducen tiempo de mantenimiento y mejoran la satisfaccin general.

  • Ejemplos de buen diseo: Google y Yahoo!

    Gran diseo grfico? Propuesta atractiva y seductora?Utiliza la ltima tecnologa? el ltimo plugin de flash etc.?

    Simplicidad, facilidad de uso, mejores resultados, fcil descarga.

    En Yahoo! (y en Google) se realizan estudios de campo, entrevistas con usuarios, se hacen evaluaciones de usabilidad, etc. En lneas generales el diseo est orientado a satisfacer las necesidades de los clientes.

  • Tipos de diseoDiseo centrado en el usuario:

    Mezcla mercadeo (marketing) con usabilidad.

    Se centra en el problema de obtener pblico 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 tecnologa y el diseo son herramientas para dar poder a la gente.

  • Tipos de diseoDiseo centrado en la compaa:Las necesidades e intereses de la compaa dominan la estructura del sitio.Puede haber poca informacin til.Utilizan un lxico slo conocido por expertos.No hay ideas claras de porqu alguien visitar el sitio.

    Diseo centrado en la tecnologa:Mucha animacin, audio, streaming, banners. Poca usabilidad, utilidad y deseabilidad.La tecnologa es un fin en lugar de un medio.

  • Tipos de diseoDiseo centrado en el diseador (ego design):

    Los diseadores sabemos qu es lo mejor, por eso somos diseadores

    Esto puede ser bueno para algunos sitios (por ejemplo, portafolios de diseo), pero no en general.el xito depende del nmero de visitantes.

    El diseador (o el ingeniero) son una herramienta, un insumo ms en el dominio de inters.

  • Nueve mitos del diseo

    Buen diseo requiere slo sentido comn.Entonces, por qu hay tanto sitio mal diseado?A su vez, los diseadores no son iguales a los clientes y por tanto desconocen sus:actividades, intereses, opiniones, actitudes, creencias, valores, experiencia, percepcin, edad, ocupacin, ingreso, geografa, idioma, cultura, ...

  • Nueve mitos del diseo

    Slo expertos pueden crear buenos diseos. Los expertos pueden hacer anlisis ms rigurosos y llegar ms rpido a buenos resultados, pero (casi) cualquiera podra hacer un buen diseo si se dedica a ello (!)

    La interaccin (las intefaces) pueden ser diseadas 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.

  • Nueve mitos del diseo

    Buen diseo 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): insatisfaccin del cliente, prdidas de clientes potenciales, llamadas telefnicas de ayuda, compras devueltas, mantenimiento general del sitio, etc.

    Buen diseo es solamente buen diseo grfico. Una buena esttica es importante porque ayuda a comunicar cmo utilizar la interfaz y cmo hacer llegar un mensaje. Es necesario tomar en consideracin adems qu es lo que los clientes quieren, qu comprenden, qu tareas desarrollan, en qu contexto hacen sus cosas.

  • Nueve mitos del diseo

    Buenas guas (guidelines) sobre las interfaces, nos guiarn hacia un buen diseo. Las guas evitan problemas comunes. Se dirigen a establecer un proceso. No habla de cules rasgos debera poseer, la organizacin general del sitio web, o el flujo entre pginas. Patrones, en cambio, ayudan a crear soluciones.

    Los clientes pueden apoyarse en la documentacin y la ayuda. Las ayudas son muy poco utilizadas en general, y particularmente poco en un sitio web.

  • Nueve mitos del diseo

    Una investigacin 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 observacin directa.

    Hay que aplicar variedad de tcnicas (desde observaciones hasta entrevistas) para conocer las necesidades verdaderas y enfocarse en las reas ms importantes para la mayora de los clientes.

  • Nueve mitos del diseo

    Los grupos de verificacin (testing) de software aseguran que los sitios funcionen bien.

    Los tests de software suelen estar ms dirigidos hacia la tecnologa que hacia la clientela.

    Los expertos verifican que el sitio siga la especificacin, en lugar de observar lo que hacen los clientes reales en situaciones reales.

    El test se realiza luego de construido. Es difcil luego resolver errores mayores de diseo.

  • valor tangibleen funcin de los usuarios

  • Diseo centrado en el usuario o cliente, implica comprender a la gente, sus tareas, la tencologa disponible y cmo todo eso se relaciona con el contexto social u organizacional del cliente y, potencialmente, tambin de nuestro cliente.

  • Principios y tcnicas para conocer a los clientesIdea base del diseo centrado en el usuario: uno (el diseador) no es como sus clientes.

    Comprender los elementos (clientes, tareas, tecnologas, contexto social) y balancear las fuerzas. Cada elemento ejerce fuerzas que influyen en el diseo.

    Comprender a los clientes como personas.Comprender las personas como individuos.Comprender las caractersticas bsicas de la gente en general.

  • Principios y tcnicas para conocer a los clientes Los clientes son diferentes:Nios, jvenes, adultos, ancianos.Nivel educativo.Qu otros sitios utilizan.Experiencia en la web.Preocupacin por la esttica o la funcionalidad.

    Los clientes son iguales:Habilidades cognitivas.Fitts, Hicks, Gestalt, ergonoma, psicologa cognitiva.Limitaciones perceptualesPreocupacin por la esttica o la funcionalidad.

  • Principios y tcnicas para conocer a los clientesComprender las tareas y objetivos de los clientes.

    Catalogar y esquematizar lo que la gente puede hacer cuando utiliza el sitio webQuiero mandar un mensaje a un amigoQuiero comprar el mejor PC por 700 dlares.

    Reducir la carga cognitiva: Si es posible, utilizar una metfora que la gente comprenda. Aprovechar las posibilidades de las computadoras.Nielsen: no usar metforas, siempre que sea posible.

    Entrenamiento para realizacin 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 diseadores deben ser cuidadosos. Resulta muy difcil encontrar el BALANCE ideal.

    Ayudar a la gente a ser expertos: Trminos bsicos iniciales. Diccionario con trminos usuales. Seccin para primerizos. Todos los usuarios son potencialmente expertos.

    Tolerancia a errores. Google y +.

  • Tcnicas para conocer a los usuariosNo enfocarse en lo que los clientes quieren. Enfocarse en lo que necesitan (!)

    Anlisis de tareas (Task analysis).Personas: quines son; intereses; perfil demogrfico, etc.

    Tareas: qu actividades realizan? qu buscan en nuestro producto? con qu frecuencia lo hacen? qu habilidades informticas tienen? poseen dificultades fsicas?

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

  • Tcnicas para conocer a los usuariosTcnicas tradicionales de marketing para conocer a los usuarios.

    Focus groups (antes de disear el sitio) y encuestas (telfono, en lnea, con diferentes tipos de potenciales clientes).

    Tests pilotos antes de mostrar el sitio a potenciales clientes.

    Testear antes las encuestas y los focus groups.

    Retroalimentacin constante. e.g: encuestas en lnea.

  • Tcnicas para conocer a los usuariosConstruir escenarios.

    Enfocarse ms en lo que la gente hace (o pretende hacer) que en cmo lo hace (casos de uso).

    Los escenarios hablan de los clientes y sus caractersticas, 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 fotografas o secuencias de dibujos (storyboards), secuencia de pginas web que dan idea de cmo se realiza una tarea. Si bien podemos estar tentados a hacer bellos diseos, es importante no hacerlos en esta etapa. FORM FOLLOWS FUNCTION.

  • Ejemplo de escenarioVictoria es una joven estudiante universitaria buscando un regalo para su hermana ms joven, quien va a cumplir 16 aos en dos semanas.

    Victoria tiene un presupuesto ajustado, pero quiere tener algo memorable y til para su hermana en este importante cumpleaos.

    Ella ha escuchado a alguno de sus amigos acerca de ebirthdayz.com, por lo tanto, decide probar. En la pgina principal, ve que hay una opcin de recomendacin 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.

  • Tcnicas para conocer a los usuariosConstruir escenarios.

    Antes de decidirse a disear las funcionalidades para que el escenario sea una realidad, hay que determinar si la opcin de recomendacin de regalos es una buena idea.

    Es una buena idea?

    Parece til?

    Problemas?

  • Ejemplos de bosquejos(sketchs)

  • Tcnicas para conocer a los usuariosElegir tareas (prototpicas o cruciales) Elegir los objetivos o tareas a ser desarrolladas por los usuarios..

    Las tareas elegidas provienen del anlisis 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.

  • Tcnicas para conocer a los usuariosObservar 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 das.Usar una cmara para registrar el lugar donde desempee 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 estn haciendo.

  • Tcnicas para conocer a los usuariosObservar y entrevistar a los clientes.Entrevistar a los clientes:Preguntar si tienen ideas acerca de cmo organizar y estructurar las partes del sitio web o de la aplicacin. 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 fciles.Realizar preguntas abiertas. Que los entrevistados hablen de sus pensamientos y experiencia.No juzgar ni confrontar al cliente.Hay que escuchar mucho ms que hablar. Es una entrevista, no una conversacin.

  • Tcnicas para conocer a los usuariosOrganizar la informacin descubierta.

    Diagrama de afinidad. Todos los conceptos se organizan (en una pared :)), en diagramas jerrquicos. Cada concepto va en un papel independiente.Se agrupan los conceptos relacionados, y se unen con lneas los conceptos relacionados que estn 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 informacin.Puede ser la base para escenarios y storyboards.

  • Tcnicas para conocer a los usuariosOrganizar la informacin descubierta.Diagrama de afinidad.

  • Tcnicas para conocer a los usuariosOrganizar la informacin descubierta.Ordenamiento de cartas (card sorting). Cmo agrupar la informacin de forma que le permita a la gente encontrar lo que estn buscando, en base al reconocimiento de los grupos. Sirve para establecer la terminologa que podra ser fcil o difcil de comprender.

  • Tcnicas para conocer a los usuariosOrganizar la informacin descubierta.Ordenamiento de cartas.

  • Tcnicas para conocer a los usuariosEncuestar a los usuariosEs til para realizar estudios cuantitativos.

    Se precisa ser estrictos en los aspectos estadsticos. (muestra representativa (cantidad, calidad), bien hecha la muestra, etc.).

    Convencer a la gente a participar en una encuesta requiere de motivacin. Una atencin (camiseta, taza de caf, etc.), o efectivo. Cuanto ms larga sea la encuesta, ms hay que pagar.

    Las encuestas muestran lo que la gente dice que hace, pero no lo que realmente hace. Esto puede ser problemtico.

  • Tcnicas 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 poblacin objetivo, reunidos en una misma habitacin. (preferiblemente, no se conocen entre ellos).

    Hay que preparar con antelacin la reunin. Hay que conocer qu informacin se quiere relevar. Otros miembros (pocos) del equipo de desarrollo pueden estar en la reunin. 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 desve al grupo.

  • Tcnicas para conocer a los usuariosFocus 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 prctica.

    Por eso se utilizan ms en las primeras etapas de diseo, cuando no hay que evaluar que es lo que haran al utilizar el sitio.

  • Tcnicas para conocer a los usuariosAnalizar productos existentes

    Que usuarios potenciales evalen 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 informacin demogrfica, con sus intereses, etc. Tener cuidado con la info de los usuarios de tus productos (sitios o sistemas)

  • La segunda leccin ms importante de la disciplina HCI es que es necesario involucrar a los usuarios al proceso de construccin del software

    Una herramienta para lograrlo es el diseo iterativo

  • Ciclo de diseo iterativo

  • Proceso de diseo iterativoRazones para utilizar diseo iterativo

    Ayuda a encontrar problemas mientras estos son an baratos y fciles de arreglar.Asegura que se est construyendo un sitio que tiene las prestaciones que los clientes necesitan.Asegura que se estn construyendo dichas prestaciones en una forma que los clientes puedan utilizar.

    Es generalmente considerada como una tcnica de gran valor para el diseo interfaces pero, mas importante an, al utilizar esta tcnica se reconoce que ningn grupo de diseo es perfecto.

  • build the right productbuild the product right

  • Disear con objetivos y principios.Objetivos medibles a travs de tests.

    Completar en menos tiempo la tarea.Completar exitosamente ms tareas.Mayor facilidad de aprendizaje.Cometer menos errores (back button es un error?)El abandono de menos carritos compras.Mayor placer o satisfaccin.Mayor diversin.Mayor tasa de conversin de visitante a cliente.Incremento en la repeticin de visitas de los clientes.Mayor ganancia econmica.Cmo medirlos?

  • Disear con objetivos y principios.Objetivos medibles a travs de tests.Para obtener resultados estadsticamente satisfactorios, es necesario contar con 20-50 participantes, segn la variabilidad de su perfil y desempeo.Para medir aspectos subjetivos se puede realizar encuestas en lnea. 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.

  • Disear con objetivos y principios.(Otros) principios de diseo.(hay muchos)

    Ser consistente a lo largo de toda la aplicacin (color, letras, disposicin, trminos, etc.).Ofrecer respuesta informativa (status del sistema, qu est sucediendo, que el usuario sepa dnde 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. mltiples formas de navegar).Ayudar a usuarios frecuentes con el uso de aceleradores (shortcuts).Esforzarse en un diseo minimalista y esttico. (Grid Layout).

  • Dnde aplicar el diseo basado en objetivos y principios?Arquitectura de la informacinIdentificar, estructurar, presentar grupos de contenido relacionado, de manera lgica y coherente.

    Diseo de la navegacinDisear mtodos para que los usuarios puedan encontrar su camino dentro de la estructura de la informacin.

    Diseo grficoDesarrollar la comunicacin visual de la informacin, utilizando elementos como el color, la imagen, la tipografa, la disposicin (layout).

  • Dnde aplicar el diseo basado en objetivos y principios? Information ArchitectureNavigation DesignGraphic DesignTraditional HCI DesignUsability EvaluationLos tres enfoques son necesarios. De lo contrario el diseo queda desbalanceado.

  • Prototipado rpidoSite map Diagrama o grafo que refleja la estructura del sitio y algo sobre la estructura o flujo de navegacin dentro del sitio.

    Storyboard (secuencia de pginas web).Secuencia de pginas web, mostrando cmo el usuario va a realizar determinada tarea. Se puede acompaar el storyboard con un texto explicando acerca de la tarea.

    Schematics (esquemas)Representaciones de la disposicin (layout) y contenido que aparecer en las pginas individuales. No contienen imgenes aunque s estn indicados los lugares donde estas van.

  • Site map

  • Storyboard

  • Schematics

  • Refinamiento progresivoPartir de prototipos fciles 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 hara la computadora (no utilizar computadoras por ahora).

    Esto permite realizar varios ciclos de Diseo, Prototipado y Evaluacin en menos de un da.Anima al usuario a meterle mano al diseo.

  • Refinamiento progresivoHigh-fidelity prototype. Representacin en pantalla (Dreamweaver, Photoshop, etc).Unas 20 veces ms lento el proceso de creacin.Limita la interaccin con los clientes.Conviene dejarlo para etapas ms avanzadas del diseo.

    Evitar el uso de computadoras en las primeras etapas de diseo.Investigaciones muestran que: Aquellos que trabajan en papel exploran variadas alternativas de diseo.Aquellos que trabajan en computadora tienden a tomar una nica idea y explorarla en detalle.

  • Refinamiento progresivoCuando 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 explicacin de los motivos.

    Una solucin es realizar medium-fidelity prototypes, donde no se toman en cuenta detalles sobre fonts, colores ni otros temas grficos.

  • Prototipos horizontales y verticalesPrototipos horizontales:Muestran las pginas principales, sin demasiada profundidad.Las pginas que implementan tareas especficas no estn presentes. Sirven para ver la lgica general del sitio.

    Prototipos verticales:Implementan las pginas claves para completar una tarea especfica.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 webRevisin de expertos

    Evaluaciones informales

    Evaluaciones formales

  • Revisin de expertosDesarrollado (formalizado) por Jakob NielsenTres a cinco expertos en usabilidad evalan independientemente un sitio.Se utiliza una lista de principios a seguir.Se toma nota de cada violacin y se sugiere una solucin.Luego se juntan los jueces para unificar las listas.Problemas: Expertos pueden desconocer, o conocer demasiado la temtica del sitio.Pueden haber alertas, falsos en la prctica (falsos positivos)Ventajas:Es barato (comparativamente), es rpido, es bueno para encontrar problemas de usabilidad.

  • Evaluacin informalDiez potenciales usuarios, utilizan el prototipo del sitio y realizan algunas tareas mientras se registran las acciones.

    El prototipo an puede estar en papel. Los usuarios pueden estar en sus hogares, oficinas o en lugares ms controlados (oficinas de los diseadores).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 informacin 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.

  • Evaluacin formalSirve 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 botn est a la izquierda o a la derecha de la pgina?Por ej. la interfaz A permite que ms gente realice compras, en comparacin con la interfaz B?

    Existen productos que permiten realizar estos test de manera automtica: mandan mensajes a potenciales usuarios, les piden que completen tareas, realizan seguimiento de sus acciones y les piden que completen cuestionarios.

  • Qu evaluacin elegir?Balancear las tcnicas segn el presupuesto y la etapa de desarrollo.Realizar revisin de expertos y evaluaciones informales en cada iteracin.Realizar evaluaciones formales en las ltimas etapas y aun luego de puesto en servicio.Es difcil convencer a un gerente de marketing la necesidad de cambios en una pgina de alto trfico 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 desarrolloDescubrimiento. Comprender los objetivos de los usuarios y sus necesidades, y conocer los objetivos del sitio web.Exploracin. Generar varios diseos iniciales, de los cuales uno o algunos se elegirn para un desarrollo ms avanzado.Refinamiento. Pulir la navegacin, layout y flujo del diseo elegido.Produccin. Desarrollar un prototipo interactivo y una especificacin de diseo.Implementacin. Desarrollar el cdigo, contenido e imgenes del sitio web.Lanzamiento. Publicar el sitio para un uso real.Mantenimiento. Mantener el sitio existente, recogiendo y analizando mtricas de xito y preparndose para el prximo (re)diseo.Proceso de diseo

  • Ciclo de diseo iterativoDescubrimientoExploracinRefinamientoProduccinImplementacinMantenimientoLanzamientoComenzar

  • Proceso de desarrolloSe itera mucho ms en los primeros pasos (p.e. unas 10 veces en descubrimiento), que cuando se trabaja electrnicamente (p.e. unas 3 veces en refinamiento).

    Cada uno de los cuatro pasos iniciales se cierra con una presentacin al cliente y una validacin por parte del mismo.

    Los tres ltimos pasos a veces son desarrollados por otro equipo, que puede pertenecer a la organizacin del cliente.

  • La fase de descubrimientoObjetivos: comprender tres cosas:

    El pblico objetivo y sus necesidades (gente, tareas, tecnologa y aspectos sociales).

    Los objetivos como negocio del proyecto.

    Los servicios que el sitio web debera 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 podrn realizar?Se vender algo, se promoveran productos, se educar, informar, provocar, comunicar, etc.?Cul ser el foco del sitio web?Qu valor le va a brindar el sitio web al cliente (o dueo)?Qu papel juega el sitio en relacin con la compaa?Vale la pena hacer el sitio web?

    Tcnicas: entrevistas con el cliente, entrevistas con potenciales usuarios, focus groups, encuestas, evaluar sitios web ya existentes.

  • La fase de descubrimientoProblemas a evitar:

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

  • La fase de descubrimientoDocumentos a entregar:

    Documento de anlisis de usuarios.La motivacin de los usuarios para visitar el sitio.Un anlisis de tareas de los potenciales usuarios.

    Documento de anlisis 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.Anlisis competitivo: Funcionalidades que los competidores tienen, jerarquizadas segn la importancia que le dan los usuarios. Funcionalidades propuestas al sitio que sean ventajas competitivas.Mtricas de xito: Cmo se mide el xito desde el punto de vista del negocio y del anlisis competitivo?

  • La fase de descubrimientoDocumentos a entregar:

    Documento de especificacin o de requerimientos. Describe funcionalidades del sitio, restricciones sobre el sistema. No especifica el cmo pero si el qu.Descripcin del proyecto: propsito y objetivos ltimos, desde la perspectiva del cliente y del usuario.Lista de tareas, escenarios y storyboards.Lista de funcionalidades propuestas: clasificadas segn su importancia como debe tener, debera tener, podra tener. Comparacin competitiva. Objetivos generales de diseo: como ser: reducir el nmero de errores, disminuir tiempos, etc. Mtricas: 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 cmo esas mtricas sern evaluadas.

  • La fase de exploracinObjetivo: explorar y generar varios diseos, a ser presentados al cliente, para determinar cul o cuales se desarrollarn.

    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. Slo expresan la idea general de los sitios.

    Testeo rpido con usuarios potenciales asegurando utilidad y usabilidad.

  • La fase de refinamientoObjetivo: Pulir la navegacin, diseo y flujo creados en la exploracin, clarificando en qu forma el sitio web va a lucir.

    Precisar detalles (tipo de letra, imgenes, esquemas de color, paletas, etc)..Site maps son aun representaciones abstractas.Storyboards y schematics tienen imgenes, conos, tipografa, esquemas de color sofisticados.

    Documentos a entregar:Medium y high-fidelity site maps, storyboards y schematics: son similares a los de la fase de exploracin, pero con mucho mayor detalle.

    Testeo informal de cada ciclo en esta fase.

  • La fase de produccinObjetivo: crear un conjunto detallado de entregables, que engloban y representan la idea final de diseo.Si el resto del proceso lo desarrolla otro equipo, hay que ser muy preciso y especificar en detalle todo para que no haya ambigedad. (la transferencia puede ser una etapa ms). Entregar:Documento de diseo: describe con detalle, cmo funciona el sitio web. Prototipos interactivos: Proveer suficiente detalle para que fcilmente se pueda ver cmo va a lucir el sitio web final.Especificaciones tcnicas: qu servidor, qu lenguaje de scripts, qu base de datos, qu versin de html, etc. Tambin mtricas como cuantos usuarios simultaneos soporta el sitio. Opcionalmente se incluyen prototipos de ingeniera mostrando que las partes difciles son tcnicamente factibles.Dcumento de diseo: reglas a seguir en cada pgina web para minimizar inconsistencias entre pginas. Plantillas: para asegurar el evitar inconsistencias entre pginas.

  • La fase de implementacinObjetivo: Crear el sitio. html, imgenes, 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 implementacin:Controlar que se han implementado correctamente todas las funcionalidades especificadas.Chequear que las pginas web son compatibles con varios navegadores, incluso en aquellos usados por los ciegos.Testear que el sitio puede ser visto en diferentes tamaos de monitor.Ver si las pginas 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 gramtica y ortografa.

  • La fase de implementacinEntregar:Sitio web completo: html, base de datos, software. Herramientas de mantenimiento.

    Documento de mantenimiento: qu partes deben ser modificadas peridicamente, cun seguido, por quin, como.

    Documento del plan de testeo: pasos a seguir para comprobar que el sitio funciona como se pretende.

    Actualizaciones: todos los documentos que estn obsoletos deben entregarse. Documentos de especificacin, de diseo, guas de diseo, las plantillas de las pginas web.

  • La fase de lanzamientoPuede lanzarse todo junto o en etapas.

    En etapas significa:Se lanzan primero las funciones ms importantes.Luego, el feedback obtenido ayuda al diseo del resto del sitioGoogle y la beta perpetua.

  • La fase de mantenimientoIncluye: Cambiar cdigo y arreglar bugs.Recolectar mtricas de usabilidad y satisfaccin.Verificar que todos los links estn bien.Chequear que no existen errores gramaticales.Asegurar que las pginas en el sitio siguen las guas de diseo.Respaldar peridicamente el sitio web entero.Actualizar las FAQs.Chequear que se estn haciendo las cosas para que aparezcan con un alto ranking en los motores de bsqueda. Mantenimiento de los registros (logs) que muestran de dnde viene la gente, qu tems de bsqueda utilizan y qu hacen en el sitio.documentar, documentar, documentar.documentar.

  • La fase de mantenimientoEntregar:Mtricas peridicas del sitio web: la mayora de las mtricas provienen de la fase de descubrimiento.

    Reporte de problemas: e-mails de usuarios, evaluaciones del sitio web y anlisis de los logs sirven para encontrar errores. Hay que establecer la severidad y estimar costos para el arreglo.

    Respaldos peridicos: pasos a seguir para comprobar que el sitio funciona como se pretende.

    fin

    ***los aspectos sociales de los clientesac arrancamos**muchas tcnicas se utilizan para el anlisis ex post facto.

    estas tcnicas no son slo aplicables a la web, pero las vemos con ese sesgo.cabe preguntarse las diferencias entre la web y una aplicacin tradicionalForm 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.**sesgocon los sketchs se hacen storyboards*casos de uso**evitar que los usuarios se sientan juzgados o medidos, analoga sastremodelo conceptual.*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:*para nosotrossi son frescassi son para un botnico*profession respondents!!!!!!!!!!!!!!!!*son sesgados**se enraiza con los patrones*build the right sitebuild the site right*encuestas*tener en cuenta que hay un tipo de usuarios que llena las encuestas.*otros principios*audio en mvilesel bancoalgo del avin

    *especificacin de diseo, documento de diseo, etc.*servicios = informacin o manipulacin o productos o lo que sea*hay empresas que slo hacen focus groups, de acuerdo al contexto global*mas docs*last doc*contrato de seguimiento*contratos*