Usabilidad en la web

En este manual podras encontrar ejemplos y comentarios sobre usabilidad e interfaz en internet. La usabilidad son técnicas que ayudan a los seres humanos a realizar tareas en entornos graficos de ordenador, en nuestro caso, páginas web.

Si te parece útil este manual ayúdanos compartiendo!! :)

Listado de los capítulos

1.- Información general

Veamos primero algunas respuestas a preguntas básicas sobre qué es la usabilidad, y para qué sirve.

2.- Elementos de un buen site

Aquí ofrecemos una guía básica sobre los elementos que componen un buen sitio web y cómo conseguirlo.

3.- Principios generales de usabilidad en sitios web

En este artículo trataremos algunos de los conceptos que se deberían tener en cuenta a la hora de realizar un sitio web.

4.- Qué es la Interacción Persona-Ordenador

La Interacción Persona-Ordenador, es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Su objetivo es que este intercambio sea más eficiente: minimiza los errores, incrementa la satisfacción...

5.- Sobre buscadores internos

En este artículo vamos a comentar como planear y crear un buen buscador interno para un site. Incluye varios ejemplos sobre cómo se hace en los periódicos digitales españoles.

6.- Formularios

Ofrecemos una serie de claves para crear formularios más fáciles y agradables. Rellenar un formulario no tiene que ser un suplicio para el visitante.

7.- Comparativa de formularios

Ahora vamos a ver los consejos de formularios con una comparativa entre un formulario de la página del Corte Inglés y un formulario propuesto. Primero veamos el del Corte Inglés.

8.- Comparativa de formularios II

Ahora veamos el formulario propuesto, tratando de aplicar los consejos sobre formularios que ya hemos visto.

9.- Cómo hacer un cuestionario para la Web

Aprende a sacarle el máximo partido a las encuestas y obtén resultados precisos de tus visitantes.

10.- Selección múltiple (combos y demás)

Se ofrecen consejos para la utilización de elementos de formularios, con objetivo de añadir funcionalidad a una página. Veremos ejemplos de utilización erronea y correcta.

11.- Cabeceras de portal = espacio perdido

Hace un análisis de las características a buscar en una buena cabecera de portal y ofrece una visión crítica sobre el uso de éstas en los portales más destacados.

12.- Los usuarios no son adivinos

En este artículo indicaremos que elementos ayudan al usuario a navegar y cuales no. Además, intentaremos indicar que elementos ayudan a predecir al usuario su destino al pinchar un enlace.

13.- Colores y hojas de estilo que ayudan

En este artículo podemos ver los colores y hojas de estilos que ayudan a los visitantes a navegar de una manera más fácil e intuitiva por un sitio web.

14.- B2B. Dar antes de recibir

Guía de consejos sobre usabilidad en modelos B2B. Entre otros consejos destaca que es importante enseñar el producto antes de que el usuario decida registrarse.

15.- Como escribir newsletters

Veamos una serie de consejos sobre cómo construir un boletín de novedades de manera que cumpla sus objetivos perfectamente.

16.- Pon un enlace a mi site

Es importante que la gente ponga enlaces a nuestros sitios, por ello debemos hacerles fáciles las cosas y ofrecerles gráficos, códigos HTML, etc.

17.- Usabilidad para PDAs

Una guía para el correcto diseño de sitios webs accesibles desde PDAs. Por José Julio Ruiz.

18.- Navegadores usables

Veamos una serie de consejos prácticos para diseñar un buen menú de navegación.

19.- Reduce el peso de tu site

Páginas más ligeras implican más páginas vistas. Algunos consejos para reducir el peso de tu site.

20.- Páginas fluidas

Son las que sus dimensiones se adaptan al tamaño del navegador. Cuando usarlas y cuando no.

21.- La página de error

Los errores 404 de página no encontrada son muy típicos. Aprende a tratarlos, ofrecer soluciones y corregirlos.

22.- El banner perfecto

Análisis del uso de banners como herramienta de comunicación. Consejos para mejorarlos y más documentación.

23.- Abrir diálogo con los visitantes

En este articulo se vera el tema de recoger informacion del usuario en nuestro site. Cómo debemos o no debemos hacer.

24.- Optimizar el formato de las paginas web para imprimir

Consejos para contruir páginas que los usuarios puedan imprimir correctamente.

25.- Un enlace por parrafo

Discusión sobre cómo enlazar las noticias de portada de los portales.

26.- Preparando e-comercio para la navidad

Cosas que podemos hacer para potenciar las ventas en navidad en los sitios de comercio electrónico.

27.- Cómo grabar video para Internet

Como grabar video para una correcta reproduccion en internet. Piensa en una sóla cosa: compresión.

28.- Iframe y usabilidad

Vemos lo que son los frames flotantes, cómo crearlos y sus características, ventajas e inconvenientes, más destacados en el campo de la usabilidad. Incluye introduccion al mundo del frame e iframe.

29.- Diarios de compra

A 13 personas se les pidió que compraran por Internet un producto para ver si eran capaces de llegar a realizar la compra.

30.- IBEX 35 Uno a uno

Vemos una a una las páginas que componen el selectivo IBEX 35 para comprobar si ofrecen la información que deberían.

31.- Páginas corporativas - soluciones de emergencia

Viendo el mal estado general de las webs corporativas de empresas punteras españolas, ofrecemos diversas claves que deberían aplicar para llegar a ser decentes.

32.- El log de visitas ayuda a conocer a tus usuarios

Qué es un log y cómo extraer información para conocer mejor a tus usuarios y sus pautas de comportamiento.

33.- Newsletters que sirven para vender

Consejos para crear Boletines que ayuden a vender. Desde la información que debemos colocar como presentación hasta las páginas del sitio donde debemos enlazar.

34.- Personalizar parametros - Usar enlaces en lugar de combos.

Como ofrecer al usuario herramientas que son faciles de usar - Usar enlaces en lugar de combos al seleccionar parámetros de una búsqueda o presentación.

35.- Convertir usuarios en clientes

No es un paso sencillo, pero en este artículo ofrecemos algunas pautas y razonamientos que pueden ayudar mucho para conseguir hacer productivas tus visitas convirtiéndolas en clientes.

36.- Pedir información que nos puede servir de algo en el futuro

Más sobre formularios: pedir información a los usuarios es válido, aunque evitando pedir información personal. Procura que esa información te sirva para futuras acciones.

37.- Coloca un buscador gratuito en tu web

Opciones gratuitas para incorporar un buscador interno para tu sitio. Recomendación de Atomz.com

38.- Mejorar el producto

Pasos que podemos o debemos seguir para hacer viable nuestro proyecto en Internet. Vender el producto, afinar la publicidad, vender el contenido o los sevicios. Muchas ideas... o necesidades.

39.- Gráficos para representar datos

La representacion de datos de forma grafica ofrece mensajes mas claros donde las conclusiones son faciles de entender. Estudiamos tipos de gráficos, herramientas y algunos casos concretos en la Web.

40.- Gráficos para representar datos 2

En este nuevo capitulo tratamos otros tipos de graficos.

41.- Paleta de colores para graficos

Una imagen con varias paletas de colores que podemos utilizar para la presentación de gráficos, tablas, incluso para el diseño de una web.

42.- Evaluar la usabilidad

Estudiamos los métodos existentes para evaluar la usabilidad de una página web. Evaluación automática, de acuerdo a directrices y con usuarios.

43.- Seleccion de reproductor, real player VS quicktime

Se comparan los reproductores de Quicktime y Real. Se ofrecen ejemplos de películas en varios formatos y ayudas para el desarrollador con códigos de inserción.

44.- Ventajas e inconvenientes del uso de frames

Veamos una serie de cosas buenas y malas derivadas del uso de marcos o frames a la hora de diseñar y utilizar un sitio web.

45.- Construyendo páginas sencillas

La ciencia de la interacción hombre-máquina se ha desarrollado mucho en los últimos años y nos podemos aprovechar de ella en nuestras páginas. La resumimos en forma de consejos.

46.- Organizar información para web sites

Tácticas y consejos para organizar la información en los web sites. Modularización en sistemas de fichas, búsqueda de palabras clave para organizar los contenidos y la generación de páginas lanzadera que hagan de portadas a las secciones.

47.- Hojas de estilo (CSS)

Guía basica y ejemplos de las Hojas de Estilo en Cascada presentadas desde el ámbito de la usabilidad.

48.- Aumentar el número de páginas vistas

Aumentar el número de páginas vistas es clave para conseguir que el usuario conozca mejor nuestro sitio, vea más contenido y aumente la confianza y la posibilidad de generar negocio.

49.- Crear momento

Artículo que explica las pautas a seguir para mejorar la productividad, de modo que nuestro sitio aproveche al máximo los esfuerzos que dedicamos. Detectar oportunidades, crear sensación de único y tener un plan de trabajo.

50.- Revistas online, dos ejemplos que cierran

Dos conocidas revistas online tienen que cerrar porque el negocio no es propicio. ¿Tienen algún sentido publicar online o muchos de los males son culpa del overhead generado por la burbuja del dot.com?

51.- Usando iconos en el diseño de interfaces

Usabilidad relacionada con la utilización de iconos en nuestras páginas web.

52.- Usability Chapuzas, S.A.

Recomendaciones para escoger una consultora para mejorar la usabilidad de nuestro sitio.

53.- Libro de estilo

Algo sobre libros de estilo.

54.- Portadas que sirven para algo

Muchos sites usan la portada para (a) no decir nada o (b) preguntarle al usuario donde vive. Procura ofrecer la información fundamental para que el usuario sepa donde está y qué es lo que puede ver.

55.- Hit, Target, Área de clic...

En Flash el stage de Hit define el área donde será posible el click sobre un botón. Flash nos permite crear targets con dimensiones diferentes del tamaño del botón, lo que puede facilitar la vida a nuestros usuarios. Veamos algunos ejemplos.

56.- 72 horas para un rediseño

Nattura.com necesitaba un nuevo site y ante la necesidad de estar arriba en un breve plazo de desarrollo se atacó el problema proponiendo un site sencillo, limpio y desarrollado en 72 horas.

57.- Guía básica para PYMES

Ayudas para centrar los objetivos de una página para una empresa. Desde las razones por las que necesitamos una página hasta consejos una vez la tenemos.

58.- Simplifica tu vida. Pon el Flash dentro de una estructura de páginas web.

Muchos desarrolladores flash mantienen la filosofía de meter sitios web dentro de un marco FLASH en lugar de centrarse en un desarrollo de páginas con piezas flash como contenido.

59.- Destruir 2 mitos del diseño web

Ya va siendo hora de desterrar 2 mitos del diseño web heredados de 1999. No todo tiene que estar en tus menús y usar correctamente directorios.

60.- ¿De qué sirve el criterio cuando todo el mundo puede opinar?

Decisiones tomadas con falta de criterio suelen condenar a nuestro site a morir a menos que la suerte o casualidad se cruce en nuestro camino. Como formar criterio y aplicarlo.

61.- Preparando la navidad... nuevos diseños que están muertos antes de nacer.

Un par de sites de moda lanzan nuevos rediseños que están muertos antes de nacer y todo ello ante la campaña navideña que se debería aprovechar para ganar usuarios, ventas y mercado.

62.- Aportando algo de luz a la escena Flash

Ayuda para medir peticiones al servidor en ficheros flash y a tener más criterio a la hora de valorar Flash.

63.- Usa imágenes agrupadas y no utilices iconos

Procura utilizar imágenes agrupadas. Ocupan menos y tardan menos en bajar. No uses iconos. Exigen más esfuerzo de aprender y nadie los entiende.

64.- Publicación descentralizada: cómo funciona Alzado

Fieles a nuestro objetivo de compartir experiencias, mostramos un ejemplo de cómo construir un sistema de publicación de contenidos web mediante la visita al backend de alzado.

65.- Multiidioma: páginas de selección de idioma

Si algo puede resultar molesto a un usuario son las páginas cuya función es servir de acceso a otras páginas, y más cuando el sitio web al que accede le obliga a pasar por la misma pantalla en todas y cada una de sus visitas.

66.- La diferencia entre información y publicidad

La diferencia entre información y publicidad es que la publicidad no aporta datos y no genera acción.

67.- Promociones en la portada, buenas o malas

Causas y justificaciones de que las webs estén llenas de promociones.

68.- Apendice I: Enlaces de Interés

Enlaces interesantes sobre usabilidad.

69.- Diseña como piensan los usuarios

La Técnica de agrupación de tarjetas o Card Sorting informa de como un usuario organiza mentalmente contenidos.

70.- Apéndice. Enlaces relacionados

Aquí tenemos varios enlaces relacionados con el modelo de tarjetas para que el usuario obtenga más información detallada.

71.- Loquo: un ejemplo de desarrollo

El desarrollo del portal Loquo es un ejemplo a tener en cuenta cuando queramos optimizar el diseño de una web.

72.- Guías de estilo: diseño, normalización y usabilidad

¿Qúe son los Libros de Estilo? ¿por qué no se utilizan? Algunas pautas para crear Libros de Estilo para departamentos de tecnología y desarrollo de aplicaciones.

73.- No diseñes tu sitio para ganar dinero

El objetivo del usuario en un sitio y su modelo de negocio no tienen porque coincidir. Si sólo un pequeño porcentaje de las visitas generan ingresos, no se puede centrar el diseño del sitio en ellas, sino en el porcentaje restante.

74.- Comentarios en abierto: libertad o censura

Los comentarios "legales" de los usuarios ayudan a que mejore la calidad del sitio, pero queda abierta la posibilidad de que introduzcan comentarios incorrectos o improcedentes.

75.- Evitar los colores de fondo

Un fondo blanco es lo más indicado, ya que normalmente otros colores de fondo tienen una interpretación negativa por parte del usuario.

76.- Dí no a los gadgets propietarios

Una web funcional y práctica puede conseguirse con los recursos que nos ofrece el código estándar. Usar recursor propietarios puede restar esta funcionalidad y hacer que nuestro sitio no obtenga las mejores críticas.

77.- Método de resolución de problemas de Bruno Munari

Este diseñador industrial / gráfico plantea un método proyectual basado en la resolución de problemas. Esta metodología evita el inventar la rueda con cada proyecto y plantea sistematizar la resolución de problemas.

78.- Sin copia no hay estándar, sin estándar no hay universalización

Copiar no es malo, es el motor del desarrollo y de las nuevas ideas; además, conlleva la aparición de estándares que permiten que los beneficios de las ideas se universalicen y reducen los costes y la necesidad de aprendizaje.

79.- Usabilidad y arquitectura del software

Qué es la Arquitectura del Software y que relación tiene con la usabilidad. Tener en cuenta la usabilidad en el momento del diseño de la arquitectura de un sistema interactivo nos puede ahorrar muchos quebraderos de cabeza.

80.- Algunos estándares en la web

Algunos estándares se van perfilando en las web. En este artículo se presentan ejemplos de hacia donde va la web y hacia donde no.

81.- Diseño de experiencias

Nos adentramos en la era de las "Experiencias", las emociones, las sensaciones,... los productos, los servicios se experimentan.

82.- Informe sobre el estudio Eyetrack III

Trabajo basado en el estudio de los movimientos oculares de un conjunto de personas durante sus visitas a diversas páginas web de noticias.

83.- Modelo mental del usuario en sistemas de proceso transaccional

Partiendo del análisis del modelo mental del usuario en interfaces implantadas en entornos transaccionales, se proponen los elementos básicos de una nueva interfaz objeto-acción y la arquitectura tecnológica necesaria.

84.- PDF en el Web. ¿Entorpeciendo ó mejorando la navegación?

La utilización de los archivos PDF en internet es cada vez mas frecuente. Pero ¿Que beneficios tiene?, o ¿Que tan inadecuado es su uso dentro de nuestras páginas?.

85.- Observando a los usuarios – Un método particular

La observación de usuarios es una técnica sencilla y barata pero en pocos proyectos se utiliza. Solo se necesita un bloc de notas, un bolígrafo y un poco de metodología.

86.- El Pais y Digital+. Ser el lider no es suficiente

Dirigirse al grupo lider español de comunicación puede sonar algo pretencioso, pero creo que es necesario que la crítica exista. De lo contrario el liderazgo provoca cierta relajación y bajar el nivel de calidad.

87.- Controles de formularios en diseño web

El adecuado uso de radio-buttons, check-boxes, combos y campos de texto es decisivo para el éxito de un formulario.

88.- Usabilidad al milímetro

La usabilidad no es una ciencia exacta, pero sí un arte de precisión. Un pequeño cambio, en el texto de un vínculo, el contraste con el fondo o el espacio blanco alrededor de un elemento, pueden marcar la diferencia entre el éxito y la mediocridad.

89.- El espacio en la pantalla

Por norma, los contenidos deberían de ocupar como mínimo un 50% en nuestra web, pues es muy importante la cantidad de espacio destinada a este.

90.- Encuesta para una web de diseño centrado en el usuario

Marta González y Dunia Meler han realizado una encuesta a la comunidad de profesionales de IPO, Usabilidad y AI con el objetivo de realizar una Web sobre el Diseño Centrado en el Usuario.

91.- Usabilidad para pequeños proyectos web

Pautas para el buen desarrollo de una web.

92.- Usabilidad en Flash

La tecnología Flash de Macromedia ha recibido duras críticas debido a la aparente escasez de aplicaciones que ejemplifiquen el diseño de interfaces que respeten principios básicos de Usabilidad. En éste artículo, tratamos de examinar el actual estado

93.- MSN Music. Un pequeño problema de perspectiva

Criticar a Microsoft es fácil y por eso comentamos su nuevo proyecto de música. El problema... si uno piensa en microsoft e internet las 3 primeras palabras que nos vienen a la cabeza son "virus", "lento", "inseguro"...

94.- La navegación impaciente de los usuarios en Internet

Los usuarios saben que a mayor número de sitios vistos, mayor probabilidad de encontrar lo que buscan. Por eso cuando navegan los usuarios muestra un comportamiento muy impaciente, moviéndose rápidamente de un sitio a otro.

95.- Diseño de formularios: etiquetas

Pautas de diseño y recomendaciones de usabilidad para la creación de etiquetas de texto en formularios web y GUI.

96.- Columnas, anchos de línea y legibilidad

Los principales motivos por los que los usuarios leen mejor unas páginas que otras dependiendo de su formato de párrafos.

97.- Del contenido surge la forma. Guías para el diseño web

Para diseñar un sitio web debemos conocer bien todo el contenido que se va a publicar ya que lo contrario nos puede llevar a un sistema de retícula que no acabará por acomodar la información de una forma natural.

98.- Creando la retícula. Como organizar la información

La retícula es la base visual para organizar la información de una página web. Una base rígida o fluida? Dos, tres o cuatro columnas? Horizontal o vertial? Las respuestas a estas preguntas vienen dadas por el contenido que tengamos que manejar.

99.- Diseño de marca y visual. Recuperar un valor clave

Que una web sea accesible es un aspecto técnico que el cliente final no va a comprar. Que una web cumpla "estándares" lo mismo. El aspecto visual si es algo que el usuario comprará. Técnicas para recuperar este valor.

100.- El discreto encanto de los listados

Los listados son uno de los mejores elementos de interacción, pero quizás por su simplicidad son infravalorados. Este artículo invita a descubrir por qué los listados son realmente interesantes.

101.- Usabilidad y Retorno de Inversión en sitios Web

De la mano del crecimiento de la Web, la Usabilidad ha tomado cada ves más importancia, básicamente porque juega un papel fundamental en el ROI (Retorno de Inversión) en un sitio Web.

102.- Mapas y usabilidad

La generalización del uso de los mapas especialmente desde la popularización de Google Maps y su API ha provocado que algunas cuestiones de usabilidad no resueltas cobren importancia.

103.- Comprobar los datos en un formulario de entrada

Verificar la corrección de los datos a introducir en un sistema constituye una función fundamental en cualquier aplicación informática pero, a menudo, las validaciones afectan negativamente a la usabilidad.

104.- Es hora de Pensar en 1024px?

Ventajas o desventajas de utilizar esta resolución en nuestras páginas web.

105.- Factores Determinantes en el uso de Fuentes

Las fuentes de letras cumplen un papel sumamente decisivo tanto en el diseño web como en el diseño impreso. Para usar acertadamente este recurso gráfico es necesario considerar algunos factores que influyen directamente en la percepción del usuario.

106.- No se habla de usabilidad

En algunos sites se comenta la idea de que no hace falta hablar de usabilidad para proyectos web. Que eso ya está por defecto en el paquete.

107.- Haciendo una Web Accesible: el uso adecuado de los colores.

Unos aspectos a tener en cuenta para hacer una web accesible a través del color.

108.- Aplicaciones Web: Usabilidad + Practidad = Éxito

Gracias a nuevos conceptos de diseño web que se han incorporado en estos últimos años, es posible ver sitios que brindan servicios simples pero que logran captar al público.

109.- Como lograr diseños web de buen aspecto gráfico

El aspecto gráfico de un sitio juega un rol muy importante. Mucho se habla en la web de esta importancia y de cómo se deben construir técnicamente los sitios, sin embargo poco de como lograr aspectos gráficos profesionales o diseños “atrayentes”.

110.- Usabilidad y accesibilidad: Conceptos muy diferentes

Veremos las principales diferencias entre estos dos conceptos a modo de entenderlos y aplicarlos fácilmente.

111.- Cuando poner un botón, cuando poner un enlace

Este artículo se encaja dentro del "ABC" de la usabilidad pero merece la pena recordar algunas reglas sencillas para saber cuando poner un botón del sistema y cuando poner un enlace.

112.- Redacción para web sites

La norma básica para escribir bien textos para la web es muy sencilla: tener en cuenta que estamos en soportes diferentes, pantalla versus papel y, por lo tanto, debemos utilizar nuevas estrategias a la hora de escribir el contenido para un sitio web

113.- El usuario promedio ayer y hoy

A medida que más y más gente usa computadoras personales y navega por Internet, aumenta la tendencia a considerar la PC, y a sus programas, como una herramienta más.

114.- Arquitectura de información

Acciones preliminares antes de planificar una página web.

115.- Escribe títulos cortos

Manten tus titulares cortos.

116.- Diseñar para dispositivos móviles

Pautas que aconsejan como realizar páginas web aptas para dispositivos móviles

117.- Usabilidad y Analítica Web

Testeo con usuarios, card-sorting, personajes, prototipado,… son las típicas técnicas de usabilidad. Sin embargo, raramente se habla del potencial de las técnicas de analítica web para mejorar la usabilidad de un sitio web.

118.- Normas para maximizar la usabilidad de un site

Un decálogo de usabilidad y algunos links de interés.

119.- Diseño Web Emocional: consejos y ejemplos

Por qué es importante la estética en todos tus proyectos web.

120.- Optimización de tu web mediante ordenación del código

Cómo optimizar la carga de tu página web colocando correctamente tus CSS y tu código Javascript.

Bibliografía recomendada

USABILIDAD

Compra este libro en Agapea, la librería urgente a domicilio.

Compartir

Comentarios

joaco_m

08/5/2009
Excelente.....
Creo que con un poco mas de tiempo en la lectura de este manual todo seria maravilloso.... creo que es en parte de lo que andaba buscando, gracias.

shadow_mva

22/6/2009
Donde lo descargo
quisiera saber como descargar este manual porfavor

gquirosr

10/1/2010
Usabilidad
Excelente documento. Apenas para recomendar-

fircalion

22/2/2010
Descarga?
Por favor, este manual no está disponible para su descarga, quería pediros que lo solucionarais en cuanto fuera posible...
Gracias
Saludos ;-)

Carlos Verdes

02/11/2010
Esta web no es usable
Voy a leerme el tutorial porque me lo han recomendado... pero nada más entrar en la página me cuesta encontrar qué es contenido y qué es publicidad.

Creo que se podría hacer un diseño más limpio.

ivanomiteco

01/2/2011
descarga
yo lo quisiera descargar... agradecería muchisimo me dijeran cómo

casmelad

17/8/2011
dkrgar
ei ei estaria bn k se pudiera dskrgar

maria

12/12/2011
hola
que es usabilidad en el punto de vista de un sistema

cristian_battaglia

17/12/2012
Descarga
Esta disponible para cargar??

Hector

07/3/2013
Excelente manual
Buenísimo material para la materia prog. web I

menterina

29/4/2014
y la descarga?
hablando de usabilidad.... ninguno estamos encontrando dónde está el link de descarga!!

jorgekf13desarrollo2

26/6/2014
¿y el link de descarga?
no hay ningún link de descarga

jorge_fernandez-320490

28/7/2014
No hay link
AAaaaaaaagh!