Evalux

De Casiopea
Evalux
TítuloEvalux
Tipo de ProyectoProyecto de Taller
Palabras Clavesitioweb
Período2020-2020
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2020
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
Alumno(s)Catalina Armijo, Camilo Caroca, Marcelo Mondaca, Omar Nuñez, Rodrigo Toro
ProfesorKatherine Exss, Herbert Spencer
URLhttps://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.

Mapa de navegación

Evalux 2020niveles 1.jpg


  • 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.

Wireframe de navegación en PC

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.


Bienvenida
Bienvenida (grilla)
Home
Home (grilla)
Casos
Casos (grilla)

Wireframe de navegación en Mobile

Bienvenida
Home
Casos
EvaluxSeparacionMesadetrabajo 1.jpg

Segunda Propuesta

Mapa de navegación

Wireframe

Versión Escritorio

Bienvenida y home
Grilla
Patrones
Patrones

Versión móvil

Bienvenida y home
Patrones
EvaluxSeparacionMesadetrabajo 1.jpg

Tercera Propuesta (Wireframe finales)

Versión Escritorio

Bienvenida y Home
Categorías, buenas y malas prácticas, comentarios
Ver comentarios sin estar registrado
Formulario de Colaboración de Patrón
Formulario de Colaboración de caso
La pestaña de registro e inicio de sesión aparecen por encima de la pagina actual y al terminar te devuelve donde se estaba

Versión móvil

Bienvenida y home
Categorías, buenas y malas prácticas, comentarios
Colaborar con nuevo patrón
Colaborar con nuevo Caso
Registro
Ver comentarios sin estar registrado
EvaluxSeparacionMesadetrabajo 1.jpg

Cuarta Propuesta

Primeros avances HTML Github

Primera propuesta de colores de interfaz
Grilla
Primera propuesta de colores de interfaz
Grilla
EvaluxSeparacionMesadetrabajo 1.jpg

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.

LogoEvalux Mesa de trabajo 1.jpg
LogoEvalux Mesa de trabajo 1 copia.jpg

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.

Mapa de navegacion

Mapaf Mesa de trabajo 1.jpg

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.

Home
Patrón especifico
El iniciar sesión o registrarse aparece como una ventana encima del sitio para no interrumpir la navegacion
Al no tener cuenta se invita a crear una para ser parte de la comunidad
En el header se colocan los accesos directos a los puntos con los que mas se interactua
Separacion2.jpg

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.

Formulario de patrón con caso ejemplo incluido
Archivos seleccionados
Al seleccionar el cuadro se despliega la selección de reacción
Formulario creación de caso ejemplo
Separacion2.jpg

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.

Home
Patrón especifico
Separacion2.jpg
Ventana emergente de registro
El menú cubre la pantalla entera y las substituciones corren las otras opciones hacia abajo
Separacion2.jpg
Formulario patros y ejemplo
Formulario con pantallas seleccionadas
Separacion2.jpg
selección de reacción
Formulario creación de caso ejemplo