Human Centered Design - Memoria metodologías del diseño

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.

facebook

=

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

.PDF

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