Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. 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.
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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de la aplicación Abdominals at Work
Método pasivo de las contracciones isométricas. Si pasa mucho tiempo frente a una computadora o la televisión, puede utilizar este método para trabajar sus músculos abdominales mientras realiza otras tareas. Usted elige el momento y el lugar, y la aplicación le enseñará cómo hacer el ejercicio, marcando su 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 se asemeja mucho al de la aplicación. Definitivamente, una escena de cielo nublado no me sugiere ejercicio, pero la aplicación trata de hacer ejercicio de una manera relajante, así que supongo que todo se une bien.
Los colores y 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 encontrar más información y descargar la aplicación. Es suficiente para interesarte sin abrumarte.
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 se podrían hacer.
Sonar
Todos los que alguna vez nos han enviado una solicitud de crítica de diseño para un sitio que contiene sonido reciben el mismo consejo. Siempre prefiero que los desarrolladores del sitio ofrezcan a los visitantes la opción de agregar sonido inicialmente en lugar de quitárselo. La navegación web es una experiencia típicamente tranquila y los ruidos repentinos y fuertes no harán que sus visitantes sean más que enojados.
Este sitio lo hace 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 gorjeando 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, una biblioteca o cualquier otro lugar público, no querrá que se apresure, ya que, de manera vergonzosa, intentan encontrar una manera de apagarlo. Usted pensaría que el usuario simplemente presionaría su botón de silencio, pero con mayor frecuencia probablemente cerrarán la ventana lo más rápido posible.
Además, definitivamente puedo ver cómo el pájaro con las notas musicales que surgen sugiere un control de sonido, pero tiene un desafortunado parecido con un enlace de pájaro de Twitter como vemos en casi todos los sitios en la web. Esto hace que no se vea inmediatamente que el ave es el control de sonido porque no hay texto para reforzar el mensaje.
El consejo simple aquí es, si va a seguir con el audio de reproducción automática, coloque el control cerca de la parte superior de la página y deje en 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 sonido de encendido / apagado. mensaje 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 en ocasiones interfieren con la legibilidad del texto. Además, como con cualquier animación en bucle, pueden volverse un poco monótonos si pasas todo el tiempo que tengo mirando el sitio. Una idea sólida que vimos en nuestro ToonyTuts Critique fue un simple sistema de control de dos iconos para detener la música y / o las nubes animadas. El tema del sitio era muy similar al de hoy, así que creo que un control similar funcionaría perfectamente aquí.
Mensajería y texto
Creo que el sitio hace un buen trabajo al dejar en claro que estamos hablando de ejercicios abdominales. Sin embargo, podría ser un poco técnico para una página tan divertida. Considere el titular principal "Método pasivo de contracción isométrica". Es agradable y elevado, pero en realidad 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 "¡Construya un paquete de seis mientras mira televisión! Este no es, de ninguna manera, el mejor ejemplo, pero llega al núcleo de mi sugerencia. Un título como este te atrae y te hace querer aprender más en lugar de apagarte porque te sientes estúpido y no tienes tu Tesauro a mano.
Quizás el mayor problema que tengo con toda la página es el texto amarillo sobre fondo azul. Estos dos colores chocan mucho en el texto pequeño y hacen que esta información sea muy difícil de leer.
El problema es el clásico conflicto vs. 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 descartar el énfasis amarillo en el texto y usar otra cosa, texto en negrita, un subrayado, etc., que no interfiera con la legibilidad.
iPhone
El gráfico del iPhone con la presentación de diapositivas es extremadamente popular para los sitios web de aplicaciones de iPhone, y por una buena razón. De este modo, se aclara instantáneamente de qué se trata el sitio. Sin embargo, creo que esto podría ser refinado un poco.
Para empezar, los pequeños puntos que sirven como navegación de la presentación de diapositivas tienen un círculo de carga giratorio al lado de ellos. Esta pequeña animación nunca se detiene, entonces, ¿para qué sirve? Cuando lo veo girando, esto sugiere que la página no ha terminado de cargarse (nos han enseñado que esto es lo que significa este gráfico) y cuándo Nunca termina de cargarse, hace que se sienta como si tu sitio estuviera roto. En pocas palabras, este gráfico distrae, confunde y no tiene ningún propósito práctico, elimínelo.
Además, como una pequeña molestia, el geek de Apple en mí no puede dejar de notar que la imagen del iPhone no está actualizada. El iPhone 5 ya casi está sobre nosotros y este sitio aún no tiene un gráfico del iPhone 4 todavía. Lo sé, es ridículo tener que estar al tanto de 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 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 idea de último momento. 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ño y está oculto 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 colocarlo 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, contribuya y ayude, dando al diseñador algunos consejos adicionales. Háganos saber lo que cree 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 consejos constructivos claros y sin insultos severos.