MOMEline Digitalis Design Kurzus digitalisdesign.momeline.hu

1. Mobil app design
Korsós Milán, SoWink Inc.
milankorsos.com - @korsosm

3. Mobil appok

4. Okostelefonok
Nagy érintőképernyő
GPS chip
Szinte állandó mobilinternet kapcsolat
Egy kattintással letölthető alkalmazások (appok)

5. 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

6. Facebook

7. Instagram
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

9. Platformok

10. 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

11. 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)

12. Natív app vs web app

13. Design process
• UI design egy analitikus tervezési folyamat

14. Tablets

15. Design process

16. Design process
UI design egy analitikus tervezési folyamat

17. Design process

18. Design process
our primary task is not to understand technology
but understand people

20. Scribe created by www.PopulationDesign.com
The video: http://www.youtube.com/watch?v=O94kYyzqvTc

21. 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!)

22. Ö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!

23. Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés

24. 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

25. 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

26. Üzleti célok meghatározása
Milyen ü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

27. 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?

28. Kikeresi a megfelel! funkciót, maximum három Pane-ig navigál el, miután befejezte,
visszatér a Dashboardra
Mancika 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

29. 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

30. 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.

31. Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés

32. Logikai tervezés
Interakciók megtervezése
Use-case-k definiálása
Feature set specifikálása

33. 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

35. Use-cases
A 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

36. 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.

38. Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés

39. 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

40. Screen wireframing

41. 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.

42. 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.

43. Screen wireframing

44. 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.

45. Grafikai tervezés
Elérhető rengeteg előre legyártott UI elem.

46. Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés

47. Design process
Követelmények meghatározása
Logikai tervezés
UI tervezés
Fejlesztés
Tesztelés

48. 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.

49. Platformok

50. Ahány platform, annyi UI

51. iOS
Egy gomb, ami kilép az alkalmazásból.

52. iOS

53. iOS

54. Android
Külön gomb a menüre, visszára
és az alkalmazásból való kilépésre

55. Android

56. Android

57. Windows Phone 7
Külön gomb a menüre, a keresésre
és az alkalmazásból való kilépésre

58. Windows Phone 7

59. Windows Phone 7

60. Windows Phone 7

61. Windows Phone 7

62. Mobil web
Böngészőgomb a visszára.

63. Mobil web

64. Házi feladat

65. 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.

66. 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.

67. 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.

68. 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

69. 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

70. Köszönöm.
We make it ridiculously easy to meet new people offline.