Az üzlet mobil oldala - a mobil forgalom kezelése (Arany János)
•
1 gefällt mir•271 views
Olcsóbbat.hu (Sanoma) szakmai nap, 2013. szeptember Mire számíthatunk a mobil internetes forgalomból, hogy érdemes cégünk mobil weboldalát kialakítani.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (14)
Ähnlich wie Az üzlet mobil oldala - a mobil forgalom kezelése (Arany János)
Ähnlich wie Az üzlet mobil oldala - a mobil forgalom kezelése (Arany János) (16)
Mehr von Janos Arany
Mehr von Janos Arany (13)
Az üzlet mobil oldala - a mobil forgalom kezelése (Arany János)
- 1. Az üzlet mobil oldala A mobilos forgalom kezelése Arany János Digitálismédia szakértő
- 2. Az okostelefonok hozzák a mobilnetet Hagyományos „funkció” és okostelefonok szállítási adatai 2009-2014 (globális) Forrás: Barclays Capital „Internet & Media 101” 2012. január, GKIeNet 0 500 1000 1500 2000 2500 2009 2010 2011 2012 2013 2014 Millió db Okostelefonok Funkció telefonok
- 3. Mit veszítünk / nyerünk a mobillal? Magyarország, 2013 nyár: 10-15% mobilforgalom arány
- 4. 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
- 5. 57% 79% 61% 55% 56% 56% 55% 76% 54% 57% 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% Austria Ukraine Germany Croatia Czech Republic Romania Hungary Slovenia Poland Slovakia Ratio of Mobile CPC to Desktop Az alacsonyabb konverziós arányt a kisebb verseny ellensúlyozza Source: Google Internal Q1 2012
- 6. 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
- 7. A nagy hirdetők nincsen mobilra optimalizált weboldala (2012)!! 79%-nak Piaci lehetőség
- 9. Mobilra optimalizált site-ok sokkal jobban konvertálnak 9 konverziós ráta növekedés jegyeladási területen a mobil site-on!
- 10. Mi is a mobilra optimalizálás?
- 11. A mobil oldalak 10 pontja Hallgassunk a felhasználókra good mobile sites are user- centric, meaning they’re built with input from your audience. Ujj-barátság A nagykezűek is tudják kezelni Letisztult design Átláthatóság Lokális Helyezzünk el információt ami elősegíti, hogy megtalálják az üzletünket Mobil oldal redirect használat Tegyük lehetővé a desktop-os és a mobil oldal közötti váltást Gyorsaság Gyor betöltődés és átfuthatóság Egységes Hozzuk á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ég Minden készülékfajtán és orientáltságon olvasható Konverzió fókusz Fókuszáljunk a konverziót segító információkra
- 12. 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!
- 13. 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
- 14. Ujj barát design 14 Nagy, középre rendezett gombok, megfel elő térközzel a mellékantintások elkerülésére A kisebb gombok is kattintható méretűek.
- 15. 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
- 16. 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!
- 17. 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
- 18. 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
- 19. 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.
- 20. 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
- 21. 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
- 22. 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
- 23. További források - howtogomo.com - www.themobileplaybook.com - www.dudamobile.com
- 24. Lehet könnyen is: Duda Mobile Mobile weboldal 1 kattintással
- 25. Egy példa: ebookers.com Desktop website
- 26. 26 Google confidential, internal data Ujj barát Linkek helyett gombokat használ, melyek több helyet hagynak így könnyebb az oldalt kezelni ebookers – mobil oldal Letisztultság A 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. 27 Google confidential, internal data ebookers – mobil oldal Konverzió fókusz A 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.
- 28. 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
- 29. És a mobil korszak még csak most kezdődik…! Ne maradjunk le rögtön az elején!
Hinweis der Redaktion
- azegyesoldalakösszlátogatásainakMagyarországonjelenleg (iparágtólfüggően) kb 10-15%-a érkezikmobilkészülékekről, ésezeket a látogatókatazeseteknagyrészébenvisszafordulásrakésztetőfelhasználóiélményfogadja a nemmobilraoptimalizáltoldalakon. Amennyibenez a felhasználóiélménymegváltozikakkorazonnal 15% pluszutilizálhatóforgalomjelenik meg.
- Despite what you see in the world today - more and more people buying and using smartphones and what customer’s expectations of the mobile web are, businesses and advertisers aren’t following. We surveyed Google’s largest advertisers this year and found that 79% of them don’t have a mobile site - so only 21% actually do.
- First, keep it quick. No-one wants to be overwhelmed! Help your mobile users - design your site to load quickly and make your site copy easy to scan. Avoid having a lot of text - stick to the main bullets that you want your visitors to know, and you’ll have to make some choices with prioritising the most applicable content for mobile. For example, Nissan Great Britain has chosen to send users straight to the things which they have identified are most important to mobile users – Research the vehicle or Book a Test Drive. They have also used a big picture of the vehicle but they have compressed the image so that it doesn’t use a lot of data and the page loads really quickly. This contrasts significantly with their desktop site. No matter how rich the content or design elements are on your desktop site, keep it simple on mobile.
- Make it easy for people to get around. Ideally, people should only have to scroll one way. On touch screens, that’s usually from the top down, just as you can see on the Aviva example. The most direct way to help someone get to where they want to go is to let them search, just like Aviva’s done here - consider using a prominent search box to get customers to what they want quickly and save them from having to browse through a much smaller screen. Make sure the navigation follows the same information architecture as desktop but you don’t have to include every link from desktop. If mobile users are all trying to do a particular thing, it may even be worth bypassing navigation like this and bringing them straight to search.
- Third, on mobile touch screens, you’re designing for fingers, not mice. Pad your links and buttons so that it’s clear where users need to click. Isolating all your links will also help prevent accidental clicks on mobiles, which can be more cumbersome than on a computer. You can see that here in the IHG example - they take a lot of the best practices we’ve just discussed, like making the content and layout really simple to access. IHG’s built clear prioritised buttons for their users and their main call-to-action button at the very top. Accidental clicks are unlikely here.
- Make sure that your content can be read at arm’s length. People are generally looking down at a screen that’s 10% the size of their computer monitors, so make sure that your content is viewable without having to pinch and zoom in. Screwfix does a great job of that on their mobile site - there are large buttons around each of their links, plenty of space and a clear contrast between the background colour and content. There’s a lot of information here but it’s not overwhelming.
- Don’t create roadblocks for people trying to find information on your site. Here are a couple of tips. First, try to not use Flash - it doesn’t work on a lot of mobile devices. (You may have heard the recent news that Adobe is no longer going to support Flash players in the browsers of new mobile devices.) Instead, consider using HTML 5 to create interactive experiences on mobiles. Remember that you use your phone in different orientations - both vertically and horizontally, so adapt your site for both, and ideally, keep users in the same place on the page when they tilt their phones from vertical to horizontal or vice versa like The Carphone Warehouse do.
- Ultimately, you want to make it easy for your visitors to take some sort of significant action. Do you want them to fill in a lead form, visit you in person or simply give you a call? Think about the significant conversions that you want your mobile users to take - sometimes, this may be different on mobile than on desktop - after all, your mobile users may be on the go, ready to take action and have access to features on their phones that are unique to mobiles - like their cameras, a GPS, a barcode scanner.Once you’ve decided on what you want your mobile users to do on your site, design it to make it easier for them to take quick action and convert. Keep the conversion process short - if you’re using lead forms, don’t put too many fields in. Use menus that people can pick from to avoid too much typing on a mobile keyboard.In these examples, RAC have made it easy for users to convert using click-to-call. The numbers are buttons and easy to use. eHarmony have used HTML5 in the field descriptions so that a user entering a phone number is automatically brought to the number keypad on their virtual keyboard instead of having to find it themselves.
- Did you know that over ⅓ of mobile searches on Google are looking for local information? When we find local information on our phones, chances are that we act on it. In fact, research shows that after looking up a local business on their smartphone, 61% of users have then called the business and 59% have visited its location! In light of this, help people find and get to you from your mobile website. Make sure that your address, phone number and shop locator with maps are included on your mobile website. If possible, include local deals or check-in offers for your business. Mothercare have made sure to have their store locator prominently placed on their homepage. On the Specsavers mobile website it is possible to access a map which shows where branches are based. Ideally, your site should also use GPS technology to tell where a user is now and direct them to the nearest store, and even better the nearest store with the items they are researching in stock.
- In an ideal mobile experience, there should be a seamless flow from a desktop site onto a mobile site. When shopping, the items I add to my cart on my desktop should be easily accessible when I change to my mobile phone and I should be able to log in easily, so that I don’t have to find and type in all my payment and delivery information. Autotrader has done a really good job of this on their mobile site - they make it easy for customers to log in to their accounts and see the cars they already added to their garage..
- Your desktop site should have code that detects whether a user is coming from a mobile device and redirects them to the mobile site, as that will provide them with a mobile-optimised experience. However, as a best practice, it’s important to give users choices - and that includes the ability for them to go to your full desktop site, if they so choose. Give them the choice to switch between desktop and mobile sites when you detect that someone is visiting from a mobile device.What’s great about the Debenhams site here is that their redirects allow users to go to the most relevant landing pages on their mobile optimised site. It’s not enough to send everybody to the homepage of your site as this makes the experience longer and slower. And because they understand the local nature of mobile, Debenhams have made sure to have a store locator on every page.
- Finally, don’t expect to get it perfect first time - after all, think about the many tweaks and adjustments you make to your desktop site. Listen to your users after you launch your mobile site, but also let the data speak for itself - use Google Analytics to understand how mobile users are interacting with your site and make tweaks based on what content is popular or what’s driving the most conversions.Kiddicare.com are constantly studying the way users traverse and interact with their site. And thy are optimising it to meet changing expectations.
- This is the desktop version of the ebookers.com website
- Although there was a lot going on on the desktop site the key focus of the page was clearly search. And so they have made that the key focus of their mobile site. They have found that 60% of mobile hotel bookings and 40% of mobile flight bookings are made just one day in advance so search is really important for a fast conversion. They have made sure the site is easy to read and thought about thumb users when building buttons.
- You’ll see that there are no links on this page - they use buttons instead of links, which gives more room and space for people to touch and work with the screen. It’s also pretty easy to read what’s on the page without having to squint, and there’s also not an awful lot of text and copy either, making it easy for me to make a selection on the site. For users who don’t want to book online, it’s easy to find the number which is click-to-call. And it’s also easy to get to the desktop version of the site if that is what a user wants.
- In conjunction with building their mobile site, ebookers.com sought to streamline and drive mobile users to visit their mobile site through AdWords mobile campaigns. In driving these mobile campaigns to a mobile-optimised site, they a 25% increase in mobile ad CTR! They even saw site traffic and conversions grow by 90% in the first 5 months after going live. Clearly, a mobile-friendly user experience is beginning to pay off.