USABILIDAD LUIS CARLOS ACEVES G.

Transcripción

1 USABILIDAD LUIS CARLOS ACEVES G. todas las páginas Peso Convencionalismos Tamaño vs resolución Manejar una estructura (retícula) Evitar scrolls Uso de metáforas Manejo de enlaces Utilizar/evitar deep-linking 1

2 página de inicio Lo que incluye cada página más. Debe responder qué hace el sitio/la compañía. Dar una impresión positiva Evitar pantallas en construcción No usar dropdown menus (combo boxes) Asegurar que se diferencia del resto de las páginas Mostrar las principales opciones Asegurar que sea accesible desde cualquier lugar página de inicio Limitar la cantidad de texto Limitar la longitud de la página Evitar que sea una splash-screen 2

3 enlaces Hacer evidente donde dar clic Uso de texto/tooltips en enlaces Buen manejo de labeling Consistencia entre el nombre del enlace y la página de destino Tomar en cuenta los sistemas de navegación que se definieron enlaces No repetir enlaces Manejo de colores en los enlaces Indicar cuáles son enlaces externos Si el enlace es a un archivo indicar formato y tamaño 3

4 navegación Indicarle al usuario dónde está localizado dentro de toda la estructura del sitio web No crear páginas que no tienen ningún sistema de navegación Tener un buen manejo de labeling en los sistemas de navegación Utilizar mapas del sitio navegación Tener diferentes sistemas de navegación Aplicar estrategias para navegar entre grandes volúmenes de contenido Anchura vs. profundidad Usar subsitios micrositios minisitios? Analizar el comportamiento del usuario al navegar 4

5 url Palabras juntas Significativo, tomar en cuenta que puede ser una metáfora Abreviaturas Usar guiones Lo más corto posible Minúsculas Proporcionar un acceso universal a la web independientemente de las limitantes personales o técnicas del usuario Tomar en cuenta las necesidades de los usuarios con alguna discapacidad. El W3C reconoce 4 tipos de discapacidad: Visual Auditiva Motora Cognitiva 5

6 alternate text ejemplo gráfico de símbolo chino: alt="site logo: xin, the Chinese character for heart". The Historical Present alt="the historical present: hypermodernism has a posse" menu superior sitio

7 alternativas a multimedia sincronizadas color 7

8 documentos legibles con otras tecnologías: CSS + XHTML mapas de imágenes dentro del cliente mapas de imágenes con alt text ejemplo mapa de imagen con ardilla de texto alternativo mapa de imagen de Estados Unidos mapa de imagen con alt text sitio

9 Div en lugar de Frame Diseños para 55 Hz < parpadeos <2 Hz ( ) ( ) 9

10 páginas de texto equivalentes y actualizadas ( ) ( ) formularios accesible utilizando atributos for y id <FORM> <TABLE> <TR> <TD><B>FIRST NAME: </B></TD> <TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"> </TD> </TR> <TR> <TD><B>LAST NAME: </B></TD> <TD><INPUT TYPE="TEXT" NAME="LASTNAME"> </TD> </TR> </TABLE> <P> <INPUT TYPE="SUBMIT" VALUE="SUBMIT"> </FORM> <FORM> <TABLE> <TR> <TD><B><LABEL FOR="first"> FIRST NAME:</LABEL> </B></TD> <TD><INPUT TYPE="TEXT" NAME="FIRSTNAME" ID="first" ></TD> </TR> <TR> <TD><B><LABEL FOR="last"> LAST NAME:</LABEL> </B></TD> <TD><INPUT TYPE="TEXT" NAME="LASTNAME" ID="last" ></TD> </TR> </TABLE> <P> <INPUT TYPE="SUBMIT" VALUE="SUBMIT"> </FORM> 10

11 enlaces significativos ( ollo_humano ) Vs. ( ) Otros Nunca utilizar Dar click aquí Usar hojas de estilo CSS y evitar frames Proveer contenido alterno al texto (ejemplo mp3) indicando cómo acceder a él Evitar texto dentro de archivos jpg, applets o plugins Proveer funcionalidad para aumentar el tamaño del font 11

12 Casos Target ( target.html ) Juegos Olímpicos Syndney 2000 ( ) Microsoft IE 7.0 ( ) Certificar el sitio revisando las guías y herramientas que provee la WAI (Web Accessibility Initiative) Nivel "A" de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 Nivel AA" de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 y 2 Nivel AAA" de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1, 2, y 3 Fuente: y 12