Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Usability a gyakorlatban           About– drótvázak és a designkapcsolata                                   Attila BANKI  ...
A prezi célja:                 Bemutatni a drótázból készülő design egyes nehézségeit                      A UX folyamat t...
Néhány szó az adott feladatról                        • Egy webes portál látogatottságának növelése                       ...
A Facebook app. nyitó              Aboutoldalának evolúciója                                   Attila BANKI               ...
A FB app. nyitó oldal evolúciója                              A drótvázak alakulását korábban                             ...
A FB app. nyitó oldal evolúciója                              A drótvázak alakulását korábban                             ...
Első körös design                                         • Nem követi a drótvázat, ami                                   ...
A FB app. nyitó oldal evolúciója            4. állapotMásodik körös design• Ez már követi a drótvázat
A FB app. nyitó oldal evolúciója            5. állapotA drótvázon alapuló layout
A Facebook app. belső              Aboutoldalának evolúciója                                   Attila BANKI               ...
A FB app. belső oldal evolúciója            1. állapotA drótvázak alakulását korábbanmár ismertettük.
A FB app. belső oldal evolúciója     2. állapot
Első körös design                                         • Nem követi a drótvázat, ami                                   ...
Második körös design                                   • Ez már követi a drótvázat A FB app. belső oldal evolúciója       ...
A Facebook app.                    Aboutmegoldás oldalánakevolúciója                                   Attila BANKI       ...
A FB app. megoldás oldal evolúciója            1. állapotA drótvázak alakulását korábbanmár ismertettük.
A FB app. megoldás oldal evolúciója            2. állapotA funkcionális specifikációhiányosságai és kiforratlanságaimiatt ...
A FB app. megoldás oldal evolúciója    3. állapot                        A végleges drótváz kialakításánál                ...
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...
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...
Kapcsolat            cyber.cheguevara@gmail.com            attila_banki            Subscribe on Facebook: www.facebook.com...
Upcoming SlideShare
Loading in …5
×

Usability és design

1,068 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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

×