Evalux
| Título | Evalux |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| 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) | Catalina Armijo, Camilo Caroca, Marcelo Mondaca, Omar Nuñez, Rodrigo Toro |
| Profesor | Katherine Exss, Herbert Spencer |
| URL | https://marcelom21.github.io/Evalux/index.html |
Evalux (Evaluación de la UX)
Evalux es un sitio web que se centra en categorizar y nombrar la mayor cantidad de patrones de interacción existentes en la experiencia de usuario que se experimenta a diario a través de interfaces. Evaluar las buenas y malas practicas es esencial para el sitio por lo que se permite al usuario colaborar con esta investigación. El nombre Evalux nace de nuestra necesidad por querer incluir en el nombre el contenido principal del sitio web, el cual sería "la evaluación de la experiencia de usuario", para determinar las formas más adecuadas y las no tan adecuadas de proceder en las distintas interfaces existentes.
- Nivel 1: Corresponde a la introducción al objetivo del sitio web.
- Nivel 2: Pagina inicial.
- Nivel 3: Aquí se presentan las primeras elecciones para el usuario, se ofrecen las opciones de ingreso y la introducción al tema.
- Nivel 4: Se despliegan las distintas categorías, ingreso de datos y resultados.
- Nivel 5: Se ofrece el conjunto de patrones y las opciones de colaboración.
- Nivel 6: Profundización de patrones específicos y formulario para colaboración.
Un wireframe es un boceto o estructura de alambre donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web, su objetivo es poder experimentar la futura experiencia de un usuario, definir el contenido y la posición de los diversos bloques dentro de un sitio web. Los wireframe incluyen menús de navegación, bloques de contenido, imágenes, iconos, etc. Te permiten ver como interactuarán estos elementos entre sí y además te permiten visualizar el comportamiento de sitios web en distintas plataformas.
Segunda Propuesta
Versión Escritorio
Versión móvil
Tercera Propuesta (Wireframe finales)
Versión Escritorio
Versión móvil
Cuarta Propuesta
Primeros avances HTML Github
Propuesta final
Evalux es un sitio web que se centra en categorizar y nombrar la mayor cantidad de patrones de interacción existentes en la experiencia de usuario que se experimenta a diario a través de interfaces. Evaluar las buenas y malas prácticas es esencial para el sitio por lo que se permite al usuario colaborar con esta investigación.
El nombre Evalux viene de nuestra necesidad por evaluar la experiencia de usuario (UX) y su propósito es que en comunidad seamos capaces de registrar y categorizar los distintos patrones de interacción existentes en las distintas plataformas digitales que usamos a diario para que seamos capaces de encontrar cuales son las practicas que deben recomendarse y cuales deben evitarse.
Nuestro sitio web tiene un especial enfoque en la forma en que se narra el contenido, ya que este se va mostrando siempre a la par con las ilustraciones en todo lo largo del sitio, nuestra propuesta de construir un camino que se va marcando por las ilustraciones, nace por la necesidad de generar espacios de descansos para el usuario al momento de ir digiriendo todo el contenido de nuestra página, queremos que el usuario se detenga, entretenga e informe también con las imágenes, para así poder hacer más dinámica la conversación entre el sitio y la persona que se encuentra detrás.
El logo surge de la combinación de tres elementos principales que creemos son importantes para nuestro sitio web, primero se encuentra la forma de la letra E, la cual es la inicial del nombre Evalux y que además hace referencia principalmente al concepto de Evaluar, el cual consideramos fundamental para definir el carácter del sitio y dar a conocer este mismo; luego el siguiente elemento son los desniveles que producen un gráfico de barras el cual representa la diversa recolección de información existente en el sitio y los distintos grados de evaluación que se muestran en los ejemplos de cada patrón de interacción; finalmente el circulo que encierra y vincula los otros elementos y que representa la unión que se busca en la construcción de una comunidad dirigida a un mismo objetivo.
Las ilustraciones tienen una paleta variada, la cual se compone de cinco tonos principales que a la vez tienen dos matices mas cada uno, las ilustraciones son sombreados por arriba e iluminadas por debajo para que estas posean mayor cantidad de matices y estos puedan a la vez generar mayor dinamismo y distracción en la página, el dibujo tiene un trazo constante que que es utilizado también para iconos y divisiones dentro de la pagina; aunque las ilustraciones son formas simples están llenas de pequeños detalles y reglas de conectividad que hacen de la navegación una experiencia mas enriquecida e interesante, estas ilustraciones tienen el propósito de guiar, enlazar los distintos conceptos explorados dentro del sitio, informar y permitir también que el usuario pueda descansar en algunos momentos de todo el texto que se va construyendo a lo largo de nuestra página.
HTML final
Repositorio Github Evalux
Interfaz final
Al entrar al sitio lo primero que se ve es un gran banner que comienza a familiarizar al usuario con el concepto de la patrones de interacción y todas sus ramificaciones acompañado de un mensaje que explica brevemente el propósito de este sitio. Al bajar se explica que son los patrones de interacción para después pasar a dos casos que apoyados con imágenes dan ejemplos de lo que serian malas y buenas practicas, con esta información ya familiarizada se entra en lleno a la razón del sitio, la clasificación de patrones explicando por que es importante catalogar estas buenas y malas practicas separando los patrones en cinco grandes categorías. Al seguir bajando se da la posibilidad de colaborar explicando que se necesita estar registrado o iniciar sesión en el sitio para hacerlo, también explicando que es lo que se necesita para colaborar.
Toda esta información es entregada de manera centrada, para guiar al usuario a través de esta información de manera orgánica, para los usuarios ya relacionados con la pagina existe el header que tiene accesos directos a los puntos con los que sera mas común la interacción, estos seria la clasificación de patrones, la colaboración y el inicio/registro de sesión.
El sitio del patrón mantiene el banner en la cabecera pero de manera sutil, esta en el fondo de los títulos no como protagonista sino como punto enlazador que presenta al patrón en especifico, se da una descripción general del patrón dando paso a las malas y buenas practicas, estas cuentan con galerías que muestran la experiencia de la navegación, una pantalla va acompañada de una reacción y una pequeña descripción, se da la posibilidad de ver mas casos con un menú desplegable hacia abajo que cambiaría la galería arriba para no agrandar demasiado la extensión del sitio y no hacerlo tedioso al navegar, también esta la opción de agregar mas casos que llevan a un formulario para agregar una caso negativo o positivo del patrón que se esta viendo. Como conclusión se entregan sugerencias de que evitar y que hacer al momento de utilizar estos patrones y finalmente una seccion de comentarios para el patrón en general.
Hay dos tonos principales de azul, uno oscuro (#203F4C) que es usado para el trazo del dibujo, el logo,botones, resaltar levemente algunos elementos y como fondo en las secciones de clasificación y las galerías de pantallas, el otro es una mas claro (#00437A) que es usado para los titulos que separan secciones dentro del sitio.
Existen dos variables de formulario para publicación, el de crear un patrón que debe llevar también un caso para que la documentación sea realmente completa y no tener patrones sin ejemplos reales y otra para solo agregar casos a patrones ya existentes. Al seleccionar las pantallas para el ejemplo se abrirá una nueva sección en la que se podrá añadir una descripción y una reacción para ver reflejada la experiencia.
Versión móvil El banner inicial se modifica para ser eficiente en la vista vertical de un celular, se ajustan como se muestran malas y buenas prácticas al igual que el orden de los iconos en la clasificación de patrones, estos cambios son para no tener muchos elementos apretados que provoquen problemas de lectura y legibilidad; además en la sección de captura de pantallas esta versión no muestra de tres imágenes simultáneas, si no que va mostrando individualmente las imágenes, para que estas no pierdan detalles y se puedan apreciar de manera cómoda en la pantalla.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
