Encontré este genial post que ilustra perfecto los beneficios de la claridad y la simplicidad. El ejemplo utilizado es perfecto: imaginemos que necesitamos conocer la hora.
Esto es simplicidad:
Esto es claridad:
Y finalmente, esto es lo que la mayoría de diseñadores web ofrecen como solución:
Permítanme recurrir al lugar común, pero después de ver esto, más claro ni el agua.
Es cierto que no están las cosas para muchas bromas y que a diario escuchamos noticias que nos resultan estremecedoras o, al menos, poco esperanzadoras. Miramos al 2010 con cierta reticencia y en nuestras mentes se nos ha establecido como inquilina la idea de que esto no tiene pintas de mejorar a corto plazo.
Los medios de comunicación y la publicidad vienen a reforzar en muchos casos con sus mensajes esa idea de que seguimos instalados en una crisis. Por ello creo que actualmente recobra más valor aquellos mensajes que pueden transmitirnos algo de humor. Bien es cierto que el humor no nos puede hacer cambiar
sustancialmente la realidad, pero si nuestro ánimo y la percepción que tenemos como individuos de esa realidad.
Quizás tengamos que aplicar la esencia del humor judío “reír para no llorar” ya que sin un sentido dramático de la vida, el humor resulta pobre. “El humor es la gentileza de la desesperación” como decía Oscar Wilde.
Pero además si lo que queremos o pretendemos con ese humor es vender un determinado producto deberemos considerar que éste debe estar íntimamente relacionado con el beneficio del producto.
“Si no hay conexión con la ventaja que ofrece la marca, hacer reír sale carísimo”
Uno de los problemas más comunes entre los diseñadores y que suelen causar duda y confusión se debe a la inexperiencia y algunos clientes ansiosos que inocentemente espera e incluso exige ver no una, sino varias soluciones a un problema. Esto puede incluir una serie de conceptos verbales o visuales, así como una gran variedad de propuestas de diseño, imágenes y propuestas de color, así como varias opciones de tipografías.
Necesita variedad para dar gusto a sus preferencias personales: “A ver pon este logo, con esta tipografía”, ¿Por qué no le pones el color de la propuesta uno a la propuesta tres”, ¿Y si colocas este encabezado, pero usando los colores de la propuesta dos? ¿A poco no les suena familiar este escenario? También es probable que insista en revisiones interminables, con plazos poco realistas: El clásico lugar común “Lo quiero para ayer…” con la consecuente perdida de tiempo.
Ya sabemos lo que suele ocurrir cuando los programadores diseñamos interfaces de usuario 
. Para seguir profundizando en este curioso e inevitable fenómeno, Ian Voyce ha publicado hace unas semanas el divertido post The 7 signs your UI was created by a programmer, en el que recoge pistas que nos ayudarán a determinar si el interfaz de la aplicación que usamos a diario está creado por un diseñador experto en usabilidad, o ha sido el propio desarrollador el encargado de dichas tareas.
Bueno, en realidad se trata más bien de una lista con malos hábitos en el diseño de interfaces, y no necesariamente creados por programadores, pero ciertamente me he reconocido en alguno de los puntos y me han hecho gracia. Los cito y comento a continuación:
hacernos conscientes de ello, nada como dar vacaciones un rato al animalito y ver lo bien que manejamos determinadas aplicaciones. . Me confieso: durante años, he rodeado de groupboxes todo lo que se me ponía por delante, porque me parecía más agradable a la vista. Ahora lo estoy dejando 
Iconos creados en el IDE, je, este es otro de mis puntos fuertes: soy un fiera diseñando iconos desde el editor de Visual Studio. El problema es que, a pesar de lo orgulloso que estoy siempre de mis creaciones artísticas, no quedan bien e incluso introducen un cierto tufillo a cutre en las aplicaciones.
D. Buena analogía. Algo parecidos serían los mensajes del tipo “Este mensaje no debería aparecer nunca” que alguna vez he encontrado por ahí, auténticos actos de rebeldía contra sus respectivos creadores.
Esto es algo muy frecuente de ver. Por ejemplo, el otro día accediendo a una aplicación web para la que es necesario contar con certificado digital, me saltó la alerta que muestro a la derecha:
Sí, probablemente los componentes Java necesarios para la autenticación y firma electrónica hayan sido detectados con éxito, pero… ¿realmente era necesario interrumpir mi navegación para informarme de ello? ¿Un usuario, sabrá interpretar el mensaje? Y en cualquier caso, ¿le aporta algo? No sé, no sé… me da que es un alert() creado por un desarrollador durante las pruebas y que al final se quedó ahí para la posteridad.
Hasta aquí las citadas en el post original, aunque siguiendo en la misma línea, puedo añadir algunas más de propia cosecha:
Y justo en el lado contrario, pero igualmente desconcertantes, son los cuadros de diálogo de introducción de datos sin ningún botón de aceptación, en los que su cierre (con la X de la esquina superior) implica el salvado de datos.
). Nunca he entendido la compleja lógica que hay detrás del “eso no pega con aquello”, que algunos/as parecen dominar de serie.Artículo original: The 7 signs your UI was created by a programmer
Muchas veces quienes nos dedicamos al diseño buscamos herramientas para no cometer errores en esta cuestión, y es muy difícil encontrar este tipo de consejos de profesionales. Navegando en Noupe.com encontré un excelente artículo sobre 10 cosas que no se deben hacer en diseño web.
Como el artículo originalmente se encuentra en inglés aquí les envío una traducción con los puntos que consideré más importantes, pero como siempre les recomiendo que lean el escrito original ya que es excelente. Los ejemplos que se encuentran en el post son de sitios que utilizan estos consejos correctamente, para visualizar qué se está queriendo decir.
El espacio vacío o espacio negativo, aquellos espacios que se encuentran sin contenido son una herramienta muy importante en el diseño. Afecta cómo los usuarios perciben la importancia de los distintos elementos. Suficiente espacio en blanco debe ser utilizado entre nuestras columnas, los diferentes elementos de página e incluso entre las letras individuales, líneas y párrafos. Tanto los componentes como el espacio vacío deben ser considerados como elementos de igual relevancia en el diseño completo.
No debemos poner demasiado en un solo lugar o una sola página. Muchas veces es mejor tener más espacios cortos que uno solo largo y que contenga información que no es relevante.
Al menos que los sitios que estamos diseñando sean completamente estáticos, es relevante mostrar y dar relevancia al contenido nuevo. Aquellos usuarios que regresan estarán interesados en qué ha cambiado desde su última visita. Esto es algo que se hace automáticamente en los blogs, pero deberíamos tenerlo en cuenta para todo tipo de sitios.
Las formas de hacerlo son muchas, podemos tener una sección específica de contenido nuevo, o enlazarlo a través de textos y darles relevancia en la página principal. Lo más importante es hacer que esta información sea de fácil acceso para nuestros usuarios.
Necesitamos que los enlaces se distingan fácilmente del resto de los elementos, ya que son uno de los elementos más importantes del sitio. Aquí deberemos tener en mente dos cosas: primero, asegurarnos de que los enlaces se diferencien del resto del texto. Podemos hacerlo con colores, subrayado o cualquier otro atributo de texto que se nos ocurra, (Broma del autor: todo menos el texto intermitente 
). Lo segundo a tener en cuenta es no hacer que el texto regular de lectura, se asemeje a los enlaces, no debemos subrayar los textos si no son hipervínculos, ya que puede prestarse a confusión.
Es importante conocer las características de cada formato de imagen para saber cuál utilizar en cada caso, ya que esto puede afectar que no se vean como deseamos o bien que pesen más de lo adecuado. Los formatos para utilizar en línea son JPEG, GIF y PNG.
El caso de JPEG es excelente para visualizar millones de colores y sombras ya que reproduce el color en 24 bits. La contra de utilizar este formato es que si necesitamos que pese menos, pierde calidad. Además no se puede utilizar transparencia por lo que la imagen siempre será recta.
Si hablamos de GIF, deberemos tener en cuenta que solo reproduce color en 8 bits (256 colores en total). Esto significa que no puede utilizarse para imágenes con degradados. Pero si contamos con imágenes de colores planos podemos obtener muy buen peso de compresión casi sin perder calidad.
Finalmente el formato PNG abarca fotografías y gráficos. Permiten transparencias, siempre y cuando los exploradores lo permitan, lo que les da una ventaja frente al GIF. Y no pierden calidad de compresión por lo que le ganan al JPG. Permiten reproducir imágenes de 8 y 24 bits por lo que pueden reemplazar los formatos anteriores. Los PNG no son tan buenos como el JPG pero si son mejores que los GIF.
El título que viene por defecto en Dreamweaver es “Untitled Document”. Es un error muy simple de arreglar que no debería ocurrir.
Muchos CMS utilizan el nombre del sitio y bitácora como el título por defecto de todas las páginas. Algunos agregarán el nombre específico, pero no todas. Deberíamos asegurarnos de que todos los nombres de las páginas en nuestro sitio contengan un título único individual, y que aquellas con contenido específico muestren esa especificidad antes que el título.
La navegación debe ser visible para nuestros usuarios, tanto para localizarla como para utilizarla. Si bien hubo una moda que intentaba esconder la navegación para integrarla al diseño, artísticamente puede ser una buena práctica pero no es amigable para el usuario.
Aún utilizando menúes desplegables podemos hacer el sitio menos amigable. Necesitamos que nuestros visitantes encuentren exactamente lo que están buscando con el menor esfuerzo necesario.
Debemos asegurarnos de que los usuarios puedan modificar el tamaño de los textos basados en sus propias preferencias. Esto se realiza a través de la utilización de los tamaños EM en lugar de los basados en pixeles (los que vienen por defecto). Es algo relativamente simple de solucionar y mejora el uso y acceso del usuario.
Los usuarios deben saber inmediatamente de qué se trata el sitio, no importa en qué página aterricen. Esto puede lograrse a través del uso de etiquetas o indicaciones similares a través de los títulos de página, o bien en los encabezados de las individuales. De cualquier manera, debemos asegurarnos que el objetivo sea visible al lector desde los primeros segundos en los que llega a nuestro sitio.
Los colores llamativos, en especial aquellos muy contrastantes, pueden despreciar la visual de nuestro sitio. No queremos hacer nada que provoque que el usuario deje nuestro sitio. La irritación visual algo que hará que muchos dejen nuestras páginas a raíz de los contrastes de colores. Nuestro sitio debe mostrar su contenido y evitar cualquier cosa que haga perder la atención a su meta.
Según la autora del post original, los anuncios de publicidad deben estar separados del contenido del sitio. Etiquetar nuestros avisos publicitarios tendrá completo sentido para nuestros usuarios y hará nuestro espacio más confiable. Es muy importante con anuncios de texto, es necesario que estos enlaces se encuentren diferenciados de los hipervínculos del sitio.
Tags: Consejos
Escrito por Tamara
Artista multimedios, trabaja desde hace 7 años en varias disciplinas relacionadas con el mundo tecnológico, video, animación y procesamiento de imágenes. Arte y diseño son quienes alimentan su mojo.
El Martes, Agosto 4th, 2009 a las 17:15 y fue guardada bajo Diseño.