Was ist Screendesign?
Als Screendesign wird die grafische Umsetzung der Anzeige von Inhalten und das Layout von Benutzeroberflächen auf Monitoren definiert. Damit ist Screendesign ein Teilbereich des Grafikdesigns, beziehungsweise Interfacedesigns. Der Fokus liegt auf der ästhetischen sowie der funktionalen Gestaltung der Anwenderschnittstelle zwischen Mensch und Maschine mit dem Ziel, dass möglichst jeder Nutzer einfach und schnell die Erfüllung seiner Bedürfnisse erfährt. Screendesign betrifft die Darstellung von Anwendungen, welche auf Bildschirmen von Hardwareprodukten oder auf Automaten oder Informationssystemen erreichbar sind.
Definition: Screendesign beschreibt die grafische Gestaltung der Benutzeroberflächen von Websites, Onlineshops, Apps und ähnlicher Anwendungen, mit denen ein Anwender auf Displays agiert. Der Fokus liegt auf einer schnellen und effektiven Erreichung des Bedürfnisses oder Ziels des Nutzers – unabhängig des verwendeten Mediums.
Screendesign im Detail
Beim Screendesign geht es um die visuelle Umsetzung von Websites/-shops, Apps und ähnlichen Anwendungen. Der Fokus liegt also auf der Darstellung und der Anordnung einzelner Elemente, also dem Layout. Dieses wird von funktionalen, ästhetischen und kommunikativen Anforderungen bestimmt, damit ein Nutzer eine Anwendung möglichst intuitiv und effektiv bedienen kann und schnell sein gewünschtes Ziel erreicht.
Ästhetik: Nutzer entscheiden häufig in den ersten fünf Sekunden, ob sie die Inhalte einer Seite oder App weiter konsumieren. Entscheidungsträger ist dabei hauptsächlich das Aussehen der Anwendung. Typografische Elemente wie Farbkonzept, Schriftart und -größe, Stil und Größe von Icons und Call-to-Action Buttons, sowie Rastervorlagen sind ansprechend in Einklang zu bringen. Durch eine strukturierte und ansprechende Gestaltung wird der User überzeugt.
Funktion: Die Bedienung einer Anwendung muss für den Nutzer immer einfach und intuitiv sein – und vor allem funktionieren. So gibt es auf vielen Websites Elemente, die immer ähnlich angeordnet sind. Das Konzept hat sich einfach bewährt und Benutzer haben sich an gewisse Positionierungen verschiedener Elemente gewöhnt. Das betrifft bei Webshops beispielweise das Icon für den Warenkorb, welches meist in der rechten oberen Ecke zu finden ist. Dennoch beschäftigen sich Screendesigner stetig mit innovativen und kreativen Ideen, die die Funktion und Interaktionsmuster einer Anwendung noch intuitiver und zielgruppengerechter bereichern und Anwendungen dabei von der Konkurrenz abheben.
Kommunikation: Bilder sagen mehr als tausend Worte. Dieser berühmte Spruch lässt sich eins zu eins auf das Screendesign übertragen. Bilder sind hier die einzelnen Kommunikationselemente, die es umfasst. Die Anordnung und Verknüpfung dieser Elemente bilden für den User das Gesamtbild der äußeren Erscheinung. Ohne die konkreten Inhalte konsumiert hat, kommunizieren sie bereits mit dem Nutzer. Daher ist es wichtig, vor der Erstellung des Screendesigns zu definieren, mit wem in der geplanten Anwendung kommuniziert werden soll. Unterschiedliche Zielgruppen stellen unterschiedliche Bedürfnisse an Kommunikationselemente. Das Screendesign muss somit immer auf die Zielgruppe ausgerichtet sein!
Anwendungsfelder eines Screendesigns
Wie der Name bereits verrät, geht es beim Screendesign um die Gestaltung eines Bildschirms. Das betrifft alle Anwendungen, bei denen Benutzerinteraktionen und Benutzerführung über unterschiedlich große Monitore ausgeführt werden. Daher müssen Screendesigns oft flexibel auf verschiedene Endgeräte angepasst sein.
Übersicht über den Einsatz von Screendesigns
- Websites / Webshops
- Betriebssystemsoftware
- PC- / Videospiele
- Smartphone / Tablet
- MP3- / Mediaplayer
- Haushaltsgeräte
- Industriesteuerungen / Bürogeräte
- Automaten
- Informations- / Steuerungssysteme
- Personenleit- / Navigationssysteme
Screendesigns finden Einsatz in allen Anwendungen, deren zentrales Bedienelement ein Display ist.
Eigenschaften eines guten Screendesigns
Zentrale Aufgabe eines guten Screendesigns ist es, Nutzer möglichst einfach und zielführend durch eine Anwendung zu leiten. Daher ist eine funktionale, ästhetische und gleichzeitig verständliche Anordnung und Kommunikation aller Elemente auf einem Bildschirm ausschlaggebend. Der User muss dabei im Mittelpunkt stehen. Kernelement aller Überlegungen bezüglich des Screendesigns ist also der Nutzer und seine Anforderungen und Erwartungen an eine Anwendung. Sämtliche Designelemente des Screendesigns müssen so gestaltet und angeordnet sein, dass der Bediener sie einfach und sofort verstehen und bedienen kann. Das setzt voraus, dass vor der Erstellung eines Screendesigns eine gründliche Zielgruppendefinition und -analyse durchgeführt wird. Ziele, Fähigkeiten, Vorlieben und potenzielle Einschränkungen der User müssen in für ein erfolgreiches Screendesign bekannt sein und berücksichtigt werden. Entwickler sowie UI/UX Designer stehen also vor der Aufgabe, ein Design zu entwickeln, das gleichzeitig ästhetisch, funktional und praktisch ist. Eine wichtige Aufgabe dabei ist es, den Nutzer intuitiv zu leiten und ihm Orientierungsmöglichkeiten zu geben. Eine solche Orientierung kann beispielweise durch eine Navigation, Überschriften, sowie Zwischenüberschriften oder Buttons hergestellt werden. Ein ansprechendes Design der Bildschirmoberfläche gelingt durch passende Farbgebung, Wahl der Schriftart und -größe, sowie dem Einsatz und der Gestaltung von Icons und Buttons. Viele Entscheidungen werden häufig von einem bestehenden Corporate Design (CD) bestimmt. Ein neues Screendesign muss selbstverständlich die darin festgelegten grafischen Bestimmungen berücksichtigen. Wichtig ist, einen Screen nicht zu überladen. Klare Strukturen, einfache Symmetrien und komfortable Abstände zu den Rändern und zwischen den Elementen sorgen dafür, dass der User eine gute Übersicht behält. Ein Screendesign muss immer userorientiert ausgerichtet sein.
UX vs. UI Screendesign
Ein funktionierendes Screendesign hat einen enormen Stellenwert hinsichtlich der Usability. Diese setzt sich aus der User Experience (UX) und der User Interaction (UI) zusammen.
| UX Design | UI Design |
|---|---|
| UX steht für “User Experience” | UI steht für „User Interface“ |
| User Experience ist das Erlebnis, welches der Nutzer vor, während und nach Bedienung der Anwendung hat | Das User Interface ist die Benutzerschnittstelle zwischen Anwendung und Nutzer UI bietet dem Nutzer die Möglichkeit, mit der Anwendung zu kommunizieren |
| Im Fokus steht die intuitive Bedienbarkeit, und schnelle Erlernbarkeit der Anwendung | Im Fokus steht das visuelle Erscheinungsbild Ästhetische und funktionale Einbindung von Kommunikationselementen |
| Ein positives Nutzererlebnis wirkt sich langfristig auf die Zufriedenheit des Nutzers und seine Loyalität aus z.B. meldet er sich für den Newsletter an | Der Nutzer führt eine Interaktion selbständig aus z.B. einen Link anklicken oder einen Button betätigen |
Stellenwert von UI & UX für das Screendesign
Je nach Konkurrenzaufkommen und Anwendung, reicht dem User eine bloße Informationsversorgung nicht aus. Häufig wird ein Erlebnis erwartet, welches über die Einholung von Information hinausgeht. Individualität und Flexibilität sind hier der Schlüssel zum Erfolg. Als direkte Schnittstelle zum Benutzer muss ein Screen immer an dessen Verhalten und Bedürfnisse angepasst sein. Eine positive User Experience im Sinne eines einheitlichen und intuitiven Screendesigns wird nicht nur erwartet, sondern vorausgesetzt. Funktioniert eine Anwendung einwandfrei und ist sie userfreundlich gestaltet, wird das von dem Anwender kaum wahrgenommen. Treten allerdings Komplikationen auf, wirkt sich diese negative Erfahrung auf die User Experience aus. Eine unwirksame Nutzererfahrung sollte daher unbedingt vermieden werden. Findet sich ein User aufgrund einer unübersichtlichen Nutzeroberfläche nicht zurecht, kann dies dazu führen, dass er die Anwendung künftig meidet. Ein nicht zielgruppengerechtes Design des Screens kann den Nutzer von einer Interaktion abschrecken.
Flexibles Screendesign für verschiedene Endgeräte
Hinsichtlich des User Interfaces wird von dem Nutzer die Anpassung des Screendesigns an das genutzte Endgerät erwartet, denn Display ist nicht gleich Display. Das Layoutraster der Website oder der App auf mobilen Geräten sollte sich also von der Desktopansicht unterscheiden, um wiederum die Nutzerfreundlichkeit zu erhöhen. Die mobile Internetnutzung in Deutschland lag im Jahr 2020 bei 80%.
Das klassische Screendesign für Websites wird in einem 4-Spalten-Layout erstellt. Bei einer Desktop-Ansicht werden die vier Spalten nebeneinander dargestellt. Wichtig bei der Anpassung des Screendesigns auf verschiedene Endgeräte ist das responsive Webdesign. Das bedeutet, dass das Layout flexibel gestaltet ist und sich jedem Display anpassen kann. So wird das 4-Spalten-Layout in der mobilen Ansicht nicht nebeneinander, sondern untereinander dargestellt. Bei der Anzeige der Anwendung auf einem Tablet kann das Layout aus Desktop und mobiler Ansicht kombiniert werden. Erfahrene UI/UX-Designer wissen um die Problematik der Darstellung auf unterschiedlichen Screens und schaffen passende Lösungen.
Das perfekte Screendesign in 4 Schritten
Ein ideales, user- und anwendungsorientiertes Screendesign zu erstellen ist, unter Berücksichtigung folgender vier Schritte, kein Hexenwerk:
Planung und Vorarbeit
Ein auf die Zielgruppe abgestimmtes und funktionierendes Screendesign Bedarf einiges an Vorbereitung. Die Art der Anwendung sowie die Zielgruppe müssen ausführlich analysiert werden. Nur so kann eine Benutzeroberfläche entstehen, die sämtlichen Anforderungen gerecht wird.Diese Vorbereitung beginnt meist mit einem Briefing. Dort können jegliche Ansprüche an das Screendesign festgelegt werden. Berücksichtigt werden dabei ein bestehendes CD, die Vorstellungen des Auftraggebers und Gestaltungsweisen und Funktionalitäten, die eine optimale Usability erschaffen.
Designvorlage erstellen
Mit der Erstellung eines Wireframes oder Mockups, werden die zuvor gesammelten Anhaltspunkte visuell umgesetzt. So lässt sich überprüfen, ob das entstehende Screendesign sämtlichen Ansprüchen gerecht wird. Klickbare Mockups lassen sich zusätzlich hinsichtlich der Usability und Nutzerfreundlichkeit testen. In dieser Phase bieten sich außerdem Tests an. Gibt es unterschiedliche Vorstellungen eines Screendesigns, lässt sich mit einem A/B Test die wirksamere Bildschirmoberfläche definieren
Erstellung eines Styleguides
Alle Elemente eines Screendesigns werden definiert. Das betrifft vornehmlich potenziell wiederkehrende Elemente das Layout, Raster, Schriftarten, Buttons, Farben, Anrede des Nutzers, Abstände oder grafische Elemente. So wird ein konsistenter Umgang mit allen Inhalten garantiert und die künftige Arbeit für Designer, Entwickler oder Redakteure erleichtert. Umsetzung Das definierte und geplante Screendesign wird in der Anwendung umgesetzt. Besonders wichtig ist, dass die korrekte und einwandfreie Funktionsweise ausführlich geprüft wird, bevor sie dem Nutzer zugänglich gemacht wird. Vor allem technische Details wie Buttons oder Formulare müssen einwandfrei funktionieren.
Bedeutung des Screendesigns für das Online Marketing
Da das Screendesign eng mit Usability und Experience zusammenhängt, sollte es für jeden Online Marketer ein Begriff sein. Eine optimal gestaltete Benutzeroberfläche entscheidet über die Verweildauer und die Absprungrate – wichtige Kennzahlen für die Performance einer Website. Auch die Konversationsrate, also die messbare Umwandlung vom Interessenten zum Kunden, wird von einem idealen Screendesign positiv beeinflusst.
Leave a Reply