Buenas,

A continuación dejo disponible el dossier explicativo del desarrollo de mejora del sistema de los ascensores de unos grandes almacenes.

Vídeo flujo navegación

Introducción

La finalidad de este documento es recoger la segunda entrega de la asignatura, cuyo fin es realizar el prototipado de una web responsive de acortar urls. Los principales objetivos de esta actividad son:

1. Definir una línea estética acorde a los conceptos trabajados.
2. Comparar en un breve benchmark sus competidores y website similares para detectar posibles componentes, comportamientos, necesidades, etc.
3. Saber construir un prototipo navegable definiendo previamente los componentes a utilizar.
4. Desarrollar el pensamiento crítico y de autoevaluación.

Guía de estilo

https://www.figma.com/file/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?node-id=1%3A14&t=00lh9rRc4lFRO2Se-0

Componentes

https://www.figma.com/file/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?node-id=1%3A13

Prototipo

Tras trabajar en un mapa conceptual e identificar las ideas claves con las que trabajaremos para definir el look and feel del sitio web, se definen los elementos de marca más identificativos: color, tipografía y logo. Partiendo de estos, y tras hacer un breve ejercicio de sketching analizando website similares, se diseñan los componentes a utilizar para posteriormente diseñar y añadir interacción al prototipo móvil, definido en un breakpoint de 360px (móvil) y 1366px (escritorio).

https://www.figma.com/proto/susXzE0gyOvW0RcIQg9yyY/PAC02-Dise%C3%B1o-y-sistematizaci%C3%B3n-de-una-interfaz-gr%C3%A1fica-_-Laura-Reyes-P%C3%A9rez?page-id=1%3A12&node-id=19%3A625&viewport=234%2C222%2C0.27&scaling=scale-down&starting-point-node-id=19%3A625

Para que quede más claro el trabajo y flujo diseñado, a continuación se pueden ver los vídeos de dicha navegación, sobre los diferentes dispositivos realizados.

Introducció

Quan ens trobem davant d’una nova necessitat d’un client o un nou projecte, moltes vegades no es parteix de cap idea preconcebuda i es aquest el moment on un dissenyador UX/UI ha de plantejar un univers visual del producte. Tècniques com el moodboard poden ajudar a pensar en aquest univers i permetre al dissenyador fer una proposta de disseny així com elaborar el prototip en base a aquest.

Un aspecte a tenir en compte en aquesta pràctica és que partim des de zero, el que implica que cada element interactiu que volguem incloure ja sigui ara o en un futur, serà necessari que es plantegi per a que l’equip desenvolupador pugui consultar-ne sense que hagi de tornar a passar a mans de l’equip de UX/UI, especialment en els elements més unitaris. També és important que l’hora de crear el UI KIT del producte, aquest sigui el més clar i entenedor possible per a l’equip de desenvolupament.

La imatge que es volia donar amb Short.ly és la d’una web segura, minimalista i amigable principalment. Per aquest motiu s’han volgut triar colors com el blau i el verd per denotar aquesta confiança i colors ataronjats/groguents en moments puntuals per tal de fer notar aquesta simpatía. Així mateix, en quant a tipografies, per al logotip ens hem inspirat en les xarxes socials, per donar un toc juvenil i refrescant alhora que ens hem decantat per a la resta de textos del producte per Segoe UI. A continuació es mostra el moodboard fet servir per aquesta pràctica.

Enllaç al prototip

A continuació teniu els enllaços dels prototips per a escritori i per mòbil, així com un flux per provar els elements interactius principals.

URL Prototip Breakpoint – Desktop

URL Prototip Breakpoint – Mobile

Elements interactius testing

Vídeo dels fluxos d’interacció

En el següent vídeo es poden contemplar el flux d’interacció d’escurçar una URL sense iniciar sessió, així com els passos necessaris per a poder registrar la URL per recollir-ne estadístiques.

Flow Short.ly Breakpoint Desktop | Ariadna Ortega Rams

Conclusions

Una de les principals dificultats que m’he trobat a l’hora de crear el prototip del producte ha estat crear l’univers visual. Tot i que tenia una idea clara del que volia transmetre i els colors que Short.ly em transmetia, l’estil de tots els elements està molt influenciat per l’estil de Microsoft, fent servir com a referència Fluent UI, React i Material UI. Però malgrat ser molt influenciada per aquesta estètica minimalista, sóc conscient que he de practicar en les questions estètiques, sobretot quan he de partir des de zero.

Un altre aspecte que cal destacar és que com a UI kit han faltat alguns components que potser ara no es fan servir però més endavant serien necessaris. Un exemple del que ha pogut faltar és tota mena d’inputs diferents, no només els de text que hem fet servir activament en el prototip.

Com a punt de millora, a part de treballar en aprendre a crear nous estils, crec que hauria de plantejar el UI kit de manera diferent, enlloc de pensar en què necessito per l’aplicació, podria començar creant tots els elements interactius més habituals, sense pensar en la funcionalitat en sí del producte, de manera que faria que l’UI kit fos més complet. L’ordre i la metodologia en la creació d’un UI Kit des de zero són fonamentals per a que l’equip de desenvolupament pugui consultar totes les possibilitats de forma ordenada i autònoma.

Finalment, crec que he fet una bona feina i que estic millorant respecte altres treballs més senzills de prototipar i respecte l’anterior pràctica. Sento que he aplicat de forma més consistent les eines de sistematització de Figma, el qual m’ha permès que la creació de les pantalles fos extremadament ràpida un cop tenia els elements unitaris i els més complexes creats.

Introducció

Una de les eines més importants per al diseny d’un sistema interectiu la guia d’estils que serveix per poder ser consistents a l’hora de disenyar el prototip que reflecteixi el que es vol realitzar i també serveix per als programadors tenir clar com són els elements a crear i quiens consignes han de seguir.

Per aquesta pràctica s’ha fet una deconstrucció de la pàgina web de AirBnB. S’han hagut d’identificar els 3 breakpoints (Escriptori, Tableta i Mòbil), així com els layouts, els components, tipografíes i gama cromàtica. Un cop identificat el comportament s’ha realitzat el prototip d’un dels breakpoints (Escriptori).

Aprenentatges a destacar

Durant la pràctica he fet servir l’eina de Figma. No l’havia fet servir gaire abans, tampoc coneixia l’abast d’aquest, i amb aquesta pràctica he après i entès de primera mà què tant important són la creació de components i les seves variants per tal d’agilitzar la creació del prototip i les diverses parts. El fet de tenir-ho prou agrupat, m’ha permès reduir les «pantalles» d’interacció i respecte l’anterior protitip que vaig fer, s’ha simplificat molt gràcies a fer servir aquests components i variants. A continuació adjunto una imatge per mostrar com de simplificat ha quedat.

Prototipat i vídeo

A continuació es mostra l’enllaç al vídeo i el prototip del fluxe d’interacció.

URL Vídeo mostrant el flux d’interacció. Breakpoint – Desktop

URL Prototip Breakpoint – Desktop

Conclusions i autoavaluació

Després de realitzar tot aquest treball, he de començar dient que he subestimat la profunditat de la feina que hi havia a realitzar. Això ha fet que el temps se’m tirés a sobre i en conseqüència no he acabat el treball amb la qualitat que hagués volgut entregar. Malgrat això, tinc la sensació d’haver après molt, no només en fer servir l’eina de Figma, sinó en pensar en estalvi de recursos i temps.

En primer lloc, l’exercici d’anàlisis m’ha semblat relativament senzill ja que tinc pràctica en investigar llocs web per veure «com són les coses». Gràcies a això, m’he vist capaç de descarregar totes les icones originals, tant imatges com svg, i anar a filar prim en cada detall com la tipografia.

En el moment que m’he posat a fer els components, al principi em costava veure tot el que havia de fer i què no. A mesura que anava creant components anava veient què necessitava i el que m’ha semblat curiós es que hi ha una frase que s’aplica en aquest exercici, així com en la programació, que m’ha fet entendre la gran utilitat dels components: «Tot allò que hagis de copiar d’un altre lloc, potser cal que existeixi un component/funció per a estalviar feina, i si cal canviar-ho es pot fer tot d’una.»

Finalment comentar que fer aquest exercici de deconstrucció m’ha fet pensar en la profunditat del disseny d’un prototip, tota la feina que comporta i l’important que és pel dia de demà ser conscients del treball que suposa per defensar-ho en els futurs projectes en el que participem com a UX.