Hör auf, so quadratisch zu sein
Als Designprofi sind Sie mit der zunehmenden Verwendung von Kreisen in allen Designelementen vertraut (und möglicherweise auch dazu beigetragen).
Von Einrichtungsgegenständen wie Spiegeln und Drucken bis hin zu Handwerkzeugen im Baumarkt sind überall Kreise zu finden. Kreise haben sich sogar in unsere Websites eingeschlichen und erscheinen in Kopfzeilen, Menüs und manchmal in der Mitte der Seite.
Einige Design-Websites haben sogar Blog-Posts erstellt, einschließlich großartiger Screenshots der kreativen Verwendung von Kreisen im Webdesign. Es wurde jedoch wenig über die Psychologie, die hinter der Verwendung von Kreisen im Design steht, oder darüber, wie die Reaktion des Benutzers auf Kreise effektiv in das wachsende Phänomen der mobilen Verwendung integriert werden kann, gesagt.
Wir wissen, dass wir Kreise mögen, aber warum? Und wie kann ein Webdesigner Kreise optimal nutzen, um die Benutzerfreundlichkeit im Responsive Design zu optimieren?
Kreise und das Gehirn
Erkenntnis und Wahrnehmung
Kreise sprechen Menschen an, weil sie leichter zu verstehen sind als Formen und Objekte mit harten Linien.
Das Auge wird von Kreisen und den darin enthaltenen Informationen angezogen, und sie sind schneller und einfacher für das Gehirn als hartkantige Quadrate und Rechtecke zu verarbeiten.
Der Schweizer Mathematiker und Physiker Jurg Nonni, Autor von Visual Perception, meint, dass das Entfernen von Kanten es uns ermöglicht, ein Objekt schneller wahrzunehmen. Laut Nonni, "Ein Rechteck mit scharfen Kanten nimmt tatsächlich ein bisschen mehr kognitiven sichtbaren Aufwand als zum Beispiel eine Ellipse der gleichen Größe. Unser "Fovea-Auge" ist noch schneller bei der Aufnahme eines Kreises. Kanten beinhalten zusätzliche neuronale Bildwerkzeuge. Der Prozess wird daher verlangsamt. "
Vertraute und beruhigende Kurven
Zusätzlich zur kognitiven Fähigkeit des Gehirns, Kreise schneller zu verarbeiten als Quadrate und Rechtecke zu verarbeiten, verarbeiten wir bekannte Informationen und Objekte schneller als solche, die wir nicht erkennen.
Jeder erkennt Kreise, und Menschen lernen, Formen mit bestimmten Aktionen und Ergebnissen zu verbinden, wie zum Beispiel das universelle rote Achteck "STOP" -Zeichen. Gemäß den OS X Human Interface Guidelines von Apple lernen Menschen, bestimmte Verhaltensweisen mit bestimmten Elementen zu assoziieren, die auf ihrem Aussehen beruhen. Zum Beispiel erkennen Menschen die Druckknöpfe an ihrer abgerundeten Form. "
Eine effektive Verwendung von Kreisen in ikonischen Menüpunkten auf Azonmedia Die Serviceseite.
Wir begegnen Kreisen, Ovalen und Objekten mit abgerundeten Ecken auf viele warme und nicht bedrohliche Weise in Kulturen und Umgebungen. Wolken, Eier, die Sonne und der Mond in der Natur erscheinen alle mit bloßem Auge gerundet. Smiley-Gesichter, Kuchen, Torten, kurvige Figuren erfreuen die Sinne.
Unsere Gehirne reagieren gut auf Kreise und Kurven, während sie scharfkantige Objekte als härter, definierter und potentiell bedrohlich wahrnehmen.
Kreise und die Benutzererfahrung
Genau aus diesen Gründen sind Kreise im Webdesign wirksam.
Online-Benutzer sind bekanntlich ungeduldig, und da Kreise leichter zu verstehen und zu verstehen sind, dauert es weniger Zeit, die von ihnen repräsentierten Informationen zu verarbeiten.
Mobile Benutzer sind noch ungeduldiger. Sie sind auch beschäftigt, oft unterwegs, Multitasking und verwenden einen Zeigefinger oder Daumen, um auf ihrem Handheld-Gerät zu navigieren. Sie wollen ihre Informationen jetzt. Mithilfe von Kreisen können mobile Nutzer die gesuchten Informationen effizienter lokalisieren.
Kreise und Daumen
Ein anderer Weg, wie Kreise in einer mobilen ersten und reaktionsschnellen Designumgebung nützlich sind, ist ihre Eignung als Elemente in Touchscreen-Schnittstellen.
Wenn Touchscreen-Smartphones und Tablet-Benutzer per Fingertipp, Slide oder Daumen den Weg zu den gesuchten Informationen suchen, ist es sinnvoll, Kreise zu verwenden, um den Benutzer zu leiten. Sie ahmen nicht nur die Fingerspitzenform nach, wir verbinden Kreise und abgerundete Kanten mit Druckknöpfen und unser Gehirn verarbeitet schnell die erforderlichen Aktionen.
Web-Entwickler Oliver James Gosling
Wenn Sie Kreise in eine Touchscreen-Mobilschnittstelle integrieren, entwerfen Sie auf dem kleinsten Bildschirm. Text oder Bilder innerhalb des Kreises müssen immer noch leicht lesbar sein und die Größe muss mindestens die Größe einer Fingerspitze oder 44 Pixel haben.
Kreise und Bildschirmfläche
Die gute Nachricht über die Verwendung von Kreisen im Responsive Design ist, dass CSS3 die Codierungsanforderungen stark vereinfacht.
Die schlechte Nachricht ist, dass Kreise viel Grundbesitz beanspruchen und zu einem offeneren Bildschirmbereich führen.
Da der Bildschirmplatz auf Smartphones und Tablets ziemlich klein sein kann, wie können Sie Kreise einführen, ohne sich Sorgen machen zu müssen, dass sie so klein werden, dass sie nicht gelesen, angetippt oder geklickt werden können?
Eine einfache mobile Schnittstelle
Es hilft, Ihre mobile Oberfläche einfach zu halten. Da das Auge sowieso zum Kreis hingezogen wird, hat es keinen Sinn, den Rest des Bildschirms mit Inhalten zu füllen, die der Benutzer verpassen wird.
Wenn sie nicht Teil der Kopfzeile oder des Logos sind, sollten Sie die Kreisnutzung auf jeder Seite auf mindestens ein oder zwei beschränken. Versuchen Sie es mit einer kreisförmigen Suchschaltfläche oder verwenden Sie eine für Ihren Call-to-Action wie "hier anrufen" oder "hier anmelden".
Gravitieren Design verwendet Kreise und Farben, um den Blick auf das Logo, das Portfolio und den Text auf der Homepage zu lenken.
Hintergründe und Schaltflächen teilen
Wie bei jedem Designelement muss die Verwendung von Kreisen zum Inhalt, Produkt oder Service, Stil und Branding der Website passen. Es sollte die Benutzererfahrung verbessern und die Schnittstelle vereinfachen.
Wenn ein Call-to-Action für die Site nicht geeignet ist oder wenn die Navigations- und Menüelemente in einem Kreis nicht funktionieren, sollten Sie einen Kreis in den Hintergrund einfügen. Verwenden Sie einen größeren Kreis im Hintergrund, um den Blick auf das wichtigste Stück auf der Seite zu richten (halbtransparent hinter dem Text).
Denken Sie daran, dass der Inhalt für den mobilen Benutzer hier ist. Fördern Sie die Interaktion mit den Nutzern, indem Sie anstelle der rechteckigen Optionen runde Social-Media-Share-Buttons wählen.
Kreisförmige Symbole im responsiven Design
Eine der beliebtesten Möglichkeiten, Kreise in Websites zu integrieren, sind Symbole in einem Menü. Dies passt gut zu Responsive Design, da es langwierigen und / oder verwirrenden Text durch ein einfacheres Bild ersetzt.
Buza verwendet Kreise, um das vertikale mobile Menü zu ergänzen.
Ein kreisförmiges Symbol benötigt weniger Platz und bietet mehr Platz für Inhalte. Es sieht gut aus und der Benutzer verarbeitet schnell, was es darstellt.
Ovale oder abgerundete Rechtecke
Vielleicht bist du nicht bereit, deine Arme um einen großen alten Kreis zu legen. Das ist okay. Aber bleib nicht bei harten Kanten.
Fügen Sie Ihrem Responsive Design Toolkit einige abgerundete Rechtecke oder Ovale hinzu. Die geglätteten Ecken machen es einfacher, sich auf den Inhalt innerhalb der Kurven zu konzentrieren, anstatt auf äußere Kanten aufmerksam zu machen.
Letztes Wort
Während Webdesigner Stunden damit verbringen, sich über die Vorteile von Kreisen oder abgerundeten Rechtecken im Vergleich zu scharfen Kanten zu quälen, dreht sich alles um den Inhalt, wenn es darum geht, den Benutzer mit mobilem Design zufrieden zu stellen. Der Benutzer möchte ansprechende und nützliche Inhalte in einer einfachen und leicht zu findenden Benutzeroberfläche präsentieren. Alles andere ist zweitrangig.
Obwohl responsives Webdesign darauf abzielt, auf die Umgebung zu reagieren, sollte es auch auf die Bedürfnisse des Benutzers eingehen. Benutzer erkennen die vertraute Form des Kreises, nehmen sie schnell wahr und können den anklickbaren Punkt auf dem Bildschirm leicht ansteuern. Verwenden Sie einen einfachen Kreis in Ihrem nächsten Responsive Design-Projekt. Ihre Benutzer werden es Ihnen danken.
Verwenden Sie Kreise für Ihren Call-to-Actions? Spielst du mit dezent abgerundeten Rechtecken auf Nummer sicher? Lassen Sie es uns in den Kommentaren unten wissen.
Ausgewähltes Bild / Vorschaubild, Kreise Bild über Shutterstock