Projekt-Vorstellung: WhatsMyDevice.org

  • Hi,


    Worum geht's?

    bei uns in der Abteilung kommt es schon mal vor, dass unsere Frontender zu einem Bug-Ticket fragen: "Welchen Browser benutzt die Kundin? Welches Gerät und Betriebssystem?" und es ist daraufhin für unseren Kunden-Service mehr als peinlich den, bereits frustrierten, Kunden zu kontaktieren. Dazu muss man sagen das der Großteil unserer Kundschaft nicht sehr technisch versiert ist und man auf die Frage, "Was für einen Browser benutzen Sie?", häufig die Antwort kommt: "Windows". Bei Tablets und Smartphones kommen ähnliche unpräzise Aussagen.


    Dies hilft natürlich nicht unseren Entwicklern, nicht dem Kundendienst und der Zufriedenheit des Kunden. Auch ist es unzumutbar dem Kunden zum jeweiligen Menüpunkt zu führen, wo Browser-Informationen stehen oder Informationen zum Betriebssystem. Das kostet Zeit, Nerven und Kundenzufriedenheit (vor allem da man noch nicht weiß, was das System ist und wo der Menüpunkt liegt).


    Im Internet habe ich diverse "Was ist meine IP"- oder "Was ist mein Browser"-Infoseiten gefunden, die jedoch viele (für unsere Frontender) relevante Informationen nicht anzeigen, u. A. auch das Gerät oder benutzte Spracheinstellungen. So ist die Idee zu (www.whatsmydevice.org) geboren worden.


    So muss unser Kundendienst bei Frontend- oder Backend-Bugs den Kunden nur auf diese Seite führen, auf "Speichern & Teilen" klicken lassen und per E-Mail den Share-Link zugesendet bekommen. Die Seite ermittelt alle wichtigen Informationen über das Gerät des Kunden und unsere Entwickler können so Bugs besser nachstellen (Besonders bei WebGL-Erweiterungen war dies schon sehr hilfreich).


    Die Ermittlung der Daten erfolgt teilweise Server-Seitig und Client-Seitig per JavaScript.


    Online ist die Seite seit gut 3 Wochen und wird dank unserer Kunden auch rege benutzt, daher möchte ich sie gerne auch euch vorstellen und vorallem weitere Meinungen hören, als nur diese von Freunden und Kollegen. :)


    Technisches

    Aktuell beinhaltet die Seite folgende Features:

    - Share-Buttons für Facebook, Twitter und E-Mail

    - Share-Buttons für WhatsApp (bei Mobile)

    - OpenGraph für FaceBook und co, sowie Twitter-Cards

    - Responsive

    - Ermittlung von Herstellern

    - Ermittlung von Geräten (Tablets, Smartphones, TVs, usw. nur Desktops/Notebooks machen Probleme, da die Ermittlung hierbei echt heftig ist)

    - Ermittlung vom System (inkl. Fonts)

    - Ermittlung von Bildschirm, Grafikkarte, Retina-Displays, usw.

    - Ermittlugn von unterstützten Features des Browsers

    - Privacy-Einstellungen des Browsers

    - uvm.


    Umgesetzt wurde die Seite innerhalb von 1 Woche mit meinem, auf dem SOLID-Prinzipien fokussierten, PHP-Framework "nia" ( https://www.github.com/nia-php/ ) und SQLite3. (www.whatsmydevice.org) läuft auf einem CentOS 7 mit Apache, sowie PHP 7.1 und benutzt die TLS-Zertifikate von Let's Encrypt.


    Daten werden erst gespeichert nachdem der Endbenutzer dies möchte und auch nur für 365 Tage.



    Ausblick

    Aktuell durchforste ich die MDN nach weiteren Möglichkeiten um Daten via JavaScript zu ermitteln um das Gerät noch genauer zu identifizieren (z. B. Seriennummer). Auch ist eine API geplant, damit Firmen die Seite in ihre integrieren können und dem Kundendienst schneller helfen können ohne Umwege.



    Abschluss

    Was haltet ihr von meinem Projekt und was würdet ihr an Verbesserungen sehen wollen?


    Vielen Dank für jede Form von konstruktivem Feedback und ich wünsche euch viel Spaß mit der Seite :-)


    - codejunkie

  • Hallo Patrick,


    sehr spannende Idee. Sollte die Website nur halbwegs die Reichweite bekannter IP- oder Speedcheck-Websites erreichen sicher langfristig auch finanziell interessant. Zwei Punkte sind mir jedoch aufgefallen, die du noch verbessern könntest, einmal gestalterisch und einmal inhaltlich. Für den ersten Teil habe ich dir einige Screenshots gemacht.



    Der Text „Dein Gerät ist ein ...“ springt einen auf dem Rechner geradezu an. Okay, er ist wichtig, denn darum dürfte es den meisten gehen, aber er würde auch auffallen, wäre er etwas kleiner und dafür vielleicht farbig hervorgehoben.



    Auf dem iPhone sehe ich erstmal nur die Grundinformationen und die Möglichkeit diese Informationen zu teilen. Darunter wird vermutlich kaum jemand weitere Informationen vermuten. Wäre die Teilen-Box nicht am Ende der Seite besser aufgehoben? Dann wüsste man auch was genau man teilt.




    Die eingebundene Werbung, auf dem Desktop nicht störend, wirkt mobil aufdringlich und fehlplatziert. Google bietet dafür deutlich besser geeignete flexible Bannerformate. Und auch vertikal würde ich darauf achten, dass die Werbung nicht das halbe Display einnimmt und deutlich von den Inhalten zu unterscheiden ist.



    Der Hinweistext „Durch den Klick bestätigst du die Speicherungen auf unserem Servern für 365 Tage.“ wirkt wie nachträglich noch ergänzt. Der Abstand nach oben zum Button ist zu klein und der Zeilenabstand für die kleinere Schriftgröße dafür zu groß. Der Satz ist ein Mittelding zwischen „unserem Server“ und „unseren Servern“. Da solltest du nochmal nachzählen. ;)


    Und damit sind wir auch schon beim Inhalt. Trotz umfangreichem Impressum vermisse ich Informationen, welche Inhalte erhoben werden und wie sie genutzt werden. Standardtexte sind da leider wenig hilfreich. Den bestenfalls völlig wirkungslosen Haftungsausschluss würde ich ersatzlos streichen. Aber den Punkt Datenschutz könnte man durchaus noch ausbauen.


    Beste Grüße


    Gerhard

  • Vielen Dank für das Feedback Geronimo!


    Seiten-Titel

    Ich habe den Titel jetzt kleiner gemacht, finde das sieht so wirklich besser aus. Welche Farbe ich jedoch nehmen kann? Keine Ahnung. Als Farbenblinder ist das so ne Sache. :D


    Teilen-Box

    Ich stimme dir zu, das ist so ein Thema. Eigentlich möchte ich ja das der Benutzer schnell teilen kann um Kunden-Dienste zu helfen, auf der anderen Seite möchte ich aber auch das der Benutzer sieht was alles da ist. Ganz unten ist aber auch irgendwie doof, vielleicht mach ich es trotzdem nach unten und oben einen Hinweistext, dass man runterscrollen muss? Was meinst du dazu?


    Werbung

    Sieht echt (sorry für den Ausdruck) echt Scheiße aus. Ich sollte echt für solche Tests meinen AdBlocker auf dem Smartphone ausschalten. :D Werde damit etwas rumspielen müssen um eine geeignete Einstellung zu finden.


    Hinweistext

    Den Fehler habe ich behoben. Danke dafür. Stimme dir zu, der eigentliche Text wirkt wirklich dran geklatscht. Hast du hier einen Verbesserungsvorschlag für den Text selber? Styling werde ich noch machen, das war ein guter Vorschlag.


    Impressum und Datenschutz

    Guter Punkt, wird erweitert. Das ist wie die gute alte Schwiegermutter: Ein notwendiges Übel :D


    Danke dir für das Feedback. :-)

  • Der Text zur Speicherung der Daten ist denke ich schon ausreichend. Von dort aus könntest du auf die ausführlichen Informationen in deiner noch zu vervollständigenden Datenschutzerklärung verweisen. Der Titel schaut sehr viel besser aus. Farbe ist da eigentlich gar nicht mehr notwendig.