Screendesign umfasst das grafische Layout und Design von Benutzeroberflächen bei unterschiedlichsten Displays. Dabei wird das Screendesign als eine Unterkategorie des User Interface Designs gewertet. Während das Interface Design die Funktionalität liefert, bringt das Screendesign die Funktion in eine optimale Form. Die Anwendungsgebiete sind vielfältig und beschränken sich nicht nur auf die Darstellung von Webseiten.

Benutzerfreundlichkeit und User Experience stehen im Vordergrund bei der Entwicklung von Screendesigns. Hierbei muss die Zielgruppe bedacht werden, der Anwendungsbereich definiert und auf Effizienz geachtet werden. Je nach Verwendungszweck und Absicht tritt bei manchen Projekten das Screendesign oder das Interface Design in den Vordergrund. Zu denken, dass Screendesign nur einen dekorativen Aspekt verfolgt, ist weit gefehlt. Mit der richtigen gestalterischen Umsetzung kann die Funktionalität und Usability der Anwendung unterstützt werden. Wie Ihnen ein gutes Screendesign gerade im Webbereich gelingt, erklären wir in diesem Artikel.

Inhaltsverzeichnis

Einsatzgebiete für Screendesign

Screendesign kommt nicht nur bei Apps und Websites zum Tragen. Es gibt viele unterschiedliche Anwendungsbereiche, in denen Menschen mit Maschinen kommunizieren müssen. Ist bei dieser Interaktion ein Display involviert, so muss dieses Display benutzerfreundlich und funktionell entsprechend der Aufgaben gestaltet werden.

Die Anforderungen an die Gestaltung können stark variieren. Die Gestaltung einer Website ist ein ganz anderes Thema als das Screendesign bei Displays für medizinische Geräte oder für Roboter in der Automobilbranche.

Es muss außerdem immer bedacht werden, an welche Personen sich das Screendesign richtet. Handelt es sich um Menschen, die täglich funktionelle Displays nutzen, oder werden Benutzeroberflächen für User entwickelt, die weniger Umgang mit digitalen Medien pflegen? Mitarbeiter einer automatisierten Produktionslinie in der Automobilbranche stellen sich zum Beispiel schnell auf neue Benutzeroberflächen ein. Sie geben täglich Anweisungen an Maschinen und Roboter mithilfe von Displays. Komplizierte Strukturen werden schnell wahrgenommen.

Entwickeln Sie hingegen das Screendesign einer Lernapp für ältere Menschen, um die geistige Aktivität zu bewahren, gelten ganz andere Kriterien. Viele nutzen wahrscheinlich nur selten ein Tablet oder Smartphone. Benutzeroberflächen sollten hier einfach und leicht nachvollziehbar gestaltet sein.

yaaas-creative-studio
YAAAS Creative Studio
Düsseldorf, Germany
4.9 - 5 Empfehlungen
Tools zur WebsiteerstellungWebentwicklungSocial MediaWebdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
echte-liebe
Echte Liebe
Köln, Wiesbaden, Berlin, Miami, Germany, USA
4.5 - 2 Empfehlungen
Media & WerbungOnline Advertising & DisplayWebentwicklungSocial MediaWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
werbetriebwerk-ug
WerbeTriebwerk UG
Münster, Germany
4.5 - 10 Empfehlungen
WebentwicklungE-Commerce-SoftwareSocial MediaGrafikdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
rechnerhaus-gmbh
Rechnerhaus GmbH
Lampertheim, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayTools zur WebsiteerstellungWebentwicklungE-Commerce-SoftwareWebdesignWeb & Software
Agentur entdeckenarrow_forward
adrenalinsky-werbeagentur-gmbh
ADRENALINSKY Werbeagentur GmbH
Berlin, Köln, Germany
5 - 3 Empfehlungen
WebentwicklungEvent-MarketingSocial MediaGrafikdesignWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
sapera-making-complexity-work
Sapera. Making complexity work.
Berlin, Germany
4.5 - 3 Empfehlungen
Digitale StrategieGrafikdesignWeb & SoftwareBrandingMarketing
Agentur entdeckenarrow_forward
incorporate-berlin
incorporate berlin
Berlin, Hamburg, Germany
4.5 - 5 Empfehlungen
GrafikdesignWebdesignWeb & SoftwarePublic RelationsBranding
Agentur entdeckenarrow_forward
digital-masters-gmbh
Digital Masters GmbH
Hamburg, Germany
0 - 0 Empfehlung
Online Advertising & DisplayTools zur WebsiteerstellungMobile & App-EntwicklungE-Commerce-SoftwareDigitale StrategieMobile & App-DesignWebdesign
Agentur entdeckenarrow_forward
uli-werbeagentur
Uli! Werbeagentur
Mainz, Wiesbaden, Frankfurt am Main, Germany
0 - 0 Empfehlung
WebdesignWeb & SoftwareMarketing
Agentur entdeckenarrow_forward
serviceplan-group
Serviceplan Group
München, Berlin, Bremen, Hamburg, Germany
0 - 0 Empfehlung
Media & WerbungWebentwicklungE-Commerce-SoftwareDigitale StrategieGrafikdesignWebdesignWeb & SoftwarePublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
trendmarke-gmbh
Trendmarke GmbH
Stuttgart, Germany
5 - 5 Empfehlungen
Mobile & App-EntwicklungE-Commerce-Software
Agentur entdeckenarrow_forward
econsor-mobile-agentur-heilbronn-app-entwicklung-logo
econsor mobile
Heilbronn, Germany
5 - 2 Empfehlungen
Mobile & App-EntwicklungWebentwicklungMobile & App-Design
Agentur entdeckenarrow_forward

Ein Wimpernschlag für gutes Screendesign

Nur 50 Millisekunden benötigt der User im Durchschnitt, um zu entscheiden, ob das Screendesign einer Website gelungen ist oder nicht. Bei einer entsprechenden Studie an der Carleton University unter der Leitung von Professorin Gitte Lindgaard wurde herausgefunden, dass diese kurze Zeitspanne ausreicht, um ein erstes Urteil zu fällen. Den Probanden wurden 125 unterschiedliche Website zuerst für 500 Millisekunden gezeigt. Im letzten Durchgang wurde diese Zeitspanne auf 50 Millisekunden reduziert. Das Urteil hinsichtlich der Qualität blieb gleich.

Wie gelingt ein gutes Screendesign?

Screendesign muss verschiedenen Ansprüchen genügen. Wie ein Monitor oder Display gestaltet wird, hängt wie so oft von der Zielgruppe ab. Unternehmen richten die Gestaltung ihrer Internetpräsenz an der eigenen Kundengruppe und deren Vorlieben aus.

 

Screendesign CoinCloud
Quelle: Pexels

Schwierig wird es, wenn öffentliche Displays wie zum Beispiel ein Fahrkartenautomat, ein Bankautomat oder die Benutzeroberfläche der Touchscreens in modernen Autos entwickelt werden. Hier sind die Zielgruppen breiter gefächert und das Design muss selbsterklärend funktionieren. Gerade bei Automaten im öffentlichen Raum, die für jeden nutzbar sind, kommt es auf ein funktionelles, leicht verständliches Design an.

Screendesign für Webseiten

Bei Webseiten sollten Sie darauf achten, dass die Gestaltung auch zu Ihrem Unternehmen passt. Meist wird die Entwicklung einer Website in die Marketingstrategie integriert, um ein kohärentes Erscheinungsbild an die Außenwelt zu liefern. Besitzen Sie ein Logo und sind bestimmte Farben im Corporate Design festgelegt, müssen diese berücksichtigt werden und sich im Screendesign widerspiegeln.

Bedenken Sie ebenfalls die mobile Aktivität der Zielgruppe. Viele Nutzer besuchen Webseiten von Tablets oder Smartphones. Das Screendesign muss sich auch an diese veränderten Bildschirmformate anpassen können. Die Nutzung von mobilen Endgeräten steigt stetig an. Die Mehrheit der Suchanfragen wird mittlerweile von Smartphones abgesetzt.

Die Nutzer im Mittelpunkt

Die Nutzer stehen beim Screendesign immer im Vordergrund. Egal für welche Anwendung Sie ein Screendesign entwickeln, denken Sie immer an die Bedürfnisse der Zielgruppe. Die unterschiedlichen Design-Elemente wie Bilder, Symbole, Texte und Schaltflächen sollten so angeordnet sein, dass schnell klar ist, wie die Website zum Beispiel funktioniert.

Eine genaue Analyse Ihrer Zielgruppe bringt Ihnen wichtige Informationen. Welche Fähigkeiten, Vorlieben oder Ziele Ihre Kunden haben, nimmt Einfluss auf die Gestaltung und das Screendesign. Je besser Sie sich in den User hineinversetzen können, desto besser können Sie Lösungen anbieten. Das Gleichgewicht zwischen Funktionalität und einem ansprechenden Design ist der Schlüssel zum Erfolg.

Es muss nicht immer alles neu sein

Marktforschungsstudien und psychologische Analysen geben viele wichtige Anhaltspunkte, welche Art des Screendesign besonders gut von den Usern angenommen wird. Sie müssen das Rad in dieser Hinsicht nicht neu erfinden. Einige Unternehmen und Plattformen bieten gut gefüllte Online-Bibliotheken an, in denen sich unterschiedliche Standard-Bildschirmvorlagen befinden. Nutzen Sie ruhig bereits vorhandene Konzepte und entwickeln Sie diese weiter. Auf diese Weise sparen Sie eine Menge an Zeit und Ressourcen. Lassen Sie sich von existierenden Designs inspirieren.

Einfach ist besser

Die Reduktion auf das Wesentliche bringt nicht nur mehr Übersichtlichkeit für Ihre Webpräsenz, es steigert auch den Wert. Es gibt immer noch Kunden, die dem Internet und Online Shops kritisch gegenüberstehen, weil sie es für wenig glaubwürdig halten. Nach dem Motto, jeder kann sich doch mal schnell eine Website bauen.

Screendesign kann hier einen klaren Design Look bringen, der Vertrauen weckt und zum Beispiel bei Online Shops Qualität vermittelt. Ästhetisch ansprechende Designs werden stark mit der Qualität des Produktes verbunden. Dabei müssen die angebotenen Produkte oder Dienstleistungen an sich nicht teuer sein. Große Konzerne wie IKEA oder H&M machen es vor. Ein gutes Screendesign mit hoher Effizienz funktioniert auch oder besonders bei Produkten, die für jeden Geldbeutel gemacht sind.

Ein übersichtlicher Aufbau erleichtert den Usern zu finden, wonach sie suchen. Dabei kann die Unterteilung des Bildschirms in unterschiedliche Abschnitte sehr hilfreich sein. Typografie und farbliche Akzente heben wichtige Elemente hervor und leiten das Auge des Nutzers.

Häufig verwendete Elemente beim Screendesign

Es können einige gestalterische Elemente klar definiert werden, die Sie bei jedem Screendesign finden werden. Einige Elemente übernehmen mitunter verschiedene Funktionen und sind flexibel einsetzbar. Das Zusammenspiel der unterschiedlichen Elemente sollte eine intuitive und effektive Webseite hervorbringen, auf der sich User schnell zurechtfinden.

Orientierungselemente

Gerade bei komplexen Websites sind Orientierungselemente essentiell für ein gutes Screendesign. Generell wird eine Website von vielen Menschen als ein großer Raum wahrgenommen. Ohne Orientierungshilfen kommt der Nutzer sich leicht verloren vor, da die Komplexität der gesamten Website nicht erkannt werden kann. Es wird ja immer nur eine Webseite präsentiert.

Integrieren Sie in Ihr Screendesign optische Markierungen, ähnlich einem Leitsystem in echten Gebäuden. Diese zeigen dem Besucher, wo er sich befindet. So kann zum Beispiel in der Menüleiste die aktuelle Seite hervorgehoben werden. Benennen Sie diese korrekt. Der Name sollte auch entsprechend in der URL erscheinen. In Online Shops für Mode finden sich hier zum Beispiel oft die Kategorien Mode, Taschen, Schmuck oder Accessoires. Die aktuelle Seite kann zum Beispiel fett hervorgehoben werden.

Navigationselemente

Diese Elemente unterstützen den Besucher, die gewünschte Seite zu finden. Anders als in einem echten Gebäude kann der User durch die Navigationselemente alle anderen Seiten sehen, ohne die momentane Position zu verlassen. Das Screendesign sollte eindeutig und leicht zu nutzen sein.

Menüleisten, bei denen die einzelnen Unterpunkte über ein zusätzliches herausklappbares Menü verfügen, werden besonders gern eingesetzt. Hier kann der Nutzer sehen, was sich unter der Hauptkategorie befindet und bekommt eine Ahnung, auf welchen Webseiten bestimmte Inhalte zu finden sind. Dabei sollte sich die Navigationsleiste optisch von den anderen Elementen abgrenzen. Navigations- und Orientierungselemente verschmelzen oft miteinander und bringen noch mehr Effizienz.

Inhaltselemente

Inhaltselemente sollten für Ihre Kunden leicht verständlich sein. Darunter fallen Bilder, Texte, Animationen und Grafiken. Bei kleinen Bildschirmen muss das Screendesign entsprechend angepasst sein, damit auch hier die Inhalte schnell erfasst werden können.

Layoutelemente

Layoutelemente haben in dem Sinne keine inhaltliche Bedeutung. Sie dienen vielmehr der Ästhetik und unterstützen die Struktur der Seite. Grafische Elemente wie Schatten, Linien und Farbflächen werden besonders oft genutzt. Damit lassen sich zum Beispiel Navigationselemente zusammenzufassen oder bestimmte Abschnitte auf der Webseite hervorheben.

Verzichten Sie an dieser Stelle lieber auf rein dekorative Elemente, die dem User keinen Mehrwert liefern. Hier können Sie im Extremfall eher das Gegenteil erwirken. Denn zu viele irrelevante Elemente lenken vom Inhalt eher ab und frustrieren den Nutzer.

Emotionale Elemente

Vergessen Sie nicht die Gefühle Ihrer Zielgruppe. Menschen sind emotionale Wesen und fast alle Entscheidungen sind emotional motiviert. Es ist also durchaus legitim, mit Farbe oder einer witzigen Headline ein bisschen Spaß auf die Webseiten zu bringen. Dies kann Neugierde wecken und motiviert zum Weiterklicken. Auch bei seriösen Firmen dürfen also Elemente auftauchen, die unsere Emotionen ansprechen.

Interaktionselemente

Navigationselemente und Links zählen zwar auch zu interaktiven Elementen. Jedoch beschreiben die Interaktionselemente in unserem Fall Formulare, Kommentarfelder oder Newsletter Abos. Der Besucher kann aktiv werden, Feedback hinterlassen oder Fragen stellen. Wichtig bei diesen Elementen, sie zeigen dem Besucher, dass sein Kommentar oder Fragebogen korrekt registriert wurde. In vielen Fällen wird eine neue Seite geladen, welche die entsprechende Aktion bestätigt. Im Falle eines Fehlers sollten Sie den Nutzer auch darüber aufklären und angeben, warum die Aktion nicht erfolgreich war.

Dokumentation des Screendesigns im Styleguide

Nutzen Firmen und Unternehmen unterschiedliche Kanäle, um mit den Kunden in Kontakt zu treten, so empfiehlt sich hier unbedingt die Daten des Screendesigns in einem Styleguide festzuhalten.

In einem Styleguide werden alle wichtigen Informationen zum Farbkonzept, Schriftart, Schriftgröße, Seitenstruktur oder auch zu Textsatz und Abständen vermerkt. Diese Angaben sind für Designer, Entwickler und Programmierer ein Leitfaden, damit alle Präsentationen untereinander stimmig sind und mit dem Corporate Design der Firma harmonieren.

So verfügt zum Beispiel die Deutsche Bahn über eine Website und über physische Ticketschalter. Beide Kanäle verfügen über spezielle Displays und Bildschirmgrößen und bedienen mitunter unterschiedliche Zielgruppen. Kaufen junge technisch affine Menschen eher online auf der Website oder mit einer App, finden Sie an Ticketschaltern jede Altersgruppe. Auch Menschen, die wenig mit Technik am Hut hat, möchten Fahrkarten kaufen.

Hier ist es die Aufgabe des Screendesigners, mit den Programmieren ein Konzept zu entwickeln, dass die Bedürfnisse aller erfüllt. Immer den Angaben des Styleguides folgend, der die Zusammengehörigkeit von Website, App und Ticketschalter demonstriert.

Wie werden Sie Ihre Seiten gestalten?

Screendesign wurde lange Zeit unterschätzt und als rein dekorativer Aspekt abgetan. Dabei ist ein gutes Screendesign Teil des Erfolgs einer Webseite oder einer Anwendung mit Touchscreen und Display. Egal ob das Screendesign für Webseiten, Ticketautomaten oder Benutzeroberflächen bei automatisierten Produktlinien geschaffen wird. Die User-Experience muss immer im Vordergrund stehen. Sie können sich jederzeit an eine App-Entwicklungsagentur wenden, die Sie bei Ihrer Strategie unterstützt.

Je nach Wirkungsbereich können die Anforderungen stark variieren. Um hier ein allumfassendes Konzept zu schaffen, das sowohl Webpräsentationen, Apps oder auch Touchscreens an stationären Geräten beinhaltet, muss mitunter der Rat von Experten her. Marketing Agenturen verfügen über das Know-how Web-, Screen- und Interfacedesign gekonnt zu verbinden und alles in eine erfolgreiche Marketingkampagne zu packen.