domingo, 21 de agosto de 2011

USUABILIDAD EN EL DESARROLLO WEB


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. El término también se usa a menudo en el contexto de productos como la electrónica de consumo o en áreas de comunicación, y en objetos que transmiten conocimiento (por ejemplo, un libro de recetas o un documento de ayuda en línea). También puede referirse al diseño eficiente de objetos mecánicos como, por ejemplo, un manubrio o un martillo.

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:[2]

  • 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:[2]

  • 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.

47 ELEMENTOS DE HTML


 Uni-formularios: “Uni-Form:” es un marco que estandariza la forma de marcas y estilos con CSS le demás usados ​​en las opciones de diseño para elegir. Cualquier persona puede tener buen aspecto, bien estructurado, formas altamente personalizable, accesible y utilizable. En pocas palabras: hace que la vida de un desarrollador es mucho más fácil.



CSS-Only: menos la tabla, las formas un gran ejemplo de una forma bien diseñada utilizando las modernas técnicas decss. Se trabaja en Win/IE6, Firefox v1.0 +, Win / Opera 8.0, tiene pequeñas diferencias de diseño en Mac / Safari 1.0.3 y Mac / Safari v1.2, y es útil, pero bastante enculada en Mac/IE5. 2.

Tableless Forms :”formularios sin tablas - tiene un ejemplo de inicio de sesión muy buena forma, con un gráfico en el campo de entrada.

Una forma con estilo - Cómo dejar de estilo y formas de la tela de mirar feo.

Niceforms 1,0: Es una escritura que reemplazará los elementos forma más usual con la costumbre de los diseñados. Una de estas mejoras sería la posibilidad de seleccionar un aparato de radio o casilla de verificación haciendo clic en su etiqueta al lado, también destaca las etiquetas de las cajas seleccionadas para hacer las selecciones más clara.

Formulario de lujo - FancyForm 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. Es fácil de usar y se degrada con gracia sobre todos los mayores, no apoyo a los navegadores.

Estilo de controles de formularios:.Con CSS, revisada - 224 imágenes que muestran los efectos de varias reglas CSS se aplica a los controles de formulario. Aunque las capturas son tomadas de 8 navegadores de 4 sistemas operativos, para un total de 14 combinaciones de navegador + OS.

Mostrando Buena Forma :- Demo de complejo acceso, la red de estilo (es decir, la tabla-como) forma con marcado semántico (fieldset, leyendas, etc etiqueta ...) y CSS.

El estilo del elemento Button con puertas correderas: - Una técnica que demuestra una técnica cross-browser para los elementos de botón con puertas correderas.

Bonita forma que resulte accesibleNick Rigby  echa un vistazo a cómo hacer que las formas más accesibles y el uso de CSS en lugar de las tablas de la vieja escuela.

Check it, don’t select it: Compruébelo usted mismo, no lo seleccione - Si se intenta utilizar varias casillas de verificación en una lista desplegable - mejor que usar ctrl-click en un estado normal de selección múltiple listbox.

Las formas sensiblesUsabilidad Web - Roger Hudson ofrece un tutorial increíblemente claras sobre cómo una forma que está bien diseñado, con buen diseño visual se beneficiarán todos los usuarios con visión.

AJAX Formulario de Contacto - Excelente ejemplo de AJAX accesible. Utiliza Javascript discreto. Por Dustin Díaz.

AutoSuggest: Un auto-completar AJAX campo de texto - en la que añade un menú  popdown de valores sugeridos para un campo de texto. El usuario puede hacer clic directamente en una sugerencia para entrar en el campo, o navegar por la lista utilizando las teclas de flecha hacia arriba y hacia abajo, la selección de un valor con la tecla de tabulación.

FancyUpload: utilizando Mootools - Swf cumple con Ajax para la subida de archivos hermosa con Mootools.

Plugin jQuery: Formulario - le permite actualizar fácilmente y discretamente formularios HTML para usar AJAX para obtener información de los elementos de formulario para determinar la forma de gestionar el proceso de presentar lo que le permite tener un control total sobre cómo se envían los datos.

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.

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.

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, ya que llenar formularios.

Ajax validación de formulariosAprender a utilizar AJAX para procesar y validar sus formas.

fValidator: - fValidator es un código abierto (libre) herramienta de Javascript discreto para la validación de forma fácil manejo.

Consejos de validación de su forma : En este artículo se explica una manera de lograrla validación efecto Consejos, mientras que el tipo de usuario de JavaScript y CSS.

Formulario de Asistencia sin Popups : Una buena técnica para agregar información ayudará a los formularios sin necesidad de utilizar ventanas emergentes.

Recorte de los campos del formularioNo sería una idea genial para dar a los usuarios la opción de ocultar estos campos opcionales a su discreción, y con un uso inteligente de Javascript, DOM y CSS algunos podemos.

Consejos para crear grandes formas Web - consejos CSS lo verdaderamente importante para todos los constructores de la forma que hay.

Trucos sencillos para las formas más útil : Una serie de simples trucos para mejorar la usabilidad de las formas, y esperamos que pueda inspirar en ellos para mejorar y crear uno propio.

DOM Javascript: Barra deslizante.

Plugin: Entrada enmascarada.

Ajax Formulario de contacto + YUI  demostración.

A CSS: Un basados ​​en CSS de plantillas de formulario.

Pretty forms:

Ajax captcha: Código de la imagen.

Anchar layout with forms: Diseño de anclaje con las formas.

Ext file upload form widget example:

Control textarea prototype instant edit:

Instant edit:

Ajax check username:

Ajax charned select:

Contraseña medidor de intensidad de su formulario de registro: Un pequeño tutorial

 Sobre cómo construir un medidor de intensidad de contraseñas como el que en el formulario de nueva cuenta de Google.

Formulario de AJAX POST / GETForma de envío HTML con AJAX / Javascript ejemplo / tutorial.

Validación degradables Formulario Ajax: Aprenda a proporcionar información en tiempo real al usuario mediante secuencias de comandos en el servidor de validación.

ESTILO ENTRADAS DE ARCHIVOS CON CSS y el DOMShaun Inman nos muestra una guía para el logro de archivo consistente y elegante subir las entradas a través de un uso inteligente de js y css.

Form styling with css:

Wufoo Form BuilderConstructor de Forma Libre HTML - Creación de formularios, encuestas e invitaciones y mucho más .

Fábrica de formularios WebEs una web de código abierto generador de formularios que genera automáticamente el código de fondo necesario para unir el formulario a una base de datos.

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).

Asamblea formauna hermosa colección de hojas de estilo CSS para formularios Web Forms