Archivos en la categoría Usabilidad web

Mejora la usabilidad y accesibilidad de los formularios en HTML 4.0

Acabo de descubrir varias etiquetas para formularios HTML 4.0 que no conocía y que nos permiten  mejorar la usabilidad y la accesibilidad de nuestros formularios considerablemente. Desde Eslomas nos ofrecen una  explicación de éstas y varios ejemplos donde comprobar el resultado. Tal y como nos indican, estas  etiquetas están admitidas por la W3C, por lo que no tendremos ningún problema al validar nuestro formulario.

Fieldset y Legend

Estas etiquetas nos permiten crear un área visible dentro del formulario agrupando varios controles que estén relacionados facilitando al usuario su comprensión y usabilidad, ya que permite desplazarse de un control a otro a través de la tecla TAB. La etiqueta Fieldset crea el recuadro que agrupa a los controles, mientras que Legend nos permite implementar el título del área.

<fieldset>

<legend>Datos personales:</legend>

Nombre: <input size=”20″ type=”text” />

Dirección: <input size=”20″ type=”text” />

Teléfono: <input size=”20″ type=”text” />

</fieldset>

Datos personales:

Nombre:

Dirección: 

Teléfono: 

Label

Aunque no es una etiqueta desconocida, puede que el uso que se la da no sea el apropiado o simplemente que no es explota todo su potencial. Esta etiqueta permite definir un título a un control del formulario. Cada etiqueta label sólo puede estar asignada a un control, y digo asignada porque aquí es donde está el verdadero uso de esta etiqueta. Mediante el atributo for (propio de la etiqueta label) podemos especificar el id del control de formulario al que queremos asignar el label, de esta forma el usuario podrá hacer click sobre el control o sobre el label al realizar las operaciones con el formulario. Donde realmente podemos ver su efecto es en controles radiobutton ó checkbox, ya que para seleccionarlos o chequearlos podremos hacer click sobre el label o sobre los propios controles. De esta forma se mejora considerablemente la usabilidad del formulario. Cabe mencionar que dentro de la etiqueta label podemos incluir tanto texto como imágenes.

Selecciona tu vehículo

<input id=”bmw” name=”coche” type=”radio” />

<label for=”bmw”>BMW

<input id=”audi” name=”coche” type=”radio” />

<label for=”audi”><img src=””/> Audi

Selecciona tu vehículo:

Optgroup

Esta etiqueta nos permite crear grupos dentro de desplegables select. Los grupos están definidos por un título que aparecerá en negrita y cursiva, y que no será seleccionable.

La utilidad de optgroup reside en facilitar al usuario la lectura y comprensión de la lista desplegable.

<select name=”Modelo”>

<option selected=”selected” value=”none”>Seleccione…</option>

<optgroup label=”BMW”>

<option value=”bmw120d”>BMW 116d

<option value=”bmw118d”>BMW 118d

<option value=”bmw120d”>BMW 120d

<option value=”bmw318d”>BMW 318d

<option value=”bmw320d”>BMW 320d

</optgroup>

<optgroup label=”AUDI”>

<option value=”A1″>A1

<option value=”A2″>A2

<option value=”A3″>A3

<option value=”A4″>A5

</optgroup>

</select>

Selecciona el modelo:

Más info | http://www.eslomas.com/campos-fieldset-legend-label-optgroup

1 Comentario

Prácticas de buen Copywriter: el ritmo en tus textos

Prácticas de buen Copywriter: el ritmo en tus textos

Interesante artículo publicado en Grokdotcom, y traducido por RedaccionSEO, en el que comentan la importancia del ritmo en la escritura, “El ritmo es un poderoso elemento en tus textos”. La habilidad de escribir un buen copy marca la diferencia entre captar a más usuarios o hacer que huyan de un texto lento, pesado, ininteligible y soso.

El autor describe dos tipos de ritmos de escritura: Visual Mood y Verbal Music.

  • Visual Mood: comprender un texto a través de la imagen que nos hacemos de él. Los lectores se hacen una imagen de lo que están leyendo, por lo que debes intentar escribir facilitándoles la visualización de la idea del texto a través de tus palabras. Si deseas animar y excitar al lector, escribe de forma que el texto ofrezca una sensación de velocidad: puntua intencionadamente, utiliza verbos de acciones y palabras cortas. Si lo que quieres es relajar, entonces escribe frases largas e incluye descripciones.
  • Verbal Music: Al igual que la música tiene ritmo, nuestro texto puede tenerlo. La forma de lograr un buen copy es consiguiendo que nuestro texto tenga ritmo, para ello debemos escribir frases de distinta longitud, unas cortas, otras medianas y otras largas, mezclándolas y logrando una mixtura que no suponga repetición y monotonía. Así lograremos un mayor impacto en el lector, instándolo a considerar la calidad de nuestro texto e invitándolo a leer más artículos de nuestra página web o blog.

La idea fundamental del artículo nos ofrece una clave para tratar de captar y mantener usuarios en nuestra página web o blog, reduciendo así el bounce rate (porcentaje de rebote), que indica el porcentaje de usuarios que visitan la página y se marchan sin navegar por ésta.

Lógicamente cada tipo de texto depende del público al que va destinado y del tema a tratar, por lo que deberemos variar el ritmo y la velocidad de lectura adaptándonos a nuestros lectores. Lo más importante es evitar la monotonía variando la longitud de las frases y evitando que éstas sean excesivamente largas. Y tú, ¿cómo haces tus copys?

Sin Comentarios

Cross-browsing y la guerra de navegadores

Cross-browsing y la guerra de navegadores

Hoy he entrado al Tuenti y para mi sorpresa, o consternación (sí, estoy enganchado a la tuentimania ;P), el servicio está de mantenimiento. Como había un enlace al blog de la red social, he entrado a cotillear un poco. Entre los diversos artículos, comentarios y entradas de branding, he visto una pequeña creatividad ofertando un puesto de trabajo en Tuenti. Como curiosidad, he hecho clíck y me he puesto a mirar unas cuantas fotos que tienen de sus oficinas y puedo decir que poco o nada tienen que envidiar de las de Google: salas de reuniones con sofas y sillones, puestos de trabajo espaciosos y bien iluminados, salas comunes dotadas de fanásticos sofás para tomar un KitKat, etc. Al grano. Entre los diversos puestos que desean cubrir, el único interesante es uno de Usabilidad y Diseño Web. Entre los requerimientos que exigen, hay uno que utiliza un tecnicismo, que si bien nunca había visto u oído, es fácilmente deducible: cross-browsing. Por asi acaso, he entrado en la Wikipedia a ver qué significaba y como me imagino que no seré el único en desconocer esta palabreja de la jerga de los desarrolladores web, os comeno qué significa.

La etimología de la palabra compuesta nos lleva a pensar en los navegadores web (browsing) y una posible relación entre ellos (cross), que desde mi punto de vista o interpretativo, lleva a pensar a un recorrido que abarque a todos ellos.

Según la Wiki, cross-browsing es la habilidad de un desarrollador web de escribir un código que sea compatible con todos los navegadores y se muestre de forma correcta en cualquiera de ellos, sin importar la versión, ni el navegador. Nació en la década de los 90, durante las guerras de los navegadores (Browser Wars), donde se batieron duramente Internet Explorer y Netscape. Durante este tiempo ambos navegadores añadieron nuevas funcionalidades sin coordinarse entre ellos. Como resultado, muchas funcionalidades que eran soportadas por ambos tenían distintas formas de desarrollarse e interpretarse, provocando que los desarrolladores web tuviesen que aprenderse a escribir el código de dos formas distintas para obtener el mismo resultado.

Cross-browsing y la guerra de navegadores

Otro concepto similar es el multi-browsing. Su significado es similar, con la diferencia de que este tecnicismo sólamente implica que cualquier código debería funcionar en varios navegadores, mientras que cross-browsing implica a todos los navegadores y a todas sus versiones.

Por código se entiende, sobre todo, scripts de lado del cliente (client-side script), como JavaScript, aunque también habría cabida a multitud de clases CSS que Microsoft se ha venido sacando de la manga desde tiempos inmemoriables y que sólamente, por inspiración divina, usa Internet Explorer.

Si bien a día de hoy la mayoría de navegadores cumplen los estándares del W3C, Internet Explorer continúa teniendo sus pequeños detalles que lo hacen diferente del resto de navegadores del mercado y continúa fastidiándonos a los webmasters. Así que ya sabes, si eres capaz de desarrollar páginas web, hojas de estilo, scripts o cualquier código, que sea compatible con todos los navegadores (sin importar nombre o versión), puedes incluir en tu CV una bonita palabra que le dará un toque más cool y más técnico.

1 Comentario

From Business to Buttons, conferencia internacional sobre Usabilidad Web

From Business to Buttons, conferencia internacional sobre Usabilidad Web

Andrea Hidalgo nos ha enviado información sobre una conferencia internacional sobre Usabilidad Web. The Cocktail patrocina un año más el congreso From Business to Buttons, que de nuevo se celebra en Malmö, Suecia. Como en ediciones anteriores, el objetivo es analizar cómo el diseño puede ayudar a al negocio, qué metodologías emplear y conocer casos prácticos.

La conferencia cuenta con ponentes como Garr Reynolds, autor de Presentation Zen y considerado uno de los mejores conferenciantes del mundo, Matt Jones, fundador de Dopplr, Scott Berkun, autor del libro The Myths of Innovation y Gene Liebel, socio de HUGE.

Microsoft, patrocinadora de la conferencia From Business to Buttons llevará su mesa interactiva Surface. La conferencia también está patrocinada por la española The Cocktail.

Más info | The Cocktail

Sin Comentarios

5 formas sencillas para mejorar el aspecto de los links

5 formas sencillas de mejorar el aspecto de los enlaces

Interesante artículo publicado en Janko donde nos enseñan cinco formas distintas de mejorar el aspecto de los links de nuestra página web o blog. Por línea general los diseñadores web asignan distintos colores (normalmente los corporativos) a los enlaces para que los usuarios los identifiquen como tal; en otras ocasiones, los enlaces tienen un estilo clásico, color azul oscuro y subrayados. Sin embargo, si queremos darle un toque original a nuestros enlaces, tenemos a nuestra disposición varios recursos en CSS y JavaScript que nos facilitarán la tarea, teniendo en cuenta que el objetivo de un enlace es que pueda ser identificado como tal por un usuario, ya sea novel o con experiencia, por lo que buscaremos detalles que lo hagan resaltar respecto el resto del texto del website.

En Janko nos proponen cinco formas para conseguirlo, desde la más sencilla, que es aplicar un subrayado con estilo a los enlaces (en este caso el subrayado tiene la propiedad dashed, por lo que será un subrayado con guiones), a la más compleja, que sería mediante un plugin de JavaScript, crear un pequeño efecto de animación de desplazamiento.

Para mí, las más interesantes son las de incluir un pequeño icono junto al enlace con CSS (en la Wikipedia lo usan y lo cierto es que es muy descriptivo) y el que ya he comentado de incluir un subrayado estilizado a los enlaces, de hecho, para la web de un cliente utilicé una técnica parecida, con la diferencia de que también tenía un subrayado en la parte superior en el hover, por lo que al pasar el ratón por encima, el enlace quedaba enmarcado por arriba y por debajo con dos líneas de guiones (style=”border-top: 1px dashed #333, border-bottom: 1px dashed #333). Aunque lo cierto es que sigo siendo uno de esos webmasters clásicos que sólo cambian el color de los enlaces y aplican en el hover el subrayado, ¿y tú? ¿Qué estilo aplicas a tus enlaces?

Más info | http://www.jankoatwarpspeed.com

1 Comentario

UserFly, estudia la usabilidad de tu página web a través de videos

UserFly, estudia la usabilidad de tu página web a través de videos

Con Userfly podrás realizar completos estudios de usabilidad de tu página web sobre usuarios reales. Simplemente incluyendo una línea de código JavaScript en tus páginas podrás ver en video el comportamiento de los usuarios de tu página web instantes después de su visita. La información se muestra en un video que funciona como un Video Screener, que graba todos los movimientos y acciones del cursor; además, en la parte superior van apareciendo las acciones que ha realizado el usuario (click, submit (enviar un formulario), etc.).

La aplicación UserFly es de pago, aunque nos ofrecen una demo que sólo permite almacenar los datos de 10 usuarios cada hora. Sin duda, es una herramienta de gran utilidad, ya que nos permite conocer qué partes de nuestra web son las más visitadas y cuáles deberíamos mejorar para llamar la atención de los usuarios.

Si bien herramientas de este tipo ya existen en el mercado, como la Superposición de Sitio de Google Analytics, UserFly destaca por ofrecer información en video y prácticamente en tiempo real.

Más info | http://www.userfly.com
Fuente | http://wwwhatsnew.com

Sin Comentarios
  • Página 1 de 2
  • 1
  • 2
  • >