usability és design

Attila BANKIwww.digitallife.blog.hucyber.cheguevra@gmail.com

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 BANKIwww.digitallife.blog.hucyber.cheguevra@gmail.com

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 BANKIwww.digitallife.blog.hucyber.cheguevra@gmail.com

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 BANKIwww.digitallife.blog.hucyber.cheguevra@gmail.com

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

cyber.cheguevara@gmail.com

http://www.linkedin.com/in/attilabanki