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

2011.05.03. 2

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

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

* Nielsen, 2011. áprlisi adatok

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

2011.05.03. 4

Feature phone SmartphoneTouchphone

USABILITY TESZT

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

2011.05.03. 5

38.89%

54.41%

75.66%83.56% 84.00%

Forrás: NN/g

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

Android alkalmazások

Mobil web Asztali gépek

86 % 83 % 76 % 84 %

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.

2011.05.03. 7

Mobil alkalmazások csoportosítása fejlesztési szempontból Mobil web Mobil alkalmazás Hibrid Widget

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

2011.05.03. 10

Lehetőleg ne használjunk 4-5-nél több tab-et. Ami nem látszik, nem létezik.

ALKALMAZÁSTERVEZÉS

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

2011.05.03. 11

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

1 cm * 1 cm

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)

PÉLDÁK

2011.05.03. 12

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

PÉLDÁK

2011.05.03. 13

Booking.com Vatera NOL.HU

2011.05.03. 14

Köszönöm a figyelmet!