Usabilidad y diseño de interfaz

Vista previa del material en texto

USABILIDAD Y DISEÑO
DE INTERFAZ
INTRODUCCIÓN
Páginas web eran documentos simples de texto
El lado estético fue mejorando con nuevas etiquetas (códigos)
Funcionalidad e interactividad
USABILIDAD
Mejorar la facilidad de uso durante la navegación
Eficacia: El diseño cumple con el mensaje
Aprendizaje: Cuánto tiene que navegar el usuario para encontrar algo 
Flexibilidad: Adapta sus funciones a cualquier ambiente
Actitud: No ocasiona cansancio, molestia, frustración, esfuerzo
FUNCIONALIDAD 
Atributos
• Opciones de navegación
• Menú
• Interactividad
ESTÉTICA
Diseño visual
• Colores
• Imágenes
• Tipografía
EXPERIENCIA DE USUARIO (UX)
Interacción con una página web
• Necesidades
• Percepciones
• Emociones
• Respuestas
• Expectativas
• Motivaciones
USABILIDAD 
Como es comprendido, 
aprendido y usado el sitio web
EXPERIENCIA 
DE USUARIO 
Lo que se transmite al usuario, 
expectativas, emociones, 
motivaciones
INTERFAZ DE USUARIO (UI)
Diseño con el que los usuarios interaccionan
Objetivo del sitio web: Punto de partida y fundamento (mostrar un producto nuevo, 
vender algo, informar, etc.)
Contenido: Con qué se trabajará, sitio web informativo, imágenes, contenido 
multimedia, etc.
Público: Hacia quién va dirigido, identificar necesidades de los usuarios, lograr 
mayor impacto
Programas: Fireworks, Muse, Photoshop, XD
BOCETOS INICIALES (WIREFRAME)
Marco de alambre
Representación gráfica del concepto antes de realizar el código fuente
Boceto inicial sin tipografías, colores, etc.
Describe funcionalidad y el diseño de la página
Definir espacios y estructuras
Elementos a considerar:
• Navegación
• Elementos web clásicos (cabecera, cuerpo, formularios, enlaces)
• Diseño de elementos individuales
• Tipo de contenidos implementados
Header (cabecera): Logo, menú, 
buscador, redes
Body (cuerpo): Contenido (main
content), columnas, sidebar
Footer (pie): Información legal, 
políticas, cookies, condiciones, 
contacto
ESTRUCTURA DE UNA PÁGINA
Home (inicio): La página más importante, tiene que llamar la atención del 
usuario e invitarlo a seguir navegando
Nosotros (about): Quiénes somos, sobre mí, una biografía, visión y misión, 
historia
Blog: Mantener informados a los usuarios, vincular con redes sociales, 
atraer más visitas
Productos o servicios: Tienda online, clasificación por categorías, catálogo
Contacto y ubicación: Formulario sencillo para mantener el contacto, 
resolver dudas, recibir sugerencias
SECCIONES DE UN SITIO WEB
REFERENCIAS
1&1 digital guide. (2017). Mockup y wireframe: visualiza el concepto de tu proyecto online. Diseño web.
Recuperado de https://bit.Ly/2fxhpa4
Alcántara, P., Y barrio S. (2016). El papel moderador del diseño web y la cultura del país en la 
respuesta del consumidor online. Una aplicación a los destinos turísticos. European research on
management and business economics 2016 may, 22(2).
Beati, h. (2015). HTML5 y CSS3 para diseñadores. Argentina: alfaomega grupo editor.
Fleming, j. (1998). Navegación web: diseñando la experiencia del usuario. Estados unidos: o’reilly media.
Iglesias l., Paredes C., Gómez L., Y gutiérrez M. (2018). Experiencia de usuario y medios de 
comunicación. La regla de los tres clics en las webs de periódicos para smartphones. Revista latina de 
comunicación social, (73).
Springer. A. (2012). El gran libro de diseño web. España: axel springer españa S.A.
https://www.pentaweb.es/partes-de-una-pagina-web/