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

2013/11/14

edua.dobos@kirowskiisobar.com
Helló
Mezei László

Dutka Krisztián

Dobos Édua

Head of UX
kirowski Isobar

UX Designer
kirowski Isobar

UX Designer
kiro...
Mi lesz a program?
1. ETAP
Megnézzük a mobilfejlesztés MINDEN aspektusát
(najó, majdnem minden)
2. ETAP
Összerakunk egy ap...
Hogy állunk itthon
az okostelefon
használattal?
Magyarországon
minden harmadik
felnőttnek van
okostelefonja
2,4 millió okostelefon

2013. Q1. eNET
http://www.enet.hu/hu/h...
Minden
második
internetezőnek

2013. Q1. eNET
http://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-to...
60%-uk nem használja
internetezésre az
okostelefonját

2013. Q1. NRC
http://nrc.hu/hirek/2013/05/15/Kutyukorkep_2013Q1
Akik viszont
használják, azok közül
minden második (51%)
naponta

Forrás: Google megbízásából az Ipsos MediaCT és a TNS In...
29%
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 Intratest
Okos...
33%

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

Rendszeresen: a pontos kérdés úgy hangzott, hogy az „elmúlt 7...
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-ca...
Desktop vs. mobil látogatások
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

19%
8%

2012. 11. 06.
Forrás: Webt...
Desktop vs. mobil látogatások
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

19%
8%

2012. 11. 06.
Forrás: Webt...
Összehasonlítási alapnak
nézzük az amerikai adatokat

Forrás: Mobile Marketing Statistics 2013 Kleiner Perkins Caufield By...
Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

12% 24% 12%
Desktop

Mobil

Forrás: Google...
Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

12% 24% 12%
Desktop

Mobil

Forrás: Google...
Visszafordulási arány
Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái

Az oldalnak nincs
mobilra optimalizált
néz...
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ás
azonnal
Geolokáció
Egyéb képességek
•
•
•
•
•

Giroszkóp
Gyorsulásmérő
Segédfény
Push
Kommunikáció a naptárral és címjegyzékkel
Vágjunk bele…
Mitől lesz sikeres egy projekt?
Üzleti
szempontok

Fejlesztési
szempontok

Felhasználói
szempontok
Ü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 le...
Turné vagy gig?
TURNÉ
• „Örökre” szól
• Újra és újra fogják
használni az emberek

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

GIG
• Csak egy időszakra
...
TURNÉ

GIG

Ez még nem dönti el, hogy app
vagy mobilra optimalizált
weboldal készüljön
Minimum Viable Product
•
•

Biztos, hogy egyetlen nagy ütemre van szükség?
Lehet, hogy kisebb termékben kell gondolkoznunk...
Fejlesztési szempontok
App vagy web?
EZ CSAK EGY ÖKÖLSZABÁLY, DE SEGÍT
Tartalom központú?

Funkció, feladat
központú?

Nem,
akkor web mobil nézet...
APPS

Az emberek imádják
az appokat!
Statisztika: Okostelefon tulajdonosok
kétszer annyi időt töltenek appok
használatával...
APP
PRO
• Komplexebb dolgok csak appban
oldhatók meg
• Akár offline módban is használható
• Telefon képességei jobban
elér...
Web alapú oldalak
Mobile friendly, optimalizált
vagy reszponzív?
1. Mobile friendly
MI 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...
2. Reszponzív
MI AZ A RESZPONZÍV?
• Ugyanaz a kód töltődik be okostelefonon , desktopon
és tableten, de az elrendezés igaz...
PRO
• Jól SEO-zható
• Elég egyszer feltölteni a
tartalmakat – azonos CMS
• Hosszú távú megoldás,
megfelelő tervezéssel
lef...
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...
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

Ki aktívabb a neten?
IOS vagy Android
tulajdonsok?

Költés appokra: ...
Felhasználói
szempontok
People want holes in their wall not drills

Amerikai marketing mondás
Ne a feature-ökből indulj ki, hanem az embereket figyeld

Elütném az időt
valamivel

Gyorsan és
egyszerűen
akarok elintézn...
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:

CLEAR
Egy to-do lista app, ami hetekig vezette a
bevételi és letöltési rang...
A to-do listák piaca rendkívűl
telített
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é...
Figyelem a részleteken
Ha minden taskot kipipáltunk a listáról és üressé válik a
képernyő, akkor ha figyelmesek vagyunk id...
Szép
Jól felépített promó
hetekkel a release előtt
A képen a Clear csapata éppen promó videót
készít
Mégegy példa:

SOLD
Nem 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
A projekt menete, mérföldkövek
1.
2.
3.
4.
5.

Legyen kompetenciánk
Business case megteremtése
vagy kérjünk tanácsot
Proje...
Hogyan írjunk ki tendert?
•
•
•
•
•

Hol találod meg akiket érdemes meghívni?
Kiről hidd el, hogy alkalmas rá?
Elvárások m...
Kivel dolgozzunk?
HÁZON BELÜL

ÜGYNÖKSÉGGEL

KIS CÉGGEL

PROJEKTRE
ÖSSZEÁLLT
CSAPATTAL

• Kiváló
• Full-service
• Kevesebb...
Szerepkörök
(egy ügynökségben)
UI Designer

UX Designer
Account
Manager vagy
PM

Sitebuilder

Back-end
fejlesztő
A tervezés lépései
Felkészítő szakasz: User research,
analitika

Tartalom
készítés

Tervezési
szakasz

UX tervezés:
Működé...
A drótváz olyan
mint egy tervrajz
•

Mi honnan nyílik?

•

Milyen funkciók (szobák) vannak?

•

A megrendelő adja az elkép...
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

Drót

Design
Kattintható prototípus

http://survey.kirowski.com/thome/joyful4/dragger_A.html
Felhasználói tesztelés
Lehetőségek:
• Card sorting: komplex
tartalmak
csoportosítására
• Usability test
• Eye-tracking
• H...
Fejlesztés
Módszertanok
• Waterfall fejlesztés
• Agilis: Scrum, Kanban, Behaviour-driven-development
Mit kell tisztázni?
•...
Publikálá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 a...
Promóció
•

•
•
•
•

App store SEO
• Rankingbe ez számít bele: (Letöltések,
értékelések, fizetősök esetén bevétel, social ...
Köszönjük a figyelmet!

És most rakjunk össze
egy projektet!

2013/11/08
Vállalati mobilfejlesztés projektek, App!mobil 2013
Upcoming SlideShare
Loading in …5
×

Vállalati mobilfejlesztés projektek, App!mobil 2013

718
-1

Published on

App!Mobil2013. Másfél órás workshop diái, a tematika Mezei Laci lektorálásával készült el.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vállalati mobilfejlesztés projektek, App!mobil 2013

  1. 1. Ügynökségi tréning vállalati mobilprojektek tervezéséhez 2013/11/14 edua.dobos@kirowskiisobar.com
  2. 2. Helló Mezei László Dutka Krisztián Dobos Édua Head of UX kirowski Isobar UX Designer kirowski Isobar UX Designer kirowski Isobar
  3. 3. Mi lesz a program? 1. ETAP Megnézzük a mobilfejlesztés MINDEN aspektusát (najó, majdnem minden) 2. ETAP Összerakunk egy appot prototípusig
  4. 4. Hogy állunk itthon az okostelefon használattal?
  5. 5. Magyarországon minden harmadik felnőttnek van okostelefonja 2,4 millió okostelefon 2013. Q1. eNET http://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/
  6. 6. Minden második internetezőnek 2013. Q1. eNET http://www.enet.hu/hu/hirek/mar-okostelefon-felhasznalo-a-magyar-lakossag-tobb-mint-%C2%BC-e/
  7. 7. 60%-uk nem használja internetezésre az okostelefonját 2013. Q1. NRC http://nrc.hu/hirek/2013/05/15/Kutyukorkep_2013Q1
  8. 8. Akik viszont használják, azok közül minden második (51%) naponta Forrás: Google megbízásából az Ipsos MediaCT és a TNS Intratest http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf
  9. 9. 29% 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 Intratest Okostelefon-használók, akik az internetet általánosságban használják okostelefonjukon, n=1000 http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf
  10. 10. 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 Intratest http://services.google.com/fh/files/misc/omp-2013-hu-local.pdf
  11. 11. 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-tothe-loo-without-a-smartphone.html
  12. 12. Desktop vs. mobil látogatások Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái 19% 8% 2012. 11. 06. Forrás: Webtrends, Google Analytics 2013. 11. 06.
  13. 13. Desktop vs. mobil látogatások Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái 19% 8% 2012. 11. 06. Forrás: Webtrends, Google Analytics 2013. 11. 06.
  14. 14. Összehasonlítási alapnak nézzük az amerikai adatokat Forrás: Mobile Marketing Statistics 2013 Kleiner Perkins Caufield Byers
  15. 15. Visszafordulási arány Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái 12% 24% 12% Desktop Mobil Forrás: Google Analytics Q3 Tablet
  16. 16. Visszafordulási arány Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái 12% 24% 12% Desktop Mobil Forrás: Google Analytics Q3 Tablet
  17. 17. Visszafordulási arány Egy nagy ügyfelünk nagy forgalmú site-jának statisztikái Az oldalnak nincs mobilra optimalizált nézete! 12% 24% 12% Desktop Mobil Forrás: Google Analytics Q3 Tablet
  18. 18. Az internetezési szokások átalakultak
  19. 19. Nem csak erre kell felkészülni
  20. 20. Ahogy böngészünk az megváltozott
  21. 21. A figyelem korántsem osztatlan
  22. 22. És a körülmények sem mindig nyugodtak
  23. 23. Új képességek és lehetőségek
  24. 24. Mindig nálad van
  25. 25. Képmegosztás azonnal
  26. 26. Geolokáció
  27. 27. Egyéb képességek • • • • • Giroszkóp Gyorsulásmérő Segédfény Push Kommunikáció a naptárral és címjegyzékkel
  28. 28. Vágjunk bele…
  29. 29. Mitől lesz sikeres egy projekt? Üzleti szempontok Fejlesztési szempontok Felhasználói szempontok
  30. 30. Üzleti szempontok
  31. 31. • • • • • 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…
  32. 32. Turné vagy gig?
  33. 33. TURNÉ • „Örökre” szól • Újra és újra fogják használni az emberek • Állandó szolgáltatás, játék GIG • Csak egy időszakra szól, de nagyot szól • Promóció, nyereményjáték, vagy szórakoztatás
  34. 34. TURNÉ GIG Ez még nem dönti el, hogy app vagy mobilra optimalizált weboldal készüljön
  35. 35. Minimum Viable Product • • 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.
  36. 36. Fejlesztési szempontok
  37. 37. App vagy web? EZ CSAK EGY ÖKÖLSZABÁLY, DE SEGÍT Tartalom központú? Funkció, feladat központú? Nem, akkor web mobil nézeten Igen, akkor natív app
  38. 38. APPS Az emberek imádják az appokat! 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. WEB BÖNGÉSZÉS 20% | APPOK 48% | JÁTÉKOK 32% Forrás: USA népessége http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  39. 39. APP 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ő WEB 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
  40. 40. Web alapú oldalak Mobile friendly, optimalizált vagy reszponzív?
  41. 41. 1. Mobile friendly MI 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)
  42. 42. 2. Reszponzív MI 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
  43. 43. 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
  44. 44. 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). PRO KONTRA • 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 • 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
  45. 45. Appok Platformok
  46. 46. Milyen platform az elterjedtebb? Platform http://techland.time.com/2013/04/16/ios-vs-android/
  47. 47. Milyen platformot használnak többen? Költés appokra Ki aktívabb a neten? IOS vagy Android tulajdonsok? Költés appokra: http://techland.time.com/2013/04/16/ios-vsandroid/ iOS vagy Android: http://chitika.com/insights/hourly-iosandroid-study
  48. 48. Felhasználói szempontok
  49. 49. People want holes in their wall not drills Amerikai marketing mondás
  50. 50. Ne a feature-ökből indulj ki, hanem az embereket figyeld Elütném az időt valamivel Gyorsan és egyszerűen akarok elintézni valamit Valamit le akarok jegyezni Meg akarok osztani valamit Egy adott helyen vagyok és ott keresek valamit
  51. 51. A felhasználóknak valójában nem appokra van szüksége, hanem megoldásokra.
  52. 52. Mitől lesz jó egy app? Nézzük konkrét példán: CLEAR Egy to-do lista app, ami hetekig vezette a bevételi és letöltési ranglistákat
  53. 53. A to-do listák piaca rendkívűl telített
  54. 54. Ez itt a Clear
  55. 55. Hüvelykujjal és gesztusokkal navigálható, gombmentes megközelítés
  56. 56. 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
  57. 57. Figyelem a részleteken Ha minden taskot kipipáltunk a listáról és üressé válik a képernyő, akkor ha figyelmesek vagyunk idézeteket vehetünk észre
  58. 58. Szép
  59. 59. Jól felépített promó hetekkel a release előtt A képen a Clear csapata éppen promó videót készít
  60. 60. Mégegy példa: SOLD Nem csak egy app, hanem egy átfogó szolgáltatás
  61. 61. Az SOLD iroda segít az árazásban és megoldja helyetted az értékesítést, a csomagolást és a postázást.
  62. 62. Megvalósítás
  63. 63. A projekt menete, mérföldkövek 1. 2. 3. 4. 5. Legyen kompetenciánk Business case megteremtése vagy kérjünk tanácsot Projektcsapat összeállítása Tervezés Fejlesztés és tesztelés, élesítés Működtetés vagy projekt zárása
  64. 64. Hogyan írjunk ki tendert? • • • • • 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
  65. 65. Kivel dolgozzunk? HÁZON BELÜL ÜGYNÖKSÉGGEL KIS CÉGGEL PROJEKTRE ÖSSZEÁLLT CSAPATTAL • Kiváló • Full-service • Kevesebb tapasztalatszolgáltatást nyújt erőforrás • Szabadúszók és szerzési lehetőség • Biztos szakmai alvállalkozók • Jobban csapata • Kell egy dedikált háttér specializálódnak ember aki • Kell egy dedikált • Tenderre • Jellemzően összefogja ember a projekt megfelelő időt és könnyebben managementre • Elcsúszhat a erőforrást tudnak tudnak projekt, mert fordítani alkalmazkodni • Hátrányt közös jelenthet, ha a erőforrásokat csapat tagjai nem többen használják ismerik egymást REFERENCIÁK ALAPJÁN DÖNTSÜNK
  66. 66. Szerepkörök (egy ügynökségben) UI Designer UX Designer Account Manager vagy PM Sitebuilder Back-end fejlesztő
  67. 67. A tervezés lépései Felkészítő szakasz: User research, analitika Tartalom készítés Tervezési szakasz UX tervezés: Működés, felületek, prototípus Felhasználói tesztelés Felülettervezés
  68. 68. 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
  69. 69. MTVA Olimpiai app Drót Design
  70. 70. MTVA Olimpiai app Drót Design
  71. 71. EB app Drót Design
  72. 72. EB app Drót Design
  73. 73. Telekom alkalmazás Drót Design
  74. 74. Kattintható prototípus http://survey.kirowski.com/thome/joyful4/dragger_A.html
  75. 75. Felhasználói tesztelés Lehetőségek: • Card sorting: komplex tartalmak csoportosítására • Usability test • Eye-tracking • Heat map • A/B teszt
  76. 76. Fejlesztés Módszertanok • Waterfall fejlesztés • Agilis: Scrum, Kanban, Behaviour-driven-development Mit 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
  77. 77. Publikálá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
  78. 78. Promóció • • • • • 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
  79. 79. Köszönjük a figyelmet! És most rakjunk össze egy projektet! 2013/11/08

×