75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

Sistemas y Tecnologias de la Informacion; Desarrollo de Sistemas; Ingenieria de Software (Ingenieria Web)

Anuncios Google Diseo Diseo Flash Hacer Paginas De Diseo

Home
Sobre Mi
Contacto
Suscribirse (RSS)

ISL Light Soporte Remoto

Asiste a clientes de forma remota. Rpido y fcil. 15 das gratuito.
ISLOnline.com
0 Delicious Share 6 Tweet 5
Delicious

11may08

Se encuentra disponible en la Internet el informe titulado Usability Guidelines: Web Design for Users With Disabilities
una publicacion del Grupo Nielsen Norman este material es un recurso til para difundir:

No abandone las reglas del buen diseo que ya conoce

(1). Siga las reglas bsicas de un buen diseo (diseo centrado en el usuario, escribir concisamente evitando el
lenguaje comercial superfluo, ofertar menos opciones, incluyendo slo las ms importantes no incluir grficos y
sonidos slo por contar con ellos)

Grficos y multimedia

(2). Reducir al mnimo el uso de imgenes

(3). Dar a todos los grficos (incluso a los banners publicitarios) nombres que sean comprensibles y que transmitan
de verdad lo que el grfico es y hace.
(4). Nunca difuminar las imgenes para indicar no disponibilidad
(5). Cuando los grficos contengan informacin til, tambin proporcione la informacin en texto.
(6). D a los usuarios maneras y alternativas de obtener la informacin contenida en cualquiera de los grficos que
se encuentren.
(7). No utilice una imagen en miniatura de la pgina de su sitio para utilizarla como grfico (o botn) en otra pgina
(8). Al hacer uso de grficos, elija siempre imgenes claras y ntidas.
(9). Facilite a los usuarios la posibilidad de saltarse cualquier elemento multimedia, aplicacin Java o Flash.
(10). No cree automticamente una versin slo-texto de su sitio.

Pops-ups, rollovers, nuevas ventanas y mens en cascada

1 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

(11). Evite el uso de ventanas emergentes.

(12). En el caso de hacer uso de cuadros de dilogo en pop-ups, asegrese de que la accin por defecto es la ms
perdonable.
(13). Evite abrir nuevas ventanas del navegador.
(14). Si abre nuevas ventanas del navegador, siempre proporcione una forma sencilla de volver a la pgina principal
del sitio principal.
(15). No confe en los rollover de texto (tooltip) para transmitir informacin.
(16). Evite utilizar mens en cascada (mens que se despliegan)

Enlaces y botones

(17). Limite el nmero de enlaces en una pgina

(18). Evite pequeos botones y enlaces con texto en minscula
(19). Deje espacio entre los enlaces y botones
(20). Evite el uso de imgenes como el nico mtodo de enlazar a otra pgina.
(21). Asegrese de que los comandos importantes aparecen con sus propios vnculos exclusivos.
(22). Subraye todos los enlaces
(23). Crear vnculos dentro del texto cuando tenga sentido. Utilice los botones adicionales slo cuando sea
necesario.

Organizacin de las pginas

(24). Confirmar al inicio de la carga de la pgina principal el nombre de la compaa.

(25). Confirmar al inicio de la carga de una pgina en qu pgina se est.
(26). No asociar la palabra pgina principal o home con el logotipo de su empresa si planea volver a utilizar el
mismo grfico en todas las pginas.
(27). Reducir la necesidad de desplazarse con scroll.
(28). Cuando los usuarios deban hacer una eleccin, ponga todas las posibilidades en la misma zona.
(29). Cuando los usuarios deben hacer una eleccin, advirtales de la eleccin mediante, por ejemplo, un texto del
tipo Seleccin de pedido, e infrmeles de la cantidad de opciones que tienen.
(30). Haga un diseo de pginas consistente
(31). Considere la posibilidad de utilizar un enlace Saltar Enlaces para que los usuarios puedan saltar los enlaces
o elementos de navegacin.
(32). Elija una direccin Web de su sitio simple e informativa, y mantenga esa URL en el campo de la direccin de
la pgina despus de la carga.

Pginas

(33). Evite las pginas portada previas a la pgina de inicio de un sitio, haga que la primera pgina que la gente
vea sea la pgina que mejor describe la compaa y el sitio.
(34). Incluya tan slo los pasos y las pginas necesarias

Campos y formularios

(35). Limite la cantidad de informacin que el formulario requiere; recoja slo el mnimo necesario.
(36). Ponga las etiquetas de texto de los campos muy cerca de los campos que les corresponden.
(37). No indique los errores del formulario simplemente destacando un texto en rojo o amarillo.
(38). No confe slo en el asterisco para indicar que un campo es necesario.
(39). Asegrese de que el orden de tabulacin es lgico.
(40). Haga coincidir el orden de tabulacin con la disposicin visual de los elementos cuando sea posible.
(41). Apile los campos en una columna vertical.
(42). Ofrezca campos de entrada estndar para los nmeros de telfono.
(43). En aquellas pginas que tenga un formulario con un nico campo de entrada o seleccin, poner el botn lo
ms cerca posible del campo.

2 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

(44). En los formularios, ponga el botn submit lo ms cerca posible del ltimo campo.
(45). Ponga cualquier instruccin relativa a un campo en particular antes del campo y no despus.
(46). Considere cuidadosamente cunto tiempo se pone de tope para hacer una accin como por ejemplo rellenar un
formulario.

Textos

(47). Seleccione colores de texto con buen contraste.

(48). No use un tamao de fuente muy pequeo para el texto de la pgina.
(49). No use texto pequeo o sutil (por ejemplo un gris rebajado) para los encabezados y categoras.
(50). Cree siempre un buen contraste entre el color del texto y el color de fondo de la pgina.
(51). No se base en una imagen de fondo para crear el contraste con el texto.
(52). Pruebe los colores y fuentes de su sitio con un magnificador de pantalla.
(53). Asegrese de que es posible magnificar su sitio.
(54). Escriba de forma concisa y elimine el texto superfluo.
(55). Si el nombre de la compaa o el texto en general presenta abreviaturas y acrnimos, dgale al lector de
pantalla como pronunciarlo mediante las etiquetas abbr y acronym.
(56). Replantese la forma en la que usa los parntesis y los asteriscos.

Bsquedas

(57). Ofrezca un motor de bsqueda que perdone los errores de ortografa.

(58). No base nicamente la capacidad de bsqueda de un sitio en la interfaz de navegacin.
(59). Coloque la caja de bsqueda donde los usuarios la esperan encontrar, no en una zona inesperada.
(60). Describa claramente los resultados de la bsqueda.
(61). Avise a los usuarios cuando no han introducido nada en la caja de bsqueda.
(62). No presente el ranking de relevancia de los resultados de la bsqueda en una tabla.

Comercio electrnico

(63). Describa minuciosamente las imgenes de los productos que el sitio vende como si no hubiera imgenes.
(64). Ayude a los usuarios a seguir comprando despus de haber aadido algo al carrito, dndoles una forma de
llegar de nuevo a donde estaban.
(65). Coloque los botones de aadir a la cesta de compra o realizar pedido cerca de los elementos a comprar.
(66). Tenga en cuenta a los clientes internacionales seleccionando cuidadosamente los trminos que utiliza.

Tablas y frames

(67). Evite el uso de tablas para maquetar un sitio.

(68). Evite el uso de tablas muy grandes sin motivo. Si debe usarlas, considere proporcionar la informacin tambin
en formato texto.
(69). En especial en las tablas, no use grficos para indicar un dato como por ejemplo el estado, es mejor usar texto.
(70). Asegrese de que las listas alfabticas visuales siguen estando en orden alfabtico cuando son ledas por un
lector de pantalla.
(71). Incluya un resumen (summary) en todas las tablas.
(72). Antes de usar columnas en el diseo considere cmo se le mostrarn a un usuario con un magnificador de
pantalla.
(73). Describa todos los frames.

Confianza, estrategia e imagen de la compaa

(74). Proporcione en su sitio un servicio de atencin al cliente cuyas personas tengan unos bsicos conocimientos
de los problemas de accesibilidad.
(75). No se refiera a personas en sillas de ruedas con sillas de ruedas o lector de pantalla de usuarios con lector de
pantalla.

3 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

Fuente Original:

Nielsen Norman Group. Usability Guidelines: Web Design for Users With Disabilities. 75 Best Practices for Design of
Websites and Intranets, Based on Usability Studies with People Who Use Assistive Technology, Download Report,
October 2001.

Filed under: Diseo y Desarrollo Web | 0 Comments

Blog de Rodolfo Quispe Otazu en el que trata temas de Computacion e Informatica; Sistemas y Tecnologias de
Informacion; Desarrollo de Sistemas; Ingenieria de Software (Ingenieria Web); Docencia Universitaria y un largo e
inimaginable etcetera.

4 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

No Responses to 75 Buenas Practicas de Diseo de Paginas web y Intranets basado en estudios de Usabilidad

Feed for this Entry Trackback Address

1. No Comments

Posting Your Comment

Please Wait

Leave a Reply

There was an error with your comment, please try again.

Name (requerido)

Mail (will not be published) (requerido)

Website

Algoritmica y Programacion
Computacion e Informatica
Diseo y Desarrollo Web
Docencia Universitaria
Ingenieria de Software
Internet y la Web
Marketing en Internet

Que es la Computacion
Que es un Algoritmo
Que es la Programacion
Programacion Orientada a Objetos
Ingenieria de Software
Ingenieria de Requisitos
Calidad de Software
Metodos Formales
RUP: Proceso Unificado
UML: Lenguaje Unificado de Modelado

5 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

Etica Informatica y Sociedad

Que es Internet
myHeritage: Mis Parecidos con las Celebridades

Glosario de Terminos de Google AdWords

Glosario de Terminos de Google Adsense
Que son los Metodos Formales?
Reflexiones sobre el proceso de enseanza aprendizaje
Que es la Calidad de Software?
Lo que hacen los mejores profesores universitarios
Que es la Tecnica de Modelado de Objetos?
Decalogo para el profesor de informatica novel
Guia para el Profesor Novel
Excelencia en la Educacion

Jorge Ubeda
Tecnologia y Gadgets

abril 2009
marzo 2009
febrero 2009
enero 2009
diciembre 2008
noviembre 2008
octubre 2008
septiembre 2008
agosto 2008
julio 2008
junio 2008
mayo 2008
abril 2008
marzo 2008
febrero 2008
enero 2008
diciembre 2007
noviembre 2007
octubre 2007
septiembre 2007
agosto 2007
julio 2007
junio 2007
mayo 2007
abril 2007
marzo 2007
febrero 2007
enero 2007

6 de 7 09/07/2012 01:44 p.m.

75 Buenas Practicas de Diseo de Paginas web y Intranets basado en est... http://www.rodolfoquispe.org/blog/75-buenas-practicas-de-diseno-de-pa...

Computacion e Informatica 2007 - 1,024 seconds.

7 de 7 09/07/2012 01:44 p.m.