Aprendiendo de Microsoft: 10 trampas de diseño para evitar
Hoy analizaremos las prácticas y tendencias de diseño web del nombre más importante en software para ver si podemos aprender algo sobre algunos errores que debemos evitar en nuestro propio trabajo.
No dude en comentar si está de acuerdo o en desacuerdo con las sugerencias a continuación. Como diseñadores profesionales, su conocimiento es valioso y espero sus pensamientos.
Explore los recursos de diseño
El despotricar ocasional
Para todos los que odian los artículos llenos de comentarios, pido disculpas porque esta publicación es un poco dura a veces. Normalmente prefiero elogiar el buen diseño por encima de criticar el mal, pero cuando David Appleyard y yo decidimos hacer una publicación sobre las tendencias de diseño de Microsoft, parecía haber mucho más que aprender sobre las cosas desordenadas, feas y / o desaconsejables que hacen que la alternativa.
Para interrumpirlo en los comentarios, no mencionaré ni haré una sola comparación con Apple en el análisis a continuación. Esto no pretende ser un argumento de PC versus Mac en lo más mínimo, sino más bien una mirada a lo que creemos que son prácticas realmente pobres en diseño y desarrollo web. Para ser justos, Microsoft es una compañía de gran éxito y no está fallando debido a ninguno de estos problemas. De hecho, como señalamos a continuación, Microsoft realmente parece tener algunos diseñadores estelares en el equipo para ciertos sitios, simplemente sugerimos que se implemente un mayor nivel de control de calidad en todos los ámbitos.
Con eso en mente, analicemos algunos lugares en los que Microsoft parece quedarse corto en sus prácticas de diseño y desarrollo y cómo puede beneficiarse de este conocimiento.
# 1 Tenga cuidado al ordenar ciertos complementos
Si hemos aprendido algo de los recientes conflictos entre Apple y Adobe es que la creación de sitios completamente dependientes de complementos de terceros cerrados puede eventualmente generar serios contratiempos. Microsoft parece estar repitiendo este mismo error a medida que su propia red de sitios se vuelve cada vez más defensora de Silverlight.
Mientras navegaba por los diversos sitios de Microsoft que se preparaban para este artículo, Windows me acosaba constantemente y me informaba que no había instalado Silverlight y que, por lo tanto, no podía experimentar la página web de la forma en que debía ser vista. Mi pregunta es, "¿por qué tomar esta ruta?" Especialmente cuando hablamos de presentaciones de diapositivas y animaciones simples que se pueden hacer con tecnologías más ubicuas. De acuerdo, Microsoft es dueño de Silverlight, por lo que tiene sentido desde el punto de vista comercial para ellos respaldar su inversión, pero eso no significa que sea la mejor opción para que te subas a su carro.
Tanto si eres un gran fanático de Silverlight como si no, mi consejo es que seas extremadamente cauteloso al basar la funcionalidad de tu sitio en esta o cualquier otra tecnología similar. A medida que el debate sobre si tiene sentido o no desarrollar sitios con Flash continúa calentándose, los sistemas de segunda línea como Silverlight se vuelven aún más una apuesta. Siempre que sea posible, adhiérase al código y a las herramientas que cumplen con los estándares y que no requieren ningún trabajo o instalación adicional por parte de sus visitantes.
# 2 Mira tu resolución
Esta es una de mis mayores quejas sobre Microsoft simplemente porque parece un diseño descuidado. Indudablemente, hay una delgada línea entre caminar para mantener el tamaño de su archivo bajo para aumentar la usabilidad y mantener sus imágenes limpias y nítidas, pero no puedo evitar sentir que Microsoft parece ser más propenso a mostrar JPG feos e irregulares que, literalmente, cualquier otro sitio profesional que he visto en los últimos años.
La cantidad cada vez menor de usuarios de acceso telefónico a Internet continúa impulsando tamaños de imagen aceptables hacia arriba y hacia arriba. Esto de ninguna manera implica que no debe tener especial cuidado en hacer todo tan pequeño como sea razonable, pero en el momento en que comienza a pesar tanto en el diseño que reduce drásticamente la calidad aparente del sitio, ¡las imágenes se vuelven autodestructivas!
Estás viviendo pura ironía si usas imágenes para que tu sitio se vea mejor, pero en última instancia, reduzcas tu atractivo estético en el proceso. Cuando sea posible, obtenga una vista previa de sus imágenes procesadas en diferentes monitores y preste mucha atención a la cantidad de distorsión y artefactos que considere aceptables.
# 3 desorden organizado
A veces puedes seguir todas las reglas de diseño obvias y aún así terminar con algo que parece visualmente inferior. Al navegar por los sitios de Microsoft, me encontré con innumerables áreas como la siguiente que parecían desordenadas a pesar de sus intentos de organización basada en columnas.
¿Entonces, cuál es el problema? En pocas palabras, aquí está sucediendo una tonelada en un espacio relativamente pequeño. A pesar de que definitivamente han intentado organizar el contenido y mejorar la legibilidad visual a través de íconos, el resultado final todavía está bastante desequilibrado.
Si observa de cerca lo que está sucediendo aquí, se siente como cuatro columnas de información diseñadas por cuatro personas diferentes que se han agrupado. El lado izquierdo parece realmente pesado con imágenes en comparación con el derecho, el color del texto es un poco esporádico, el contenido está escalonado y las columnas carecen de suficiente espacio para respirar para que parezcan las áreas independientes que son.
La lección aquí es tener cuidado de empaquetar un área única de su página demasiado llena de información dispareja. Indudablemente, hay muchas ocasiones en que la situación exigirá mucho contenido, pero la organización debe manejarse de manera consistente y atractiva, como se ve en los hermosos ejemplos a continuación (de sitios que no son de Microsoft).
# 4 inconsistencia
A partir de Microsoft.com, abra los gigantescos menús desplegables de navegación y elija un área del sitio para visitar. No importa en qué enlace haga clic, la página resultante se verá bastante diferente a la página de inicio y será diferente de la mayoría de los otros enlaces disponibles en el mismo menú desplegable.
Explorar el sitio de Microsoft es como girar una ruleta. Prácticamente no tiene idea de dónde va a aterrizar y qué esperar de la página siguiente. Algunas páginas presentan fondos suaves mientras que otras usan gradientes suaves o incluso círculos explosivos. La mayoría de las páginas parecen favorecer el azul, pero no necesariamente el mismo azul, y también hay muchas páginas que ignoran la tendencia azul por completo.
El punto es, ya sea que su sitio tenga dos páginas o doscientas, la consistencia es imprescindible. Hace que los usuarios se sientan más cómodos cuando pueden familiarizarse con la forma en que funciona y se ve un sitio dentro de unos segundos. Darles algo drásticamente diferente cada pocas páginas hace que la navegación sea una experiencia más confusa y menos eficiente.
Además de esto, existe la idea de que crear una marca fuerte y consistente es solo un buen negocio, ya que ayuda a los clientes a relacionarse con su empresa de una manera más personal. Es cierto que Microsoft está haciendo malabarismos con muchas marcas y micrositios diferentes que provienen de la página de inicio, pero incluso entre lo que podría considerarse las páginas principales de Microsoft.com, los temas de imagen y los métodos de navegación parecen drásticamente diversos.
# 5 Diseño centrado en imágenes prediseñadas
Obviamente, esta sugerencia es un poco absurda, ya que las imágenes prediseñadas y Microsoft Office siempre se han entrelazado inexorablemente. Sin embargo, el diseño de iconos ha recorrido un largo camino desde 1995 y es hora de abandonar ese estilo específico en las imágenes que usa.
Los ejemplos de arte anteriores extraídos de varias páginas de Microsoft simplemente me hacen estremecer, especialmente ese horrible logotipo de "Desarrollador principiante". No tengo idea de por qué un boomerang está atacando una planta o si el monitor mágico de la computadora está ayudando en el ataque o huyendo de la escena. Todo lo que sé es que la comunicación visual aquí es un desastre indescifrable.
Esta es una de las razones principales por las que existen las galerías CSS como la nuestra. No para que puedas robar el diseño de otros, sino para que puedas echar un vistazo al estado del diseño en la década en que te estás desarrollando. Navegar por estas galerías es como visitar tiendas de ropa populares en el centro comercial para mostrarle a tu tía loca que ella no tiene que vestirse como alguien del show de Sunny and Cher.
Siempre siéntase libre de romper los límites y moverse más allá de las tendencias actuales de diseño comenzando el suyo. Solo tenga cuidado de permanecer tercamente estancado durante años mientras el resto del mundo sigue adelante.
# 6 Texto desalineado desalineado
Otra tendencia que es difícil pasar por alto en los sitios de Microsoft son las columnas de texto constantemente rotas que desbordan sus límites obvios.
Este es bastante fácil de solucionar y realmente solo requiere un poco de esfuerzo y atención. Solo asegúrate de aprovechar las herramientas gratuitas como el laboratorio del navegador de Adobe para asegurarte de que tus diseños no se rompan cuando se visualizan en los principales navegadores.
Aunque el diseño CSS es una bestia ciertamente complicada cuando se trata de la coherencia entre navegadores, pequeños errores como este realmente reducen la calidad de su sitio y valen el tiempo de resolución de problemas que tardan en resolver.
# 7 Mala alineación
A veces, una página determinada me presentaba el desafío de decidir qué diseño no era fácil señalar. Por ejemplo, en la página a continuación, originalmente consideré elegir el uso de una pequeña captura de pantalla que no se agranda al hacer clic en ella, pero cuanto más miraba la página, más me confundía sobre lo que estaba pasando. El diseño.
Si está familiarizado con la teoría básica del diseño, sabe que aprender a implementar alineamientos sólidos y consistentes es la clave para un buen diseño de página. La extraña mezcla de alineaciones visuales izquierda, central y derecha que tienen lugar en el sitio de arriba, junto con el espacio vacío incómodo cerca de la parte superior, crea un flujo visual realmente extraño de la información que se presenta.
Además, si visita la página de arriba, verá que el contenido en su conjunto parece estar tratando de centrarse, pero realmente se ve desviado por la tira en el medio, lo que hace que la página parezca bastante derecha del centro.
# 8 Desorden de anuncios
Los blogs de diseño gratuitos como este tienen que presentar muchos anuncios, es simplemente la forma en que generamos ingresos y continuamos proporcionándole contenido. Sin embargo, si está ejecutando un sitio profesional de negocios, debe considerar cuidadosamente si desea restarle importancia a su mensaje y profesionalismo con la publicidad.
Las páginas de Microsoft.com están llenas de varios anuncios que realmente reducen la estética de la página en la que se encuentran. A veces, estos anuncios apuntan directamente a otras páginas de Microsoft, a veces a otras empresas o socios. No hay nada de malo en el concepto de dirigir el tráfico a otras partes de su sitio, pero la forma en que lo logra puede marcar una gran diferencia.
Si hay una cosa que la mayoría de los usuarios de la web han aprendido a detectar, ignorar y posiblemente incluso resentir, es un anuncio publicitario. No quiero decir que este tipo de publicidad no funcione con una orientación y diseño adecuados, o incluso decir que los usuarios de Microsoft no están haciendo clic en estos, pero me pregunto si no hay una mejor manera.
Si Microsoft desea dirigir el tráfico a sus teléfonos móviles y otros proyectos, la forma más fácil de hacerlo es configurar un sistema de anuncios desordenado, no estándar (diseño inteligente) que se extienda por todo su sitio. Sin embargo, parece que la integración de este contenido como parte del sitio real tendría una tasa de clics mucho mejor, ya que más usuarios tomarían nota del mensaje y no tendrían que romper ninguna regla interna sobre evitar los anuncios publicitarios a toda costa.
Además, dicha integración obligaría a los diseños a ser más consistentes porque se crean como una sola unidad en lugar de por equipos separados. Una vez más, este es un escenario en el que puedo entender la rentabilidad del enfoque de Microsoft, pero quiero advertirle que no siga su ejemplo. Lo más probable es que los sitios que diseñe no rivalicen con la mega red de sitios de Microsoft y, por lo tanto, es más probable que se presten a un diseño sólido e integrado para que pueda evitar el desorden visual del exceso de anuncios.
Obviamente, hay muchos géneros de sitios donde esto no se aplica en absoluto, ya que se espera que la publicidad esté presente. Solo asegúrese de considerar si su sitio debe estar dedicado a vender su producto o servicio, o si requiere ingresos adicionales y distracción de publicidad.
# 9 La falta de sala de respiración
En el diseño de impresión, los diseñadores configuran cada página con un "área en vivo". Esto suele ser un recuadro rectangular desde el recorte de la página que define el área en la que es seguro colocar contenido para evitar el corte de la página o la aglomeración de bordes. La mayoría de los diseñadores web hacen esto intuitivamente, ya que es bastante obvio que no desea que su contenido esté demasiado apretado contra el costado del navegador.
Sin embargo, como muestra la captura de pantalla anterior, hay algunas páginas de Microsoft que no parecen tener en cuenta esas opiniones. En cambio, el contenido comienza tan pronto como la página lo hace con un margen o margen horizontal cero (al menos en los navegadores con los que verifiqué).
El panel de navegación no parece que esté integrado al costado de la página, parece que se está cortando (de nuevo, puede estar haciendo eso debido al hecho de que no tengo IE). La lección aquí es simple: siempre sea consciente del borde de la ventana del navegador. A menos que esté incumpliendo la regla de un efecto de sangrado visual obvio, coloque su contenido, especialmente las porciones y enlaces interactivos, dentro de un margen seguro para que los usuarios no se sientan abarrotados cuando intenten usarlo.
Si observa de cerca la captura de pantalla anterior, puede ver algunos ejemplos más de los diseñadores de Microsoft que simplemente no consideran si su texto fluirá correctamente en todos los principales navegadores. Esta es una tendencia bastante divertida para Microsoft, ya que muchos diseñadores web pasan sus días intentando hacer adaptaciones especiales para Internet Explorer de Microsoft, pero la compañía multimillonaria no puede molestarse en devolver el favor al verificar su propio trabajo en otros sistemas.
# 10 no aprovechar su talento
Aunque hay muchos comentarios negativos sobre los diseñadores web en Microsoft, me sorprendió gratamente ver que, de hecho, tienen bastantes sitios y páginas que se ven simplemente increíbles.
Los ejemplos anteriores son solo dos de los muchos lugares en los que creo que Microsoft realmente lo eliminó del parque con su diseño, opciones de color, gráficos y compatibilidad entre navegadores. Lo que esto me dice es que en algún lugar entre el vasto grupo de cubículos de esta compañía hay personas realmente talentosas capaces de sacar a la compañía completamente de su depresión de diseño.
Estos diseñadores, sean quienes sean, deben ser promovidos a puestos que les permitan cooperar juntos y establecer estándares consistentes que, literalmente, todos los diseñadores web de Microsoft se verían obligados a seguir. En lugar de un laberinto de mezclas de contenido desconectadas, podrían crear una red fuertemente marcada de sitios hermosos que claramente pertenecen a la misma familia.
La sugerencia final que le presento es encontrar este tipo de personas sobresalientes en su propia empresa y darles voz. En lugar de lamentarse por la falta de talento entre los otros miembros de su equipo, designe a los diseñadores y desarrolladores más fuertes para puestos en los que puedan influir en cada pieza de comunicación visual que se implementa asociada a una marca específica.
Esto se puede hacer de manera eficiente y efectiva creando pautas de marca claras, consistentes y estrictas que se distribuyan a cada diseñador y desarrollador para cada marca distinta con la que trabaje.
Pensamientos finales
En resumen, aunque Microsoft posee bastantes diseñadores web extremadamente talentosos, el trabajo de estos individuos se ve eclipsado casi por completo por la gran cantidad de contenido que ni siquiera cumple con los estándares que esperaríamos de los diseñadores y desarrolladores novatos en su primer año. .
Afortunadamente, podemos usar compañías como Microsoft como ayudas de instrucción para ilustrar claramente que, de hecho, hay una manera incorrecta de hacer las cosas. Nunca imagines que solo porque eres un autónomo solitario o una pequeña empresa de diseño, no puedes superar por completo a las megacorporaciones y firmas de diseño en lo que respecta a la calidad del trabajo que realizas.
Descubrí que a menudo es más fácil encontrar ejemplos de diseñadores de calidad en las oficinas domésticas de todo el mundo que sentarse en los escritorios de las grandes empresas. Consuélese con el hecho de que no tiene que coordinar y controlar la calidad de cientos de diseñadores. Haga su mejor esfuerzo para crear algunos de los mejores sitios en la web con la pequeña cantidad de recursos que posee junto con una gran cantidad de impulso personal para crear diseños maravillosamente funcionales.
