4.tienes5 segundos (1)
-
Upload
carolina-suarez -
Category
Education
-
view
32 -
download
0
Transcript of 4.tienes5 segundos (1)
![Page 1: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/1.jpg)
Tienes 5 segundosProducción de Medios Virtuales en la OrganizaciónKarol Dalila Reyes Dí[email protected]
![Page 2: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/2.jpg)
Contenido
La primera impresión• ¿Cómo perciben los usuarios
el sitio Web?
Fácil, rápido, intuitivo!• ¿Cómo diseñamos y
construimos los contenidos para nuestros usuarios?
![Page 3: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/3.jpg)
Reto digital
Información• Servicios • Productos• Noticias
Acción• Opinar• Compartir• Enviar
![Page 4: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/4.jpg)
Reto Digital: Poco Tiempo
Para Enamorar al usuario
15" Si el usuario después de 10" sabe para qué es la página PASAMOS!!
✓
![Page 5: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/5.jpg)
3 veces 5 segundos1ª
impr
esió
n
Carga rápidaDar "Señales de Vida"Mostrar el titulo de la páginaTecnológico Ti
tula
res
Distribución de información principal Ubicación de titulos de secciónDiseño - Usabilidad
Acci
ón
El texto de los titulos de cada sección debe invitar a la acciónComunicación
![Page 6: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/6.jpg)
Elmentos que los usuarios esperan encontrar en la Web durante los primeros 15 segundos
La línea de conversión muestra una relación directa entre los contenidos mostrados y el interés del usuario
0
2
4
6
8
10
12
14
16
Dominio
<title>
Diseño
Titulos
Textos
Imágenes
Acciones
Respuesta esperada
Tiem
po
Tecnológico:Rapidez de respuesta de servidores de Dominio y Web
Visual e Informativo:De la calidad de la información y la presentación depende la captura de la atendión del usuario
![Page 7: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/7.jpg)
Diseño de la experiencia del usuario
La Arquitectura de Información (AI) es base para diseñar la experiencia del usuario.
Los tres elementos claves de AI son:
Contexto• Dónde se
dice?
Usuarios• A quién se
dice?
Contenido• Qué se
dice?
![Page 8: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/8.jpg)
Atributos de la información
Presentar la información de tal manera que cumpla con los objetivos que se desean alcanzar a través de la Web. En ocasiones es necesario priorizar estos atributos Creíble
Encontra-ble
Útil
Accesi-ble
Valioso
Desea-ble
Utilizable
Fuente: MORVILLE, Peter; (2004). Diseño de Experiencias de Usario. International Institute for Information Design (IIID) [fecha de consulta: 03 de septiembre del 2009]. Disponible en < http://iainstitute.org/es/translations/000370.html >
![Page 9: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/9.jpg)
¿Qué se tiene en cuenta para diseñar la experiencia del usuario?
Público Objetivo
Distribución de elementos
Interacción
Pruebas de Usabilidad
Diseño de la información
![Page 10: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/10.jpg)
Público Objetivo
Definir la audiencia, arquetipos demográficos y psicográficos
Conocer las necesidades del público para guiar la visita
Evitar trabajar para un “usuario elástico” (todos los usuarios con todas las necesidades y posibilidades)
![Page 11: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/11.jpg)
Distribución de elementos
Diseños simplificados detallando la estructura y elementos relevantes
Ayuda a tomar decisiones sobre el contenido y la interacción
Permite hacer pruebas tempranas de las interfaces
![Page 12: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/12.jpg)
Interacción
Paso a paso de la actividades que realizará el usuario y la respuesta del sistema
Definición de los elementos previstos en el paso anterior
Ayuda a preparar los aspectos funcionales y los contenidos
![Page 13: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/13.jpg)
Ejemplo de flujo de interacciónExplica las actividades del usuario y detalla las pantallas reqqueridas para dar curso a la actividad
(Imagen de Katherine Exss < http://www.ead.pucv.cl/2008/partituras-de- interaccion >).
![Page 14: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/14.jpg)
Usabilidad"Calidad de la experiencia de un usuario en un entorno digital"
Juan Carlos Camus
Se puede medir con 5 usuarios, ellos aportan el 85% de los problemas de usabilidad
• En cuánto tiempo un usuario nuevo, aprende a usarla bien y hace operaciones básicas.
Facilidad de aprendizaje
• Rapidez para desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
Facilidad y eficiencia de uso.
• Capacidad de recordar las características y forma de uso de un sistema para volver a utilizarlo.
Facilidad de recordar cómo
funciona
• Apoyo que se entrega a los usuarios cuando enfrentan los errores que cometen al usar el sistema.
Frecuencia y gravedad de
errores
• Indica lo satisfechos que quedan cuando han empleado el sistema, por la facilidad y simplicidad de uso.
Satisfacción subjetiva
![Page 15: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/15.jpg)
Usabilidad: Manejo adecuado de errores
Ofrecer una indicación explícita de que algo ha salido mal.
Ofrecer la información en un lenguaje entendible para las personas.
Redacción gentil, que no culpe a los usuarios.
Ofrecer una descripción precisa de problemas concretos.
Entregar consejos constructivos para arreglar el problema.
Los mensajes deben ser visibles y muy destacados.
Se deben ofrecer enlaces hacia páginas con más información sobre el error.
![Page 16: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/16.jpg)
Diseño de la Información
Cualquier pantalla debe estar preparada para recibir un usuario
Todas deben contar con zonas que permitan: contextualizar, informar, promover e interactuar
La importancia relativa de cada zona depende del propósito de la página.
![Page 17: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/17.jpg)
Zonas para el despliegue de Información
Cont
exto • Información de
identificación y navegación
• Logo, menú, pié de página
Info
rmac
ión • Ofrece los contenidos de
la página en diferentes formatos
• Texto, audio, video, enlaces
Acci
ón • Facilitan al usuario la interacción con el sitio
• Selección de elementos, compra, contacto, etc
Prom
oció
n • Destaca contenidos existentes en el sitio
• Promoción eventos, servicios o funcionalidades nuevas
![Page 18: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/18.jpg)
Página Principal
Acceso principal al sitio
RETO: Diseño limpio, información suficiente
![Page 19: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/19.jpg)
Página de Información
Presenta contenido específico, puede ser: producto, servicio o noticia
![Page 20: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/20.jpg)
Página de Interacción
Recoge información del usuario
![Page 21: 4.tienes5 segundos (1)](https://reader030.fdocuments.co/reader030/viewer/2022032620/55c8f37fbb61eb91048b4813/html5/thumbnails/21.jpg)