Pixel Haven UX/UI esettanulmány

1. Projekt áttekintő

A termék

A Pixel Haven egy e-kereskedelmi alkalmazás, amely lehetővé teszi a gamerek számára, hogy gamer kellékeket vásároljanak.

A probléma

A gamereknek szánt e-kereskedelmi weboldalak gyakran nem specializáltak, hanem egy nagyobb elektronikai webáruház külön szekcióját alkotják.

A projekt hossza

2 hónap

A cél

Célom egy zökkenőmentes vásárlási élmény megteremtése, amely kifejezetten a gamerek igényeire szabott, intuitív és felhasználóbarát felülettel.

A szerepem

Ez egy egyéni projekt volt, amely lehetővé tette számomra, hogy megtervezzem és végrehajtsam a design thinking folyamat minden egyes lépését.

Feladatok

Célom egy zökkenőmentes vásárlási élmény megalkotása, amely kifejezetten a gamerek igényeire szabott, intuitív és felhasználóbarát felülettel rendelkezik.

2. A felhasználó megértése

A felhasználói kutatás összefoglalója

A felhasználói kutatás célja az volt, hogy megértsem a felhasználók igényeit, vásárlási szokásait és nehézségeit, annak érdekében, hogy egy olyan alkalmazást hozzak létre, amely javítja a felhasználói élményt és növeli az általános elköteleződést.”

„A kutatás során kvantitatív módszert alkalmaztam: felmérést készítettem egy Facebook-csoport gamereinek körében, hogy megértsem a tapasztalataikat a játékkellékek vásárlásával kapcsolatban a legnépszerűbb magyar elektronikai webáruházakban.

A felhasználói kutatás fájdalom pontjai

Navigáció

Sok felhasználó számára kihívást jelentett a böngészés a zsúfolt elrendezések és az átláthatatlan menük miatt.

Gyenge termékleírások

A felhasználók úgy érezték, hogy egyes termékek esetében hiányoznak a részletes specifikációk és a jó minőségű képek.

Nem elégant kategória

A felhasználók elégedetlenségüket fejezték ki a korlátozott vagy rosszul strukturált termékkategóriák miatt.

Értékelések hiánya

A felhasználók nagy mértékben támaszkodnak a vásárlói értékelésekre és értékelési pontszámokra, hogy meghatározzák egy termék minőségét és megbízhatóságát.

Perszóna

Felhasználói út

Ez az útvonal-térkép Alex vásárlási folyamatát szimulálja egy gamer egér megvásárlása során. Bemutatja az elvégzendő feladatokat, az érzéseit, valamint a lehetséges fejlesztési lehetőségeket.

3. A tervezés kezdete

Felhasználói folyamatábra

Ez a felhasználói folyamatábra bemutatja azokat a lépéseket, amelyeken a felhasználó végighalad célja eléréséhez. Ez szolgált útmutatóként a drótvázak készítése során.

Papír drótvázak

Az első drótvázakat ceruzával és papírral készítettem, a felhasználói útvonalra koncentrálva a termék megvásárlása során.

Digitális drótvázak

A papír alapú drótvázakat később a Figma segítségével finomítottam. Hasonlóan a papír drótvázakhoz, a fő fókuszú képernyők azok voltak, amelyek a vásárlás lezárásáig vezető lépéseket mutatják be.

Alacsony hűségű prototípus

Az alacsony hűségű prototípus készítése során a fő interakciókra koncentráltam, amelyek az egyes képernyőkön történnek.

4. Felhasználói teszt

Teszt típusa

Nem moderált teszt

Helyszín

Magyarország, távúton

Résztvevők

10 fő

Időtartam

15-20 perc

Felhasználói teszt eredmények

Hiányzó gombok

A tesztelők kiemelték, hogy nincs lehetőség a termékek mennyiségének növelésére a kosárba helyezés előtt.

Hiányzó funkciók a kosárból

A tesztelőknek nem volt lehetőségük a kosárban lévő termék eltávolítására, illetve a termékek számának növelésére.

Széles termékkategória-választék

Users appreciated the wide selection of categories to choose from at the home screen.

5. A dizájn finomítása

Makettek

A használhatósági vizsgálat eredményeit figyelembe vettem, és a makettek készítésekor hozzáadtam a tesztelők által kiemelt hiányzó funkciókat.

Nagy hűségű prototípus

A nagy hűségű prototípus készítésekor a fókusz a felhasználói útvonal követésén volt a vásárlás kezdetétől a végéig.

 

Akadálymentességi szempontok

A teljes dizájnban csak egy betűtípust használtam, ami megkönnyíti az olvashatóságot.

A szöveghierarchia megkönnyíti a felhasználók számára a különböző szekciók és információk megkülönböztetését a képernyőn.

A felhasználói felület tervezésekor olyan színeket használtam, amelyek megfelelnek a WCAG szabályainak, így megkönnyítve az olvashatóságot.

6. Tanulságok

Benyomás

„A tesztelők pozitív benyomást szereztek az alkalmazás funkcióiról és jellemzőiről. Érezték, hogy figyelembe vették őket, és értékelték a főképernyőn található különböző kategóriákat. Összességében pozitív élményük volt az alkalmazás tesztelése során.

Tanulság

A használhatósági vizsgálat kiemelte azokat a funkciókat, amelyekre egyedül nem gondoltam volna, ezért hálás vagyok minden résztvevőnek, aki tesztelte a tervemet. Az akadálymentességi funkciók soha nem lehetnek utólagos gondolatok, és ezen a területen még sokat kell fejlődnöm.