Az üzlet mobil oldalaA mobilos forgalom kezelése

Arany JánosDigitálismédia szakértő

Az okostelefonok hozzák a mobilnetetHagyományos „funkció” és okostelefonok szállítási adatai 2009-2014 (globális)

Forrás: Barclays Capital „Internet & Media 101” 2012. január, GKIeNet

2009 2010 2011 2012 2013 20140

500

1000

1500

2000

2500

OkostelefonokFunkció telefonok

Millió db

Mit veszítünk / nyerünk a mobillal?

Magyarország, 2013 nyár: 10-15% mobilforgalom arány

A konverziós arányok alacsonyabbak, mint desktopon

De• A tablet akár felül is múlja a desktopot (külön felhasználói

szegmens)• A mobil sokszor indirekt konverziós csatorna

Austria

Ukrain

e

Germ

any

Croatia

Czech

Republic

Romania

Hungary

Slove

nia

Poland

Slova

kia0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

57%

79%

61%55% 56% 56% 55%

76%

54% 57%

Ratio of Mobile CPC to Desktop

Az alacsonyabb konverziós arányt a kisebb verseny ellensúlyozza

Source: Google Internal Q1 2012

Indirekt konverziókÁrösszehasonlítás és bolt keresés – ott kell lenni!

2011-ben az USA-ban az okostelefon birtokosok 66%-a használta azt ár összehasonlításra és 58%-a a legközelebbi bolt megtalálására

Source: eMarketer 2011

A nagy hirdetők

nincsen mobilra optimalizált weboldala

(2012)!!

79%-nak

Piaci lehetőség

Mobilra optimalizált site-ok sokkal jobban konvertálnak

9

50%

konverziós ráta növekedés jegyeladási területen a mobil site-on!

Mi is a mobilra optimalizálás?

A mobil oldalak 10 pontja

Hallgassunk a felhasználókragood mobile sites are user-centric, meaning they’re built with input from your audience.

Ujj-barátságA nagykezűek is tudják kezelni

Letisztult designÁtláthatóság

LokálisHelyezzünk el információt ami elősegíti, hogy megtalálják az üzletünket

Mobil oldal redirect használatTegyük lehetővé a desktop-os és a mobil oldal közötti váltást

GyorsaságGyor betöltődés és átfuthatóság

EgységesHozzuk át a desktop tartalom minél nagyobb részét mobilra is, a funkcionalitást szem előtt tartva

Egyszerű navigációEgyszerű navigáció, függőleges scrollozás

ElérhetőségMinden készülékfajtán és orientáltságon olvasható

Konverzió fókuszFókuszáljunk a konverziót segító információkra

Gyorsaság

Kevesebb szöveg és bullet point-ok a gyors átfuthatóság érdekében.

Tömörített képek a gyorsabb betöltődés érdekében

Priorizáljuk a tartalmat és a funkciókat aszerint, hogy a mobilos látogatóknak mi a legfontosabb. Figyeljük oldal analitikával, mit csinálnak a látogatóink!

Egyszerű navigáció

13

Komplex oldalakon állandó kereső funkció

Minimális, és kizárólag függőleges scrollozás

Letisztult menü hierarchia és a lenyílők kerülése

A hierarchia szintek között egyértelmű navigáció “Home” és “Bqack” gombokkal

Ujj barát design

14

Nagy, középre rendezett gombok, megfelelő térközzel a mellékantintások elkerülésére

A kisebb gombok is kattintható méretűek.

Letisztultság

15

Mérettel és színnel jelöljük a gombok / linkek fontosságát

A fő tartalom ráfér a képernyőre nagyítás nélkül

3D effektek és árnyékok a gombok kiemelésére.

Határozott kontraszt a szöveg és a háttér között

Sok-sok negatív űr

Elérhetőség

16

HTML5 az interaktivitásért és animációkhoz

Működjön az oldal vízszintes és függőleges képernyő állásnál is

A felhasználó maradjon a korábbi helyén orientáció váltáskor!

Váltsuk ki a Flash-t – nem minden készüléken működik!

Konverzió fókusz

17

Felhívható (click-to-call) telefonszámok

HTML5 beviteli mezők

Kapcsolók és listák az adatbevitel egyszerüsítésére

Rövid beviteli mezők és minimális számú kérdés

Fókuszáljunk a konverziót segítő elemekre

Lokális

18

Cím vagy boltkereső a nyitóoldalon

Térképek és megközelítéi tippek. Használjuk a GPS információit a személyre-szabáshoz, ha lehet.

A közeli boltok árukészlete, lokális hirdetések és akciók

Egységes, átjárható

Egységes login, kosár és kedvencek elérés, megkönnyítendő a több készüléket használók dolgátdesktop devices.

Azonos kulcsinformációk a termékekről és szolgáltatásokről mindenütt.

Amennyire lehet, egységes funkcionalitás minden csatornán.

Mobil redirect-ek

20

A fontos információk, mint cím vagy boltkereső legyenek elérhetőek a redirct oldalon

Tegyük lehetővé a preferált verzió beállítását későbbre

Lehessen választani a mobil és a desktop verzió között bármikor

Hallgassunk a felhasználókra

Használjunk analitikát. Értsük meg hogyan használják a mobilos látogatók az oldalunkat

Ha lehet, folytassunk felhasználói teszteket egy komplex oldal indítása előtt

Tegyük lehetővé a felhasználói vélemény adást

Folyamatosan fejlesszünk a felhasználói visszajelzések alapján

Gyakori hibák

• Külön mobil domain – a domain a brand• Limitált tartalom – szabjuk testre, ne csak

szabjuk• Pop-up-ok – mobilon is rossz élmény, inkább

használjunk bannert• Lejátszhatatlan videók – csak úgy, hogy

minden készülék lejátsza• Betöltési sebesség – mobilon még fontosabb

További források

- howtogomo.com

- www.themobileplaybook.com

- www.dudamobile.com

Lehet könnyen is: Duda Mobile

Mobile weboldal 1 kattintással

Egy példa: ebookers.com Desktop website

26 Google confidential, internal data

Ujj barátLinkek helyett gombokat használ, melyek több helyet hagynak így könnyebb az oldalt kezelni

ebookers – mobil oldal

LetisztultságA szöveg és az elrendezés letisztult és könnyen olvasható, a tartalom elfér a képernyőn nagyítás és scrollozás nélkül

27 Google confidential, internal data

ebookers – mobil oldal

Konverzió fókuszA vásárlókat érdeklő információkra koncentrál. A mobil konverziókat segítik például a kattintható telefonszámok.

Mobil redirect

A főoldal a mobilos látogatókat automatikusan a mobil oldalra irányítja, de mindíg van lehetőség a kettő között váltani.

ebookers.com – Eredmények

• 90% növekedés a mobilos oldalforgalomban

• 90% növekedés a mobilos konverziókban az indulás utáni 5 hónap alatt

• 25% CTR növekedés a mobil fókuszú szöveges hirdetéseknél

És a mobil korszak még csak most kezdődik…!

Ne maradjunk le rögtön az elején!

Sok sikert!

www.linkedin.com/in/janosarany