"Nunca hay una segunda oportunidad
para dar una primera impresión"
En Koncept Xperience, siempre estamos de acuerdo cuando hay que romper alguna regla del diseño, pero antes de violar la ley, es bueno preguntarse por qué lo quiero hacer, y qué conseguiré haciéndolo, ya que cuando las reglas se rompen por capricho, por lo general los resultados son desastrosos. Acá algunas muestras de estos horrores de diseño.1. Diseñar únicamente para el cliente y no para el usuario del sitio web
Este es uno de los principales errores que tienen los sitios web. Es cierto que el cliente siempre tiene la razón pero es nuestra labor como profesionales aconsejarle al cliente las opciones mas óptimas para el funcionamiento de su sitio.
Lo primero es identificar qué información es mas importante para el cliente y cuál es la mas popular para los usuarios. ¿Qué es lo mas buscado por sus clientes? ¿Cuáles son los problemas actuales que han tenido? Así podemos empezar a establecer la jerarquía de la información que incluiremos en el sitio Web.
Con esta información podemos empezar a crear un sitio que refleje no solo las necesidades del cliente sino del usuario también.
2. Que no se distinga lo mas importante
No todo debe ir en la primera página aunque el cliente diga que todo es importante!!!
Hay muchos sitios en los que no se ve claramente la jerarquía de información. Es importante resaltar lo importante y hacer mas sutil la información mas general. Lo que mencioné en el primer punto es válido aquí también.
Quiero que sepan que la sobredosis por información existe y es una muerte muy dolorosa. Por favor, no expongan a más gente a este tipo de atrocidades. Este sitio, heavenworks.com, ni siquiera entra completamente en una resolución de 1680 x 1050.
3. El estilo no es apropiado al cliente o a su audiencia, y no se ve profesional
Esto es un problema muy común. Aquí no se juzga si el diseño se ve cool o si es moderno, etc. Lo que se juzga aquí es si el diseño refleja la imagen que debe llevar el cliente. El diseño de un sitio web para un banco no es el mismo que el de un grupo de rock.
En este ejemplo, Mama’s Cheesies, es un sitio que vende ropa hecha a mano. Aunque sea un negocio casero, no hay excusas para diseñar algo tan desastroso. Para empezar, la imagen del fondo es demasiado chillona y le resta importancia a la información que tiene encima. No entiendo por qué el logo tiene un fondo de color verde opaco, quizás porque al colocar el logo por si solo sobre el fondo, el logo se perdía. El fondo también hace difícil leer el párrafo de Welcome. La foto con los productos está distorsionada, no esta centrada como el resto de la información y esto rompe todo el balance de la página.
El menú esta en el borde izquierdo pero no se nota mucho, primero porque no esta en el lugar donde nos esperamos que este y segundo porque el color del menú con los colores del fondo hacen que se pierda. Creo que por eso usan tanto las letras en negrita para ver si así se notan mas. La mayoría de estos problemas se hubieran solucionado con un fondo menos cargado.
Un ejemplo que sí funciona es Nicholas Deakins:
Aunque este sitio tiene un fondo llamativo, si funciona porque encaja bien con el branding de la compañía y el texto no está directamente encima del fondo. El contenido del sitio tiene su propio fondo blanco para que sea fácil de leer. Son capaces de mantener su personalidad joven y divertida sin sacrificar la información.
4. Muchos colores
Este es otro gran problema. Parece que no saben qué colores escoger y deciden ponerlos todos! Y el resultado es horrible =(
El uso de color en un sitio Web es muy importante porque le da al usuario pistas visuales acerca de la información. Puede servir para resaltar algo o no, para señalar si es un link o no, etc. Por ejemplo, si hacemos que los links sean siempre de un mismo color, es mas fácil para el usuario identificar fácilmente los links sin tener que poner la línea abajo de las palabras. Esto es un reto, porque el color de los links debe poder leerse claramente sobre los colores de fondo que se usen en el sitio y eso hace que pensemos un poco mas en la paleta de colores que vamos a usar, en vez de simplemente añadir otro color lo que resulta usualmente en un circo de colores en el sitio.
5. Demasiadas animaciones innecesarias
Por alguna razón aún hay personas que piensan que tener un montón de cosas animadas hacen que la página se vea moderna, desafortunadamente no es así. Aparte de hacer que la página se vea como si la hubieran hecho en los 80, las animaciones tienden a cansar la vista y hacen muy difícil que uno se pueda concentrar en la información que busca o que intenta leer.El uso de animaciones es un territorio peligroso porque hay una línea muy fina que divide a una animación buena de una mala. Así que hay que tener mucho cuidado.
El sitio Web de la Autoridad de Tránsito y Transporte Terrestre es un ejemplo de una página con animaciones gallas. ¿Es necesario animar esos títulos? ¿Hace que la página se vea mas moderna? ¿Ayuda al usuario en algo? ¿Hace que la página se vea mas atractiva?
Si la respuesta a la mayoría de estas preguntas es no, no lo usen.
6. Mal uso de los Elementos
Regresamos al sitio de la autoridad del tránsito.
Miren los íconos en este menú. Uno es en 3-D, otro en 2-D y monocromático, otro es a colores. Aparte de eso se ven pixelados. La tipografía del segundo menú es mucho mas grande que la del menú principal. Los títulos y subtítulos no mantienen un estilo específico.Todas estas cosas hacen que no se sienta una continuidad en el diseño y por eso se ve desordenado.
Y tampoco es bueno distorsionar fotos ( o logos, o lo que sea).
7. Que no se entienda de que trata el sitio
No estoy segura qué hace este tipo. ¿Es profesor de esa universidad? ¿Qué tiene que ver el panda haciendo volteretas? ¿Por qué no cropearon el logo de arriba? Aquí vemos otro ejemplo de animaciones innecesarias y colores que no combinan y son difíciles de leer sobre el color de fondo. Pero eso no es todo, la foto mide 1440 x 2160 y la achatarona ese tamañito.
El diseño debe ayudar a identificar fácilmente el tema del sitio. El propósito es no darle mas trabajo al usuario. Mientras mas trabas les pongamos menos oportunidad tenemos de que pasen tiempo en nuestros sitios.
8. Mal diseño de menú
Regresamos al mismo tipo. Si hacemos click en cualquiera de las opciones en el menú nos vamos a una página completamente distinta y la única manera de regresar a la página anterior es usando el botón de regreso en el browser.
El menú siempre debe estar visible y en un lugar que sea familiar para el usuario. Por ejemplo, si el menú principal esta en la parte de arriba, debe mantenerse en ese lugar en las otras páginas porque de esa manera el usuario sabe donde encontrar el menú y también porque es más fácil para nosotros a la hora de hacerle cambios.La única excepción a esta regla es en el Home (página principal), que puede ser un poco diferente a las demás páginas ya que es la carta de presentación. Y claro que si es un website para una promoción de un producto con una audiencia específica se puede hacer algo mas loco, pero hablando en términos generales yo diría que es mejor mantener las cosas organizadas.
9. Validar el website
¿Alguna vez se han encontrado con un sitio que se ve bien en Firefox pero no en Internet Explorer o viceversa? Es porque necesitan validarlo. A veces se necesita hacer un style sheet especial para Explorer (porque Explorer es “especial”).¿Qué es lo que se valida? HTML, PHP, CSS y los DOCTYPEs. pero si usas Flash esto no aplica.
Este es el W3C Markup Validation Service. Es gratis. Solo escribes el url que quieres validar y te revisa el código.
