Leveling & Cards

Google’s Material Design macht interaktive Elemente subtil sichtbar.

Wird der Schatten inkonsistent verwendet (linkes Schaubild), fühlt man sich sofort in die wilden 1990iger Jahre zurückversetzt. Schatten dienen auch nicht als Schmuckattribute sondern werden subtil genutzt und markieren größere klickbare Einheiten (rechts).

Die Zeit stark verschatteter Elemente ist eigentlich lange vorbei. Das stimmt jedoch nicht ganz, da der Schatten durch das Google Material Design in einer sehr subtilen Weise als Hilfsmittel fungiert, um interaktive Elemente zu erkennen. Die Idee: alles, was durch Klicken weitere Optionen offenbaren würde, wird vom Grund der Seite räumlich in Richtung des User-Auges angehoben. Würde man bei Tageslicht reales Papier vom Tisch hochheben, würde dieses einen feinen subtilen Schatten werden. Voila: damit erklärt sich das schattige Comeback.

Der Schatten ist daher kein Gestaltungsmittel sondern wird konsistent ohne Variation der Beleuchtungsrichtung gleichartig für alle interaktiven Elemente verwendet. Besonders wichtige Elemente, wie der Call-2-Action Button werden besonders stark angehoben und haben daher einen etwas größeren, jedoch blasseren Schatten.

Card-Design

Karten werden genutzt zur Strukturierung von Entitäten gleichen Aufbaus, z.b. Produkte in einem Shop werden dargestellt durch den Namen, einem Produktbild, einer Beschreibung und dem Preis. Damit sofort erkennbar ist, dass es sich hier um eine Einheit handelt, werden besagte Elemente auf einer Karte platziert. Da diese Karten meist klickbar sind (zur Auswahl des Produktes) wird die Karte auch mit einem subtilem Schatten versehen.

Ähnliche Beiträge

  • Margins & Paddings

    Lage und Menge des Weißraums werden über Margins & Paddings gesteurt. Margin Ist der Weissraum um einem Element herum. Durch diesen Weißraum wird das Element als abgeschlossene visuelle Einheit wahrgenommen. Dem User erschließt sich die Seite schneller wenn er/sie visuell alle Elemente separieren und dann – von starken Kontrasten geleitet – nacheinander untersuchen kann. Padding…

  • Navigation

    Woher kommt der User, was ist aktuell zu tun und wo geht es danach hin. Navigationselemente beantworten diese Fragen auf einen Blick. Breadcrumbs Mit Breadcrumbs (Brotkrumen) ist der Pfad zum aktuellen Dialog sichtbar und sie ermöglichen das Zurückspringen zu einer höheren Seite. Besonders relevant ist der Breadcrumb, wenn User von außen auf die Seiten kommen…

  • Evil UX worst practices

    „Don’t be evil“ war bis 20181 ein Teil von Google’s Code of Conduct. Die damalige Version des Verhaltenskodex liest sich ganz im Sinne des Dienstes am User „Yes, it’s about providing our users unbiased access to information, focusing on their needs and giving them the best products and services that we can …“ (der volle…

  • Visuelle Hierarchie

    Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich. Schriftgröße Je wichtiger die Überschrift, desto größer die Schriftgröße. Durch stark sichtbare und kontrahierende Zeichen wird die Aufmerksamkeit des Users auf die Titelüberschrift gezwungen. Zur Orientierung ist das natürlich ein sehr sinnvolles Vorgehen, denn es muss entschieden werden, ob das weitere Scannen der Seite thematisch…