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, utilizar procedimientos almacenados. Paginar los Recordsets.
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/xhtml1- transitional.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 utilizar, simplemente no lo utilizamos tanto.
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 Son muy útiles. Web 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 innecesario tiene que desaparecer. 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 un lugar donde no nos perdamos. 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 muchas personas introducen URLs. 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 lógicamente, también lo está visualmente. Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque.
Las convenciones favorecen la Son muy útiles. Web 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 innecesario tiene que desaparecer. 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 opción de navegación (amazon). 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 con accesibilidad tienen mucho dinero. 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: 970-26-0038-3, pp. 272. D. Ferguson, ASP sin errores, McGraw- Hill, 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?