diseño de interfaces de usuario (accesibilidad y usabilidad)
TRANSCRIPT
Diseño de Interfaces deUsuario (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, permitirque el trabajo del usuario reciba algúndaño.
• Una computadora no debe hacer perdertiempo al usuario u obligarlo a trabajar másde lo que es estrictamente necesario.
Leyes del diseño de interfaces
• Los usuarios establecen el límite de unainteracción.
• Buen diseño de interfaces: (Eliminar)
• La opción que va a realizar no puededesecharse. Si desea continuar escriba ladécima palabra de este cuadro de diálogo.
Leyes del diseño de interfaces
• La ergonomía es una cuestión importante aconsiderar.
• Expulsar discos a través de un comando esmejor que utilizar un botón.
• La mejor manera de hacer distinguir suinterfaz, 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ácilencontrar errores.
• Hacer la validaciones de formularios en lamisma 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 decontrol de variables.
• ¿Cuál es el resultado de la siguiente expresión:
<% alpha= 2beta = 2kappa = alfa + beta%>
Utilización de variables
• Utilice un sistema para asignar nombres alas variables como el sistema húngaro: bte =byte, str= string. Por ejemplo, sintCuentarepresenta la variable Cuenta del tipo enterocon signo.
• Evitar que las variables sobrevivan enmúltiples páginas (evitar el uso de variablesglobales, de sesión, aplicación, etc.)
Conexión a base de datos
• Utilice las conexiones el menor tiempoposible (cerrar conexiones innecesarias)
• De ser posible, utilizar procedimientosalmacenados.
• Paginar los Recordsets.
Diseño Web
• La Web no está hecha de papel.
• Los navegadores permiten el cambio deopciones de accesibilidad.
• Las páginas Web tienen capas. La Web sebasa en el principio Single Input - MultipleOutput. 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 sencillasposteriormente apareció la etiqueta font ytable.
• Las hojas de estilo en cascada CSSpermiten separar contenido y formato.
• Las páginas Web están hechas de cuadrosrectangulares.
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 unapágina, sino solamente la estructura.
XHTML
• <!DOCTYPE html PUBLIC “-//W3C/DTDXHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
• <html xmlns=http://www.w3.org/1999/xhtmllang=“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 debenusar 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 seuse.
• Si algo es complicado de utilizar,simplemente no lo utilizamos tanto.
¡No me hagas pensar!
• Nada importante debe estar a dos clicks deimportancia.
• 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 entiendeel texto?
• Rótulos: trabajos, ofertas de trabajos, Rama-de-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 deun solo clic aquí o allá, de tal manera que sifrusta a los usuarios estos se irán.
¿Cómo usamos realmente laWeb?
• 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 alo que los usuarios ven.
• No tomamos decisiones óptimas.
¿Por qué no tomamos la mejoropción?
• Normalmente tenemos prisa.
• Las consecuencias por el error cometido noson tan importantes.
• El sopesar diversas opciones no garantiza lamejora de nuestras oportunidades.
• Adivinar es más divertido.
Las convenciones favorecen laWeb
• Son muy útiles.
• Los diseñadores son muy tercos a utilizarlasdemasiado.
• Si no existen convenciones, se debenrealizar innovaciones que sean fáciles deusar.
Eliminar ruido de las páginas
• Negocio-abigarrado. Existen muchas cosasque distraen al cliente.
• Eliminar el ruido de fondo.
• El ruido visual no es tan sencillo dedeterminar.
El arte de no escribir en la Web
• Omisión de palabras innecesarias
• A los dibujos se les puede omitir líneasinnecesarias y siguen transmitiendo elmismo mensaje.
• Reducir palabras ayuda a: eliminar ruido dela página, hace el sitio más práctico y en unsolo vistazo el usuario puede ver más.
El arte de no escribir en la Web
• El discurso innecesario tiene quedesaparecer.
• Hay que eliminar las instrucciones.
• Un usuario no utilizará un sitio Web sino sesiente cómodo al utilizarlo
Diseño de la navegación
• Se debe tener un sitio bien señalizado paraque los usuarios puedan navegar bien.
• Se recomienda tener una especie deasistente en algunos casos para encontrarcosas que no se ven fácilmente.
• Generalmente los usuarios deciden hecharun vistazo. Se debe atraerlos.
Diseño de la navegación
• Se debe dar sentido de dirección a losusuarios (se pueden desplazar por dondequieren)
• Se debe ubicar a los usuarios en donde seencuentran actualmente.
• Tenga atajos cortos para los usuarios.
Propósitos de navegaciónpasados por altos
• Nos ofrecen un lugar donde no nosperdamos.
• Nos dicen lo que hay en cada lugar.
• Nos enseña a usar el sitio.
• Nos permite confiar en las personas quehan creado el sitio Web.
Si la vida da limones
• No averiguamos el funcionamiento de lascosas. No las arreglamos.
• En los motores de búsqueda muchaspersonas introducen URLs.
• Si damos con algo que funciona seguimoscon 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 visualclara
• Lo más importante ha de ser lo másprominente.
• Lo que está relacionado lógicamente,también lo está visualmente.
• Todo se engloba visualmente bien para quequeden delimitadas las partes quepertenecen a cada bloque.
Las convenciones favorecen laWeb
• Son muy útiles.
• Los diseñadores abusan mucho de ellas.
• Si no existen convenciones se debe innovarcon 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 cosasque no tengan que ver con el propósito de la página.
• Si a las imágenes se les eliminan algunas líneas, siguentransmitiendo 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 laotra mitad.
• Al reducir palabras se obtienen los siguientes beneficios:reduce el nivel de ruido de la página, se hace más prácticay los usuarios ven más contenido con menos espacio.
El arte de no escribir en la Web
• El discurso innecesario tiene quedesaparecer.
• Hay que eliminar instrucciones.
• Un usuario no utilizará un sitio Web sino sesiente cómodo al utilizarlo.
Diseño de la navegación
• Se debe dar sentido de dirección a losusuarios (que se puedan desplazar dondequieran).
• Se debe dar sentido de ubicación para quelos usuarios no se pierdan.
• Se deben tener atajos para acceder a losrecursos.
Diseño de navegación
• Se debe mantener una navegacióncoherente en todas las páginas. Lasexcepciones: página principal y formularios.
• Se debe mantener un botón inicio (similar ala 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 deprofundidad.
• La navegación debe ser como el sistema decarreteras.
• Todos los caminos tienen nombre y estánubicados en un lugar adecuado.
Diseño de navegación
• El nombre debe ser prominente y hacerreferencia a lo que se hizo clic.
• Las pestañas son buena opción denavegación (amazon).
• Se debe hacer énfasis en el diseño de lapá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, desarrollocomercial.
• Cualquier diseño debe probarse antes de utilizarse.
• Es mejor realizar pruebas frecuentes que pruebas hasta elfinal.
Características de las pruebas deusabilidad
• Demasiado usuarios trae conflictos, pocosusuarios no dejan de ver todos los detalles.Lo ideal es utilizar 5 usuarios.
• Las pruebas de usabilidad se deben hacerfrente a los expertos.
• Se debe hacer un plan de pruebas quepermita obtener todos los detalles del sitio.
Plan de pruebas de usabilidad
• Se debe hacer un análisis de los resultadosobtenidos.
• Algunos ejemplos: los usuarios no saben loque quieren, las palabras que buscan noestán, las cosas están más adelante.
• Los sitios deben tener claridad humana.
Accesibilidad
• Las personas con accesibilidad tienenmucho dinero.
• Todo el mundo tiene el derecho de acceso ala información.
• El 65% de la población presenta algún tipode discapacidad.
Accesibilidad
• Añada texto alternativo a todas las imágenes
• Hacer que todo contenido sea accesibledesde 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 laspersonas 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”, segundaedición, Pearson Prentice Hall, España,2006, ISBN: 84-8322-286-8, pp. 210.
¿Preguntas?