Nechte zmizet své GUI aneb proč nekopírovat iPhone UI na Androidu

Tomáš Kafka UX designer/Android developer

tomaskafka.com @keff85

“iPhone všichni milují, tak to prostě obšlehnu a úspěch je na cestě!”

... když dva dělají totéž :)

Anatomie iPhone

aplikace

Anatomie iPhone aplikace

Záhlaví: • lists = back • groceries – to bychom

nepoznali :) • edit – budu vážně

přejmenovávat kategorie tak často?

• new item... musí zabírat celý řádek?

Zápatí • Sort – menu • Sync – nejlíp automaticky • Share – vážně je to tak

používaná funkce?

Čísla?

GTasks: úkoly v Android stylu

Záhlaví: samý obsah, žádné buttony

Gesta: rychlý scroll v hlavičce, jemný scroll v úkolech

Synchronizace funguje automaticky

Na příkazy je menu

Čísla podruhé

iPhone Android

iPhone Android

Jen touchscreen Touchscreen + HW klávesy

Vše je na obrazovce

Zpět, menu pro méně obvyklé činnosti -> více místa pro to důležité

Jednoduchý mentální model

Víc ‚schovek‘ na funkci, kterou zrovna potřebuju

Přehledné pro začátečníky, omezující pro power usery

Pro laiky matoucí – to hlavní by mělo jít i bez menu

GTasks v2, aneb

iUpgrade

Dashboardmania

„Facebook má 9 ikon, tak moje aplikace

bude mít 9 funkcí!“

-to je ale náhoda!

Potřebují dashboard vaši uživatelé?

Spouštějí vaší aplikaci kvůli nějakému contentu? – Ukažte jim ho rovnou (Tweetdeck ...)

Spouštějí vaší aplikaci kvůli jedné konkrétní akci? – Skočte po spuštění rovnou do ní (a dejte jim

možnost jednoduše vycouvat)

• BTW, Facebook app skočí po spuštění rovnou do news feedu – a aktuální verze Twitter app taky

Dashboard je na místě když mám v aplikaci n různých a nijak nesouvisejících činností, které budou uživatelé provádět s podobnou pravděpodobností

... a v takovém případě: nebylo by lepší, kdyby aplikace dělala jednu věc dobře?

Content over

Chrome

Content *is*

Chrome

Užitečné zdroje

• http://www.androidpatterns.com/

• http://www.androiduipatterns.com

– http://www.androiduipatterns.com/2011/04/5-tips-for-converting-ios-ui-to-android.html

• http://dribbble.com/search?q=android

– dribbble = best of the best

• http://pttrns.com

– sice pro iphone, ale výborné pro grafickou inspiraci

• http://jankorbel.cz/webexpo09/ slide 29-31

• vlastní oči a okolní uživatelé

Díky za váš čas!

Tomáš Kafka UX designer/Android developer

tomaskafka.com @keff85