Share
Uno de los cambios más notables en la web en 2011 fue el lanzamiento de la nueva interfaz de usuario de Google en una amplia gama de sus productos. En este artículo voy a ver el proceso de pensamiento detrás de las decisiones de la IU de Google y determinar qué podemos aprender de sus métodos y principios..
Miniatura por Alex Patrascu
Página de inicio original de Google ...
… El nuevo look actualizado.
La misión de Google es organizar la información del mundo y hacerla universalmente accesible y útil..
Es obvio ver que la web ha cambiado drásticamente desde los primeros días de Google. Los usuarios experimentan la web de una manera muy diferente a la de antes y la ven en una variedad de dispositivos diferentes. Google ha traído cambios para reflejar esto. También se han introducido cambios para unificar la amplia gama de productos de Google y unirlos para que el usuario tenga una experiencia fluida mientras navega entre los productos. Google explica:
Nuestro objetivo es brindarle una experiencia en línea más fluida y consistente, una que funcione sin importar qué producto de Google esté usando o en qué dispositivo lo esté usando..
La nueva experiencia introducida por Google se basa en tres principios de diseño fundamentales. Echemos un vistazo a estos.
La idea aquí es permitir que el usuario se centre en la tarea o trabajo que desea realizar de forma rápida y sencilla. Esto se logra eliminando el desorden innecesario y poniendo en primer plano los elementos y herramientas que son importantes. Esto también se logra mediante adiciones simples como agregar colores más llamativos para llamar a las acciones u ocultar ciertos elementos de navegación cuando no están en uso.
Mediante el uso de estos métodos, la interfaz de usuario de Google puede ayudar a su usuario a concentrarse subconscientemente en la tarea que está tratando de realizar, aliviando la frustración de su experiencia de usuario..
Uno de los cambios más grandes desde que comenzó Google es la forma en que sus usuarios acceden a la web. Ya no utilizamos los productos de Google en nuestros equipos de escritorio, ahora los utilizamos en una variedad de dispositivos, desde teléfonos inteligentes y tabletas a monitores de alta resolución y televisores. La idea detrás de la "elasticidad" es permitir a los usuarios tener una experiencia visual perfecta a medida que realizan la transición entre diferentes dispositivos..
Aunque las tecnologías utilizadas detrás de Google y sus productos son bastante complejas, no quieren mostrar esta complejidad en su diseño. "Sin esfuerzo" se trata de mantener el aspecto simple, limpio y consistente.
La nueva marca de Google se basará en la confianza, la belleza, la pureza tecnológica y la innovación - Larry Page
En el centro del nuevo diseño de Google se encuentra la nueva barra de Google, que reemplaza la antigua barra negra horizontal que se encontraba en la parte superior de la pantalla. Google se dio cuenta de que este antiguo bar ocupaba un lugar precioso en nuestras pantallas (30px para ser precisos), así que decidí darle un nuevo aspecto para relacionarse con sus nuevos principios de diseño..
La nueva barra de menú incorpora el menú de Google, junto con las herramientas de búsqueda y Google Plus. Mantiene la barra de búsqueda y la navegación iguales en todos los productos y permite cambiar entre productos de manera simple. Para cambiar un producto, simplemente pase el logo de Google, donde se le presentará un menú desplegable que le permitirá alternar "sin esfuerzo" entre Gmail, Docs, Maps, YouTube y otros productos..
Eddie Kessler (Líder Técnico en Google) explica
Unificar, simplificar y decir adiós a la barra de navegación anterior!
Hacer que la navegación y el uso compartido sean súper simples para las personas es una parte clave de nuestros esfuerzos por transformar la experiencia global de Google, por lo que estamos muy entusiasmados con este rediseño..
Izquierda: diseño del logotipo de Google + por Alex Alex Patrascu Derecha: muestra el menú y la interfaz de Google + Analizar cada IU de producto de Google sería un libro completo por sí solo, por lo que, en beneficio de este artículo, he optado por destacar algunos de los productos más populares de Google..
El lanzamiento del nuevo diseño de Google coincidió con uno de los proyectos web más comentados este año; Google +. Google + quizás mostró algunos de sus nuevos principios de diseño más que cualquier otro producto de Google. Después de la anticipación de su lanzamiento, si algún producto es necesario para atraer a los usuarios a Google, entonces éste es el indicado. Demuestra maravillosamente sus ideales de diseño y, días después de unirme, me quedé fascinado por la simplicidad de su diseño..
El crédito de esto se debe en parte a Andy Hertzfeld, miembro del equipo de UI / UX que trabajó en Google Plus. Muchas personas han hecho comparaciones entre el estilo de Google y Apple, y esto podría deberse a que Andy había sido empleado previamente por Apple en los años 80 para trabajar en el Proyecto Macintosh. Parte del rol de Andy en este proyecto fue trabajar junto a Joseph Smarr en el concepto de "círculos".
Andy explica la idea detrás de los círculos:
La idea de categorizar a la gente, era bastante obvia. Luego surgió la idea central del editor de círculos, que intentaba hacer que eso fuera divertido y atractivo, algo que querrías hacer porque puede ser tedioso. Entonces, queríamos recompensar al usuario por hacerlo, poniendo una sonrisa en su rostro y tratando de hacerlo tan agradable que lo sigan haciendo..
Google Plus es una parte integral de la estrategia general de Google ahora. Se puede encontrar incorporado en la mayoría de los productos de Google y su botón más uno está incluso en los resultados de búsqueda. Google ha hecho que sea muy simple para nosotros compartir lo que encontramos en nuestros resultados de búsqueda. Lo que significa que el término 'búsqueda social' es ahora más relevante que nunca y estoy seguro de que la búsqueda se dirige más en esta dirección. Google apoya esto diciendo:
La búsqueda social de Google te ayuda a descubrir contenido relevante de tus conexiones sociales, un conjunto de tus amigos y contactos en línea. El contenido de sus amigos y conocidos a veces es más relevante y significativo para usted que el contenido de cualquier persona al azar. Por ejemplo, una revisión de películas en línea es útil, pero una revisión de películas de su mejor amigo puede ser incluso mejor.
El nuevo look de Gmail.. Según los informes de CBS news, Gmail tenía un total de 193,3 millones de usuarios activos en noviembre de 2010. Para mantener a los usuarios a bordo, Google ha optimizado la experiencia de Gmail de acuerdo con sus principios de diseño para mejorar la experiencia del usuario. Lo han hecho haciendo los siguientes cambios:
Las conversaciones en Gmail se han rediseñado totalmente para permitir una lectura más fácil cuando se rastrea a través de hilos de correo electrónico. Se agregaron imágenes de perfil a la conversación, lo que le brinda a la interfaz la capacidad de ayudarlo a participar en conversaciones más personalmente. Esto también te ayuda a la hora de intentar saber quién dijo qué. Al retirar muchos elementos de la interfaz de usuario original, han permitido a sus usuarios enfocarse en comunicarse con colegas y amigos.
La barra lateral de navegación izquierda ha sido rediseñada y viene con la capacidad de personalizarla. Puede cambiar el tamaño del área de chat para que sea tan grande o pequeño como desee, u ocultarlo completamente haciendo clic en el pequeño icono en la parte inferior izquierda de la barra lateral. Al igual que con todos los productos nuevos, ahora puede navegar por la interfaz de Google utilizando las teclas de flechas o de pestañas, una vez más, dando al usuario la libertad de navegar de la forma más conveniente para ellos..
Esta imagen resalta Gmails nueva función de búsqueda mejorada El correo electrónico es una herramienta importante para cualquier usuario de la web. Tanto es así que, de hecho, entre nosotros enviamos un estimado de 294 mil millones de correos electrónicos cada día. Es imperativo que podamos encontrar todos los correos electrónicos que hemos repartido por nuestra bandeja de entrada (sé que tengo alrededor de 10,000+). Google ha proporcionado una mano de ayuda que supera la búsqueda estándar anterior. Ahora los usuarios pueden hacer clic en el menú desplegable de búsqueda, que muestra un panel de búsqueda avanzada que le permite crear un filtro desde cualquier búsqueda con solo unos pocos clics..
Si te gusta o no te gusta el nuevo aspecto de Google, no hay duda de que ha sido un éxito. Ha sido un tema de conversación en la web en los últimos meses y ha ganado muchos seguidores. Parte de su éxito podría estar en la forma en que Google ha implementado los cambios. En lugar de elegir lanzar todo el nuevo aspecto a la vez, optaron por lanzar modificaciones en etapas y generalmente por producto. Al elegir este método, han podido recopilar los comentarios de los usuarios y decidir qué decisiones han funcionado y qué es necesario volver a evaluar para la siguiente fase..
Liberarlo en etapas también tiene otros beneficios. Al organizar las fechas de lanzamiento de cada fase de la IU a lo largo de varios meses, Google puede rodear sus cambios en la IU con gran cantidad de publicidad. Todos, desde la BBC hasta el New York Times, han escrito sobre los cambios de Google, sin mencionar los muchos tweets y comentarios que se han publicado en varios sitios con respecto a los cambios. Ahora que ciertamente no puede ser malo para los negocios.!
Al observar los ejemplos de colores anteriores, podemos ver que Google ha mantenido limitada su paleta de colores. Usan el azul y el rojo para resaltar las características importantes, que son las variantes de color del logotipo original de Google.
Ilustrando algunos de los nuevos botones e iconos de Google Como parte de su nueva estrategia de diseño, Google ha introducido un nuevo conjunto de botones en toda la gama. Estos botones son claros, simples, concisos y demuestran el principio de "enfoque" del diseño de Google con bastante claridad. Han utilizado una combinación de HTML5 y CSS3 para crearlos. Una opción que puede sorprender a todos es que los botones no son en realidad botones, ni son etiquetas de anclaje sino que, de hecho, se crean utilizando divs con un atributo de rol establecido en "botón". Esto se utiliza para indicar que una etiqueta genérica desempeña el papel de un widget estándar, como en este caso un botón. Esto es útil para las personas que pueden acceder al sitio a través de un dispositivo como un lector de pantalla.
Google ha utilizado sutiles gradientes de CSS3 para mejorar sus botones y les ha dado un poco de extra popular agregando una sombra sutil a la parte inferior del botón en el hover. Los botones generalmente se agrupan en 2 categorías 'independientes' e 'izquierdo, medio, derecho'. Cada categoría tiene 2 tamaños diferentes "estándar" y "grande". Al optar por estos 4 estilos en toda su gama, Google puede ofrecer una experiencia unificada para sus usuarios..
Un factor que fomenta una buena experiencia de usuario en cualquier diseño es el atractivo visual. Google lo ha permitido al permitir a los usuarios personalizar la densidad de la pantalla en ciertos productos. Esta opción aparece en Gmail, Reader, Docs y otras aplicaciones de texto pesado. La densidad de visualización se divide en tres ajustes preestablecidos. Cómodo, acogedor y compacto, y se adaptan en función de la densidad de visualización de su computadora. Con las consultas de los medios ya populares, estoy seguro de que este tipo de opciones de densidad de pantalla comenzará a aparecer en una serie de otros productos web..
Habiendo estudiado los nuevos principios de IU de Google con bastante intensidad durante los últimos seis meses, puedo decirles lo que he observado y aprendido de la estrategia que han implementado. Como una de las marcas más importantes en internet; han comprendido claramente (sobre todo) que la simplicidad y una experiencia unificada son clave.
La simplicidad y una experiencia unificada es clave..
También me ha enseñado personalmente a disminuir la intensidad de muchos de los elementos de mi IU. ¿Realmente la sombra debe estar en un 80% de opacidad? ¿Se puede bajar un poco al 20 - 30%? Como diseñadores, queremos que las personas noten el esfuerzo adicional que hemos realizado al agregar esa sombra o resalte, y algunas veces tienden a compensar en exceso al hacer que se destaque. A veces, al hacerlo más sutil, podemos lograr un efecto mayor y más suave que es agradable para los ojos y que se nota tanto. El mismo principio se puede aplicar a propiedades tales como el radio del borde, intente atenuarlas de los 5 o 10px habituales a 1, 2 o 3 píxeles. Por supuesto, estos tratamientos no deben aplicarse a todos los proyectos, pero sin duda marcan la diferencia cuando opta por un diseño "limpio"..
También podemos aprender que la web está en un lugar muy diferente hoy en día, en comparación con lo que solía ser. Con la reciente noticia de que Internet Explorer actualizará automáticamente sus navegadores, ahora podemos comenzar a confiar en las últimas tecnologías web para que funcionen en la mayoría de los navegadores. Google quizás tuvo una idea de esto, ya que ninguno de los diseños de sus nuevos productos funciona en nada que se encuentre por debajo de Internet Explorer 8. Ahora podemos potencialmente comenzar a diseñar como queramos sin tantas limitaciones de navegador. Ahora deberíamos realinear el tiempo ahorrado de esto para crear compatibilidad entre dispositivos para otros dispositivos y resoluciones de pantalla, para brindar la mejor experiencia al usuario..
¿Qué piensas acerca de los nuevos cambios en la interfaz de usuario de Google si eres un fanático o te parece un dolor? Me encantaría escuchar tus comentarios sobre lo que piensas..
Accentsconagua