RSS Feed

‘Usabilidad’ Categoría

  1. Los problemas web de Bankia

    Diciembre 28, 2014 por SeoValencia

    Seguro que conozco a alguien que trabaja de desarrollador web en Bankia para el departamento de informática. Una disculpa para ellos si les molesta el artículo.

    Bankia
    en estos momentos tiene una imagen pésima entre los ciudadanos españoles. Un día te despiertas por la mañana y descubres que te han estado robando, te están robando y te van a seguir robando por el resto de tus días. Eso se puede decir de cualquier banco o caja de ahorros pero el caso de Bankia ha llamado la atención de todos por sus famosas tarjetas black y sus mentiras para salir en bolsa y como no por las estafas de los directores de sucursales para quitar los ahorros de los pobres jubilados analfabetos.

    Pero hoy no vamos a hablar de actualidad financiera sino de desarrollo web.

    Campaña Bankia Iphone

    Ha salido recientemente en Bankia una promoción según la cual si actualizas tus datos (correo electrónico y número de móvil) entras en el sorteo de un Iphone 6. Parece una típica promoción de captación de leads para enviar publicidad vía sms y email a ver si caen más usuarios en sus productos financieros.

    La cuestión es que al encargado de testear el funcionamiento de la página se le ha olvidado darle al botón de guardar los datos.

    Una vez rellenas todos los datos no funciona el botón de guardar los datos que has cambiado. Abrí el inspector de elementos del Firefox y enseguida me salió el problema. El botón estaba deshabilitado. Supongo que algún despiste del programador que luego no ha sido suficientemente testeado.

    Bankia fallo usabilidad

    Podíamos seguir con la lista de errores pero ello sería más propio de la elaboración de un informe personalizado a cobrar xxx euros preferiblemente en black please…para continuar la tradición el banco.

    P.S.: >Otra cosa que me llamó la atención es que si entras desde el navegador web Opera te lleva directamente a la versión móvil aunque estés entrando desde un PC. Han debido pensar que nadie utiliza Opera salvo desde el móvil. No sé que estadísticas tendrán los de Bankia.


  2. Diseño de fondo e imágenes en Twitter

    Octubre 11, 2013 por SeoValencia

    Si usas Twitter no es imprescindible diseñar todo el diseño de tu cuenta. Puedes empezar desde la base que te dan al comenzar. Pero si te dedicas a ofrecer tu imagen por internet e intentas sacar una cierta rentabilidad a tu cuenta no debes olvidar que la imagen que das al mundo es la que debes tener optimizada.

    Twitter en la actualidad necesita tres imágenes para tener completamente rellenado nuestro perfil, la imagen del perfil, la imagen de la cabecera del perfil y la imagen de fondo.

    El fondo de pantalla debe ser sencillo y limpio. Fondos con mucho contenido tienen la desgracia de que la mayor parte de su contenido no a ser visible por lo que resultan innecesarios.
    Debes mantenerlo legible. Asegúrate de que todas las palabras y elementos de diseño son claramente legibles si se opta por incluir textos en su fondo. Tus seguidores no deben necesitar una lupa si quieren leer algo de tu fondo.
    Debes mantener la imagen de tu marca. Si estás utilizando Twitter para fines comerciales, el nuevo fondo debe estar en consonancia con tu página web y las redes sociales que utilizas. No tiene sentido tener colores y/o gráficos diferentes para cada red social.

    Los pasos a seguir para diseñar tu fondo para twitter son los siguientes:

    1. Necesitas un editor de imágenes. En el mundo capitalista (Windows y Mac) triunfa el Photoshop y en el mundo libre Gimp es el rey, aunque también posee versión para Windows. Hay múltiples alternativas para estos dos monstruos. Incluso el Paint e podría valer, aunque no lo recomiendo.

    2. Elegir el tamaño de la imagen. Si quieres una imagen que lo cubra todo deberás optar por hacer una imagen que supere los 2500 píxeles de anchura. Yo no recomiendo esta opción ya que si alguien ve tu perfil en un monitor de 4000px (ya llegarán) verás la imagen y los cortes. Lo ideal es fundir la imagen con el color de fondo que podemos elegir desde el panel de configuración de twitter para obtener una visualización correcta en todas las resoluciones posibles.

    La tendencia es muy fácil de seguir. Basta con un fondo con algo de información en la parte izquierda y el resto un color plano. Eso para mi es el ideal. Hay muchos diseñadores que diseñan para su resolución de monitor y no se les ocurre cambiarla para ver como serán en otros monitores. Pongamos ejemplos:

    David Bisbal, un artista prescindible pero ídolo de masas en los tiempos que corren. Su twitter está salido de una agencia de marketing online y es un ejemplo claro de diseñador que no sabe cambiar la resolución de su monitor. Ver imagen completa

    david bisbal imagen

    Vemos que incluso el diseñador ha dejado un espacio en blanco en medio para el contenido.

    Miranda Makaroff, no la conocía hasta hace poco pero soy un gran admirador de su padre y siempre tarareo alguna canción suya. En este caso el fondo se repite. No suele ser una buena solución visual.
    miranda Makaroff twitter

    Nacho Vidal, es uno de los actores más conocidos de España pero casi nadie recuerda el nombre de alguna de sus películas. En este caso, el diseñador ha optado por la vía Bisbal creando una imagen de fondo muy grande con un espacio en medio en negro para el contenido. Ni que decir tiene que el resultado es el mismo. Sólo lo verán bien los usuarios con la misma resolución de pantalla que el diseñador. Eso si, tanto el fondo como las otras dos imágenes se notan hechas por profesionales.

    Nacho Vidal foto twitter

    Mariano Rajoy. Comparto con Mariano su afición con el ciclismo y lo de tener un primo físico… bueno, eso no. Yo soy el físico. Siendo Mariano el presidente de un país que debería ser referente mundial en bastantes cosas veo que su twitter tiene algún error clamoroso. En primer lugar su fondo es horrible. El diseñador en este caso ha elegido una imagen de un tamaño determinado que se queda pequeña en un monitor de 19 pulgadas. Así que supongo que debe poseer uno de 17 ó 18 pulgadas. Por otra parte, realiza un degrado de un color azul claro a otro más oscuro dejando unos círculos que recuerdan con desagrado a las imágenes gif de baja calidad. La forma correcta de hacer esto sería elegir un tamaño más pequeño pongamos 400 px por ejemplo y hacer un degrado entre el color final y el inicial. Como twitter nos permite elegir un color de fondo lo elegimos para que cuadre con nuestro color final de degradado. Con eso obtendríamos un resultado final mucho más profesional que no se nos cortaría aunque fuera visto en una pantalla de 50 pulgadas.

    Twitter de mariano Rajoy

    Barack Obama como presidente de E.E.U.U. si que tiene detrás a un equipo eficiente que le sabe aconsejar y aunque el diseño es mejorable si que cumple con todas las premisas de usabilidad de twitter. En cambio a Sarkozy le fallaría una imagen de las últimas que ha incorporado twitter. Quizás le falle porque le diseñaron su cuenta cuando aún no existía esta imagen. En internet todo necesita mantenimiento.

    El origen de este artículo tiene que ver con el cambio  de hace unos meses en el que Google + nos obligó a tener una imagen como fondo de nuestro perfil en esta red social. De la noche a la mañana Google nos había colocado una imagen horrible y muy pesada (algo más de un mega).

    La imagen la podéis ver completa en este enlace.

    background google plus

    Gracias a Helmer cambié enseguida de background a uno personalizado.

    También Facebook hace más tiempo cambió su diseño y muchos proyectos tuvieron que colocar una nueva imagen con la altura y anchura deseada.

    Estar al día en las redes sociales significa ser un esclavo de todos sus cambios y tendencias y aunque no lo parezca hay mucha gente que no está al día y que debería estarlo.

    Por cierto, debo añadir una imagen de cabecera a mi cuenta de twitter. Se me había ocurrido una idea muy frikie que he sabido frenar a tiempo…

     

    No lo haré tan bien como Bryant McGill

     

    ejempl twitter

     

     


  3. Usabilidad del favicon

    Octubre 9, 2009 por SeoValencia

    Para el que no lo sepa el favicon es una pequeña imagen con un formato especial que suele formar parte de muchas de las webs que vemos como su identificador visual en la pestaña del navegador.

    Una de las formas para implemetarlo en nuestra página web sería la siguiente:

    <link rel=”shortcut icon” href=”images/favicon.ico” />

    El favicon suele estar formado por el logo de la empresa o de la web en cuestión. Lo normal es realizar el favicon con un tamaño de 16×16 pero también es usual las medidas 32×32.

    Normalmente cuando se diseña una página web el diseñador también realiza el favicon pero con la llegada de los gestores de contenido gratuitos las cosas han cambiado un poco.

    Por poner dos ejemplos:

    WordPress no utiliza favicon
    Joomla utiliza un favicon por defecto

    El resultado es que la mayoría de blogs que gastan wordpress no tienen favicon y la mayoría de webs que gastan Joomla tienen el mismo favicon.

    Hay gente que tiene manías raras. Una de las mias es poner un favicon a cada web que realizo y la verdad es que no sé que es peor el no tener favicon o tener el mismo que otras miles de webs.

    Particularmente, cuando veo una web con el favicon de joomla ya pienso que el diseño es una mierda. A veces me llevo una sorpresa pero casi siempre acierto. Si no han tenido tiempo para cambiar el favicon mala cosa.

    Favicon de Joomla:

    joomla favicon

    Este artículo no tendría nada que ver con el SEO pero resulta que algo si en cuanto a usabilidad. Me explico:

    El favicon cumple con la función de asociar una imagen a nuestra web, una referencia visual. De forma, que si un lector de nuestra página nos conoce y nos reconoce a través de nuestro favicon les será mucho más fácil navegar a través de las pestañas del navegador. Todos los navegadores más utilizados utilizan la navegación por pestañas. Todos los usuarios no.

    Pestañas Firefox:

    firefox pestañas

    Pestañas Opera:

    opera pestañas

    ¿Qué diferencia hay si no utilizamos el favicon?

    Para un usuario avanzado como yo que suelo tener unas 10-15 pestañas abiertas en cada navegador me va a costar encontrar a las webs sin favicon. Cuando tienes tantas pestañas abiertas la pestaña se va haciendo más y más pequeña y casi que sólo queda el favicon para poder diferenciarlas. Si ves el favicon vas a esa web, pasas el tiempo que sea necesario en esa web. Pero si no la encuentras puedes apagar el ordenador y perder esa información. Aunque claro, puedes tener la opción de volver a donde estabas en tu navegador.

    Lo dicho, tener un favicon en tu web es uno de los muchos detalles que hay que cuidar para tener una web de calidad.