Mobil app design

Korsós Milán, SoWink Inc.milankorsos.com - @korsosm

Mobil appok

Okostelefonok

Nagy érintőképernyő

GPS chip

Szinte állandó mobilinternet kapcsolat

Egy kattintással letölthető alkalmazások (appok)

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

Facebook

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

Platformok

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

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)

Natív app vs web app

Design process

• UI design egy analitikus tervezési folyamat

Tablets

Design process

Design process

UI design egy analitikus tervezési folyamat

Design process

Design process

our primary task is not to understand technologybut understand people

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

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

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

Design process

Követelmények meghatározása

Logikai tervezés

UI tervezés

Fejlesztés

Tesztelés

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

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

Ü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

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?

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

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

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.

Design process

Követelmények meghatározása

Logikai tervezés

UI tervezés

Fejlesztés

Tesztelés

Logikai tervezés

Interakciók megtervezése

Use-case-k definiálása

Feature set specifikálása

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

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

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.

Design process

Követelmények meghatározása

Logikai tervezés

UI tervezés

Fejlesztés

Tesztelés

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

Screen wireframing

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.

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.

Screen wireframing

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.

Grafikai tervezés

Elérhető rengeteg előre legyártott UI elem.

Design process

Követelmények meghatározása

Logikai tervezés

UI tervezés

Fejlesztés

Tesztelés

Design process

Követelmények meghatározása

Logikai tervezés

UI tervezés

Fejlesztés

Tesztelés

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.

Platformok

Ahány platform, annyi UI

iOS

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

iOS

iOS

Android

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

Android

Android

Windows Phone 7

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

Windows Phone 7

Windows Phone 7

Windows Phone 7

Windows Phone 7

Mobil web

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

Mobil web

Házi feladat

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.

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.

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.

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

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

Köszönöm.

We make it ridiculously easy to meet new people offline.