Share
Förmodning kan vara ett riskabelt företag i UXs värld, men vissa antaganden kan göra det möjligt för dig att leverera en mer anpassad användarupplevelse till dina besökare. Vi ska titta på att förbättra användarupplevelsen genom att göra din webbplats plats medveten.
Användarupplevelse har sprungit fram i spetsen för webbdesign under de senaste tio åren eller så. Som användare blir vi ständigt uppmanade att tillhandahålla uppdaterad information om oss själva. Något från Twitter frågar oss "Vad händer?" till Facebook frågar oss vad vi gillar. Allt detta gör att dessa företag bland annat kan bygga upp en ganska detaljerad och exakt profil för dig så att de kan ge dig en mer personlig användarupplevelse.
Ungefär samma gång som HTM5 meddelades, introducerades ett annat API för oss från W3C. Jag är ganska säker på att du kanske har hört talas om det; Geolocation API. Detta gör att din webbplats kan ta emot geografisk positioneringsinformation med hjälp av JavaScript.
Geolokaliseringsdata kan nås via olika källor. Traditionellt på webbplatser skulle det bestämmas av en besökares IP-adress. Det skulle då ansluta till en WHOIS-tjänst och hämta besökarens fysiska adress från deras information. Nyligen har ett mer populärt och korrekt sätt att komma åt denna information blivit vanligt. med hjälp av en inbyggd GPS-chip. Dessa finns i de flesta smarta telefoner och surfplattor och ansvarar för ökningen av populariteten för platsmedvetna tjänster som vi kan använda. Tänk på Foursquare eller någon annan app som du kan "checka in" till.
I API-specifikationen som släppts av W3C står det:
Användaragenter får inte skicka platsinformation till webbplatser utan uttryckligt tillstånd från användaren.
Innan en enhet eller webbläsare får tillgång till geolokationsdata för en besökare, måste besökaren först godkänna den. Så här visas det i Google Chrome:
Nu, mer än någonsin, tar användarna märke till vilka information webbplatser lagrar om dem och dina användare kommer att behöva känna sig säkra på vad du använder deras data för. Advisa dem om exakt varför du behöver denna information och peka på hur det kommer att vara användbart för dem för att skapa en bättre online-upplevelse.
När använder sig av en webbplats för geolokalisering eller app är det bra att kontrollera hur mycket information du delar med andra människor. De flesta appendationer och tjänster för platsdelning erbjuder någon form av integritetsskydd, så se till att du använder det här och aldrig dela din personliga adress.
När du har en plats medveten webbplats eller app kan du tillhandahålla mer exakt och lämpligt innehåll för dina besökare. Låt oss ta en titt på hur geolokation kan komma till nytta.
Geomarketing är en relativt ny term och kan beskrivas som:
Integrering av geografisk intelligens i olika aspekter av marknadsföring, inklusive försäljning och distribution.
Även om en ny term har den faktiska principen om geo-marknadsföring funnits en stund. Facebook har använt detta tillvägagångssätt för en tid nu. Facebook skulle samla platsbaserade data (baserat på användarnas IP-adresser) från detta och visa sedan annonser som är lämpliga för den geografiska regionen. Google och andra sökmotorer har också utnyttjat detta och innehåller platsbaserade sökresultat för sina användare.
Det är inte bara marknadsförare som kan dra nytta av geolokaliseringstjänster, men kreativa typer har också utnyttjat det (förmodligen utan att ens insett). Människor har använt det för att få tillgång till ett stort antal människor, som alla ligger i samma område och har samma mål att "göra något hänt". Det kan sträcka sig från flash mobs, till stora skala dansrutiner, för att skapa community grupper för personer som delar liknande intressen.
Det har också använts i situationer som jordbävningen i Haiti 2010, då stora grupper av vanliga människor samlades för att höja biståndet genom kraften i sociala nätverk och geo-läge.
Nyligen har en stor mängd "erbjudande webbplatser" börjat springa överallt. Mestadels är Groupon som lanserades i november 2008. Groupon erbjuder service till sina användare och varje dag har webbplatsen ett förutbestämt antal erbjudanden för varje erbjudande. Varje objekt måste räkna tillräckligt med användare för att anmäla sig till det erbjudandet. Då får de det, men bara om det når antalet förutbestämda personer.
Detta koncept minskar risken för återförsäljare och låter dem sälja i bulk, vilket gör konceptet en vinnare allround. Groupons kraft ligger inom den snäva integrationen som den har med användarnas plats. Genom att erbjuda sina användare lokala erbjudanden och erbjudanden har det blivit en av de mest populära kupongsidorna och har fått sitt format replikerat många gånger.
Nu förstår du lite mer om geolocation, låt oss ta en titt på några verkliga världsexemplar.
Den steniga skräckwebbplatsen ger dig möjlighet att visa showtider för showen på platser som ligger nära dig. Håll bara på webbplatsen och klicka på "Sök min plats".
Med samma teknik visar Flickr vad andra har laddat upp till webbplatsen i närheten av var du befinner dig.
Mapumanetal kom omkring 2006 när Transportdepartementet i Storbritannien kontaktade uppstarten att arbeta med informationen om kollektivtrafik. De beskriver vad de gör på Mapumental som "Vi skapar kartor som hjälper människor att fatta bättre beslut, snabbare." Det erbjuder en mängd olika verktyg och tjänster som erbjuder sätt att visualisera realtids resedata.
Om du inte tidigare har implementerat geolocation i några webbplatser eller appar så är den goda nyheten, det kan inte vara enklare. I denna handledning ska jag visa hur du kan få en användares plats på din webbplats eller webbapp.
Jag har utformat det här så att du enkelt kan lägga till det på din egen hemsida. Syftet är att användaren trycker på en knapp som då kommer att få sin plats och visar den på webbplatsen med lite hjälp från Google Maps API: s.
Vi börjar med en omslag för att centrera designen. Jag har valt att göra detta vid 960px bred, men du kan välja att använda vilken storlek som passar din design. Inom denna "wrapper" har jag skapat en div som är där kartan kommer att sitta när den har genererats. Jag har gett detta ett ID för "Karta".
Inom dividen "Map" har jag sedan en spänning som jag har gett en klass som heter "hjälpen". Detta kommer att vara en liten hjälpguide som instruerar användaren vad de behöver göra. Det kan tyckas lite onödigt men det är alltid bra att hjälpa användare när det är möjligt.
Vi har då en preloader-bild som jag har gett ett ID för "preloader". Om du letar efter att hitta förladdare kan du kolla in preloaders.net.
Detta är vad du borde ha hittills:
Klicka på knappen nedan för att visa din plats på kartan
Efter "map" div använder jag en enkel ankare tagg som kommer att fungera som knappen för användaren att klicka. Detta har en klass av (du gissade det) "knapp".
När användaren har klickat på knappen, vill vi inte bara visa kartan, men det kan också vara användbart att visa användarens plats, longitud och latitud. För detta har jag skapat en div med ett ID för "resultat" som innehåller tre spannar vardera med en relevant klass. För markeringen är det det. Det här är vad hela uppmärksamheten ska gilla:
Klicka på knappen nedan för att visa din plats på kartanHitta min plats
CSS är ganska enkelt. Här är det fullt:
@charset "utf-8"; html bakgrund: # 222222; font-family: helvetica, arial, sans-serif; .wrapper width: 960px; marginal: 0 auto; positioner: relativ; # map position: relative; text-align: center; färg: # 363535; text-transform: stor bokstav; bredd: 425px; höjd: 350px; marginal: 0 auto; margin-top: 20px; vaddering: 5px; gräns: 1px solid svart; bakgrund: # 474747; boxskugga: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; font-weight: bold; fontstorlek: 12px; färg: rgb (54, 54, 54); bredd: 180px; linjehöjd: 135%; marginal: 0 auto; marginal-topp: 140px; #map #preloader position: absolute; topp: 141px; vänster: 190px; display: none; #map iframe border: 1px solid black; . knapp vaddering: 13px 40px; background-color: # 00caa7; color: # 00caa7; border-radius: 3px; färg vit; display: block; text-decoration: none; boxskugga: inset 0px 1px 0px rgba (255, 255, 255, 0,3); bredd: 122px; marginal: 0 auto; margin-top: 20px; . knapp: svep bakgrundsfärg: # 00b495 #resultat färg: rgb (0, 180, 149); position: absolut; marginal-topp: 20px; text-align: center; linjehöjd: 23px; bredd: 100%;
En sak att notera är att förladaren är det enda div-elementet som är helt placerat. Detta är absolut positionerat i förhållande till "map" div. För att uppnå detta bara se till att "map" div har sin position inställd på relativ. Detta gör att förläsaren kan placeras till sin förälder i motsats till hela dokumentet.
Google erbjuder en rad API för sina MAP-tjänster, som är fria från vissa användningsgränser. Därefter gäller avgifter.
Lyckligtvis är båda tjänsterna vi ska använda helt gratis. I själva verket använder en av teknikerna inte API alls, istället använder du standardkortsinbäddar iframe där vi kommer att ändra några av de värden som vi får från användarens webbläsare.
För det första inom några >
Accentsconagua
var knapp = jQuery ('. knapp'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('longitude'); var lattitudediv = jQuery ('lattitude'); var locationdiv = jQuery ('.plats'); När vi har gjort det måste vi kontrollera att webbläsaren stöder Geolocation API. Vi kan testa detta med följande "if" -förklaring.
om (navigator.geolocation) // Browser stöder det, vi är bra att gå! else alert ('Bekräfta att din webbläsare inte stöder Geolocation API'); När vi väl har etablerat webbläsarstöd upptäcker vi knapptryckningen i den del där den kommenteras. Browser stöder det, vi är bra att gå.
Knappklickshändelsen ska se så här ut:
button.click (funktion (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
När knappen har blivit klickad visas den förladdaren. Den viktiga delen att titta på här är den 2: a till sista raden som innehåller "navigatör". Vad det här säger är: "få användarnas plats och om det är framgångsrikt skicka läget till exportpositionen, annars skicka ett fel till felpositionsfunktionen".
Så låt oss hoppa in och skapa dessa funktioner. Felfunktionen är ganska rakt framåt:
funktionsfelPosition () alert ('Ledsen kunde inte hitta din plats'); pretext.show (); I ovanstående funktion kan du se att funktionen kommer att varna och fel, och sedan visa förläsaren igen.
I framgångsfunktionen nedan kallad exportposition får vi latitud och longitud som tillhandahålls av geolocation API och ställer in dessa som variabler med samma namn.
När vi har dessa kan vi sedan använda dem i iframe-inbäddningskoden från Google Maps. Vi kan också använda dem inom de spänner som visar längd och breddgrad för användaren. Så här ser det ut:
funktion exportPosition (position) // Hämta geolocation egenskaper och sätt dem som variabler latitude = position.coords.latitude; longitude = position.coords.longitude; // Sätt in google maps iframe och ändra platsen med hjälp av variablerna som returneras från API jQuery ('# map'). Html (''); longitudediv.html ('Longitude:' + longitud); lattitudediv.html ('Latitude:' + latitude); Den viktiga delen är iframe-url. Inom url sätter jag in variablerna '+ latitude +' och '+ longitude +'. På nära håll ser det ut som:
Detta kommer att infoga MAP inom "#map" div och avslöja även längd och latitud för användaren. Det finns också en sak som vi skulle vilja veta; Detta är namnet på användarens plats. För att göra detta behöver vi ringa till Google Maps API via AJAX. Vi lägger till denna AJAX-funktion inom funktionen exportPosition. Det här ser ut som:
// Ring till Google maps api för att få namnet på platsen jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+') '+ longitude +' & sensor = true ', typ:' POST ', dataType:' json ', framgång: funktion (data) // Om framgångsrik lägg till dataen till "plats" div locationdiv.html (' Plats: '+ data.results [0] .address_components [2] .long_name);, error: function (xhr, textStatus, errorThrown) errorPosition ();); I framgångssvaret tar vi namnet på den mottagna platsen från AJAX-samtalet och lägger till den i ".location" -panelen. Om det av något skäl föreligger ett fel i det samtalet, kommer det att köra funktionen "errorPosition" och varna användaren om att den inte kunde hitta sin plats.
Geolocation API fungerar i alla moderna webbläsare. Men vissa versioner av Safari använder CoreLocation för att få geolocation data, vilket innebär att du måste vara ansluten till internet med WIFI. Om du är ansluten via Ethernet eller liknande, kan du få problem med att samla platsdata.
Det är också värt att påpeka att dessa handledning filer måste laddas upp på en levande webbserver till jobbet och kommer inte att fungera på localhost.
Jag hoppas nu har du en större förståelse för geolocation API, hur det fungerar och hur du kan implementera det med mycket liten ansträngning. Genom att använda geolocation på kreativa och effektiva sätt borde du nu kunna erbjuda en bättre användarupplevelse för dina användare.
Har du implementerat geolocation API till alla webbplatser du har arbetat med för att uppmuntra till en bättre användarupplevelse? Har du sett det använt på ett coolt och kreativt sätt? Låt oss veta i kommentarerna nedan.
