Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Digitalis Design - Mobile App Design (hun)

MOMEline Digitalis Design Kurzus digitalisdesign.momeline.hu

  • Login to see the comments

  • Be the first to like this

Digitalis Design - Mobile App Design (hun)

  1. 1. Mobil app design Korsós Milán, SoWink Inc. milankorsos.com - @korsosm
  2. 2. Mobil appok
  3. 3. OkostelefonokNagy érintőképernyőGPS chipSzinte állandó mobilinternet kapcsolatEgy kattintással letölthető alkalmazások (appok)
  4. 4. Miért fontosak az appok?A mobil alkalmazás piac értéke 2015-retöbb, mint 25 milliárd dollár lesz. TechCrunch 20112009-ben 7 milliárd appot töltöttek le,2012-re 50 milliárdot fognak. Mashable 2010
  5. 5. Facebook
  6. 6. InstagramElső olyan social network, ami csak iPhoneon érhető el. képmegosztó szolgáltatás1 év alatt (2010. okt. 6), 12 millió letöltés (2011. dec. 2.) jelenleg havi több, mint 2M új felhasználó TechCrunch 2011
  7. 7. Platformok
  8. 8. PlatformokApple App Store: 522 000 appsAndroid Market: 200 000 apps (Jun) - 600 000 apps (Dec)Windows Phone 7 Marketplace: 25 000 appsBlackberry AppWorld: 21 000 apps
  9. 9. Natív app vs webappNatív app: alkalmazás store-ból letölthető, mindenplatformra külön kell lefejleszteniWeb app: a böngészőben egy webcímről érhető el,elméletileg egyszer kell megcsinálni és minden platformonelérhető (gyakorlatilag optimalizálni kell)Videó: Native apps must die (Scott Jenson)
  10. 10. Natív app vs web app
  11. 11. Design process• UI design egy analitikus tervezési folyamat
  12. 12. Tablets
  13. 13. Design process
  14. 14. Design processUI design egy analitikus tervezési folyamat
  15. 15. Design process
  16. 16. Design processour primary task is not to understand technologybut understand people
  17. 17. Scribe created by www.PopulationDesign.comThe video: http://www.youtube.com/watch?v=O94kYyzqvTc
  18. 18. 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!)
  19. 19. ÖkölszabályokTervezz 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!
  20. 20. Design processKövetelmények meghatározásaLogikai tervezésUI tervezésFejlesztésTesztelés
  21. 21. Követelmények1. Probléma definiálása2. Üzleti célok meghatározása3. Felhasználók elemzése4. User story-k megírása
  22. 22. Probléma definiálásaMi 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
  23. 23. Üzleti célok meghatározásaMilyen üzleti elvárásoknak kell megfelelni? árazás (free, paid, in-app purchase, ads) platform választásSoWink apps free iPhone app, (free) mobile web app üzleti cél a termék használatának ösztönzése
  24. 24. Felhasználók elemzéseKi 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?
  25. 25. 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 egyszermegmentette a szívrohamtól.Elindít egy kapcsolattartó felvételt, közben felvesz hozzá egy partnert, amihez szerkeszti aglobá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. Kicsitmeg 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. tabbankizárólag, egy ablakba nem fér be. Ritkán látja a Dashboardot, már egyb"l
  26. 26. User story-k írásaUser 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
  27. 27. User story-k írásaSoWink 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.
  28. 28. Design processKövetelmények meghatározásaLogikai tervezésUI tervezésFejlesztésTesztelés
  29. 29. Logikai tervezésInterakciók megtervezéseUse-case-k definiálásaFeature set specifikálása
  30. 30. InterakciókFelrajzoljuk az egyes kepernyőketMinden képernyőről nyilat húzunk azokhoz aképernyőkhöz, ahova el tudunk jutniOptimalizáljuk és teszteljük a user storyk alapján
  31. 31. 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
  32. 32. Feature setSzövegesen, vagy skiccekkel leírjuk az egyes funkciókpontos 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.
  33. 33. Design processKövetelmények meghatározásaLogikai tervezésUI tervezésFejlesztésTesztelés
  34. 34. UI tervezésScreen wireframing tartalom meghatározása szövegesen vázlatos UI skiccek megtervezése UI skiccek véglegesítéseGrafikai tervezés
  35. 35. Screen wireframing
  36. 36. Screen wireframingPlatformonkénti eltérő UI szokások és lehetőségek minden platformhoz elérhető UI guidelinePlatformonkénti eltérő OS funkciók notificationok, vissza gomb, keresés, stb.
  37. 37. Screen wireframingkézzel, PS-sel, mockup software-rel gomockingbird.com / Azure / OmniGraffle / stb.A cél, hogy a grafikusnak már ne kelljennyitott UI kérdéseken gondolkoznia.
  38. 38. Screen wireframing
  39. 39. Grafikai tervezésInspirá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.
  40. 40. Grafikai tervezésElérhető rengeteg előre legyártott UI elem.
  41. 41. Design processKövetelmények meghatározásaLogikai tervezésUI tervezésFejlesztésTesztelés
  42. 42. Design processKövetelmények meghatározásaLogikai tervezésUI tervezésFejlesztésTesztelés
  43. 43. 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.
  44. 44. Platformok
  45. 45. Ahány platform, annyi UI
  46. 46. iOSEgy gomb, ami kilép az alkalmazásból.
  47. 47. iOS
  48. 48. iOS
  49. 49. AndroidKülön gomb a menüre, visszáraés az alkalmazásból való kilépésre
  50. 50. Android
  51. 51. Android
  52. 52. Windows Phone 7Külön gomb a menüre, a keresésreés az alkalmazásból való kilépésre
  53. 53. Windows Phone 7
  54. 54. Windows Phone 7
  55. 55. Windows Phone 7
  56. 56. Windows Phone 7
  57. 57. Mobil webBöngészőgomb a visszára.
  58. 58. Mobil web
  59. 59. Házi feladat
  60. 60. Házi feladatEgy 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.
  61. 61. Házi feladat1. 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.
  62. 62. Házi feladat2. 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.
  63. 63. Házi feladat3*. 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
  64. 64. Házi feladatJövő szombaton megnézzük. ha kérdésetek van, vagy feedbacket szeretnétek kapni, akkor írjatok: milan kukac sowink pont com
  65. 65. Köszönöm.We make it ridiculously easy to meet new people offline.

×