1. Usability a gyakorlatban About
– drótvázak és a design
kapcsolata
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:
Bemutatni a drótázból készülő design egyes nehézségeit
A UX folyamat tervezési részének ismertetése
Tippek trükkök, hibák….
3. 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
4. A Facebook app. nyitó About
oldalának evolúciója
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
5. A FB app. nyitó oldal evolúciója
A drótvázak alakulását korábban
már ismertettük.
1. állapot
6. A FB app. nyitó oldal evolúciója
A drótvázak alakulását korábban
már ismertettük.
2. állapot
7. Első körös design
• Nem követi a drótvázat, ami
kockázatot jelent
A FB app. nyitó oldal evolúciója
3. állapot Első körös design
• A LIKE-ra buzdító felirat
gombszerű, ami megtévesztő és
és nem tölti be a funkcióját
• Valamint kiderült, hogy teljesen
felesleges ezen az oldalon
Első körös design
• A gomb nem igazán gombszerű
• Nem üt el a háttértől
Első körös design
• Az inverz színek nem segítik az
olvashatóságot
Első körös design
• A folyamat jelző alulra került,
ahol a user nem látja, és a
számozásból nem is derül ki,
hogy pontosan mi is a funkciója.
A user nem akar azon
gondolkodni, hogy ez vajon mi
lehet.
8. A FB app. nyitó oldal evolúciója
4. állapot
Második körös design
• Ez már követi a drótvázat
9. A FB app. nyitó oldal evolúciója
5. állapot
A drótvázon alapuló layout
10. A Facebook app. belső About
oldalának evolúciója
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
11. A FB app. belső oldal evolúciója
1. állapot
A drótvázak alakulását korábban
már ismertettük.
13. Első körös design
• Nem követi a drótvázat, ami
kockázatot jelent
A FB app. belső oldal evolúciója
3. állapot A LIKE gomb teljesen felesleges és
szükségtelen.
Ez az elem már a drótvázon sem
szerepelt, hibaként jelent meg a
tervben.
Első körös design
• A gomb nem igazán gombszerű
Első körös design • Nem üt el a háttértől
• Az inverz színek nem segítik az
olvashatóságot
Első körös design
• A folyamat jelző alulra került,
ahol a user nem látja, és a
számozásból nem is derül ki,
hogy pontosan mi is a funkciója.
A user nem akar azon
gondolkodni, hogy ez vajon mi
lehet.
14. Második körös design
• Ez már követi a drótvázat
A FB app. belső oldal evolúciója
3. állapot
Második körös design
• A képarányok miatt (a források
adottásgai voltak) eltértünk
csekély mértékben a képi elem
méretétől.
15. A Facebook app. About
megoldás oldalának
evolúciója
Attila BANKI
www.digitallife.blog.hu
cyber.cheguevra@gmail.com
A reklámokhoz mindenki ért. De a
webergonómiához nem.
16. A FB app. megoldás oldal evolúciója
1. állapot
A drótvázak alakulását korábban
már ismertettük.
17. A FB app. megoldás oldal evolúciója
2. állapot
A funkcionális specifikáció
hiányosságai és kiforratlanságai
miatt újabb funkció került a
drótvázba.
18. A FB app. megoldás oldal evolúciója
3. állapot A végleges drótváz kialakításánál
kettős konverziós pont alakult, ki
ami nem volt szerencsés:
1., LIKE gomb
2., Ingyenes tanfolyam
19. A FB app. megoldás oldal evolúciója
4. állapot drótváztól eltért az első
Az eredeti
körös layout, ami zsákutcának
bizonyult a felhasználó
szemmozgása miatt.
20. A FB app. megoldás oldal evolúciója
A végleges layout teljes egészében a
5. állapot drótvázat követte. A felhasználó
szemmozgása megoldásra került
egy lineáris path-szal.
21. Kapcsolat
cyber.cheguevara@gmail.com
attila_banki
Subscribe on Facebook: www.facebook.com/attila.banki
http://www.linkedin.com/in/attilabanki