Crítica de diseño web # 43: Abdominales en el trabajo
Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
La crítica de hoy es Abdominals at Work, un sitio web de aplicaciones para iPhone.
Explore los recursos de diseño
Si desea enviar su sitio web para que aparezca en una futura Crítica de diseño, solo le llevará unos minutos. Cobramos $ 34 por criticar su diseño, ¡mucho menos de lo que pagaría si un consultor visitara su sitio! Puedes encontrar mas aqui.
Acerca de la aplicación Abdominals at Work
“Método pasivo de contracciones isométricas. Si pasa mucho tiempo frente a una computadora o la televisión, puede usar este método para ejercitar los músculos abdominales mientras realiza otras tareas. Eliges la hora y el lugar, y la aplicación te enseñará cómo hacer el ejercicio, marcando tu ritmo y la intensidad por vibración o melodía de manera discreta ".
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Mis pensamientos iniciales en esta página fueron bastante positivos. Me gusta el aspecto general del sitio y cómo refleja de cerca el de la aplicación. Una escena de cielo nublado definitivamente no me sugiere hacer ejercicio, pero la aplicación se trata de hacer ejercicio de una manera relajante, así que supongo que todo se une bien.
Los colores y los gráficos son bastante amigables y crean un ambiente acogedor. Mi aspecto favorito es lo simple que se mantuvo el contenido general: solo un iPhone con algunas capturas de pantalla, una breve descripción, algunas formas de compartir y un enlace destacado a la tienda de iTunes, donde puede obtener más información y descargar la aplicación. Es suficiente para que te intereses sin agobiarte.
Aunque me gusta la dirección general de la aplicación, como siempre, tengo muchas sugerencias para mejorar. Analicemos algunas áreas específicas para ver qué cambios positivos podrían hacerse.
Sonido
Todos los que nos han enviado una solicitud para una Crítica de diseño para un sitio que contiene sonido reciben el mismo consejo. Siempre prefiero que los desarrolladores del sitio den a los visitantes la opción de agregar sonido inicialmente en lugar de eliminarlo. La navegación web es una experiencia típicamente silenciosa y los ruidos repentinos no harán enojar a sus visitantes.
Es cierto que este sitio funciona mucho mejor que la mayoría en esta área. Aunque el sonido comienza automáticamente, es al menos un tema oceánico bastante sereno y relajante con pájaros y olas. También puede desactivar el sonido haciendo clic en la imagen del pájaro chirriando cerca de la parte inferior de la página.
Tengo varios pensamientos sobre esto. Primero, tuve que desplazarme para encontrarlo (aunque ciertamente estoy en una pequeña pantalla de MacBook). Si alguien visita su sitio en el trabajo, en una biblioteca o en cualquier otro lugar público, no querrá que tenga que pelear porque intentan avergonzosamente encontrar la manera de apagarlo. Se podría pensar que el usuario simplemente presionaría el botón de silencio, pero con mayor frecuencia probablemente cerrará la ventana lo más rápido posible.
Además, definitivamente puedo ver cómo el pájaro con notas musicales que salen sugiere un control de sonido, pero tiene una desafortunada semejanza con un enlace de pájaro de Twitter como lo vemos ahora en casi todos los sitios en la web. Esto hace que no sea evidente de inmediato que el pájaro es el control de sonido porque no hay texto para reforzar el mensaje.
El consejo simple aquí es, si vas a seguir con el audio de reproducción automática, coloca el control cerca de la parte superior de la página y deja más claro lo que hace. Sugiero un gráfico de gaviota (el pájaro de Twitter no coincide con el tema del océano) y un mensaje de "sonido activado / desactivado" cerca del pájaro. Además, haga que la animación de la nota musical se detenga cuando el sitio esté silenciado y comience cuando el sonido esté activado en lugar de continuar todo el tiempo.
Animación
Además del sonido, la página tiene varias nubes flotantes que pasan por delante y por detrás del contenido. Esto agrega un poco de diversión a la página y es ciertamente más interesante que los gráficos estáticos.
En su mayor parte, las nubes no impiden la usabilidad, pero ocasionalmente interfieren con la legibilidad del texto. Además, como con cualquier animación en bucle, ¡pueden volverse un poco monótonos si pasas tanto tiempo como yo mirando el sitio! Una idea sólida que vimos en nuestra Crítica de ToonyTuts fue un simple sistema de control de dos íconos para detener la música y / o las nubes animadas. El tema del sitio era muy similar al sitio de hoy, así que creo que un control similar funcionaría perfectamente aquí.
Mensajes y mensajes de texto
Creo que el sitio hace un buen trabajo al dejar muy claro que estamos hablando de ejercicios abdominales. Sin embargo, podría ser un poco técnico para una página tan divertida. Considere el título principal "Método pasivo de contracción isométrica". Es agradable y elevado, pero realmente no tiene un tono amistoso, ¿verdad?
No tiene que deshacerse de este mensaje, pero tal vez considere incorporarlo en el párrafo a favor de un título más interesante como "¡Cree un paquete de seis mientras mira televisión!" Este no es el mejor ejemplo, pero se encuentra en el centro de mi sugerencia. Un titular como este te atrae y te hace querer aprender más en lugar de apagarte porque te sientes estúpido y no tienes a mano tu Tesauro.
Quizás el mayor problema que tengo con toda la página es el texto amarillo en el fondo azul. Estos dos colores chocan a lo grande en el texto pequeño y hacen que esta información sea muy difícil de leer.
El problema es el clásico conflicto versus complemento en la teoría del color. Cuando dos colores simplemente no son lo suficientemente diferentes, tienden a entrar en conflicto entre sí, especialmente cuando uno se coloca sobre el otro. Considere el siguiente ejemplo y cuánto más legible es el texto amarillo más claro y menos saturado que la versión que lo precede.
Ahora, me doy cuenta de que estos son de hecho los colores de su aplicación, por lo que no es lógico cambiarlos en el sitio. Por lo tanto, mi sugerencia es simplemente eliminar el énfasis amarillo en el texto y usar algo más, texto en negrita, un subrayado, etc., que no interfiera con la legibilidad.
iPhone
El gráfico de iPhone con la presentación de diapositivas es extremadamente popular para los sitios web de aplicaciones de iPhone, y por una buena razón. Deja en claro al instante de qué se trata el sitio. Sin embargo, creo que esto podría refinarse un poco.
Para empezar, los pequeños puntos que sirven como navegación para la presentación de diapositivas tienen un círculo de carga giratorio junto a ellos. Esta pequeña animación nunca se detiene, entonces, ¿para qué sirve? Cuando veo que gira, esto sugiere que la página no ha terminado de cargarse (se nos ha enseñado que esto es lo que significa este gráfico) y cuando nunca termina de cargarse, hace que parezca que su sitio está roto. En pocas palabras, este gráfico distrae, confunde y no tiene ningún propósito práctico, quítelo.
Además, como una pequeña molestia, el geek de Apple en mí no puede evitar notar que la imagen del iPhone está desactualizada. El iPhone 5 está casi sobre nosotros y este sitio todavía no tiene un gráfico del iPhone 4 todavía. Lo sé, es ridículo tener que seguir con esto, pero como el sitio es en realidad para una aplicación de iPhone, esto puede ser importante. Tener imágenes obsoletas hace que la aplicación en sí misma se sienta vieja y desactualizada, ¡lo que me hace pensar dos veces antes de comprarla!
Navegación
Un último pensamiento sobre el sitio es que la navegación realmente parece una ocurrencia tardía. Contiene enlaces que cambian el contenido textual de la página con información relevante para los visitantes, pero por alguna razón es muy pequeña y oculta en el pie de página.
Si esto fuera realmente algo menor, no me importaría, pero en realidad parece más importante de lo que el diseñador le dio crédito. La solución simple es lanzarlo en la ubicación típica en la parte superior de la página y ampliar un poco el texto.
¡Tu turno!
Ahora que ha leído mis comentarios, participe y ayude dando al diseñador algunos consejos adicionales. Háganos saber lo que piensa que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca un consejo constructivo claro y libre de cualquier insulto.
