Share
Die Annahme kann in der Welt von UX ein riskantes Geschäft sein, aber einige Annahmen können es Ihnen ermöglichen, Ihren Besuchern eine individuellere Benutzererfahrung zu bieten. Wir werden uns darum bemühen, das Benutzererlebnis zu verbessern, indem Sie den Standort Ihrer Websites besser kennenlernen.
Die Benutzererfahrung ist in den letzten zehn Jahren in die vorderste Front des Webdesigns getreten. Als Benutzer werden wir ständig aufgefordert, aktualisierte Informationen über uns bereitzustellen. Irgendetwas von Twitter fragt uns "Was ist los?" an Facebook und fragt uns, was uns gefällt. All dies ermöglicht es diesen Unternehmen unter anderem, ein ziemlich detailliertes und genaues Profil von Ihnen aufzubauen, um Ihnen eine persönlichere Benutzererfahrung zu bieten.
Etwa zur gleichen Zeit, als HTM5 angekündigt wurde, wurde uns eine andere API von W3C vorgestellt. Ich bin mir ziemlich sicher, dass Sie davon gehört haben. die Geolocation-API. Auf diese Weise kann Ihre Website geografische Positionsinformationen mit JavaScript empfangen.
Auf Geolocation-Daten kann aus verschiedenen Quellen zugegriffen werden. Auf Websites wird dies traditionell durch die IP-Adresse eines Besuchers bestimmt. Es würde sich dann mit einem WHOIS-Dienst verbinden und die physikalische Adresse des Besuchers von den Whois-Informationen abrufen. In letzter Zeit ist jedoch ein populärer und genauerer Zugang zu diesen Informationen üblich geworden; Verwenden eines integrierten GPS-Chips eines Geräts. Diese befinden sich in den meisten Smartphones und Tablets und sind für die zunehmende Beliebtheit von ortsabhängigen Diensten verantwortlich, die wir möglicherweise verwenden. Denken Sie an Foursquare oder an eine andere App, in die Sie einchecken könnten.
In der vom W3C freigegebenen API-Spezifikation heißt es:
Benutzerprogramme dürfen Standortinformationen nicht ohne ausdrückliche Erlaubnis des Benutzers an Websites senden.
Bevor ein Gerät oder Browser auf die Geolokalisierungsdaten eines Besuchers zugreifen kann, muss der Besucher diese zuerst genehmigen. So erscheint es in Google Chrome:
Mehr als je zuvor bemerken die Nutzer, welche Informationen Websites über sie speichern, und Ihre Nutzer müssen sich darauf verlassen können, wofür Sie ihre Daten verwenden. Informieren Sie sie genau, warum Sie diese Informationen benötigen, und weisen Sie darauf hin, wie dies für sie hilfreich sein kann, um ein besseres Online-Erlebnis zu schaffen.
Wann mit Bei einer Geolocation-Website oder -Anwendung sollten Sie die Menge der Informationen, die Sie mit anderen Personen teilen, kontrollieren. Die meisten Apps und Dienste zur gemeinsamen Nutzung von Standorten bieten eine Art Datenschutzkontrolle. Stellen Sie also sicher, dass Sie diese verwenden und geben Sie niemals Ihre persönliche Adresse weiter.
Sobald Sie über eine Site oder eine App mit Ortsbezug verfügen, können Sie Ihren Besuchern genauere und geeignete Inhalte bereitstellen. Lassen Sie uns einen Blick darauf werfen, wie Geolocation nützlich sein kann.
Geomarketing ist ein relativ neuer Begriff und kann wie folgt beschrieben werden:
Die Integration geografischer Intelligenz in verschiedene Aspekte des Marketings einschließlich Verkauf und Vertrieb.
Obwohl es sich um einen neuen Begriff handelt, gibt es seit einiger Zeit das eigentliche Prinzip des Geo-Marketings. Facebook nutzt diesen Ansatz schon seit einiger Zeit. Facebook würde auf dieser Basis ortsbasierte Daten (basierend auf den IP-Adressen der Nutzer) sammeln und dann für diese geografische Region passende Anzeigen schalten. Google und andere Suchmaschinen haben dies ebenfalls genutzt und enthalten standortbasierte Suchergebnisse für ihre Nutzer.
Es sind nicht nur Vermarkter, die von Geolocation-Services profitieren können, sondern auch Kreativtypen haben es genutzt (wahrscheinlich ohne es zu merken). Die Menschen haben es genutzt, um Zugang zu einer großen Anzahl von Menschen zu erhalten, die sich alle in derselben Gegend befinden und das gleiche Ziel haben, "etwas zu bewirken". Dies kann von Flashmobs über umfangreiche Tanzroutinen bis hin zum Erstellen von Community-Gruppen für Personen mit ähnlichen Interessen reichen.
Es wurde auch in Situationen wie dem Erdbeben in Haiti im Jahr 2010 eingesetzt, als große Gruppen von Menschen zusammenkamen, um Hilfe durch soziale Netzwerke und Geo-Standorte zu sammeln.
In letzter Zeit sind überall "Angebotsseiten" entstanden. Vor allem Groupon wurde im November 2008 gegründet. Groupon bietet seinen Nutzern tagesaktuelle Serviceleistungen an, und an jedem Tag hat die Website eine vordefinierte Anzahl von Angeboten für jedes Angebot. Jeder Artikel muss genug Benutzer interessieren, um sich für dieses Angebot zu registrieren. Auf diese Weise erhalten sie es, aber nur, wenn es die Anzahl der vorbestimmten Personen erreicht.
Dieses Konzept reduziert das Risiko für Einzelhändler und ermöglicht es ihnen, in großen Mengen zu verkaufen, wodurch das Konzept rundum gewinnbringend wird. Die Stärke von Groupon liegt in der engen Integration mit dem Standort des Benutzers. Durch das Angebot lokaler Angebote und Angebote hat sich der Benutzer zu einer der beliebtesten Coupon-Sites entwickelt und sein Format wurde mehrfach repliziert.
Nun verstehen Sie ein wenig mehr über Geolocation. Schauen wir uns einige Beispiele aus der realen Welt an.
Auf der Rocky-Horror-Website können Sie sich die Showtime an Orten in Ihrer Nähe sichern. Gehen Sie einfach auf die Website und klicken Sie auf "Find my location"..
Mit derselben Technologie zeigt Flickr, was andere Nutzer auf die Website in Ihrer Nähe hochgeladen haben.
Mapumanetal kam 2006 auf den Markt, als die britische Verkehrsbehörde das Startup kontaktierte, um mit den Informationen zu Daten des öffentlichen Verkehrs zu arbeiten. Sie beschreiben, was sie bei Mapumental tun: "Wir erstellen Karten, mit denen die Menschen schneller bessere Entscheidungen treffen können." Es bietet eine Vielzahl von Tools und Services, mit denen Echtzeit-Reisedaten visualisiert werden können.
Wenn Sie bisher keine Geolocation in Websites oder Apps implementiert haben, ist die gute Nachricht so einfach, dass es nicht einfacher sein könnte. In diesem Tutorial werde ich zeigen, wie Sie den Standort eines Benutzers auf Ihrer Website oder Web-App ermitteln können.
Ich habe dies so gestaltet, dass Sie es ganz einfach auf Ihrer eigenen Website hinzufügen können. Ziel ist es, dass der Nutzer eine Schaltfläche drückt, die seinen Standort abruft und auf der Website mit Hilfe der Google Maps-APIs angezeigt wird.
Wir beginnen mit einem Wrapper, um das Design zu zentrieren. Ich habe mich dafür entschieden, dies bei 960px zu tun, aber Sie können wählen, welche Größe Sie für Ihr Design benötigen. In diesem 'Wrapper' habe ich ein div erstellt, in dem sich die Map befindet, sobald sie erstellt wurde. Ich habe eine ID von 'Map' gegeben.
Innerhalb des 'Map'-Divs habe ich dann eine Spanne, die ich einer Klasse namens' Helper 'gegeben habe. Dies ist eine kleine Helferanleitung, die den Benutzer anweist, was er tun muss. Dies mag ein wenig unnötig erscheinen, aber es ist immer ratsam, Benutzern zu helfen, wenn möglich.
Wir haben dann ein Preloader-Image, das ich als 'Preloader' bezeichnet habe. Wenn Sie nach Preloadern suchen, können Sie sich unter preloaders.net informieren.
Das sollten Sie bisher haben:
Klicken Sie auf die Schaltfläche unten, um Ihren Standort auf der Karte anzuzeigen
Nach dem 'map' div verwende ich ein einfaches Ankertag, das als Schaltfläche für den Benutzer fungiert. Dies hat eine Klasse von (Sie haben es erraten) "Button".
Nachdem der Benutzer auf die Schaltfläche geklickt hat, möchten wir nicht nur die Karte anzeigen, sondern auch die Position, den Längengrad und den Breitengrad des Benutzers anzeigen. Dafür habe ich ein div mit einer ID von 'results' erstellt, die dann drei Bereiche mit jeweils einer relevanten Klasse enthält. Für das Markup ist es das. So sollte das gesamte Markup aussehen:
Klicken Sie auf die Schaltfläche unten, um Ihren Standort auf der Karte anzuzeigenMein Standort suchen
Das CSS ist ziemlich unkompliziert. Hier ist es vollständig:
@charset "utf-8"; HTML Hintergrund: # 222222; Schriftfamilie: helvetica, arial, serifenlos; .wrapper width: 960px; Marge: 0 auto; Position: relativ; #map position: relativ; Text ausrichten: Mitte; Farbe: # 363535; Text-Transformation: Großbuchstaben; Breite: 425px; Höhe: 350px; Marge: 0 auto; Rand oben: 20px; Polsterung: 5px; Rand: 1px durchgehend schwarz; Hintergrund: # 474747; Box-Schatten: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map .helper display: block; Schriftdicke: fett; Schriftgröße: 12px; Farbe: rgb (54, 54, 54); Breite: 180px; Zeilenhöhe: 135%; Marge: 0 auto; Rand oben: 140px; #map #preloader position: absolut; oben: 141px; links: 190px; Anzeige: keine; #map iframe border: 1px durchgehend schwarz; .button padding: 13px 40px; Hintergrundfarbe: # 00caa7; Farbe: # 00caa7; Grenzradius: 3px; Farbe weiß; Bildschirmsperre; Textdekoration: keine; Box-Schatten: Einfügung 0px 1px 0px rgba (255, 255, 255, 0.3); Breite: 122px; Marge: 0 auto; Rand oben: 20px; .button: hover Hintergrundfarbe: # 00b495 #results color: rgb (0, 180, 149); Position: absolut; Rand oben: 20px; Text ausrichten: Mitte; Zeilenhöhe: 23px; Breite: 100%;
Zu beachten ist, dass der Preloader das einzige Div-Element ist, das absolut positioniert ist. Dies ist absolut in Bezug auf die 'map' div positioniert. Um dies zu erreichen, stellen Sie einfach sicher, dass die Position von 'map' auf relativ gesetzt ist. Dadurch kann der Preloader gegenüber dem gesamten Dokument gegenüber dem übergeordneten Dokument positioniert werden.
Google bietet eine Reihe von APIs für seine MAP-Dienste an, die bis zu bestimmten Nutzungsgrenzen kostenlos sind. Danach fallen Gebühren an.
Glücklicherweise sind beide Dienste, die wir nutzen werden, völlig kostenlos. Tatsächlich verwendet eine der Techniken die API überhaupt nicht. Stattdessen wird das Standard-Map-Embed-iframe verwendet, in dem wir einige Werte ändern, die wir vom Browser des Benutzers erhalten.
Erstens innerhalb einiger >
Accentsconagua
var button = jQuery ('. button'); var preloader = jQuery ('# preloader'); var longitudediv = jQuery ('. longitude'); var lattitudediv = jQuery ('. lattitude'); var locationdiv = jQuery ('. location'); Anschließend müssen wir überprüfen, ob der Browser die Geolocation-API unterstützt. Wir können dies mit der folgenden 'if'-Anweisung testen.
if (navigator.geolocation) // Browser unterstützt es, wir können loslegen! else alert ('Ihr Browser unterstützt die Geolocation-API leider nicht'); Sobald wir die Browser-Unterstützung eingerichtet haben, erkennen wir das Klicken der Schaltfläche innerhalb des kommentierten Bereichs. "Browser unterstützt es, wir sind bereit zu gehen"..
Das Schaltflächenklickereignis sollte folgendermaßen aussehen:
button.click (function (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Nachdem Sie auf die Schaltfläche geklickt haben, wird der Preloader angezeigt. Der wichtige Teil, den Sie hier betrachten sollten, ist die vorletzte Zeile mit 'Navigator'. Dies bedeutet im Grunde Folgendes: "Holen Sie sich die Position des Benutzers und senden Sie die Position der Position erfolgreich an die Funktion 'exportPosition'. Andernfalls senden Sie einen Fehler an die errorPosition-Funktion.".
Lass uns also einsteigen und diese Funktionen erstellen. Die Fehlerfunktion ist ziemlich einfach:
function errorPosition () alert ('Entschuldigung konnte Ihren Standort nicht finden'); pretext.show (); In der obigen Funktion können Sie sehen, dass die Funktion Warnungen und Fehler ausgibt und den Preloader erneut anzeigt.
In der Erfolgsfunktion, unter der 'exportPosition' genannt wird, erhalten wir die von der Geolocation-API bereitgestellten Längen- und Breitengrade und setzen diese als Variablen mit demselben Namen.
Sobald wir diese haben, können wir sie innerhalb des iframe-Einbettungscodes von Google Maps verwenden. Wir können sie auch innerhalb der Bereiche verwenden, die dem Benutzer Längen- und Breitengrad anzeigen. So sieht es aus:
function exportPosition (position) // Liefert die Geolocation-Eigenschaften und legt sie als Variablen fest. width = position.coords.latitude; longitude = position.coords.longitude; // Fügen Sie den Google Maps-Iframe ein und ändern Sie den Speicherort mithilfe der von der API jQuery ('# map') zurückgegebenen Variablen. Html (''); longitudediv.html ('Longitude:' + Longitude); lattitudediv.html ('Latitude:' + width); Der wichtige Teil ist die iframe-URL. Innerhalb der URL füge ich die Variablen '+ Latitude +' und '+ Longitude +' ein. Aus der Nähe sieht das so aus:
Dies fügt den MAP in das '#map' div ein und zeigt dem Benutzer Längen- und Breitengrad an. Es gibt noch eine weitere Sache, die wir gerne wissen würden. Dies ist der Name des Standorts des Benutzers. Dazu müssen Sie die Google Maps-API über AJAX aufrufen. Wir fügen diese AJAX-Funktion innerhalb der 'exportPosition'-Funktion hinzu. Das sieht so aus:
// Rufen Sie das Google Maps-API an, um den Namen des Speicherorts jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+') zu erhalten. '+ longitude +' & sensor = true ', Typ:' POST ', Datentyp:' Json ', Erfolg: Funktion (Daten) // Wenn die Daten erfolgreich sind, fügen Sie die Daten zur' location 'div locationdiv.html (' location: '+ data.results [0] .address_components [2] .long_name);, error: function (xhr, textStatus, errorThrown) errorPosition ();); In der Erfolgsantwort nehmen wir den Namen des Standortes zurück, der vom AJAX-Aufruf empfangen wurde, und fügen ihn dem Bereich '.location' hinzu. Wenn aus irgendeinem Grund ein Fehler in diesem Aufruf auftritt, führt er die Funktion 'errorPosition' aus und weist den Benutzer darauf hin, dass er seinen Standort nicht finden konnte.
Die Geolocation-API funktioniert in allen modernen Browsern. Einige Versionen von Safari verwenden jedoch CoreLocation Um Geolocation-Daten zu erhalten, müssen Sie über WIFI mit dem Internet verbunden sein. Wenn Sie über Ethernet oder Ähnliches verbunden sind, können Probleme beim Erfassen der Standortdaten auftreten.
Es muss auch darauf hingewiesen werden, dass diese Tutorial-Dateien auf einen Live-Webserver hochgeladen werden müssen, damit sie funktionieren und auf Localhost nicht funktionieren.
Ich hoffe, Sie haben jetzt ein besseres Verständnis für die Geolocation-API, wie sie funktioniert und wie Sie sie mit sehr geringem Aufwand implementieren können. Durch die Verwendung von Geolocation auf kreative und effektive Weise sollten Sie jetzt in der Lage sein, Ihren Benutzern eine bessere Benutzererfahrung zu bieten.
Haben Sie die Geolocation-API in Websites implementiert, an denen Sie gerade gearbeitet haben, um die Benutzererfahrung zu verbessern? Haben Sie gesehen, dass es cool und kreativ verwendet wurde? Lass es uns in den Kommentaren wissen.
