Einführung in das UX-Design: Usability-Grundlagen für UX/UI-Designer (+Figma-Wireframe-Übung)

1. Promo: [MUSIK] Heute werden wir etwas über Usability-Prinzipien lernen. In diesem Kurs kombiniere ich Konzept- und reale Beispiele, um sicherzustellen , dass Sie sie sofort auf Ihre Designs und Wireframes anwenden können . Wir werden erfahren, warum reale Referenzen die Grundlage für Ihr Setup sind, welche mentalen Modelle sind und wie sie erstellt werden. Ich stelle Ihnen Schlüsselprinzipien wie Jacobs Law, Hicks Law vor und sage Ihnen, warum Vier die magische Zahl ist. Wir werden etwas über Konsistenz, Systemstatus und warum Entwirrung entscheidend ist, erfahren. Ich zeige Ihnen gängige Scanmuster, die Ihr Design auf eine andere Ebene bringen. Schließlich werden wir uns mit einem der wichtigsten, aber oft vernachlässigten Themen wie UX-Design, Fehlervermeidung und Fehlerbehandlung befassen der wichtigsten, aber oft vernachlässigten Themen UX-Design, , um sicherzustellen, dass Ihre Benutzererfahrung reibungslos läuft, egal was passiert. Am Ende erzähle ich Ihnen das kleine Geheimnis darüber warum Social Media so süchtig macht. Dieser Kurs ist für Sie, wenn Sie ein absoluter Anfänger oder ein erfahrener Designer sind und Ihre UX-Fähigkeiten verbessern möchten . Dies ist eine Klasse von molearning.io. 2. Entformungs: Was ist UX/UI-Design?: Bitte beachten Sie, dass es sich um einen zweiteiligen Kurs handelt. Vielleicht sehen Sie sich entweder den Teil über UX-Prinzipien oder den Teil über UI-Prinzipien an, idealerweise kombinieren Sie die beiden. Auf jeden Fall möchte ich sicherstellen, dass Sie sich über die beiden verschiedenen Begriffe im Klaren sind und was es bedeutet, sie zu kombinieren. Sobald Sie tiefer in die Welt von UX/UI eintauchen, werden Sie feststellen, dass es viel Lärm und Diskussionen über diese Begriffe gibt. Was genau sie beinhalten, ob UX und UI in einem Begriff kombiniert werden sollten oder nicht. Lassen Sie mich das aus meiner Sicht und Erfahrung beleuchten . Zweifellos ist UX Design der Ort, an dem Sie die Reise beginnen werden. Was beinhaltet das UX-Design? Kurz gesagt, Sie werden versuchen, allgemeine Muster, Verhalten und Erwartungen zu verstehen . All dies, um eine Gesamtstruktur und Reihenfolge der Funktionsweise des Produkts zu schaffen. Als Ergebnis hätten Sie normalerweise eine Art Skelett und eine Form von Drahtrahmen und Flussdiagrammen, die ein Produkt oder Feature beschreiben, das Sie vorschlagen. Eine weitere sehr wichtige Aufgabe des UX-Designs ist das Testen und Iterieren während des gesamten Lebenszyklus eines Produkts. Es gibt nie fertige Online-Produkte. Während die Benutzererfahrung, wie der Name sagt, versucht, die Gesamterfahrung des Benutzers zu verbessern, befasst sich das Design der Benutzeroberfläche mit den tatsächlichen Layoutelementen. Jetzt werden das zuvor entworfene Flussdiagramm und die Drahtrahmen lebendig. Ein guter UI-Designer hat normalerweise eine hervorragende Vorstellung davon was während des UX-Prozesses passiert und umgekehrt. Während des UI-Prozesses definieren Sie dann Styleguides, Farbe, Typografie, Komponenten und das allgemeine Layout für alle responsiven Designs. Sie werden höchstwahrscheinlich einen Prototyp erstellen , der getestet wird, wo Sie wieder auf das UX-Design verlinken. So wie wir Hand in Hand von UX zu UI arbeiten, müssen Sie dasselbe von der Benutzeroberfläche bis zur Entwicklung tun. Wenn es um die Entwicklung geht, hören Sie von zwei Hauptteilen. Front-End-Entwicklung, bei der CSS und HTML, das sogenannte Markup, geschrieben werden, und hier wird die Schnittstelle erstellt, die wir sehen. Das ist es, was uns als UI-Designer interessiert. Dann gibt es das sogenannte Back-End. Hier wird der Code geschrieben. Das könnte JavaScript, Java, Python oder jede andere Sprache sein. Es stört uns als Designer nicht wirklich. Hier passiert die ganze Logik hinter den Kulissen. Wir, UI-Designer, haben selten viel damit zu tun. Front-End und Back-End sind offensichtlich verbunden und es könnte Frameworks geben , die sich mit Front-End wie ReactJS befassen. Aber all das kann sicher dem Entwicklungsteam überlassen werden . Sie müssen sich nicht selbst programmieren. Sie sollten jedoch technische Anforderungen und Grundprinzipien des Front-End-Designs als UI-Designer verstehen . Dies hilft Ihnen dabei, Ihre Dateien und Designs richtig einzurichten . Jetzt, in einem großen Unternehmen oder einem geschäftigen Projekt, Sie sich möglicherweise nur mit dem UI-Design. Du könntest einfach Designs in Figma einrichten und das war's. Sie werden jedoch immer noch Überschneidungen mit UX-Design sowie mit der Entwicklung haben und müssen Ihre Grundlagen kennen. Möglicherweise arbeiten Sie auch nur als UX-Designer. In diesem Fall werden Sie höchstwahrscheinlich keine Designarbeit verrichten, aber Sie werden mit Recherchen, Strategien und Tests sowie der Definition neuer Funktionen beschäftigt sein . Sie müssen sich jedoch immer noch darüber im Klaren sein, wie sich Entscheidungen im Interface-Design auf die Benutzererfahrung auswirken und beeinflussen werden . Wenn Sie in tiefer Benutzerforschung arbeiten, tun Sie das vielleicht tatsächlich, aber normalerweise haben Sie so viel Glück und sagen ab und zu dem Designer Hallo. In einigen Fällen, insbesondere in kleineren Unternehmen oder freiberuflichen Projekten, können Sie jedoch insbesondere in kleineren Unternehmen oder freiberuflichen Projekten, viele Hüte tragen. Wenn wir über das UX/UI-Design sprechen, ist es normalerweise diese Art von Bereich, den Sie hier hervorgehoben sehen. Sie werden wahrscheinlich mit einigen Recherchen beginnen, Personas einrichten und Ihre eigenen Wireframes einrichten. Sie übersetzen diese Wireframes dann in Design und geben sie an die Entwicklung weiter. Die meisten UX/UI-Designer verlieren in der Regel einen Teil des vertieften Teils des UX-Designs. Das stimmt. Bei unkomplizierten kleineren Projekten ist es jedoch keine große Sache. Dies ist auch der Bereich, mit dem ich mich während dieser beiden Kurse beschäftigen werde . Bitte beachten Sie, dass eingehende UX-Recherchen nicht Teil dieses Kurses sind. Es stimmt, dass in einigen Stellenausschreibungen der Begriff UX und UI oft verwirrt sind. Möglicherweise wird UX Design beworben, aber sie bitten Sie , alles einzurichten, von Wireframes bis zur Fertigstellung von Handle-Dateien. Wenn Sie jemals Zweifel haben, zeichnen Sie einfach dieses einfache Diagramm hier auf ein Blatt Papier und zeigen Sie Ihrem potenziellen Kunden oder Mitarbeiter, wo Sie arbeiten , und stellen Sie sicher, dass dies der Bereich ist, nach dem er ebenfalls gesucht und nicht nur ein Schlagwort, das sie benutzten. Seien wir auch ehrlich, es ist normalerweise kein einfacher Prozess bei dem die Dinge weitergegeben werden. Auch in den meisten Unternehmen beabsichtigen sie nicht einmal, dass es so ist. Sie werden immer viel und Her und Her geben und viel diskutiert werden. Das ist eigentlich eine gute Sache, denn nur wenn UX, UI und Entwicklung Hand in Hand arbeiten, wirklich großartige Produkte lebendig. Hör nicht auf die Pförtner. Finden Sie Ihre Leidenschaft und genießen Sie die Überschneidung und Lernen aus verschiedenen Bereichen des digitalen Designs. 3. EINFÜHRUNG: Heute werden wir die wichtigsten UX-Designprinzipien sehr praktisch betrachten , damit Sie sie sofort für Ihr Drahtgitter und Designs verwenden können . Jetzt basieren die Prinzipien, die ich Ihnen heute vorstellen werde , auf den berühmten Nielsen Usability Heuristics sowie meiner eigenen Erfahrung mit über 10 Jahren UX, UI-Design und vielen Büchern und vielen Büchern und recherche. Bevor wir anfangen, wollte ich eine Sache erwähnen. Es wird immer viel darüber diskutiert, ob UX, UI eine Sache Hand in Hand oder zwei vollständig getrennte Aufgaben sind. Ich bin fest davon überzeugt, dass Benutzeroberfläche, Benutzererfahrung sowie Front-End-Entwicklung eine große Liebesgeschichte sind und überhaupt kein Fan von Gatekeeping. In diesem Kurs stellen Sie wirklich fest, dass wir uns mit den Bereichen beschäftigen, in denen sich UX- und UI-Design überschneiden. Obwohl Sie in Ihrer Arbeit wahrscheinlich ein Hauptaugenmerk haben werden. Am Ende liefern wir dem Benutzer ein Produkt. Wenn das für Sie ist, werden wir uns gemeinsam mit den folgenden Themen befassen. Wir werden uns reale Referenzen ansehen und warum sie mentale Modelle erstellen. Wir werden über Jakobs Gesetz und andere Seiten sprechen. Konsistenz ist entscheidend, Hicks Gesetz und die Entscheidungen der Beschränkung. Warum ist die magische Zahl wirklich vier? Seitenpositionierungs- und Scanmuster. Wir sprechen über Feedback und Systemdaten , Fehlerbehandlung, Fehlervermeidung und am Ende werde ich Ihnen ein wenig über das magische Ding namens Dopamin erzählen . 4. Echte World und Mentale Modelle: Obwohl wir digitale Produkte entwerfen, sind reale Referenzen von entscheidender Bedeutung. Reale Referenzen sind ein großes Thema in der sogenannten Nielsen-Heuristik. Im Grunde heißt es, dass die Übereinstimmung zwischen dem System und einer realen Konvention für die Logik und das Verständnis notwendig ist . Wenn wir sagen, dass wir auf die reale Welt verweisen, geht das viel weiter als nur die Verwendung bekannter Symbole. Bereits 1943, lange vor dem Internet und den normannischen Heuristiken von Nielsen, schrieb Kenneth Craig, Philosoph und Psychologe, Philosoph und Psychologe, die Art der Erklärung, in der er über etwas sprach genannt mentales Modell. Ein mentales Modell ist im Grunde die Vorstellung, wie etwas funktionieren wird. Menschen erstellen mentale Modelle, die auf früheren Erfahrungen basieren , und speichern sie wie ein Konzept in ihrem Kopf. Sie erwarten, dass neue und ähnliche Erfahrungen dem gleichen Muster folgen werden. Wenn es ein Missverhältnis zwischen einem mentalen Modell und dem sogenannten konzeptionellen Modell des Produkts gibt, das Sie erstellen, werden die Benutzer es zunächst nicht wirklich verstehen oder sich sehr anstrengen um dies zu tun, und im schlimmsten Fall können sie es einfach ablehnen. Wenn es Ihnen jedoch gelingt diese vertrauten Muster aufzudecken, die normalerweise durch Recherchen oder Untersuchungen erfolgen, können Sie sie verwenden und einen reibungslosen Übergang zwischen dem Mentalen und dem konzeptionelles Modell. Sie werden nicht identisch sein, und das ist in Ordnung. Sie werden etwas von dem Alten verlieren und etwas Neues hinzufügen, aber Sie haben diesen vertrauten Kern, auf dem Sie aufbauen können. Ein gutes Beispiel dafür ist ein Registrierungsprozess. Das hättest du vielleicht schon mal gehabt. Sie laden eine App herunter und das erste, was Sie erhalten, ist ein Registrierungsbildschirm, auf dem Sie alle Informationen und manchmal sogar Ihre Kreditkartendaten ausfüllen alle Informationen und manchmal sogar Ihre können, bevor Sie überhaupt eine einzige gesehen haben Sache. Wie hast du dich dadurch gefühlt? Stellen Sie sich vor, Sie gehen in einen Laden und der Tür, bevor Sie überhaupt betreten, werden Sie angehalten. Sie werden gebeten, Ihre persönlichen Daten einzugeben und Ihre Kreditkartennummer anzugeben. Sie werden Ihnen sagen, dass sie es sehen wollen , nur für den Fall, dass alles abgedeckt ist, falls Sie sich später für den Kauf entscheiden. Sie werden das wahrscheinlich etwas seltsam und unbequem finden , und ehrlich gesagt, einfach unnötig. Weil es in Ihrem mentalen Modell so funktioniert, betreten Sie einen Shop, schauen sich um und wählen ein Produkt aus. Sobald Sie sich für dieses Produkt entschieden haben, entscheiden Sie sich, in unserem Fall zu bezahlen oder sich zu registrieren , um dann Ihnen gewählte Produkt oder Ihre Dienstleistung zu erhalten. Es ist ein viel natürlicherer Ansatz Registrierung in einem Online-Shop zu veranlassen , sobald sich ein Benutzer entschieden hat, etwas zu kaufen oder zu testen. Um bei unserem Shop-Beispiel zu bleiben, ist es wichtig zu beachten, dass das mentale Modell nicht nur strenges Verhalten ist, sondern auch soziale Regeln, die wir gelernt haben. Wenn ich ein Geschäft betritt und die Verkäuferin beschäftigt ist, nicken sie mir wahrscheinlich schnell oder lächeln, nur um mich wissen zu lassen, dass sie mich gesehen haben und sie gerade beenden, was sie tun. In unserem Online-Shop könnte dies in einen einfachen Fortschrittsbalken übersetzt werden , während unsere Inhalte noch geladen werden. Dies ist das Gleiche für Formulare, die bereits ausgefüllt sind, Sachen, die in meinen Warenkorb gelegt wurden, und dann etwas anderes angeschaut haben. Ich erwarte, dass das in Erinnerung bleiben sollte , nur weil ich im wirklichen Leben gelernt habe, dass es so funktioniert. Stellen Sie außerdem sicher, dass Sie anstelle von technischer Terminologie reale Sprache verwenden. Anstatt zum Absenden zu klicken, benutze etwas wie, kaufe jetzt. Wenn Ihre Inhalte zu wertvoll sind, geben Sie den Leuten wenigstens einen kleinen Blick. Sie sehen, dass Sie bei vielen Nachrichtenportalen die Schlagzeilen durchsuchen können, aber um weiter zu lesen, werden Sie aufgefordert, eine Mitgliedschaft zu kaufen oder anderweitig zu bezahlen. Überraschung, wie ein echter Kiosk. Jetzt ist es wichtig anzumerken, dass die Verwendung von realen Konventionen nicht bedeutet, reale Nachahmung zu machen. Wie Sie an unserem Shop-Beispiel gesehen haben, verwenden wir nur das mentale Modell. Wir erstellen ein Geschäft nicht in seinem ganzen Look and Feel online nach. Stellen Sie außerdem sicher, dass die gewählten Muster auf soliden Forschungen und Tests basieren . Das kann ich nicht genug betonen. niemals davon aus, dass Ihr Verständnis oder mentales Modell mit dem des Benutzers übereinstimmt . Manchmal haben Sie jedoch möglicherweise Ihre Gründe, diese Konventionen zusammen über Bord zu werfen, oder Ihr Produkt ist möglicherweise so radikal neu, dass Ihre Forschung zeigt, dass es nicht wirklich gibt ein starkes mentales Modell, auf dem man aufbauen kann. In diesem Fall erstellen Sie im Grunde ein neues mentales Modell. Dies geschieht normalerweise durch Training. Training könnte etwas ganz Einfaches sein, wie Onboarding-Bildschirme oder Video-Tutorials. Das könnte etwas ganz Kleines oder ein Intensivkurs sein. Sie verwenden weiterhin Elemente wie die Sprache des Benutzers, sozialen Regeln und bestimmte eingebettete mentale Modelle. Wie immer ist alles möglich, aber Sie müssen sich des Pfades bewusst sein , für den Sie sich entwerfen. Um zusammenzufassen, verwenden Sie reale Referenzen. Gestalten Sie auf bestehenden mentalen Modellen. Referenzen aus der realen Welt bedeuten nicht , die reale Welt nachzuahmen. Wenn es kein zugrunde liegendes mentales Modell gibt, sollten Sie den Benutzer trainieren, erziehen und an Bord gehen, um ein mentales Modell zu erstellen. 5. Jakobs Gesetz – andere Seiten: Neben Realworld sind andere Websites und Apps der Hauptort, an dem Menschen mentale Modelle darüber erstellen wie die Dinge funktionieren sollen. Jakobs Gesetz, das von Jakob Nielsen geprägt wurde, besagt, dass Benutzer die meiste Zeit auf anderen Websites verbracht haben. Daher bevorzugen sie, dass Ihre Website genauso funktioniert wie jede andere Seite, an die sie bereits gewöhnt sind. Nehmen wir an, ich bitte Sie, eine Person auf Facebook oder LinkedIn oder einer ähnlichen neuen Community-Seite zu finden . Sie haben diese Seite noch nicht benutzt, haben aber wahrscheinlich immer noch nach einer Suchleiste gesucht. Sie würden ungefähr wissen, wie es aussehen würde, nämlich einen Ort zum Tippen und eine Schaltfläche zum Aufrufen der Suchaktion. Manchmal benötigen Sie diese Schaltfläche möglicherweise nicht einmal, da Sie bereits erfahren haben, dass Sie „Enter“ drücken, um die Suche zu aktivieren. Jetzt bitten wir deine 90-jährige Oma, das Gleiche zu tun. Die Chancen stehen gut, dass Sie sich wohler und viel schneller bei Erledigung der Aufgabe fühlen, da Ihnen alles bereits vertraut ist. Wenn alle Websites einer bestimmten Konvention folgen, Sie diese Konvention jedoch an zu vielen Stellen auf Ihrer Seite aktivieren, bitten Sie den Benutzer, ziemlich viel Zeit zu verpflichten , um herauszufinden, wie die Dinge sind arbeiten. Verwandeln Sie Ihre Benutzer nicht ohne Grund in eine 90-jährige Oma. Werfen wir einen Blick auf eine typische Struktur. Normalerweise beginnen wir mit der Kopfzeile, die Informationen wie das Logo enthält , und übrigens haben wir gelernt, dass wir immer wieder nach Hause zurückkehren, wenn wir auf dieses Logo klicken . Außerdem wird der Benutzer Navigation in der Kopfzeile suchen, Dinge wie ein Suchsymbol, Anmeldeschaltflächen, Sofortkauf-Buttons und zum Auschecken und natürlich würden sie erwarten Dinge wie das Ändern der Sprache für die ganze Seite als Feature in der Kopfzeile. Sie müssen das alles offensichtlich nicht in Ihren Header legen , wenn es nicht relevant ist. Wenn Sie irgendwo auf Ihrer Seite ein kleines Produkt verkaufen , benötigen Sie keine Checkout-Schaltfläche in Ihrer Kopfzeile. Manchmal sehen Sie möglicherweise auch, dass Personen Kontaktinformationen oder etwas hinzufügen Kontaktinformationen oder , um einen Videoanruf an die Kopfzeile einzurichten. Wenn dies der Hauptzweck ihres Geschäfts ist, ist dies wirklich wichtig, um es in der Kopfzeile zu haben. Sie können damit spielen, aber Sie sollten sich an die Grundregeln halten. Direkt unter der Kopfzeile finden wir normalerweise einen Bereich, der unser Hero-Bereich oder unser Hauptintro genannt wird . Was das bedeutet, kommuniziert es die Grundidee Ihrer Seite. Dies ist der Ort, um wirklich zu glänzen, Ihre Idee, Ihr Produkt oder Ihre Dienstleistung zu erklären , und Sie werden auch einen Aufruf zum Handeln anbieten , in dem Benutzer aufgefordert werden, in diesem Bereich zu kaufen oder sich anzumelden. Dies ist auch der richtige Ort, um wild zu werden. Hier kannst du wirklich kreativ sein. Sie können Videos haben, Animationen haben, Sie können einfach erstaunliche Bilder oder Texte haben, aber dies ist der Ort, an dem Ihre Marke live kommt. Unterhalb des Hero-Abschnitts findest du den Inhalt. Dies sind alle Details, alle Informationen und alles, worüber Sie dem Benutzer erzählen möchten . Auch hier folgen wir immer noch Jakobs Gesetz. Das heißt, wenn ich einen Text habe und ein Wort im Text unterstreiche, wird der Benutzer davon ausgehen, dass ich darauf klicken kann und es ist ein Link. Wenn ich ein Akkordeon zeige, erwarte ich, dass es sich öffnet und schließt. Formulare, die Benutzer versuchen auszufüllen und so weiter. Mein Rat wäre, sich an diese grundlegenden Regeln des erlernten Verhaltens sowie eine solide visuelle Hierarchie zu halten diese grundlegenden Regeln des erlernten Verhaltens . Innerhalb dieser Grenzen können Sie wirklich tun, was Sie wollen. Ganz am Ende Ihrer Seite finden Sie die Fußzeile. Die Fußzeile ist immer das letzte Element. Hier sehen Sie, wie mächtig Jakobs Gesetz ist, da Benutzer immer Dinge wie Kontaktdaten oder Informationen erwarten , die sie ganz am Ende in der Fußzeile nicht gefunden haben. Die meiste Zeit scrollen sie einfach nach unten, wenn sie zum Beispiel nach Ihrem Standort suchen. Aus diesem Grund ist es normalerweise eine gute Idee, Google Maps direkt oben in der Fußzeile hinzuzufügen . Dies ist auch ein großartiger Ort, an dem Leute nach Links zu Seiten wie Stellenausschreibungen über den Abschnitt suchen wie Stellenausschreibungen über , falls Sie dies nicht in Ihre Kopfzeile aufgenommen haben und natürlich Links zu Seiten wie als AGB und Impressum. Das heißt nicht, dass Sie diese Konventionen nicht brechen oder mit diesen Konventionen spielen oder etwas völlig Neues erfinden können. Du solltest sie sogar zerbrechen, sonst wären alle Seiten gleich. Aber tun Sie dies mit Überlegungen und Zweck für Ihre Benutzerbedürfnisse. Verschieben Ihres Einkaufswagens und der Suchleiste unten links ist vielleicht nicht so revolutionär, sondern einfach verwirrend. Bevor wir fertig sind, schauen wir uns ein Beispiel aus dem wirklichen Leben an. Hier haben wir die Slack-Website und Sie können sehen, dass hier der Header ist und zum Beispiel mit Verkäufen sprechen und kostenlos als Hauptmenüpunkte ausprobieren. Du siehst, das kannst du wirklich begraben. Dann hier haben wir unsere großen Heldenabschnitte, in denen wir sehen, was Slack ist, wir werden erneut Call to Action bekommen, um es auszuprobieren oder uns anzumelden und wenn wir nach unten scrollen, bekommen wir den Inhalt und wir können sehen, dass es wirklich schön Animationen, die verschiedene Funktionen erklären. Hier haben wir kleine Tutorials, wie man loslegen kann, und wir beenden hier unten mit der Fußzeile, wo wir wieder Links zu allen wichtigen Teilen der Seite haben . Lasst uns zusammenfassen. Benutzer verbringen mehr Zeit auf anderen Seiten und erwarten daher, dass Ihre Website wie jede andere funktioniert. Verwenden Sie Muster, an die Benutzer gewöhnt sind. Diese Muster können strukturell sein, wie die Seitenstruktur oder das Gesamtlayout, sowie verhaltensbedingt. Zum Beispiel sind diese Schaltflächen anklickbar. Zögern Sie nicht, diese Muster zu brechen, aber tun Sie dies mit Überlegung und Zweck auf die Bedürfnisse Ihrer Benutzer. 6. Konsistenz ist der Schlüssel: Konsistenz ist ein Schlüsselprinzip des UX-Designs. Konsistenz bedeutet, dass dieselben Wörter, Elemente und Aktionen dasselbe bedeuten und denselben Konventionen folgen müssen, bedeuten und denselben Konventionen folgen müssen um für den Benutzer vorhersehbar und erlernbar zu sein . Es gibt zwei Arten von Konsistenz im UX-Design: interne und externe Konsistenz. Ein Beispiel für eine externe Konsistenz eine erlernte Konvention in Ihrem Bereich. Wie in einem Geschäft würden Sie einen kleinen Einkaufswagen sehen und erwarten, einen kleinen Einkaufswagen sehen und dass Sie dort Ihre gespeicherten Waren finden. Eine Schaltfläche, von der Sie erwarten, dass er anklickbar und umsetzbar ist. Ein Burger-Menü, um Ihnen mehr Menüoptionen zu zeigen. Außerdem haben wir, wie wir aus dem Jacobs-Gesetz wissen, nicht nur gelernt, was sie tun, sondern auch gelernt, wo wir sie erwarten können. Wie der Einkaufswagen und unser Burger-Menü würden wir erwarten, dass dies irgendwo in der rechten oberen Ecke in unserer Navigation zu finden ist. Jetzt befasst sich die interne Konsistenz dagegen mit allem, was wir auf unserer eigenen Website und unserer eigenen Marke entwerfen . Zum Beispiel haben Sie eine Schaltfläche, bei der Sie eine bestimmte Highlight-Farbe gewählt haben In diesem Beispiel verwenden wir eine Orange als Hervorhebungsfarbe, daher bringen wir unseren Benutzern hier etwas bei. Wir verknüpfen die Farbe im Grunde mit einer Aktion Wenn Sie also dieses Orange jetzt für eine Überschrift verwenden würden , die nicht anklickbar ist, wird es den Benutzer verwirren und wir würden auch die Stärke verringern von dieser Signalfarbe Bedeutung. Wenn Sie es jedoch für einen Link innerhalb eines Textes verwenden würden, das sehr sinnvoll, da dieser Link umsetzbar und anklickbar ist. Auf Ihrer Seite haben Sie viele Call-to-Actions, daher müssen wir sicherstellen, dass sie sowohl im Aussehen als auch in den Formulierungen konsistent sind . Wir können auch einen Button als primären Button erstellen , wie Sie hier in unserer Highlight-Farbe sehen , und eine geschwächte Sekundärversion für etwas, das wir noch hervorheben möchten, aber nicht unsere Hauptversion ist priorität. Diese Konsistenz erstreckt sich über Ihr gesamtes Design und wird Regel in den sogenannten Stylesheets in unserem Design festgelegt. Dies sind Elemente wie Farbe, Typografie, Hierarchie und Abstand sowie allgemeine Layoutelemente wie Karten, Symbole oder Bilder. Diese Konsistenz garantiert, dass unsere Benutzeroberfläche für den Benutzer vorhersehbar und erlernbar ist . Man könnte argumentieren, dass diese Konsistenz wirklich etwas ist , das in den Stylesheets in unserem UI-Design entwickelt wurde und nicht UX. Ich bin jedoch der festen Überzeugung , dass diese Konsistenz und das dahinter stehende System Kern Ihres UX-Designs sein müssen. Fassen wir zusammen, dieselben Wörter, Elemente und Handlungen müssen dasselbe bedeuten. Externe Konsistenz bedeutet bereits vom Benutzer festgelegte Konventionen. Interne Konsistenz bedeutet die visuelle und funktionelle Konsistenz in Ihrem Produkt. Stellen Sie sicher, dass Sie ein Designsystem erstellen, das relevante Hilfslinien enthält , um die Konsistenz in allen Bereichen zu definieren. 7. Hick’s Gesetz – Auswahl und Grenzen: Um die Benutzer nicht zu überwältigen, ist es wichtig, die Auswahl zu minimieren. Hicks Gesetz besagt, dass je mehr Entscheidungen angeboten werden, desto länger wird es dauern, eine Entscheidung zu treffen. Diese Entscheidungszeit steigt logarithmisch. Offensichtlich haben wir nicht alle die gleiche Reaktionszeit. Es hängt sehr von Dingen wie unserem IQ ab, ob die Seiteneinrichtung vertraut ist oder ob wir es überhaupt zuvor verwendet haben. Aber auf den Punkt gebracht, weniger ist schneller. Beachten Sie, dass das Hick-Gesetz nur für schnelle Entscheidungsfindung gilt, wie die Auswahl eines Produkts aus ähnlichen Produkten. Wenn es um eine eingehende Entscheidungsfindung geht, die Forschung beinhaltet, z. B. welches Auto Sie kaufen würden oder welchen Universitätskurs Sie belegen würden, dann gilt Hicks Gesetz nicht. Die andere Ausnahme sind geordnete Listen mit bekannten Artikeln, etwa das Auswählen eines Landes oder einer Sprache. Solange es alphabetisch oder numerisch in Ordnung ist alphabetisch oder numerisch und dem Benutzer vertraut ist, ist es einfach zu navigieren, da der Benutzer einem bestimmten Element sucht. Daher gilt Hicks Gesetz nicht. Um Überlastung zu vermeiden, führen Sie Ihr Setup immer durch diese Checkliste in Ihrem Kopf. Sauber. Brauche ich diesen Artikel wirklich ? Cluster. Gruppiere ähnliche Gegenstände zusammen. Bedenken Sie auch, dass eine Gruppe ähnlicher Elemente auf eine ganz neue Seite oder eine Untermenüseite verschoben werden kann . Verstecken. Kann es bis zum Bedarf aufbewahrt werden, wie in einem Button Alle anzeigen? Dieses Konzept wird als fortschreitende Offenlegung bezeichnet. Ein gutes Beispiel sind Preisblöcke. Alle unnötigen Informationen werden bereinigt und Sie geben nur ein paar relevante Optionen. Wir haben eine Reihe von drei verschiedenen Preisklassen und innerhalb dieser Bereiche haben wir eine klare Hierarchie. Wir sehen offensichtlich das dominanteste, den Preis, dann sehen wir einige der enthaltenen Funktionen und den Aufruf zum Handeln für jeden von ihnen. Sobald Sie an einem der Angebote interessiert sind, können Sie auf den kleinen Link „mehr“ klicken, und Ihnen werden alle bisher versteckten zusätzlichen Informationen angezeigt . Wenn es darum geht, die Auswahl einzuschränken, könnte es verlockend sein , nur eine anzubieten. Sie können in einigen Situationen definiert werden. Wahl, wenn sie auf die richtige Weise und Menge präsentiert wird, gibt dem Benutzer jedoch wenn sie auf die richtige Weise und Menge präsentiert wird, auch das Gefühl, die Kontrolle zu haben. Ein gutes Beispiel für die Reduzierung der Auswahl für gemischte Inhalte, die Sie tatsächlich verwenden könnten, ohne es überhaupt zu bemerken, sind die drei kleinen Punkte. Sie finden sie in Ihrem Browser oder oft in Artikeln oder sozialen Medien. Wenn Sie darauf klicken, erhalten Sie mehr Optionen, die Sie wahrscheinlich nicht ständig verwenden werden aber immer noch relevant sind. Manchmal haben Sie jedoch möglicherweise eine Seite , auf der Sie alle Informationen und alle Details angeben müssen . Dies kann aus rechtlichen Gründen oder daran liegen, dass es sich um einen Kauf wie einen Telefonvertrag oder die Eröffnung eines Bankkontos handelt, bei dem Sie wirklich möchten, dass der Benutzer weiß was er kauft und vergewissern Sie sich, dass sie den richtigen bekommen. Diese Seite ist ein großartiges Beispiel dafür wie dies geschehen könnte. Auch hier habe ich keine Beziehung zu dieser Marke oder Seite. Ich zeige dir das einfach, weil ich denke, dass die UX ausgezeichnet ist. Hier können Sie das Prinzip des sauberen Clusters und Versteckens wirklich sehen . Sie können sehen, dass viel von dem, was bereits hier entfernt wurde , indem Sie diese Drop-downs vorgenommen haben, und dann wurde es in die drei Modelle zusammengefasst , aus denen wir wählen können. Dann können Sie hier unten immer noch sehen, es viele Informationen gibt, aber alles wurde wirklich, sehr gut gruppiert, angesichts einer Überschrift, und Sie können sehen, dass in jeder dieser Kategorien es gibt nicht mehr als vielleicht fünf Gegenstände. Dann haben wir den dritten Aspekt von Verstecken. Dies ist ein wirklich großartiges Beispiel progressive Offenlegung, und Sie können klicken und Sie können sehen, dass es mir dann, sobald ich interessiert bin, alle zusätzlichen Informationen gibt sobald ich interessiert bin, alle , nach denen ich suche. Zusammenfassend lässt sich sagen, je mehr Entscheidungen, desto länger dauert es, eine Entscheidung zu treffen. Dies gilt nicht für komplexe Entscheidungsfindungen und gilt auch nicht für bestellte Listen mit bekannten Artikeln. Versuchen Sie immer, der Clean-, Cluster- und Hide-Methode zu folgen , um zu optimieren. 8. Die Zaubernummer ist 4!: An wie viele Dinge können wir uns eigentlich erinnern? Früher oder später, wenn Sie in UX arbeiten, werden Sie auf das sogenannte Miller-Gesetz stoßen , das besagt, dass unser Arbeitsgedächtnis im Durchschnitt sieben Gegenstände plus oder minus zwei enthalten kann sieben Gegenstände . Nun, nicht wirklich. Eigentlich ist Millers Gesetz eine kleine urbane Legende. Der Psychologe Alan Baddeley überprüfte 1994 Millers Arbeit, da er das Gefühl hatte, dass es etwas Seltsames gibt. Überrascht stellte er fest, dass es nicht wirklich eine Zeitung war, sondern ein Vortrag von Miller, der das berühmte Gesetz prägte. Es war eher so, als würde Miller laut über diese Theorie nachdenken , die er hatte. Es beruhte nicht auf solider Forschung. Baddeley und einige andere, wie Nelson Cowan, gingen zurück und recherchierten noch mehr. Was sie tatsächlich fanden, war, dass die magische Zahl vier war. Vier ist die Anzahl der Dinge, die eine durchschnittliche Person in ihrem Arbeitsgedächtnis speichern kann. Ein gutes Beispiel dafür sind Telefonnummern , die wir normalerweise in drei oder Viere gruppieren. Schauen wir uns etwas an, das mehr mit UX zu tun hat. Hier ist eine Navigation und es hat acht Navigationspunkte, also sieht es ziemlich überfüllt aus. Nach Millers Gesetz wäre das immer noch in Ordnung. Aber lasst uns ehrlich sein. Es ist einfach ein bisschen zu viel zu erfassen und sich daran zu erinnern. Mal sehen, was passiert, wenn wir unsere neue Regel anwenden. Ich habe es auf das Minimum an Punkten aufgeteilt, die ich brauche, damit meine Navigation funktioniert. Jetzt habe ich immer noch fünf Jahre alt. Es sieht schon viel besser aus, aber ich denke, wir können es immer noch verbessern. Wir könnten zum Beispiel eine Hierarchie hinzufügen. Was ich hier gemacht habe, ist, dass ich einen Kontakt aufgenommen habe und beschlossen habe, dass dies mein wichtigster Punkt in der Navigation ist mein wichtigster Punkt in und es zu einem Aufruf zum Handeln gemacht habe. Übrigens, wenn sie diese Elemente positionieren, erinnern sich Benutzer eher an den ersten und den letzten Gegenstand am besten. Dies ist eine Erkenntnis nicht von mir, sondern von Hermann Ebbinghaus, der dies den Serienpositionseffekt nannte. Manchmal können Sie die Dinge möglicherweise nicht strikt auf vier beschränken. Zum Beispiel, wenn Sie eine Symbolleiste in einer Software haben. Was Sie hier als gutes Beispiel tun können , ist, dass Sie sie gruppieren, Leerzeichen hinzufügen und auch einige Symbole hinzufügen. nun in unserem Beispiel hier Wenn Sie nun in unserem Beispiel hier ein paar Navigationspunkte zur obersten Ebene hinzufügen möchten, können Sie dies tun, indem Sie hier links mit dem Logo etwas mehr Platz lassen Mitte, und dann habe deine Navigation auf der rechten Seite. Wichtig ist, dass es eine Art Struktur oder Strategie gibt, wie sie gruppiert werden. In unserem Beispiel habe ich mich jedoch entschlossen, sie als Untermenü hinzuzufügen. Es ist auch viel klarer, denn jetzt habe ich alles, was mit Service zu tun hat, unter einem Punkt. In diesem Moment kann der Benutzer den Rest meiner ersten Layer-Navigation vergessen und sich darauf konzentrieren. Wenn ich später noch ein paar Navigationspunkte hinzufügen wollte , wäre das kein Problem und ich müsste nicht das gesamte Setup meiner Navigation ändern. Wenn es zu lang wird, würde ich jedoch einige Symbole oder eine Struktur hinzufügen, um eine bessere Orientierung zu ermöglichen. Lasst uns zusammenfassen. Sieben plus minus 2, Millers Gesetz genannt, ist ein bisschen eine urbane Legende. Im Durchschnitt kann unser Arbeitsgedächtnis vier Gegenstände aufnehmen. Verwenden Sie die visuelle Hierarchie, um Gruppen von maximal vier zu erstellen. Zum Beispiel können Leerzeichen oder das Hinzufügen eines Aufrufs zum Handeln eine gute Form sein, dies zu tun. Das Hinzufügen von Symbolen oder Bildern ist möglicherweise eine gute Lösung für längere Listenelemente. 9. Seitenpositionierung und Scanning: Untersuchungen der Nielsen Norman Group haben ergeben, dass 80 Prozent der Nutzer nur eine neue Website gescannt haben, auf die sie gestoßen sind. Mit der Eye-Checing-Technologie wurden verschiedene Scanmuster identifiziert. Sie hängen von verschiedenen Faktoren ab, wie dem Inhalt, den Sie anzeigen, dem Hintergrund des Benutzers und seinem Wissen. Ich möchte Ihnen heute einige dieser Muster vorstellen . Sie sind nicht verpflichtet, diesen Mustern zu folgen. Es gibt andere erfolgreiche Websites , die einen völlig anderen Ansatz verwenden. Sie sollten sich jedoch der Muster bewusst sein, da sie zu der Vertrautheit führen, so dass es eine sehr reibungslose Möglichkeit sein kann, einen Benutzer auf Ihre Seite einzuführen, so dass Sie sich mehr auf den tatsächlichen Inhalt konzentrieren können wie die Gesamtstruktur bekannt ist. Bevor wir mit den tatsächlichen Mustern beginnen, ist es wichtig, die Leserichtung zu erwähnen. Wenn Sie in einer Sprache lesen , die sich von links nach rechts bewegt, beginnen die Benutzer auch auf diese Weise zu scannen. Wenn sie von rechts nach links lesen, dann ist es nur ein Gegenteil. Da die meisten Sprachen von links nach rechts geschrieben werden. Dies ist der beliebteste Online-Ansatz. Es ist auch die Sprache, mit der ich am besten vertraut bin und in der ich am besten entwerfe, also werde ich diese für mein Beispiel verwenden. Wenn Sie jedoch auf eine andere spezifische Leserichtung abzielen , stellen Sie sicher, dass Sie sich anpassen. Benutzer scannen normalerweise Informationspassagen mit dem sogenannten Z-Muster, wobei sie von links nach rechts gescannt werden, gehen dann nach unten und scannen dann erneut von links nach rechts. Hier ist ein Beispiel für ein typisches Z-Muster. Das wirst du oft in Heldenabschnitten finden. Wichtig ist, immer mit einem Aufruf zum Handeln zu enden. finden Sie viele Seiten wie linken Seite finden Sie viele Seiten wie diese mit einem Aufruf zum Handeln . Jetzt könnten Sie dies als erweitertes Z-Muster interpretieren, ein sogenanntes Zickzack-Muster. Untersuchungen deuten jedoch darauf hin , dass Benutzer, weil die Benutzer erwarten, dass oben links das Logo und die Navigation sein wird, in der ersten Ansicht oft ignoriert wird , sodass sich die Benutzer direkt auf den Inhalt konzentrieren. Dies könnte zu so etwas führen, das Goldene Dreieck genannt wird. Dass Sie eine Augenprüfungstechnologie verwenden, werden Sie nicht wissen, ob es sich um das eine oder andere handelt, aber das Wichtigste ist, dass sie auf demselben Prinzip basieren und am Ende genau dasselbe haben entwerfen Beachten Sie auch, dass unsere Scanpunkte aus Text, Bildern und Handlungsaufforderungen bestehen, ein im Himmel geschaffenes Trio. In textlastigen Seiten wie Artikeln scannen wir jedoch im sogenannten F-Muster. Das bedeutet, dass wir wieder oben beginnen, nach rechts scannen, aber dann nach unten gehen, wieder nach rechts scannen, aber nicht bis zum ersten Mal, und von da an scannen wir vertikal. Das F-Muster wird ziemlich missverstanden. Es geht nicht darum, ganze Seiten zu scannen. Es geht wirklich um Seiten , die sehr viel Informationen enthalten, wie Artikel, insbesondere auf kleineren Geräten wie Telefonen. Das letzte aber eines der wichtigsten Muster, das ich Ihnen zeigen möchte , ist das sogenannte Layer Cake Scanning. Das zeigt eine Fixierung auf Überschriften, Unterüberschriften und Bilddaten, also alles, was Sie durch visuelle Hierarchie aussenden. Laut Nielsen Norman Group Research ist dies der effektivste Weg für Benutzer, eine Seite zu scannen. Immer wieder ein gutes Beispiel dafür, wie UX und UI wirklich Hand in Hand gehen. Wenn Sie diese Seite aufrufen wird Ihre Aufmerksamkeit wahrscheinlich die große Überschrift auf sich ziehen , die Ihnen sofort sagt, worum es bei einem Thema geht. Sie sehen auch einen Aufruf zum Handeln, der in der Highlight-Farbe enthalten ist , damit Sie etwas abonnieren können. Dann hast du einen Text mit hervorgehobenen Wörtern. Wenn Sie scrollen, erhalten Sie kleine Blöcke, damit sie Ihnen sagen, dass es UX-Prinzipien, Figma und Code-Grundlagen gibt, und wenn Sie mitscannen, erhalten Sie mehr Chunks. Hier erhalten Sie zum Beispiel die Teile der Überschrift und dann die offenbarten Informationen. Die Art und Weise, wie Sie dies scannen, ist wahrscheinlich vom größten prominentesten Feature bis zu den kleinen Details, sobald Sie sich für die Schlagzeilen interessieren. Lassen Sie uns das Schritt für Schritt durchgehen. Was sind die Dinge , mit denen wir das Scanmuster generieren und die Aufmerksamkeit erregen können? Nun, Schritt 1 besteht darin, starke Schlagzeilen zu verwenden. Dies bedeutet starke Schlagzeilen im Wortlaut, sehr klar und auch in der Hierarchie wie sicherstellen, dass es eine Hierarchie gibt, die bereits in UX definiert ist, was sind die wichtigen Dinge und welche Kategorien sind unten? Nur wenn ich die Schlagzeilen scanne, sollte ich bereits alles wissen , was auf Ihrer Website passiert. Das nächste ist das Hervorheben von Schlüsselwörtern. Stellen Sie außerdem sicher, dass Sie hier beispielsweise beschreibende Links verwenden . Machen Sie keine Sachen wie hier klicken und dann einfach unterstreichen, um hier die Informationen wirklich zu verwenden und hervorzuheben. Verwenden Sie Aufzählungszeichen, Symbole und andere grafische Verkürzer. Stellen Sie zuerst eine Schlussfolgerung vor, sogenannte invertierte Absätze. Stellen Sie sicher, dass der Benutzer hereinkommt und bereits den großen Vorteil erhält , wenn immer noch interessiert ist, er scannt weiter. Zur Zusammenfassung unserer Muster dient das Z-Muster für Informationsinhalte wie Ihre Heldenabschnitte oder die Einführung, alles, was schnell und auf einen Blick ist und normalerweise wo du willst einen Aufruf zum Handeln. Das F-Muster ist für inhaltslastige Seiten gedacht, aber hier sprechen wir wirklich über Artikel, textlastige Informationen, insbesondere auf kleinen Geräten wie Mobiltelefonen. Beim Scannen von Layerkuchen geht es wirklich darum, Ihre gesamte Seite von oben nach unten zu strukturieren , und es geht darum, eine Hierarchie zu erstellen. 10. Feedback und Systemstatus: sichtbare Systemstatus hilft uns, unsere Benutzer zu stärken. Der Benutzer sollte immer darüber informiert werden, was vor sich geht , und sofort Feedback zu jeder Aktion erhalten. Stellen Sie sich das als Aufzugsknopf vor. Stellen Sie sich vor, Sie drücken es und absolut nichts würde passieren. Du drückst es erneut und betrachtest es als kaputt. jedoch einfach aufleuchten, verstehen Sie, dass Ihre Aktion verstanden wurde und der Aufzug auf dem Weg ist, es wird nur eine Weile dauern. Es ist das Gleiche oder noch mehr online. Jede Aktion braucht ein Feedback. Dieses Feedback kann ein visuelles Feedback sein, wie ein Audio-Feedback, ein Signalton, ein haptisches Feedback, das ist, wenn Ihr Telefon vibriert, wenn Sie eine Nachricht erhalten, oder es kann sich um ein visuelles Feedback handeln. Feedback zum Systemstatus kann in vier Kategorien unterteilt werden : ständiges Feedback , Optionsfeedback, Aktionsfeedback und Empowering Feedback. Schauen wir uns die Nummer eins an, ständiges Feedback. Damit meinen wir Feedback, das immer kommuniziert wird, um Frustration oder Moment der Überraschung zu vermeiden. Beispiele wären so etwas wie die Internetverbindung, Akkulaufzeit oder die verbleibende Zeit. Banken verwenden dies beispielsweise, wenn Sie angemeldet sind , da sie Sie automatisch aussperren würden , nachdem für eine bestimmte Zeit inaktiv waren. Die zweite Art von Feedback ist das sogenannte Potential-Feedback. Dies hebt im Grunde die gesamte Interaktion man mit der Seite haben könnte. Dies sind Dinge, wie Sie den Mauszeiger über einen Link oder eine Schaltfläche und es ändert sich leicht die Farbe um zu zeigen, dass er anklickbar ist. Es könnte auch eine ganze Box sein, die das Aussehen wie Farbe oder Schatten ändert , wenn Sie schweben, was auf eine mögliche Interaktion hinweist. Oder Dinge wie ein Eingabefeld, auf das Sie klicken können, oder das Kalendersymbol, wenn Sie den Mauszeiger darüber bewegen, wird es erweitert. Das dritte Formular ist ein klassisches Feedback zum Handeln, z. B. beim Klicken auf ein Dropdown-Menü oder auf eine Schaltfläche, die ein Formular absendet. Was auch immer das Ergebnis ist, Sie müssen den Benutzer auf dem Laufenden halten. Mögliches Ergebnis könnte das folgende sein , das eine Wartezeit angibt, wie eine Ladeleiste oder ein Countdown oder etwas ähnliches wie eine Ladeleiste oder ein Countdown oder etwas ähnliches, was darauf hinweist, dass etwas passiert, aber es dauert nur eine Sekunde, bis es ist geladen. Das ist wirklich wichtig, dass Sie das im Hintergrund haben, auch wenn die Dinge in Ihrem Test super schnell sind und es fast keine Zeit zum Laden gibt. Dies kann auf anderen Geräten oder anderen Internetverbindungen sehr unterschiedlich sein. Ein anderes Ergebnis könnte sein, dass die Aktion abgeschlossen ist. Dies könnte offensichtlich sein, als würden neue Seiten auftauchen oder ein Dropdown-Menü geöffnet werden. Aber manchmal ist es nicht so offensichtlich, wie wenn Sie ein Formular absenden. Dann müssten Sie nur eine kurze Bestätigungserfolgsmeldung zeigen eine kurze Bestätigungserfolgsmeldung , die so einfach wie ein Häkchen oder ein gut gemacht oder danke sein kann . Das dritte Ergebnis ist, dass etwas schief läuft. In diesem Fall müssen Sie den Benutzer darauf aufmerksam machen. Sie müssen eine Fehlermeldung anzeigen und sie schlagen eine Lösung vor, wie Sie dies beheben können. Jetzt ist die letzte Art von Feedback ein bisschen anders, ich nenne es das ermächtigende Feedback. Das bedeutet im Grunde, dass wir den Benutzer in jedem Stadium wissen lassen, wo er oder sie ist, wie er sich rückwärts und vorwärts bewegt und wie er jede Situation verlassen kann. Beispiele dafür könnten ein anklickbarer Brotkrumen sein , der angibt, wo wir sind. Auch bei einem Checkout oder einer Anmeldung sehen Sie hervorgehobene Schritte des Prozesses, die dem Benutzer die aktuelle Position zeigen. Es gibt mehr psychologische Argumente dahinter, es so zu tun und alles in kleineren kleinen Brocken zu zerlegen . Es ist aber auch wirklich großartig, einfach zur Orientierung. verstehen, was bei jedem Schritt des Weges vor sich geht , fühlen sich Ihre Benutzer nicht nur unter Kontrolle, sondern schafft auch ein Gefühl des Vertrauens das die Freiheit gibt, Ihr Produkt weiter zu erforschen. Lasst uns zusammenfassen. Es gibt vier Hauptkategorien von Feedback: ständiges Feedback, das ist so etwas wie die Kommunikation des aktuellen Batteriestatus, Möglichkeit Feedback, ich zeige dem Benutzer eine mögliche Aktion an, als würde ich zeigen, welche Bereiche auf meiner Website anklickbar sind, Action-Feedback, kommentiere die Aktion eines Benutzers. Sobald der Benutzer Maßnahmen ergriffen hat, ein Formular ausgefüllt und auf Sobald der Benutzer Maßnahmen ergriffen hat, die Schaltfläche geklickt hat, bin ich Kommunikation von Erfolg oder Irrtum , zum Beispiel Feedback ermächtigen, wo bin ich? Zeigen Sie immer deutlich an, wo sich der Benutzer befindet und wie Sie zu einem gewünschten Bereich navigieren. 11. Error: Fehlervermeidung ist eine der wichtigsten Usability-Heuristik. Es wird oft übersehen, macht aber den Unterschied aus. Was sind die gebräuchlichen Möglichkeiten, Fehler zu vermeiden? Ich möchte dir drei Kategorien zeigen. Der erste ist daran erinnert, zu verhindern, der zweite, Vorschläge und Einschränkungen und der dritte bestätigt Maßnahmen. Fangen wir mit Nummer 1 an, erinnern Sie daran zu verhindern. Dies bedeutet, dass Sie Ihren Benutzern einen kleinen Schrei geben, bevor ein Fehler oder ein unangenehmes Ergebnis auftreten kann . Ein Beispiel wäre, dass Ihr Telefon Sie daran erinnert, dass Ihr Akku knapp läuft bevor er tatsächlich leer ist. Beachten Sie auch, dass Ihnen hier neben dem Zurückgehen und dem Aufladen Ihres Telefons neben dem Zurückgehen und dem Aufladen Ihres Telefons eine andere Lösung angeboten wird, z. B. wenn Sie es unterwegs in einen Low-Power-Modus versetzen. Diese Ein-Klick-Lösung ist sehr hilfreich und wir werden mehr darüber erfahren, wenn wir über die Fehlerbehandlung sprechen. Erinnern Sie daran zu verhindern könnte auch eine Erinnerung daran sein , dass ein Kurs, für den Sie sich angemeldet haben, beginnt oder dass Sie einen Termin bestätigen müssen. Lasst uns ehrlich sein. Pop-ups sind nervig, also möchten Sie es nur verwenden, wenn Ihr Benutzer andernfalls den Zugriff verliert oder etwas verpasst. Geben Sie Benutzern im Idealfall die Möglichkeit, sich für solche Erinnerungen ein - und auszuschalten. Nummer 2, Vorschläge und Einschränkungen. Ohne es viel zu merken, wirst du das die ganze Zeit selbst benutzen. Schauen wir uns ein einfaches Buchungsbeispiel an. Wie üblich verwende ich dieses Beispiel nur ohne Bezug zum Unternehmen. Ich zeige dir nur ein paar großartige UX aus dem echten Leben. Was Auto-Suggeste tut, ist wirklich großartig, wenn ich anfange zu tippen. Sagen wir, ich gehe zu diesem Ort de Berlin, und ich bin mir nicht ganz sicher , wie es heißt, etwas wie Branden, und dann sehe ich schon was es sein könnte, also ist es Brandenburg. Nehmen wir an, ich tippe das immer noch falsch ein. Ich habe Brandinbur gesetzt und es wird immer noch herausfinden , wonach ich suche. Das ist wirklich, wirklich großartig, denn sonst hätte ich es einfach eingelegt , falsch geschrieben, und dann hätte ich keine Suchergebnisse erhalten. Die vorgeschlagenen Ergebnisse sind so etwas wie ein System, das im Hintergrund arbeitet. Sie müssen nicht definieren, was die Vorschläge sind, aber Sie müssen den Platz für sie in Ihrem Drahtgitter gestalten und dann sicherstellen, dass Design- und Entwicklungspläne und diese Funktion testen dementsprechend Lasst uns das auswählen und zu unserem nächsten Ding übergehen, was die Einschränkungen sind. Jetzt ist ein Kalender ein gutes Beispiel für Einschränkungen. Denn hier muss ich ein Startdatum und ein Enddatum auswählen . Jetzt kann mein Enddatum der Buchung nicht vor meinem Startdatum liegen. Nun, das klingt wirklich offensichtlich. Aber um ehrlich zu sein, passieren hier viele Fehler , wenn Sie die Leute einfach die Daten eingeben lassen. Wir fahren dann einfach mit dem letzten Filter fort, den sie uns gegeben haben, und hier können Sie auch sehen, dass ich nicht nur eine Zahl eingeben muss, aber ich kann bereits filtern. Wenn ich zum Beispiel Haustiere hinzufügen würde, könnte es automatisch alle Wohnungen herausfiltern , in denen Haustiere nicht erlaubt sind. Ich bekomme nur die Ergebnisse , mit denen ich wirklich arbeiten kann. Dies ist ein wirklich großartiges Beispiel für eine reibungslose Benutzererfahrung, die später viel Frustration verhindert. Unser letzter ist die Bestätigung von Maßnahmen. Durch Anklicken einer Schaltfläche bestätigen Sie normalerweise bereits eine Aktion. Es gibt jedoch Maßnahmen mit größeren Konsequenzen. Sie möchten also wirklich sicherstellen, dass Ihr Benutzer sich dieser Aktion bewusst ist. Hier habe ich zum Beispiel die Seite, auf der ich meine Website hoste und sie möchten offensichtlich nicht, dass Leute ihre Websites versehentlich löschen. Was sie tun, wenn man an die Spitze geht, ist, dass sie es zunächst als Gefahrenzone bezeichnen, um es ziemlich klar zu machen. Wenn ich dann auf Diese Seite löschen klicke, bitten sie mich, den Namen der Seite einzugeben , die ich löschen möchte. Ich klicke hier erst, wenn ich einen Namen eingegeben habe, nenne ich ihn hier einfach meinen Seitentest. Dann wird der Lösch-Button aktiv. Ein anderes Beispiel ist das Versenden von Newslettern, in denen Sie eine Zusammenfassung darüber erhalten , was Sie senden und an wie viele Personen und dann die Sie bestätigen müssten. Diese Dialoge sind großartig, aber stellen Sie sicher, dass Sie sie für sehr selektive Aktionen verwenden . Benutze sie nur, wenn Dinge wirklich schief gehen und einen großen Einfluss haben können . Jetzt können Sie in den meisten Fällen das Offensichtliche abdecken und die meisten Fehler verhindern. Diejenigen, die immer noch passieren, können Sie daran arbeiten und angemessen damit umgehen. Möglicherweise entwerfen Sie jedoch Produkte, bei denen die Fehlervermeidung von entscheidender Bedeutung ist. Wie ein Finanzprodukt oder noch mehr ein Gesundheitsgerät. In diesem Fall muss die Fehlervermeidung eine absolute Priorität haben, und Sie sollten eine klare Strategie haben sich von Bereichen herabarbeitet, in denen der meiste Schaden zu einer guten oder reibungslosen Benutzerfreundlichkeit führen könnte . Fixes sind möglicherweise ziemlich klein, aber effektiv. So etwas wie eine Warnung, die besagt: „Möchten Sie wirklich Betrag X überweisen , wenn er über einem bestimmten Schwellenwert liegt? Es ist auch sehr effektiv, den Benutzern eine Zusammenfassung zu geben , die sie vor dem Kauf bestätigen müssen. Dies tun zum Beispiel viele Fluggesellschaften. Das ist nicht nur schön für den Benutzer, weil er einen Überblick verschafft und keinen falschen Flug bucht und all den Stress bewältigen muss, ihn zu ändern, sondern es ist auch wirklich großartig für die Händler, weil Dinge wie Rückbuchungen und Kundenabwicklung eine sehr teure und arbeitsintensive Aufgabe sind. Ordnen Sie Ihre Fehlervermeidung wirklich als Team zu. Die Fehlervermeidung beginnt mit einer guten UX. Es wurde für Ihre Benutzeroberfläche entwickelt und in der Entwicklung ausgeführt. Du musst im selben Boot sein. Lasst uns zusammenfassen. Verwenden Sie Warnungen, um Fehler zu vermeiden, jedoch nur, wenn Benutzer anderweitig den Zugriff verlieren oder etwas verpassen. Sei vorsichtig damit. Verwenden Sie Vorschläge wie automatisches Ausfüllen und Einschränkungen, um Benutzer zu leiten und Zettel zu vermeiden. Fügen Sie eine Bestätigungsebene hinzu , wenn Sie sich mit destruktiven Aktionen oder großen Marketingverteilungen befassen . Schaffen Sie eine Hierarchie der Fehlervermeidung für fehlerempfindliche Produkte wie Medizinprodukte. 12. Fehlerbehandlung: Wann immer möglich, werden wir entwerfen, um Fehler zu vermeiden. Es gibt jedoch keine Möglichkeit, sie vollständig loszuwerden. Planen wir also Eventualitäten und helfen, Fehler zu beheben. Fehlerbehandlung findet ziemlich überall auf Ihrer Seite statt, aber Formulare, Filter sowie alle Arten von Eingabe und Interaktion sind die kritischen Bereiche, auf die Sie achten sollten. Ich möchte Ihnen den dreistufigen Plan zur Fehlerbehandlung vorstellen, der von der Nielsen Norman Group eingeführt wurde. Schritt 1 ist erkennen, Schritt 2 ist Diagnose, und Schritt 3 ist erholen. Gehen wir sie Schritt für Schritt durch und fangen Sie mit dem Erkennen an. Ich werde hier für mein Beispiel ein einfaches Anmeldeformular verwenden, aber Sie können diese Methode für so ziemlich alles verwenden , um Fehler zu behandeln. Beachten Sie, dass das Formular bereits so eingerichtet ist , dass mögliche Fehler vermieden werden. Zum Beispiel zeige ich bereits an der E-Mail und in welchem Format es eingegeben werden muss. Aber nehmen wir an, dass der Benutzer immer noch einen Fehler eingibt. Schritt 1 besteht nun darin, diesen Fehler zu erkennen, was bedeutet, dass ich den Benutzer klar darüber informiere , dass ein Fehler aufgetreten ist. Es gibt verschiedene Möglichkeiten , dies zu tun, und es wird tatsächlich empfohlen, mehr als ein Signal der Fehlererkennung zu kombinieren . In meinem Beispiel wird der Umriss nicht nur rot, sondern auch etwas dicker. Ich füge auch ein zusätzliches Warnsymbol hinzu. Warum? Denn obwohl Rot für die meisten von uns das offensichtlichste Zeichen für einen Fehler ist, müssen wir auch für Menschen entwerfen , die möglicherweise keine Farbe sehen. Daher ändert sich die Dicke des Feldrandes und ich habe ein Warnsymbol hinzugefügt. Schritt 2, Diagnostizieren des Fehlers. In diesem Schritt muss ich dem Benutzer klar sagen, was tatsächlich schief gelaufen ist. Ich sage also, dass die eingegebene E-Mail nicht korrekt ist. Es ist sehr wichtig, in diesem Schritt eine einfache und einfache Sprache zu verwenden . Ich kann es jedoch immer noch besser machen. Mal sehen, was wir mit Schritt 3 verbessern können. Wiederherstellen bedeutet, anstatt dem Benutzer nur zu sagen, dass dies falsch ist, kann ich dem Benutzer sagen, hey, warum lösen Sie es nicht so? Meine Fehlerwarnung könnte also in etwa so aussehen. Die E-Mail muss ein @ -Symbol enthalten. Sobald der Benutzer den Fehler sortiert hat, verschwindet unsere Fehlermeldung und wir können sogar ein zusätzliches kleines Häkchen hinzufügen , um zu zeigen, dass jetzt alles gut funktioniert. Ein weiterer Bereich, den jede Seite für die Fehlerwiederherstellung haben muss , ist die sogenannte 404-Seite. Wenn Sie neu damit sind, ist 404 eine Standardseite, an die Benutzer gesendet werden, wenn sie auf etwas klicken , das nicht mehr existiert, z. B. einen toten Link oder wenn sie eine falsche URL eingeben. Es funktioniert nach dem gleichen Drei-Stufen-Prinzip. Eins, erkenne, deine Seite wurde nicht gefunden. Zweitens, diagnostizieren, und das ist hier nicht so wichtig, weil es ein bisschen Hand in Hand mit Erkennen geht, aber man könnte sagen, dass etwas wie die Seite Sie suchen, nicht mehr existiert oder verschoben wurde. Drei, erholen Sie sich. Das ist wirklich wichtig. Zeigen Sie Ihr Menü immer oben an, damit Benutzer dorthin zurückkehren können, wo sie möchten, oder auch einen Aufruf zum Handeln anbieten können, der Benutzer auf Ihre Homepage zurückbringt. Es gibt auch wirklich lustige Beispiele für 404 Seiten da draußen, wie diese niedliche hier von Pixar. Wie Sie sehen können, können Sie damit kreativ sein. Halte es einfach, aber mach es dir zu eigen. Lasst uns zusammenfassen. Es treten Fehler auf. Stellen Sie daher sicher, dass Sie eine angemessene Fehlerbehandlung entwerfen. Verwenden Sie die drei Schritte der Fehlerbehandlung. Erkennung, es gibt einen Fehler; diagnostizieren, was ist der Fehler; und erholen Sie sich, wie kann ich wieder auf Kurs kommen? Versuchen Sie, mehr als eine Möglichkeit zu verwenden, um Fehler zu identifizieren. Zum Beispiel reicht Farbe allein nicht aus da nicht alle Benutzer sie möglicherweise richtig sehen können. Vergiss deine 404-Seite nicht. 13. Ein Wort über Dopamine und ethisches Design: Wie Sie Ihr Design so einrichten, dass die Dopamin-Freisetzung ausgelöst wird, spielt tatsächlich eine große Rolle. Lasst uns ein bisschen mehr herausfinden. Was ist eigentlich Dopamin? Ich werde dies sehr kurz erklären und vereinfacht, denn wie Sie sich vorstellen können, gibt es genug Material für einen Doktortitel oder mehrere Doktoranden, wenn es um Dopamin geht. Dopamin ist eine Chemikalie, die von unserem Gehirn produziert wird und eine wichtige Rolle bei der Motivation des Verhaltens spielt. Dopamin wird freigesetzt, wenn Sie zum Beispiel beruhigendes Essen essen, eine Aufgabe beenden, eine lohnende soziale Interaktion haben oder etwas erreichen. Ist das gute, glückliche oder lohnende Gefühl, das du bekommst? Dopamin lässt dich Dinge wünschen und es bringt dich dazu, sie zu wiederholen. So ziemlich alles, was Sie tun, gibt Dopamin frei und putzen sogar Ihre Zähne. Aber es ist der Dopamingehalt , der einen Unterschied macht. Kurz gesagt, je mehr Dopamin Ihr Gehirn von einer Aktivität erwartet, desto motivierter sind Sie, es zu tun und zu wiederholen. Wenn es um UX-Design und Dopamin geht, gibt es drei Hauptbereiche von Interesse für uns. Man feiert kleine Gewinne, zwei erledigen eine Aufgabe, und drei ist die sogenannte Belohnungsprognose. Fangen wir mit dem Offensichtlichen an. Es gibt keinen Bereich, um die Wirkung von Dopamin in UX besser zu zeigen als in sozialen Medien. Kognitive Neurowissenschaftler haben gezeigt , dass lohnende soziale Reize wie lachende Gesichter, positive Anerkennung durch Likes und Botschaften uns fast einen Ansturm von Dopamin geben. Jeder wie in den sozialen Medien ist wie ein kleiner Gewinn und gibt Dopamin frei. Die Leute können wirklich süchtig danach werden. Auch die endlose Bildrolle von Bildern auf Instagram zum Beispiel lässt Sie das Verlangen, die Aufgabe zu erfüllen und immer mehr Dopamin zu wollen. Forschung in Belohnungslernen und Sucht zeigt auch ein Muster, das als Belohnungsprognose bezeichnet wird. Etwas, das tatsächlich in Casinos verwendet wurde und jetzt immer mehr online genutzt wird. Wenn wir eine unerwartete Belohnung erhalten, erhalten wir eine hohe Dosis Dopamin. Wir erfahren auch, dass in bestimmten Situationen die Möglichkeit dieser Belohnung besteht , und wir fangen an zu antizipieren. Tatsächlich haben Gehirnscans Forschung gezeigt, dass die Erwartung eines Gewinns unser Gehirn mehr stimuliert als den tatsächlichen Gewinn. Es ist dieser berühmte Moment in einem Roulette-Spiel, in dem die Schüssel kreist, bevor er den Sieg macht. Sie können sehen, dass sie es in vielen Filmen langsam in Bewegung setzen, um dieses Gefühl der Vorfreude zu erweitern. Was passiert ist, dass du das Dopamin bereits in der Belohnungsphase bekommst , während das Spiel spielst und noch nicht einmal gewinnst. Wenn Sie jedoch zu oft verlieren, fällt Dopamin ab und Sie hören auf. Spielautomaten zum Beispiel sind so konzipiert, dass Sie an diesem Sweet Spot zwischen Vorfreude, Lieben und Gewinnen in Verbindung gebracht werden, gerade genug, um weiterzumachen. Jetzt verwenden viele Apps das gleiche Muster, um Sie auf dem Laufenden zu halten. Wenn wir glauben, dass es eine zufällige Belohnung geben könnte, kommen wir immer wieder zurück, um immer mehr zu erhalten. Zum Beispiel macht die kleine Blase in deiner Chat-Nachricht genau das. Wir nehmen ständig unsere Telefone ab, weil wir irgendwann dieses kleine Wesen kennen irgendwann dieses kleine Wesen und diese kleine Blase da sein wird. Einige Social-Media-Apps haben sogar einen Algorithmus, der Likes zurückhält. Du wirst irritiert, überprüfe weiter, und dann fühlt es sich erstaunlich an wenn sie alle plötzlich freigelassen werden. Sie halten diese Vorfreude wie beim Spielautomaten und boomen dann, kommt Ihr Preis als Zustrom sozialer Bewertung. Klingt alles ein bisschen beängstigend? Ja, das glaube ich auch. Wenn das Produkt so konzipiert ist , dass es den Benutzer ausgetrickst, nennen wir das dunkle UX- oder dunkle Muster. Es gibt weitere Beispiele wie das Verstecken von Kosten, Standardkästen usw. Warum erzähle ich Ihnen das alles dann? Nun, weil Sie als UX-Designer auch eine Rolle bei der Herstellung von Produkten spielen können . Es ist großartig zu wissen und sogar wichtig zu wissen, worauf die Benutzer klicken, denn dann können Sie es entsprechend verwenden. Es gibt eine starke Bewegung, die jetzt ein sogenanntes ethisches Design fordert . Ich empfehle dringend, dass Sie sich ein wenig tief in dieses Thema vertiefen und den Ort finden , an dem Sie sich wohl fühlen. Hier sind einige kostenlose Ressourcen: humanebydesign.com, humanetech.com und darkpatterns.org. Wie immer habe ich keinerlei Beziehung zu diesen Seiten. Ich finde nur, dass sie sehr wertvolle Inhalte haben, die geteilt werden müssen , und es steht absolut frei, mit Ihrer Recherche zu beginnen. Sie werden auch sehen, dass Sie einen Dopamin-Effekt auf sehr schöne Weise verwenden können , nur um kleine mühsame Aufgaben ein bisschen schöner zu machen . Lassen Sie mich Ihnen ein Beispiel nennen. Es ist nicht so spektakulär wie Facebook oder Instagram, aber sehr effektiv. Wenn wir Feedback wie Fehlerfeedback geben, ist es normalerweise ein negatives Feedback als wäre hier etwas schief gelaufen. Das positive Feedback hat jedoch viel Kraft. Zum Beispiel ist es wirklich nervig, alle Regeln für Passwörter richtig zu machen. Normalerweise geben Sie eins ein und dann erhalten Sie eine Fehlermeldung für vergessenes Symbol oder Wort zu kurz, Sie nennen es. Dies ist eine sehr clevere Art, es hier zu lösen. Indem Sie sofort positives Feedback geben wenn Sie eine der Anforderungen erfüllen, fühlen sich die Benutzer erfüllt und der Prozess wird viel reibungsloser. Sie erstellen im Grunde winzige Versionen von Likes. Lasst uns zusammenfassen. Bestimmtes UX-Design kann die Freisetzung von Dopamin auslösen, hauptsächlich durch das Feiern kleiner Gewinne, das Erfüllen einer Aufgabe und die Vorhersage belohnen. Dopamin motiviert den Anwender , für mehr zurückzukommen. Positives Feedback ist eine großartige Möglichkeit, dem Benutzer bei notwendigen, aber mühsamen Aufgaben zu helfen . Betrachten Sie immer ethische Designlösungen. 14. Course: Vielleicht möchten Sie mit mir zusammenarbeiten, also habe ich einige Dateien vorbereitet, die Sie herunterladen können. Im Kurs navigieren Sie einfach zu Projekt und Ressourcen, und dort finden Sie alle Informationen und den Link, über den Sie das Material herunterladen können. Oder du navigierst zu meinem Profil, wo du auch einen direkten Link zur Download-Seite findest. Auf dieser Seite finden Sie eine Vielzahl von Downloads. Sie können einfach den Kurs auswählen, den Sie gerade belegen, und klicken Sie dann einfach auf „Herunterladen“, damit die Datei automatisch für Sie heruntergeladen wird . Um eine heruntergeladene Figma-Datei zu öffnen, ist es wichtig, dass Sie über ein Figma-Konto verfügen. Sie in Ihrem Konto Navigieren Sie in Ihrem Konto zu new und drücken Sie „Importieren“ Sie können dann eine Datei auswählen , die Sie öffnen möchten. Es kann einen Moment dauern, da sie ziemlich groß sind , aber sobald Sie sie importiert haben, befinden sie sich auf Ihrem Konto und Sie müssen diesen Vorgang nicht wiederholen. Ich arbeite für die meisten meiner Designs mit Google-Schriftarten . Wenn Sie also mit der Figma-App arbeiten, müssen Sie nichts tun. Alle Google-Schriften werden automatisch vorinstalliert. Wenn Sie mit Figma im Browser arbeiten möchten, dann müssen Sie nur die Schriftart durchsuchen, die Ihnen als fehlt, zum Beispiel Poppins Ich benutze viel, und dann können Sie diese Schriftart direkt herunterladen, installiere es auf deinem Computer und schon kannst du loslegen. Alle Ressourcen sind für bestehende Studierende kostenlos und Sie müssen keine zusätzlichen Informationen eingeben. Sie können natürlich auch eine der anderen Dateien herunterladen , falls Sie interessiert sind, also füge ich im Allgemeinen immer alles hinzu meiner Meinung nach nützlich sein könnte, also gibt es zum Beispiel eine Bootstrap-Vorlage und dann eine Liste mit Links zur Inspiration, Büchern und Blöcken, die sich wirklich hervorragend für das UX-UI-Design eignen. Diese Liste der Downloads wächst stetig. Stellen Sie also sicher, dass Sie wiederkommen und von Zeit zu Zeit einen Blick darauf werfen. 15. ---> EXERCISE: Co-working: Lassen Sie uns diese ganze Theorie in die Praxis umsetzen. Ich habe eine Figma-Akte für dich vorbereitet. In dieser Datei finden Sie die Übung, wenn Sie sie auf der ersten Seite öffnen. Unsere Übung ist, dass wir ein Drahtgitter für einen kleinen Open Office-Co-Working Space bauen werden. In dem Brief finden Sie einen Überblick über die Dinge, die sie anbieten, also Dinge wie die Preise und verschiedene Abschnitte , die der Kunde wünscht. Jetzt im wirklichen Leben hätten wir offensichtlich viel mehr Forschungspersonas, ausführliche Informationen, insbesondere über die Benutzer, bevor wir das Drahtmodell starten. Dies ist jedoch eine Übung, um Ihre Prinzipien wirklich nur anzuwenden, damit wir eine Abkürzung nehmen und ich gebe Ihnen alle Informationen in dem Brief, und wir werden das jetzt für selbstverständlich halten. Sie können auch eine erste Einrichtung eines Drahtgitters für das Projekt sehen , mit dem unser Kunde jedoch sehr unzufrieden war, weil die UX nicht richtig war , also sind wir hier, um die UX des angegebenen Drahtgitters zu verbessern. Da wir keine anderen Forschungsergebnisse haben, werden wir uns ausschließlich auf die Prinzipien verlassen , von denen wir heute gelernt haben. Fühlen Sie sich frei, neu zu mischen, hinzuzufügen, zu löschen, sich zu bewegen oder ganz von vorne anzufangen. Versuchen Sie wirklich, dies zu einem ersten Entwurf zu machen , mit dem Sie zum Kunden zurückkehren können , um zu besprechen und einige Tests zu beginnen. Auf der zweiten Seite in der Datei finden Sie die Lösung, die ich für Sie vorbereitet habe. Jetzt ist es wichtig anzumerken, dass es niemals eine perfekte Lösung im Design gibt. Die Lösung, die Sie sich ausgedacht haben, könnte genauso gut oder sogar besser sein als meine. Was ich Ihnen hier gebe, ist nur eine Inspiration, damit Sie sehen, wie ich mit nur eine Inspiration, damit Sie sehen, wie den Problemen und Lösungen umgehen würde , die ich vorschlage. Sie können das wirklich so kritisch oder neugierig betrachten, wie Sie es gerne hätten. 16. Teil 2: UI-Design: Wenn Ihnen dieser Kurs und die Übung gefallen haben, dann empfehle ich Ihnen, direkt in den zweiten Teil dieses Kurses hier auf Skillshare zu springen , einfach nach Mondlernen zu suchen und Sie werden alle Kurse finden. Ganz unten finden Sie den UI-Design-Kurs , der den zweiten Teil des UX-UI-Intros ist. In dieser Klasse werden wir das Drahtgitter zum Leben erwecken , das Sie gerade gebaut haben , und lernen alle Prinzipien des UI-Designs kennen. 17. Vielen Dank: Gut gemacht, um diesen Kurs zu beenden. Fühlen Sie sich frei, uns unter moonlearning.io zu erreichen. Wir sind immer daran interessiert, Ihr Feedback zu hören. Sie werden uns auch einen großen Gefallen tun, wenn Sie sich einfach eine Minute Zeit nehmen und hier eine Bewertung abgeben könnten . Wenn Ihnen dieser Kurs gefallen hat, dann achten Sie auch darauf, dass Sie unsere zusätzlichen Kurse ansehen. Bei moonlearning.io decken wir alle Themen ab, von den Grundlagen des UX/UI-Designs bis hin zu Figma bis hin zu einigen Code-Grundlagen. Besuchen Sie unbedingt unsere Website moonlearning.io, wo Sie sich auch für unseren Newsletter anmelden können .