usability gyakorlatban
DESCRIPTION
Egy Facebook applikáció frontend részének tervezése. A drótvázak változása.TRANSCRIPT
Attila [email protected]
AboutUsability a gyakorlatban – UX példa
A reklámokhoz mindenki ért. De a webergonómiához nem. Free!
A prezi célja:
Betekintést nyújt a UX design területére
Példával illusztráljuk az üzleti célokból eredő drótvázakat
Bemutatni a drótvázakból a layout gyártás folyamatát
Tervezési / gyártási hibákra felhívni a figyelmet
Tippek trükkök…
A prezi célja:
Az alábbi példa egy konkrét esettanulmány
Jelen prezentáció a UX design bemutatását tűzte ki célul
A projekt valóban megvalósult
Eredményekről később beszámolunk
Free!
Néhány szó az adott feladatról
Látogatottság növelés •Egy webes portál látogatottságának növelése•A látogatók jelentős része a Facebookról érkezik, így a FB csoport méretének jelentős növelése
LIKE és talking value növelés •A lehető legtöbb LIKE elérése egy applikáción keresztül•A lehető legtöbb ember meginvitálása LIKE-olásra
Közösségbe migrálás •A friss LIKE-olók különböző közösségekbe irányítása•A friss LIKE-olók aktiválása
Drótvázak / opening page
1. verzió
Végleges verzió
LIKE-olásra buzdító direkt felhívás:• A végleges színe zöld lett• A teljes konverziós útvonal végül
mindenhol zöld lett• Később kiderült, hogy ez a design
elem nem ide fog kelleni, ezért áthelyeztük
Konverziós pont• Minden oldalon ugyanott
helyezkedik el, hogy a felhasználónak ne kelljen új navigációs útvonallal találkoznia / megértenie / megbarátkoznia vele.• Minden oldalon ugyanaz a
szín a konverziós szín
Konverziós pont• Kapott egy provokatív
támogató szöveget, ami kattintásra buzdított
Drótvázak / opening page
1. verzió
Végleges verzió
Folyamat jelző:• A felhasználónak mindig látnia
kell, hogy a folyamatban hol tart, mennyi van még hátra.
100% free…• Az oldalon elhelyeztünk
egy a bizalmat elősegítő általánosan használt „ribbont”, hogy az end usert a döntési folyamatban a bizalom érzésével támogassa.
Megnövelt kép felület• A FB app.célcsoportja
erőseny affinis a látványos képekre, így a kép méretét megnöveltük.
Szövegírás• A szöveg jelentőségét nem
becsültük alá, erősen célcsoport specifikus és provokatív szövegeket kapott az app.
Drótvázak / opening page
1. verzió
Végleges verzió
Design• Az app. Tervezésekor tért át
a Facebbok a tab-ról a timeline-ra, így 520-ról 800+ - ra növeltük az oldal szélességét.• Ez tette lehetővé a nagyobb
képi elem használatát
Drótvázak / internal page
1. verzió
Végleges verzió
Folyamat hossz• Maximum öt kérdés fázist
és hét állomásból álló útvonalat terveztünk• Nem találtunk kutatást arra
vonatkozóan, hogy hány fázis után kattintanak el a felhasználók.
Játékszabályzat• A folyamatba belekerült
egy sorsolás, így elhelyeztünk egy Játékszabályzatot az app. ban
Drótvázak / Eredmény oldal
1. verzió
Végleges verzió
A funkcionalitásról:• Az eredeti funkciók
bővültek, így a drótváz is több alkalommal módosult.• Nagyméretű kép
generálódott le, melyet kipostolt volna az api a felhasználó news feedjébe.
2. verzióA funkcionalitásról:• Kiegészült egy FB oldal ajánlóval az oldal,
mely a felhasználó szemének helyzetét és a mozgásának irányát követte.• A szemmozgás végső célja a konverziós
gomb megnyomása volt• A két cél (LIKE és a Tovább gomb) két
konverziós célt adott az oldalnak, ami bonyolította a világos user journey-t
Kettős konverzióról• A cél egy egyenes user journey volt• De két konverziós irány, melyet színekkel
oldottunk meg.• A konverziód gomb lett a
leghangsúlyosabb (zöld)• A gomb a korábbi útvonalnak megfelelő
helyére került
UX design következő lépése…
• A drótvázakat egy prototípus kellett volna, hogy kövesse, melyet az idő rövidsége
miatt nem tudtunk megvalósítani
• A design a prototípus sikere után kellene következzen
• Jelen projektben az volt a következő fázis. Erről részletek hamarosan itt: http://
www.slideshare.net/attilabanki/usability-s-design )
Kapcsolat
Subscribe on Facebook: www.facebook.com/attila.banki
attila_banki
http://www.linkedin.com/in/attilabanki