Egy Facebook applikáció frontend részének tervezése. A drótvázak változása.

1. Usability a gyakorlatban About
– UX példa
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.

2. 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…

3. 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

4. Néhány szó az adott feladatról
• 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
Látogatottság
növelés csoport méretének jelentős növelése
• A lehető legtöbb LIKE elérése egy applikáción keresztül
LIKE és talking • A lehető legtöbb ember meginvitálása LIKE-olásra
value növelés
• A friss LIKE-olók különböző közösségekbe irányítása
Közösségbe • A friss LIKE-olók aktiválása
migrálás

5. A nyitó oldal tervezése About
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com

6. 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
Drótvázak / opening page
1. verzió
Konverziós pont
• Minden oldalon ugyanott
helyezkedik el, hogy a
felhasználónak ne kelljen
új navigációs útvonallal
találkoznia / megértenie /
Végleges verzió megbarátkoznia vele.
Konverziós pont
• Kapott egy provokatív • Minden oldalon ugyanaz a
támogató szöveget, ami szín a konverziós szín
kattintásra buzdított

7. Folyamat jelző:
• A felhasználónak mindig látnia
kell, hogy a folyamatban hol
tart, mennyi van még hátra.
Drótvázak / opening page
Szövegírás
• A szöveg jelentőségét nem
1. verzió becsültük alá, erősen
célcsoport specifikus és
provokatív szövegeket
kapott az app.
100% free…
Végleges verzió • Az oldalon elhelyeztünk
Megnövelt kép felület
egy a bizalmat elősegítő
• A FB app.célcsoportja
általánosan használt
erőseny affinis a látványos
„ribbont”, hogy az end
képekre, így a kép méretét
usert a döntési
megnöveltük.
folyamatban a bizalom
érzésével támogassa.

8. Drótvázak / opening page
Design
• Az app. Tervezésekor tért át
1. verzió 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
Végleges verzió

9. A belső oldal tervezése About
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com

10. Drótvázak / internal page
1. 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 Végleges verzió
• A folyamatba belekerült
egy sorsolás, így
elhelyeztünk egy
Játékszabályzatot az app.
ban

11. Az eredmény oldal About
tervezése
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com

12. 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
Drótvázak / Eredmény oldal felhasználó news feedjébe.
1. verzió A funkcionalitásról:
2. verzió • 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
Végleges verzió
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

13. 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 )

14. Kapcsolat
cyber.cheguevara@gmail.com
attila_banki
Subscribe on Facebook: www.facebook.com/attila.banki
http://www.linkedin.com/in/attilabanki