Dise単o de Interfaces de Usuario (Accesibilidad y Usabilidad) M.C. Juan Carlos Olivares Rojas
Leyes del diseño de interfaces •
Una computadora no debe causar daño al trabajo del usuario, o por inacción, permitir que el trabajo del usuario reciba algún daño.
•
Una computadora no debe hacer perder tiempo al usuario u obligarlo a trabajar más de lo que es estrictamente necesario.
Leyes del diseño de interfaces • Los usuarios establecen el límite de una interacción. • Buen diseño de interfaces: (Eliminar) • La opción que va a realizar no puede desecharse. Si desea continuar escriba la décima palabra de este cuadro de diálogo.
Leyes del diseño de interfaces • La ergonomía es una cuestión importante a considerar. • Expulsar discos a través de un comando es mejor que utilizar un botón. • La mejor manera de hacer distinguir su interfaz, es hacer que está funcione.
Optimización páginas dinámicas • Escribir todos los mensajes de una vez. <% Response.Write “Hola, ” %> <% Response.Write “mundo” %> <% Response.Write “Hola, ” Response.Write “mundo”
%> • No imprimir valores constantes
Reducir el número de páginas • Entre menos páginas se tengan es más fácil encontrar errores. • Hacer la validaciones de formularios en la misma página. • Comprobar que no existan campos vacíos
Utilización de variables • Utilizar declaraciones de variables forzosamente (Option Explicit) o bien tener un esquema de control de variables. • ¿Cuál es el resultado de la siguiente expresión: <% alpha= 2 beta = 2 kappa = alfa + beta %>
Utilización de variables • Utilice un sistema para asignar nombres a las variables como el sistema húngaro: bte = byte, str= string. Por ejemplo, sintCuenta representa la variable Cuenta del tipo entero con signo. • Evitar que las variables sobrevivan en múltiples páginas (evitar el uso de variables globales, de sesión, aplicación, etc.)
Conexión a base de datos • Utilice las conexiones el menor tiempo posible (cerrar conexiones innecesarias) • De ser posible, almacenados.
utilizar
• Paginar los Recordsets.
procedimientos
Diseño Web • La Web no está hecha de papel. • Los navegadores permiten el cambio de opciones de accesibilidad. • Las páginas Web tienen capas. La Web se basa en el principio Single Input - Multiple Output. Se escribe una vez, en papel, pantalla, PDF, screenreader, etc.
Diseño Web • Diseño Web conforme a los estándares (Design with Web standards) • Diseño Web sin barreras (“Accesibility”) • Flexibilidad (Bullet Proof Web Design) • Optimización para motores de búsqueda (Search Engine Optimization)
Diseño Web • Las primeras páginas fueron sencillas posteriormente apareció la etiqueta font y table. • Las hojas de estilo en cascada CSS permiten separar contenido y formato. • Las páginas Web están hechas de cuadros rectangulares.
Diseño Web • HTML es el albañil y CSS es el decorador. • HTML no se programa, sólo se escribe. • HTML no describe como se muestra una página, sino solamente la estructura.
XHTML • <!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”> • <html xmlns=http://www.w3.org/1999/xhtml lang=“es” xml:lang=“”es”>
Dividir la página en 4 secciones • La etiqueta div ayuda a seccionar una página. <body id=“inicio”> <div id=“envoltura”> <div id=“encabezado”> </div> <div id=“contenido”> </div> </div> </body>
Diseño Web • <a href=“url” title=“descripcion”> Texto </a> • Las tablas no están prohibidas. Se deben usar para mostrar información tabular. body { color: black; background-color: #8c8c8c; font-family: Verdana; font-size: small; }
Hojas de estilo • /*Eliminar subrayado*/ • a {text-decoration: none;} • Modelo de cajas: content, width, padding (distancia interior), border, margin. • Se pueden utilizar varias columnas con CSS.
Dise帽o de varias columnas #navegaci贸n{ position: absolute; top:0; left:0; width: 30%; } #areatexto{ width: 70%; margin-left: 30%; }
Dise単o de varias columnas #areatexto{ float: right; width: 520px; background-color: #eee; } #navegacion{ float: left; width: 180px; background-color: #d9d9d9; }
Usabilidad • La mejor ayuda es el sentido común. • Si alguna cosa es breve es más fácil que se use. • Si algo es complicado de simplemente no lo utilizamos tanto.
utilizar,
¡No me hagas pensar! • Nada importante debe estar a dos clicks de importancia. • Todos estamos unidos a 6 clicks de distancia • Se debe hablar el lenguaje de los usuarios
¡No me hagas pensar! • Elimine la mitad de las palabras de un texto, después elimine la otra mitad, ¿Se entiende el texto? • Rótulos: trabajos, ofertas de trabajos, Ramade-trab. • Búsqueda de libros, en lugar de autor, título, editorial
¡No me hagas pensar! • Todo no se puede hacer tan obvio. • En Internet la competencia es cuestión de un solo clic aquí o allá, de tal manera que si frusta a los usuarios estos se irán.
¿Cómo usamos realmente la Web? • No leemos las páginas, las hojeamos. – Normalmente tenemos prisa – Sabemos que no hay que leerlo todo
• Lo que los diseñadores crean es diferente a lo que los usuarios ven. • No tomamos decisiones óptimas.
¿Por qué no tomamos la mejor opción? • Normalmente tenemos prisa. • Las consecuencias por el error cometido no son tan importantes. • El sopesar diversas opciones no garantiza la mejora de nuestras oportunidades. • Adivinar es más divertido.
Las convenciones favorecen la Web • Son muy útiles. • Los diseñadores son muy tercos a utilizarlas demasiado. • Si no existen convenciones, se deben realizar innovaciones que sean fáciles de usar.
Eliminar ruido de las páginas • Negocio-abigarrado. Existen muchas cosas que distraen al cliente. • Eliminar el ruido de fondo. • El ruido visual no es tan sencillo de determinar.
El arte de no escribir en la Web • Omisión de palabras innecesarias • A los dibujos se les puede omitir líneas innecesarias y siguen transmitiendo el mismo mensaje. • Reducir palabras ayuda a: eliminar ruido de la página, hace el sitio más práctico y en un solo vistazo el usuario puede ver más.
El arte de no escribir en la Web • El discurso desaparecer.
innecesario
tiene
que
• Hay que eliminar las instrucciones. • Un usuario no utilizará un sitio Web sino se siente cómodo al utilizarlo
Diseño de la navegación • Se debe tener un sitio bien señalizado para que los usuarios puedan navegar bien. • Se recomienda tener una especie de asistente en algunos casos para encontrar cosas que no se ven fácilmente. • Generalmente los usuarios deciden hechar un vistazo. Se debe atraerlos.
Diseño de la navegación • Se debe dar sentido de dirección a los usuarios (se pueden desplazar por donde quieren) • Se debe ubicar a los usuarios en donde se encuentran actualmente. • Tenga atajos cortos para los usuarios.
Propósitos de navegación pasados por altos • Nos ofrecen perdamos.
un
lugar
donde
no
nos
• Nos dicen lo que hay en cada lugar. • Nos enseña a usar el sitio. • Nos permite confiar en las personas que han creado el sitio Web.
Si la vida da limones • No averiguamos el funcionamiento de las cosas. No las arreglamos. • En los motores de búsqueda personas introducen URLs.
muchas
• Si damos con algo que funciona seguimos con ello.
Diseño de rótulos 101 • Creación de una jerarquía visual clara • Aprovechamiento y uso de las convenciones. • Lo • Dejar bien claro sobre lo que se puede hacer clic. • Minimzar el ruido.
Creación de una jerarquía visual clara • Lo más importante ha de ser lo más prominente. • Lo que está relacionado también lo está visualmente.
lógicamente,
• Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque.
Las convenciones favorecen la Web • Son muy útiles. • Los diseñadores abusan mucho de ellas. • Si no existen convenciones se debe innovar con cosas sencillas de utilizar
Eliminar ruido de las páginas Web • Negocio-abigarrado. Existen muchas cosas que distraen a los usuarios. • Ruido de fondo. Se deben eliminar todas aquellas cosas que no tengan que ver con el propósito de la página. • Si a las imágenes se les eliminan algunas líneas, siguen transmitiendo el mismo mensaje.
El arte de no escribir en la Web • Omisión de palabras innecesarias. • Eliminé la mitad de las palabras y luego vuelva a eliminar la otra mitad. • Al reducir palabras se obtienen los siguientes beneficios: reduce el nivel de ruido de la página, se hace más práctica y los usuarios ven más contenido con menos espacio.
El arte de no escribir en la Web • El discurso desaparecer.
innecesario
tiene
que
• Hay que eliminar instrucciones. • Un usuario no utilizará un sitio Web sino se siente cómodo al utilizarlo.
Diseño de la navegación • Se debe dar sentido de dirección a los usuarios (que se puedan desplazar donde quieran). • Se debe dar sentido de ubicación para que los usuarios no se pierdan. • Se deben tener atajos para acceder a los recursos.
Diseño de navegación • Se debe mantener una navegación coherente en todas las páginas. Las excepciones: página principal y formularios. • Se debe mantener un botón inicio (similar a la opción deshacer). • Se debe tener un método para buscar.
Diseño de navegación • No se deben tener más de cuatro niveles de profundidad. • La navegación debe ser como el sistema de carreteras. • Todos los caminos tienen nombre y están ubicados en un lugar adecuado.
Diseño de navegación • El nombre debe ser prominente y hacer referencia a lo que se hizo clic. • Las pestañas son buena navegación (amazon).
opción
de
• Se debe hacer énfasis en el diseño de la página principal.
Diseño de la página principal • • • • • • • •
Identidad y misión del sitio. Jerarquía del sitio. Búsqueda. Sugerencias. Contenido temporal Transacciones Accesos directos Registro
Diferentes tipos de usuario • Cada usuario tiene una visión diferente de los sitios Web: Presidente ejecutivo, desarrollador, diseñador, desarrollo comercial. • Cualquier diseño debe probarse antes de utilizarse. • Es mejor realizar pruebas frecuentes que pruebas hasta el final.
Características de las pruebas de usabilidad • Demasiado usuarios trae conflictos, pocos usuarios no dejan de ver todos los detalles. Lo ideal es utilizar 5 usuarios. • Las pruebas de usabilidad se deben hacer frente a los expertos. • Se debe hacer un plan de pruebas que permita obtener todos los detalles del sitio.
Plan de pruebas de usabilidad • Se debe hacer un análisis de los resultados obtenidos. • Algunos ejemplos: los usuarios no saben lo que quieren, las palabras que buscan no están, las cosas están más adelante. • Los sitios deben tener claridad humana.
Accesibilidad • Las personas mucho dinero.
con
accesibilidad
tienen
• Todo el mundo tiene el derecho de acceso a la información. • El 65% de la población presenta algún tipo de discapacidad.
Accesibilidad • Añada texto alternativo a todas las imágenes • Hacer que todo contenido sea accesible desde teclado. • No utilizar Javascript sin una buena razón.
Accesibilidad • No se deben pedir muchos datos. • No añadir “adornos” a los sitios. • Se debe hacer un análisis de cómo las personas compran.
Referencias • J. Raskin, “Diseño de sistemas interactivos”, Addison-Wesley, México, 2001, ISBN: 97026-0038-3, pp. 272. • D. Ferguson, “ASP sin errores”, McGrawHill, España, 2001, ISBN: 84-481-3182-7. • “CSS, un juego de niños”, PC Cuadernos, España, ISBN: 2-915605-62-9.
Referenicas • S. Krug, “No me hagas pensar”, segunda edición, Pearson Prentice Hall, España, 2006, ISBN: 84-8322-286-8, pp. 210.
多Preguntas?