usability és design
DESCRIPTION
Usability (használhatóság) és a design kapcsolatát mutatja be egy konkrét és egyszerű esettanulmányon át.TRANSCRIPT
Attila [email protected]
AboutUsability a gyakorlatban – drótvázak és a design kapcsolata
A reklámokhoz mindenki ért. De a webergonómiához nem.
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….
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
Attila [email protected]
AboutA Facebook app. nyitó oldalának evolúciója
A reklámokhoz mindenki ért. De a webergonómiához nem.
A FB app. nyitó oldal evolúciója
1. állapot
A drótvázak alakulását korábban már ismertettük.
A FB app. nyitó oldal evolúciója
2. állapot
A drótvázak alakulását korábban már ismertettük.
A FB app. nyitó oldal evolúciója
3. állapot
Első körös design• Nem követi a drótvázat, ami
kockázatot jelent
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.
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
A FB app. nyitó oldal evolúciója
5. állapot
A drótvázon alapuló layout
Attila [email protected]
AboutA Facebook app. belső oldalának evolúciója
A reklámokhoz mindenki ért. De a webergonómiához nem.
A FB app. belső oldal evolúciója
1. állapot
A drótvázak alakulását korábban már ismertettük.
A FB app. belső oldal evolúciója
2. állapot
A FB app. belső oldal evolúciója
3. állapot
Első körös design• Nem követi a drótvázat, ami
kockázatot jelent
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ű• Nem üt el a háttértőlElső 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.
A FB app. belső oldal evolúciója
3. állapot
Második körös design• Ez már követi a drótvázat
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.
Attila [email protected]
AboutA Facebook app. megoldás oldalának evolúciója
A reklámokhoz mindenki ért. De a webergonómiához nem.
A FB app. megoldás oldal evolúciója
1. állapot
A drótvázak alakulását korábban már ismertettük.
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.
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 gomb2., Ingyenes tanfolyam
A FB app. megoldás oldal evolúciója
4. állapotAz eredeti drótváztól eltért az első körös layout, ami zsákutcának bizonyult a felhasználó szemmozgása miatt.
A FB app. megoldás oldal evolúciója
5. állapotA végleges layout teljes egészében a drótvázat követte. A felhasználó szemmozgása megoldásra került egy lineáris path-szal.
Kapcsolat
Subscribe on Facebook: www.facebook.com/attila.banki
attila_banki
http://www.linkedin.com/in/attilabanki