Simulieren Sie den Lesemodus auf der Webseite

Neuestes Update :

Nach tagelanger Suche ohne eine einzige schlüssige (nicht einmal annähernde) Option oder Studie zu diesem Thema habe ich beschlossen, meine eigene Umfrage zu erstellen, um sie einzugrenzen. Diese Umfrage ist nur für GD-Benutzer.

Ich habe eine ganze Webseite dafür erstellt und hoffe wirklich, dass es gut ausgeht. Die Optionen, die ich in dieser Übersicht aufgelistet habe, stammen aus verschiedenen (kleineren) Studien und Meinungen.

BITTE nehmen Sie sich die Zeit, dies auszufüllen, es hat nur 2 Eingabefelder und eine Auswahl von 1 von 10 Optionen.

Sobald ich genügend Stimmen habe, um Statistiken zu erstellen, werden diese auf der Seite gepostet und hier bekannt gegeben.

Die Umfrageseite


Ursprünglicher Beitrag:

Beim Entwerfen meiner eigenen Website, genauer gesagt des Artikelbereichs, dachte ich darüber nach, eine Funktion zu erstellen, die den Lesemodus auf Android-/Samsung-Geräten simuliert.

Ich möchte es so einfach wie möglich halten, daher wird meine Funktion eine jQuery-UI- Funktion sein , die die Hintergrundfarbe animiert, um sie aufzuwärmen, und die Schriftfarbe bei Benutzerinteraktion.

[ von update_2 unten ] Ich kann meine Funktion auch so anpassen, dass sich der Lesemodus an Datum und Uhrzeit anpasst, wobei die unterschiedliche Beleuchtung zwischen den Jahreszeiten und beispielsweise 3 Tagesphasen berücksichtigt wird.

Gibt es eine Studie/Theorie bezüglich der besten Hintergrundfarbe (gelblich) und Schriftfarbe zum Lesen?


Update_1

Zach Saucier Ich stimme nicht zu, dass Farb- und Schriftkombinationen von der Kultur abhängen. Augenbelastung wurde mit blauem Licht in Verbindung gebracht, das von digitalen Anzeigegeräten ausgestrahlt wird. Seitdem wurden viele Apps entwickelt, um einen "Filter" anzuwenden, der die Intensität des blauen Lichts reduziert.

Glarminy.com hat Studien dazu und sie sagen auch:

Abhängig von Ihrer Wahl der Hintergrund-/Textfarbe und dem digitalen Bildschirmmodell kann es im Vergleich zu schwarzem Text auf weißem Hintergrund bis zu 75-95 % des blauen Lichts „filtern“ (Schätzung basierend auf LEDMuseum- und f.luxometer - Daten ) .

Von oben kann ich das digitale Bildschirmmodell des Benutzers nicht steuern, aber ich kann etwas gegen die Hintergrund-/Textfarbe tun.

Geben Sie hier die Bildbeschreibung ein

Ryan Wie Sie sagten, versuche ich, den Benutzern die bestmögliche Erfahrung zu bieten, da ausgiebiges Lesen die Augen überanstrengt. Als ich letzte Nacht das Internet auf und ab durchsuchte, sagten einige Studien, dass „ die beste Farbauswahl einen geringen Blaulichtanteil hat: Rot, Orange oder Gelb für Text und Schwarz für den Hintergrund. “ [Auch von Glarminy.com].

Aber ich werde die Hintergrundfarbe nicht in Schwarz ändern, da das etwas zu extrem erscheint. Ich habe auch gelbliche Hintergründe mit Grautönen aus grünen Textfarben gesehen.

PS: Word 2013 hat anscheinend eine Lesemodus-Funktion, die das "Papier" [unter anderem] in Sepia verwandelt:

Geben Sie hier die Bildbeschreibung ein


Update_2

Ich bin von f.luxometer auf die f.lux-Website gelangt . Es ist eine Software, die Ihr Leben besser macht , wie sie es ausdrücken. "Damit passt sich die Farbe des Computerdisplays der Tageszeit an, wird nachts warm und tagsüber wie Sonnenlicht."

Außerdem ist ihre Website mit der Hintergrundfarbe etwas extrem, aber sie ist so viel einfacher zu lesen. Probieren Sie es einfach aus, lesen Sie den Text von ihrer Homepage und wechseln Sie dann zu einem anderen Tab mit schwarz auf weißem Text. Ihre Augen (zumindest meine) werden den Unterschied spüren.

Ich kann meine Funktion auch so anpassen, dass sich der Lesemodus an Datum und Uhrzeit anpasst, wobei die unterschiedlichen Lichtverhältnisse zwischen den Jahreszeiten und beispielsweise 3 Tagesphasen berücksichtigt werden.


Update_3

Nachdem ich viel darüber gesucht und gelesen hatte, kam ich zu dem Schluss, dass die meisten Apps einfach eine Art Sepiafilter mit Click-Through-Eigenschaft über dem Dokument, das Sie gerade lesen, hinzufügen, also habe ich Folgendes getan:

  • Ich habe einen Screenshot meiner Website gemacht und ihn in PS aufgenommen
  • Darüber wurde ein Sepia-Fotofilter mit etwa 20 % Dichte hinzugefügt
  • Verwenden Sie das Pipettenwerkzeug, um die neuen Farben aus dem Körperhintergrund und dem Containerhintergrund zu erhalten, sodass:
    • #fffwandte sich an#f1ece8
    • #ebebebwandte sich an#ded9d6

Und es sieht in etwa so aus: Geben Sie hier die Bildbeschreibung ein

Es ist vorerst "OK", bis ich einen besseren Ansatz dafür finde.


Nebenbemerkung (irgendwie)


Bei meinen Recherchen stieß ich auf eine Studie der Chiba University, Dept. of Design & Architecture, die an 146 Studenten im Grundstudium durchgeführt wurde und sich mit den Auswirkungen von Hintergrundfarben auf die Benutzererfahrung beim Lesen einer Website befasste .

In einem der Tests zeigte es Ihnen eine Website mit einer Hintergrundfarbe (jeder Schüler bekam nur eine der fünf Farben: weiß, rot, grün, blau und gelb) und erhielt einige Aufgaben, die auf der Seite zu erledigen waren.

Nach all den Tests wurden sie in einem Formular gefragt, wie viel Zeit sie ihrer Meinung nach für die Bearbeitung benötigt haben.

Hier ist ein Zeitfehlerdiagramm für jede Farbe (der Zeitfehler in Gelb war deutlich kleiner als bei allen anderen) und das gesamte Papier

Geben Sie hier die Bildbeschreibung ein

Die "beste" Farb- und Schriftkombination hängt von der Kultur, dem Licht, dem Gerät usw. ab. Daher stimme ich dafür, diese Frage als meinungsbasiert zu schließen
Warum die eingebaute Funktion eines Browsers emulieren? Lassen Sie den Browser tun, was der Browser tut. Zur Lesbarkeit gehört viel mehr als nur eine bestimmte Hintergrundfarbe.
@ZachSaucier Ich bin anderer Meinung, dass es keine beste Option gibt. Kultur hat wenig damit zu tun, wie Licht wahrgenommen wird. Licht und Gerät sind eher ein Faktor, aber es scheint mir wirklich dumm, die beste Kombination nicht zu berücksichtigen, da der Verbraucher sie wahrscheinlich sowieso nicht auf einem kalibrierten Gerät betrachtet.
Auch verwandt von anderen Börsen: StackOverflow Dupe und UX StackExchange Dupe
@Ryan Die Sprachen, die sie sprechen, und visuelle Vorlieben haben Auswirkungen ....
Ich bin auch mit diesem Duplikat auf GD nicht einverstanden
Ich bezweifle, dass "Lesemodus" aufgrund der Sprache unterschiedlich ist. Es scheint mehr mit Biologie (Komfort) zu tun zu haben als mit Farb-/kulturellen Vorlieben. Aber trotzdem kann Alin die Frage bearbeiten, um diese Details hinzuzufügen! Die Frage ist eigentlich, was als "angenehme" Farbe und allgemeine Schriftfarbe / Kontrast zum Lesen angesehen wird, und einige Quellen dazu (soweit ich verstehe). Es ist eigentlich eine interessante Frage, ich habe sie positiv bewertet.
@ZachSaucier Ich habe die Frage aktualisiert und weitere Details hinzugefügt, um zu zeigen, dass sie nicht auf Meinungen basiert. Ich hoffe, Sie stimmen zu. :)
@Ryan Ich habe die Frage aktualisiert, um Details hinzuzufügen. Außerdem bin ich mir nicht sicher, ob der von Ihnen gepostete GD-Link ein Duplikat ist. Es wirft ein wenig Licht auf das Thema, aber es beantwortet meine Frage nicht ganz.
@go-junta Ich habe meine Frage aktualisiert, um weitere Details hinzuzufügen. Ich werde heute viel mehr suchen und meine Suchergebnisse ständig aktualisieren. Hoffe auch hier auf gute Antworten. Vielen Dank
@Ryan Tatsächlich gibt es einen großen Unterschied darin, wie Farben aussehen, wenn Sie äquatoriale Länder und Nordeuropa, Alaska usw. vergleichen. Weißes Papier muss in verschiedenen Ländern unterschiedlich gefärbt sein. Ich glaube, ich habe irgendwo einen Hinweis darauf.
@joojaa Hey, danke, dass du mitgemacht hast :)) es wäre toll, wenn du irgendwo eine Referenz hättest. Je nachdem, ob ich meine Frage darauf basierend verbessern könnte. Dadurch erhöhe ich meine Chancen, das zu bekommen, was ich brauche :D/
Es gibt kein „Bestes“. Im Allgemeinen gibt es einen „nicht genug“ und „zu viel“ Kontrast zwischen Vorder- und Hintergrundfarbe. Was diese spezifischen Linien in der Kontrastskala sind, hängt vom Kontext ab und wen Sie fragen.
@DA01 Auch wenn es dafür vielleicht keinen "besten" Weg gibt, gibt es sicherlich einen besseren Weg . Ich habe nur die Tatsache beiseite gelassen, dass ich es nicht kenne, und mich auf die Suche gemacht. Und da unsere Augen biologisch gleich sind und alle auf die eine oder andere Weise auf blaue Lichtemissionen reagieren, verstehen Sie, was ich meine.
@Alin gut, biologisch gleich, aber funktionell sehr, sehr unterschiedlich. :)
Da Sie versuchen, die Lesbarkeit in Ihrer Umfrage zu testen, würde ich dringend empfehlen, den Text auf Ihrem Beispielbild in Englisch zu ändern, anstatt Lorem Ipsum zu verwenden.
@LeslieP. Du hast vermutlich recht. Ich muss einen Artikel oder eine Art Dummy-Text finden, durch den ich ersetzen kann. Übrigens, vielen Dank, dass Sie sich die Zeit genommen haben, an der Umfrage teilzunehmen!
@LeslieP. Ich habe gerade einen englischen Dummy-Text gefunden und hinzugefügt, noch einmal vielen Dank!
Es gibt Probleme mit dieser Forschungsarbeit ... nämlich, dass, obwohl die sich ändernden Farben die sich ändernde Variable waren, nicht festgestellt wurde, ob es sich tatsächlich um die Farbe handelte , die das Hauptproblem war. es hätte einfach mehr mit dem Kontrast zu tun haben können (und war es wahrscheinlich auch).
Was Ihre Umfrage betrifft, die wird das gleiche Problem haben ... der Kontrast variiert stark zwischen den einzelnen Farbkombinationen ... also sind es die tatsächlichen Farben, die die Leute wählen, oder ein bestimmtes Kontrastniveau?
Kontrast = Helligkeit in diesem Fall & eine gute Dosis Kontrast UND die richtigen Farben machen es einfacher oder entspannter, Text auf einem Display zu lesen. Es gibt einige nette Informationen darüber hier (von dem Link, den Alin gepostet hat) justgetflux.com/research.html und es wird erwähnt, dass Blau (insbesondere) und Grün die "am wenigsten entspannenden" Farben sind. Es macht also Sinn, bei warmen Farben und Sepia zu bleiben und die Helligkeit auf ein akzeptables Maß zu senken. Die Ergebnisse scheinen zu zeigen, dass die meisten Menschen dieselbe Farb-/Kontrastkombination gewählt haben. Das grüne Muster hat einen ähnlichen Kontrast wie der „Sieger“, kam aber trotzdem nicht ex aequo

Antworten (2)

Alina,

Offenlegung: Ich bin auf Ihre Frage gestoßen, weil ich mit Glarminy verbunden bin , auf das Sie sich in Ihrer Frage bezogen haben. (Ich weiß jedoch nichts über Webdesign, also hoffe ich, dass dies nicht völlig nutzlos ist).

Ich finde Lesbarkeit und Wahl der Text-/Hintergrundfarbe ein wichtiges Thema und meistens ein vernachlässigtes!

Ich werde versuchen, kurz zu sagen, was ich weiß und denke, dass es Ihnen bei Ihren Entscheidungen helfen könnte (wenn Sie an einer gründlicheren Überprüfung mit Verweisen auf Forschungsarbeiten interessiert sind, lesen Sie diesen Beitrag .

Es scheint, dass Sie mit der Wahl von Farben mit niedrigem Blaulichtanteil auf dem richtigen Weg sind, aber es wird schwierig sein, eine „Einheitslösung“ zu finden, da unsere Augen unterschiedlich sind.

Unsere Schwellenwerte für unangenehme Blendung (was früher oder später zu einer Überanstrengung der Computeraugen führt) und im Wesentlichen das, was Sie zu reduzieren/vermeiden versuchen, variieren aufgrund der Tatsache, dass wir unterschiedliche Werte der optischen Dichte des Makulapigments (MPOD) haben . Siehe "MPOD-Score" im Bild unten, um eine Vorstellung von seiner Verteilung zu bekommen (US-Bevölkerung).

Makulapigment (MP, auch bekannt als gelber Fleck) ist ein Filter im Auge, der blaues Licht filtert, um die Fotorezeptoren vor Schäden zu schützen.

Menschen mit hohem MPOD (MP absorbiert/filtert/blockiert mehr blaues Licht) bevorzugen einen weißen/helleren Hintergrund, während Menschen mit niedrigem MPOD einen Hintergrund mit geringerem Blaulichtanteil bevorzugen.

Aus diesem Grund wird das Experiment, das Sie durchführen, nicht schlüssig sein (wie es jahrzehntelang bei der Forschung darüber der Fall war, ob gelb getönte Brillen das Sehvermögen verbessern oder nicht - jetzt ist klar, dass es vom MPOD jedes Einzelnen abhängt). Das ist wahrscheinlich auch der Grund, warum manche Leute f.lux nicht leiden können, während andere es lieben.

Worauf ich hinaus will, ist, dass Ihre Idee, Ihren Benutzern eine Option zu geben, gut ist. Es eignet sich für Personen mit hohem MPOD (schwarz auf weiß) und niedrigem MPOD (schwarz auf gelb). Wenn Sie dies verbessern möchten, können Sie Ihren Benutzern die Möglichkeit geben, den Blaulichtanteil Ihres Hintergrunds zu erhöhen oder zu verringern, und sie bestimmen lassen, was sich am angenehmsten anfühlt. (Aber das ist wahrscheinlich schwer umzusetzen?)

Ich hoffe, das ist hilfreich.

Hallo, auf diese Antwort habe ich schon lange gewartet! Vielen Dank, dass Sie sich die Zeit zum Schreiben genommen haben, ich weiß das sehr zu schätzen !!! Während die Implementierung eines Schiebereglers, der das blaue Licht von meinem Hintergrund leicht reduziert, möglicherweise schwieriger zu implementieren ist, bin ich jetzt, da ich mehr Informationen zu diesem Thema habe, mehr als bereit, mich heute daran zu halten und ein Skript dafür zu erstellen. Ich möchte meinen Lesern die bestmögliche Erfahrung mit ihren Geräten bieten. Ich möchte nicht, dass meine Entscheidungen davon abhängen, wie schwer es für mich ist, sondern wie einfach es für meine Besucher sein wird.
Außerdem, wenn ich nicht zu viel verlange, würde ich gerne einen ganzen Artikel darüber schreiben und ich denke, es wäre auch eine großartige Idee, wenn ich ein kleines Interview über Glarminy führen könnte, also, wenn Sie bereit wären, einige zu beantworten Wenn Sie Fragen haben, schreiben Sie bitte zurück, damit ich Ihnen meine E-Mail-Adresse geben kann und wir uns mit Ihnen in Verbindung setzen können. Vielen Dank noch mal !!!
Alin, ich beantworte gerne Ihre Fragen. Entschuldigung für die späte Antwort. Sie können mich über glarminy.com/contact glarminy.com/contact kontaktieren .

Nach all der Recherche (von der ich einen Teil in meiner Frage hinzugefügt habe) und der Entscheidung, meine eigene Umfrage durchzuführen, sind die bisherigen Ergebnisse nach 150 Stimmen (und zählen immer noch):

#1

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Einige Leute haben auch kommentiert, dass sie tagsüber zwar die Writer2001.com-Option Nr. 1 (die mit 28 Stimmen) bevorzugen, aber nachts zu einer hellen Schriftfarbe auf dunklem Hintergrund wechseln.

Einige argumentierten, dass das Grün ( Minze ) erfrischend und angenehm für die Augen ist, Aufmerksamkeit erregt, aber nicht stört. Aber nicht zu viele stimmten zu (nur 9 Personen). Ich wollte es erwähnen, weil die Leute, die für diese Farbe gestimmt haben, auch Kommentare abgegeben haben und fröhlich waren und auch bereit waren, bei der Umfrage zu helfen und Hilfe von ihren Freunden zu bekommen, obwohl wir es nicht taten. t kennen einander. Vielleicht hängt das mit Farbeinflüssen zusammen.

Geben Sie hier die Bildbeschreibung ein

Ich werde die Umfrage weiterführen, mein Ziel sind über 1000 Teilnehmer und werde auch diese Antwort ständig aktualisieren. Wenn Sie helfen möchten, dauert es nur eine Minute und es sind keine persönlichen Daten erforderlich, nur ein Ausweis oder Initialen, obwohl dies nicht erforderlich ist, wäre das Land auch dankbar und eine der zehn Optionen zu wählen.

Der Link renaing survey.imagins.ro

PS: Es ist noch zu früh, irgendwelche Schlüsse bezüglich des kulturellen Faktors zu ziehen, das lasse ich erst, wenn ich genug Stimmen bekommen habe.

Außerdem HIER ist mein 9gag-Beitrag, der um Hilfe bittet. Es gibt über 60 Kommentare, sodass Sie Reaktionen und Diskussionen zu diesem Thema sehen können.

Ein Grund für das Downvoting wäre aber schön.
Ich werde nicht ablehnen, weil es hier Mühe gibt, aber am Ende des Tages ist dies wirklich nur ein Meinungsgenerator. Und Meinungen sind sicherlich in Ordnung, aber dies sollte nicht mit tatsächlichen Daten verwechselt werden, die in einem anderen Kontext anwendbar wären. Beachten Sie, dass viele „Lesemodus“-Apps Benutzer einfach aus einer Vielzahl von Optionen wählen lassen … weil es viele Meinungen gibt.