A mobilalkalmazás-tervezés alapjai

Dunder Krisztián

Média Hungary, Siófok, 2011. 05. 03.

MILYEN PLATFORM?

USA: a mobiltulajdonosok 36%-a rendelkezik okostelefonnal

Alkalmazások száma
átlagosan, operációs
rendszerenként*

Az alkalmazások
használatának
gyakorisága
OS-enként*

2011.05.03. * Nielsen, 2011. áprlisi adatok 2

A MAGYAR FELHASZNÁLÓK

Mobilkörkép – 2011. február

2011.05.03. 3
KATEGÓRIÁK

Készülékek kategorizálása

Feature phone Smartphone Touchphone

2011.05.03. 4
USABILITY TESZT

Sikeres feladat végrehajtás készülékek kategóriái szerint

83.56% 84.00%
75.66%

54.41%
38.89%

Sikeres feladat végrehajtás alkalmazások esetén az egyes operációs rendszereken

iPhone Android Mobil web Asztali gépek
alkalmazások alkalmazások

86 % 83 % 76 % 84 %
2011.05.03. Forrás: NN/g 5
CSOPORTOSÍTÁSOK

Mobil aktivitások csoportosítása és használata

 Böngészés
 E-mail
 Hírek (+sport, árfolyamok)
 SNS
 Fórumok
 Video
 Rádió
 Keresés
 Kép
 Térkép
 Közlekedés
 Vásárlás
 Időjárás
 Tartalom letöltés
 Bankolás
2011.05.03. 6
CSOPORTOSÍTÁSOK

Mobil alkalmazások csoportosítása

 Utility apps: tartalmak megjelenítése, kevés input
 hírek (Mashable), időjárás (Weather bug), stb.

 Productivity apps: adatok rendszerezése és változtatása

 vonalkód olvasó (barcode scanner), bankolás, facebook, stb.

 Immersive apps: teljes képernyős, élményszerű interakciók

 grafikus stopper, csillagképek, stb.

Mobil alkalmazások csoportosítása fejlesztési szempontból

 Mobil web
 Mobil alkalmazás
 Hibrid
 Widget

2011.05.03. 7
ALKALMAZÁSTERVEZÉS

A legfontosabb alapelvek alkalmazástervezés során

 Kevés kattintás, amennyire csak lehet!

 Kevés design elem, amennyire csak lehet!

 A készülék szolgáltatásainak kihasználása

 Magától értetődő design és elkülönülő elemek

 Csak releváns információ jelenjen meg az adott oldalon

 Ne bonyolítsuk túl a kategorizálást!

 Alapértelmezett elemek használata, button ikonnal és szöveggel

 A képernyő tartalmának elrendezése egykezes használathoz

2011.05.03. 8
ALKALMAZÁSTERVEZÉS

A legfontosabb alapelvek alkalmazástervezés során

 Ne kelljen a felhasználónak gyakran változtatni az orientációt.

 Helyfüggő szolgáltatás esetén próbálja beazonosítani, hol van

 Billentyűzet ne nyíljon rá a beírómezőre, ha lehet

 Ne keverjük a horizontális és vertikális navigációt appon belül

 A keresőmező külleme kövesse az adott platform hagyományait

 Launch screen kerülendő, ha lehet (ha mégse, minimális idő)

 Ha az appból át kell menni böngészőbe, feltétlen a mobil verzióra

irányítsuk a látogatót!

2011.05.03. 9
ALKALMAZÁSTERVEZÉS

Toolbar, Tab bar, Global navigation bar

Lehetőleg ne használjunk 4-5-nél több tab-et. Ami nem látszik, nem létezik.
2011.05.03. 10
ALKALMAZÁSTERVEZÉS

Képernyők felbontása: mekkora egy gomb?

1 cm * 1 cm

Készülék Felbontás Átmérő Pixel/inch Pixel/button

iPhone 3GS 320*380 3.5 in 163 64*64

iPhone 4G 640*960 3.5 in 326 128*128

Nexus S 480*800 4 in 235 99*99

Motorola Droid X 480*854 4.3 in 228 90*90

HTC Evo 480*800 4.3 in 217 85*85

Az Apple legalább 44*44 pontos méretű kattintható területet javasol

(korábban 44*44 pixel; 1 pont = 2 pixel az iPhone 4G-n)

2011.05.03. 11
PÉLDÁK

Jégkorong vb TV24 Műsorújság

2011.05.03. 12
PÉLDÁK

Booking.com Vatera NOL.HU

2011.05.03. 13
 Köszönöm a figyelmet!

2011.05.03. 14