MetodologĂa del diseĂąo MarĂa Camila Delgado C.
N C A E M N U T H
E D S I G D N E R E
DESIGN THINKING “El design thinking se apoya en nuestra habilidad para ser intuitivos, para reconocer patrones, para construir ideas que al mismo tiempo tenga sentido emocional y funcionalidad, y para expresarnos en otros medios además de la palabra. Nadie quiere manejar su negocio sólo en base a sentimientos, intuición o inspiración, pero exagerar la confianza en lo racional y analítico puede ser igual de peligroso. El enfoque integrado en el corazón del proceso de diseño nos sugiere una tercera vía”. -Tim Brown-
TIM BROWN Profesor de la Universidad de Stanford, y director ejecutivo de IDEO
IDEO "Somos una compañía global de diseño comprometida a crear un impacto positivo." "We are a global design company committed to creating positive impact."
inspiración ideación implementación
Inspiración desafío de diseño
Esta fase busca entender a las personas, observar sus vidas y detectar necesidades.
métodos
Lenguaje corporal
tener en cuenta...
registrar... Expresiones faciales
Estar a la altura del otro. Mantener contacto visual. Permitir que la otra persona hable fluidamente tomando registro de todo lo que se observe y se escuche.
5 Por qué?
?
Qué dicen... Cómo lo dicen... Comportamiento
tener en cuenta... Se debe hallar una necesidad
Que la persona no se quede enfrascada en la misma pregunta/ respuesta una y otra vez. Tomar registro de todo lo que se observe y escuche. Se busca llegar a un punto más profundo del tema.
1 2 3 4 5
?
métodos
Entrevista tener en cuenta... Seleccionar el tipo de entrevista pertinente para la investigación. Preparar el tema, preguntas y recursos tanto humanos como materiales. Establezca roles: Alguien que tome nota, quien haga las preguntas, quien tome registro (video, fotográfico, etc...), que no supere los 4 miembros.
bla bla bla..
1) Grupal Importante... Seleccionar el grupo con el que tenga mayor chance obtener la info que necesita. Identificar quien podría interesarle ir más profundo en una sesión de co-creación.
2) Individual
Importante...
!
?
Que los miembros del equipo no sean más de tres para no abrumar a quien se va a entrevistar. Empezar con un set de preguntas sobre hábitos, estilo de vida de la persona antes que las específicas sobre el tema de interés. En el registro debe estar exactamente lo que que la persona respondió, sin interpretaciones. A parte de las respuestas recibidas, estar atentos a el comportamiento y lenguaje corporal.
3) Experta
Importante... Determine qué tipo de experto(s) requiere. Antes de empezar comparta con ellos las preguntas de la entrevista. Seleccione expertos con distintos puntos de vista.
!
?
Ejercicio: Dar un ejemplo donde se evidencie el uso y entendimiento de los métodos de inspiración: 5 whys, entrevista, lenguaje corporal.
Qué tan satisfactorio es el servicio de Uber? Bueno, porque... regular, porque... Malo, porque...
Por qué lo considera así?
porque las tarifas... porque los carros... porque el tiempo...
Por qué es importante?
(...)
Entrevista grupal de usuarios que usan la app Tanto en la realización de 5 por qués y en la entrevista hay un miembro del equipo encargado de fijarse en en lenguaje corporal.
Para conocer más métodos de inspiración escanee aquí.
Registro Fotográfico Tema:
Métodos Inspiración Fecha:
26.febrero.2019 Integrantes:
Cristian Torres Bryan González Santiago Reyes Mateo Reina Daniel Pelaez Daniela Serrano Alejandra Ovalle Camila Delgado
Ideación
oportunidad de diseño
Esta fase busca dar sentido, generar ideas tangibles, prototipar, generar acuerdos en el equipo de diseño que permitan idear.
métodos
Combinar ideas
Lluvia de ideas
Storyboard
Cómo podríamos
Para conocer más sobre los métodos de IDEACIÓN escanee aquí.
Implementación solución innovadora
Esta fase evalúa una solución, planifica sustentabilidad.
Qué tan innovadora es la solución?
Qué tantos usuarios abarca?
Qué tipo de gente debe realizar la propuesta?
Para conocer más sobre los métodos de IMPLEMENTACIÓN escanee aquí.
Ejercicio:
Seleccionar un método de cada fase ( inspiración, ideación, implementación) para dar con una solución al problema o pregunta dada.
Cómo dinamizar una sesión Colaborativa?
Entender qué es una sesión colaborativa:
Son trabjos con participación de distintas disciplinas, donde se entiende cuáles son las metas de un
proyecto. Existen roles como el facilitador que es quien empieza la sesión explicando el proposito,
estan quienes llevan el registro y quien controla el tiempo, debe haber un conocedor del tema que de
contexto al equipo, y el diseñador que, bien puede ser el mismo facilitador , es quien da soluciones que
dan paso al debate.
5 WHYS Cuáles son las estrategias que, cree usted, promueven el trabajo colaborativo?
Compartir diferentes experiencias
Uso de tecnología
Se definen mejores objetivos
Estamos rodeados de ésta
Se generan multiples alternativas
Todos dan un manejo distinto según sus conocimientos
Por qué es positivo? Por qué? Por qué?
Por qué?
Por qué es pertinente?
Permite llegar a una solución efectiva
Por qué?
Se combinan multiples disciplinas
Distintos puntos de vista que chocan
Comparten interés por un tema dado
Dominan el tema desde distintas perspectivas.
Por qué? Por qué?
Puede surgir el debate
Por qué? Por qué?
Cómo Podríamos Categorización
Organización TEMA CENTRAL
A
B
C
D
Roles
Subtemas
T O D O S
P O R
I G U A L
todos sean líderes en sus áreas y hagan valer su palabra en debate.
Fomentar Beneficios
Formar relaciones
Definir el éxito cómo se imaginan el éxito?
Equipo
Interesados
Midiendo a través de la participación en los debates, y por medio de la retención de conocimientos al apllicar lo aprendido.
Registro Fotográfico Tema:
Inspiración, ideación e implementación Fecha:
01.marzo.2019 Integrantes:
Brayan Ninco Laura Fernanda Mario Angarita Paola Lozano Santiago Díaz Sergio Sánchez Camila Delgado
CARD SORTING
Método propio del HCD Visibiliza el proceso de diseño Es un puente entre el usuario y el diseñador Incrementa la sensibilidad y empatía (codiseño)
Cómo y cúando se usa?
?
Definir duración
Planificar Éste método puede ser aplicado o modificado varias veces y en diferentes etapas del proceso de diseño.
Definir lugar Espacio físico o particularmente en el campo de la comunidad.
Al inicio, desarrollo de ideas
Durante el desarrollo, si llega haber un estancamiento.
Metodología de uso Sin reglas Con instrucciones
Personalización
Puede ser significativa, opcional ( si quieren o no) o requerida.
1 2 3
Categorización Texto/ Imagen
Multimedial AR, QR, Medios alternativos.
Transmedial Se contruye un universo narrativo por distintos medios conectado por los interesados.
Ejercicio: Card Sorting para un Gigamap
Diseñer un juego de cartas que respondan a los pasos para realizar un Gigamap.
DEFINIR PROYECTO
Redactar problemática
Meta, nivel de transformación
A quiénes afecta
Delimite un contexto
REALIZACIÓN
Prueba y recibe retroalimentación
Recursos gráficos
verificar funcionalidad
Jerarquizar ideas Trazar conexiones
IDENTIFICAR VARIABLES
Imágenes
documentación
fotografías
Videos
Dibujos
Internet
Mapas
Audios
Corregir
ESTABLECER OBJETIVO GENERAL
GENERAR EMPATÍA
Entrevistas
ITERACIÓN
definir gráfica
Formato y sustrato
RECOLECTAR INFO
trabajo de campo
EVIDENCIAR PROBLEMA
IDEACIÓN
Objetivos específicos
Lluvia de ideas
método Cómo podríamos
Contrastar datos
Agrupar ideas
Diagramar información (sketch)
ordenar toda la info
Registro Fotográfico Tema:
Método Card Sorting Fecha:
08.marzo.2019 Integrantes:
Geraldine Lozano Paula Sánnchez Camila Delgado
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
DISCOVER
DEFINE
DESIGN METHOD CARDS
DEVELOP
DELIVER
Created to help anyone design and create innovatively. The SUTD IDC Design Method DISCOVER DEFINE Cards will introduce methods and tools used
design thinking to help develop projects Whoinare my users? How do I make sense of through Discover, Define, Develop and What are theirour needs? these findings? What are their reactions? Can I define a real person Deliver framework. How do users behave? as my user? How do users feel? How would my product Making the impossible, possible. How do they interact with fare in different situations? an object or environment? How did this problem How do they feel about come about? my product? Can I define my product specifications? SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
Opportunity Space
DEVELOP
How do I reduce the risk of failure during delivery? How do I prototype? How do I test a concept before the actual run?
How do I ideate? How do I think out of the box? How do I expand my current idea? How do I select the best concept? How do I define design Solution criterias? How do I give more depth to my design?
Opportunity Statement
Discover
Identify & understand opportunities & needs collaboratively through co-creation with stakeholders
DELIVER
Define HEART
Interpret & EYES re-frame needs & map them into activities, functions & representations
Develop
Ideate & model concepts based on identified opportunities
Deliver MIND
Iteratively prototype & test concepts & models with stakeholders
HANDS
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
Ejercicio:
Seleccionar cuatro cartas impresas de Método 4D de la Universidad de Singapur ( un par de la fase descubrir y otro par de la fase definir.) y aplicarlas para la realización dle Gigamap.
Descubrir
Meta:
Discover
User Journey USER RESEARCH
User Journey Map
A visual interpretation of the overall story from an individual’s perspective of their relationship with an organization, service, product or system (PSS), over time and across channels.1
DESIGN METHOD CARDS
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
KEY COMPONENTS
Persona
Emotional Response
Timeline of scenarios
Touch-points
PROCEDURE 2. Collect
3. Identify
Review design Goals for PSS.
relevant user research for insights of user experience.
User touchpoints and channels.
4. Persona
5.
to depict various facets of a user and his or her experience in a given scenario.
with lensed ideation to generate concepts.
1.
Goals
6.
Affinity Diagram
Supporting Characters
EXAMPLE: USER JOURNEY MAPS
Diagrama de afinidad:
D
Explorar y proponer un estilo gráfico. Discover
1
USER RESEARCH
Scenarios
Scenarios are a technique to identify a wider range of user needs. Users are to react to perdetermined scenarios and reactions are observed to discover latent needs.1
DESIGN METHOD CARDS
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
Latent needs Universal design Pain points and failure modes More robust design
TEMPLATE STRUCTURE
Ideate Scenarios Scenario Cards
entrevistas
notas
User Activity 1
User Activity 2
User Activity 3
Present
&
fotos
Scenario Card
Scenario Card Inject the scenarios to normal activity sequence
Model of presenting scenario cards as users engage PSS.
scenario cards or prompts to users while they are engaged with the PSS.
EXAMPLE SCENARIO: WAITING AT THE CLINIC
Option.
Combine with Personas* User Journey Map* Multi-Sensory Analysis*
Allowing design team to discover user’s POV.
Related Cards: K, D, G
1
H
Boceto: Primera diagramación del mapa.
TO DISCOVER
investigación/exploración
PROCEDURE
2. Prepare
Clara visualización, identificación de un hilo conductor al cruzar datos. Diseñador junior, curioso, empático, analítico con habilidad en visualización de la información.
The user journey.
or extreme usage cases that may evoke critical latent needs.
Generar conexiones, clasificando la información.
Persona:
to visualise ideas..
7. Sketch
1.
Recolectar: Identificar:
OTHER COMPONENTS
Positive or wow moments
Ideate
Context or place
Visualizar en un gigamapa de forma jerarquizada y categorizada una gran cantidad información sobre un tema o contexto específico.
In this example, we interject the scenario that the patient queue number is not called. Describe what happens to user.
organización públicos
hilo conductor
sectores categorías relaciones síntesis
Goals for PSS.
research for insights of user experience.
4. Persona
5.
to depict various facets of a user and his or her experience in a given scenario.
with lensed ideation to generate concepts.
and channels.
OTHER COMPONENTS
Positive or wow moments
Ideate
6. Affinity
Supporting Characters
EXAMPLE: USER JOURNEY MAPS
Diagram
to visualise ideas..
7. Sketch
The user journey.
Descubrir
Scenarios
D
Escenario #1: abordando el gigamap DESIGN
Discover
1
USER RESEARCH
Scenarios
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC)
Innovation Ready Design
Scenarios are a technique to identify a wider range of user needs. Users are to react to perdetermined scenarios and reactions are observed to discover latent needs.1
TO DISCOVER
Latent needs Universal design Pain points and failure modes More robust design
PROCEDURE 1.
METHOD
CARDS El diseñador ya terminó su fase de recolección de información por distintos medios, los pone a lo largo de una mesa o de tal forma que logre ver la totalidad y se dispone a organizar por medio de categorías para entender mejor el panorama. Revisa la relevancia d elos datos, jerarquiza y, a pesar de la saturación, éste empieza a generar empatía por el contexto que analiza y por ciertos datos que lo llevaran a la formulación de un problema de diseño o un hilo conductor. TEMPLATE STRUCTURE
Ideate Scenarios
Scenario Card
User Activity 1
or extreme usage cases that may evoke critical latent needs.
Scenario Cards
User Activity 2
Scenario Card
Inject the scenarios to normal activity sequence
User Activity 3
2. Prepare
Present
&
Model of presenting scenario cards as users engage PSS.
Escenario #2: bloqueo analítico
scenario cards or prompts to users while they are engaged with the PSS.
EXAMPLE SCENARIO: WAITING AT THE CLINIC
Durante el desarrollo del mapa, el diseñador de siente abrumado por tanta información y lo complejo de organizarla. Llega a un punto donde nada parece relevante y no encuentra un hilo conductor. Puede devolverse a la fase de exploración y buscar más datos los cuales luego cruzará, o volver a categorizar lo que tiene para hallar nuevas relaciones.
Option.
Combine with
Related Cards: K, D, G
Personas* User Journey Map* Multi-Sensory Analysis*
Allowing design team to discover user’s POV.
1
H
In this example, we interject the scenario that the patient queue number is not called. Describe what happens to user.
Definir
USER NEEDS ANALYSIS
Personas
DESIGN METHOD CARDS Define
Define
Personas USERSUTD-MIT NEEDS ANALYSIS DESIGN Personas CENTRE (IDC)
INTERNATIONAL
Innovation Ready Design
Good user centered design and empathy can be achieved by understanding people. Personas map user behavior patterns into archetypal profiles, allowing focused study on the user.1
Name Occupation Age
Wei Liang Medic 25
PROCEDURE
PROCEDURE
1. Gather
1.
from interviews or other forms of data collection
from interviews or Work Detail other forms of data Responsible for collection
2. Consolidate
Needs Enjoys the excitement of responding to medical emergencies 2. Consolidate
Consolidate behavior patterns that show commonalities
procedures, and applying Consolidate behavior knowledge outside patterns that show commonalities
Information
Gather Information
NECESIDADES: training newer medics
Enjoys learning about medial that Enjoys straightforward, efficient procedures
3. Present
3. Present
in page-length or short descriptions. Details to be included:
in page-length or short descriptions. Details to be included:
Personas
Personas
Name Stock photograph (to protect identity) Sketches Relevant Narrative stories
Name Stock photograph (to protect identity) Sketches Relevant Narrative stories
K
Define
1
ANALYSIS
Activity Diagram
1
or Hypothesize
1. Observe
2. Record
the activities and user interactions with a PSS. From setup to disposal (Full value chain)
each step in an individual activity block (post-it note or digital form).
3. Connect
TEMPLATE STRUCTURE
Setup of product, service or system Interaction 1 (Series)
PROCEDURE
Interaction 2 (Parallel)
Interaction 2 (Parallel)
Disposal of product, service or system
EXAMPLE ACTIVITY DIGRAM: A FLASHLIGHT 4. Repeat
Observation
K
DESIGN METHOD CARDS
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
An activity diagram is a block diagram of sequential and parallel activities that captures user interactions with a product, service or system (PSS).1
Sara Vélez Diseñadora gráfica 22 años
Good user centered design and empathy can be achieved by understanding EXAMPLE OF AN OCCUPATIONAL PERSONA people. Personas map user behavior patterns into archetypal profiles, allowing focused study on the user.1
Purchase Open
• Recolectar y organizar la mayor cantidad de info. de un contexto. •Encontrar patrones y categorizar. •Saber visualizar los datos de forma jerarquizada para el resto del equipo. •Encontrar sesgos u oportunidades de diseño según las relaciones que establezca.
Good user centered design and empathy can be achieved by understanding people. Personas map user behavior patterns into archetypal profiles, allowing focused study on the user.1
Good user centered design and empathy can people. Personas map user behavior patterns into archetypal profiles, allowing focused study on the user.1
be achieved by understanding EXAMPLE OF AN OCCUPATIONAL PERSONA
PROCEDURE 1.
Definir
PROCEDURE
Gather Information
1.
Gather Information
Name Occupation Age
Wei Liang Medic 25
from interviews or other forms of data collection
from interviews or Work Detail other forms of data Responsible for collection
2. Consolidate
Needs Enjoys the excitement of responding to medical emergencies 2. Consolidate
Consolidate behavior patterns that show commonalities
procedures, and applying Consolidate behavior knowledge outside patterns that show commonalities
training newer medics
Enjoys learning about medial that Enjoys straightforward, efficient procedures
ACTIVITY DIAGRAM 3. Present
3. Present
in page-length or short descriptions. Details to be included:
in page-length or short descriptions. Details to be included:
Personas
Personas
Name Stock photograph (to protect identity) Sketches Relevant Narrative stories
1
Name Stock photograph (to protect identity) Sketches Relevant Narrative stories
Define
K
ANALYSIS
Activity Diagram
1
DESIGN METHOD CARDS
SUTD-MIT INTERNATIONAL DESIGN CENTRE (IDC) Innovation Ready Design
An activity diagram is a block diagram of sequential and parallel activities that captures user interactions with a product, service or system (PSS).1
TEMPLATE STRUCTURE
Setup of product, service or system Interaction 1 (Series)
PROCEDURE
or Hypothesize
1. Observe
2. Record
the activities and user interactions with a PSS. From setup to disposal (Full value chain)
each step in an individual activity block (post-it note or digital form).
Interaction 2 (Parallel)
EXAMPLE ACTIVITY DIGRAM: A FLASHLIGHT
Purchase
3. Connect
4. Repeat
these activities in a single block diagram with directed arrows.
process to validate that the block diagram is complete (preferably with a new user).
Observation
Open Charge Store Turn on Retrieve
Automated opportunities Innovative opportunities Unnecessary steps taken by the user Opportunities for new or combined functions Potential failure modes
Illuminate
N
Dispose
Actividades secuenciales
Entrevista ambiente
Bitácora
Imagen Fotos videos mapas
Actividades paralelas
ORGANIZACIÓN
Visualizar Preparar herramientas gráficas
Disponer de la totalidad de info
Propuestas de bocetos
Prueba con el equipo Correciónes
Categorizar
Texto
Point at object
Turn off
1
Audio
Interaction 2 (Parallel)
Disposal of product, service or system
TO DISCOVER
RECOLECCIÓN DE INFO.
K
Hallar patrones Determinar enfoque
Análisis de representación Trazar relaciones Resaltar puntos clave
Propuesta final
Registro FotogrĂĄfico Tema:
cartas impresas de MĂŠtodo 4D de la Universidad de Singapour Fecha:
12.marzo.2019 Integrantes:
Geraldine Lozano Paula SĂĄnchez Camila Delgado Alejandra Ovalle
PRUEBAS DE USUARIO UX
Usabilidad Personas / historias de usuario Diseño tangible Investigar, evaluar, arquitectura de la info., wireframing. Definir macro interacciones.
UI
Diseño gráfico/visual Maquetación/ Branding Tendencias Adaptación/ Responsive El atractivo de la interfaz Definir Microacciones
Tipos de prueba
evidenciar y registrar problemas de usabilidad Objetivo
Entrevista y encuesta
semiestructuradas realizadas a usuarios de un sitio o al público objetivo
Pruebas moderadas
Recolectar información cualitativa para constrastar con datos estadísticos. Creación de arquetipos de usuario
Probar funcionalidades específicas. Evaluar elementos fundamentales de diseño, arquitectura y contenido en relación a la interacción.
Card Sorting Ordenación de las categorías del contenido.
Unificar criterios respecto a la ubicación de contenidos, jerarquías y navegación. Base del mapa de navegación.
Aplicación
1.Encuesta sobre el uso de los servicios ofrecidos. 2.Realización perfil de usuario.
Prevenir
Puede generar sesgos en la información, ya que no todos los usuarios son conscientes de sus hábitos y comportamientos.
3.Se reuné a un grupo de personas representativas para hacerle entrevista.
1. Listado y registro de acciones de uso para el usuario.
Puede que el usuario se incomode y sesgue los resultados.
2.Observar lenguaje corporal durante el uso.
Falta de coordinación entre los horarios de los usuarios.
3. Registro audiovisual para una revisión posterior.
1.Proponer un etiquetado de contenidos. 2.Invitar a los usuarios a ordenarlas según criterios establecidos.
Explicar que el ejercicio no define la ubicación de elementos en la portada del sitio final, eso lo soluciona los wireframes.
Tipos de prueba
evidenciar y registrar problemas de usabilidad Objetivo
Pruebas Beta
Acceso a un grupo de usuarios a una plataforma en las etapas finales del desarrollo.
Test A/B
Identificar problemas de interacción, errores de carga de contenidos y compatibilidad con navegadores.
Aplicación
1.Prueba la versión de prueba con miembros de la empresa. 2.Prueba la versión de prueba con los clientes.
Medir la efectividad de un diseño específico.
1. crear dos o más versiones de un elemento 2.Exponerlas a usuarios para ser analizados. 3.Seleccionar el más efectivo.
Análisis experto de todos los elementos de usabilidad
Exceso de cambios a elementos que ya estaban aprobados.
3.Recibir retroalimentación
Prueba de dos propuestas con diferencias leves.
Evaluación Heurística
Prevenir
Evidenciar problemas puntuales de usabilidad.
1.Entregar pautas de evaluación a los expertos en usabilidad
Exceso de cambios en una propuesta, dificultando la identificación de elementos que potencian o disminuyen la efectividad.
No busca el rediseño completo del proyecto ni va dirigido a ese fin.
2.Determinar errores
Las pruebas de usabilidad evidencian problemas puntuales de uso en una plataforma, servicio o estrategia, permitiendo una revisión crítica en nuevos proyectos o rediseños. Identifica hasta 80% de los problemas de usabilidad antes del lanzamiento.
Ejercicio:
1. Cogiendo como producto de prueba las chaquetas, aplicar y registrar las pruebas de uso entrevista y encuesta, priebas moderadas y card Sorting.
2. Proponer un ejemplo donde se evidencie las pruebas de uso Pruebas beta, test a/b,, y evaluación heureistica.
Entrevista y encuesta:
Perfil de usuario:
Según su experiencias, nos podría decir cuál son los motivos por los que compra chaquetas? Que haga juego con el outfit, el clima frío y lluvioso de Bogotá, disimular el mal estado físico. Qué tipo de chaquetas conoce, y cuáles tiende a escoger al momento de su compra? hipermeables, abrigos, de sudadera, de jean, de cuero. No me inclino por un estilo en específico, mientras sea cómoda y me cubra del frío, eso sí, no me gusta cuando vienen muy decoradas co arandelas y cosas. En qué se fija cuando se mide una chaqueta? Que no me quede ancha en los hombros, que la cremallera no sea complicada de usar, usted sabe, que hay algunas que se traban o si es de botones, igual, que sea sencilla de apuntar. Si tiene bolsillos, que no sean imitados o de esos pequeños donde uno pierde cualquier cosa que meta. Siempre tengo en mente con qué otra ropa de mi armario la puedo combinar, no vaya a ser que la compre y no combine.
Pesada
Ligera
Suelta
Entallada
Con capota
Sin capota
Con cierre
Sin cierre
Con bolsillo
Sin Bolsillo
Formal
Informal
Ubicación Bogotá, Colombia Rango edad 19 - 25 Estrato 3, 4, 5 Nivel de educación Universitarios Características Buscan lucir bien de acuerdo a tendencias de moda, que las chaquetas no sean tan ligera debido a las bajas temperaturas de bogotá, pero tampoco térmicas o muy pesadas porque bien el clima varía mucho en un día.
Pruebas moderadas: Lista de acciones A) Apunte la chaqueta, funciona bien el cierre? Levante los brazos, siente alguna incomodidad? B) Ubique los bolsillos, oculte las manos y algún dispositivo móvil en ellos, le parecen seguros, están bien ubicados? C) Use la capota, lo cubre correctamente? D) Le parece abrigada?
SI
A
NO
B
NO TIENE
C D
Card Sorting Qué factor es más relevante al momento de escoger una chaqueta? Material
Impermeable Cuero Jean
Accesorios Bolsillos Resortes Cierre
Entalle Fijo Adaptable holgado
Pana Peso
Tendencia moda
Test A/B
Pruebas Beta: Versión Beta de un personaje para una serie animada.
Público al que va dirigido y miembros del equipo.
A
B
Público al que va dirigido
Evaluación heurística: Pautas
Evaluación
Anotaciones
Evaluación hecha por un experto en relación al producto, servicio o estrategia que se esté diseñando
Principios de usabilidad cargando...
Visibilidad del estado del sistema El sitio web o aplicación debe mantener siempre informado al usuario de lo que está ocurriendo y brindarle una respuesta en el menor tiempo posible.
Relación entre sistema y el mundo real
basurero
salvar
El sitio web o aplicación debe utilizar el lenguaje del usuario, con expresiones y palabras que le resulten familiares. La información debe aparecer en un orden lógico y natural.
2 elementos eliminados deshacer
Libertad y control por parte del usuario En caso de elegir alguna opción del sitio web o aplicación por error, el usuario debe disponer de una “salida de emergencia” para abandonar el estado no deseado en que se halla. Debe poder deshacer o repetir una acción realizada.
Consistencia y estándares Los usuarios no tienen porqué saber que diferentes palabras, situaciones o acciones significan lo mismo. Es conveniente seguir convenciones.
# 221F20 # 909094
Título
# FECA39
Futura Times
artículos
nombre camila delgado
Prevención de errores
correo
Es importante ayudarle al usuario a que no caiga en un error. La funcionalidad de autocomplete de los buscadores ayuda a que una persona no tenga que escribir toda la palabra y no se equivoque.
país colombia enviar
Reconocer antes que recordar Hacer visibles acciones y opciones para que el usuario no tenga que recordar información entre distintas secciones o partes del sitio web o aplicación. Es importante mantener a nivel de diseño visual un estándar para que los elementos de interface sean consistentes en diferentes pantallas.
=
validación
2
3
Los aceleradores o atajos de teclado pueden hacer más rápida la interacción para usuarios expertos, de tal forma que el sitio web o aplicación sea útil tanto para usuarios básicos como avanzados.
Las páginas no deben contener información innecesaria. Cada información extra compite con la información relevante y disminuye su visibilidad.
error de validación
1
compra
Flexibilidad y eficiencia en el uso
Diseño estético y minimalista
nombre no disponible
carrito
x
botón
✓
botón
Ayuda a reconocer, diagnosticar y recuperarse de los errores. Los mensajes de error deben estar redactados con un lenguaje simple, lo peor son errores como “Error 34-x1” que no le dicen nada al usuario de cómo puede recuperarse de ese error, deben ofrecerse alternativas para que el usuario pueda continuar realizando la tarea o recuperando lo último que hizo (autosave)
Ayuda y documentación Aunque es mejor que el sitio web o aplicación pueda ser usado sin ayuda, puede ser necesario proveer cierto tipo de ayuda. En este caso, la ayuda debe ser fácil de localizar, especificar los pasos necesarios y no ser muy extensa. en los sitios móviles se está utilizando un mini tutorial o tour por el app o el sitio en donde de manera sencilla se exponen las funcionalidades principales, no es tan aburrido como tener que leer documentos extensos de ayuda.
tutoriales a tiempo real
para ver tus premios
Ejercicio:
Evaluar la usabilidad de la página web de la UJTL, como si fueramos un estudiante de once que busca inscribirse a algún plan de estudio.
1. Visibilidad del estado del sistema
✓ ✓ ✓ ✓
Utadeo / facultad / artes y diseño / diseño gráfico
Ruta Indicador de ubicación actual Url indicando que está cargando cada nueva ventana. Notifica respuestas
2. Relación entre sistema y el mundo real
Sello acreditación
Lupa Busqueda
4. Consistencia y estándares
✓ Unidad gráfica (color, tipografía, diagramación) ✓ Tono, como si un estudiante hablara a otro.
3. Libertad y control por parte del usuario
✓
Permite acceso a todos los enlaces, dejando deshacer, devolverse o seguir avanzando por la página.
5. Prevención de errores nombre camila delgado
escribe tu correo para continuar
correo país colombia
Está seguro de abandonar?
6. Reconocer antes que recordar
si
no
7. Flexibilidad y eficiencia en el uso Nuevos aspirantes pregrado
Iconógrafía
= Logo
Home
Varios atajos para llegar a pregrado
8. Diseño estético y minimalista
✓ ✓ ✓
Mapa de navegación estudiante 11º
Colores planos, misma paleta. Jerarquía tipográficas.
#clicks
1
Tadeo
Formularios simples, sin decoración.
9. Ayuda a reconocer, diagnosticar y recuperarse de los errores.
Home Tadeo 2 Diseño Gráfico
ver todos los programas
3
Diálogo de ayuda
"Se envió correctamente"
Formulario
formulario
"Qué quieres estudiar"
admisiones
"Quiero más información"
5
10. Ayuda y documentación
✓ términos condiciones enviar
matrícula
.PDF Documentos con indicaciones
8
6
Cómo inscribirse? pre-inscripción
9
nuevos aspirantes
X
Servicios
Video tutoriales
4
CREA serv...
formulario
Pestaña lateral de servicios nos lleva a CREA Soluciones en línea
10
ERROR
11 llega al formulario.
fin.
pregrado
7
Registro Fotogrรกfico Tema:
Pruebas de usuario Fecha:
19.marzo.2019 Integrantes:
Diego Caicedo Jennifer Puerto Daniela Valdivieso Camila Sanabria Alejandra Ovalle Francisco Valenzuela Camia Delgado
Registro FotogrĂĄfico
Tema:
Principios de usabilidad Fecha:
22.marzo.2019 Integrantes:
Camila Sanabria Alejandra Ovalle Francisco Valenzuela Nestor Ă rias Jennifer Puerto Alejandra Beltran Camila Delgado