Digitalis Design - Mobile App Design (hun)
-
Upload
milan-korsos -
Category
Documents
-
view
818 -
download
0
description
Transcript of Digitalis Design - Mobile App Design (hun)
![Page 1: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/1.jpg)
Mobil app design
Korsós Milán, SoWink Inc.milankorsos.com - @korsosm
![Page 2: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/2.jpg)
![Page 3: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/3.jpg)
Mobil appok
![Page 4: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/4.jpg)
Okostelefonok
Nagy érintőképernyő
GPS chip
Szinte állandó mobilinternet kapcsolat
Egy kattintással letölthető alkalmazások (appok)
![Page 5: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/5.jpg)
Miért fontosak az appok?
A mobil alkalmazás piac értéke 2015-re több, mint 25 milliárd dollár lesz. TechCrunch 2011
2009-ben 7 milliárd appot töltöttek le,2012-re 50 milliárdot fognak. Mashable 2010
![Page 6: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/6.jpg)
![Page 7: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/7.jpg)
Első olyan social network, ami csak iPhoneon érhető el.
képmegosztó szolgáltatás
1 év alatt (2010. okt. 6), 12 millió letöltés (2011. dec. 2.)
jelenleg havi több, mint 2M új felhasználó TechCrunch 2011
![Page 8: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/8.jpg)
![Page 9: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/9.jpg)
Platformok
![Page 10: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/10.jpg)
Platformok
Apple App Store: 522 000 apps
Android Market: 200 000 apps (Jun) - 600 000 apps (Dec)
Windows Phone 7 Marketplace: 25 000 apps
Blackberry AppWorld: 21 000 apps
![Page 11: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/11.jpg)
Natív app vs webapp
Natív app: alkalmazás store-ból letölthető, minden platformra külön kell lefejleszteni
Web app: a böngészőben egy webcímről érhető el, elméletileg egyszer kell megcsinálni és minden platformon elérhető (gyakorlatilag optimalizálni kell)Videó: Native apps must die (Scott Jenson)
![Page 12: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/12.jpg)
Natív app vs web app
![Page 13: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/13.jpg)
Design process
• UI design egy analitikus tervezési folyamat
![Page 14: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/14.jpg)
Tablets
![Page 15: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/15.jpg)
Design process
![Page 16: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/16.jpg)
Design process
UI design egy analitikus tervezési folyamat
![Page 17: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/17.jpg)
Design process
![Page 18: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/18.jpg)
Design process
our primary task is not to understand technologybut understand people
![Page 19: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/19.jpg)
![Page 20: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/20.jpg)
Scribe created by ww
w.PopulationD
esign.com
© 2010 Human Factors International, Inc. All rights reserved. www.HumanFactors.com | 800.242.4480 USA & Canada | +1.641.472.4480 International
The video: http://www.youtube.com/watch?v=O94kYyzqvTc
![Page 21: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/21.jpg)
Miben más a mobil?
Mindig nálunk van.
Csak mi használjuk.
Kis képernyője van.
Nincs billentyűzete.
Szinte mindig online. (De csak szinte!)
![Page 22: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/22.jpg)
Ökölszabályok
Tervezz a felhasználóknak. Ez mobilon különösen fontos!
A környezetet és a felhasználó viselkedését vedd figyelembe!
Minőség itt sokkal fontosabb mint a mennyiség.
Figyelj az apróságokra is.
Az egyszerűbb mindig jobb - ha úton vagy akkor meg főleg!
![Page 23: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/23.jpg)
Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés
![Page 24: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/24.jpg)
Követelmények
1. Probléma definiálása
2. Üzleti célok meghatározása
3. Felhasználók elemzése
4. User story-k megírása
![Page 25: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/25.jpg)
Probléma definiálása
Mi az alkalmazás célja és kontextusa?
SoWink apps
A branddel való kapcsolat mélyítése
Elsősorban tartalom fogyasztás
Sitera terelés, ott történjen a tartalom előállítás
![Page 26: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/26.jpg)
Üzleti célok meghatározásaMilyen üzleti elvárásoknak kell megfelelni?
árazás (free, paid, in-app purchase, ads)
platform választás
SoWink apps
free iPhone app, (free) mobile web app
üzleti cél a termék használatának ösztönzése
![Page 27: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/27.jpg)
Felhasználók elemzése
Ki a célcsoport?
mi a médiafogyasztási sajátosságuk?
milyen platformon van jelentős populáció?
Miért fogják használni az appot?
Hogyan fogják használni az appot?
![Page 28: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/28.jpg)
5 / 17
Az alábbiakben összegy!jtöttük a tipikus felhasználói típusokat, amelyeket a tervezés során maximálisan
igyekszünk kiszolgálni.
Kikeresi a megfelel! funkciót, maximum három Pane-ig navigál el, miután befejezte, visszatér a DashboardraMancika nagyon szereti hogy átlátható az app felülete; nincs sok variációs lehet"ség,
egyszerre egy taszkra kell koncentrálnia, tuti nem rontja el. Ha véletlenül továbbklik-
kel, már nyomja is a Visszát. A Wall-t ritkán használja, az Autosave már egyszer
megmentette a szívrohamtól.
Elindít egy kapcsolattartó felvételt, közben felvesz hozzá egy partnert, amihez szerkeszti a globál tevékenységi köröketÉvike átlátja a formok kapcsolódásait; szereti hogyha egy feladat közben eszébe jut,
hogy egy másik kapcsolódó feladatot is meg kell oldania, akkor meg tudja oldani. Kicsit
meg nem mutatja neki a shift-klikkes új folyamat indítást. A Wall-t szereti és használja,
bár hiányzik neki a Like funkció.
Több tabon több folyamatot kezel egyszerre, van amit gyorsan lepörget, van amit pihentet órákig a 20. tabban
kizárólag, egy ablakba nem fér be. Ritkán látja a Dashboardot, már egyb"l
![Page 29: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/29.jpg)
User story-k írása
User stories
felhasználói igények meghatározása
pár mondatban, hétköznapi nyelven
célja: könnyen és gyorsan lehet validálni, hogy a meghatározott céloknak megfelel-e
![Page 30: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/30.jpg)
User story-k írása
SoWink user stories
Rex a buszon ül és unatkozik. Nincs kedve sokat gépelni, vagy döntéseket hozni, de szívesen bogarászna a felhasználók között. Akik tetszenek neki, azokat megjelölné valahogyan, hogy később, a laptopja előtt ülve interaktálni tudjon vele.
![Page 31: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/31.jpg)
Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés
![Page 32: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/32.jpg)
Logikai tervezés
Interakciók megtervezése
Use-case-k definiálása
Feature set specifikálása
![Page 33: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/33.jpg)
Interakciók
Felrajzoljuk az egyes kepernyőket
Minden képernyőről nyilat húzunk azokhoz a képernyőkhöz, ahova el tudunk jutni
Optimalizáljuk és teszteljük a user storyk alapján
![Page 34: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/34.jpg)
![Page 35: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/35.jpg)
Use-casesA user story-k megvalósulásához szükséges lépések.
SoWink apps: új üzenet írásaÜzenetek menüt megnyomni
Új üzenet írása gombot megnyomni
Kiválasztani a partnert
Üzenet megírása
Üzenet elküldése
![Page 36: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/36.jpg)
Feature set
Szövegesen, vagy skiccekkel leírjuk az egyes funkciók pontos működését.
SoWink apps
felsorolásszerűen az összes funkciót részletezzük, kitérve minden felmerülő lehetőségre.
![Page 37: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/37.jpg)
![Page 38: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/38.jpg)
Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés
![Page 39: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/39.jpg)
UI tervezés
Screen wireframing
tartalom meghatározása szövegesen
vázlatos UI skiccek megtervezése
UI skiccek véglegesítése
Grafikai tervezés
![Page 40: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/40.jpg)
Screen wireframing
![Page 41: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/41.jpg)
Screen wireframing
Platformonkénti eltérő UI szokások és lehetőségek
minden platformhoz elérhető UI guideline
Platformonkénti eltérő OS funkciók
notificationok, vissza gomb, keresés, stb.
![Page 42: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/42.jpg)
Screen wireframing
kézzel, PS-sel, mockup software-rel
gomockingbird.com / Azure / OmniGraffle / stb.
A cél, hogy a grafikusnak már ne kelljen nyitott UI kérdéseken gondolkoznia.
![Page 43: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/43.jpg)
Screen wireframing
![Page 44: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/44.jpg)
Grafikai tervezés
Inspiráció!
Igen, nem elég nyomogatni az adott készüléket, használni kell egy darabig, hogy megértsük a működését.
Vannak szép appok, meg kell nézni őket.
![Page 45: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/45.jpg)
Grafikai tervezés
Elérhető rengeteg előre legyártott UI elem.
![Page 46: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/46.jpg)
Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés
![Page 47: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/47.jpg)
Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés
![Page 48: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/48.jpg)
Specifikáció
Milyen hosszú legyen?
mindig olyan hosszú, hogy megértse az, aki dolgozik belőle.
Nincs kötött formátuma.
Lehet gdocs, pdf, rajz, de akár egy email is.
![Page 49: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/49.jpg)
Platformok
![Page 50: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/50.jpg)
Ahány platform, annyi UI
![Page 51: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/51.jpg)
iOS
Egy gomb, ami kilép az alkalmazásból.
![Page 52: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/52.jpg)
iOS
![Page 53: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/53.jpg)
iOS
![Page 54: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/54.jpg)
Android
Külön gomb a menüre, visszára és az alkalmazásból való kilépésre
![Page 55: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/55.jpg)
Android
![Page 56: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/56.jpg)
Android
![Page 57: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/57.jpg)
Windows Phone 7
Külön gomb a menüre, a keresésreés az alkalmazásból való kilépésre
![Page 58: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/58.jpg)
Windows Phone 7
![Page 59: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/59.jpg)
Windows Phone 7
![Page 60: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/60.jpg)
Windows Phone 7
![Page 61: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/61.jpg)
Windows Phone 7
![Page 62: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/62.jpg)
Mobil web
Böngészőgomb a visszára.
![Page 63: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/63.jpg)
Mobil web
![Page 64: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/64.jpg)
Házi feladat
![Page 65: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/65.jpg)
Házi feladat
Egy olyan mobil appot tervezünk, ami a következő kulcsszavak közül 3-5 tetszőlegessel jellemezhető.
barátok, ismerkedés, kapcsolattartás, fesztivál, bárok, programajánló, zenekarok, fénykép megosztás, élmény megosztás, pozíció megosztás, utazás, taxi, mozi.
![Page 66: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/66.jpg)
Házi feladat
1. találjátok ki a célközönséget
legyen két fiktív, de egymástól eltérő felhasználó.
adjatok neki nevet és írjatok róluk 2-2 mondatot.
legyenek egyéniségek és viccesek.
![Page 67: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/67.jpg)
Házi feladat
2. tervezzetek három user story-t
hogyan és mire fogja használni az appot a fiktív felhasználó.
mindegyik user story max 3 mondat legyen, de csak kulcsszavak is elég.
valós probléma legyen, amire te is használnád.
![Page 68: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/68.jpg)
Házi feladat
3*. tervezzetek hozzá egy interakciós térképet
milyen főbb képernyők kellenek ahhoz, hogy a fenti három user story teljesüljön
nyilak h honnan hova tudnak eljutni a felhasználók
rajzoljatok, firkáljatok, bármi
kézzel vagy szoftverrel, pl gomockingbird.com
![Page 69: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/69.jpg)
Házi feladat
Jövő szombaton megnézzük.
ha kérdésetek van, vagy feedbacket szeretnétek kapni, akkor írjatok: milan kukac sowink pont com
![Page 70: Digitalis Design - Mobile App Design (hun)](https://reader033.fdocuments.in/reader033/viewer/2022052621/55838a91d8b42a8e0c8b4cb6/html5/thumbnails/70.jpg)
Köszönöm.
We make it ridiculously easy to meet new people offline.