{"id":2290,"date":"2023-07-12T16:39:44","date_gmt":"2023-07-12T14:39:44","guid":{"rendered":"https:\/\/www.webmen.de\/blog\/?p=2290"},"modified":"2024-01-11T10:19:05","modified_gmt":"2024-01-11T09:19:05","slug":"user-inyerface-ein-ungewoehnlicher-weg-etwas-ueber-user-experience-zu-lernen","status":"publish","type":"post","link":"https:\/\/www.webmen.de\/blog\/2023\/07\/12\/user-inyerface-ein-ungewoehnlicher-weg-etwas-ueber-user-experience-zu-lernen\/","title":{"rendered":"User Inyerface – Ein ungew\u00f6hnlicher Weg, etwas \u00fcber User Experience zu lernen"},"content":{"rendered":"\n

User Interface, User Experience und Design Patterns \u2013 viele haben diese Begriffe schon einmal geh\u00f6rt, aber viele weniger wissen etwas damit anzufangen. Im Internet gibt es viele unterschiedliche Seiten, die aufz\u00e4hlen, worauf man zu achten hat und was gerade der Standardweg ist. Die Website User Inyerface, die wir euch in diesem Blog-Post kurz vorstellen, hat allerdings eine unkonventionelle Herangehensweise gew\u00e4hlt. <\/p>\n\n\n\n

Die Website userinyerface.com<\/a> hat es sich zur Aufgabe gemacht, ihren Nutzer:innen etwas \u00fcber User Experience beizubringen. Und zwar in Form eines Spiels.<\/p>\n\n\n\n

Das Ziel ist simpel: So schnell wie m\u00f6glich ein vierteiliges Formular ausf\u00fcllen. Klingt erstmal gar nicht so schwer. Allerdings wurde sehr darauf geachtet, jedes Element aus User Experience-Sicht so schlecht wie m\u00f6glich umzusetzen.<\/p>\n\n\n\n

Worst Case mit Lerneffekt f\u00fcr User Experience<\/h2>\n\n\n\n

So ist auf der ersten Seite, noch bevor das Spiel startet, schon die erste H\u00fcrde zu finden:<\/p>\n\n\n\n

\"Das
Die erste H\u00fcrde bietet auch schon die erste Lektion. Hier lernt man anders als sonst.<\/figcaption><\/figure>\n\n\n\n

Welches der f\u00fcnf Elemente muss man dr\u00fccken, um das Spiel zu starten? Hier lernt man schon die erste Lektion:<\/p>\n\n\n\n

1. Ein gutes User Interface sollte einfach gehalten<\/strong> werden. Man sollte darauf achten, unn\u00f6tige Elemente zu vermeiden. Zudem sollten die Elemente, die gezeigt werden, einen ganz klaren Nutzen haben.<\/p>\n\n\n\n

Hat man nun den ersten Schritt geschafft, f\u00e4ngt das Spiel an. Die Zeit beginnt zu laufen und man wird mit der n\u00e4chsten Aufgabe konfrontiert: Ein Passwort und eine Mail-Adresse eingeben.<\/p>\n\n\n\n

\"Der
Das Spiel hat begonnen, die Zeit l\u00e4uft. Wie schnell kann man das komplette Formular ausf\u00fcllen?<\/figcaption><\/figure>\n\n\n\n

Was bei anderen Seiten kinderleicht ist, wird bei User Inyerface schon zu einer kleinen Herausforderung. Zu der schlechten Implementierung der Textfelder kommen noch die Verneinung im Text der Nutzerbedingungen und die fragw\u00fcrdigen Entscheidungen bei der Anordnung und F\u00e4rbung der Kn\u00f6pfe.<\/p>\n\n\n\n

2. Die strategische Nutzung von Farben <\/strong>ist wichtig bei einem guten User Interface. Die Aufmerksamkeit kann von Farben gelenkt werden. Soll ein Element hervorstehen, zum Beispiel der \u201eWeiter\u201c-Button, dann kann er eingef\u00e4rbt werden, um sich so von der Umgebung und anderen Kn\u00f6pfen abzusetzen.<\/p>\n\n\n\n

3. Immer an den Standard denken<\/strong>. Wenn eine Sache schon von tausenden Webseiten auf die gleiche Weise gemacht wird, dann kann es ja nicht schlecht sein. Au\u00dferdem erkennen die Nutzer:innen das Muster wieder und wissen, wie sie damit umgehen m\u00fcssen, um das gew\u00fcnschte Ziel zu erreichen.<\/p>\n\n\n\n


Falls man zu lange an dem Formular h\u00e4ngt, kommt Pop-Up Fenster, was einen daran erinnert, dass die Zeit l\u00e4uft.<\/p>\n\n\n\n

\"Das
Gut gestaltete und nicht nervige Pop-Ups sucht man hier vergebens.<\/figcaption><\/figure>\n\n\n\n

Hier greifen die drei Lektionen, die wir bisher schon gelernt haben. Vom Standard her w\u00fcrde man auf den Knopf oben rechts klicken, da sich dort meistens der Knopf zum Schlie\u00dfen eines Pop-Ups befindet. Die gr\u00fcne Farbe lenkt den Blick aber zu dem gro\u00dfen Knopf in der Mitte. Bis man dann unten links das \u201eCopyright\u201c C entdeckt und sich erst mal nichts weiter denkt, dann aber doch das Wort \u201eClose\u201c liest.<\/p>\n\n\n\n

Fazit<\/h2>\n\n\n\n

Fassen wir die gelernten Punkte noch einmal als kurze Handlungsempfehlungen f\u00fcr UX bei Formularen zusammen:<\/p>\n\n\n\n