Im modernen Design spielt das UI/UX Design eine zentrale Rolle. UI/UX Design ist die Kombination aus UI Design und UX Design. UX Design oder auch User Experience Design, ist das Design der Nutzererfahrung. UI Design oder auch User Interface Design, ist das Design der Nutzungsoberfläche. Ein optimal designtes Produkt (digital oder haptisch) sollte sowohl dem Nutzer eine gute Erfahrung bieten (User Experience (UX)), als auch sinnvoll, ansehnlich und verständlich (User Interface (UI)) angerichtet sein.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenIn diesem Beitrag möchten wir (ein IT-Unternehmen mit über 20 Jahren Expertenerfahrung) dir 11 Tipps nahelegen, um in deinem nächsten Projekt, durch gutes UI/UX Design, einiges an Entwicklungskosten zu sparen und deinen Umsatz steigern zu können.
Tipp 1: Seine Nutzer kennen
Im ersten Schritt, noch bevor das Produkt designt wird, sollte man seine Zielgruppe kennen, denn nur wenn man seine Nutzer kennt, ist man in der Lage deren Sprache sowohl schriftlich als auch grafisch sprechen zu können. Kennt man seine Zielgruppe und passt das Design an dessen Bedürfnisse an, erhöht sich die Chance, dass aus einem potenziellen Kunden ein wirklicher Kunde wird.
Dazu sollten folgende Fragen beantwortet werden:
– Wer sind meine Nutzer? – Was für verschiedene Nutzergruppen möchte ich mit meinem Produkt erreichen? – Was sind die Ziele meiner Nutzer? – Wie sollen meine Nutzer mit dem Produkt interagieren? – Warum ist das Produkt nützlich für meine Zielgruppe? – Wie mache ich das Produkt nützlich für meine Zielgruppe? Ein Beispiel an der Zielgruppe “LKW-Fahrer”: Ein Produkt soll regelmäßig während der Fahrt genutzt werden, da es die Nutzer, vor z.B. gesperrten Straßen warnen soll. Worauf hier bspw.
Geachtet werden könnte, wäre ein Produkt zu designen, welches die Nutzer nicht von der Fahrt ablenkt, und somit Sicherheit gewährleistet. Außerdem sollte das Produkt in dem Fall bestenfalls zu jeder Tageszeit und bei allen Witterungsbedingungen nutzbar sein. Gehen wir z.B. von einer App aus, würde sich ein eingebauter Darkmode anbieten, sodass der Bildschirm stets gut und schnell erkennbar ist und im Dunkeln nicht blendet. Außerdem sollte z.B. besonderen Wert gelegt werden, dass Nutzer innerhalb kürzester Zeit Warnungen wahrnehmen und dessen visuelle Darstellungen verstehen.
Fängt man an, das Produkt zu designen oder zu entwickeln, ohne sich den Antworten dieser Fragen bewusst zu sein, wird man möglicherweise früher oder später kostspielige Anpassungen am Produkt vornehmen müssen, da das Produkt nicht den gewünschten Erfolg erzielt.
Anhand unseres Beispiels könnte das Produkt sogar eine Gefahr für den Nutzer darstellen. Wenn du diese Fragen nicht alle beantworten kannst, empfehle ich dir, mit einem professionellen UX Researcher zusammenzuarbeiten. Er hilft dir, die richtigen Antworten auf die Fragen, rund um dein zukünftiges Produkt, zu finden.
Wenn du diese Fragen schon beantworten kannst, hilft es im nächsten Schritt, den Designern und Entwicklern diese Fragen in Form von „User Persona“ beantwortet aufzuzeigen. User Persona sind fiktive Darstellungen, der typischen Nutzergruppen, welche die obenstehenden Fragen gezielt beantworten.
Hier ein Beispiel einer User Persona: Quelle: Compose.ly Hier findest du eine der vielen Plattformen, welche kostenlose Templates für User Persona zum Download zur Verfügung stellen.
Tipp 2: Konsistentes Design
Achte darauf, auf allen Web-, App- oder Onlineshop-Seiten wiederverwendbare Designmuster zu nutzen. Das bedeutet, bleibe Seitenübergreifend konsistent bei der Nutzung von: – Farben – Schriftarten und -größen – Formen – Buttons – Icon-Styles – Grafischen Elementen – Bildformaten Der beste Weg ist die Nutzung eines Muster-Dokuments, in welchem alle Designmuster festgelegt sind.
Ein Design mit stets wiederverwendeten Designmustern spart viel Zeit, sowohl im Designprozess, als auch (und vor allem) im Entwicklungsprozess. Kaum etwas macht dem Entwickler-Team mehr Aufwand, als jede einzelne Seite an die individuellen Designmerkmale anzupassen. Vor allem, wenn später die Tester oder gar Kunden das Produkt testen, sich über Unregelmäßigkeiten im Design beschweren und das Design dann wieder angepasst werden muss.
Tipp 3: Das Rad nicht neu erfinden
Besonders künstlerische Designer tendieren teils dazu ihr Design herausstechen zu lassen, indem Sie das Rad neu erfinden wollen. Das Problem daran ist, dass neue Designmuster, die vorher noch nie programmatisch umgesetzt und dokumentiert wurden, alles andere als einfach (oder günstig) zu entwickeln sind. Hier zwei Buttons zum Vergleich: Dieser Button ist „das neu erfundene Rad“ – zwar künstlerisch und auffällig, jedoch unheimlich aufwendig zu entwickeln.
Dieser Button ist ein typischer best practice (= „Erfolgsmodell“) Button – immer noch auffällig genug, erfüllt seinen Zweck und ist vor allem deutlich schneller und günstiger programmatisch umzusetzen.
Tipp 4: Simpel, nutzerfreundlich
Dieser Punkt ist einer der fundamentalsten in Puncto Erfolg des Produkts. Ist ein Produkt nicht verständlich, stehen die Chancen auf den Erfolg gering. Ein gutes Produktdesign folgt daher dem Prinzip „form follows function“ — d.h. ein besonders ästhetisches Design sollte nicht stärker im Fokus stehen, als die Funktionen des Produkts. Es ist eine wichtige Aufgabe des Designers, eine simple und benutzerfreundliche (=intuitive) Aufbau des Produkts zu erstellen. Dies wird hauptsächlich erreicht, durch die Nutzung von: – bekannten Mustern (z.B. die Nutzung herkömmlicher Icons, Formen, Farben, Buttons usw.) – Klaren Hierarchien (vor allem von Schriftgrößen und Inhalten) – Passenden Icons (z.B. Brief-Icon für E-Mail-Adresse oder Haus-Icon für Home) – Passenden Farben (z.B. ist ein roter Button mit der Aufschrift „Weiter“ meist irreführend) Das Ziel sollte sein, dass sowohl Team-Mitglieder als auch Kunden und Endnutzer das Produkt ohne Erklärung auf Anhieb verstehen und bedienen können. Die Kosten für Produkt-Trainings und (interne und externe) Kommunikation aufgrund vieler Verständnisfragen fallen deutlich höher aus, als die Kosten zur Antizipation von Verständnisfragen.
Tipp 5: Hierarchie schaffen, um Nutzer zu leiten
Dieser Tipp ist verbunden mit dem Vorherigen. Er ist der wahrscheinlich Wichtigste in Puncto Nutzerfreundlichkeit. Ein Designer sollte sich zur Aufgabe machen, dass dank klarer Hierarchien selbst ein Kind oder Mensch im höheren Alter in der Lage ist, das Produkt in der gewollten Reihenfolge zu bedienen. Eine schlechte Hierarchie führt dazu, dass Nutzer sich mit dem Produkt nicht zurechtfinden. Dies führt zu Frustration. Sobald der Nutzer frustriert ist, verlässt dieser die Webseite, den Shop, oder die App und wird mit Sicherheit nie wieder zu dessen Oberfläche zurückkehren. Das Produkt ist gescheitert. Das Produkt neu aufzubauen, kann im Nachgang teuer werden. Eine gute Hierarchie kann den Sinn des Produkts optimal darstellen und eine positive User Experience erzeugen. Das ist der ausschlaggebende Faktor dafür, dass Nutzer den Online-Shop wieder aufsuchen oder die Webseite oder App wieder nutzen. Hier ein Vergleich zwischen einer weniger optimalen und einer guten Hierarchie:
Tipp 6: Farb-Emotionen nutzen
Quelle: Hal Gatewood auf Unsplash
Auch durch diesen Design-Tipp wird der Nutzer geleitet. Diesmal primär durch Emotionen. Unterschiedliche Farben lösen unterschiedliche Emotionen aus.
Sind Farben strategisch gut angewandt, hat dies positive Auswirkungen auf den Umsatz eines Unternehmens.
Beispiele für Farbpsychologie:
- Rot – Leidenschaft, Liebe, aber auch Wut und Gefahr -> Diese Farbe zieht die Aufmerksamkeit des Nutzers am stärksten auf sich. Sollte jedoch moderat genutzt werden, um nicht überwältigend zu wirken.
- Orange – Vitalität, Enthusiasmus, Glück -> Ähnlich aufmerksamkeitserregend wie sein Vorgänger, jedoch eher ausgeglichen als aggressiv. Diese Farbe ist perfekt geeignet z.B. für einen Call-To-Action (Button, Link usw.) zum Produktkauf oder Newsletter.
- Gelb – Hoffnung, Energie, Optimismus -> Reflektiert viel Licht und wird daher auch gern zur Generierung von Aufmerksamkeit genutzt. Zu viel davon wirkt jedoch erdrückend.
- Lila – Kreativität -> Wirkt luxuriös und geheimnisvoll, sowie besänftigend und wird daher oft in der Kosmetikbranche genutzt.
- Grün – Gesundheit, Optimismus, Erfrischung -> Am angenehmsten für das Auge und wird daher gern zur Erzeugung von Gleichgewicht und Entspannung genutzt. Vor allem empfohlen für Unternehmen, welche Inspiration, Sicherheit und Wachstum verbinden wollen.
- Blau – Ruhe, Spiritualität, Sicherheit, Vertrauen -> Aufgrund der Ruhe produzierenden Hormone ist blau die beliebteste aller Farben im Design. Dunkelblau steht für Professionalität, hellblau eher für Entspannung und Freundlichkeit.
Dabei greift Farbe nur als ein Baustein ineinander. Ob Nutzer einem digitalen Produkt tatsächlich vertrauen, hängt von einem ganzen System aus Designentscheidungen ab, das weit über die Farbwahl hinausgeht. Mit welchen vier Säulen Sie Vertrauen aufbauen und welche 8 Design-Patterns sich in der Praxis bewährt haben, zeigen wir in diesem Artikel.
Sofern die Farbe passend zum Ziel des Produkts eingesetzt wird, ist sogar eine negative Emotion wie Empörung strategisch schlau, bspw. wenn die Farbe für einen Nachrichten-Beitrag genutzt wird. Es ist wichtig, sich vorab Gedanken zu machen, welche zum Produkt passenden Farben man verwenden möchte.
Der fehlerhafte Einsatz von Farben kann ungewollte Emotionen und damit eine negative Nutzererfahrung erzeugen.
Tipp 7: Echte Inhalte nutzen
Dies ist ein leicht anwendbarer und doch effektiver Tipp. Ein typischer Fehler, welcher im Entwicklungsprozess stets zu Mehraufwand führt: die Nutzung von Platzhalter-Inhalten für Bilder und Texte.
Platzhalter-Bilder oder „Lorem Ipsum“-Texte zu verwenden, beschleunigt den Designprozess leicht. Der Designer baut das Design, ausgehend von ein paar Zeilen „Lorem Ipsum“-Textbausteinen und mehr oder weniger zufällig großen Bildern. Die Inhalte werden erst später im Designprozess oder in der Entwicklung eingebaut. Wenn die Maße der „Lorem Ipsum“-Texte und Bildgrößen nicht genau den Maßen der Texte, Überschriften, Button-Inhalte, Bilder usw. entsprechen, müssen im Nachhinein Anpassungen vorgenommen werden.
Je später dies geschieht, desto teurer kann es werden (durch z.B. zusätzliche Entwicklungskosten und Tests).
Daher sollte sich so früh wie möglich um die Bild- und Text-Inhalte gekümmert werden. Bestenfalls sollten diese vollständig bereit liegen, bevor das Produkt designt wird.
Tipp 8: Discovery Phase nutzen
Dieser Tipp ist vor allem für größere oder kompliziertere Projekte immens hilfreich. Er geht einher mit Tipp 10. Große, technisch komplizierte Projekte benötigen meist tiefe Recherche und Vorarbeit, bevor das Design konzipiert werden kann. Das Ganze noch bevor es überhaupt zum Vertragsabschluss gekommen ist. Denn potenzielle Kunden mögen es, wenn man schon Lösungen für deren Probleme präsentiert, bevor das Projekt richtig begonnen wird. Die sogenannte Discovery Phase ist aus Sicht des entwickelnden Unternehmens nützlich, um so wenig wie möglich unbezahlten Aufwand zu haben. Aus Sicht der Kunden ist diese Phase nützlich, da für vergleichsweise wenig Geld offene Fragen geklärt und wichtige funktionelle Lösungen gefunden sowie visuelle Lösungsansätze ersichtlich gemacht werden können.
Tipp 9: Der richtige Design-Workflow
Ein weiterer entscheidender Faktor in der erfolgreichen Entwicklung eines digitalen Produkts ist der richtige Design-Workflow. Mit Sicherheit wird es zu Mehrarbeit und Unkosten in der Entwicklung des Produkts kommen, wenn der Workflow nicht richtig beachtet wird. Wir empfehlen den folgenden Workflow:
1. Wireframe
Das sogenannte Wireframe ist ein grobes Design, welches alle Funktionalitäten durchdacht aufzeigt. Auch das Layout sowie die Position der Elemente (Buttons, Bilder, Texte usw.) werden schon widergespiegelt. Das Wireframe wird i.d.R. erst auf Blatt und Papier skizziert und anschließend in Wireframe-Designprogrammen, wie z.B. balsamiq, digital gebaut.
Bestenfalls sollten schon in diesem Schritt sämtliche Funktionalitäten und Abläufe des Produkts aufgezeigt werden.
Denn generell gilt: Je fortgeschrittener im Workflow (= Arbeitsprozess), desto aufwendiger sind die Anpassungen. Daher sollte man auf keinen der Schritte verzichten.
2. Design
Nun kann ausgehend vom Wireframe das Produktdesign detailliert im passenden Designprogramm (wir empfehlen Figma, aus diversen Gründen – siehe Tipp 11) gebaut werden. In diesem Schritt werden die finalen Elemente, Formen, Bilder, usw., festgelegt und schon zentimetergenau platziert.
3. Klickbarer Prototyp
Als Nächstes kann ausgehend vom Design der Prototyp erstellt werden (bspw. auch im Figma). Der klickbare Prototyp wird frei von programmatischer Umsetzung, von den Designern erstellt.
Durch die Verknüpfung der einzelnen Seiten, Links und Funktionalitäten, sowie durch die Einstellung von Animationen und Seiten-Übergängen wird dem bis dato statischem Design Leben eingehaucht.
Wenn man sich vorher noch kein Feedback der Kunden eingeholt hatte, wäre nun der perfekte Zeitpunkt. Nachdem der Kunde den Prototypen absegnet hat, kann dieser an die Entwicklung weitergegeben werden.
Befolgt man diese Reihenfolge, werden potenzielle Unkosten deutlich unwahrscheinlicher.
Tipp 10: Bugs zu vermeiden ist günstiger als diese zu fixen
Folgt man den Tipps 1–9 wird das Risiko auf Bugs minimiert. Noch hinzuzufügen wäre: Es ist günstiger, lieber vor der Entwicklung mehr Zeit in das Testen des Designs zu investieren, anstatt später Änderungen an der entwickelten Variante vornehmen zu müssen. Die Arbeit von Designern ist im Regelfall günstiger, als die der Entwickler. Vor allem das Beheben von Bugs in der Grundstruktur (bspw. Grundfunktionen oder Layout) des Produkts könnte teuer werden.
Tipp 11: Ein interaktives Design-Tool nutzen
Mittlerweile gibt es bei einigen Designprogrammen Funktionen, die den Workflow im gesamten Team optimieren. Vor allem interaktive Design-Programme sind besonders effektiv. Wie vorhin angemerkt, empfehlen wir die Nutzung von Figma. Das auf Teamarbeit ausgerichtete Programm ist ein Design-Alleskönner: von der Möglichkeit des groben Wireframe-Designs, über das detaillierte Design, bis zum Bau des klickbaren Prototyps, kann alles, einfach und intuitiv gemacht werden.
Figma verfügt des Weiteren über eine Entwickler-Ansicht , durch welche das Entwicklerteam alle notwendigen CSS-Codes für verschiedene Betriebssysteme direkt einsehen und verwenden kann. Ein weiteres nettes Feature ist, dass die Arbeit mit dem ganzen Team und Kunden geteilt werden kann. Man kann gleichzeitig gemeinsam am Projekt arbeiten und in Echtzeit Feedback geben und einarbeiten. Der Fakt, dass Figma neben der Top-Funktionalität kostenlos ist, lässt unserer Meinung nach, alle anderen Programme alt aussehen.
Fazit
Abschließend lässt sich sagen, dass diese Tipps aus unserer jahrelangen Erfahrung in der Erstellung von mobilen Apps, responsiven Webseiten und Onlineshops resultieren. Über die Jahre ist unsere Arbeit dank der Nutzung dieser Tipps immer effizienter geworden. Die wohl wichtigste Message, die wir dir mitgeben können, ist: Je weiter ein Projekt fortgeschritten, desto aufwendiger sind die Anpassungen.
