Ayer Google lanzó un rediseño masivo de su red social, Google+. No se limitaron a barajar algunos objetos, redefinieron completamente toda la experiencia visual. Una actualización tan importante merece una edición especial de nuestra serie de crítica de diseño web.
Deje que otros hablen de aburridas listas de características antiguas, únase a nosotros para saltar y echar un vistazo para ver qué es mejor y qué es peor desde la perspectiva de un diseñador. Separaremos cada pieza de la interfaz y veremos si hay algo que aprender.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
El antiguo Google+
Antes de sumergirnos en el nuevo diseño, echemos un vistazo rápido a la versión original de Google+, que se muestra a continuación.
Como puede ver, es una experiencia bastante escasa con gran cantidad de espacios en blanco. El diseño organiza el contenido en tres columnas con una barra horizontal en la parte superior para buscar, agregar fotos, ver tus círculos, etc. El diseño aquí es en realidad bastante parecido al diseño actual de Facebook.
La sensación general es limpia y simple, pero también un poco fría e impersonal. Esto hizo que el sitio fuera fácil de usar y para cualquier persona, pero quizás no ayudó mucho con el concepto de hacer de la página su propio centro de comunicación personal.
El nuevo Google+
El nuevo Google+ reduce drásticamente el espacio en blanco y los sentimientos de escasez. En comparación, la interfaz parece estar cargada de funciones y botones. Han mantenido la fuerte personalidad blanca, pero la han complementado con un tono de gris.
Esto puede parecer un cambio trivial, pero en realidad es un intento muy intencional de crear una jerarquía visual sólida en la página. Donde la página antigua era un mar de blanco con un área de gris en la parte superior, esta página utiliza estos dos colores para distinguir claramente las partes primarias y secundarias del contenido. Sus ojos flotarán alrededor de la página, dando un significado clave a las partes más claras de la interfaz.
Diseño
El diseño es mucho más complicado esta vez. Es una versión modificada del antiguo diseño de tres columnas con un poco de anidamiento en su lugar. Todavía hay una amplia sección principal flanqueada por dos barras laterales estrechas, pero esa sección principal ahora está dividida en dos sub-columnas fuertes. Todo el contenido de la página tiene una posición fija, solo se desplaza el área de contenido principal.
Si eliminamos todo y solo miramos los huesos de la página, vemos un alámbrico bastante complejo.
Uno de los cambios conceptuales más significativos que se han producido es que el diseño anterior contenía varios círculos de amigos en una franja vertical en el lado izquierdo y los iconos de navegación en la parte superior, mientras que el nuevo diseño coloca la navegación en una franja vertical de iconos. Baje el lado izquierdo y sus círculos en una barra horizontal en la parte superior.
Este patrón de navegación basado en iconos del lado izquierdo es algo que se ha vuelto extremadamente popular en el diseño de la interfaz de usuario de Mac y estamos empezando a verlo reflejado en las interfaces web. Uno de los defensores más importantes de este formato fue Twitter para Mac (anteriormente Tweetie), que ha generado una gran cantidad de interfaces similares en aplicaciones como Reeder, Sparrow y Raven.
La nueva página de Google+ viene con un poco de vocabulario para aprender. La tira por el lado izquierdo es la "cinta". ¿Cuál contiene varias? aplicaciones? El cuadro de contenido principal es la tarjeta? y el área deslizable debajo de cada publicación con comentarios, + 1s, etc. es el "cajón de actividades".
Problemas de alineación
El nuevo diseño ayuda a que Google+ parezca una aplicación con más funciones y definitivamente hace un buen uso del contraste para resaltar las partes importantes de la página. Realmente no tengo ningún problema con el esquema de diseño general, pero no puedo dejar de notar algunos problemas de alineación que creo que reducen la estética.
Para empezar, el cuadro de contenido principal y el botón de Hangout están dentro de un par de píxeles de estar perfectamente alineados a lo largo de sus trazos superiores. Desafortunadamente, para un nitpicker como yo, un par de píxeles se siente a una milla de distancia. Hay algunas peculiaridades de diseño que me molestan más rápido que dos cosas que son casi alineado. Para obtener más información sobre este tema, consulte ¿Por qué casi una palabra sucia está en el diseño?
El efecto es aún peor si da un paso atrás y observa los cuatro elementos en esta área. La dirección de correo electrónico del usuario, el cuadro de contenido primario, el cuadro de hangout y el área de notificación sobresalen en longitudes aleatorias y parece que no tienen lógica detrás de su ubicación.
Este ejemplo no es un incidente aislado, hay algunos otros casos donde los objetos sólo pierda una alineación vertical u horizontal. Vea cómo el logo de Google+ a continuación se aleja de manera incómoda de la línea vertical fuerte establecida por la navegación a continuación.
Diseño de iconos: más allá de lo simple
Históricamente, Google siempre ha sido conocido por su absoluta falta de diseño. Todos los productos que se lanzaron parecían ser casi la solución más simple posible que uno pudiera imaginar. La imagen de la marca Google representó un completo rechazo a seguir el estilo visual brillante y llamativo de la web 2.0, popular a principios de la década de 2000, a favor de dejar que el contenido hable por sí mismo.
En los últimos años, hemos visto que Google comienza a distanciarse lentamente de estas ideas, ya que sus productos muestran una complejidad sutil pero cada vez mayor de detalles de diseño y complejidad. Los iconos en el nuevo Google+ sirven como un ejemplo perfecto de esta noción.
Observe cómo las formas abstractas simples y los colores sólidos han dado paso a una imagen más cohesiva de una casa, que contiene trazos y degradados sutiles.
Repetición de los efectos de Hover
Mientras estamos en el tema de los íconos, echemos un vistazo rápido a algunos de los aspectos menores de interacción del sitio, a saber, los efectos de desplazamiento. El tema general aquí es que los iconos son grises y contrastan muy poco con el fondo. Luego, al pasar el mouse, el icono se vuelve a todo color. Puedes ver esto en acción en la barra lateral:
La repetición es una de tus herramientas más fuertes como diseñador y Google la está manejando bien aquí. El mismo efecto de gris a color se repite en un par de lugares más a lo largo de la página.
Sin embargo, son un poco inconsistentes con este efecto. Hay algunos puntos en los que creo que hubiera sido apropiado aumentar la repetición, pero eligieron ir con otro efecto aleatorio. En el siguiente ejemplo, los iconos se convierten en formas de botón al pasar el cursor.
Nueva barra lateral
A la derecha de la sección de contenido principal, hay una nueva barra lateral con varias características diseñadas para ayudarlo a aprovechar al máximo Google+. Tenga en cuenta que este es otro lugar donde vemos el color en el truco de desplazamiento.
Esta área está muy bien diseñada con cada sección claramente organizada y distinta. Es interesante ver a Google captar una idea de Twitter en forma de una lista de temas de tendencias. Puede ver que los usuarios ya han estado adoptando la sintaxis del hashtag, un ejemplo fascinante de cómo transferimos automáticamente nuestros comportamientos a través de las redes sociales ya sea que los desarrolladores consideren ese comportamiento o no.
Siempre es importante anticipar y observar el comportamiento de su base de usuarios de cerca y atender las acciones que parecen gravitar en lugar de intentar cambiarlos. Esto hará que su plataforma parezca mucho más intuitiva y fácil de adoptar.
Perfil
Al tomar una página del nuevo libro de jugadas de la línea de tiempo de Facebook (y quizás de Path), el nuevo perfil de Google+ permite no solo una imagen de avatar principal sino una imagen de portada. (el mismo término usado por Facebook) también.
La parte que es una ruptura notable lejos de Facebook es la foto de perfil innegablemente grande, que reside en el lado derecho en lugar de la izquierda. Mostradas a continuación en tamaño real, estas imágenes se muestran a 250px por 250px, lo que seguramente no es el doble de las fotos de perfil cuadrado de 125px de Facebook.
Una cosa que me parece interesante es el hecho de que la imagen de portada en realidad se sale del cuadro de contenido principal. Por lo general, aprecio que los diseñadores intenten intencionalmente un truco inesperado como este, pero para ser honesto, lo encuentro bastante distraído aquí. Tan pronto como se carga una página de perfil, mis ojos saltan hacia la superposición incómoda.
¿Cuál es el veredicto?
A partir del mes pasado, Google+ supuestamente cruzó la marca de los 100 millones de usuarios activos. Nadie puede llamar a esto un número pequeño, especialmente dado el hecho de que Instagram solo le arrebató mil millones de dólares a Facebook por su plataforma y más de 30 millones de usuarios.
Además, si consideras que Twitter tiene solo 140 millones de usuarios activos, parece que Google+ está buscando rápidamente el número dos en las redes sociales. Sin embargo, esto definitivamente no es suficiente para estar cerca de rivalizar con la base activa de usuarios de Facebook, que se encuentra en algún lugar dentro del rango de 800 millones.
El nuevo diseño muestra que Google no tiene intención de abandonar este proyecto como tienen muchos otros en el pasado. Definitivamente están intentando crear una experiencia más agradable para atraerlo y hacer que regrese. La pregunta es, ¿funcionará?
Para responder a eso, tenemos que especular sobre lo que impide que las personas adopten Google+. La respuesta obvia es que Google+ se siente algo redundante cuando ya tienes una cuenta de Facebook, y más aún si estás activo tanto en Facebook como en Twitter. Otra posibilidad es que si bien el antiguo Google+ no era ciertamente feo, quizás se sentía un poco estéril y sin personalidad.
Posibles metas detrás del nuevo diseño
De esto podemos aventurar una conjetura para al menos dos objetivos posibles detrás del rediseño. Lo primero sería diferenciar más a Google+ de otras redes sociales. Tratar de afirmar que simplemente son mejores que Facebook en su propio juego no es la mejor opción, la gente de Google tiene que establecer una piedra angular conceptual claramente única por la cual las personas deben visitar su sitio. Como ejemplo, Twitter ha hecho un excelente trabajo al evitar replicar la funcionalidad de Facebook y no ser una alternativa, sino un producto distinto.
El segundo objetivo sería reducir la esterilidad y comenzar a transformar Google+ en un lugar amigable y acogedor que sea fácil de navegar e incluso divertido de usar.
¿Cumplieron estos objetivos?
Si analizamos el diseño en términos de estos objetivos, podemos evaluar mejor si fue un éxito o no. Este ejercicio nos da puntos claros para comparar en lugar de apuñalar a ciegas en la oscuridad en un intento por encontrar qué funciona y qué no.
En cuanto al primer objetivo, Google ha progresado en algunas áreas y quizás se ha retirado un poco en otras. En general, el nuevo diseño es un salto mucho más lejos de Facebook que el anterior. De un vistazo, un usuario fiel de uno u otro nunca confundiría uno con el otro, lo cual es bueno.
Además, pequeños detalles, como colocar los filtros circulares en la parte superior y continuar dando protagonismo a los hangouts, aseguran que las pocas innovaciones de Google estén al frente y en el centro. Este progreso contrasta con otras áreas, como la nueva imagen de portada, que realmente hace que la red social se sienta Más Como un clon de Facebook, no menos. Me hubiera gustado verlos mostrar un pensamiento único en esta área en lugar de simplemente tomar prestado el nuevo formato de Facebook.
El segundo objetivo definitivamente parece haber sido la principal preocupación en la actualización del diseño. El nuevo Google+ crea un entorno más atractivo.Aunque quizás esté a punto de ser saturado, especialmente en comparación con la versión anterior, se siente como un servicio más sólido con todo lo que está sucediendo en su página de inicio.
Hay mucho énfasis en las caras. Comienza con su nueva y enorme foto de perfil y continúa a través de la página de inicio, donde puede ver una gran barra lateral de chat llena de caras amigables, además de sugerencias para personas que quizás conozca y usuarios que le gusten. Google quiere que hagas amigos, que te vean envuelto en la experiencia lo suficiente como para perdértelo cuando te vayas. Más amigos significa más interacciones, lo que significa más razones para volver.
¿Qué piensas?
Me parece que Google+ se está alejando del centro de atención en los últimos meses. Sin embargo, esta percepción era aparentemente defectuosa, ya que en realidad estaban escalando de manera silenciosa pero constante con un número impresionante de usuarios activos diarios. En cualquier caso, incluso si empezaban a desvanecerse por el interés público, el nuevo diseño se cronometró perfectamente para que toda la web hablara de ellos una vez más. Incluso si esta fue la única razón detrás de la actualización, probablemente valdrá la pena.
Sin embargo, como expliqué anteriormente, creo que algunas metas más profundas estaban trabajando aquí. Ahora que has leído mis pensamientos, es hora de que entres en la conversación. ¿Qué objetivos crees que Google estaba tratando de lograr con el nuevo diseño? ¿Lograron efectivamente estas intenciones?
Además, ¿está Google+ finalmente condenado a seguir el camino de Wave, Buzz y otros intentos sociales fallidos o continuará su crecimiento constante y se convertirá en una de las redes sociales más importantes de la web?