EXPLICA QUÉ PARTES CONFORMAN EL UX Y QUÉ PARTES EL UI

#UX

Al ingresar a la página de pinterest se muestra como fondo las imágenes que puedes ver si ingresas con una cuenta, ya sea registrándote directamente en pinterest o bien, dando la facilidad de acceder por medio de los datos de otra red social, como facebook o gmail, lo cual da un fácil y rápido acceso al usuario en caso de que no quiera ingresar datos nuevamente, únicamente dando click en la red social que tenga cuenta o que sea de su preferencia y la contraseña correspondiente.

Una vez que ha ingresado, se muestran las imágenes aletoriamente, si el usuario ya ha tenido acceso a la cuenta, las imágenes a mostrar son de acuerdo a las búsquedas anteriores que ha tenido, para que sean temas de su interés; si el usurio es nuevo, se le recomendará que agregue temas de su interés para que le muestre imágenes relacionadas a esos temas.

En el buscador tiene la facilidad de ingresar el tema que desea encontrar y se desplegará un menñu que será más un filtro para que la búsqueda sea más acertada y relacionada con lo que desea encontrar.

Cada imagen tiene la posibilidad de guardar o compartir, lo cual hace que la experiencia del usuario sea dinámica y placentera, pues en caso de darle compartir, alguien más podrá ver lo que el usuario quiere mostrarle, sin tener que dar más de dos clicks, y en caso de querer guardar la imagen también necesitará sólo dos clicks, o en el caso de querer crear un nuevo tablero, también tendrá esa opción facilmente.

El hecho de dar esa accesibilidad de guardar las imagenes en tableros que el mismo usuario ha creado, permite acceder a esas mismas fotos posteriormente cuando el usuario lo requiera, y eso hacer tener también una experiencia positiva al usuario para querer buscar más temas, imágenes y lo que se le ocurra para darse una idea de algo y crear sus propias imágenes y compartirlas también.

El hecho de que los colores y formas sean tan estructuradas y definidas, permite que la lectura de la página sea fácil y digerible, sin sentirse confundido en la navegación ni en el lugar donde se encuetra ubicado en cada momento, pues siempre tendrá la opción de regresar a la vista anterior o hacer otra búsqueda.

#UI

  • Login. Se muestra en una caja con fondo blanco, el logo centrado en la parte superior, un texto grande para que te registres, y los input para ingresar tus datos de correo y contraseña, en color gris, y un botón para ingresar en color rojo. También tiene la posibilidad de ingresar por medio de cuentas de otras redes sociales en forma de rectángulos, y hasta abajo los textos legales.

  • Body. Todo el fondo está en color blanco, y el color de la tipografía en un tono gris.

  • Header. En esta sección se encuentra el logo, ubicado en la parte superior izquierda, seguido está un buscador para ingresar lo que el usuario quiere encontrar, luego un menu con 5 opciones, y dos de esas opciones tienen unos iconos, uno que mostrará las notificaciones del usuario y otro para la configuración de su cuenta. Toda esta sección se encuentra en una posición fija, para estar siempre presente hacia el usuario. Cada botón del menú tiene un hover que cambia a color gris y en forma ovalada o redonda según sea el caso. En el caso del buscador, al momento de ingresar texto se abre un seleccionador de las últimas búsquedas, con un fonde blanco y color de la tipografía, en un tono gris oscuro, y al ingresar algún texto y darle enter, se mostrarán las opciones semejantes a lo que se está buscando, pero también aparece otro menú que es un filtro horizontal, cada opción está en un rectangulo ovalado y con un color de fondo diferente con cierta opacidad de una imagen que representa lo que cada sección del botón tendrá, con una tipografía blanca y en bold.

  • Container. Todo el contenido es de fotos de diferentes tamaños en cuanto a la altura, ya que el ancho se respeta para todas, teniendo asi un ancho de columnas exactamente igual y proporcionado al ancho de la página. Cada imagen tiene un pie de página que contiene el tñitulo de la foto y un pequeño menú que da 2 opciones y una pequeña descripción con la razón por la cual se muestra. Tiene también cada imagen, un hover que al pasar el mouse por la foto el cursor se convierte en una pequeña lupa y a la vez aparecen 2 botones, uno dará la opción de guardar y el otro de comparti; al dar en compartir se abre otro pequeño menú que mostrará los iconos de las redes sociales en las que se puede compartir, en forma circular y alineadas horizontalmente; y también desplegará un buscador para enviarlo a algún amigo con una cuenta en pinterest. Al darle en el botón de guardar, se abre una ventana en la que se mostrará la foto en tamaño pequeño del lado izquiero y del lado derecho otro buscador y abajo las opciones de los tableros en la que se puede guardar, y hasta abajo otra opción para crear un nuevo tablero si así lo decidiera el usuario. Al darle click sólo en la foto se redireccionara a una nueva ventana que será como el interior de la página, este será el contenido de cada imagen.

  • Contenido de imagen. En esta nueva ventana se puede observa la imagen a la que ingresamos en un tamaño más grande y dentro de una caja que contiene varios elementos, entre ellos, botones para compartir o guardar, pero también se muestra una pequeña descripción con un color de texto gris oscuro en el título y un gris claro para la descripción, con la foto del usuario que compartió esa imagen y un botón para leer más al respecto, el cual redireccionará al usuario a la página del autor. Tiene también una opción de ver las personas que han probado ese pin, otro botón para añadir foto o nota y por último la sección de comentarios. Abajo de esta caja se muestran otros resultados similares a la imagen que se ha seleccionado, respetando la misma estructura que en la página principal.

Resumen. Los colores que se usan son siempre los mismos en cada sección, blanco para el fondo, gris claro para input e iconos, rojo para botones de ingresar y formas rectangulares con borde ovalado, tanto para input, botones e imágenes. Es una página limpia y estructurada en cuanto a colores y formas

Conclusión.

A mi parecer es una página con un gran estudio tanto de UX como de UI, con una navagación intuitiva que permite al usario acceder a donde sea de manera fácil y rápida. Se puede apreciar que en realidad han estudiado al usuario al mejorar cada parte de esta página para mejorar también su experiencia.