Introducción Al Diseño de Interfaces Web

Introducción
DISEÑO DE INTERFACES WEB

Índice
 Introducción.
 ¿Qué es una Interfaz Web?
 Experiencia de Usuario.
 Diseño centrado en el usuario.
Introducción
 Diariamente usamos dispositivos, aplicaciones y sitios web.

 El punto de encuentro entre el usuario y el producto, se conoce como
Interfaz de usuario.
 Toda Interfaz de usuario debe ser: amigable, satisfactoria, fácil de usar y
sobre todo ÚTIL.
 Si nuestra Interfaz es capaz de resolver nuestras necesidades y objetivos
de forma eficiente, tendrá una alta aceptación social.
EJEMPLOS
 Web con diseño pésimo: http://www.cantinachichilo.com.ar/

 Web con diseño pésimo: https://www.lingscars.com/
 Web con diseño amigable: https://wickret.cuberto.com/
 Web con diseño amigable: https://collagecrafting.com/en
¿Qué es una Interfaz Web?
 La interfaz de usuario (UI) es lo que permite que la interacción entre

persona y ordenador ocurra.
 La persona debe controlar las acciones de la máquina.
 La persona debe recibir una respuesta de la máquina que le permita saber si la
interacción es adecuada o no.
 A veces el sistema debe obedecer nuestras órdenes, y en otras ocasiones
nosotros debemos obedecer las suyas.
 Modelo de Donald Norman:
 Intenciones: ¿Qué quiere lograr el usuario?
 Ejecución: ¿Qué hace el usuario?
 Evaluación: el usuario compara los resultados obtenidos con lo que esperaba
obtener.
Modelo d Donald Norman
Modelo de Donald Norman
 De la gráfica del modelo de Norman se pueden obtener los siguientes

casos:
 Una brecha en la ejecución: se produce cuando el usuario no es capaz de
relacionar qué pretende lograr y cómo llevar a cabo la acción con las
opciones que le ofrece el sistema.
 Una brecha en la evaluación: se produce cuando el usuario no es capaz de
interpretar la respuesta del sistema tras una acción o cuando esta respuesta no
se corresponde con la que esperaba.
Experiencia de Usuario
 La interfaz persona-ordenador (UI) es una disciplina dedicada a estudiar

la relación interactiva entre las personas y la tecnología. El objetivo
principal es conseguir productos interactivos fáciles de usar, satisfactorios
y que resulten realmente útiles.
 La experiencia de usuario (UX) es una filosofía de diseño que tiene por
objetivo la creación de interfaces que resuelven necesidades concretas
de sus usuarios finales, consiguiendo así una mayor satisfacción de los
mismos, así como también una mejor experiencia de uso con el mínimo
esfuerzo.
UX VS UI
Diseño centrado en el Usuario
 Para obtener una experiencia de usuario plena y satisfactoria, hay que

seguir un procedimiento específico para alcanzar ese objetivo:
 El Diseño Centrado en el Usuario consiste en acumular información
acerca de la audiencia objetiva del producto.
 No es un proceso secuencial o lineal, sino que presenta ciclos en los que
iterativamente se prueba el diseño y se optimiza hasta alcanzar el nivel de
calidad requerido.
Diseño centrado en el Usuario: etapas
 Planificación/Investigación: investigación de la audiencia objetiva

(necesidades, motivaciones, características, hábitos, modelo mental,
actividades…).
 Diseño/Prototipado: Se toman decisiones de diseño partiendo de su
dimensión más general (arquitectura de información y diseño de
interacción) hasta su dimensión más específica (diseño gráfico en detalle y
micro interacciones).
 Evaluación: Aquellas decisiones de diseño y procesos críticos del producto
se ponen a prueba mediante métodos de evaluación que pueden
involucrar a usuarios.
 Implementación: Una vez el diseño ha alcanzado el nivel requerido de
calidad, se procede a su implementación o puesta en producción.
 Monitorización: Una vez lanzado el producto se estudia el uso que de él
hacen los usuarios, con el fin de identificar oportunidades de mejora.
 Durante este proceso se suelen utilizar los siguientes documentos:

 Wireframe: es una ilustración de la interfaz de un documento web que se
centra en la asignación del espacio y la priorización del contenido, así como
las funcionalidades disponibles y los comportamientos deseados.
 Mockup: es una composición gráfica completa que utiliza el Wireframe como
plantilla e introduce todos los elementos gráficos y visuales.
 Prototipo: es una representación con todos los detalles de la interfaz incluidas
las interacciones y nos sirve como modelo de comportamiento del sistema.
 Guía de estilos: es una colección de elementos prediseñados y reglas que los
diseñadores y desarrolladores web deben seguir para asegurarse de que todas
las partes del sitio web sean consistentes y cohesionadas.
Introducción
DISEÑO DE INTERFACES WEB

Introducción Al Diseño de Interfaces Web

Cargado por

Copyright:

Formatos disponibles

Introducción Al Diseño de Interfaces Web

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción Al Diseño de Interfaces Web

Cargado por

Copyright:

Formatos disponibles

Introducción

DISEÑO DE INTERFACES WEB

 Diariamente usamos dispositivos, aplicaciones y sitios web.

 Web con diseño pésimo: http://www.cantinachichilo.com.ar/

 La interfaz de usuario (UI) es lo que permite que la interacción entre

 De la gráfica del modelo de Norman se pueden obtener los siguientes

 La interfaz persona-ordenador (UI) es una disciplina dedicada a estudiar

 Para obtener una experiencia de usuario plena y satisfactoria, hay que

 Planificación/Investigación: investigación de la audiencia objetiva

 Durante este proceso se suelen utilizar los siguientes documentos:

También podría gustarte