Ügynökségi tréning vállalati mobilprojektek tervezéséhez

2013/11/14 edua.dobos@kirowskiisobar.com

HellóMezei LászlóHead of UXkirowski Isobar

Dutka KrisztiánUX Designerkirowski Isobar

Dobos ÉduaUX Designerkirowski Isobar

1. ETAPMegnézzük a mobilfejlesztés MINDEN aspektusát

(najó, majdnem minden)

2. ETAPÖsszerakunk egy appot prototípusig

Mi lesz a program?

Hogy állunk itthon az okostelefon használattal?

Magyarországon minden harmadik

felnőttnek van okostelefonja

2,4 millió okostelefon

2013. Q1. eNEThttp://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/

Minden második

internetezőnek

2013. Q1. eNEThttp://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/

60%-uk nem használja internetezésre az

okostelefonját

2013. Q1. NRChttp://nrc.hu/hirek/2013/05/15/Kutyukorkep_2013Q1

Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratesthttp://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

Akik viszont használják, azok közül

minden második (51%) naponta

Inkább a TV-jét dobná ki, mint az okostelefonját

Forrás: Google megbízásából az Ipsos MediaCT és a TNS IntratestOkostelefon-használók, akik az internetet általánosságban használják okostelefonjukon, n=1000http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

29%

33%

Használja rendszeresen a telefonját netezésre útközben

Rendszeresen: a pontos kérdés úgy hangzott, hogy az „elmúlt 7 napban”Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratesthttp://services.google.com/fh/files/misc/omp-2013-hu-local.pdf

65%-a a briteknek nem megy WC-re okostelefon nélkül

http://www.thesun.co.uk/sol/homepage/4808177/POO-KNEW-65-of-Brits-cant-go-to-the-loo-without-a-smartphone.html

8% 2012. 11. 06.

2013. 11. 06. 19%Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Desktop vs. mobil látogatások

Forrás: Webtrends, Google Analytics

8% 2012. 11. 06.

2013. 11. 06. 19%Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Desktop vs. mobil látogatások

Forrás: Webtrends, Google Analytics

Több mint a

kétszeresére nőtt

Forrás: Mobile Marketing Statistics 2013 Kleiner Perkins Caufield Byers

Összehasonlítási alapnak nézzük az amerikai adatokat

12%Desktop

Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Visszafordulási arány

Forrás: Google Analytics Q3

24%Mobil

12%Tablet

12%Desktop

Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Visszafordulási arány

Forrás: Google Analytics Q3

24%Mobil

12%Tablet

Duplája

12%Desktop

Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Visszafordulási arány

Forrás: Google Analytics Q3

24%Mobil

12%Tablet

Az oldalnak nincs mobilra optimalizált

nézete!

Duplája

Az internetezési szokások átalakultak

Nem csak erre kell felkészülni

Ahogy böngészünk az megváltozott

A figyelem korántsem osztatlan

És a körülmények sem mindig nyugodtak

Új képességek és lehetőségek

Mindig nálad van

Képmegosztásazonnal

Geolokáció

• Giroszkóp• Gyorsulásmérő• Segédfény• Push• Kommunikáció a naptárral és címjegyzékkel

Egyéb képességek

Vágjunk bele…

Üzletiszempontok

Fejlesztési szempontok

Felhasználóiszempontok

Mitől lesz sikeres egy projekt?

Ha mind a három

területen hozza

az elvárásokat

Üzleti szempontok

• Mi a célunk?• Mekkora büdzsé van rá?• Mennyi időnk van rá?• Mi illik legjobban a cég profiljához?• Minek lenne a legnagyobb haszna?

Gondoljuk végig…

Turné vagy gig?

• „Örökre” szól• Újra és újra fogják

használni az emberek

• Állandó szolgáltatás, játék

• Csak egy időszakra szól, de nagyot szól

• Promóció, nyereményjáték, vagy szórakoztatás

TURNÉ GIG

TURNÉ GIG

Ez még nem dönti el, hogy app vagy mobilra optimalizált

weboldal készüljön

• Biztos, hogy egyetlen nagy ütemre van szükség? • Lehet, hogy kisebb termékben kell gondolkoznunk és több körben megtalálni a jó

megoldást.

Minimum Viable Product

Fejlesztési szempontok

Tartalom központú?

Nem,akkor web mobil nézeten

Funkció, feladat központú?

Igen,akkor natív app

EZ CSAK EGY ÖKÖLSZABÁLY, DE SEGÍT

App vagy web?

Forrás: USA népességehttp://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

Az emberek imádják az appokat!

APPS

WEB BÖNGÉSZÉS 20% | APPOK 48% | JÁTÉKOK 32%

Statisztika: Okostelefon tulajdonosok kétszer annyi időt töltenek appok

használatával (játékok nélkül), mint webes böngészéssel.

PRO• Komplexebb dolgok csak appban

oldhatók meg• Akár offline módban is használható• Telefon képességei jobban

elérhetőek• Gyorsabb• Az ikon jó dolog, és appoknál

automatikusan települ

KONTRA• Drága• Nincs SEO• Update csak frissítéssel• Platformfüggő

PRO• Kereshető, megosztható tartalom• Platform függetlenül mindenhol

elérhető megoldás• Olcsóbb fejlesztés• SEO• Frissítések azonnal, folyamatosan

KONTRA• Csak online elérhető tartalom• Csak egyszerűbb funkcionalitások• Telefon képességei korlátozottan

elérhetők

APP WEB

Mobile friendly, optimalizált

vagy reszponzív?

Web alapú oldalak

1. Mobile friendlyMI AZ A MOBILE FRIENDLY?A mobilon is a desktop nézet töltődik be, de a legfőbb akadályok el vannak hárítva• Nincs Flash (inkább JavaScriptes slideshow-k és

content rotatorok)• HTML alapú telefonszámok, címek, email címek, hogy

a telefonos működést képesek legyenek indítani• Touch miatt nincs hover • Nagyobb click-target (min. 9 mm)

Ez a legkevesebb

amit tehetünk

2. ReszponzívMI AZ A RESZPONZÍV?• Ugyanaz a kód töltődik be okostelefonon , desktopon

és tableten, de az elrendezés igazodik a képernyőmérethez.

• A kisebb felbontásokban prioritások szerint jelenik meg a tartalom

• A mobil kontextusra reagál a tartalomszervezés

PRO• Jól SEO-zható• Elég egyszer feltölteni a

tartalmakat – azonos CMS• Hosszú távú megoldás,

megfelelő tervezéssel lefedi az álló, fekvő és jó eséllyel jövőbeli képernyőfelbontásokat is

KONTRA• Nagy képek növelik az

adatforgalmat• Nagyobb első

befektetésre van szükség

PRO• Ha sok template van a desktop

nézetben akkor ajánlott• Ha nem akarunk hozzányúlni a

desktop nézethez és annak CMS-éhez, akkor könnyen megtehetjük ezt

• Kisebb letöltési méret• Olcsóbb

KONTRA• Minden hibát v. változtatást

kétszer (vagy ahány optimalizált nézetünk van annyiszor) kell megcsinálni

• Általában külön domain-en van, ami végső soron gyengíti a Google rankingünket

3. Optimalizált

A desktop változattól különböző layout mobilra és tabletre, általában külön aldomainen található oldal (pl.: m.domain-nevem.hu).

Appok

Platformok

Milyen platform az elterjedtebb?

Platform

http://techland.time.com/2013/04/16/ios-vs-android/

Milyen platformot használnak többen?

Költés appokra

Költés appokra: http://techland.time.com/2013/04/16/ios-vs-android/ iOS vagy Android: http://chitika.com/insights/hourly-ios-android-study

Ki aktívabb a neten?IOS vagy Android

tulajdonsok?

Felhasználói szempontok

People want holes in their wall not drills

Amerikai marketing mondás

Elütném az időt valamivel

Egy adott helyen vagyok és ott keresek

valamit

Valamit le akarok jegyezni

Meg akarok osztani valamit

Gyorsan és egyszerűen

akarok elintézni valamit

Ne a feature-ökből indulj ki, hanem az embereket figyeld

A felhasználóknak valójában nem appokra van szüksége, hanem

megoldásokra.

Mitől lesz jó egy app?Nézzük konkrét példán:

CLEAREgy to-do lista app, ami hetekig vezette a

bevételi és letöltési ranglistákat

A to-do listák piaca rendkívűl telített

Többek közt az iOS-

nek is van ilyen appja

beépítve

Google play-ben

‚checklist’ keresésre

200 releváns találat

Ez itt a Clear

Hüvelykujjal és gesztusokkal navigálható, gombmentes megközelítés

Minden fölösleges funkciót kihagytak belőle• Nincs emlékeztető• Nincs emailhez rendelés• Kizárólag tennivaló felvitelét,

pipálását és törlését tudja

Figyelem a részletekenHa minden taskot kipipáltunk a listáról és üressé válik a

képernyő, akkor ha figyelmesek vagyunk idézeteket vehetünk észre

Szép

Jól felépített promó hetekkel a release előttA képen a Clear csapata éppen promó videótkészít

Mégegy példa:

SOLDNem csak egy app, hanem egy átfogó

szolgáltatás

Az SOLD iroda segít az árazásban és megoldja helyetted az értékesítést,

a csomagolást és a postázást.

Megvalósítás

1. Business case megteremtése 2. Projektcsapat összeállítása3. Tervezés4. Fejlesztés és tesztelés, élesítés5. Működtetés vagy projekt zárása

A projekt menete, mérföldkövek

Legyen kompetenciánk vagy kérjünk tanácsot

• Hol találod meg akiket érdemes meghívni?• Kiről hidd el, hogy alkalmas rá?• Elvárások menedzselése• A tenderanyag 90%-ban a megoldás is• Mi döntsön, ha nem csak az ár?

Munkamódszerek, emberi tényező, kérd hogy mutassák be, ténylegesen kikkel fogsz dolgozni

• Kérj esettanulmányokat

Hogyan írjunk ki tendert?

Kivel dolgozzunk?

• Kiváló tapasztalat-szerzési lehetőség

• Kell egy dedikált ember aki összefogja

• Elcsúszhat a projekt, mert közös erőforrásokat többen használják

• Full-service szolgáltatást nyújt

• Biztos szakmai háttér

• Tenderre megfelelő időt és erőforrást tudnak fordítani

HÁZON BELÜL ÜGYNÖKSÉGGEL

• Kevesebb erőforrás

• Jobban specializálódnak

• Jellemzően könnyebben tudnak alkalmazkodni

KIS CÉGGEL

• Szabadúszók és alvállalkozók csapata

• Kell egy dedikált ember a projekt managementre

• Hátrányt jelenthet, ha a csapat tagjai nem ismerik egymást

PROJEKTRE ÖSSZEÁLLT CSAPATTAL

REFERENCIÁK ALAPJÁN DÖNTSÜNK

Szerepkörök (egy ügynökségben)

UX Designer UI Designer

Account Manager vagy

PM

Sitebuilder Back-end fejlesztő

A tervezés lépései

UX tervezés:Működés, felületek,

prototípus

Felhasználói tesztelés

Tartalom készítés Felülettervezés

Felkészítő szakasz: User research, analitika

Tervezési szakasz

A drótváz olyan mint egy tervrajz• Mi honnan nyílik?

• Milyen funkciók (szobák) vannak?

• A megrendelő adja az elképzelést, az

építész megoldja, hogy működjön

Drót Design

MTVA Olimpiai app

Drót Design

MTVA Olimpiai app

Drót Design

EB app

Drót Design

EB app

Drót Design

Telekom alkalmazás

Kattintható prototípus

http://survey.kirowski.com/thome/joyful4/dragger_A.html

Lehetőségek:• Card sorting: komplex

tartalmak csoportosítására

• Usability test• Eye-tracking• Heat map• A/B teszt

Felhasználói tesztelés

Módszertanok• Waterfall fejlesztés• Agilis: Scrum, Kanban, Behaviour-driven-developmentMit kell tisztázni?• Elvárások, szkóp, szállítandó, stb.• Tisztázzuk a mérföldköveket• Gondoskodjunk előre a tesztkörnyezetről és a teszt

telefonokról, tabletekről

Fejlesztés

• Android: bármikor (pár óra alatt)• Google Play regisztráció: 25 USD• iOS: kb. két hét, de lehet kérni egy alkalommal

(ügyfél/év) gyorsított elbírálást, ami kb. 4-5 nap a hétvégét is beleértve

• Apple Store regisztráció intézése: a projekt határideje előtt legalább két hónappal

• Regisztrációs díj: 99 USD• Windows: kb. egy hét• Windows LiveID regisztráció: 100 USD

Publikálás

• App store SEO• Rankingbe ez számít bele: (Letöltések,

értékelések, fizetősök esetén bevétel, social és külső hivatkozások)

• App store jelenlét: jó ikon, nagyon szép screenshotok, jó leírás

• Social és szakmai kampány• Promó• Egyéb külső hivatkozások

Promóció

Sok kis promó

helyett egy nagy

bust

A promót kezdjük el

már a release

előtt

És most rakjunk össze egy projektet!

2013/11/08

Köszönjük a figyelmet!