ReUS
| Título | reUS |
|---|---|
| Palabras Clave | sitioweb |
| Período | 2020-2020 |
| Asignatura | Taller de Diseño de Interacción |
| Del Curso | Taller de Diseño de Interacción 2020 |
| Carreras | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Martin Canihuante, Paola Chicano, Catalina Gonzalez, David Silva Bernales, Fernanda Talamilla P, Alejandro Jiménez Amín |
| Profesor | Herbert Spencer, Katherine Exss, Catalina Pérez |
Nombre de la página
El nombre de la página, reUS, es un acrónimo de "relación entre usuario y servicio", ya que los patrones UX jerarquizan la relación entre ambos pudiendo convertir la UX en algo bueno o malo, el nombre reUS hace alusión a esta relación, en conjunto con la palabra US que en inglés significa nosotros, refiriéndose a como la página busca crear una comunidad con la posibilidad de participar y contribuir en este proyecto.
Primera Propuesta
La interfaz de reUs propone que el usuario se encuentre desde un primer momento con toda la información que el sitio dispone, a través de una interfaz amigable que optimiza el espacio del medio, condensando y distribuyendo la información de tal manera que el usuario se desplace intuitivamente por el sitio gracias al equilibrio en su paginación de dos columnas, de menús desplegables y pop up que no derivan a otras ventanas,ya que, el sitio descansa en la página de inicio con distintos focos a la mano para poder profundizar libremente en los contenidos que se presentan.
Otro aspecto del sitio es la incorporación del usuario no solo como visitante sino como contribuidor al material de reUS entrando en la lista de contribuidores que es pública, a través del botón de comunidad con el fin de que el usuario no solo aporte a través de los comentarios sino que sea parte real de la construcción y crecimiento de la página quedando al mismo nivel de los fundadores, creando un "nosotros".
WIREFRAMES
Página principal
Al momento de entrar a esta página se logra captar el servicio que se ofrece sin despliegues, otorgando al usuario una primera vista sobre el objetivo del servicio, la definición de patrón y de UX, y el porqué es importante una buena y mala UX. En la versión móvil de la página principal, se presenta primero el logo de la página aprovechando la primera ventana de carga de la aplicación. Los menús se muestran sin desplegar para aprovechar el espacio de la página y la primera lectura que se le da a esta, teniendo el contenido justo para que no sea una primera lectura pesada o tediosa.
Despliegues página principal
Dentro de los despliegues se encuentran las categorías, y dentro de estas los distintos patrones identificados. Página previa al despliegue del scroll de cada patrón en conjunto con sus ejemplos. En el formato móvil es aún más necesario que los menús sean desplegables para trabajar en virtud del espacio que este formato ofrece.
Interior con scroll
Dentro de esta página se realiza un despliegue total de la introducción a un patrón de interacción, ubicando dentro de este una vista completa de sus ejemplos, en donde cada uno contiene la experiencia del usuario, el nombre de este, su soporte, pantallas secuenciales y una partitura de interacción.
Segunda Propuesta
El sitio reUS está constituido por cualidades determinadas que impregnan la experiencia del usuario, dirigiéndose a este desde una estructura visual fluida, natural y amigable. La cualidad estética de la propuesta llama al usuario a generar una experiencia integral en torno a una organización dinámica y eficaz. Cada espacio dentro del sitio va fomentando la experiencia grata del usuario a través de sus vacíos y pausas que definen el movimiento dentro de esta unidad. Cada parte gana distinción por sí misma, complementando a su vez una visual armónica de organismos. El enfoque principal del sitio es invitar al usuario a explorar, sugerir y relacionarse con la interfaz desde una intención consciente, logrando un experimento completo dentro de las páginas
Los cambios en reUS van orientado a una descongestión visual que a la vez no omita información del lector, utilizando la lectura de dos columnas reminiscente de la lectura en papel, el uso de blancos y de cuadros desplegables evitando un scroll excesivo al igual que numerosos cambios de página, haciéndola más accesible. Esto llevaría a una ruta donde los aspectos anteriores son constantes a lo largo del proceso, a través de carruseles y scrolls laterales que rompen la verticalidad del desplazamiento priorizando el espacio combinado con un trato agradable con el usuario con el fin de hacerle sentir lo más cómodo posible, con un buen entendimiento de la materia que estamos compartiendo para que sea partícipe de la página.
WIREFRAMES
Página principal
La página principal presenta modificaciones en cuanto a su aspecto y orden de los items, la toolbar se integra al fondo de la versión web y en la versión móvil mantiene su posición inferior, apareciendo también íconos superiores de fácil acceso en ambos extremos de esta,se repiensa el logo y logo disminuido de la página para no repetir estos cuando se encuentran ambos presentes en la pantalla, junto a esto se mejora y corrige la diagramación de los items de la versión anterior.
Menús de hamburguesa
Los menús de hamburguesa de la página ahora se presentan como globos de diálogo, así buscando una mejor comunicación visual con el usuario.
Menús desplegables
Las categorías en la versión móvil y web se despliegan también como globos de diálogo, la información de la página principal en la versión móvil son aún menús desplegables, cuidando su distancia, la página se navega en modo de scroll infinito.
El motor de búsqueda, en el caso de la versión web siempre está presente en la toolbar junto a un menú de hamburguesa para más opciones, en cambio en la versión móvil se presenta como un pop up que ocupa toda la pantalla, desde la toolbar en la parte inferior.
Página de patrón
La página de cada patrón se presenta tanto en su versión web y móvil como una versión plegada de esta misma, dejando la versión web solo plegados los ejemplos de patrones, comparados entre sí. En cuanto a la versión móvil esta alcanza a mostrar en su primera vista y una imagen de un ícono que represente al patrón descrito, para navegar por el resto de la página se debe hacer scroll.
Despliegue de la página
Ambas columnas de ejemplos desplegadas, son comparables entre sí, la versión web por medio de dos columnas en la misma página y la versión móvil con el gesto de "swipe" para cambiar entre ellas, en ambos casos se presentan los títulos de los ejemplos junto a un ícono que los represente, y este ícono puede seleccionarse a modo de índice en la parte superior por medio de scroll horizontal.
Página para aportar con un patrón
La página de aportar le permite al usuario el iniciar sesión o registrarse en el sitio web, se le da la bienvenida al usuario a modo de mantener un diálogo con este, permitiéndole la participación en la página, junto a esto se presenta un captcha para cuidar la seguridad del sitio. Tanto en la versión móvil como en la versión web esta bienvenida e inicio de sesión son lo primero que ve el usuario, luego de esto se presenta la sección de colaboradores del sitio, donde se presenta una pequeña imagen y el nombre de cada usuario que haya contribuido con la página, dándoles así los respectivos créditos por ello. Esta sección posee un scroll independiente del resto de la página a modo de no deformarla por ser un elemento creciente en el tiempo, en la versión web está presente como una segunda columna mientras en la versión móvil el usuario debe hacer scroll para acceder a ella.
Página para colaborar con el sitio
Creamos esta sección de colaboración en la que el usuario puede aportar con sus propios ejemplos en cuanto a los patrones por separado, para que el enlace con la persona se fortalezca aun más y termine de cerrarse al ofrecer esta oportunidad de formar parte de la pagina, todo esto cubierto gracias a videos tutoriales cerca del formulario, para poder seguir paso a paso el proceso.
Página de explicación PiX
Dentro de esta pagina se denota a grandes rasgos la definición, características y el como usar una PIX; la cual es una plantilla de interacción de uso visual que ayuda a los usuarios a enriqueces su campo colaborativo dentro del sitio, esta consta de tres capas, usuario, dialogo y sistema. Ademas dentro de la pagina se encuentra una re dirección hacia el sitio oficial de PIX- Notación de interacción para diseño de UX.
Video simulación de Wireframes de la página
Tercera Propuesta
El sitio reUS está constituido por cualidades determinadas que impregnan la experiencia del usuario, dirigiéndose a este desde una estructura visual fluida, natural y amigable. La cualidad estética de la propuesta llama al usuario a generar una experiencia integral en torno a una organización dinámica y eficaz. Cada espacio dentro del sitio va fomentando la experiencia grata del usuario a través de sus vacíos y pausas que definen el movimiento dentro de esta unidad. Cada parte gana distinción por sí misma, complementando a su vez una visual armónica de organismos. El enfoque principal del sitio es invitar al usuario a explorar, sugerir y relacionarse con la interfaz desde una intención consciente, logrando un experimento completo dentro de las páginas.
Los cambios en reUS van orientados a una descongestión visual, permitiendo al lector priorizar la información que se le entrega, desde lo que ya conoce a cómo desde allí avanza en el recorrido de lo que la página le va entregando. El uso de blancos, negros y del gris como color intermediario logran en la estética de nuestra propuesta un diálogo que se mantiene. La eliminación de cuadros de textos permiten una visual que no encasilla y no confunde, permitiendo que la lectura de la página se realice de manera fluida y ligera. Mantener la comodidad del lector es para nosotros parte fundamental, ya que, es así como invitamos a ser partícipes de nuestra comunidad de reUS.
WIREFRAMES
[visualización de pantalla web]
[visualización de pantalla movil]
Página principal
El desencaje se hace presente en esta página, presentando la nueva jerarquía que abarca al sitio, jugando con los contrastes blanco, negro y gris, esta vez sin el logo trasero con el fin de no contaminar visualmente el contenido, y ordenándose en relación al objetivo al que va dirigido, como lo son otros diseñadores, pero conservando su orden primordial de dos columnas, con logos y diagramaciones que la hacen más interactiva y eficiente.
Menús de hamburguesa y menús desplegables
El despliegue esta vez se sumió a la jerarquía rectilínea de las páginas para obtener su continuidad. En el caso de la propuesta móvil, se sumó la opción de Pix al menú desplegable superior con el fin de dejarlo en segundo plano y a la curiosidad del usuario. El despliegue de las categorías de patrón se conserva en su formato, pero al estar estos ordenados horizontalmente facilita la disponibilidad del contenido.
Página de patrón
Dentro de la página existe una comparación de columnas, desde las buenas prácticas destacadas en blanco y las malas prácticas destacadas en negro; respectivas a cada patrón. En la versión web el usuario se traslada de una a otra con el gesto de “switch”. Se realiza la selección de cada ejemplo con un scroll lateral.
Página de comunidad
Tanto en la versión móvil como en la versión web se da la bienvenida e inicio de sesión al usuario, creando un ambiente amigable y grato, luego de esto, se presenta el inicio de sesión y la sección de colaboradores del sitio, donde se presenta una pequeña imagen y el nombre de cada usuario que haya contribuido con la página, dándoles así los respectivos créditos por ello.
Página para colaborar con el sitio
La dualidad de columnas contrastadas se remarca sin rigidizar su aspecto, ya que además cuenta con la facilidad de ayuda visual a la hora de querer colaborar con la página.
Página de explicación PiX
Dentro de la página de PIX, se reacomodaron las lecturas, separándolas en dos espacios, en el primero a grandes rasgos, se encuentra la definición de PIX junto con sus clasificaciones, y en el segundo espacio se encuentran las capas de una PIX, usuario, diálogo y sistema, en conjunto con el cómo funciona cada una dentro de la plantilla de una PIX.
Propuesta Final
REUS es un acrónimo de "relación entre usuario y servicio", ya que los patrones UX jerarquizan la relación entre ambos pudiendo convertir la UX en algo bueno o malo, el nombre reUS hace alusión a esta relación, refiriéndose a como la página busca crear una comunidad con la posibilidad de participar y contribuir en este proyecto.
Arquitectura de Información
La arquitectura de información de la página web de Reus, luego de pasar por una serie de correcciones, pruebas y análisis, se centra en crear una organización que se estructura en base y desde los colores y columnas. Los colores son el eje visual que tiene el usuario desde el primer momento que ingresa a la página web (o móvil) y las columnas ordenan la información que se está entregando. Es desde allí que se navega a partir de conceptos, recuadros, iconos, formas e imágenes. Nuestro sitio web viene desde una base fundamentada en lograr que el usuario desarrolle una navegación fluida, natural y amigable, permitiendo así que a raíz de una buena y construida arquitectura de la información se tenga una buena experiencia de usuario en nuestro proyecto Reus.
Se procedió a reorganizar y agilizar la ruta del usuario en la página, evitando el retorno a páginas anteriores para poder acceder a ella, por ello la toolbar está provista de múltiples opciones en forma de pop up para poder saltar de un lado a otro. Qué esté al acceso de la mano al usuario.
El sitio está dividido en 5 niveles:
- Primer nivel siendo la página de inicio con la bienvenida al usuario, está tienen la función de ser el punto de partida a todas las páginas dependientes sin necesidad de cargar otras para llegar a acceder a la información. Este nivel se le incorporó a la toolbar la sesión del usuario, ayuda y configuraciones.
- Segundo nivel consta de la información y acciones que se revelan gracias a la participación del usuario.
- Tercer nivel le componen las páginas derivadas del sitio, páginas patrones con sus ejemplos, páginas de información, de settings de la página.
- Cuarto nivel consiste en cada patrón individual y en cada nueva opción que ofrece el menú de las páginas de setting e información.
- Quinto nivel es la participación del usuario, sea al comentar o al llenar el formulario de colaboración.
Diseño de Interfaz e Identidad de marca
Paleta de colores
La gama de colores que se visualiza en nuestro proyecto Reus, es en un primer momento un contraste entre el blanco, el gris y el negro. Es desde allí que nace la idea de crear este juego entre estas tres tonalidades, diferenciando y dejando en evidencia la información que se entrega, desde lo que es una buena y mala UX o un buen y un mal patrón de interacción.
Es así como mediante pruebas, análisis y previsualizaciones del sitio web en la pagina de figma, se logra encontrar una gama de colores que acentúa nuestra base visual de este proyecto. Esta gama de colores aparece en el mundo de los colores pasteles y es la que más se adecua a nuestra propuesta gráfica. Estos colores pasan a ser la parte fundamental de nuestra arquitectura de información, ya que, desde allí aparecen las columnas, los textos confrontados, la iconografía representativa de los patrones y la línea de navegación que intuitivamente sigue el usuario.
- #EEEEE : Fondo del sitio y letras dentro del alto contraste
- #BBB6B6 : Pop app y despliegues dentro del sitio
- #7DBBB9 : Franjas superiores y laterales
- #508593 : Franjas superiores,botones de categorías, despliegues y fondo colaboradores
- #2A4158 : Fondo de alto contraste
- #000000 : Textos
Tipografía
La tipografía usada fue “Red Hat Display”, entorno a una interfaz redonda que logra capturar curvas icónicas que identifican y armonizan la interfaz. De ella se utilizo su estilo "REGULAR", para todo el contenido y su estilo "MEDIUM" para títulos; no fueron ocupados los estilos "BOLD" ni "BLACK", ya que estos sobrecargaban la visual.Sus tamaños ocupados en web fueron 30 para títulos, 24 para subtitulo, 18 para cuerpos de texto y en móvil 24 para títulos, 20 para subtitulo, 18 para cuerpos de texto.
Iconografia
El logo principal partió desde la unión de su isotipo en conjunto con una “s” con flecha y un “re” disminuido, luego se unificó la gráfica, en donde todas las letras pertenecen al mundo de las mayúsculas. Para final en un logo aireado, uniforme, limpio y dentro de la gráfica de lo “redondo”, además se eliminó la flecha de la “s” para una descongestión visual.
ISOTIPO
Los cambio en el isotipo o logo en diminutivo, varias desde sus curvas crecientes, ya que anteriormente estas aumentaban su grosor al llegar al final, por ende se unificó el grosor de la “u”, Además el círculo central subió, conformando un todo.
ICONOS INTERNOS
En primera instacia los logos de las categorias cumplian una linea grafica en común muy sutil, tan así que a pesar de poseer elementos comunes, no se veían como un grupo cohesionado. En la segunda instancia se definió, en donde todos los logos son rellenos y se unificaron a la línea gráfica de lo “redondo”.Y en la tercera instancia se refinaron detalles como líneas de 16 puntos, y que la distancia de las partes sean iguales a la distancia de los componentes del isotipo, que deriva directamente de la tipografía del logo. Junto a esto se incluye una ilustración en la página de comunidad, siguiendo los mismos lineamientos, con la salvedad de estar en un color gris para no obstruir la información, representando el flujo de la participación de los usuarios en la plataforma y como esto es transmitido al resto de la red.
Categorias
Iconografia general
.jpg)
Logotipo comunidad
Wireframe
Web
Movil
.jpg)
.jpg){kind=small}
.jpg)
.jpg){kind=small}
.jpg)
.jpg)
Página Principal
Los cambios realizados en la página principal se centran específicamente en lograr un descongestionamiento visual, eliminando varios elementos, entre ellos el rectángulo superior izquierdo, el logo principal “REUS” se aireó, amplio y centro. En la toolbar superior se agregó el botón de categorías. Dentro de la diagramación y jerarquía de contenido se eliminó la definición de UX y se realizó una comparación entre la definición de buenas y malas prácticas de un patrón de interacción. Ademas se incorporo dentro de todas las paginas del sitio web un pie de pagina. Los cambios en la versión móvil fueron semejantes a la versión web, dentro de esta se amplió y reorganizó la navegación de las categorías.
Página de Despliegue
Dentro de la página de despliegue se mantuvo los globos de diálogo, en el menú de hamburguesas y las categorías. El nuevo botón dentro de la toolbar, el de categorías, también funciona como un menú desplegable, del cual desde cada categoría se despliegan sus patrones respectivos. Se modificó la manera de comunicar los contenidos dentro del menú de hamburguesa, reemplazando los conceptos planos y “en seco”, por preguntas más amigables, que inviten al usuario a navegar por el área de configuración, ayuda e informaciones.
Página de Patrón
Dentro de la página se mantuvo el recuadro superior, el cual contiene la categoría principal en conjunto con su logo, más la descripción de su patrón elegido. Se mantuvo la división vertical interna de alto contraste de buenas y malas prácticas, ya que estas se desprenden y ocupan las páginas en su totalidad. Los ejemplos se cambian de manera independiente ya sean de las buenas o malas prácticas.
Se eliminó la opción de adjuntar directamente las partituras de interacción, en su lugar se insertó un botón que invita al usuario a verlas en la página de PIX. Se conservó la opción de comentar al final de cada ejemplo, junto con un logo clickable, desde el cual se expanden los comentarios expuestos en cada ejemplo. En la versión móvil se optó que desde cada patrón se podría cambiar a otro de la misma categoría, para cambiar de categoría se debe ir a la página de inicio.
Página de comunidad
En primera instancia se mantuvo el orden de dos columnas para el texto de bienvenida y el formulario de ingreso. En el cual se amplificaron las dimensiones de los botones.
Se re formulo la lista de “colaboradores”, en una estructura global. En donde todos los colaboradores se encuentran por igual, estos se encuentran en circunferencias para seguir la línea gráfica del sitio. Los colaboradores pueden adjuntar su foto, solamente su nombre solo con el fondo azul predeterminado o el logo de su empresa.
Dentro de esta sección se creó una nueva página, para el perfil de cada colaborador. En esta se incluye una foto o logo de la empresa (opcional), mas el nombre del usuario o bien, el nombre de la empresa, en conjunto con su especialidad o servicio. Además se incluyen sus aportes dentro de la comunidad, manteniendo el distintivo alto contraste para una comparación entre aportes en torno a las buenas o malas prácticas respectivamente. Su organización está orientada a posicionar el logo de la página en cuestión, el nombre de la página y su plataforma, si es una app y/o un sitio web; posteriormente se extiende abajo el patrón en donde se encuentra cada ejemplo. Por ende, su arquitectura está dirigida al aporte realizado por patrón.
Página de Colaboradores
Dentro de la página se amplió la dimensión de los botones, tanto en la versión móvil como en la versión web. El recuadro de alto contraste se conformó su límite a través de la construcción y apoyo de grillas; por lo cual llega hasta el borde del recuadro superior.
Páginas dentro del menú de “hamburguesa”
Dentro de una arquitectura de interfaz común, se integraron las páginas de configuración, ayuda e informaciones. Su contenido es resaltado desde una toolbar lateral, cada contenido tiene en su interior una variación entre 1 a 5 subcategorías; los cuales son mostrados a través de pop app.
Propuesta en HTML y CSS
Para visitar el sitio web de REUS haga click aquí, para visitar el repositorio del sitio en GitHub haga click aquí.
Se realizo la transcripción de propuesta de interfaz y navegación en repositorio, en Github con paginas navegables por HTML con CSS. De modo que esta argumente la arquitectura de información propuesta para el sitio, en conjunto con una guía de navegación.
