Catalina Gonzalez Tarea 4 - PATTUER

De Casiopea


Patture CG.jpg


TítuloCatalina Gonzalez Tarea 4 - Taller de Diseño de Interacción 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
4
Alumno(s)Catalina Gonzalez

Cardsorting

La técnica de 'card sorting' se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web. De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental. Podemos diferenciar entre dos tipos de 'card sorting': abierto y cerrado.

En el 'card sorting' abierto el usuario puede agrupar las categorías libremente en el número de conjuntos que crea necesario; mientras que en el cerrado, los grupos o conjuntos están predefinidos y etiquetados y el usuario únicamente deberá colocar cada categoría en el grupo que crea corresponda.

Este segundo tipo de 'card sorting' está recomendado para verificar si una clasificación de información es familiar y comprensible para el usuario, mientras que el "abierto" tiene el objetivo de descubrir qué tipo de clasificación de categorías sería más correcto utilizar.

Patrones de Interacción

Card Sorting CSGP.png

Patrón: Eliminar cuenta

SUBCATEGORIAS

  • Eliminar cuenta

Esta categoría se abarca una buena y una mala ejecución de ella. ya que una buena es cuando el usuario logra el procedimiento y una mala es cuando la plataforma no le otorga las herramientas necesarias al usuario para completar el proceso

  • Desactivar cuenta

Esta categoría esta estrechamente ligada a las malas practicas de una UX, ya que se le otorga al usuario realizar el proceso previo al patrón principal requerido, distintos sistemas que solo otorgan este patrón, denominado como algo "previo a" que no llega al cierre del procedimiento, un patrón incierto, di ambulante en el sistema.

Wirefram

Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web. El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.

Propuesta de nombre: PATTURE

La propuesta de este nombre nace desde desde el vinculo del "dialogo" - "persona" - "sistema", los cuales se interconectan para definir una forma, entorno a una estructura simple, que capte a la usuario. Capar la atención del usuario, con solo un clic. "PAT" proviene de "patron" rescantando las primeras 3 letras y "TURE" proviene de "capture" lo cual significa capturar; en donde "cap" significa capa; rescatando las ultimas 3 letras de la palabra, se coloca una doble "T", ya que denota la interfaz formada entre servicio y usuario.

El diseño de los wirefram esta basado en la doble T, ya que al juntarlas se forman vacíos laterales y un vació centran, ubicando los textos e imágenes en dos columnas en el wirefram de un sitio web y en el wirefram desde un movil, construí el diseño desde los vacíos de estas dobles T en donde en el vació central se ubicada la información y los vacíos laterales funcionaban de bordes.


Pantallas secuenciales Figma (movil)

 Figma inicio movil CG.png  Figma movil 1 CG.jpg  Figma movil 2 CG.jpg  Figma movil 3 CG.jpg  Figma movil 5 CG.jpg  Figma movil original CG.jpg   Figma movil 6 CG.jpg

'Pantallas secuencias Figma (movil-texto)

 Figma inicio movil CG.png Figma movil 1 CG texto.jpg  Figma movil 2CG texto.jpg  Figma movil 3 CG texto.jpg Figma movil original texto CG.jpg  Figma movil 5CG texto.jpg  Figma movil 6CG texto.jpg

'Pantallas secuencias Figma (PC)

 Figma inicio PC CG.jpg Figma PC2 CG.jpg Figma PC3 CG.jpg Figma PC4 CG.jpg Figma PC5 CG.jpg Figma PC6 CG.jpg


'Pantallas secuencias Figma (PC-texto)

Las flechas moradas indican donde el usuario tiene que dar el clic para ir a la siguiente pagina

 Figma inicio PC CG.jpg  Figma texto 01CG.png Figma texto 02CG.png Figma texto 03CG.png Figma texto 04CG.png Figma PC5 CGtexto.jpg