Embed Size (px)
Citation preview
30. dubna 2018, BrnoPripravil: David Prochazka
Jak navrhnout uspesnou aplikaci
Nejen pro iOS
Jak udelat dobrou aplikaci Strana 2 / 32
Obsah prednasky
1 Jak udelat dobrou aplikaci
2 Jak udelat vybornou aplikaci
3 Jak udelat spickovou aplikaci
4 Bonus: vzory chovanı uzivatelu
5 Konec
Jak udelat dobrou aplikaci Strana 3 / 32
Co majı spolecne?
Obrazek: Apple Developer Center, Inner Traditions
Jak udelat dobrou aplikaci Strana 4 / 32
Zakladnı principy aplikace podle Apple
1 Estetika: viz funkcionalismus2 Konzistence: terminologie, zvyklosti. . .3 Prıma manipulace: viz gesta4 Okamzity feedback: vidım, co se stalo5 Metafory: odpad’ak, slozka a sponka6 Uzivatel vse rıdı: jejda, ono se to sdılelo
HIG: https://developer.apple.com/ios/human-interface-guidelines/
Jak udelat dobrou aplikaci Strana 5 / 32
Material design
Obrazek: https://material.io
Jak udelat dobrou aplikaci Strana 6 / 32
Podrobny vs. obecny navod
https://design.google/library/material-design-awards-2017/
https://developer.apple.com/design/awards/
Jak udelat vybornou aplikaci Strana 7 / 32
Obsah prednasky
1 Jak udelat dobrou aplikaci
2 Jak udelat vybornou aplikaci
3 Jak udelat spickovou aplikaci
4 Bonus: vzory chovanı uzivatelu
5 Konec
Jak udelat vybornou aplikaci Strana 8 / 32
Musıme tedy zjistit co uzivatel chce
Kazdy clovek, ktery pouzıva dobrovolne nejaky nastroj mapro to svuj duvod:
nalezenı informace nebo objektu,neco se naucit,vykonat operaci,neco ovladat nebo hlıdat,neco vytvorit,komunikovat s nekym,pobavit se.
Jak udelat vybornou aplikaci Strana 9 / 32
Proc manazer vyuzıva email1
Aby si precetl zpravy.Jiste, ale proc pıse a cte emaily?Aby mohl komunikovat s jinymi lidmi.Jiste, ale proc nezavola, neposle dopis, SMS . . . ?Evidentne existuje nejaky duvod . . .
soukromı?archivace konverzacı?rychlost?cena?socialnı (fyzicke) omezenı?
1viz Jenifer Tidwell: Designing Interfaces
Jak udelat vybornou aplikaci Strana 10 / 32
Jak navrhnout aplikaci
1 Kdo bude aplikaci pouzıvat2 Za jakym ucelem uzivatel zarızenı pouzıva.3 Jake ukony musı ke splnenı cıle ucinit.4 Z ceho se aplikace sklada:
1 objekt nebo seznam objektu,2 seznam nastroju,3 seznam cinnostı (co lze delat s objektem),4 seznam kategoriı.
5 Pak teprve resit design obrazovek, navrh atp.
Jak udelat vybornou aplikaci Strana 11 / 32
Kognitivnı zatez
Zacatecnıci slepe nasledujı ukazatele.Zkusenı uzivatele chtejı vytvorit mentalnı mapuprostoru. Opet pomaha jasne znacenı2.Musıme dat pozor na dodrzenı minimalne nasledujıcıpravidla:
1 stale vım, kde jsem (navestı),2 vım kam jıt3 (ukazatel),3 je to blızko – minimalizujeme pocet kliknutı.
2predstavte si, ze jste v neznamem meste3uzivatel nesmı byt na pochybach co se stane po kliknutı
Jak udelat vybornou aplikaci Strana 12 / 32
PrıkladySpatny prıklad: Udelame aplikaci pro zaznampoznamek. V hodnı casti bude lista. Tam budouruzna tlacıtka na spravu poznamek, udalostı...Lepsı prıpad: Udelame aplikaci pro novinare, kterısi potrebujı rychle zaznacit informace o clanku, kteryvysel (vetsinou na webu). Jde o to, aby aplikace bylaschopna rychle zaznacit informaci o tom, kde seclanek nachazı a aby umoznovala zaznamenaneclanky efektivne prochazet.4
Obvykle chyby: Jednou z funkcı je zobrazit uzivatelimapu s jeho pozicı, Je nezbytne implementovatvyhledavanı v poznamkach pomocı klıcovych slovnebo Je nutne implementovat tlacıtko pro....
4nerıkam prohledavat, tagovat atp.
Jak udelat vybornou aplikaci Strana 13 / 32
Pro koho je ta aplikace?
Aplikace nedelate pro sebe.Delate je pro klienta!
Jak udelat vybornou aplikaci Strana 14 / 32
Prototypujte. . .
Obrazek: https://www.sketchapp.com
Jak udelat vybornou aplikaci Strana 15 / 32
. . . a testujte!
1 Definujte si scenare pouzitı2 Vyberte si klidne mısto3 Domluvte si testujıcı (pozor na komunikaci!)4 Stanovte moderatora a nahravejte5 Hledejte prıciny problemu6 Vse zapisujte
Jak udelat spickovou aplikaci Strana 16 / 32
Obsah prednasky
1 Jak udelat dobrou aplikaci
2 Jak udelat vybornou aplikaci
3 Jak udelat spickovou aplikaci
4 Bonus: vzory chovanı uzivatelu
5 Konec
Jak udelat spickovou aplikaci Strana 17 / 32
Predvıda, co chci udelat: mapy
Obrazek: Mapy.cz, Apple Maps, Google Maps
Jak udelat spickovou aplikaci Strana 18 / 32
Predvıda, co chci udelat: doprava
Obrazek: Poseidon, Pubtran, CG Tranzit
Jak udelat spickovou aplikaci Strana 19 / 32
Vı, co se deje okolo me
Obrazek: Google Now (zdroj Google)
Jak udelat spickovou aplikaci Strana 20 / 32
Predvıda, co se stane
Obrazek: Google Now (zdroj Google)
Jak udelat spickovou aplikaci Strana 21 / 32
Predvıda, co se stane
Obrazek: DeepHeart Neural Network (zdroj Cardiogram)
Bonus: vzory chovanı uzivatelu Strana 22 / 32
Obsah prednasky
1 Jak udelat dobrou aplikaci
2 Jak udelat vybornou aplikaci
3 Jak udelat spickovou aplikaci
4 Bonus: vzory chovanı uzivatelu
5 Konec
Bonus: vzory chovanı uzivatelu Strana 23 / 32
Vzory chovanı uzivatelu
Prestoze jsou lide unikatnı, lze v jejich chovanı nalezturcite podobnostnı vzory jak reagujı v urcitych situacıch5.
1 Clear Entry Points2 Safe Exploration3 Escape Hatch4 Changes in Midstream5 Spatial Memory6 Stay in sync
5Jenifer Tidwell: Designing Interfaces, David Prochazka
Bonus: vzory chovanı uzivatelu Strana 24 / 32
Clear Entry Points
Vytvorte jeden nebo nekolik malo jasnych vstupnıchbodu6.Popis by mel jasne evokovat ulohu7.Vstupnı body musı byt proporcionalne i barevnezdurazneny.
6i u webu casto mnozstvı ruznych ramcu, polı, reklam, . . .7pojem ”zde zacnete“ mnoho nerıka
Bonus: vzory chovanı uzivatelu Strana 25 / 32
Safe ExplorationNechte me to vyzkouset bez toho, ze bych se stratilnebo neco pokazil.Lide chtejı vyzkouset nove funkce bez rizika, ze musıneco opravovat, vracet nebo ze se stane neco, co sejim nelıbı (nemusı byt kriticke, stacı i prehranı hlasitehudby pri kliknutı na webove strance).Tyto veci je znervoznujı a odrazujı od zkousenınovych funkcı.Prıklady:
Fotoeditor s funkcı vıcenasobneho ZpetUzivatel webovych stranek je schopen se v kazdemokamziku zorientovat a vatit zpet.Uzivatel mobilnıho telefonu se nebojı vyzkouset novefunkce kvuli samovolnemu pripojenı na Internet.
Bonus: vzory chovanı uzivatelu Strana 26 / 32
Escape Hatch
Do kazde casti aplikace s omezenymi navigacnımimoznostmi umıstete element umoznujıcı navrat dozname casti aplikace.Implementace: logo vracejıcı na domovskou stranku,
”Cancel“ tlacıtko, vidlice nebo ”0“ u telefonu, . . . .Opet zduraznenı myslenky Safe Exploration.
Bonus: vzory chovanı uzivatelu Strana 27 / 32
Changes in Midstream
Rozmyslel jsem si, co chci delat.Nekolik prıkladu:
Uzivatel Amazonu si chce koupit knihy, ale zacte sedo recenzı.Manazer si dela poznamku na telefonu a nekdo muvola.Programator ma rozpracovany projekt a prijdemanazer.Uzivatel vyplnuje pruzkum a chce jej dopsat pozdeji.
Uzivatel by nemel byt uzavren, mela by mu bytponechana moznost volby odejıt a idealne se i vratit(reentrance)8.
8Prılis velka volnost obcas uzivatele mate! Chce byt doveden k cıli.
Bonus: vzory chovanı uzivatelu Strana 28 / 32
Spatial Memory
Prısaham, ze to tlacıtko tam jeste pred chvilkou bylo!Prostorova pamet’ je velmi silny pomocnık priorientaci (viz organizovany chaos na desktopechmnoha uzivatelu).Je vhodne umist’ovat ovladacı prvky na ocekavatelnamısta.Nechte uzivatele prizpusobit si GUI.Nedelejte to za nej (viz problem samo-organizujıcıchse menu9)
9napr. v Ms Office, orientace uzivatelu byla horsı, nez pri vypnutevolbe, lze vytrenovat
Bonus: vzory chovanı uzivatelu Strana 29 / 32
Stay in Sync
Jejda, ten dokument je na druhem pocıtaci!Rada uzivatelu vyuzıva vıce zarızenı a je notorickyproblem udrzet data synchronizovane.Synchronizaci lze resit externım nastrojem10 nebo jimuze podporovat samotna aplikace11.To je jeden z duvodu proc horsı webove aplikacevytlacujı kvalitnı desktopove.Synchronizace musı fungovat automaticky nebotemer automaticky jinak pro vetsinu nepouzitelna.
10synchronizacnı aplikace, e-disky, aj.11desktopovy Mendeley pro spravu clanku a citacı nebo webove
Google Docs
Konec Strana 30 / 32
Obsah prednasky
1 Jak udelat dobrou aplikaci
2 Jak udelat vybornou aplikaci
3 Jak udelat spickovou aplikaci
4 Bonus: vzory chovanı uzivatelu
5 Konec
Konec Strana 31 / 32
Shrnutı
Jasne si definujte uzivatele a ucel aplikace.(Nedelate ji pro sebe!)Rozpracujte funkce do podoby mind mapy.Udelejte si mockup a ten otestujte.Implementujte a otestujte.Zkuste predvıdat kroky a stav uzivatele. . .(lokace, vzorce chovanı, zdravotnı data)
Konec Strana 32 / 32
Dıky za pozornost!
David Prochazka
https://spatialhub.mendelu.cz
https://informatika.mendelu.cz
