Dise単o de interfaces Ana Beatriz Bravo :: Paula Morales
2014
Utilizabilidad (”usability”)
La usabilidad es un atributo de calidad que mide cuán fáciles son las interfaces de usar. Se define por 5 componentes de calidad
Componentes de calidad Facilidad de aprendizaje Eficiencia Memorabilidad Errores Satisfacción
Utilidad La usabilidad junto con la utilidad determinan si algo es Ăştil. Poco importa si algo es fĂĄcil de usar si no es lo que se necesita.
Importancia Es importante para la supervivencia de un sitio…. El usuario se va si: El sitio es dificil de utilizar Si el inicio no muestra que se ofrece y que pueden hacer los usuarios en la página Si la información es difícil de leer
Elementos para diseñar interfaces de usuario
Diseño en papel
Reutilización de diseños
Diseño con usuarios
MetodologĂa general para el anĂĄlisis y diseĂąo de interfaces
Metodologías Rediseño de una interfaz
Diseño de una interfaz nueva
Análisis de lo existente Inventario Referencias Necesidades Tráfico Personas
Análisis global Personas Necesidades
I Etapa Investigaci贸n y an谩lisis
Caso (Redise単o de una interfaz)
TEC Digital
Análisis de lo existente Se refiere al análisis de la usabilidad del sitio o la herramienta en estudio. Sección de Asignaciones (a)
Análisis de lo existente
ejemplo
jerarquía 2 1 Talent Place lleva a
1
Pasantías
Inicio
Empresas
Ingresar lleva a
Registrarse
Buscar
lleva a
contiene
2
Acerca de TTP
3
Registrate lleva a
Buscá
Conocé el mercado
Academia virtual
Noticias
Contacto
Aplicá
lleva a
Crear cuenta
Iniciar sesión
Solicitar una nueva contraseña
3a
3b
3c
3
Inventario de contenidos y arquitectura actual Herramienta que representa de forma clara todo el contenido que conforma un sitio Web, este se clasifica en secciones y documenta el propósito de cada una de estas. Clasificación del contenido Documenta toda la información de un sitio Web mediante ramificaciones de la misma y considerando además sus características más importantes.
1. Navegaci贸n primaria:
Necesidades:
inventario de las necesidades que satisface el sistema
Se puede utilizar técnicas como: Recolección de datos Sondeo Entrevista Focus group Los resultados permiten identificar las necesidades del usuario, así como categorizarlas por prioridad
Necesidades:
identificación de necesidades por usuario
Necesidades:
agrupaci贸n de necesidades por usuario
Tráfico
investigación o estimación del tránsito por necesidad
Se analiza con Google Analytics o estadísticas de indicadores establecidos. Se observa: Cantidad de visitas al sitio Cantidad de visitas a secciones específicas Navegadores y sistemas operativos Tiempo promedio por sección
Tráfico
Visitas promedio a la plataforma diarias Cantidad de visitas
5000 4500
4465
4564 4073
4000
3575
3500
3468
3000
2141
2500
2352
2000 1500 1000 500 0 Lunes
Martes
Miércoles
Jueves
Día de la semana
Viernes
Sábado
Domingo
TrĂĄďŹ co
Top 8 de las secciones mĂĄs visitas en la plataforma
1
Mis documentos 37,150 visitas
2
Cursos 15,582 visitas
3
Administrar miembros 4,642 visitas
4 5 6
Expediente estudiantil 2,772 visitas Panel de control 2,519 visitas Encuestas 1,402 visitas
TrĂĄďŹ co
Promedio de visitas por sistema operativo y explorador
Windows (91%)
OS x (5%)
Linux (4%)
38,33%
2,85%
2,38%
34,08%
< 1%
< 1%
15,51%
< 1%
< 1%
Tráfico
investigación o estimación del tránsito por necesidad
Concluciones: Relación entre secciones de alto tráfico Relación entre la jerarquía y el tráfico Páginas más concurridas Relación entre la sección del sitio y las acciones que realizan
Personas
definición de grupos de individuos con características similares
Se clasifican según: Perfiles Necesidades Motivaciones Logrando tener una mejor visión de la audiencia y estructura de los requerimientos
Personas
definición de grupos de individuos con características similares
Profesor Juan Rojas 45 años
Tutor Carlos Obando 22 años
Estudiante Karla Rodríguez / 20 años
Motivaciones
Necesidades
Escenarios
Motivaciones
Necesidades
Escenarios
Motivaciones
Necesidades
Escenarios
Conectarse a un medio que le permita administrar sus cursos e interactuar con los estudiantes que forman parte de ellos
Conectarse a un medio que le permita obtener y entregar documentación de cursos, y administrar documentos de los cuales es asistente
Conectarse a un medio que le permita obtener y entregar documentación de cursos, y ver información de los mismos
Subir documentos Administrar/publicar pruebas Administrar/publicar notas Administrar estudiantes
Subir documentos Administrar/publicar pruebas Administrar/publicar notas Administrar estudiantes
Subir y bajar documentos Ver registro de notas Recibir notificaciones Ver fechas de entrega Ver contenido e información de curso
Subir documentos Crear asignaciones Calificar Recibir asignaciones Control de asistencia
Subir documentos Crear asignaciones Asignar notas Recibir asignaciones
Subir documentos Recibir asignaciones Recibir notas Bajar documentos
Caso (Nueva interfaz)
Aplicaci贸n de cocina
Anรกlisis global tres pasos: anรกlisis del entorno (strategy plane) anรกlisis de escenarios de uso (scope plane) anรกlisis de la arquitectura bรกsica (structure plane)
Análisis del entorno
Secciones de un app de cocina
Imágenes de platillos
Ingredientes a adquirir
Categorías
Por ingrediente
Planificador de menús
Categorías de recetas
Categorías
Ingredientes
Por receta
Notas personales
Opciones de recetas
Ingredientes descartados
Procedimientos
Por palabra clave
Settings
Otros datos
Componentes y recursos Video y slideshows
para mostrar recetas fotografía + título
paso a paso procedimiento específico
presentación
Componentes y recursos FotografĂas
resultado ďŹ nal
ingredientes
representar receta resultado ďŹ nal
Componentes y recursos Listas
lista de recetas tĂtulo + tiempo + diďŹ cultad
lista de productos a adquirir Ingrdientes + cantidad/Medida
lista de productos a adquirir se descartan al adquirirlos
Componentes y recursos Otros elementos
Timer Controlar tiempos de cocción y preparación
Listas tipo “tambor” Selección de fechas, tipos de comida, porciones y otras cant.
Menús “desplegables” Posibilidad de ocultarlos para aprovechar espacio
Distribución de los elementos
categorías recetario
búsqueda
compartir
video
texto
tiempo
imagen
costo
calorías ingredientes dificultad
calificación notas comentario
Análisis de los escenarios de uso
buscar
recetario
Búsqueda: - Palabra clave - Predeterminada - Avanzada
Recetario: - Categoría principal - Subcategorías
compras
Compras: - Nueva lista - Varias listas
favoritas
Recetas favoritas: - Recetario
receta
Receta: - Resumen - Seguimiento - Favoritas - Compras - Modos de visualización
Análisis de la arquitectura básica
Detalles básicos
Palabra clave Buscador
mediante
Comida del día
lleva a
Recetario
lleva
Receta
muestra
compuesto por
Categoría Ingrediente principal Tiempo
Ingrediente
Dificultad Dieta Porciones Costo
Categoría 1 Lista de selección
compuesto por
Categoría 2
Recetario 1 lleva a
Categoría n
Recetario 2
Receta 1 lleva a
Recetario n
Receta 2 Categoría
Receta n Seguimiento
lleva a
Indicaciones/Preparación Comentarios Favoritos
Tips
compuesto por Ver receta Crear lista
Carrito de compras
compuesto por
Agregar ingrediente
compuesto por
Categoría Favoritos
Eliminar ingrediente Modificar cantidades
compuesto por
Agregar ingrediente Ver lista
compuesto por
Modificar lista
compuesto por
Descartar ingrediente Modificar cantidades
video
Tiempo compuesto por
Paso a paso Resumen
imágenes diagrama
Personas definición de las personas (usuarios potenciales)
Usuarios potenciales
Cualquier ubicación geográfica
Género masculino o femenino
Cualquier edad
Cualquier condición socioeconómica
Personas Personas
Principiante
Intermedio
Experto
relacionado
dificultad
visualización de la receta
Necesidades Personas / Necesidades
ingrediente nombre de receta palabra clave
agrupados eliminar agregar descartar cambiar cantidades
una receta resumen recetas relacionadas información nutricional la duración el grado de dificultad el costo ingredientes cantidad de porciones diferentes modos de visualización
II Etapa Planteamiento y desarrollo de la propuesta
Card Sorting
comprobaci贸n de la arquitectura y nomenclatura de la primera propuesta
Card Sorting
Ayuda por medio de grupos focos a clasiďŹ car y categorizar contenido de un sitio web. Es una herramienta para darle forma a la arquitectura de un sitio.
Tipos y elementos Tipos:
Cerrado (categorías definidas) Abierto (categorías sin definir) Elementos: 1 n ó i c cción 3 seeccse ción 2
Tarjetas con palabras claves
Grupo de 5 personas
Metodología 1
1 ión c c seecsección 3 ción 2
Se le presenta al usuario las tarjetas con palabras claves y tarjetas en blanco para generar categorías y palabras clave
2 Las personas agrupan las tarjetas para conocer cuales palabras identifican mejor las categorías