Usability és design

972 views
937 views

Published on

Usability (használhatóság) és a design kapcsolatát mutatja be egy konkrét és egyszerű esettanulmányon át.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
972
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability és design

  1. 1. Usability a gyakorlatban About– drótvázak és a designkapcsolata Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.comA reklámokhoz mindenki ért. De awebergonómiához nem.
  2. 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. 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. 4. A Facebook app. nyitó Aboutoldalának evolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.comA reklámokhoz mindenki ért. De awebergonómiához nem.
  5. 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. 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. 7. Első körös design • Nem követi a drótvázat, ami kockázatot jelentA 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. 8. A FB app. nyitó oldal evolúciója 4. állapotMásodik körös design• Ez már követi a drótvázat
  9. 9. A FB app. nyitó oldal evolúciója 5. állapotA drótvázon alapuló layout
  10. 10. A Facebook app. belső Aboutoldalának evolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.comA reklámokhoz mindenki ért. De awebergonómiához nem.
  11. 11. A FB app. belső oldal evolúciója 1. állapotA drótvázak alakulását korábbanmár ismertettük.
  12. 12. A FB app. belső oldal evolúciója 2. állapot
  13. 13. Első körös design • Nem követi a drótvázat, ami kockázatot jelentA 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. 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. állapotMá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. 15. A Facebook app. Aboutmegoldás oldalánakevolúciója Attila BANKI www.digitallife.blog.hu cyber.cheguevra@gmail.comA reklámokhoz mindenki ért. De awebergonómiához nem.
  16. 16. A FB app. megoldás oldal evolúciója 1. állapotA drótvázak alakulását korábbanmár ismertettük.
  17. 17. A FB app. megoldás oldal evolúciója 2. állapotA funkcionális specifikációhiányosságai és kiforratlanságaimiatt újabb funkció került adrótvázba.
  18. 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. 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. 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. 21. Kapcsolat cyber.cheguevara@gmail.com attila_banki Subscribe on Facebook: www.facebook.com/attila.banki http://www.linkedin.com/in/attilabanki

×