Share
L'ipotesi può essere un'attività rischiosa nel mondo di UX, ma alcuni presupposti possono consentirti di offrire un'esperienza utente più personalizzata ai tuoi visitatori. Daremo un'occhiata al miglioramento dell'esperienza utente rendendo consapevoli i tuoi siti web.
Negli ultimi dieci anni, l'esperienza degli utenti è cresciuta in prima linea nel web design. Come utenti ci viene costantemente chiesto di fornire informazioni aggiornate su di noi. Qualcosa da Twitter ci chiede "Cosa sta succedendo?" a Facebook chiedendoci cosa ci 'piace'. Tutto ciò consente a queste aziende, tra le altre cose, di creare un profilo abbastanza dettagliato e accurato di te in modo che possano fornirti un'esperienza utente più personale.
Più o meno nello stesso periodo in cui è stato annunciato HTM5, dal W3C ci è stata presentata un'altra API. Sono abbastanza sicuro che tu possa averne sentito parlare; l'API di geolocalizzazione. Ciò consente al tuo sito di ricevere informazioni sul posizionamento geografico utilizzando JavaScript.
I dati di geolocalizzazione sono accessibili attraverso varie fonti. Tradizionalmente sui siti Web, sarebbe determinato dall'indirizzo IP di un visitatore. Si collegherebbe quindi a un servizio WHOIS e recupererà l'indirizzo fisico del visitatore dalle sue informazioni whois. Di recente, tuttavia, un modo più popolare e accurato per accedere a queste informazioni è diventato comune; utilizzando un chip GPS integrato nel dispositivo. Si trovano nella maggior parte degli smartphone e tablet e sono responsabili dell'aumento di popolarità dei servizi di localizzazione che potremmo utilizzare. Pensa a Foursquare oa qualsiasi altra app a cui potresti fare il check-in.
Nella specifica API rilasciata dal W3C si afferma:
Gli agenti utente non devono inviare informazioni sulla posizione ai siti Web senza l'espressa autorizzazione dell'utente.
Prima che un dispositivo o un browser possano accedere ai dati di geolocalizzazione di un visitatore, il visitatore deve prima autorizzarlo. Ecco come appare in Google Chrome:
Ora più che mai, gli utenti stanno prendendo nota di ciò che i siti Web di informazioni memorizzano su di loro e gli utenti dovranno sentirsi sicuri di ciò per cui si stanno utilizzando i loro dati. Informali sul motivo esatto per cui hai bisogno di queste informazioni e fai notare come sarà utile per loro nel creare una migliore esperienza online.
quando utilizzando un sito web o un'app di geolocalizzazione è buona norma controllare la quantità di informazioni che condividi con altre persone. La maggior parte delle app e dei servizi di condivisione della posizione offrono una sorta di controllo della privacy, quindi assicurati di utilizzarlo e non condividere mai il tuo indirizzo personale.
Una volta che disponi di un sito o di un'app alla posizione, sei in grado di fornire contenuti più accurati e appropriati per i tuoi visitatori. Diamo un'occhiata a come la geolocalizzazione può tornare utile.
Il Geomarketing è un termine relativamente nuovo e può essere descritto come:
L'integrazione dell'intelligenza geografica in vari aspetti del marketing, comprese le vendite e la distribuzione.
Anche se un nuovo termine, il vero principio del geo-marketing è in circolazione da un po 'di tempo. Facebook ha utilizzato questo approccio da diverso tempo. Facebook raccoglierà dati basati sulla posizione (basati sugli indirizzi IP degli utenti) da questo, quindi mostrerà gli annunci appropriati per quella regione geografica. Google e altri motori di ricerca hanno fatto uso di questo e includono risultati di ricerca basati sulla posizione per i loro utenti.
Non sono solo gli operatori di marketing che possono trarre vantaggio dai servizi di geolocalizzazione, ma i tipi creativi hanno anche sfruttato il concetto (probabilmente senza nemmeno rendersene conto). Le persone lo hanno usato per avere accesso a un gran numero di persone, tutte situate nella stessa area e con lo stesso obiettivo di "far accadere qualcosa". Questo può variare da flash mob, a routine di danza su larga scala, alla creazione di gruppi di comunità per persone che condividono interessi simili.
È stato anche utilizzato in situazioni come il terremoto di Haiti nel 2010, quando grandi gruppi di persone comuni si sono riuniti per raccogliere aiuti attraverso il potere dei social network e della geolocalizzazione.
Recentemente una grande quantità di "siti di offerta" ha iniziato a spuntare ovunque. In particolare, Groupon è stato lanciato nel novembre 2008. Groupon offre ai suoi utenti servizi di assistenza quotidiana e ogni giorno il sito ha un numero predeterminato di offerte per ciascuna offerta. Ogni articolo deve interessare un numero sufficiente di utenti per iscriversi a tale offerta; così facendo lo ricevono, ma solo se raggiungono il numero di persone predeterminate.
Questo concetto riduce il rischio per i rivenditori e consente loro di vendere all'ingrosso, rendendo il concetto un vincitore a tutto tondo. Il potere di Groupon risiede nella stretta integrazione che ha con la posizione degli utenti. Offrendo ai suoi utenti le offerte e le offerte locali è diventato uno dei siti di coupon più popolari e il suo formato è stato replicato molte volte.
Ora capisci qualcosa in più sulla geolocalizzazione, diamo un'occhiata ad alcuni esempi del mondo reale.
Il sito Web di Rock Horror ti consente di ottenere orari di programmazione per lo spettacolo nei luoghi vicini a te. Basta andare sul sito e fare clic su "Trova la mia posizione".
Utilizzando la stessa tecnologia, Flickr mostra ciò che altri hanno caricato sul sito web vicino a dove ti trovi.
Mapumanetal è nato nel 2006 quando il Dipartimento per i trasporti nel Regno Unito ha contattato la startup per lavorare con le informazioni che contenevano sui dati del trasporto pubblico. Descrivono cosa fanno a Mapumental come "Creiamo mappe che aiutano le persone a prendere decisioni migliori, più velocemente". Offre una varietà di strumenti e servizi che offrono modi per visualizzare i dati di viaggio in tempo reale.
Se in precedenza non hai implementato la geolocalizzazione in nessun sito o app, la buona notizia è che non potrebbe essere più semplice. In questo tutorial mostrerò come è possibile ottenere la posizione di un utente sul tuo sito web o app web.
Ho progettato questo in modo che tu possa aggiungerlo facilmente al tuo sito web. L'obiettivo è che l'utente preme un pulsante che otterrà la sua posizione, visualizzandola sul sito con un piccolo aiuto dell'API di Google Maps.
Iniziamo con un wrapper per centrare il design. Ho scelto di farlo a 960 px di larghezza, ma puoi scegliere di utilizzare qualsiasi dimensione adatta al tuo design. All'interno di questo 'wrapper' ho creato un div che è dove la mappa siederà una volta che è stata generata. Ho dato questo ID di "Mappa".
All'interno del div 'Map' ho quindi una span che ho dato una classe chiamata 'helper'. Questa sarà una piccola guida di supporto che istruirà l'utente su ciò che devono fare. Questo può sembrare un po 'inutile, ma è sempre una buona pratica aiutare gli utenti quando possibile.
Abbiamo quindi un'immagine di preloader che ho dato un ID di 'preloader'. Se stai cercando di trovare preloader, puoi controllare preloaders.net.
Questo è quello che dovresti avere finora:
Fai clic sul pulsante in basso per mostrare la tua posizione sulla mappa
Dopo il div "map", utilizzo un semplice tag di ancoraggio che fungerà da pulsante per consentire all'utente di fare clic. Questo ha una classe di (sì hai indovinato) 'pulsante'.
Una volta che l'utente ha fatto clic sul pulsante, non solo vogliamo visualizzare la mappa, ma potrebbe anche essere utile per visualizzare la posizione, la longitudine e la latitudine dell'utente. Per questo ho creato un div con un ID di 'risultati' che quindi contiene tre span ciascuno con una classe rilevante. Per il markup è così. Questo è come dovrebbe essere l'intero markup:
Fai clic sul pulsante in basso per mostrare la tua posizione sulla mappaTrova la mia posizione
Il CSS è abbastanza semplice. Eccolo per intero:
@charset "utf-8"; html background: # 222222; font-family: helvetica, arial, sans-serif; .wrapper width: 960px; margine: 0 auto; position: relative; #map position: relative; allineamento del testo: centro; colore: # 363535; text-transform: maiuscolo; larghezza: 425 px; altezza: 350 px; margine: 0 auto; margin-top: 20px; imbottitura: 5px; bordo: 1px solido nero; sfondo: # 474747; box-shadow: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; font-weight: bold; font-size: 12px; color: rgb (54, 54, 54); larghezza: 180 px; altezza della linea: 135%; margine: 0 auto; margin-top: 140px; #map #preloader position: absolute; superiore: 141 px; a sinistra: 190 px; display: none; #map iframe border: 1px solid black; .button padding: 13px 40px; background-color: # 00caa7; color: # 00caa7; border-radius: 3px; colore bianco; blocco di visualizzazione; text-decoration: none; box-shadow: inset 0px 1px 0px rgba (255, 255, 255, 0,3); larghezza: 122px; margine: 0 auto; margin-top: 20px; .button: hover background-color: # 00b495 #results color: rgb (0, 180, 149); posizione: assoluta; margin-top: 20px; allineamento del testo: centro; altezza della linea: 23px; larghezza: 100%;
Una cosa da notare è che il preloader è l'unico elemento div che è assolutamente posizionato. Questo è assolutamente posizionato in relazione al div 'mappa'. Per ottenere ciò basta assicurarsi che il div 'mappa' abbia la sua posizione impostata su relativo. Ciò consentirà di posizionare il preloader sul suo genitore anziché sull'intero documento.
Google offre una gamma di API per i suoi servizi MAP che sono gratuiti fino a determinati limiti di utilizzo. Successivamente verranno applicate le tariffe.
Fortunatamente, entrambi i servizi che useremo sono completamente gratuiti; infatti una delle tecniche non usa affatto l'API, utilizzando invece la mappa standard incorporata in iframe in cui cambieremo alcuni dei valori che otterremo dal browser dell'utente.
Innanzitutto, all'interno di alcuni >
Accentsconagua
var button = jQuery ('. button'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('. longitude'); var lattitudediv = jQuery ('. lattitude'); var locationdiv = jQuery ('. location'); Una volta fatto ciò, dobbiamo verificare che il browser supporti l'API di geolocalizzazione. Possiamo testare questo con la seguente istruzione "se".
se (navigator.geolocation) // Browser lo supporta, siamo a posto! else alert ('Mi dispiace che il tuo browser non supporti l'API di geolocalizzazione'); Una volta stabilito il supporto del browser, rileveremo il clic del pulsante all'interno della parte in cui viene commentato "Il browser lo supporta, siamo a posto".
L'evento clic sul pulsante dovrebbe apparire come questo:
button.click (function (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Dopo aver fatto clic sul pulsante, verrà mostrato il preloader. La parte importante da guardare qui è la penultima riga contenente 'navigatore'. Ciò che effettivamente sta dicendo è: "ottenere la posizione degli utenti e se correttamente inviare la posizione posizione alla funzione 'exportPosition', altrimenti inviare un errore alla funzione errorPosition".
Quindi saltiamo dentro e creiamo queste funzioni. La funzione di errore è abbastanza semplice:
function errorPosition () alert ('Sorry couldn \' t find your location '); pretext.show (); Nella funzione sopra puoi vedere che la funzione avviserà ed errore, quindi mostrerà di nuovo il preloader.
Nella funzione di successo sotto la quale si chiama 'exportPosition' otteniamo la latitudine e la longitudine fornite dall'API di geolocalizzazione e le impostiamo come variabili con lo stesso nome.
Una volta che abbiamo questi possiamo quindi usarli all'interno del codice di incorporare iframe da Google Maps. Possiamo anche usarli all'interno degli intervalli che visualizzano la longitudine e la latitudine dell'utente. Ecco come appare:
function exportPosition (position) // Ottieni le proprietà di geolocalizzazione e impostale come variabili latitude = position.coords.latitude; longitudine = position.coords.longitude; // Inserisci iframe di google maps e modifica la posizione utilizzando le variabili restituite dall'API jQuery ('# map'). Html (''); longitudediv.html ('Longitudine:' + longitudine); lattitudediv.html ('Latitude:' + latitude); La parte importante è l'URL iframe. All'interno dell'URL inserisco le variabili '+ latitude +' e '+ longitude +'. Da vicino questo sembra:
Questo inserirà la MAP all'interno del div '#map' e rivelerà anche la longitudine e la latitudine all'utente. C'è anche un'altra cosa che vorremmo sapere; questo è il nome della posizione dell'utente. Per fare ciò, dobbiamo effettuare una chiamata all'API di Google Maps tramite AJAX. Aggiungiamo questa funzione AJAX all'interno della funzione 'exportPosition'. Questo sembra:
// Fai una chiamata alla API di Google maps per ottenere il nome della posizione jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+', '+ longitude +' & sensor = true ', tipo:' POST ', dataType:' json ', success: function (data) // Se riuscito aggiungi i dati alla' posizione 'div locationdiv.html (' Posizione: '+ data.results [0] .address_components [2] .long_name);, errore: function (xhr, textStatus, errorThrown) errorPosition ();); Nella risposta al successo prendiamo il nome della posizione ricevuta dalla chiamata AJAX e lo aggiungiamo all'intervallo '.location'. Se, per qualsiasi ragione, c'è un errore in quella chiamata, allora eseguirà la funzione 'errorPosition' e avviserà l'utente che non è in grado di trovare la loro posizione.
L'API di geolocalizzazione funziona in tutti i browser moderni. Tuttavia alcune versioni di Safari utilizzano CoreLocation per ottenere i dati di geolocalizzazione, il che significa che è necessario essere connessi a Internet tramite WIFI. Se si è connessi tramite Ethernet o simili, è possibile che si verifichino problemi nel raccogliere i dati sulla posizione.
Vale anche la pena sottolineare che questi file tutorial devono essere caricati su un server web live per funzionare e non funzioneranno su localhost.
Spero che ora abbia una maggiore comprensione dell'AP di geolocalizzazione, come funzioni e come è possibile implementarlo con pochissimo sforzo. Utilizzando la geolocalizzazione in modo creativo ed efficace, ora dovresti essere in grado di fornire un'esperienza utente migliore per i tuoi utenti.
Hai implementato l'API di geolocalizzazione in tutti i siti su cui hai lavorato per incoraggiare una migliore esperienza utente? L'hai visto usato in un modo fresco e creativo? Fateci sapere nei commenti qui sotto.
