Share
Veronderstelling kan een risicovolle onderneming zijn in de wereld van UX, maar sommige aannames kunnen u in staat stellen om uw bezoekers een beter toegesneden gebruikerservaring te bieden. We gaan kijken naar het verbeteren van gebruikerservaring door de locatie van uw website bewust te maken.
De gebruikerservaring is de laatste tien jaar zo ver opgeschoten in de voorhoede van webdesign. Als gebruikers wordt ons voortdurend gevraagd om bijgewerkte informatie over onszelf te geven. Alles van Twitter vraagt ons "Wat gebeurt er?" op Facebook om ons te vragen wat we 'leuk vinden'. Dit alles stelt deze bedrijven onder meer in staat om een behoorlijk gedetailleerd en nauwkeurig profiel van u op te bouwen, zodat zij u een persoonlijkere gebruikerservaring kunnen bieden..
Rond dezelfde tijd dat HTM5 werd aangekondigd, werd er vanuit W3C een andere API aan ons voorgesteld. Ik ben er vrij zeker van dat je er misschien van hebt gehoord; de geolocatie-API. Hierdoor kan uw site geografische positie-informatie ontvangen met behulp van JavaScript.
Geolocatiegegevens zijn toegankelijk via verschillende bronnen. Traditioneel op websites zou dit worden bepaald door het IP-adres van een bezoeker. Het zou dan aansluiten op een WHOIS-service en het fysieke adres van de bezoeker ophalen uit zijn whois-informatie. Onlangs echter is een meer populaire en nauwkeurige manier om toegang te krijgen tot deze informatie gebruikelijk geworden; de ingebouwde GPS-chip van een apparaat gebruiken. Deze zijn te vinden op de meeste smartphones en tablets en zijn verantwoordelijk voor de toenemende populariteit van location aware services die we zouden kunnen gebruiken. Denk aan Foursquare of een andere app waar u mogelijk 'incheckt'.
In de API-specificatie vrijgegeven door de W3C staat:
Gebruikersagenten mogen geen locatiegegevens naar websites verzenden zonder de uitdrukkelijke toestemming van de gebruiker.
Voordat een apparaat of browser toegang heeft tot de geolocatiegegevens van een bezoeker, moet de bezoeker dit eerst autoriseren. Dit is hoe het wordt weergegeven in Google Chrome:
Meer dan ooit merken gebruikers nu op welke informatie websites over hen opslaan en moeten uw gebruikers zelfvertrouwen hebben over waar u hun gegevens voor gebruikt. Adviseer hen precies waarom u deze informatie nodig heeft en leg uit hoe het voor hen nuttig zal zijn om een betere online ervaring te creëren.
Wanneer gebruik makend van een geolocatie-website of app is het een goede gewoonte om de hoeveelheid informatie die u deelt met anderen te bepalen. De meeste apps en services voor het delen van locaties bieden wel een soort van privacycontrole, dus zorg ervoor dat u dit gebruikt en deel nooit uw persoonlijke adres.
Zodra u over een locatiebewuste site of app beschikt, kunt u uw bezoekers voorzien van meer accurate en gepaste inhoud. Laten we eens kijken hoe geolocatie van pas kan komen.
Geomarketing is een relatief nieuwe term en kan worden omschreven als:
De integratie van geografische intelligentie in verschillende aspecten van marketing, inclusief verkoop en distributie.
Hoewel het een nieuwe term is, bestaat het feitelijke principe van geomarketing al een tijdje. Facebook maakt al geruime tijd gebruik van deze aanpak. Hierop verzamelt Facebook locatiegebaseerde gegevens (op basis van IP-adressen van gebruikers) en toont vervolgens advertenties die geschikt zijn voor die geografische regio. Google en andere zoekmachines hebben hier ook gebruik van gemaakt en bevatten op locatie gebaseerde zoekresultaten voor hun gebruikers.
Het zijn niet alleen marketeers die kunnen profiteren van geolocatieservices, maar creatieve typen hebben het ook gebruikt (waarschijnlijk zonder zelfs maar te beseffen). Mensen hebben het gebruikt om toegang te krijgen tot grote aantallen mensen, die allemaal in hetzelfde gebied zijn gevestigd en hetzelfde doel hebben als "iets laten gebeuren". Dit kan variëren van flitsmeutes tot grootschalige dansroutines, tot het maken van communitygroepen voor mensen die dezelfde interesses delen.
Het is ook gebruikt in situaties zoals de aardbeving in Haïti in 2010, toen grote groepen gewone mensen bij elkaar kwamen om hulp te werven door de kracht van sociale netwerken en geografische locatie..
Onlangs is overal een groot aantal "aanbiedingssites" begonnen op te komen. Het belangrijkste is Groupon dat in november 2008 werd gelanceerd. Groupon biedt deal-of-the-day-diensten aan haar gebruikers en elke dag heeft de site een vooraf bepaald aantal aanbiedingen voor elk aanbod. Elk item moet genoeg gebruikers interesseren om in te schrijven voor dat aanbod; door dit te doen ontvangen ze het, maar alleen als het het aantal vooraf bepaalde mensen bereikt.
Dit concept vermindert het risico voor retailers en stelt hen in staat om in bulk te verkopen, waardoor het concept een winnaar wordt. De kracht van Groupon ligt in de nauwe integratie die het heeft met de locatie van de gebruiker. Door zijn gebruikers lokale aanbiedingen en deals aan te bieden is het een van de meest populaire kortingssites geworden en is het formaat vele malen gerepliceerd.
Nu u iets meer begrijpt over geolocatie, laten we eens kijken naar enkele voorbeelden uit de echte wereld.
De rotsachtige horrorsite geeft je aanvangstijden voor de show op locaties die je na staan. Ga gewoon naar de site en klik op "Zoek mijn locatie".
Met dezelfde technologie laat Flickr zien wat anderen hebben geüpload naar de website in de buurt van waar je bent.
Mapumanetal kwam rond in 2006 toen het Department for Transport in het VK contact opnam met de startup om te werken met de informatie die ze hadden over OV-gegevens. Ze beschrijven wat ze op Mapumental doen als "Wij creëren kaarten waarmee mensen betere beslissingen kunnen nemen, sneller." Het biedt een verscheidenheid aan hulpmiddelen en diensten die manieren bieden om real-time reisgegevens te visualiseren.
Als u nog niet eerder geolocatie hebt geïmplementeerd in websites of apps, is het goede nieuws dat het niet eenvoudiger zou kunnen zijn. In deze tutorial ga ik laten zien hoe u de locatie van een gebruiker op uw website of web-app kunt krijgen.
Ik heb dit zo ontworpen dat je het vrij gemakkelijk op je eigen website kunt toevoegen. Het doel is dat de gebruiker op een knop drukt die zijn of haar locatie krijgt en deze op de site weergeeft met een beetje hulp van Google Maps API's.
We beginnen met een wikkel om het ontwerp te centreren. Ik heb ervoor gekozen om dit met een breedte van 960px te doen, maar je kunt kiezen voor het formaat dat bij je ontwerp past. Binnen deze 'wrapper' heb ik een div gemaakt, waar de kaart zal zitten zodra deze is gegenereerd. Ik heb dit een ID van 'Kaart' gegeven.
Binnen de 'Map' div heb ik dan een spanwijdte die ik een klas heb gegeven die 'helper' wordt genoemd. Dit is een kleine hulpgids die de gebruiker instrueert wat hij moet doen. Dit lijkt misschien een beetje overbodig, maar het is altijd een goede gewoonte om gebruikers te helpen wanneer mogelijk.
We hebben dan een preloader-afbeelding die ik een ID van 'preloader' heb gegeven. Als u op zoek bent naar preloaders dan kunt u preloaders.net bekijken.
Dit is wat je tot nu toe moet hebben:
Klik op de onderstaande knop om uw locatie op de kaart te tonen
Na de 'map' div gebruik ik een eenvoudige ankertag die als knop fungeert voor de gebruiker om te klikken. Dit heeft een klasse van (yup je raadt het al) 'knop'.
Nadat de gebruiker op de knop heeft geklikt, willen we niet alleen de kaart weergeven, maar deze kan ook nuttig zijn om de locatie, lengte- en breedtegraad van de gebruiker weer te geven. Hiervoor heb ik een div gemaakt met een ID van 'resultaten' die dan drie overspanningen bevat, elk met een relevante klasse. Voor de markup is dat het. Dit is wat de hele markup zou moeten hebben:
Klik op de onderstaande knop om uw locatie op de kaart te tonenVind mijn locatie
De CSS is vrij eenvoudig. Hier is het volledig:
@charset "utf-8"; html background: # 222222; font-family: helvetica, arial, sans-serif; .wrapper width: 960px; marge: 0 auto; position: relative; #map positie: relatief; text-align: center; kleur: # 363535; text-transform: hoofdletters; breedte: 425 px; hoogte: 350 px; marge: 0 auto; margin-top: 20px; opvulling: 5px; rand: 1px effen zwart; achtergrond: # 474747; box-shadow: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; lettertype: vet; lettergrootte: 12px; kleur: rgb (54, 54, 54); breedte: 180 px; regelhoogte: 135%; marge: 0 auto; margin-top: 140px; #map #preloader positie: absoluut; top: 141 px; links: 190 px; Geen weergeven; #map iframe border: 1px effen zwart; .button opvulling: 13px 40px; background-color: # 00caa7; color: # 00caa7; border-radius: 3px; kleur wit; display: block; text-decoration: none; box-shadow: inzet 0px 1px 0px rgba (255, 255, 255, 0.3); width: 122px; marge: 0 auto; margin-top: 20px; .knop: zweeft background-color: # 00b495 #resultaten color: rgb (0, 180, 149); positie: absoluut; margin-top: 20px; text-align: center; regelhoogte: 23 px; breedte: 100%;
Een ding om op te merken is dat de preloader het enige div-element is dat absoluut is gepositioneerd. Dit is absoluut gepositioneerd in relatie tot de 'map' div. Om dit te bereiken, moet u ervoor zorgen dat de 'map' div zijn positie heeft ingesteld op relatief. Hierdoor kan de preloader naar het bovenliggende object worden gepositioneerd in tegenstelling tot het hele document.
Google biedt een reeks API's voor zijn MAP-services die gratis zijn tot bepaalde gebruikslimieten. Daarna zijn de kosten van toepassing.
Gelukkig zijn beide services die we gaan gebruiken volledig gratis; in feite maakt een van de technieken helemaal geen gebruik van de API, maar gebruikt hij in plaats daarvan het standaard iframe voor insluiten van kaarten waarin we een aantal waarden wijzigen die we krijgen van de browser van de gebruiker.
Allereerst binnen enkele >
Accentsconagua
var-knop = jQuery ('. -knop'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('. longitude'); var lattitudediv = jQuery ('. lattitude'); var locationdiv = jQuery ('.locatie'); Zodra we dat hebben gedaan, moeten we controleren of de browser de Geolocation-API ondersteunt. We kunnen dit testen met de volgende 'als'-verklaring.
if (navigator.geolocation) // Browser ondersteunt het, we zijn goed om te gaan! else alert ('Sorry dat uw browser de Geolocation-API niet ondersteunt'); Zodra we browserondersteuning hebben ingesteld, zullen we de knopklik detecteren in het gedeelte waar de opmerking wordt geplaatst 'Browser ondersteunt het, we zijn goed om te gaan'.
De gebeurtenis met de klik op de knop zou er als volgt uit moeten zien:
button.click (functie (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Nadat op de knop is geklikt, wordt de preloader weergegeven. Het belangrijkste onderdeel om hier te bekijken is de 2de naar het laatste regel met 'navigator'. Wat dit effectief zegt, is: "haal de locatie van de gebruiker op en stuur de locatiestand succesvol naar de functie" exportPosition ", stuur anders een fout naar de errorPosition-functie".
Dus laten we inspringen en deze functies maken. De foutfunctie is redelijk rechttoe rechtaan:
function errorPosition () alert ('Sorry kon uw locatie niet vinden'); pretext.show (); In de bovenstaande functie kunt u zien dat de functie een waarschuwing en een foutmelding geeft en vervolgens de preloader opnieuw weergeven.
In de succesfunctie hieronder, die 'exportPosition' wordt genoemd, krijgen we de geografische lengte- en breedtegraad van de geolocatie-API en stellen deze in als variabelen met dezelfde naam.
Zodra we deze hebben, kunnen we ze gebruiken in de iframe-insluitcode van Google Maps. We kunnen ze ook gebruiken binnen de overspanningen die de lengte- en breedtegraad voor de gebruiker weergeven. Zo ziet het eruit:
functie exportPosition (positie) // Verkrijg de geolocatie-eigenschappen en stel ze in als variabelen latitude = position.coords.latitude; lengtegraad = position.coords.longitude; // Voeg de google maps iframe in en wijzig de locatie met behulp van de variabelen die zijn geretourneerd vanuit de API jQuery ('# map'). Html (''); longitudediv.html ('Longitude:' + longitude); lattitudediv.html ('Breedtegraad:' + breedtegraad); Het belangrijkste onderdeel is de iframe-URL. In de url plaats ik de variabelen '+ latitude +' en '+ longitude +'. Van dichtbij lijkt dit op:
Hierdoor wordt de MAP ingevoegd in de divine '#map' en wordt ook de lengte- en breedtegraad voor de gebruiker zichtbaar. Er is nog een ding dat we graag zouden willen weten; dit is de naam van de locatie van de gebruiker. Hiervoor moeten we via AJAX bellen naar de Google Maps API. We voegen deze AJAX-functie toe aan de functie 'exportPosition'. Dit ziet eruit als:
// Bel naar de api van Google maps om de naam van de locatie jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+') te krijgen, '+ lengtegraad +' & sensor = true ', type:' POST ', dataType:' json ', succes: functie (gegevens) // Als het succesvol is, voeg de gegevens toe aan de' locatie 'div locationdiv.html (' Locatie: '+ data.results [0] .address_components [2] .long_name);, error: function (xhr, textStatus, errorThrown) errorPosition ();); In de succesreactie nemen we de naam van de locatie terug van de AJAX-aanroep en voegen we deze toe aan de '.location'-reeks. Als er om welke reden dan ook een fout in die aanroep zit, dan zal het de 'errorPosition'-functie uitvoeren en de gebruiker waarschuwen dat deze hun locatie niet kan vinden.
De Geolocation-API werkt in alle moderne browsers. Sommige versies van Safari gebruiken echter CoreLocation om geolocatiegegevens te krijgen, wat betekent dat je met internet verbonden moet zijn via WIFI. Als u verbonden bent via ethernet of iets dergelijks, kunt u problemen ondervinden bij het verzamelen van de locatiegegevens.
Het is ook de moeite waard om erop te wijzen dat deze tutorialbestanden moeten worden geüpload naar een live webserver om te werken en niet zullen werken op localhost.
Ik hoop dat u nu meer inzicht heeft in de geolocatie-API, hoe deze werkt en hoe u deze met zeer weinig moeite kunt implementeren. Door op creatieve en effectieve manieren gebruik te maken van geolocatie, zou u nu in staat moeten zijn om uw gebruikers een betere gebruikerservaring te bieden.
Heb je de geolocatie-API geïmplementeerd in sites waaraan je hebt gewerkt om een betere gebruikerservaring te bevorderen? Heb je het op een gave en creatieve manier gebruikt? Laat het ons weten in de comments hieronder.
