Unidad Académica Caleta Olivia

Carrera: Tecnicatura Universitaria en Desarrollo Web

Ing. Natalia Serón

nseron@uaco.unpa.edu.ar
¿Qué es la Usabilidad?
 Capacidad de uso
 Sencillez de uso de un objeto para realizar un objetivo
 Elegancia y claridad en la interacción de un usuario con una
aplicación

La usabilidad es como la salud…

Se percibe sólo cuando falta…

Diseño de Interfaces de Usuario

Realmente hace falta la Usabilidad para hacer
una Página Web?
 SÍ!... Sea la página web un portal o una página personal, no
hay que olvidar que la gente que entra en el sitio es por que
básicamente busca algo. Hacerlo sencillo es decisión del
diseñador, lo que es seguro es que entre todos se puede
hacer de Internet un lugar mejor donde la gente no se
sienta perdida o extraviada o sencillamente defraudada

“Usabilidad en la Web”
Por César Martín
http://www.desarrolloweb.com

Diseño de Interfaces de Usuario

 Reglas de Oro de la Usabilidad Web
1. En Internet el usuario es el que manda.
2. En Internet la calidad se basa en la rapidez y la fiabilidad.
3. Seguridad.
4. La confianza es algo que cuesta mucho ganar y se pierde con un
mal enlace.
5. Si quiere hacer una pagina decente, simplificar, reducir y
optimizar.
6. Poner las conclusiones al principio.
7. No hacer perder el tiempo a la gente con cosas que no necesitan.
8. Buenos contenidos.

“Usabilidad en la Web”
Por César Martín
http://www.desarrolloweb.com

Diseño de Interfaces de Usuario

Principios del Diseño Web
1. Anticipación, el sitio web debe anticiparse a las necesidades del
usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio
web.
3. Los colores han de utilizarse con precaución.
4. Consistencia, las aplicaciones deben ser consistentes con las
expectativas de los usuarios.
5. Eficiencia del usuario, los sitios web se deben centrar en la
productividad del usuario, no en la del propio sitio web.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones
realizadas.
“Usabilidad en la Web”
Por Eduardo Manchón
http://www.desarrolloweb.com

Diseño de Interfaces de Usuario

Principios del Diseño Web
7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón
esta en función de la distancia y el tamaño del objetivo. A menor
distancia y mayor tamaño más facilidad para usar un mecanismo de
interacción.
8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de
espera del usuario.
9. Aprendizaje, los sitios web deben requerir un mínimo proceso de
aprendizaje y deben poder ser utilizados desde el primer momento.
10.El uso adecuado de metáforas facilita el aprendizaje de un sitio web,
pero un uso inadecuado de estas puede dificultar enormemente el
aprendizaje.

“Usabilidad en la Web”
Por Eduardo Manchón
http://www.desarrolloweb.com

Diseño de Interfaces de Usuario

Principios del Diseño Web
10.La protección del trabajo de los usuarios es prioritario, se debe
asegurar que los usuarios nunca pierden su trabajo como consecuencia
de un error.
11. Legibilidad, el color de los textos debe contrastar con el del fondo, y el
tamaño de fuente debe ser suficientemente grande.
12.Seguimiento de las acciones del usuario. Conociendo y almacenando
información sobre su comportamiento previo se ha de permitir al
usuario realizar operaciones frecuentes de manera más rápida.
13.Interfaz visible. Se deben evitar elementos invisibles de navegación
que han de ser inferidos por los usuarios.

“Usabilidad en la Web”
Por Eduardo Manchón
http://www.desarrolloweb.com

Diseño de Interfaces de Usuario

Usabilidad Web: Objetivos
Legibilidad  Brindar información fácilmente comprensible.
 Autenticidad y veracidad de la información que se
Expresividad publica.
 La escritura y la expresión debe ser correcta.

 El usuario debe encontrar fácilmente los objetivos

Localización del sitio, la información, los servicios.
 Regla de los 3 clicks.

 Se deben habilitar diferentes mecanismos de

Navegabilidad exploración y se deben flexibilizar e incentivar los
movimientos a través del sitio.

Diseño de Interfaces de Usuario

Usabilidad Web: Objetivos
Visibilidad  Diseño atractivo, pero simple.
 Flexibilizar el diálogo entre el usuario y el sitio,
Interacción
haciéndolo adaptable según el perfil del lector.
 Estructura del sitio pensada y escalable.
Progresividad
 Informar sobre la antigüedad de la información
 Universalidad, seguridad, accesibilidad.
Características
 Indexación, estándares de intercambio, según
de Internet
aplicativos de Internet.
Presencia en  Si se escribe para la Web, es porque se quiere
Internet ser encontrado.

Diseño de Interfaces de Usuario

Normas de Usabilidad Web
 Normas a nivel de sitio: donde aquí, se analizarán aquellas
normas específicas tanto a la estructura del sitio, a la navegación
como a los hipervínculos.
 Organizar el contenido del sitio, previo a la carga del mismo.
Estructura  Definir la estructura elemental del sitio.

 Estructura usable, extensible y aparente.

 Definir diferentes tipos de navegación.

 Feedback navegacional.
Navegación
 Tratar los problemas inherentes a la navegación.

 Analizar cuestiones específicas.

 Destinar una ubicación independiente.

 Distinguir semánticamente los hipervínculos

 Categorizar los hipervínculos

Hipervínculos
 Proveer información complementaria

 Considerar aspectos de visualización

 Proveer consistencia, homogeneidad

Diseño de Interfaces de Usuario

Normas a Nivel de Sitio:
Ejemplos de Navegación
•Se cargó la tarjeta?
•Debo ordenar de nuevo lo
anterior?
•Me toma lo anterior?...

Diseño de Interfaces de Usuario

Normas de Usabilidad Web
 Normas a nivel de página: aquí se van a tratar las reglas de diseño
para las páginas que conformarán el sitio, agrupando las normas
para el diseño general de las mismas, específicamente en la página
inicial y en la de formularios.
 Clasificar el contenido y sectorizar
 Diagramación general

 Especificar un área común. Marco, logo

Diseño  Homogeneidad y consistencia

General  Recursos visuales para denotar significado

 Evitar sobrecarga visual

 Diseño adecuado y diseño universal

 Proveer signos de adaptación

 Información general del sitio y de su estado

 Definir el aspecto y diagramación inicial
Página Inicial
 La registración

 Reforzar el marco común a todas las páginas

Diseño de Interfaces de Usuario

Normas de Usabilidad Web

Definiráreas prioritarias
Página Inicial  Permitir el acceso a la página inicial

 Proveer servicios adicionales

 Proveer un diseño flexible de formulario

 Proveer funciones sintácticas

 Brindar modos de activación de los casilleros

Formularios
 Distinción visual, validación y feedback

 Diseñar mensajes de error eficientes

 Diseño de cada componente del formulario

Diseño de Interfaces de Usuario

Normas a Nivel de Página: Ejemplos
de Diseño General
Diseño homogéneo

Diseño adecuado

Diseño de Interfaces de Usuario

Normas de Usabilidad Web
 Normas a nivel de contenido: se explicarán las normas que deben
ser aplicadas a nivel de la información que se va a transmitir,
teniendo en cuenta características del lenguaje, formas de diálogo,
de organización del texto y demás cuestiones.
 Organizar y visualizar el contenido acorde a su nivel de
importancia
 Proveer el contenido apropiado

Contenido  Aprovechar diferentes recursos visuales para expresar el

contenido
 Proveer una visualización estándar adicional

 Considerar el diseño particular de los objetos de Interacción

 Proveer un lenguaje acorde al objetivo y a la información a

transmitir
Lenguaje  Proveer funciones sintácticas

 Utilizar expresiones correctas

 Manejar aspectos de visualización

Diseño de Interfaces de Usuario

Los mayores fallos en la Web
 Problemas de legibilidad
 Fuentes pequeñas
 Bajo contraste

 Enlaces no estándar
 No descriptivos
 No funcionan de forma esperable

 Flash
 Evitar animaciones gratuitas

 Textos largos y tediosos

Diseño de Interfaces de Usuario

Los mayores fallos en la Web
 Búsquedas fallidas
 Incompatibilidad de exploradores web
 Formularios largos y engorrosos
 Falta de información de contacto
 Pop-ups
 Elementos no útiles
 Iconos no descriptivos
 Falta de control de la web

Diseño de Interfaces de Usuario

¿Por qué un sitio no es Usable?
 Los diseñadores y desarrolladores de un sitio se centran en
la implementación técnica en lugar de centrarse en el
usuario.
 Los diseñadores de sitios web piensan de forma distinta a
como lo hace el usuario debido a sus características
técnicas.
 Los diseñadores web siempre proponen el uso de los
últimos avances y tecnologías y esto no siempre es
beneficioso para el usuario.

Diseño de Interfaces de Usuario

¿Por qué un sitio no es Usable?
 Entonces, es necesario educar al diseñador sobre la
necesidad de una buena usabilidad.
 Como la usabilidad se basa en el DCU, lo que se necesita
saber del usuario mínimamente es lo siguiente:
 Funcionalidad mínima requerida: ¿Qué es lo mínimo que
necesita saber el usuario para trabajar con el sitio web?
 Limitaciones del usuario: Limitaciones de ancho de banda,
tipo de navegador, pluggins, plataformas.

Diseño de Interfaces de Usuario

¿Por qué un sitio no es Usable?
 Preferencias del usuario.
 Hábitos del usuario.
 Sistemas existentes: Con los que interactúan habitualmente
los usuarios de teléfonos, formularios, sistemas mecánicos,
paneles de control.
 Lo que no le gusta al usuario: Respuesta lenta del servidor,
excesivo tiempo de descarga…
 Datos personales: Edad, nivel de conocimientos de internet,
nivel de estudios, sitios que más usan, donde viven, etc.

Diseño de Interfaces de Usuario