• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

10 consejos prácticos de usabilidad para diseñadores web

Sebastián Thüer · 30.09.2009 ·

10 consejos prácticos de usabilidad para diseñadores web
10 consejos prácticos de usabilidad para diseñadores web.

Smashing Magazine ha publicado una lista increíblemente útil con 10 consejos prácticos de usabilidad para diseñadores web. Muchas veces he visto estudios de eyetracking o conclusiones de cuestionarios de usabilidad pero no siempre los resultados obtenidos son generalizables. Pero en este caso es diferente.

Dmitry Fadeyev, del excelente blog Usability Post, hace una lista donde propone una serie de acciones concretas para mejorar la usabilidad de cualquier página web. Aquí va el listado en cuestión con algunos breves comentarios:

1. Las etiquetas de los campos, mejor arriba.

Según un estudio de UX Matters el mejor lugar para colocar la etiqueta es arriba del propio campo. La mayoría de los formularios las sitúa a la izquierda, pero parece ser que el recorrido natural es leer un formulario de arriba hacia abajo.

2. Hacer foco en las caras.

Otro  estudio: los usuarios centran su atención sobre los rostros de las fotografías, según informa Usable World. Por eso es importante hacer que la dirección de la mirada se relacione con el contenido de la página y así desviar la mirada del usuario hacia el titular o texto que nos interesa.

3. La calidad del diseño es un indicador de credibilidad.

Simple, contundente y casi de sentido común: el diseño de calidad inspira confianza. Hay varios estudios que así lo indican y (1, 2 y 3). Recuerdo que hace bastante tiempo leí un estudio sobre la credibilidad de la prensa y afirmaban que errores aparentemente intrascendentes -como un error tipográfico, por ejemplo- terminan por afectar la credibilidad del medio. No hay razón para pensar algo distinto de la web: una empresa que comunica su producto o servicio con claridad está un paso por delante de quien conserva un diseño confuso.

4. Los usuarios no hacen scroll.

En el primer libro de usabilidad que leí uno de los aspectos que más se comentaba era aprovechar la parte superior de la página y colocar allí la información esencial del sitio ¿La razón? Muchos usuarios (cerca del 70%) no se molesta en hacer scroll para descubrir si debajo hay algo interesante. Algunos han malinterpretado esto y abarrotaron la parte superior de información. Sin embargo, la idea es ubicar aquí sólo lo indispensable de manera clara y legible. Fadeyev propone tres elementos: nombre del sitio, proposición de valor (value proposition) y enlaces para navegar las principales secciones.

5. El azul es el mejor color para los enlaces.

Siempre me pareció demasiado categórica esta afirmación pero tengo que aceptar que cualquier usuario que haya navegado un par de veces por la web reconoce fácilmente el texto azul y subrayado como un enlace. Google lo sigue haciendo y si no existe ningún criterio estético que justifique hacer lo contrario, mejor dejarlo así.

6. Cajas de búsqueda de 27 caracteres.

Tener un campo de búsqueda amplio ayuda visualizar nuestra consulta al buscador sin tener que desplazarnos. Según un estudio en promedio las cajas de búsqueda tienen 18 caracteres pero la longitud de la consulta es de 27. Recientemente también Google aumentó el tamaño de su caja de búsqueda.

7. Los espacios blanco mejoran la comprensión.

Todo diseñador conoce la importancia de un adecuado balance y contraste visual. Los blancos son zonas de descanso visual y constituyen el elemento visual más sencillo y claro para separar áreas.

8. El testing de usabilidad no necesita muchos usuarios.

Cuando pensamos en estudios de usabilidad tal vez tengamos en mente los criterios de la estadística para seleccionar una muestra de nuestro universo. Sin embargo, según un estudio de Nielsen el 85% de los problemas de usabilidad se pueden diagnosticar con un pequeño grupo de no más de 15 usuarios.

9. Las páginas de productos con información ayudan a destacarte.

Con la premisa de que los usuarios no leen en pantalla muchos sitios obvian información importante que es necesaria para la toma decisiones. Sin bombardear al usuario de datos técnicos o jerga específica, hay que procurar brindar toda la inforamación relevante sobre un producto o servicio de manera digerible. La página del iPod lo hace muy bien, por ejemplo.

10. Casi todos los usuarios son ciegos a los avisos.

La peor manera de promocionar algo en tu propia página es crear un banner. La mayoría de los usuarios ignora esta información y directamente no mira esta zonas de la página. Mejor emplear un formato diferente y usar recursos más creativos.

  • Si te gustó el listado y querés conocer más detalles te recomiendo el post original que además incluye un pequeño bonus:  10 Useful Usability Findings and Guidelines

Tutorial para pasar un diseño de Photoshop a HTML

Sebastián Thüer · 28.09.2009 ·

Pasar un diseño de Phothop a HTML

Pasar un diseño de Phothop a HTML

Transformar una imagen en Photoshop o Illustrator en HTML y CSS es uno de los pasos claves en el diseño web. Para mí representa un verdadero desafío analizar una imagen y descomponer sus elementos de una manera armónica y natural para que el código generado sea comprensible.

En Nettuts++ publican un muy buen tutorial de los pasos a seguir para que tu boceto en Photoshop se transforme en HTML. Curiosamente no ha sido escrito por un diseñador experimentado sino por una estudiante de filosofía que se dedica al diseño web como hobby.

  • Design and Code Your First Website in Easy to Understand Steps

Google Chrome Frame o Chrome como plugin de Internet Explorer

Sebastián Thüer · 23.09.2009 ·

Google Chrome Frame es una idea muy sencilla pero que transformará la experiencia de navegación de muchos usuarios: navegar con Internet Explorer usando el motor de Google Chrome. Básicamente, la idea es atraer a todos aquellos usuarios que siguen usando Internet Explorer por múltiples razones (por costumbre, comodidad o por que no puedan actualizar sus máquinas) pero hacer que el motor que permite visualizar las páginas no sea WebKit, la tecnología de código abierto que usa Google en su navegador.

La movida es interensate porque hace tiempo atrás comentaba la necesidad de seguir diseñando webs  para Internet Explorer 6, un navegador con múltiples problemas para soportar estándares y que hace mucho más lentos los tiemos de desarrollo habida cuenta de tener que testear y adaptar batante código para lograr una correcta experiencia de usaurio.

Ahora, los usuarios pueden descargarse Google Chrome Frame y seguir ejecutando Internet Explorer con naturalidad. Sin embargo, las páginas en realidad se verán tal como las muestra Chrome. Los diseñadores que quieran añadir soporte para Google Chrome Frame simplemente tienen que agregar este META TAG a sus páginas:

<meta-http-equiv="X-UA-Compatible" content="chrome=1">

De estar forma, logramos que Internet Explorer añada soporte para HTML5, obtenga un mejor rendimiento con JavaScript y podamos usar CSS con toda su potencia y que todo se vea como está previsto. Chrome Frame es compatible con IE6, IE7 e IE8.

El nuevo proyecto sacudirá a Microsoft que en su nuevo navegador apostó por trabajar con múltiples motores para visualizar las páginas y así asegurar compatibilidad con las páginas optimizadas para Internet Explorer 6.

¿Google Chrome no tiene plugins como Firefox? Tal vez no le interese rivalizar con la gente de Mozilla y decidió convertirse el mismo en un plugin para ganarle terreno al navegador que mantiene la mayor cuota de mercado. Y de paso permitir que nuevos proyectos como Google Wave sean accesibles para más personas.

  • Mas información en el blog de Google Chrome

¿Diseñar para Internet Exporer 6 o no?

Sebastián Thüer · 14.08.2009 ·

ie6nomore-logo

Desde hace unos días se viene hablando bastante sobre un post publicado en Digg acerca de que en el futuro no incluirá más soporte para Internet Explorer 6 (IE6). El viejo navegador de Microsoft que lleva 8 años en el mercado tiene una pobre performance cuando debe soportar los estándares web, varios problemas de seguridad y es un quebradero de cabeza cuando se quieren utilizar las últimas tecnologías disponibles.

El tema parece haber despertado un sentimiento latente en varios miembros de la comunidad de diseño y desarrollo web que han hecho pública su intención de abandonar el soporte para este navegador mediante la página página IE No More. Weebly, Justin TV, Disqus y otros jugadores de relativo peso han dicho basta y dejarán de gastar tiempo y dinero en asegurarse que sus sitios funcionen en un navegador que pese a sus limitaciones se resiste a morir: todavía el 10% de los visitantes que navegan por Digg lo hacen con IE6, un número importante si tenemos en cuenta que esta web ocupa el lugar 126 en el ranking de tráfico de Alexa. Y parece que un peso pesado como YouTube podría sumarse a a este movimiento. [Leer más…] acerca de ¿Diseñar para Internet Exporer 6 o no?

¿Qué debe saber un diseñador web?

Sebastián Thüer · 17.06.2009 ·

que-debe-saber-un-diseñador-webCada tanto alguien me dice que quiere ser diseñador o desarrollador web y me pregunta por dónde comenzar. No es fácil responder porque el diseño web como disciplina no tiene unos límites claros y, además, los perfiles de quienes quieren acercarse a ella varían enormemente: puede ser un programador, un diseñador gráfico o simplemente un entusiaste que quiere hacerse la página de su empresa u organización.

Se puede salir del paso diciendo frases genéricas como “hay que estar abierto a aprender de forma constante”, “hay que tener espíritu autodidacta” o “son muchas horas detrás de la computadora”, pero esto en realidad no sirve de mucho más que para esquivar con relativa elegancia el interrogante.

Creo que una forma adecuada para encarar la cuestión es tratar de identificar diferentes perfiles que abarquen las actividades más habituales que se suelen realizar hoy en día, a cada una de las cuáles les corresponde una serie de conocimientos y competencias específicas. [Leer más…] acerca de ¿Qué debe saber un diseñador web?

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 34
  • Página 35
  • Página 36
  • Página 37
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder