¡Hola chicxs!

Os comparto el prototipo trabajado durante este reto.  Aquí tenéis el archivo Figma y a continuación, os dejo el vídeo:

Bones! Per començar aquest repte es va recollir el feedback del professor i es va actualitzar el wireframe directament en format prototip d’alta fidelitat, per poder-lo avaluar després directament amb els usuaris.

Tests  amb  usuaris

El test de guerrilla té com a objectiu avaluar el prototip d’alta i fidelitat que s’ha creat per tal de detectar potencials problemes d’usabilitat. Les tasques que hauran de fer seran la de registrar el muntatge d’un moble i que el client pugui firmar indicant si està conforme o no amb el muntatge.

S’avaluarà amb un total de 4 participants, que se’ls hi explicarà el briefing de l’activitat perquè es posin en situació, i se’ls hi demanarà que vagin explicant en veu alta el que estiguin fent i els seus pensaments, per així identificar els problemes i solucionar-los posteriorment.

Prototip final

Després d’arreglar els problemes sorgits en el test de guerrilla amb usuaris, aquest seria el prototip final de l’app per a muntadors d’IKEA i el video del seu funcionament.

Hola a todxs!

En esta entrada, presento todo el trabajo realizado durante este reto. 

El producte escollit on he trobat un bon exemple d’una topografia és en els botons d’una màquina de córrer. Molta gent té cintes de córrer a casa seva, en les quals poden passar hores caminant i corrent, sobretot quan la temperatura a l’exterior no és l’adequada per fer esport.

La màquina que jo tinc és molt simple, amb quatre botons que et permeten fer totes les accions possibles i que gràcies a les icones, són fàcils d’entendre. Tots els botons interactuen i fan que la màquina faci una acció: encendre’s, parar-se, pujar el desnivell o baixar-lo. En aquestes dues últimes funcions és on s’ha trobat un bon exemple de topografia que ajuda els usuaris a entendre clarament l’acció que fa la màquina en clicar-lo.

En cas que l’usuari vulgui augmentar el desnivell positiu de la màquina haurà de pressionar el botó que clarament li indica que l’angle de la rampa serà més elevat. Si, per contra, i vols disminuir-lo haurà de prémer l’altre botó on es veu un nino baixant per una rampa. Aquests dos botons són molt descriptius perquè representen clarament l’acció que farà la cinta de córrer si es cliquen en algun moment.

OBJECTE ESCOLLIT

L’objecte escollit com a exemple d’una interfície que genera una bretxa d’execució ha estat els auriculars inal·lambrics Sony WH-CH510. Els he escollit perquè és un objecte que faig servir bastant sovint, sobretot per fer esport al gimnàs. A l’hora de fer-los servir sempre em trobo amb el mateix problema: no recordo com haig de fer per passar les cançons, ja que es fa amb el mateix botó d’apujar o abaixar el volum de la música.

MODEL CONCEPTUAL DE NORMAN

Consulta l’esquema en el document Figma, on també trobaràs la presentació amb els dos casos.

TEST HEURÍSTIC

1. Visibilitat en l’estat del sistema

Quan l’usuari canvia la cançó se sent un soroll assegurant que l’acció s’està realitzant, avisant i informant l’usuari del canvi.

2. Coincidència entre el sistema i el món real

Les icones gravades als botons són les típiques que hi ha en tot aquest tipus de dispositius, i l’usuari ja les té integrades dintre del seu coneixement.

3. Consistència i estàndars / Prevenció d’erros

S’utilitzen només tres botons per a realitzar sis funcions, fet que pot dificultar saber que s’ha de fer per a dur a terme cada acció i causar errors a l’hora de pressionar els botons.

4. Reconeixement

L’usuari es veu obligat a haver de recordar com passar de cançó, ja que a simple vista no s’entén de quina manera s’ha de fer. A part quan l’usuari té els auriculars col·locats, el botó de passar la cançó, i per tant tirar endavant, queda enfocat enrere, i el que és per tornar enrere queda assenyalant endavant. Tot i això, el botó d’apujar el volum i de passar la cançó té un petit punt que fa de relleu perquè l’usuari pugui identificar amb el tacte a on té el dit.

PROBLEMÀTICA

Així doncs, després de dur a terme el test heurístic seguint els principis de Nielsen (només s’han explicat els que presentaven un problema), queda clar que hi ha un problema d’usabilitat en els auriculars Sony WH-CH510. El primer de tot és que en només hi ha tres botons per a sis funcions diferents, fet que causa que l’usuari no sàpiga com accedir a la funció secundària dels botons, en aquest cas la de passar una cançó o tirar enrere en la llista musical. S’ha de mantenir premut? Ha de prémer dos cops al botó? Són dubtes que com a usuari d’aquests auriculars he tingut, i a vegades és molt molest voler passar una cançó i per error acabar apujant el volum de la música.

L’altre problema que pot tenir l’usuari és el de no saber quin botó serveix per tirar endavant i quin per tirar enrere. Mirant els auriculars, s’entén que si es manté clicat el botó d’apujar el volum tirarem enrere, i si es prem el d’abaixar el volum tirarem endavant, però no és així, sinó al revés.

Aquests problemes en la interpretació dels botons són molt molestos per l’usuari que els utilitza, que ha de recordar com es fan servir i quina acció pot fer en cada un. És per això que es plantejarà un disseny on desaparegui aquesta bretxa d’execució, i que tant el dissenyador com l’usuari tinguin la mateixa imatge del sistema.

SOLUCIÓ

Crec que en aquesta problemàtica la solució més fàcil i més lògica és posar un botó per a cada una de les funcions, a excepció del botó de parar i encendre els auriculars, que també serviria per parar la música. La implementació de dos botons més, el de tirar endavant i enrere millorarà l’experiència de l’usuari a l’hora de voler passar una cançó, ja que amb un sol clic podrà realitzar l’acció, i no cometrà l’error d’apujar o abaixar el volum.

Per altra banda, s’han canviat de banda (simètricament) els botons d’apujar i abaixar el volum, així com els de passar o tirar enrere una cançó. En el problema explicat, per passar una cançó s’havia de pressionar el botó que indica tirar enrere, fet que podia suposar un problema pels usuaris. Així doncs, amb aquestes petites i simples millores, els usuaris tindran una millor experiència a l’hora d’utilitzar els auriculars Sony WH-CH510, sabent en tot moment perquè serveix cada botó i com ha d’activar-los.

Nova  proposta:

En esta ocasión se realizaron dos trabajos que demuestran puntos claves del proceso de trabajo dentro de un proyecto de desarrollo de interfaces reales, en este caso tomando como referencia la app de IKEA y proyecto relacionados a esta empresa.

Por un lado realizamos un prototipo de exposición de los elementos o componentes que una aplicación como IKEA Debe desarrollar para implementarlo en su diseño e interfaz en donde podemos apreciar cómo se mantiene un estilo gráfico por medio del uso y la creación de contenido que puede ser incluido a lo largo de los servicios o páginas dentro de la app.

Por otro lado realizamos un prototipo de baja calidad que busca demostrar una idea de funcionalidad y usa habilidad de una nueva propuesta de aplicación e interfaz en donde el objetivo principal es poder observar de manera rápida y como primer vistazo la distribución y el flujo que este tendría en caso de ser desarrollado y destacando los servicios que se pueden encontrar de manera que podamos determinar si requiere de mayor implementación de contenido o mejorar el flujo en sí.

https://www.figma.com/file/0C5OkRB6MJjrnLmOkHa2v2/IKEA-UOC-(Act2-1raParte)?type=design&node-id=14%3A1930&mode=design&t=QeY0jiPwMO4FsmTV-1

https://www.figma.com/file/pF62fxj6ginikCEtDfcXSu/IKEA-UOC-(Act2-2daParte)?type=design&node-id=2001%3A111&mode=design&t=6rX5QzpI8jjuORQI-1

Bones a tots i totes!!

En aquesta entrada us ensenyaré les dues parts d’aquest repte:

Primer de tot he realitzat un UI Kit de l’aplicació d’IKEA, intentant seguir la teoria de l’Atomic Design. En l’arxiu es poden veure les dues tasques que es demanaven: crear els components principals i realitzar una galeria d’instàncies. Podeu visualitzar el contingut a Figma.

Per altra banda, la segona tasca consistia a crear un wireframe per una aplicació destinada als muntadors que treballen a IKEA, per poder visualitzar quins mobles han de muntar, a on i quan. A continuació us deixo el vídeo i el link del prototip a Figma.

Gràcies!!

Hola a todos!

En esta entrada, presento todo el trabajo realizado durante este reto. 

Por un lado, he desarrollado un UI-KIT de la aplicación de IKEA, siguiendo las directrices del Atomic Design. El archivo está compuesto por los componentes principales y una galería de instancias que permiten observar sus diversos estados. Podéis visualizar todo este contenido en Figma. 

Por otro lado, he desarrollado un prototipo de baja fidelidad o Wireframe para una aplicación destinada a los montadores que trabajan en la firma, permitiéndoles visualizar qué deben montar, dónde y cuándo.

Aquí tenéis un video del posible flujo de la aplicación:

Muchas gracias!!!

El prototipo realizado ha sido una copia basada en el flujo encontrado en la app móvil de IKEA, específicamente en el apartado de “carrito” y proceso de compra.

El objetivo principal de esta tarea es entrar a los conocimientos básicos de prototipado con un flujo corto y fácil de entender que pueda adentrarnos de primera mano a conceptos de prototipado que puedan ser profundizados y mejorados con esta retroalimentación y con mayor conocimiento adquirido a lo largo del semestre en curso.

A continuación se encuentran los links tanto del prototipo en Figma y un video que ejemplifica y demuestra el camino del flujo realizado.

LINK A PROTOTIPO EN FIGMA

https://www.figma.com/file/fNqx41AAEBFUqzD48SaKFV/IKEA-UOC?type=design&node-id=14%3A1933&mode=design&t=XMFU12tdj5ysrdH5-1

LINK A VIDEO DEMOSTRATIVO DE FLUJO

https://youtu.be/h_H_mv8kTO4

Flujo_Prototipado_IKEA_NicolasBaldeonSilva