Share
Forutsetning kan være en risikofylt virksomhet i UXs verden, men noen forutsetninger kan gjøre det mulig for deg å levere en skreddersydd brukeropplevelse til dine besøkende. Vi skal se på å forbedre brukeropplevelsen ved å gjøre nettstedene dine oppmerksom på.
Brukeropplevelsen har spredd seg frem i forkant av webdesign de siste ti årene eller så. Som brukere blir vi kontinuerlig bedt om å gi oppdatert informasjon om oss selv. Alt fra Twitter spør oss "Hva skjer?" til Facebook spør oss hva vi liker. Alt dette gjør at disse selskapene blant annet kan bygge opp en ganske detaljert og nøyaktig profil for deg, slik at de kan gi deg en mer personlig brukeropplevelse.
Rundt samme tid som HTM5 ble annonsert, ble en annen API introdusert for oss fra W3C. Jeg er ganske sikker på at du kanskje har hørt om det; Geolocation API. Dette gjør at nettstedet ditt kan motta geografisk posisjoneringsinformasjon ved hjelp av JavaScript.
Geolokasjonsdata kan nås gjennom ulike kilder. Tradisjonelt på nettsteder, vil det bli bestemt av en besøkers IP-adresse. Det ville da koble seg til en WHOIS-tjeneste og hente den besøkende fysiske adressen fra deres whois-informasjon. Nylig skjønt, en mer populær og nøyaktig måte å få tilgang til denne informasjonen har blitt vanlig; bruker en enhet er innebygd i GPS-brikke. Disse finnes i de fleste smarte telefoner og nettbrett og er ansvarlige for økningen i populariteten til stedbevisste tjenester som vi kan bruke. Tenk på Foursquare eller noen annen app som du kan "sjekke inn" til.
I API-spesifikasjonen utgitt av W3C står det:
Brukeragenter må ikke sende plasseringsinformasjon til nettsteder uten uttrykkelig tillatelse fra brukeren.
Før en enhet eller nettleser kan få tilgang til geolokasjonsdataene til en besøkende, må den besøkende først godkjenne den. Slik vises det i Google Chrome:
Nå, mer enn noensinne, bruker brukerne om hva informasjon nettsteder lagrer om dem, og brukerne dine må føle seg trygg på hva du bruker dataene sine til. Advis dem om nøyaktig hvorfor du trenger denne informasjonen, og pek på hvordan det vil være nyttig for dem når du skal skape en bedre online opplevelse.
Når ved hjelp av et nettsted for geografisk plassering eller app er det god praksis å kontrollere mengden informasjon du deler med andre mennesker. De fleste steddelingsappene og tjenestene tilbyr noen form for personvernskontroll, så sørg for å bruke dette og aldri dele din personlige adresse.
Når du har et sted som er klar over nettstedet eller appen, kan du gi mer nøyaktig og passende innhold for dine besøkende. La oss se på hvordan geolokasjon kan komme til nytte.
Geomarketing er et relativt nytt begrep og kan beskrives som:
Integrasjonen av geografisk intelligens i ulike aspekter ved markedsføring, inkludert salg og distribusjon.
Selv om det er et nytt begrep, har det faktiske prinsippet om geo markedsføring eksistert en stund. Facebook har benyttet denne tilnærmingen for en stund nå. Facebook ville samle stedbaserte data (basert på brukernes IP-adresser) fra dette, og deretter vise annonser som passer for den geografiske regionen. Google og andre søkemotorer har også gjort bruk av dette og inkluderer plasseringsbaserte søkeresultater for sine brukere.
Det er ikke bare markedsførere som kan dra nytte av geolokasjonstjenester, men kreative typer har også utnyttet det (sannsynligvis uten å realisere). Folk har brukt den til å få tilgang til et stort antall mennesker, som alle ligger i samme område og har samme mål om å "gjøre noe skje". Dette kan variere fra flash mobs, til store skala dansrutiner, for å skape fellesskap grupper for folk som deler lignende interesser.
Den har også blitt utnyttet i situasjoner som Haiti jordskjelv i 2010, da store grupper av vanlige mennesker samlet seg for å heve hjelp alt gjennom kraften i sosiale nettverk og geo plassering.
Nylig har en stor mengde "tilbudssider" begynt å sprenge overalt. Mest sannsynlig er Groupon som ble lansert i november 2008. Groupon tilbyr avtale om dagens tjenester til sine brukere, og hver dag har nettstedet et forutbestemt antall tilbud for hvert tilbud. Hvert element må interessere nok brukere til å registrere seg for det tilbudet; Ved å gjøre det mottar de det, men bare hvis det når antall forhåndsbestemte personer.
Dette konseptet reduserer risikoen for forhandlere og gir dem mulighet til å selge i bulk, noe som gjør konseptet en vinner hele tiden. Kraften til Groupon ligger innenfor den tette integrasjonen som den har med brukerens plassering. Ved å tilby sine brukere lokale tilbud og tilbud har det blitt en av de mest populære kupongnettstedene, og har fått sitt format replikert mange ganger.
Nå forstår du litt mer om geolocation, la oss ta en titt på noen virkelige eksempler.
Den steinete horror nettsiden lar deg få showtimer for showet på steder som ligger i nærheten av deg. Bare gå inn på nettstedet og klikk "Finn min plassering".
Ved å bruke samme teknologi, viser Flickr hva andre har lastet opp på nettstedet nær hvor du er.
Mapumanetal kom rundt i 2006 da Department of Transport i Storbritannia kontaktet oppstarten for å jobbe med informasjonen de holdt om kollektivtransportdata. De beskriver hva de gjør på Mapumental som "Vi lager kart som hjelper folk med å ta bedre beslutninger, raskere." Den tilbyr et utvalg av verktøy og tjenester som gir muligheter til å visualisere realtid reisedata.
Hvis du ikke tidligere har implementert geolocation i noen nettsteder eller apper, så er det gode nyheter, det kan ikke være enklere. I denne opplæringen skal jeg vise hvordan du kan få brukerens plassering på nettstedet ditt eller webapp.
Jeg har designet dette slik at du kan legge det på ditt eget nettsted ganske enkelt. Målet er at brukeren trykker på en knapp som vil få plassering, vise den på nettstedet med litt hjelp fra Google Maps APIs.
Vi starter med en innpakning for å sentrere designen. Jeg har valgt å gjøre dette på 960px bred, men du kan velge å bruke hvilken størrelse som passer ditt design. Innenfor denne "wrapper" har jeg opprettet en div som er hvor kartet skal sitte når det er generert. Jeg har gitt dette en ID av "Map".
Innen "Map" div har jeg da et spenning som jeg har gitt en klasse som heter "hjelper". Dette vil være en liten hjelpeguide som vil instruere brukeren hva de trenger å gjøre. Dette kan virke litt unødvendig, men det er alltid god praksis å hjelpe brukerne når det er mulig.
Vi har så et forhåndsinnspillingsbilde som jeg har gitt en ID til "preloader". Hvis du er ute etter å finne preloaders, kan du sjekke ut preloaders.net.
Dette er hva du burde ha så langt:
Klikk på knappen nedenfor for å vise posisjonen din på kartet
Etter "map" div bruker jeg en enkel anker tag som vil fungere som knappen for brukeren å klikke. Dette har en klasse av (yup du gjettet det) 'knapp'.
Når brukeren har klikket på knappen, vil vi ikke bare vise kartet, men det kan også være nyttig å vise brukerens beliggenhet, lengdegrad og breddegrad. For dette har jeg opprettet en div med en ID for "resultater" som så inneholder tre spenner hver med en relevant klasse. For oppslaget er det det. Dette er hva hele oppslaget skal like:
Klikk på knappen nedenfor for å vise posisjonen din på kartetFinn min plassering
CSS er ganske grei. Her er det fullt:
@charset "utf-8"; html bakgrunn: # 222222; font-familie: helvetica, arial, sans-serif; .wrapper width: 960px; margin: 0 auto; stilling: i forhold; #map posisjon: relative; tekst-align: center; farge: # 363535; tekst-transformer: store bokstaver; bredde: 425px; høyde: 350px; margin: 0 auto; margin-top: 20 piksler; polstring: 5px; grense: 1 px solid svart; bakgrunn: # 474747; boks-skygge: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; font-weight: bold; skriftstørrelse: 12px; farge: rgb (54, 54, 54); bredde: 180px; linjehøyde: 135%; margin: 0 auto; margin-topp: 140px; #map #preloader posisjon: absolutt; topp: 141px; igjen: 190px; display: none; #map iframe border: 1px solid black; . knapp polstring: 13px 40px; background-color: # 00caa7; color: # 00caa7; border-radius: 3px; Farge: hvit; display: block; text-decoration: none; boks-skygge: innspill 0px 1px 0px rgba (255, 255, 255, 0.3); bredde: 122px; margin: 0 auto; margin-top: 20 piksler; . knapp: svever bakgrunnsfargen: # 00b495 #resultater farge: rgb (0, 180, 149); posisjon: absolutt; margin-topp: 20px; tekst-align: center; linjehøyde: 23px; bredde: 100%;
En ting å merke seg er at preloader er det eneste div-elementet som er helt posisjonert. Dette er helt posisjonert i forhold til "kart" div. For å oppnå dette bare sørg for at kartkartet har sin posisjon satt til slektning. Dette vil tillate at forprogrammereren plasseres til sin overordnede i motsetning til hele dokumentet.
Google tilbyr en rekke API'er for sine MAP-tjenester, som er gratis opp til visse bruksgrenser. Etter det vil gebyrene gjelde.
Heldigvis er begge tjenestene vi skal bruke helt gratis; Faktisk bruker en av teknikkene ikke API-en i det hele tatt, i stedet ved å bruke standardkortet embed iframe der vi vil endre noen av verdiene som vi får fra brukerens nettleser.
For det første, innenfor noen >
Accentsconagua
Var-knappen = jQuery ('. knapp'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('. lengdegrad'); var lattitudediv = jQuery ('lattitude'); var locationdiv = jQuery ('.plassering'); Når vi har gjort det, må vi kontrollere at nettleseren støtter Geolocation API. Vi kan teste dette med følgende omtale.
hvis (navigator.geolocation) // Browser støtter det, er vi glade for å gå! ellers alert ('Beklager at nettleseren din ikke støtter Geolocation API'en); Når vi har etablert nettleserstøtte, vil vi da oppdage knappeklikten i delen der den kommenteres. Nettleseren støtter det, vi er gode å gå '.
Knappen klikkhendelse skal se slik ut:
button.click (funksjon (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Når knappen har blitt klikket, vil den vise forlaster. Den viktige delen å se på her er den andre til siste linje som inneholder "navigatør". Hva dette egentlig sier er: "få brukerens plassering og hvis vellykket, send posisjonsposisjonen til" exportPosition "-funksjonen, ellers send en feil til feilposisjonen".
Så la oss hoppe inn og skape disse funksjonene. Feilfunksjonen er ganske rett frem:
funksjon errorPosition () alert ('Beklager kunne ikke finne din plassering'); pretext.show (); I ovennevnte funksjon kan du se at funksjonen vil varsle og feil, og deretter vise forladeren igjen.
I suksessfunksjonen nedenfor, som kalles 'exportposisjon', får vi breddegraden og lengdegraden som er gitt av geolocation API og angir disse som variabler med samme navn.
Når vi har disse, kan vi da bruke dem i iframe-innebygningskoden fra Google Maps. Vi kan også bruke dem innenfor spenner som viser lengdegrad og breddegrad til brukeren. Slik ser det ut:
funksjon exportPosition (posisjon) // Få geolocation egenskaper og sett dem som variabler latitude = position.coords.latitude; lengdegrad = position.coords.longitude; // Sett inn google maps iframe og endre plasseringen ved hjelp av variablene returnert fra API jQuery ('# map'). Html (''); longitudediv.html ('Lengdegrad:' + lengdegrad); lattitudediv.html ('Latitude:' + latitude); Den viktige delen er iframe-url. Innenfor url legger jeg inn variablene '+ latitude +' og '+ longitude +'. På tvers av dette ser det ut som:
Dette vil sette inn MAP'en i '#map'-diven og avsløre lengden og bredden til brukeren. Det er også en ting vi vil gjerne vite; Dette er navnet på brukerens plassering. For å gjøre dette må vi ringe til Google Maps API via AJAX. Vi legger til denne AJAX-funksjonen i funksjonen 'exportPosition'. Dette ser ut som:
// Ring til Google maps api for å få navnet på stedet jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+', '+ longitude +' & sensor = true ', type:' POST ', dataType:' json ', suksess: funksjon (data) // Hvis vellykket legger dataene til' location'- div locationdiv.html ('Location:' + data.results [0] .address_components [2] .long_name);, feil: funksjon (xhr, textStatus, errorThrown) errorPosition ();); I suksessresponsen tar vi navnet på stedet mottatt tilbake fra AJAX-anropet og legger det til '.location' -panelet. Hvis det av en eller annen grunn er en feil i det anropet, vil det kjøre funksjonen 'feilposisjon' og varsle brukeren om at den ikke kunne finne sin plassering.
Geolocation API fungerer i alle moderne nettlesere. Men noen versjoner av Safari bruker CoreLocation for å få geolokaliseringsdata, noe som betyr at du må være koblet til internett ved hjelp av WIFI. Hvis du er koblet til via ethernet eller lignende, kan det hende du har problemer med å samle plasseringsdataene.
Det er også verdt å påpeke at disse opplæringsfilene må lastes opp på en live webserver for å jobbe og vil ikke fungere på localhost.
Jeg håper nå, du har en større forståelse av geolocation API, hvordan det fungerer og hvordan du kan implementere det med svært liten innsats. Ved å bruke geolocation på kreative og effektive måter, bør du nå kunne gi en bedre brukeropplevelse for brukerne.
Har du implementert geolocation API til alle nettsteder du har jobbet med for å oppmuntre til en bedre brukeropplevelse? Har du sett det brukt på en kjølig og kreativ måte? Gi oss beskjed i kommentarene nedenfor.
