USUABILDAD EN EL DESARROLLO WEB
La usabilidad es la facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto.
En interacción persona-ordenador, la usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web.
Otros aspectos de la usabilidad
A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad:[
Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predicibilidad, sintonización, familiaridad, la generalización de los conocimientos previos y la consistencia.
Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más naturales a su formación específica. Tiene que ver con la eficacia y eficiencia de la herramienta.
Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.
Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.
Beneficios de la usabilidad
Entre los principales beneficios se encuentran:[
Reducción de los costes de aprendizaje.
Disminución de los costes de asistencia y ayuda al usuario.
Disminución en la tasa de errores cometidos por el usuario y del retrabajo.
Optimización de los costes de diseño, rediseño y mantenimiento.
Aumento de la tasa de conversión de visitantes a clientes de un sitio web.
Aumento de la satisfacción y comodidad del usuario.
Mejora la imagen y el prestigio.
Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la satisfacción y la productividad.
Todos estos beneficios implican una reducción y optimización general de los costes de producción, así como un aumento en la productividad. La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo.
Jakob Nielsen, considerado el padre de la Usabilidad, la definió como el atributo de calidad que mide lo fácil de usar las interfaces web. Es decir un sitio web usable es aquél en el que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible.
No sólo la tecnología y el aspecto gráfico son factores determinantes para hacer un sitio web llamativo. Es importante que cumpla con las siguientes características:
Entendible
Novedoso
Comprensible
Inteligente
Atractivo
Es decir la finalidad, en este caso de un sitio web, es lograr que el usuario encuentre lo que busca en el menor tiempo posible.
La Usabilidad de un sitio web está determinada por sus contenidos, entre más cercanos estén al usuario, mejor es la navegación por el mismo y más acertada será la experiencia al enfrentarse a la pantalla. Es imposible crear un sitio web ciento por ciento perfecto y en óptimas condiciones
Un buen sitio Web debe responder a las necesidades del usuario. En una comunidad virtual donde confluyen diferentes culturas e intereses, el contexto en el que se desenvuelven los miembros de un grupo virtual, o comunidad, no puede generar molestias en el momento de la navegación.
PRINCIPIOS GENERALES DE USABILIDAD EN EL DISEÑO DE SITIOS WEB
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más fácilidad para usar un mecanismo de interacción.
8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
lunes, 22 de agosto de 2011
47 Elementos Para Crear Un Formulario
1. Uni-Form: es un marco que estandariza la forma de marcas y estilos con CSS le da más uso en las opciones de diseño para elegir.
2. CSS-Only, Table-less Forms: Un gran ejemplo de una forma bien diseñada utilizando las modernas técnicas de css.
3. Formas sin tablas : tiene un ejemplo de inicio de sesión muy buena forma, con un gráfico en el campo de entrada.
4. Una forma con estilo: como se ve la forma y el estilo de la tela.
5. Niceforms 1,0: es una escritura que reemplazará los elementos de forma más comúnmente utilizada con la costumbre de los diseñados.
6. Forma de lujo: es un script casilla reemplazo de gran alcance para proporcionar la máxima flexibilidad en el cambio de la apariencia y función de los elementos de formulario HTML.
7. Estilo de control de formularios: muestra los efectos de varias reglas CSS que se aplican en los formularios.
8. Mostrando buena forma: es de acceso complejo, la red es de estilo de forma con marcado semántico es decir por medio de signos.
9. El estilo del elemento Button con puertas correderas: una técnica cross-browser para los elementos de botón con puertas correderas.
10. Bonita forma que resulte accesible: uso de CSS en lugar de las tablas de la vieja escuela.
11. Compruébelo usted mismo, no lo seleccione: Si se intenta utilizar varias casillas de verificación en una lista desplegable mejor usar ctrl-click en un estado normal de selección múltiple listbox.
12. Las formas sensibles: buen diseño visual que beneficiarán todos los usuarios con visión.
13. AJAX Formulario de Contacto: Utiliza Javascript discreto.
14. AutoSuggest: Un auto-completar AJAX campo de texto - en la que añade un menú popdown de valores sugeridos para un campo de texto.
15. FancyUpload: utilizando Mootools Swf cumple con Ajax para la subida de archivos.
16. Plugin jQuery: Formulario que permite actualizar, obtener informacion fácil y discretamente. formularios HTML para usar AJAX, 17-Cforms : Un plugin de forma de contacto AJAX para Word Press, que ofrece la implementación práctica de las formas múltiples contactos a través de su blog o incluso en la misma página.
18. Campo muy fácil de validación con Prototype: Aquí hay un script de validación de forma que es muy fácil de usar.
19. Validación de vivir : es una pequeña biblioteca de código abierto Javascript construido para dar a los usuarios información en tiempo real de validación.
20. Ajax validación de formularios: para procesar y validar sus formas.
21. fValidator: es un código abierto (libre) herramienta de Javascript discreto para la validación de forma, fácil manejo.
22. Consejos de validación de su forma : En este artículo se explica una manera de lograr la validación.
23. Formulario de Asistencia sin Popups : Una buena técnica para agregar información, ayudará a los formularios sin necesidad de utilizar ventanas emergentes.
24. Recorte de los campos del formulario: con un uso inteligente de Javascript, DOM y CSS podemos ocultar campos opcionales.
25. Consejos para crear grandes formas Web: consejos CSS lo verdaderamente importante.
26. Trucos sencillos para las formas más útil : Una serie de simples trucos para mejorar la usabilidad de las formas.
27. DOM Javascript: Barra deslizante.
28. Plugin: Entrada enmascarada.
29. Ajax Formulario de contacto + YUI demostración.
30. A CSS: basados en CSS de plantillas de formulario.
31. Pretty forms:
32. Ajax captcha: Código de la imagen.
33. Anchar layout with forms: Diseño de anclaje con las formas.
34. Ext file upload form widget example:
35. Control textarea prototype instant edit:
36. Instant edit:
37. Ajax check username:
38. Ajax charned select:
39. Contraseña medidor de intensidad de su formulario de registro: Sobre cómo construir un medidor de intensidad de contraseñas como el que en el formulario de nueva cuenta de Google.
40. Formulario de AJAX POST / GET: Forma de envío HTML con AJAX Javascript ejemplo .
41. Validación degradables Formulario Ajax: proporcionar información en tiempo real al usuario mediante secuencias de comandos en el servidor de validación.
42. ESTILO ENTRADAS DE ARCHIVOS CON CSS y el DOM: guía para el logro de archivo consistente y elegante, subir las entradas a través de un uso inteligente de js y css.
43. Form styling with css:
44. Wufoo Form Builder: Constructor de Forma Libre HTML Creación de formularios, encuestas e invitaciones.
45. Fábrica de formularios Web: código abierto generador de formularios, genera automáticamente el código de fondo necesario para unir el formularios a una base de datos.
46. Jot Form: es una web basada en gran creador de formularios WYSIWYG. Puede seleccionar un tipo de formulario (Contacto, encuesta de satisfacción, solicitud de empleo, Sugerir Sitio Web, registro de miembros, el Partido RSVP, la asistencia de la boda, Reservaciones, Presentar productos, y otros).
47. Asamblea forma: una hermosa colección de hojas de estilo CSS para formularios Web.
2. CSS-Only, Table-less Forms: Un gran ejemplo de una forma bien diseñada utilizando las modernas técnicas de css.
3. Formas sin tablas : tiene un ejemplo de inicio de sesión muy buena forma, con un gráfico en el campo de entrada.
4. Una forma con estilo: como se ve la forma y el estilo de la tela.
5. Niceforms 1,0: es una escritura que reemplazará los elementos de forma más comúnmente utilizada con la costumbre de los diseñados.
6. Forma de lujo: es un script casilla reemplazo de gran alcance para proporcionar la máxima flexibilidad en el cambio de la apariencia y función de los elementos de formulario HTML.
7. Estilo de control de formularios: muestra los efectos de varias reglas CSS que se aplican en los formularios.
8. Mostrando buena forma: es de acceso complejo, la red es de estilo de forma con marcado semántico es decir por medio de signos.
9. El estilo del elemento Button con puertas correderas: una técnica cross-browser para los elementos de botón con puertas correderas.
10. Bonita forma que resulte accesible: uso de CSS en lugar de las tablas de la vieja escuela.
11. Compruébelo usted mismo, no lo seleccione: Si se intenta utilizar varias casillas de verificación en una lista desplegable mejor usar ctrl-click en un estado normal de selección múltiple listbox.
12. Las formas sensibles: buen diseño visual que beneficiarán todos los usuarios con visión.
13. AJAX Formulario de Contacto: Utiliza Javascript discreto.
14. AutoSuggest: Un auto-completar AJAX campo de texto - en la que añade un menú popdown de valores sugeridos para un campo de texto.
15. FancyUpload: utilizando Mootools Swf cumple con Ajax para la subida de archivos.
16. Plugin jQuery: Formulario que permite actualizar, obtener informacion fácil y discretamente. formularios HTML para usar AJAX, 17-Cforms : Un plugin de forma de contacto AJAX para Word Press, que ofrece la implementación práctica de las formas múltiples contactos a través de su blog o incluso en la misma página.
18. Campo muy fácil de validación con Prototype: Aquí hay un script de validación de forma que es muy fácil de usar.
19. Validación de vivir : es una pequeña biblioteca de código abierto Javascript construido para dar a los usuarios información en tiempo real de validación.
20. Ajax validación de formularios: para procesar y validar sus formas.
21. fValidator: es un código abierto (libre) herramienta de Javascript discreto para la validación de forma, fácil manejo.
22. Consejos de validación de su forma : En este artículo se explica una manera de lograr la validación.
23. Formulario de Asistencia sin Popups : Una buena técnica para agregar información, ayudará a los formularios sin necesidad de utilizar ventanas emergentes.
24. Recorte de los campos del formulario: con un uso inteligente de Javascript, DOM y CSS podemos ocultar campos opcionales.
25. Consejos para crear grandes formas Web: consejos CSS lo verdaderamente importante.
26. Trucos sencillos para las formas más útil : Una serie de simples trucos para mejorar la usabilidad de las formas.
27. DOM Javascript: Barra deslizante.
28. Plugin: Entrada enmascarada.
29. Ajax Formulario de contacto + YUI demostración.
30. A CSS: basados en CSS de plantillas de formulario.
31. Pretty forms:
32. Ajax captcha: Código de la imagen.
33. Anchar layout with forms: Diseño de anclaje con las formas.
34. Ext file upload form widget example:
35. Control textarea prototype instant edit:
36. Instant edit:
37. Ajax check username:
38. Ajax charned select:
39. Contraseña medidor de intensidad de su formulario de registro: Sobre cómo construir un medidor de intensidad de contraseñas como el que en el formulario de nueva cuenta de Google.
40. Formulario de AJAX POST / GET: Forma de envío HTML con AJAX Javascript ejemplo .
41. Validación degradables Formulario Ajax: proporcionar información en tiempo real al usuario mediante secuencias de comandos en el servidor de validación.
42. ESTILO ENTRADAS DE ARCHIVOS CON CSS y el DOM: guía para el logro de archivo consistente y elegante, subir las entradas a través de un uso inteligente de js y css.
43. Form styling with css:
44. Wufoo Form Builder: Constructor de Forma Libre HTML Creación de formularios, encuestas e invitaciones.
45. Fábrica de formularios Web: código abierto generador de formularios, genera automáticamente el código de fondo necesario para unir el formularios a una base de datos.
46. Jot Form: es una web basada en gran creador de formularios WYSIWYG. Puede seleccionar un tipo de formulario (Contacto, encuesta de satisfacción, solicitud de empleo, Sugerir Sitio Web, registro de miembros, el Partido RSVP, la asistencia de la boda, Reservaciones, Presentar productos, y otros).
47. Asamblea forma: una hermosa colección de hojas de estilo CSS para formularios Web.
Suscribirse a:
Entradas (Atom)