(7) Visuelles Design für UX-Designer

1. Einführung und Übersicht: Ich denke, weil wir sieben über visuelles Design und Informationsdesign sprechen werden. Dieser Kurs kann als eigenständiger Kurs belegt werden und insbesondere für Leute nützlich sein, die UX-Design oder -Forschung betreiben und ein bisschen mehr über visuelles Design lernen möchten . Es kann, wie ich bereits erwähnt habe, als eigenständiges Gerät als Teil einer zehnteiligen Serie angesehen werden. Zweitens bedeutet die Planung der zehn Kurse dieser Reihe , dass Sie die Prüfung für das British Computer Society Foundation Certificate in User Experience ablegen das British Computer Society Foundation Certificate in und ein akkreditierter UX-Praktiker werden möchten. Hallo, ich habe eine Beschäftigungsdauer von Peak XD. Also ein bisschen über mich. Wie Sie sehen können, habe ich eine Menge Qualifikationen. Aber um ehrlich zu sein, das meiste von dem, was ich gelernt habe, über 20 Jahre als UX-Designer vor Ort gearbeitet. Hoffentlich kann ich während dieses Kurses etwas von diesem Wissen an meine Kollegen Sophie weitergeben, die mit Ihnen einige der Designprinzipien durchgehen werden . Unsere Mission bei peak XD ist es also, andere zu befähigen, die Welt durch menschenzentriertes Design zu verbessern . Hier geht es ein bisschen darum, was wir tun. Wir betreiben Forschung, Journey Mapping, Service Design, wo Sie UX-Design, Wireframes, Informationsarchitekturtests durchführen, und natürlich machen wir UX-Schulungen. Was weiß mein Team über UX zwischen uns mit entweder 500 UX-Projekten seit 2003 abgeschlossen? Sie werden heute von mir und meinem Team über visuelles Design hören und hoffen, dass wir Ihnen einen Teil dieses Wissens auf der Grundlage unserer Branchen- und Beratungserfahrung vermitteln können dass wir Ihnen einen Teil dieses Wissens auf der Grundlage unserer Branchen- und Beratungserfahrung vermitteln . Dieser Kurs baut auf dem auf, was wir in unseren ersten drei Kursen über das Verständnis Ihrer Benutzer oder das Verständnis des Problembereichs behandelt unseren ersten drei Kursen über das Verständnis Ihrer Benutzer oder das Verständnis haben, bevor wir uns mit dem Lösungsbereich befassen. Im ersten Kurs haben wir auch all die verschiedenen Komponenten und Dinge behandelt , die Sie über Ihre Benutzer wissen müssen. In den Kursen 2.3 behandelten wir Methoden der Nutzerforschung und anschließend die Dokumentation Ihrer Nutzerforschungsergebnisse um Empathie mit Ihren Stakeholdern aufzubauen. Dann sprachen wir in Kurs vier darüber, wie Benutzer und Stakeholder in den Designprozess einbezogen werden können, sowie über Benutzer und Stakeholder in den Designprozess einbezogen werden können, sowie die Ideenbildungsphase und die Bedeutung des Prototyping , das fünf entspricht. Wir haben darüber gesprochen, wie Sie Ihre Informationsarchitektur und Navigation gestalten , aber das mentale Modell Ihres Benutzers verstehen. Dann haben wir in unserem letzten Kurs sechs über Interaktion und Schaumdesign gesprochen. Wenn Sie nicht über gute Kenntnisse im Verständnis Ihrer Benutzer verfügen , empfehle ich Ihnen, diese Kurse zuerst zu absolvieren , da die Anwendung aller Entwurfsmethoden und -prinzipien nur auf halbem Weg erfolgt schaffen Sie ein gutes Online-Erlebnis. Die andere Hälfte besteht darin, Ihre Benutzer und dann die mentalen Modelle zu verstehen . Was werden wir in diesem Kurs behandeln? Zunächst werden wir über die Gestalttheorie sprechen. Du wirst von Sophie hören, sie wird einige der Prinzipien der menschlichen Wahrnehmung behandeln . Sie wird auch über Gestaltungsprinzipien sprechen. Im ersten Teil werden wir uns auf Hierarchie und Ausrichtung konzentrieren . Und dann werden wir im zweiten Teil über Wiederholung, Balance und Kontrast sprechen . Wir werden also auch über einige der visuellen Elemente sprechen, Dinge wie Farbe, Typografie und Ikonographie. Und dann werde ich über menschliche Kognition und UI-Design sprechen. Wir behandeln auch Dinge wie Informationsdesign und wie Sie die Wörter auf einer Seite gestalten. Und decken Sie auch den visuellen Designprozess vom Drahtmodell bis hin zum visuellen Design ab. Schauen Sie sich jetzt diese Seiten an. Ich möchte, dass Sie die folgenden Seiten schreiben und jede dieser Websites 1-10 schreiben , je nachdem, wie glaubwürdig sie für Sie aussehen. Um einen Blick auf diesen zu werfen, geben Sie ihm eine Bewertung von 1-10 Brust Ihre erste Darmreaktion könnte eine Notiz davon auf einer Haftnotiz oder so sein. Was ist mit diesem? Dies ist eine meiner Lieblingswebsites, Links, Autos. Wie würdest du das aus zehn schreiben, ist Vertrauenswürdigkeit und Glaubwürdigkeit. Was ist mit diesem? Wie würdest du das schreiben? Ich kann also wahrscheinlich erraten, was sich Ihre Antworten auszahlen würden. Aber was glauben Sie, stützen Sie Ihre Einschätzung von Vertrauen und Glaubwürdigkeit darauf, wie Sie, basierend auf dem Wissen der Organisation. Die meisten Menschen urteilen über die Glaubwürdigkeit einer Website, die größtenteils auf dem visuellen Design basiert. Es ist also sehr wichtig, eine glaubwürdig aussehende Website zu haben. Es trägt dazu bei, dieses Vertrauen und diese Glaubwürdigkeit aufzubauen. Bei deinem X geht es also nicht nur um Benutzerfreundlichkeit, es geht nicht nur um diese Benutzerfreundlichkeit. Benutzer treffen oft vorhersehbare oder irrationale Entscheidungen und Entscheidungen. Visuelles Design und Ästhetik sind daher entscheidend , um diese emotionale Verbindung zu Ihren Benutzern herzustellen und dieses Vertrauen und diese Glaubwürdigkeit wirklich aufzubauen. Was ist visuelles Design? Visuelles Design ist im Grunde genommen die Praxis, Raster zu entwerfen, Seiten anzulegen, Farbpaletten auszuwählen und Symbole zu entwickeln. Möglicherweise werden Sie nach dieser Definition gefragt , wenn Sie das Assessment für die BCS-Prüfung ablegen. Das ist also die Definition gemäß BCS. Also einige der grundlegenden Prinzipien des visuellen Designs, die Sie wirklich kennen müssen. Zahlen Sie für Nähe, Ausrichtung, Wiederholung und sichern Sie sich einen Kontrast, um sich an diesen Akronympark mit einem C PARCC zu erinnern, damit Sie sich an diese Dinge erinnern können. Als nächstes wird Sophie mit dir über Gestalttheorie sprechen. 2. Gestalttheorie: Hallo, mein Name ist Selfie Smith und ich werde Sie in dieser Lektion durch eine Gestalttheorie führen , die einige Prinzipien der menschlichen Wahrnehmung darstellt. Gestaltprinzipien sind Prinzipien oder Gesetze der menschlichen Wahrnehmung. Sie bilden die Grundlage für viele der Gestaltungsregeln, die wir heute kennen und anwenden. Sie beschreiben, wie wir als Menschen dazu neigen, ähnliche Elemente zu gruppieren, Muster zu erkennen und komplexe Bilder zu vereinfachen. Wenn wir uns Objekte oder Websites oder Benutzeroberflächen jeglicher Art ansehen. In den zwanziger Jahren entwickelte eine Gruppe visuellen Wahrnehmung, die von Psychologen aus Deutschland eine Reihe von Theorien zur als Gestaltprinzipien oder Gestalttheorie bekannt sind. Sie betrachteten die Art und Weise, wie Menschen all den Eingaben, die sie aus dem, was sie lesen, schauen, scannen und verärgern, eine Bedeutung verleihen all den Eingaben, die sie aus dem, was sie lesen, schauen, scannen und verärgern, eine Bedeutung . Und sie fanden heraus, dass unser Gehirn auf bestimmte Weise dazu neigt all diesen Input zu organisieren, um Sinn zu schaffen. Diese Prinzipien helfen uns zu verstehen, wie Menschen in der Regel aus dem, was wir sehen, aussagekräftige Erkenntnisse ableiten, was uns als UX-Designer helfen wird. Denn was wir schaffen wollen, sind sinnvolle Schnittstellen und Interaktionspunkte. Die zentrale Prämisse der Gestalttheorie ist, dass wir als Menschen nur begrenzte Kapazitäten haben , Eingaben zu verarbeiten und immer nach der einfachsten und relevantesten Methode suchen werden, um das, was wir sehen, zu interpretieren. Die Gestalttheorie besagt, dass Menschen nach Mustern, Strukturen, Logik und Formen suchen, wenn wir etwas betrachten. Und wir neigen auch dazu, die Beiträge in Gruppen zu organisieren. Konstruieren Sie die Bedeutung des Ganzen, indem Sie sich die einzelnen Teile ansehen. Aber gleichzeitig neigen wir dazu, das Ganze als mehr als nur die Summe der Teile wahrzunehmen . Wenn wir uns also Websites oder Benutzeroberflächen ansehen, betrachten wir sie nur auf einer. Wir sehen zunächst nicht all die kleinen Elemente. Diese Prinzipien sind für uns als UX-Designer ziemlich wichtig. Wir können sie bei der Gestaltung von Benutzeroberflächen verwenden , weil wir möchten, dass die Leute leicht verstehen, was sie sehen, und ihnen ein Gefühl dafür geben und ihnen , was sie auf dieser Seite tun können. Und wir können effektivere Erlebnisse gestalten, wenn wir verstehen, wie die Leute Inhalte, die sie sehen, tatsächlich gruppieren. Dieses Wissen können wir nutzen, um Inhalte oder auf Websites und anderen Schnittstellen zu organisieren . So ist es für Benutzer einfach, es zu verstehen. Schauen wir uns die sechs Prinzipien an. Sie sind Nähe, Ähnlichkeit, Abbild, Schließung, Fortsetzung und Einschluss. Schauen wir uns die Nähe an. Zunächst besagt das Näherungsprinzip, dass Optik als verwandt und Teil derselben Gruppe wahrgenommen wird , wenn sie nahe beieinander liegt. Es geht also nur um Nähe. Wir können dieses Prinzip nutzen indem wir ähnliche Informationen wie ähnliche Abschnitte innerhalb derselben Seite oder Webanwendungen, Schaltflächen, die sich auf Eingabefelder beziehen, usw. gruppieren wie ähnliche Abschnitte innerhalb derselben Seite oder Webanwendungen, Schaltflächen, die . Wenn wir Usability-Tests durchführen, ist dies tatsächlich eines der am meisten gebrochenen Prinzipien, die wir sehen. Zuallererst, Dinge, die auf einer Website eng beieinander liegen , habe ich eigentlich gar nichts zu tun oder andersherum. Dinge, die verwandt sein und auf einer Webseite zu weit entfernt sein sollten . Webseite. Schauen wir uns einige schlechte Beispiele an. Zuallererst haben wir in diesem Beispiel ein Beispiel für ein Telefon, bei dem die Anweisungen zu weit von den Feldern entfernt sind , auf die sie sich tatsächlich beziehen. Wenn Benutzer also Hilfe suchen oder keine haben können, haben sie ein Problem. Sie müssen dann hochgehen. Sie können es nicht einfach sofort oder in der Nähe sehen. Das ist ein bisschen dasselbe. Wir haben ein Formular mit allen Anweisungen, es gibt fünf Anweisungen oben und dann viele Eingabefelder. Und wieder, weil sie sich nicht nahe beieinander bewegen, sie durch die Verwendung von nicht als Teil derselben Form wahrgenommen . Hier haben wir die andere Seite der Medaille. Dies ist ein Beispiel dafür, dass Dinge, die nahe beieinander liegen, eigentlich nichts miteinander zu tun haben. Da sich die grüne Schaltfläche hier der Nähe der Suchleiste befindet, gehen wir davon aus, dass sie verwandt sind, dass wir die grüne Taste drücken und dann eine Suche durchführen können. Tatsächlich sind sie in diesem Fall überhaupt nicht verwandt. Und wenn Benutzer nach einem Lieferanten suchen, geben sie die Texte in das Suchfeld ein und klicken dann einfach auf die grüne Schaltfläche weil es eine gängige Konvention ist, dass Sie die Suchleiste und Aktionsknopf dort. Also der grüne Button, in einem besseren Design, der grüne Button hätte wegbewegt werden sollen oder es hätten die eigentlichen Suchschaltflächen sein sollen. Denken Sie hier darüber nach, wie hoch die Post Your Life Lordosenstütze ist. Das ist also der Osmanen, in der Mitte links. Was ist der Preis dafür? Ist es der 3099 to five oder ist es der 44, 95? Die meisten Benutzer werden tatsächlich davon ausgehen, dass es sich um die 39, 95 handelt. Und ein Teil des Problems besteht darin, dass der Preis in unmittelbarer Nähe zum Artikel liegt. Und wie wir aus dem Näherungsprinzip der Gestalttheorie wissen , werden Atome, die eng verwandt oder nahe beieinander sind, als verwandt wahrgenommen. Damit gibt es auch andere Probleme . Wir haben dieselbe Hintergrundfarbe für den Preis und den Artikel, der diese Verbindung herstellt , und das Gehäuse wieder. Wir haben also fast eine Grenze um den Preis und den Artikel. Schau dir die roten Kleider auf dieser Seite an und versuche zu überlegen, welche Beschreibung sich auf das Bild bezieht. Ist es der hier oben, der einfarbige, oder ist er hier unten? Dieser Text? Die meisten Benutzer gehen also tatsächlich davon aus, dass es sich um diesen Text hier oben handelt, wie Sie in diesem Beispiel sehen. Also so würde unser Gehirn es gruppieren weil es in der Nähe der roten Kleider ist. Es erstellt dort gewissermaßen diese Gruppierung von Inhalten. Tatsächlich ist es auf der Website inhaltlich so gemeint, dass sie so gruppiert werden sollen. Sie sehen das also auf der rechten Seite. Also, was hätte hier getan werden können? Du hättest etwas mehr Leerzeichen hinzufügen und hier keinen Header zwischen den Bildern und dem Text einfügen können, sondern den Header hier oben platzieren, die Bilder, die Preise und dann ein paar Beschreibungen. Nähe hilft Benutzern, Inhalte zu verstehen. Und hier haben wir ein brillantes Beispiel von Airbnb, wo sie die Inhalte gruppiert haben und wir sofort verstehen, wie Elemente zusammenpassen. Auf dieser Seite gibt es übersichtliche Abschnitte, in denen Inhalte nebeneinander platziert werden und dann diese Beziehung zwischen den Inhalten hergestellt wird. Auch hier haben wir ein Beispiel von einer neuen Seite, wo sie klare Abschnitte für die verschiedenen Arten von Inhalten verwendet haben klare Abschnitte für die verschiedenen Arten von , ohne etwas zu lesen, es einfach überflogen, wir haben dieses Gefühl der verschiedenen Arten von Inhalten. Das nächste Gestaltprinzip ist Ähnlichkeit. Und wie gilt das für das UI-Design? Nun, das Ähnlichkeitsprinzip besagt, dass Optik als verwandt und als Teil derselben Gruppe wahrgenommen verwandt und als Teil derselben Gruppe wenn sie dieselben Eigenschaften aufweist. Wenn wir also Interfaces entwerfen und eine Beziehung zwischen Elementen vermitteln wollen, könnten wir versuchen, ihnen ähnliche Eigenschaften zu geben. beispielsweise Farben, Formen und Layouts verwenden, Sie beispielsweise Farben, Formen und Layouts verwenden, würden viele Menschen sie als Teil derselben Gruppe wahrnehmen, auch wenn sie sich möglicherweise nicht in der Nähe voneinander befinden. Schauen wir uns also einige Beispiele an. Was stimmt hier nicht? Nun, es gibt zwei Call-to-Actions auf seiner Seite, die genau dasselbe tun. Ja, sie sind ein bisschen schwer zu finden. Die orangefarbene Schaltfläche Jetzt anwenden sieht also in keiner Weise wie eine Schaltfläche aus. Zuallererst verstößt es gegen die Konventionen , wie eine Schaltfläche aussehen sollte. Und dann haben wir das grüne Register, Schaltfläche „ Deine Interessen“. Und weil sie sich nicht ähneln, Benutzer diese Verbindung nicht mental zwischen den beiden herstellen , wodurch die Website übersichtlicher als nötig erscheint. Dies ist ein weiteres Beispiel. Das ist also von einer Ticketverkaufsseite, die neu gestaltet wurde. Das war also, bevor das Redesign stattfand. Hier. Um die Ticketpreise und die Auswahlmöglichkeiten zu verstehen , müssen sich die Benutzer jeden einzelnen Abschnitt ansehen , um zu verstehen, was vor sich geht. Wir haben verschiedene Farben, wir haben unterschiedliche Zahlen in den Eingabefeldern und wir haben unterschiedliche Preise. Es erzeugt also diesen sehr verwirrenden Look. Schauen wir uns also an, wie das neu gestaltet wurde. Dies war ein neu gestalteter Ticketkaufprozess. Und wir haben, wir haben das Prinzip der Nähe angewendet. Die Preisoptionen liegen also nahe beieinander. Und dann wieder Ähnlichkeit. Sie sehen aus wie drei vordefinierte Ticketpreise. Wie die Benutzer leicht verstehen werden , dass diese drei Optionen miteinander verwandt sind. Und dann haben wir unten die Möglichkeit, Ihren eigenen Betrag einzugeben , der sich visuell von den vordefinierten Preisen unterscheidet, aber dennoch in demselben Screenfitting-Thema zusammengefasst ist , in dem Sie einen Betrag auswählen. Hier verwenden wir das Ähnlichkeitsprinzip. Dies ist ein Preisbereich , in dem alle verschiedenen Preisoptionen auf ähnliche Weise angeordnet sind , sodass Sie sie leicht vergleichen können. Das dritte Prinzip, das wir uns ansehen werden, ist die Abbildung. Das Grundprinzip besagt, dass Menschen dazu neigen, die Figur vom Boden zu trennen. Die Hauptfigur ist also das, worauf wir uns konzentrieren. Der Rest wird als Hintergrund wahrgenommen. Beim UI-Design können wir Benutzern helfen, diesen Fokus zu schaffen, indem wir etwas hervorheben und den Rest fast als Hintergrund behandeln Wir müssen diesen Schwerpunkt schaffen. In diesem Beispiel haben wir ein kaputtes Prinzip, ein kaputtes Figurenprinzip. Es gibt keine Elemente auf der Seite, die wirklich auffallen. Es gibt viele Farben, Kästchen, es gibt nicht viel Leerzeichen. Die Benutzer haben also keine wirkliche Anleitung, worauf sie sich konzentrieren müssen. Dies könnte zu einer gewissen kognitiven Überlastung führen. In diesem Beispiel führt das Design den Benutzer anhand des Grundprinzips an und betont es. Wenn wir also wissen, dass Menschen Elemente entweder als Fokusobjekt oder als Hintergrund wahrnehmen , können wir das nutzen, um die Aufmerksamkeit auf ein Element zu lenken. Hier konzentrieren sich die Benutzer auf den professionellen Plan als Vordergrund und sehen den Rest als Hintergrund. Und die Designer hier haben wirklich betont, dass der Figurgrund stabil ist wenn Objekte vom Hintergrund zu unterscheiden sind und der Hintergrund diese Interessen hat. Das nächste Gestaltprinzip ist die Schließung. Das Verschlussprinzip besagt, dass das Gehirn die fehlenden Teile füllt , um eine vollständige Figur, ein vollständiges Bild zu erhalten . Es muss genügend Entzündungen vorhanden sein damit die Menschen den fehlenden Teil ausfüllen können. Weil wir auf unserem Vorwissen und unserer Erfahrung aufgebaut haben, um diesen Sinn zu entwickeln. Es muss also etwas geben, das die Menschen erkennen können, damit sie dieses Verständnis des Ganzen entwickeln können. Hier haben wir ein gutes Beispiel von Netflix. Und obwohl wir nur die ersten Filme sehen, verstehen wir, dass es auf der rechten Seite mehr Optionen gibt. Hier kommt es also auf den Abschluss an, weil unser Verstand die Lücken füllt , was nach den ersten Filmen zu erwarten Wir haben Erfahrung damit, wir haben ihn schon einmal gesehen, er folgt auch einer Konvention. Neben der Schließung auch Nähe und Fortführung eine Rolle. Closure kann verwendet werden, wenn wir auf kleinem Raum eine Botschaft vermitteln oder ein Konzept stärken müssen , wir den Benutzern begrenzte Informationen geben und dann erwarten wir, dass sie verstehen und Sinn finden es Beispiele hierfür sind Icons, sind Benachrichtigungen. Es muss einfache und auf diese grundlegenden Elemente reduziert sein , damit Menschen ihre Bedeutung schnell verstehen können. Aber gleichzeitig können wir nicht zu viele Informationen wegnehmen, können wir nicht zu viele Informationen wegnehmen denn dann würden die Benutzer nicht genug haben, um diese Lücke, diesen Verschluss selbst zu schaffen. Das nächste Prinzip, über das wir sprechen werden, ist die Fortsetzung. Das Kontinuitätsprinzip besagt, dass Objekte, die auf einer Linie oder Kurve platziert werden, als stärker miteinander verbunden wahrgenommen werden als Objekte , die nicht ausgerichtet sind. In der Benutzeroberfläche wird Kontinuität verwendet, wenn bestimmte Elemente darauf hindeuten, dass wir unsere Aufmerksamkeit auf einen bestimmten Ort oder eine bestimmte Richtung richten sollten . Beispiele hierfür können Miniaturansichten in einer Galerie, eine Folie mit Bildern oder ein Drop-down-Menü sein. Also, wenn Sie eine Gruppe von Elementen wie Fotogalerien, Schieberegler, Tabs oder sogar einfache Listen sehen. Möglicherweise stellen Sie jetzt fest, dass sie die Fortsetzung verwenden, dieses Prinzip der Fortsetzung. Objekte. Wir können es in der Benutzeroberfläche verwenden, wenn wir Objekte in der Nähe platzieren und dadurch die Augen des Benutzers dazu bringen, von einem zum anderen zu springen , von einem zum nächsten. Ein Beispiel dafür ist Uber Eats, wo wir eine Fortsetzung haben , die ins Spiel kommt. Wir haben das Menü oben, ob es nun irgendwie weiter vom Bildschirm entfernt ist. Und dann wieder das neueste Steal the Restaurant und Belohnungen und so weiter. Fortsetzung funktioniert jedoch nicht nur bei horizontalen Bewegungen, sie kann das Auge auch vertikal durch eine Komposition führen , sodass wir gezwungen sind, durchzublättern und Elemente anzusehen. Du kennst es also von Instagram und Facebook und viele soziale Medien nutzen dieses Prinzip der Fortsetzung, um uns irgendwie süchtig zu machen. In diesem Beispiel von Airbnb haben wir einheitliche Elemente, die übersichtlich angeordnet und zu Karten gruppiert sind , die dann den Blick nach unten durch die Inserate lenken. Das letzte Gestaltprinzip ist die Einschließung. Das Einschließungsprinzip besagt, dass Objekte, die von einer Grenze umgeben sind, als verwandter wahrgenommen werden. Hier haben wir ein Beispiel , in dem die Produkte nach Zielgruppen gruppiert sind. Wir haben das private und das geschäftliche Publikum. Und Farbe wird verwendet, um den Inhalt für jede dieser Zielgruppen einzuschließen . Da das Prinzip der Einfriedung verwendet wird, der Inhalt innerhalb des Rahmens kann der Inhalt innerhalb des Rahmens unterschiedliche visuelle Ausdrucksformen haben, aber dennoch aufgrund dieser gesamten Einfriedung der dass der Inhalt für dieses bestimmte Publikum. Auf Mobilgeräten sehen wir oft, das Prinzip der Einhausung verwendet wird. Denn hier werden Inhalte oft in Karten präsentiert, können hier als Benachrichtigungen sein oder es könnte sich um Nachrichtenartikel oder in sozialen Medien handeln. Wir sehen es auch. Auf dieser Seite der Sportnachrichten werden Gehäuse auf zwei verschiedene Arten verwendet. Wir sehen in den Artikeln, die Artikel selbst einen Rand haben, was darauf hinweist, dass das Bild und der Artikel zusammengehören. Außerdem ist der Inhalt im Boden farblich umschlossen. Man hat das Gefühl, dass der gesamte Inhalt im schwarzen Bereich verwandt ist. Sie müssen den Header nicht lesen, um das zu verstehen. Wir können die Gestaltprinzipien und dieses Wissen darüber, wie wir als Menschen Objekte und Elemente auf einer Website wahrnehmen, nutzen dieses Wissen darüber, wie wir als Menschen Objekte und Elemente auf einer Website wahrnehmen , um Inhalte zu organisieren und so die Nutzer zu dem zu führen, was wir wollen, dass sie sehen. Wir können ihnen helfen, ihre Ziele zu erreichen, indem wir dieses Zeichen bereitstellen, das die kognitive Belastung reduziert und dadurch die Bedeutung der gesamten Schnittstelle verbessert. In der nächsten Lektion werden wir also über die ersten beiden Gestaltungsprinzipien sprechen die ersten beiden Gestaltungsprinzipien , nämlich eine hierarchische Ausrichtung. 3. Gestaltungsprinzipien – Hierarchie und Ausrichtung: In einigen werden wir fünf Gestaltungsprinzipien durchgehen und sie sind Hurricane, Alignment, Repetition, Balance und Kontrast. In dieser Lektion werden wir über Hierarchie und Ausrichtung sprechen , zwei wichtige Gestaltungsprinzipien. Wir beginnen mit der Hierarchie. Hierarchie macht Organisation aus und warum ist sie wichtig? Ja, die Leute brauchen tatsächlich Hilfe. Konzentriere dich darauf, zu wissen, wo du zuerst hinschauen musst, und half dabei herauszufinden, was auf seiner Seite wichtig ist. Die Art und Weise, wie Benutzer Inhalte verstehen oder lesen, ist oft das Scannen. So können wir das Scanverhalten verbessern, indem wir eine klare Hierarchie bereitstellen , damit sich die Benutzer auf die Hauptaufgaben konzentrieren können. Nebenbei lügt das Gehirn. Ein Mangel an visueller Hierarchie verhindert, dass das Gehirn Interessenbereiche scannt und in Zonen einteilt. Wenn wir schnell verstehen, was wir sehen, werden wir frustriert und werden wahrscheinlich wieder die Seite verlassen. Nun, das ist ein etwas übertriebenes Beispiel. Es fehlt völlig an visueller Hierarchie. Die Elemente auf dieser Seite konkurrieren gewissermaßen um die Aufmerksamkeit des Benutzers. Und wir haben keine Ahnung, wo wir suchen sollen. Worauf müssen wir unsere Aufmerksamkeit richten? Was ist wichtig? Wir haben keine Ahnung. Und wir müssen uns daran erinnern , dass die Leute nicht lesen. Sie scannen und haben versucht zu finden, was dem, was sie suchen, vage ähnelt. Wie gestalten wir also für Hierarchien? Zunächst geht es darum, Elemente nach Wichtigkeit anzuordnen. Es ist die Art und Weise, wie wir Elemente hervorheben, um den Benutzer dazu zu bewegen, ein bestimmtes Objekt auszusehen und mit ihm zu interagieren. Zuerst noch eine Sekunde und noch ein Drittel und so weiter. Wir können die Aufmerksamkeit des Betrachters lenken, indem wir Größe, visuelles Gewicht, Farbe und Position verwenden. Außerdem können wir Hierarchien schaffen , indem wir ähnliche Elemente nahe beieinander gruppieren , um diese Beziehung nahezulegen zwischen Information oder Funktionalität. Dies basiert auf dem Gestaltprinzip der Nähe. Wir wissen, dass das Gehirn Inhalte, die sich in der Nähe zueinander befinden, als verwandt wahrnimmt . Okay, was sind die wichtigsten Informationen auf dieser Seite? Stellen Sie sich vor, Sie haben genauso nach staatlichen Ausschreibungen gesucht. Was glaubst du, würdest du tun? Die meisten Benutzer haben uns tatsächlich gesagt , dass sie einfach die Ergebnisse herunterladen würden. Vielleicht würden sie ganz unten hinuntergehen und dort nachschauen. Aber auch hier hätten sie nicht wirklich einen klaren Ort, an den sie gehen könnten. Auch hier erinnern wir uns, dass die Hierarchie Benutzern hilft, die wichtigsten Informationen in der richtigen Reihenfolge zu finden. Was sind also die wichtigsten Informationen auf dieser Seite? Tatsächlich gibt es keine Ergebnisse, die Ihrer Auswahl entsprechen. Das Design dieser Seite führt den Benutzer nicht zu den wichtigsten Informationen. Der Anwendungsfall hier ist, dass Benutzer eine Eintrittskarte für eine Aufführung kaufen möchten. Als wir diese Seite getestet haben, wählen alle Benutzer das Datum und dann die Uhrzeit aus, und dann gingen sie direkt zur Schaltfläche Weiter. Fast alle Anwendungen fehlen dort. Wie möchten Sie Ihre Sitzplätze auswählen? Wie es nicht erwartet wurde und in Sichtlinie , als sie sich von der Zeit zum Knopf bewegten. Hier ist ein Beispiel für eine großartige Hierarchie. Diese Website ist rein textlich, hat aber unterschiedliche Schriftgrößen, die Zeilen zur Trennung von Inhalten, die Gruppierung ähnlicher Inhalte und schließlich die Farbe. Es gibt eine klare Hierarchie. Auf dieser Website werden verwandte Inhalte in verschiedene Abschnitte gruppiert dieser Auswahl in verschiedene Abschnitte gruppiert, in denen sie ihre Kalenderkategorien auswählen. Und alle Kategorien haben klare Überschriften, wodurch diese visuelle Hierarchie entsteht. In diesem AirBnB-Beispiel wurden verwandte Inhalte gruppiert. Jede Kachel mit einem Zuhause hat ihre eigene Gruppierung von Elementen sowie eine eigene Hierarchie. Das Bild zieht uns an. Dann haben wir die Überschrift, die das schwierigste Studio-Apartment ist. Also haben sie Größe benutzt, um uns anzulocken. Der Preis ist unterstrichen und fett. Die Bewertungen werden durch Farbe verbessert. Wichtige Informationen wie Anzahl der Gäste, Art der Wohnung sind ausgegraut und weniger sichtbar. Also die visuellen Elemente, mit denen sie wirklich gearbeitet haben, die verschiedenen visuellen Elemente, die Topographie, die Größe, die Farben und die Unterstreichungen, um eine klare Hierarchie zu schaffen, lassen Sie uns darüber sprechen Ausrichtung als nächstes. die Ausrichtung entsteht ein scharfes, einheitliches Design. richtige Ausrichtung ist eine der besten Möglichkeiten, um Ihre Designs professionell aussehen zu lassen und das Gefühl die Benutzeroberfläche bewusst gestaltet wurde. Offensichtlich haben wir links eine ziemlich schlechte Ausrichtung. Und im Beispiel rechts haben wir ein gut ausgerichtetes Beispiel für eine Website. Unser Gehirn, Liebesmuster. also Elemente auf Ihrer Seite ausrichten, kann der Benutzer diese Reihenfolge und Struktur wirklich leicht erkennen. Dies ist wichtig , wenn Sie Wireframes oder die endgültigen visuellen Designs erstellen. Es gibt verschiedene Arten der Ausrichtung. Sie können sich links ausrichten. Sensor oder Fahrt, oder unten oder oben, Alonzo, dein Inhalt. Auf einer Website ordnen wir Elemente gerne so an, dass jedes Element, egal ob es sich um Texte, Bilder, Schaltflächen usw. handelt, eine visuelle Verbindung zu etwas anderem auf der Seite hat . Horizontal oder vertikal. Es strafft das Design und macht es weniger unordentlich. Es kann auch verwendet werden, um ein Gefühl der Verbindung zwischen Elementen zu erzeugen , die möglicherweise nicht nahe beieinander liegen. Vielleicht hast du nicht darüber nachgedacht. Aber hinter jeder Website verbirgt sich eine unsichtbare Lektüre, oder zumindest sollten sie es sein. Und dies hilft dabei, diese Ausrichtung auf der Website zu erreichen. Das Raster ist auf der gesamten Website immer dasselbe, kann jedoch auf unterschiedliche Weise verwendet werden. Sie können Elemente auf verschiedene Weise in demselben Raster platzieren , um den gewünschten Ausdruck zu erhalten. Egal, ob Sie eine Skizze, ein Drahtmodell oder ein ausgefeilteres Design erstellen, die Festlegung dieses Layouts ist entscheidend. Sie möchten also darüber nachdenken, wie hoch die Margen sein sollten. Wie viele Spalten gibt es? Wie breit sollte die Dachrinne sein? B. Das ist also auch dieser Abstand zwischen dem Inhalt und der Spaltenbreite. In jedem Designprogramm wie Adobe oder Sketch oder Figma können Sie Ihre eigene Rasterstruktur einrichten. Sie können verschiedene Setups ausprobieren. Normalerweise. Für eine Desktop-HD haben Sie normalerweise ein Raster mit 12, 12 Spalten. Das ist sozusagen der Standard, aber du kannst immer davon abweichen, um etwas anderes zu machen oder einen anderen Ausdruck zu kreieren. Manchmal würde man an einer Website arbeiten, die bereits über eine etablierte Squid-Struktur verfügt. Also wirst du natürlich einfach den benutzen. Sobald Sie Ihre Struktur eingerichtet haben, können Sie beginnen, Elemente zu dieser Struktur hinzuzufügen, um sicherzustellen, dass die Elemente mit anderen Elementen auf dieser Seite übereinstimmen . Spielen Sie also mit der Platzierung der Elemente herum, um diese interessante effektive Ebene mit einer klaren Hierarchie zu erstellen . Die Verteilung der Elemente ist ein weiterer Aspekt der Ausrichtung. Also hier haben wir einige Elemente. Es sieht aus, als ob sie gerade reingeworfen wurden. Könnten Bilder sein, es könnten Text sein, es könnten Schaltflächen sein. Eine Möglichkeit, das zu verringern , besteht darin mit dieser Funktion in dem von Ihnen verwendeten Designprogramm zu arbeiten . Also diese Verteilung vertikal und horizontal, um diese Ordnung und dieses Gefühl der Organisation zu schaffen . Nebenbei haben wir hier ein viel klareres, saubereres Aussehen und es sieht professioneller aus. Auf dieser Seite haben wir einen etwas komplexen Ausdruck. Es gibt nicht viele Inhaltselemente oder Abschnitte, die mit etwas anderem auf dieser Seite übereinstimmen. Sie können also sehen, dass die horizontale Ausrichtung hier oben ziemlich gut ist. Und dann fahren wir mit dem nächsten Abschnitt fort. Ist das abgestimmt? Wir haben also die beiden Artikel, aber dann stimmen diese drei Pfade nicht wirklich mit dem Rest des Inhalts überein. Wenn wir uns die vertikale Ausrichtung ansehen, haben wir hier diese Abschnitte, die Gesundheit und das Wohlbefinden. Sehen Sie nach, ob das mit irgendetwas auf der Seite übereinstimmt , das nicht wirklich übereinstimmt. Eine Möglichkeit, dieses Design zu straffen, besteht also darin , sicherzustellen , dass einige dieser Elemente hier oben tatsächlich mit den Artikeln da unten übereinstimmen, die für eine viel ruhigere und geordnetere Atmosphäre sorgen würden schauen. In diesem Beispiel haben sie tatsächlich versucht, das Netz zu durchbrechen. Es gibt also auch auf dieser Website eine zugrunde liegende Grid-Struktur . Aber um diese Verbindung zwischen diesem Abschnitt hier oben und den anderen Arten von Inhalten hier unten herzustellen . Sie haben die verschiedenen Abschnitte überlappt, um diesen Fluss und diese Dynamik auf dieser Seite zu erzeugen. Scrollen Sie also und scrollen Sie nicht hier. Das ist die Frage. Würdest du die Schriftrolle hier benutzen, würdest du scrollen? diesen horizontalen Leerraum haben wir das Gefühl , dass die Seite wahrscheinlich genau dort endet, wir haben das Gefühl, abgeschlossen zu sein. Auf dieser Seite gibt es mehr Inhalt. Dieses Beispiel zeigt also, dass wir dieses horizontale Leerzeichen vermeiden wollen , weil es für den Benutzer ein Gefühl der Vollständigkeit erzeugt. Äh, Studien aus dem Jahr 2018 haben gezeigt , dass Nutzer etwa 57% ihrer Seitenaufrufzeit damit verbringen , dass sie nicht mehr als doppelt so hoch sind. 74% der Betrachtungszeit wurden in den ersten beiden Vollbildschirmen verbracht. Die Benutzer hielten also tatsächlich bei den ersten beiden Abschnitten an. Um dies zu vermeiden, könnten wir, wie wir im anderen Beispiel gesehen haben, versuchen, überlappende Elemente auf der gesamten Website zu verwenden, um diesen Fluss an der Seite zu erzeugen und nicht das Gefühl der Vollendung zu erzeugen. Als nächstes haben wir die restlichen Designprinzipien. Und sie sind Wiederholung, Ausgewogenheit und Kontrast. 4. Gestaltungsprinzipien – Repetition, Balance und Kontrast: In diesem Abschnitt behandeln wir die Gestaltungsprinzipien Wiederholung, Ausgewogenheit und Kontrast. Fangen wir mit der Wiederholung an. Wiederholung ist das, was ein Design vereint , das viele verschiedene Elemente hat. Das Prinzip der Wiederholungen oder Muster bedeutet also einfach, dass wir dieselben Elemente wiederverwenden, es sind ähnliche Elemente im gesamten Design. die Wiederholung bestimmter Designelemente in einem Design vermitteln wir ein klares Gefühl von Einheit, Konsistenz und Zusammenhalt. Indem Sie Elemente eines Designs wiederholen, schaffen Sie sofort und sofort dieses Gefühl von Vertrautheit oder Identität und geben den Benutzern ein Gefühl von Konsistenz und Zusammenhalt. Die Wiederholung kann auf verschiedene Arten erfolgen. Sie können dieselben Farben, Schaltflächen, Stile, Interaktionsmuster, Schriftformen für das grafische Styling oder andere Elemente eines Designs wiederholen Schaltflächen, Stile, Interaktionsmuster, Schriftformen für das grafische Styling . Oft gibt es in Unternehmen ein Designsystem, das die Schaltflächenstile, die Interaktionsmuster, die Symbole, die Typografie usw. definiert , sodass sich diese Elemente in ihren Produkten wiederholen können in ihren Produkten wiederholen können genau um dieses Gefühl von Zusammenhalt und Identität in ihren Produkten zu erzeugen . Konsistenz ist das Ergebnis. Wenn du also die Stile wiederholst, hast du nur runde Knöpfe und keine quadratischen Knöpfe. Sie haben dasselbe College, dieselbe Topographie und so weiter. Sie vermeiden diese unübersichtliche Benutzeroberfläche. Fangen wir mit einigen schlechten Beispielen an. Meine Güte, das ist eines dieser Beispiele für Websites, die so schlecht sind, dass man fast denkt, dass sie nicht existieren. Ich habe es nur zum Spaß hinzugefügt. Um etwas klarzustellen. Das Fehlen jeglicher Wiederholung und Kohärenz hier ist einfach empörend. Es ist so inkonsistent. Es hat viele Farben, viel Spaß. Es hat Großbuchstaben, Kleinbuchstaben. Es hat überall Knöpfe und Handlungsaufforderungen. Es sieht alles einfach so aus, als wäre es hineingeworfen worden. Es ist auf so vielen Ebenen falsch. Wie ist die Button-Konsistenz hier? Schau mal. Wir haben also drei verschiedene blaue Schaltflächen und sie haben alle, erstens, sie sind nicht auf die Eingabefelder ausgerichtet , die sich darauf beziehen. Aber sie haben unterschiedliche visuelle Stile, einige sind quadratisch, manche rechteckiger. Sie haben eine unterschiedliche Topographie darin. Und wieder verschiedene visuelle Stile der Tasten. Wir haben dieses Beispiel schon einmal gesehen. Es gibt tatsächlich zwei Knöpfe auf dieser Seite. Der orangefarbene Button-Stil sieht also aus wie das visuelle Element , das hier unten verwendet wird . Lass uns das erkunden. Der grüne Knopf. Sieht aus wie ein echtes interaktives Element. Ein einheitliches Styling wäre hier für den Benutzer hilfreich. Hier ist ein weiteres Beispiel für eine inkonsistente Website bei der die Header unterschiedlich sind, ihre Groß- und Kleinschreibung. Wir haben Unterstreichungen im Text, der keine Links ist. Das ist also die Konvention, dass unterstrichener Text der Link ist , der nicht verwendet wurde. Und im Grunde erzeugt es einfach diesen sehr unübersichtlichen Eindruck von dieser Seite. Hier haben wir ein einfaches, aber gutes Beispiel für Wiederholung. Das Farbschema ist einheitlich. Die Tastenstile sind alle ähnlich. Also haben wir, es hat diesen Farbverlauf, abgerundete Knöpfe. Die Kartendesigns haben außerdem abgerundete Ecken und sind im gesamten Design einheitlich in Bezug auf die Überschriften und den Haupttext. In diesem Beispiel haben wir auch ein gutes Beispiel für Wiederholung. Wir haben die visuellen Elemente, die drei Streifen, die sich auf der gesamten Website wiederholen. Wir haben ein einheitliches Farbschema, dieselben verwendeten Schriftarten und dann haben wir die lila Spendenschaltflächen für Spenden. Und dann sind die anderen Aktionstasten gelb. In diesem Fall verwenden sie also den lila Farbknopf , um ihn wirklich hervorzuheben. Sie haben die Wiederholung der Tastenstile hier tatsächlich unterbrochen . Schauen wir uns das Prinzip des Gleichgewichts an. Ausgewogenheit verleiht einem Design Stabilität und wirkt sich positiv auf die Attraktivität aus. Ausgewogen spielt gerade für die Attraktivität einer Website eine wichtige Rolle . Gleichgewicht hat mit den visuellen Gewichten der Elemente zu tun , die Sie auf eine Seite legen. Die Art und Weise, wie wir Elemente auf einer Seite anordnen, um ein Gefühl von Ausgeglichenheit und Ruhe zu erzeugen . Wir möchten nicht, dass sich das Design irgendwie umkippt, denn wenn Websites ausgewogen sind. Benutzer bekommen dieses Gefühl von Stabilität und einfach Ruhe. Es gibt zwei Hauptarten des Gleichgewichts. Wir haben ein symmetrisches Gleichgewicht und ein asymmetrisches Gleichgewicht. Symmetrisches Design, Layoutelemente gleichem Gewicht auf beiden Seiten einer imaginären Mittellinie. Diese Form des Gleichgewichts bringt ein harmonisches Gefühl oft zu kurz. Und dies ist die gebräuchlichste Art der Ausgewogenheit, wenn es um Websites geht. Balance durch Asymmetrie ist , wenn wir durch Spannung ein Gleichgewicht schaffen. Deshalb spielen wir die Elemente bewusst nicht auf einer Seite der Mitte, sondern platzieren sie auf interessante Weise auf der Website, wodurch diese Spannung entsteht, aber trotzdem ein Gefühl der Ausgewogenheit entsteht. Hier haben wir eine Seite, die nicht so ausgewogen ist, also gibt es riesige Mengen an Leerzeichen. Das eine Bild, das da draufgelegt wurde, der eine Gegenstand gibt dem Design einfach den letzten Schliff. Es fühlt sich an, als ob es sich einfach nicht sehr harmonisch anfühlt. Dies ist ein Beispiel für eine symmetrisch ausgewogene Website. Alles auf dieser Seite ist eine Linie um die Mittelachse. Sogar die Texte sind durchweg mittig ausgerichtet. Ein weiteres Beispiel für symmetrische Wir haben zwar alle Elemente mittig ausgerichtet, aber das muss nicht sein. Die Header und die Heldenbilder müssen nicht alle mittig ausgerichtet sein, um eine ausgewogene Website zu erhalten. Sie können immer noch nur ein übergeordnetes Gleichgewicht haben , entweder durch Symmetrie oder Asymmetrie. Dies ist ein Beispiel für Ausgewogenheit durch Asymmetrie. Es kann verwendet werden, um einen dynamischeren Ausdruck zu erzeugen. Hier wird ein Gleichgewicht erreicht, indem Elemente unterschiedlicher Größe und Gewichte in Kombination mit Leerzeichen verwendet werden, um ein dynamischeres Design zu schaffen, das dennoch ein Gefühl von Ausgewogenheit vermittelt. Hier wird das Gleichgewicht erreicht indem die Netzstruktur vorangetrieben wird. Wir haben tatsächlich einen ziemlich einfachen, linksgerichteten Hauptteil. Und dann gibt es noch ein bisschen Spiel mit den Schriften, um ein effektiveres Design zu kreieren. Das ist also eine Website von innovativen Branchen. Dieses Gefühl von Dynamik und Asymmetrie passt also Dynamik und Asymmetrie passt gut zum gesamten Markenerlebnis. nächste Designprinzip, das wir durchmachen werden , ist Kontrast. Kontrast ist die effektivste Methode, um mit Ihrem Design Wirkung zu erzielen und zu unterstreichen. Wenn ein Design wirklich auffällt oder Gott bewahre, wie manche sagen würden, gibt es höchstwahrscheinlich einige Kontraste. Kontrast spielt eine wichtige Rolle, wenn es darum geht , Informationen auf einer Seite zu organisieren. Es hilft dem Benutzer bei den wichtigen Inhalten und Aufgaben. Kontrast ist auch sehr wichtig , wenn es um barrierefreies Design geht. Schaffung barrierefreier Designs kann Kontrast das Lesen von Inhalten erschweren, insbesondere für Menschen mit Sehbehinderungen. Sie können Kontrast erzeugen, wenn zwei völlig entgegengesetzte Elemente verwenden. Dies können große oder kleine Schriftgrößen oder größere kleine Elemente sein. Hier haben wir ein Beispiel, bei dem der Header im Vergleich zu den drei Arten von Call-to-Actions riesig ist . Das ist also nur eine subtile Art , diesen Kontrast zu nutzen , um einen ersten eindrucksvollen Eindruck zu hinterlassen. Auch hier haben wir einen Kontrast in der Größe. Sie haben mit unterschiedlich großen Texten und Bildern gespielt, um Kontraste zu erzeugen. Kontrast wird auch verwendet, wenn wir klassische und moderne Fonds mischen . Also hier, wenn wir Serifenschrift gemischt haben, das ist die lockige Art von zwei Schriften mit einer San-Serifenschrift, dieser Art von Schrift. Das ist also ein Kontrast, der auch für Dynamik sorgt. Mailchimp verwendet, das Typphasen in ihren Designs erstellt. Sie haben also ihre Header als Cera-Schriften bekommen, und dann haben sie den Haupttext als Moschee, in der serifenlose Schriftfarbe auch ein effektives Mittel ist , um Kontrast zu erzeugen. Z. B. a. Call-to-Action-Buttons , die auffallen, oder Farben, um die Aufmerksamkeit auf etwas auf der Seite zu lenken. Beide Seiten haben kräftige Farben verwendet, um ein eindrucksvolles Beispiel für einen guten Kontrast zu schaffen , der hauptsächlich durch die Verwendung von Farbe kontrastiert. Im Beispiel von Spotify haben wir nur den Kontrast durch die Verwendung von Farbe erhalten. Wir haben also diese grüne Kontrastfarbe sich vom Rest des Hintergrunds abhebt. Wir können auch Kontrast durch die Verwendung von Leerzeichen erzeugen. Im Grunde ist der negative Raum oder der Leerraum, wie er oft genannt wird, der Bereich des Layouts , der leer gelassen wird. Es kann um die Objekte herum sein, wie hier auf der rechten Seite, zum Beispiel um Schaltflächen oder Text im Allgemeinen. Es könnte aber auch die Stelle innerhalb der Schaltfläche sein , wie im Beispiel links Leerraum ist eine Art Atempause für all die Objekte, die Sie auf Ihrer Seite auf Ihrem Bildschirm platzieren. Wie bei anderen Benutzeroberflächenelementen müssen Sie als Designer verstehen, welche Rolle Leerzeichen spielen. Und dann können Sie experimentieren, um das richtige Gleichgewicht zu finden , das zu den übrigen Elementen passt . Mass to go von der Interaction Design Foundation erklärte , dass Leerzeichen wie eine Leinwand sind. Es ist der Hintergrund, der die Elemente in einem Design zusammenhält und es ihnen ermöglicht, sich von anderen abzuheben. Der erste Schock ist für viele fast zu groß. Auf dieser Seite. Es ist ein lustiges Beispiel, also habe ich es hinzugefügt. Jedenfalls. Der Inhalt und das Layout sind auf dieser Seite so überwältigend. Und wenn Sie es aufschlüsseln, ist das alles auf den Mangel an Leerzeichen zurückzuführen. Es gibt also keinen Ort, an dem Sie Ihre Augen fokussieren und ausruhen können. Die Benutzer sind einfach überall und die Elemente auf der Leinwand sind einfach überwältigend. Es ist hineingeworfen. Hier nutzen wir Leerzeichen schlecht. Es ist fast so, als ob hier versehentlich Leerzeichen erstellt wurden , weil keine Artikel im Geschäft vorhanden sind. Dies führt jedoch zu einem Ungleichgewicht im Design. Hier haben wir einige gute Beispiele dafür, wie Leerzeichen den Inhalt wirklich atmen lassen. Du bist nicht überwältigt. Sie können ganz normal von einem Abschnitt zum anderen gehen . Und noch ein Punkt , den es zu beachten gilt, ist, dass Leerraum nicht breit sein muss. Es kann eine farbenfrohe Leinwand sein. Als nächstes haben wir einen Abschnitt über visuelle Elemente. Wir werden Farbtypografie und Ikonographie durchgehen. 5. Visuelle Elemente – Farbe, Typografie und Ikonographie: In diesem Teil des Kurses werden wir einige der visuellen Elemente durchgehen , die wir im visuellen Teil des Designprozesses verwenden können . Das ist Farbe, Typografie und Ikonographie. Und wir beginnen mit Farbe. Farbe ist ein ziemlich mächtiges psychologisches Instrument , um Benutzer in ein Produktdesign einzubeziehen. Farbe gibt an, welche Elemente interaktiv sind, wie sie sich auf andere Elemente beziehen und wie wichtig sie sind. Wichtige Elemente sollten am meisten auffallen wie hier, wo klar ist, dass es einen klaren Aufruf zum Handeln gibt. Ein gelber Knopf, der auftaucht. Texte und wichtige Elemente wie Symbole sollten auch Zulassungsstandards erfüllen, wenn sie auf farbigen Hintergründen erscheinen. Sie sollten also immer noch lesbar und klar sein. Die Schaltflächen, die Symbole und alle Elemente, die Sie wirklich auf diese Leinwand legen. Farbe bestimmt auch die Stimmung eines Designs. Hier haben wir zum Beispiel drei verschiedene Websites, und es ist klar, dass sie alle Verwendung von Farben ganz unterschiedlich gebrandmarkt wurden. Der erste, der ziemlich lebendig und sehr energisch ist. Und dann haben wir den in der Mitte , der eine organischere Atmosphäre hat. Es mildert erdige Farben irgendwie ab. Und dann haben wir Lorna Jane, eine ihrer Sortimente. Das ist eher ein sanfter, weiblicher Ton. So können Sie mit dem richtigen Farbschema eine Atmosphäre von Eleganz, Wärme oder Ruhe schaffen . Oder Sie können das Bild von mehr Verspieltheit und Jugendlichkeit vermitteln . gibt es viele Überlegungen Bei der Auswahl der Farben für das Design gibt es viele Überlegungen. Der Erfolg der Farbauswahl hängt vom Verständnis und der Wertschätzung der Farben des Betrachters ab, abhängig von seinem Hintergrund und seinen früheren Erfahrungen. Sie schmecken auch. Wenn wir anfangen, Farben in unseren Designs zu verwenden, müssen wir uns der kulturellen Unterschiede bewusst sein. Nur ein Experiment hier. Welche Farbe würdest du mit dem Tod verbinden? Interessanterweise ist das von Kultur zu Kultur ganz anders. In der westlichen und japanischen Kultur ist diese Farbe schwarz, während sie in chinesischen und hinduistischen Kulturen in südamerikanischen Kulturen grün ist. Das ist also nur eine interessante Betrachtungsweise von Farbe. Was bedeutet Rot für dich? Schon wieder? In westlichen Kulturen bedeutet es Gefahr. Es bedeutet billig und ein Schnäppchen. In der chinesischen Kultur bedeutet es Erfolg und Wohlstand. In der westlichen Kultur könnten Aktien, die steigen, auf einem Aktienmarkt als grün dargestellt werden, was gut ist, und Aktien, die rot fallen. Während in China die Aktien , deren Werte gestiegen sind, als rot dargestellt werden könnten , ist dies ein Zeichen des Erfolgs. Und nun, es ist sehr interessant, hier können Sie auf diese Website gehen und dann diese Übersicht über die verschiedenen kulturellen Bedeutungen der verschiedenen Farben sehen . Es ist immer gut, noch einmal nachzuschauen , wenn Sie Farben verwenden. Wenn wir mit Farbe entwerfen, ist es gut zu wissen , dass die Art und Weise, wie Farben funktionieren , tatsächlich eine Wissenschaft ist . Sie haben das wahrscheinlich alle schon 100 Mal gesehen, 1.000 Mal in Grundschulen und bis jetzt. Aber wir gehen einfach noch einmal die Grundlagen durch. Wir haben das Farbrad, das die Primärfarben Gelb, Blau und Rot anzeigt . Und dann haben wir die Sekundärfarben, die gleichmäßig zwischen den Primärfarben gemischt sind. Dann haben wir die Tertiärfarben , also Primärfarben der sekundären Hälfte. Andererseits haben wir die verschiedenen Bereiche der wärmeren, der heißeren, der kühleren und der kalten Farben, kühleren und der kalten Farben Farben aus dem Farbrad auf unterschiedliche Weise kombinieren. Eine davon ist also ein monochromatisches Farbschema. Deshalb wählst du eine Farbe und dann verschiedene Variationen dieser Farbe. Sie können auch eine sympathische Farbpalette haben. Das ist der Fall, wenn Sie Farben verwenden die nahe beieinander liegen, im Farbrad wie in diesem Fall hier, wo wir in beiden Fällen erdige Farben haben . Wenn Sie einen dynamischeren Ausdruck erstellen möchten, können Sie komplementäre Farben verwenden. diesem Fall verwenden Sie direkt entgegengesetzte Farben aus dem Farbrad. Und die Farben werden sich dann irgendwie gegenseitig intensivieren. Wir haben hier zwei Beispiele. Sie haben die Lebendigkeit auf der linken Seite und dann haben Sie die abgeschwächte Version, die Fahrt. So kann die Komplementärfarbe sowohl lebendiger als auch heller verwendet werden, aber auch, wenn Sie mit einer abgeschwächten Farbpalette damit arbeiten . Es gibt ein paar verschiedene Tools denen Sie ein Ziel haben und mit den verschiedenen Farbpaletten herumspielen können. Canva hat eine coole Farbe auf ihrer Website, auf der Sie eine Farbe auswählen und dann auswählen, ob sie einfarbig, komplementär oder was auch immer Sie wollen, sein soll. Und dann gibt es einige Beispiele für darauf basierende Farbkombinationen. Also kannst du da reingehen und dir das ansehen. Adobe hat ein weiteres Hallo, nimm ein Farbwerkzeug, mit dem du mit den verschiedenen Farbkombinationen experimentieren kannst mit den verschiedenen Farbkombinationen du auswählen kannst, wenn du es möchtest. Komplementär analoge monochromatische Triade. Wie Sie gesehen haben, gibt es viel mehr Kombinationen, die ich heute hier durchgemacht habe. Wenn Sie sich also damit befassen möchten, können Sie Adobe-Site gehen und damit spielen und sehen, welche Art von Pellets daraus hervorgehen. Daher ist Farbe auch wichtig für die Zugänglichkeit in unseren Designs, wir möchten für einen guten Kontrast sorgen. Dies ist besonders wichtig für jedes Gerät, das im Freien verwendet wird. Für eine mobile App, einen Ticketautomaten und so weiter. Nicht nur für Sehbehinderte oder Menschen mit anderen Beeinträchtigungen. Wir wollen immer dunkle Vordergründe vor hellem Hintergrund platzieren oder umgekehrt. Tatsächlich wird oft ein guter Kontrast durch die Kombination komplementärer Farben erzeugt. Aber der Trick ist, oder der schwierige Teil ist, dass, wenn die Sättigung zu hoch ist, diese visuelle Schwingung erzeugen kann, wie Sie es oft aus Rot und Grün wissen. Wir wollen also Rot und Grün zusammen oder ein helles Blau auf einem leuchtend roten Hintergrund vermeiden . Wir wollen niemals Farbe allein verwenden , um zwischen Artikeln zu unterscheiden. Wir wissen, dass zehn Prozent der Männer farbenblind sind und etwa 1% der Frauen farbenblind sind. Hier links haben wir also ein Bild von diesen Hüten. Und so sieht es für die meisten Menschen aus. Aber die Bilder rechts sind so, wie es für Menschen mit unterschiedlichen Formen von Farbenblindheit aussieht . Sie können die Gegenstände grundsätzlich nicht voneinander unterscheiden. Schauen Sie sich dieses Design an und denken Sie dann darüber nach, wie Sie dieses Design verbessern können, basierend auf dem Wissen, das Sie bisher über Farbe hatten. In diesem Beispiel sind Rot und Grün die einzige Möglichkeit anzuzeigen, ob die iPhones in Ihrem lokalen Geschäft erhältlich sind oder nicht. Wenn du also einen Blinden nennen würdest, würde das aussehen? Es würde wahrscheinlich so aussehen und Sie könnten es nicht unterscheiden. Was wir also tun könnten, um dieses Design zugänglicher zu machen, wir könnten es nicht nur als rot zeigen, sondern wir könnten es vielleicht als rotes Kreuz und dann als grünes Häkchen zeigen . Zumindest dann haben Sie zwei verschiedene Varianten, zwei verschiedene Möglichkeiten, die Verfügbarkeit auf dieser Seite anzuzeigen . Als UX- oder UI-Designer ist es praktisch zu wissen, dass es verschiedene Farbsysteme gibt , obwohl Sie wahrscheinlich nicht beide verwenden werden. Werden Sie hauptsächlich RGB verwenden? Als Faustregel gilt, das RGB-Farbsystem nur in digitalen Designs und beim Entwerfen für das Web verwendet wird. Das ist also ein Farbsystem, das Programme wie Figma Sketch, Adobe verwenden. Dazu gehört das Entwerfen von Websites sowie Bildern und Grafiken für Websites und soziale Medien. Also alles digital. Denke an RGB. Das ist also in den Einstellungen. Wenn Sie diese Designs im Druck verwenden möchten, müssen Sie sie dann in CMYK-Farbe konvertieren. Und wenn Sie mehr darauf eingehen möchten und jetzt wissen Sie, dass es existiert, können Sie mehr , wenn Sie mehr darüber wissen möchten. Großartig, gehen wir weiter zur Typografie. Typografie ist die Kunst, Buchstaben und Texte so anzuordnen , dass die Kopie lesbar und klar und visuell für das Radar ansprechend ist. Die Topographie spielt eine wichtige Rolle bei der Gestaltung von Benutzeroberflächen. Wenn Sie ein Produkt entwerfen, ist es wichtig, dass Sie den USA seine Absicht und seinen Zweck klar mitteilen können . Und dies geschieht üblicherweise mithilfe von Text. Gute Typografie wird eine starke Hierarchie aufbauen. Es wird der Website eine grafische Ausgewogenheit verleihen und den Gesamtton des Produkts genauso festlegen, wie wir ihn gefärbt haben. Typografie sollte Ihre Benutzer leiten und informieren, Lesbarkeit und Zugänglichkeit optimieren und eine hervorragende Benutzererfahrung sicherstellen. Es gibt also verschiedene Arten von Schriften, bei denen es sich um Fontanelle handeln könnte. Es gibt also Serifen, es gibt serifenlose und es gibt mehr dekorative Skriptstile und dann gibt es Plattenserifen. Die Serifenschriften haben also das, diese kleinen kleinen dekorativen Striche, die auch als Serifen bekannt sind. Und dann haben wir die Strophe des zweiten F. Schicken Sie mir mit dem Mittel ohne auf Französisch. Die Gesichter vom Typ San Serifen sind also solche ohne diese kleinen Locken. Skriptschriften ahmten die Handschrift nach. Die Buchstaben sind miteinander verbunden. Dann haben wir die Plattenserife, die im Grunde ein Teil der Familie ist, aber sie hat wie dicke blockartige Serifen. Es ist ein bisschen mutiger. Die Brandung stammt aus den 1400er Jahren. Und der Grund, warum sie dieses winzige Futter haben ist eigentlich das Steinschnitzen. Damals, als die Leute lateinische Buchstaben in Stein gemeißelt haben mussten, malte der Designer die Buchstaben normalerweise mit einem Pinsel. Und dann müsste der Steinmetz es aus dem Gemälde herausschneiden. Und diese Steinschnitzerei schuf diese Serifen auf den Buchstaben. Heute. Die meisten Bücher haben Serifenbuchstaben, sind Serifenschriften, weil sie für das Auge leichter zu lesen wenn wir uns an etwas gewöhnt haben. Während auf Websites Serifen für Textkörper nicht so häufig sind. Der einzige Ort, an dem wir ihn am häufigsten sehen, sind neue Websites. So haben wir zum Beispiel hier auf der Guardians-Website eine Serifenschrift erhalten, die sowohl als Kopfzeile als auch als Textkörper verwendet wird . Die Serifenschrift, die Stimmung ist die stabile, respektable, zeitlose, formelle, traditionelle und elegante Schrift. Und einige der Beispiele Times New Roman, Georgia, Palatina und Garamond und einige ihrer Unterfamilien. Der Sheriff hat also vier verschiedene Arten von Familien. Es gibt also alten Stil, Übergang, Moderne und die Plattenserifen. Wenn Sie also noch einmal ins Detail gehen möchten, können Sie das tun. Hier ist ein Beispiel dafür, wie Cera-Schriftarten auf Websites verwendet wurden , da sie detaillierter bei größeren Größen tendenziell besser funktionieren. Wie hier zum Beispiel Überschriften, funktionieren sie gut mit kleineren Webkopien, die mit einer serifenlosen Schriftart erstellt wurden. Das serifenlose Gesicht ist einfach, das vernünftige, geradlinige Gesicht. Wir wissen es in Helvetica. Eine der üblichen Arten von Design-Typ-Phasen, REL zu Homer oder einer anderen Diana, der Sensor wiederum, hat vier verschiedene Typen. Das sind das Groteske, das Neue Groteske, das Humanistische und das Geometrische. Und sie alle haben ihre eigenen Charaktersätze. Im Allgemeinen verwenden die meisten Websites die Serifenschriften. Es ist sehr neutral, leicht zu lesen und oft sehr gut lesbar, und es wird niemanden beleidigen, wenn Sie möchten. Die Sounds, die ich habe, können auch sehr sauber aussehen, da es hier in der Kombination von Leerzeichen und diesem Kontrast wirklich Wirkung zeigt. Skriptschriften ahmten die Handschrift , in der die Buchstaben miteinander verbunden sind. Das Skript sollte gegebenenfalls in kleinen Dosen verwendet werden, da sie schwer zu lesen sind. Es ist also besser, es als Dekoration oder einfach als grafisches Element zu verwenden . Die Stimmungsschrift wirkt femininer, persönlicher, eleganter und hübscher. Aber auch hier ist es schwer zu lesen, also ist es besser, es einfach als Dekoration zu verwenden. Die Plattenserifen, ihre gesamte Familie mit den dicken Blockserifen. Slap Sarah wurde ursprünglich für Schlagzeilen entwickelt , um die Lesbarkeit und Wirkung zu verbessern. Und genau das hat dieses Labor mit Türen eingerichtet. Sie werden hauptsächlich für große Überschriften verwendet, aber selten für Textaufnahmen. Wie Sie hier sehen, eine wirkungsvolle Überschrift und dann wieder ein Sarah-Text. Aber diese Überschrift sticht wirklich hervor. Die Stimmung dafür ist irgendwie wichtig. Es soll ein kühnes, wirkungsvolles und gestalterisches Design zeigen und seine Absicht, einige der Schriften zu erfassen. Wir wissen es. Amerikanische Schreibmaschine, Alpha-Lab und Sealer Slap, sowohl serifenlose als auch serifenlose Schriftarten zusammen verwenden , ist heute eine gängige Praxis im UI-Design, um die Benutzeroberfläche darauf zu belassen und ein wenig zu behalten schlanker. Wir wollen nicht mehr als maximal drei Fonds verwenden. Und wir wollen die dekorativen Schriften auf ein Minimum beschränken. Denken Sie noch einmal daran, dass die besten Schriftarten wie immer diejenigen sind bei denen der Leser eigentlich nicht ist, nein, die Schriftart nicht bemerkt, sondern die Nachricht. Ordnung, schauen wir uns dieses großartige Beispiel an. Wie viele verschiedene Schriftarten sehen Sie in diesem Beispiel? Wir haben Script-Schriften. Wir haben sogar Comic Sans bekommen, was für alle Designer so ziemlich ein No-Go ist. Wir haben wirklich, wir haben hier nur eine inkonsistente Verwendung von Schriftarten. Die Verwendung der gleichen Mittel würde dieses Design wirklich verschärfen und eine bessere Hierarchie schaffen. Einige Richtlinien vermeiden die Groß-/Kleinschreibung von Titeln , da Großbuchstaben wie Interpunktionen wie Interpunktionen und Kleinbuchstaben einfacher und schneller zu lesen sind. Mach es nicht schwieriger als es sein muss. Verwenden Sie kein Skript. Alle Großbuchstaben werden langsamer gescannt. Und auch viel zugrunde liegender Text ist schwer zu scannen. Es ist wichtig, auch die Textgröße zu berücksichtigen. Eine gute Faustregel ist, die Größe zu verdoppeln oder zu halbieren, wenn Sie ziemlich große Größen ändern. Wenn Sie z. B. 32 Pixel für die Kopfzeile verwenden, dann haben Sie 16 Pixel für die Textkörper, um Kontrast zu erzeugen. Zumindest ist das ein guter Ausgangspunkt, um den Header zu verdoppeln. Wir wollen auch die Linienhöhe berücksichtigen. der linken Seite sieht das Design also etwas eng aus und dieser Satz zeigt wirklich, dass es wichtig ist, die richtige Zeilenhöhe in Ihren Designs zu finden. Der Buchstabenabstand oder das Kerning ist das Leerzeichen zwischen den Buchstaben. Es ist wichtig, dass Sie den richtigen Buchstabenabstand in Ihrem Design haben, damit es sich nicht wie vollgestopft anfühlt und es für die USA schwierig ist, es zu lesen. Die Zeilenlänge ist ebenfalls sehr wichtig. Und die Breite, die Breite Ihrer Textfelder, Es ist besser, kürzere Zeilen zu haben, um die Lesbarkeit zu verbessern. Und es ist schneller und komfortabler zu lesen. Eine empfohlene Zeilenlänge für den Bildschirm beträgt 60 bis 80 Zeichen, basierend auf einer Bildschirmgröße von 1.440 Pixeln und einer Schriftgröße von 16 Zeichen. Für mehr Mobilgeräte sollte es etwa 35 bis 45 Zeichen pro Zeile sein. Ausrichtung. Wir haben schon einmal darüber gesprochen. Wir wollen zur besseren Lesbarkeit links ausgerichtet werden. Wenn dein Zentrum ist, ist es okay. Wenn Sie nicht mehr als drei bis fünf Zeilen verwenden und es länger wird, können Sie sehen, wie Sie nach links gehen. Wir haben diese Mittelausrichtung und das macht es wirklich schwierig, sie zu lesen. Auf der rechten Seite haben wir eine bessere Lesbarkeit. Die Rechtfertigung ist besonders wichtig für Menschen mit Legasthenie. Vollständig ausgerichtete Texte können diese Leerraumflüsse erzeugen, was das Lesen für sie erschwert. Es ist also in Ordnung für den Druck. Zum Beispiel Zeitungspastenpapiere, bei denen Sie das Kerning anpassen können, aber nicht digital. Lass uns über Ikonographie sprechen. Wir haben schon einmal über Ikonographie gesprochen, als wir das Gestaltprinzip von durchliefen. Wenn wir also Symbole verwenden, geht es oft darum, eine Botschaft zu vermitteln oder eine Idee auf engstem Raum zu kommunizieren. Wenn wir das tun, müssen wir uns einiger Dinge bewusst sein. Wir müssen die Icons immer mit Worten unterstützen , um die Bedeutung zu verbessern. Auf Ihrem Telefon haben Sie zum Beispiel alle Ihre App-Symbole, aber Sie haben immer das Etikett darunter, das Ihnen sagt, worum alle Ihre App-Symbole, aber Sie haben immer das Etikett darunter, das Ihnen sagt, es in dieser App geht. Sie sollten auch für die meisten Anwendungen von Bedeutung sein. Es muss genügend Bedeutung vermitteln, damit die Benutzer diese Verbindung herstellen und die Bedeutung dieser einfachen Bedeutung abschließen können. Hier haben wir also eine Aufgabenliste, ein Beispiel für eine Aufgabenliste, wo sie genau wie drei Punkte auf einem roten Kreis aussieht, was die Bedeutung einer Aufgabe nicht wirklich vermittelt. Stattdessen könnten wir es als Papier mit einem Stift entwerfen. Eine andere Sache, über die man nachdenken sollte, ist, dass Symbole oder Symbole oft kulturell spezifisch sind. Sie können in verschiedenen Kulturen unterschiedliche Bedeutungen haben. So gab es zum Beispiel in Australien eine Fluggesellschaft, die einen Flug nach Korea startete und diese weiße Nelkenblume verteilte. Aber sie dachten einfach nicht daran, dass diese Blume in der koreanischen Kultur ein Symbol des Todes ist. Das lief also nicht so gut. Schließlich sollte das Symbol nicht zu detailliert sein, da es dann darum geht, eine vereinfachte Nachricht auf wenig Platz zu haben . Also mach es einfach. Viele Symbole werden allgemein als Gehäuse mit diesen Symbolen verwendet, die wir hier haben, wir haben das Schloss für die Sicherheit, wir haben die Wiedergabetaste, wir haben die Diskette, die hat die Verbindung zum Originalelement einer Diskette verloren. Aber wir wissen, dass es sparen heißt. Sogar jüngere Menschen wissen, dass es andere Symbole gibt, die weniger allgemein verstanden werden, obwohl sie diesen Gegenstand noch nie zuvor gesehen haben. Das sind also einige Beispiele, wir haben das Hamburger-Menü. Und dann daneben, Das ist eine andere Art von Menü, das Dönermenü genannt wird. Du hast den Burger und den Kebab. Sie werden, obwohl sie häufig verwendet werden, nicht immer allgemein verstanden. Hier haben wir ein gutes Beispiel die Verwendung von Symbolen, bei denen sie klar lesbar sind und unter denen sich dieses Etikett befindet. Als nächstes haben wir oft eine Lektion über menschliche Kognition und UI-Design erhalten . 6. Menschliche Kognition und Benutzeroberfläche Design: In dieser Lektion werden wir uns mit menschlicher Kognition und UI-Design befassen. Lassen Sie uns also über das Konzept der Erschwinglichkeit sprechen. In diesem Konzept beeinflussen oder implizieren physikalische Eigenschaften also beeinflussen oder implizieren physikalische Eigenschaften , wie mit dem Objekt interagiert werden kann. Also habe ich hier ein Bild von einem Joystick. Sie können es also einem Dreijährigen geben und müssen nicht wirklich Anweisungen geben. Es ist ziemlich intuitiv und offensichtlich, wie man es benutzt. Die physikalischen Eigenschaften deuten darauf hin, wohin Sie Ihre Hand legen , wenn Sie solche Dinge drücken. Wenn wir also über Webdesign und das Entwerfen von Benutzeroberflächen und Systemen sprechen , dieses Konzept der Erschwinglichkeit für den Benutzer ziemlich offensichtlich. Was du wegmachen musst. Sie müssen sich an den Eigenschaften dieses Objekts orientieren. Hier ist ein Beispiel für schlechte oder vier Monate. Ich bin letzte Woche auf diese Website gegangen. Ich war auf der Suche nach etwas und konnte nicht daran arbeiten , wie ich mit einer Suche interagieren sollte. Also klicke ich darauf und denke : Oh, wenn ich darauf klicke, erscheint es mit einer kleinen weißen Box, über die ich sprechen kann. Und erst als ich irgendwie darauf eingegangen bin und darauf geklickt habe, wurde mir klar, dass, oh, da muss man oben drauf gehen. Es gab also eine schlechte Erschwinglichkeit. Mir war nicht klar, wo ich dieses Beispiel eingeben musste. Stellen Sie sich jetzt vor, Sie sind eines Tages zu G Internet Banking gegangen und ich habe Sie gefragt : Möchten Sie die Umfrage ausfüllen? Das ist also ein Bildschirm und ich wurde vorgestellt. Und denken Sie darüber nach , worauf Sie Ihrer Meinung nach auf diesem Bildschirm wahrscheinlich klicken würden? Schauen Sie sich an, sehen Sie, was Sie denken. Wo denkst du würdest du klicken? Also, wenn du wie ich bist, hast du auf den riesigen großen Schließen-Button geklickt weil es nur einen Knopf gibt, oder? Du kannst nichts falsch machen. Du musst dich nicht entscheiden. Sie müssen den Button nicht wirklich lesen , da es nur einen gibt, aus dem Sie auswählen können. Das ist also ein gutes Beispiel für eine gute Erschwinglichkeit. Aber in diesem Fall ist es ein bisschen irreführend und der visuelle Fluss der Seite lenkt sogar diesen riesigen großen Pfeil , der auf die Schaltflächen zeigt. Mein Ich und meine Aufmerksamkeit konzentrieren sich also wirklich auf diesen Knopf. Ich muss es also nicht wirklich lesen, weil es ziemlich klar ist, was zu tun ist. Tatsächlich schließt die Schaltfläche jedoch die Umfrage. Was Sie also tun mussten, war irgendwo auf das Banner zu klicken , das uns hilft, Ihnen zu helfen, und genau dort würden Sie die Umfrage durchführen. Das Beispiel, das ich Ihnen gerade gezeigt habe, ist ein Beispiel für den visuellen Fluss und wo sich Ihr Auge irgendwie durch die Seite bewegt und wohin sie gezogen werden. Für den visuellen Fluss ist der natürliche Fluss für den Bildschirm für meisten Menschen auf der ganzen Welt die meisten Menschen auf der ganzen Welt von links nach rechts, von oben nach unten. Die meisten Benutzer beginnen also auf einer Webseite einem Bildschirm oder einem System, und ich gehe oben links auf der Seite und sie arbeiten so, dass ich alles von oben nach rechts, von links nach unten lese . Aber sie arbeiten diese Seite ganz natürlich durch und landen in der Regel unten rechts. Wenn Sie also über so etwas wie ein Formular nachdenken, zu haben ist Ihr logischer Ort, um eine Weiter- oder Absendenschaltfläche , in der Regel unten rechts auf dem Bildschirm. Für einige Kulturen, zum Beispiel Arabisch, wo sie sich von rechts nach links bewegen, könnte es etwas anders sein. Aber für die meisten Kulturen, die meisten westlichen Kulturen und viele asiatische Kulturen ist es von links nach rechts, von oben nach unten. Schauen Sie sich dieses Beispiel an. Dies ist eine Seite, die wir getestet haben. Wie könnten sich Nutzer deiner Meinung nach durch diese Seite bewegen? In diesem Beispiel mussten sie beispielsweise das Datum und die Uhrzeit der Aufführung auswählen. Also, sobald ich das Datum ausgesucht habe, dann die Uhrzeit, 20:00 Uhr. Was glauben Sie, haben sie getan? Sie haben wahrscheinlich recht, wenn es das bekommt, sie sind alle direkt von diesem IPM-Ziel schlecht gegangen, direkt zum goldenen Continue-Button unten. Aber was die meisten Leute verpasst haben, ist unten links, wie möchten Sie Ihre Plätze auswählen? Zum Glück war es kein großes Problem, weil die meisten Leute das vermissen. Aber die Standardeinstellung war sowieso das, was die meisten Leute tun wollten, nämlich ihre eigenen Sitze zu wählen. Aber die meisten Leute lehnen das ab. Denken Sie also darüber nach, wo Sie das hinbringen könnten? Das war also in diesem visuellen Fluss. So können Sie möglicherweise die Art und Weise, wie Sie Ihre Plätze auswählen möchten, unter die Zeit, in der sie PM gegessen haben, verschieben Art und Weise, wie Sie Ihre Plätze auswählen möchten unter die Zeit, in der sie PM gegessen haben , sodass sich Ihre Augen tatsächlich dadurch bewegen und Sie es eher bemerken wenn Sie sich auf die Schaltfläche Weiter zubewegen. Das ist also eine ziemlich einfache Lösung. Hier ist ein weiteres Beispiel. Dies ist ein schönes Beispiel für einen guten visuellen Fluss. In diesem Beispiel suchen die Leute also nach einem Mitarbeiter. Jetzt wollen viele Leute nur noch einen Namen eingeben und auf Suchen klicken. Aber so wie sie sind, wie sie im Namen gelehrt haben, müssen sich ihre Augen durch diese anderen Bereiche, Schlüsselwörter, Abteilungen und Standorte bewegen . Jetzt können sie diese einfach ignorieren, wenn sie wollen, aber sie könnten tatsächlich helfen, ihre Suche einzugrenzen , sodass die Augen, die sich durch sie bewegen , sie eher bemerken. Das ist also ein Beispiel für einen guten visuellen Fluss. Ich möchte über Skeuomorphismus sprechen. Hier ahmt ein Objekt in der Software das Gegenstück aus der realen Welt nach. Dies ist also ein Beispiel für den Morphismus von Fähigkeiten. In diesem Beispiel haben wir die alte Notizenanwendung in Apple iOS. Hier drin sehen die Notizblöcke also aus wie ein echter Wissensstift in der realen Welt. Es versucht, die reale Erfahrung zu simulieren. Wir haben also ein gelbes Notizbuch. Es hat Zeilen wie in der realen Welt. Und im Grunde ist es ziemlich klar, was man tun muss. Es funktioniert einfach so, als ob die reale und die neue Notizenanwendung so ziemlich nur ein leerer Bildschirm mit ein paar Tools und Symbolen unten ist nur ein leerer Bildschirm mit ein paar . Es ist also überhaupt nicht intuitiv , wie man das benutzt. Das ist also ein Beispiel auf der linken Seite, ein Skeuomorphismus. Manchmal werden diese auch übliche Metaphern genannt. Und die Verwendung visueller Metaphern bietet gewisse Vorteile . Metaphern können abstrakte Konzepte in konkrete Begriffe fassen und machen es etwas klarer über so etwas wie die Notenzahlung, wenn Sie sie noch nicht verwendet haben. Und erleichtert es den Menschen zu verstehen, wie sie damit umgehen oder damit interagieren können. Es schafft Vertrautheit, wenn Sie möchten, es ist komfortabler. Und es macht es auch ein bisschen einfacher, sich ein System zu merken. Und es kann ein bisschen motivierender sein, ein bisschen weniger einschüchternd, wenn Sie möchten, und zum Handeln anregen, weil es intuitiver ist. Es gibt jedoch einige Nachteile. Also möchte ich diese auch durchgehen. Es kann hilfreich sein, aber wirklich nur für unerfahrene Benutzer. diesem Beispiel der Notizenanwendung unter iOS meisten Leute mit einem Apple iPhone sind die meisten Leute mit einem Apple iPhone ziemlich vertraut damit, wie Notizen jetzt funktionieren. Sie brauchen also nicht wirklich all diese zusätzlichen Linien und Unordnung und Farbe. Das andere Problem dabei ist, dass es zu Funktionseinschränkungen kommen kann , die durch das reale Objekt diktiert werden. Auf einem Notizblock. Wenn Sie zum Ende der Seite gelangen, müssen Sie die Seite umblättern, um eine neue Seite zu beginnen. Mit der Notizenanwendung können Sie also einfach weitermachen, aber die Benutzer denken vielleicht: Nun, warte mal, ich bin ganz unten auf der Seite. Vielleicht muss ich eine neue Datei oder eine neue Seite starten? Manchmal gelten die Einschränkungen, die sie erwarten könnten , in der digitalen Welt, obwohl sie es tatsächlich getan haben. Es sorgt auch für Unordnung in den Designs. Du hast also all diese Linien und zusätzliche Farbe, viel Lärm, dass es nicht so sauber ist, wenn du willst. Und es darf auch nicht Kulturen, Sprachen, Altersgruppen oder Generationen durchqueren . Mein Lieblingsbeispiel dafür ist die Diskette. Einige meiner Kinder sind I'll look money, das ist das Speichern-Symbol aufgedruckt. Dies ist im Grunde ein Beispiel für eine visuelle Metapher. Vor vielen Jahren haben wir Disketten verwendet, um Dinge zu speichern. Es ist also zu einer Metapher für das Sparen geworden und es ist eine Ikone, die in 100 Jahren immer noch weit verbreitet ist. Sie würden wahrscheinlich gehen, was ist das überhaupt für ein Ding? Aber es ist ein Standard, wenn es eine Konvention wird , und es ist eine Metapher für das Speichern von Dingen. Die andere Sache, über die ich jetzt sprechen wollte, ist Reduzierung der so genannten kognitiven Belastung, aber lassen Sie mich nicht denken, ähm, sagt Steve Krug, in dieser Idee ist, dass sich der Benutzer nicht erinnern muss Informationen von einem Teil des Systems zum anderen. Also hier ist ein Spielzeugbeispiel. Finden Sie eine Ausbildungsorganisation, um eine registrierte Ausbildungsorganisation zu finden, registriert ist, um das Certificate four in Celebrant anzubieten. Sehen Sie sich ihre Kontaktdaten an, besuchen Sie bitte training.gov im Qualifikationscode CHC 46. Oh Mann, hier gibt es eine Menge Dinge, an die man sich erinnern kann. Glaubst du, die meisten Menschen könnten sich an all das erinnern, wenn sie auf diesen Link klicken. Wahrscheinlich nicht. Sie sollten Benutzer also nicht zwingen , sich an viele solche Informationen zu erinnern , da sie dies einfach nicht können. Und es belastet den Benutzer einfach sehr. Es ist unnötig. Lass mich nicht nachdenken, wie Steve Krug sagt, hier ist auch ein Beispiel. Ich habe meine Rechnung für meine Maut für Arbeitszwecke erhalten. Also ging ich rein und sah mir meine Tag-Nummer und die Tag-Nummer meines Mannes an. Okay. Ja, ich weiß , welcher es jetzt ist. Dann ging ich zum Export, weil ich es herunterladen wollte. Dann bin ich hier reingegangen und dann musste ich im Grunde die Tag-Nummer eingeben. Ich konnte also nicht einmal aus den verfügbaren Tags und ihrem Konto auswählen . Ich musste zurück. Und dann dachte ich, okay, jetzt hat es geklappt. Ich gehe zurück und kopiere es und es würde mich nicht einmal kopieren lassen. Also musste ich mich an die Nummer erinnern, als ich nicht exportierte. Das ist also ein schlechtes Beispiel. Sie möchten nicht, dass sich Benutzer an eine wirklich große Zahl erinnern und sie eingeben oder sich daran erinnern müssen , welcher Kandidat es ist. Warum sollte ich noch keinen Spitznamen erstellen lassen? Mir wurde gesagt, dass meinem Mann eine Amtszeit oder so etwas gesagt wurde. Und dann lassen Sie mich einfach aus einem Drop-down-Menü auswählen, also reduzieren Sie die Menge an Nachdenken, die ich tun muss. Was wir also tun wollen, ist Informationen in aussagekräftigen, unterschiedlichen Stücken zu präsentieren. Also werden wir Dinge in Abschnitte gruppieren , die für die Benutzer sinnvoll sind. Und wir wollen unterstützende Tools und Informationen leicht verfügbar machen . Dinge wie Währungsumrechner oder einige Websites. Jetzt sag einfach Hey, wir haben gemerkt, dass du in Australien bist. Möchten Sie alles in australischen Dollar sagen? Und im Gegensatz zu awesome bedeutet das, dass ich nicht jedes Mal, wenn ich auf einen Gegenstand klicke, einen Taschenrechner herausholen oder mein Gehirn verwenden muss, um ihn zu konvertieren. Dinge, die das Denken reduzieren , dass Sie dies verwenden werden, müssen erledigt werden. Jetzt möchte ich, dass Sie sich Folgendes ansehen und mir sagen, was Ihnen auffällt. Stellen Sie sich vor, Sie möchten eine Reiseversicherung abschließen. Du willst für ein paar Tage nach Vanuatu. Und wie man darüber nachdenkt, was man erwarten würde. Du gehst hier rein, du wählst dein Ziel aus. Sie wählen Ihr Startdatum, Enddatum. Was wird Ihrer Meinung nach passieren, wenn Sie auf Angebot einholen klicken? Also glaubst du, es würde auf eine neue Seite gehen? Glaubst du, er würde etwas rausfliegen? Schauen Sie sich das an und sehen Sie nach. Ordnung, es ist geschafft, fertig. Was ist passiert? Es ist nichts passiert oder ist es? Möglicherweise haben Sie in der Mitte des Bildschirms nicht bemerkt , diese drei Dollarwerte in Rot tatsächlich aktualisiert wurden, als Sie auf das Angebot einholen geklickt haben. Also, wenn ich ein bisschen zurückgehe, warum das letzte bisschen noch einmal, schau, ob ich merke, dass es sie geändert hat. Dies ist also ein Beispiel für Änderungsblindheit, bei der Benutzer häufig keine Statusänderungen, kleine Kleinigkeiten oder Teile der Seite bemerken, die aktualisiert werden und die sie nicht bemerken. Sie sind oft verwirrt , wenn sie etwas auf der Seite tun , das sich in keiner Weise zu ändern scheint. Wir haben Tests auf Finanzseiten durchgeführt und sie haben Dinge geändert und die Benutzer haben Dinge gesagt , dass etwas passiert oder sie haben das geändert, eine Option in der Versicherung und es heißt a Ich schätze, das könnte den Preis beeinflussen, aber es war nicht klar. Das ist also ein Beispiel dafür. Warum ist das so? Ich möchte jetzt ein wenig über das sprechen, was wir foveales und peripheres Sehen nennen . Unsere foveale Vision ist also unsere zentrale Vision. Es sind ein bis fünf Grad , die Sie betrachten, wo alles sehr scharf zu sein schien und es sind leuchtende Farben. Und dann haben wir Dinge in unserer peripheren Sicht , die auf der Seite liegen. Und Dinge in dieser Art von peripherer Sicht, vielleicht etwas stumpfer und farbiger und sie sind verschwommen, sodass Sie ein Buch an Ihre Seite halten können, aber das werden Sie wahrscheinlich nicht wirklich lesen können Buch. Unser peripheres Sehen lenkt also unsere Aufmerksamkeit und konkurriert oft ohne zentrales foveales Sehen. Die Auswirkungen auf das Design sind für uns also , dass wir das Verschieben oder Scrollen von Texten vermeiden wollen Verschieben oder Scrollen von Texten , da diese mit ihrer Aufmerksamkeit konkurrieren. Du versuchst also, dich auf etwas in der Mitte zu konzentrieren und etwas blinkt an der Seite. Wir wollen auch bekannte Muster verwenden , die durch peripheres Sehen erkennbar sind. Wenn ich zum Beispiel nach einer Suchleiste suche, suche ich nach einer kleinen Lupe oder einem Knopf neben uns in einem weißen Feld, wo ich in einem Suchbegriff ganz oben stehen werde. Das ist also ein Muster, mit dem mein Gehirn vertraut ist. Ich kann die Details dieses Musters nicht sehen, aber ich kann genug von seiner Form sehen. Gott meine Aufmerksamkeit darauf. Wir wollen auch das visuelle Rauschen minimieren. All diese Dinge auf der Seite müssen einen Zweck haben , weil sie um Aufmerksamkeit konkurrieren. Die ABA-Design-Implikation ist, wenn wir sie in Seitentabs verwenden. Daher bemerken die Leute oft keine Tabs innerhalb einer Seite. Hier ist ein Beispiel für eine Website, die wir vor einigen Jahren getestet haben. In diesem Beispiel haben wir die Leute gebeten, zu etwas zu gehen , bei dem sie eine Versicherung abschließen müssen. Judy führt jetzt normalerweise Personen, die übereinstimmen, in einer Testsitzung an. Aber wir wollten beweisen , dass sie es immer noch nicht finden konnten, selbst wenn wir sie anführen . Also haben viele Leute gerade diese Seite durchgesehen und ich habe die Registerkarte auf der richtigen Versicherungs-GD einfach nicht gesehen. Und der Grund dafür ist dieser. So sieht das Gehirn im Grunde aus. Wenn Sie also auf einen Computerbildschirm schauen, nehmen wir an, dass Sie etwa 45 cm vom Bildschirm entfernt sind, ein bis fünf Grad. Der Fokus entspricht etwa 4 cm auf dem Bildschirm , der scharf fokussiert ist. Tatsächlich ist es das, was Ihr Gehirn sieht. Sie können also verstehen, wenn Sie sich diese Art von Simulation ansehen, warum Menschen diese Tabs leicht übersehen könnten wenn sie nicht fett gefärbt sind, weil sie nicht danach suchen. Was bedeutet das für Designer? Es bedeutet, dass wir uns als CTAs oder als unsere Handlungsaufforderungen zeigen wollen. Dinge, für die Sie dies verwenden möchten, sind wirklich prominent. Wir wollen starke Knöpfe haben. Verwenden Sie starke visuelle Hinweise. Wirklich, wirklich gute Erschwinglichkeit, große, kräftige, kräftige farbige Knöpfe, die wirklich eine starke Hierarchie haben. Wir wollen auch sicherstellen , dass die Tabs prominent sind und sie dieser fünf Jahre alten Ansicht, dieser zentralen Ansicht, so nahe kommen. Deshalb kehre ich die Farbbehandlung der Tabs gerne um. Im Beispiel links, das von der Seite ist, zeige ich es dir nur. Die Leute würden diese Eignungstests, die Überschwemmungen in der Mitte des Bildschirms miteinander verbinden, nicht finden . Es wäre also besser als Button, wenn es wirklich wichtig wäre , dass Sie möchten, dass sie es tun. Und die Tabs links, das habe ich nicht gesagt. Im Beispiel rechts ist dies die alte Website der National Australia Bank, aber es ist ein gutes Beispiel dafür, wie die Tabs sind. Die Farbe ist invertiert. Also die aktive Registerkarte, auf der sie sich auf seiner Uhr befinden, und die anderen Registerkarten, auf denen sie möglicherweise eine dunkle Registerkarte auswählen können , damit sie mit größerer Wahrscheinlichkeit von Ihrer peripheren Sicht wahrgenommen werden. Wenn Sie über das periphere Sehen nachdenken, was könnte Ihrer Meinung nach hier das Problem sein? Also bist du hier reingegangen und hast einen Blick darauf geworfen. Also, welche Art von Bildschirmrändern könnten die Leute vermissen? Abgesehen vom Menü auf der linken Seite das kleine Symbol für die Suche auf der rechten Seite von den Leuten wegen ihres peripheren Sehvermögens leicht übersehen werden , da es sehr klein ist und kein Muster denen die Leute vertraut sind. Paypal ein Set und ein vertrauter mit dem, was wir das Menü Burger nennen. Und sie sind es wirklich gewohnt, das auf einem Handy zu benutzen. Aber auf einem großen Computerbildschirm würde ich dieses Burger-Menü im Allgemeinen nicht verwenden. Das war also offensichtlich ein Problem weil sie dieses kleine Ding, eine Lösung, gestellt haben. Wussten Sie, dass Sie die Suche nutzen können? Nun, es ist keine gute Lösung. Verwenden Sie einfach eine Konvention eines Patents. Lege eine kleine weiße Schachtel daneben. Das ist eine Lösung, aber keine großartige. Das heißt, wir wollen vertraute Muster verwenden, die durch ein peripheres Sehen erkennbar sind. Also Dinge wie ein Texteingabefeld neben der Suchschaltfläche und vermeiden Sie viele Burger auf großen Websites. Jetzt möchte ich ein wenig über das Vertrauen der Benutzer und die Eingabe persönlicher Daten sprechen . Daher sollten die Leute sicher sein, die Anwendung zu verwenden. Es gibt viele Scans, die sie jetzt haben, Leute werden immer nervöser und müde, ihre persönlichen Daten einzugeben. Sie müssen also dieses Vertrauen aufbauen. Wie machen wir das? Wir können Dinge wie Ikonographie oder Bilder verwenden , um zu zeigen, dass die Website sicher ist. Viele Leute wissen nicht, wie sie mithilfe der feststellen können, ob eine Website sicher HTTPS- oder kleinen Vorhängeschloss-Symbole im Browser feststellen können, ob eine Website sicher ist. Manchmal sagen Ihnen Browser wie Chrome , wenn die Website nicht sicher ist, und sie geben Ihnen eine große Warnung, und die Leute flippen aus weil ihr Zertifikat abgelaufen ist. Auf Ihrer Seite mag es also sicher sein, aber das ist den Benutzern möglicherweise nicht klar. Das ist also ein Beispiel für Internetbanking. Wir haben vor kurzem die Fokusgruppe E gemacht und die Leute schwärmten von dem kleinen Vorhängeschloss im Internetbanking. Und es ist wie, nun, es ist Internetbanking für eine große Bank, natürlich ist es sicher. Aber das kleine Vorhängeschlossbild eines Vorhängeschlosses auf dem Login gab ihnen nur ein warmes und verschwommenes Gefühl, was ihnen diese Sicherheit gab. Hier ist ein weiteres nettes Beispiel, wenn sie ihre Kreditkartendaten für diese Gewinnlotterie-Website eingeben . Die Leute könnten damit etwas nervös sein. Vor allem ältere Menschen sind weniger versierte Menschen. Also nochmal, es geht darum, wie wir Ihre Informationen schützen und Sie bewegen den Mauszeiger darüber in einer kleinen Schachtel, erhalten Anweisungen. Es mag den Menschen nicht viel bedeuten, aber all diese Informationen dort zu haben, hilft nur dabei , die Gewissheit zu schaffen, dass Sie Sicherheit ernst nehmen. Wenn Sie jetzt darum bitten , persönliche Daten einzugeben, müssen Sie ein klares Wertversprechen abgeben. Wenn Sie sie bitten, orientierte Details zu registrieren , okay, was habe ich aus dieser Transaktion heraus? Hier ist ein Beispiel, kein gutes Beispiel, bei dem ich Flughafenparkplätze nutze , wenn ich zur Arbeit reise. Und alle meine Daten werden gespeichert, ich melde mich als Kunde an. Und als ich hier reingehe, fragte es mich nach meinem Telefon und brachte all meine anderen Details bei, brachte all meine anderen Details die ich mich erinnere, außer meinem Telefontyp. Und ich denke, warum brauche ich meinen Spaß und lehre, mein Auto zu packen? Mir gefällt was nicht? Ich sehe keinen triftigen Grund, warum sie das brauchen würden. Welche Effekte vertraue ich ihnen an. Ich denke, was wirst du mit diesen Informationen machen ? Warum brauchst du das? Mir ist das nicht klar. Hier ist ein nettes Beispiel, wenn ich hier reingehe, aber im Grunde können Sie jede Adresse eingeben und die Leute sagen: Moment, ich tippe eine Adresse ein vielleicht nicht wohl fühlt. Ich betrachte Immobilienwerte um die Verkaufshistorie für Immobilien zu ermitteln. Nun könnten Sie sagen: Oh, bin ich mir nicht sicher , aber er sagt hier, warum müssen wir uns jetzt in diesem Fall damit befassen, sie tatsächlich von Regierungsbehörden verlangt werden , die Details von wem sie diese Daten auch veröffentlichen. Es gibt einen triftigen Grund , warum staatliche Vorschriften dies benötigen. Nochmals, sie haben mir gerade erklärt, warum sie diese Adresse brauchen. Es wäre wahrscheinlich besser, wenn das oben auf der Seite wäre. Aber zumindest haben sie diese Informationen. Die andere Sache, die wir tun können, ist das, was wir allmähliches Engagement nennen. Also im Grunde genommen habe ich jemanden gebeten, dich im Voraus zu heiraten. Wir wollen diese Beziehung schrittweise aufbauen und dieses Vertrauen aufbauen. Und dann müssen wir ihnen einen Grund geben , warum sie ihre Daten angeben müssen. Also ging ich auf eine Website namens tent world. Ich habe Campingausrüstung gekauft. Add wollte sich nicht wirklich anmelden oder registrieren und das möchte ich vielleicht nicht tun. Ich checke einfach als Gast aus. Aber am Ende gibt es mir eine Option, die besagt: Hey, aktiviere dein Konto. Ich denke, warum sollte ich das tun wollen? Es gibt mir einige triftige Gründe, warum ich den Status meiner Bestellung überprüfen kann und beim nächsten Mal schneller zurückkommen kann. Es gibt mir also einige vernünftige Ideen , warum ich mich registrieren sollte. Und alles was ich tun muss, ist im Grunde auf eine Schaltfläche zu klicken und ein Passwort einzugeben, fertig. Es ist also keine allzu große Verpflichtung dann werde ich mich im Voraus bitten, mich zu registrieren. Das nennen wir schrittweises Engagement. In unserer nächsten Lektion werden wir über das Design von Entzündungen sprechen. 7. INFORMATIONSDESIGN: In dieser Lektion werden wir über Informationsdesign sprechen und uns auf Webinhalte Riley und Lesbarkeit konzentrieren . Hier ist ein Diagramm, das den Informationsfluss ziemlich genau zeigt. Es hat viele verschiedene Elemente. Du denkst vielleicht: Oh, wir schreiben die Wörter einfach auf eine Seite und die Leute werden sie lesen und es wird gut. Aber so funktioniert das nicht. Sie könnten also Wörter auf eine Seite setzen. Aber all diese verschiedenen Dinge beeinflussen, wie sie das interpretieren, ihre Wahrnehmung dieses Themas, das technische Umfeld und die physische Umgebung sie arbeiten, das soziale Umfeld, die Ziele, all diese Dinge könnten sich darauf auswirken wie sie diese Informationen interpretieren oder verarbeiten. Wenn Sie also an Informationen zur COVID-Impfung denken , , als diese zum ersten Mal erinnern Sie sich wahrscheinlich daran, dass darüber viel gestritten wurde veröffentlicht wurden. Denken Sie also über all die Dinge nach, wie sich diese Elemente für dieses spezielle Thema ändern. Also Wahrnehmungen von COVID, Impfinformationen. Als das herauskam, hatten die Menschen unterschiedliche Wahrnehmungen von jetzt vorgefassten Ideen. Es gibt verschiedene physische Umgebungen. Es sind viele Dinge passiert. Die Menschen haben unterschiedliche Maßnahmen ergriffen, also unterschiedliche soziale Umgebungen. Einige Menschen lebten in Gemeinden mit vielen dieser Anti-Vaxxer. Andere haben vielleicht im Kopf gelebt, vielleicht an einen wissenschaftlichen Haushalt. Veranlagungen könnten also anders gewesen sein. Der Informationsfluss ist nicht immer so, wie wir ihn uns vorstellen. Seien Sie sich bewusst, dass es viele verschiedene Elemente hat. Deshalb möchte ich jetzt darüber sprechen, wie View-Inhalte verwendet werden. Die Leute werden also im Allgemeinen gelesen, sie scannen. Und wir wollen dieses Scannen verbessern , indem wir klare Links, Überschriften, kurze Sätze und viele kurze Absätze bereitstellen. Wenn Leute große Textabsätze auf einem Bildschirm fast wirklich entsetzt sagen . Also wollen wir das nicht. Wir möchten es ihnen leicht machen, es zu scannen und im Grunde das zu finden, wonach sie suchen. Das ist aus Steve Craigs Buch, Bring mich nicht zum Nachdenken. Es ist ein Oldie, aber ein ausgezeichnetes Buch. Wofür wir entworfen haben. Manchmal sind unsere Stakeholder alles, was wir brauchen, um all diese Wörter auf die Seite zu schreiben, die wir für alle entworfen haben , die alles von links nach rechts, von oben nach unten lesen . Aber die Realität ist, dass sie die ganze Seite überspringen. Sie schauen sich also nicht immer den Inhalt an, den Sie von ihnen haben möchten. Sie suchen oft nach Links und Schlüsselwörtern. Manchmal, wenn Leute lesen, gibt es unterschiedliche Lesemuster, die Menschen haben. Eines der häufigsten, das Sie beachten sollten, ist das was wir das F-förmige Muster nennen. Wie ich bereits erwähnt habe, lesen die Leute nicht, dass sie scannen, aber sie scannen oft F-förmige Muster. Ich lese vielleicht die erste oder zwei Textzeilen. Dann scanne ich vielleicht runter. Sie lesen ein paar Wörter aus dem nächsten, und dann scanne ich vielleicht einfach nach unten und sehe mir Schlüsselwörter an. Hier sind einige Beispiele für dieses S-förmige Muster. Nicht das einzige Lesemuster, aber es ist ein sehr verbreitetes, insbesondere für Dinge wie Suchergebnisseiten. Sie können hier anhand von Eye-Tracking sehen , wie die Menschen den Schmerz betrachten. Nun könnte man sagen, oh, schalte Biodaten für Webinhalte frei, ich muss dieses Segment machen. Möglicherweise schreiben Sie jedoch immer noch Anweisungen für eine Anwendung oder Software. Wenn wir also Anweisungen haben, möchten wir sicherstellen , dass wir Dinge wie Anweisungen in Tooltips verschieben . Ein kleines Fragezeichen an der Seite oder Hilfe. Oder sogar Fehlermeldungen sprechen später über Fehlermeldungen. Aber manchmal müssen wir diese Anweisungen immer noch so formulieren , dass die Leute sie verstehen können. Wir möchten auch keine unnötigen Anweisungen hinzufügen. Sag den Leuten nicht, wie man Eier lutscht. Im Grunde sind die Leute nicht dämlich. Sie kennen einige gängige Konventionen. Also sag den Leuten nicht , dass sie Dinge benutzen sollen , wenn es ziemlich offensichtlich ist. Deshalb möchten wir sicherstellen, dass das Design selbst angibt, welche Aktionen den Benutzern zur Verfügung stehen. Designs sollten für sich selbst sprechen. Der Benutzer sollte keine Anweisungen zur Interaktion mit diesem Design oder dieser Benutzeroberfläche lesen müssen. Hier ist ein Beispiel für den Zugriff auf die Website Geben Sie Ihren Benutzernamen und Passwort in die dafür vorgesehenen Felder ein. Nein, das hätte ich nie von diesem Haustier bekommen. Also hier ist ein Beispiel. Die meisten Menschen kennen ein Login-Muster. Ich schlage nicht vor, dass Sie das tun, aber Sie könnten wahrscheinlich sogar die Beschriftungen, den Benutzernamen und das Passwort loswerden, und das Papier würde immer noch wissen, was Sie eingeben müssen , da es ein sehr vertrautes Muster ist. Verliere also einfach die Anweisungen zum Einloggen. Vielleicht geben Sie einfach eine Überschrift ein und worauf sie sich einloggen. Fügen Sie also keine überflüssigen Anweisungen hinzu, die nicht wirklich notwendig sind, und fügen Sie der Seite nur visuelles Rauschen und Unordnung hinzu. Man könnte also denken, dass die Leute keine Anweisungen lesen, und das stimmt oft, aber sie lesen Anweisungen, wenn sie nicht weiterkommen. Denken Sie also über Ihre eigene Situation nach. Haben Sie jemals ein Möbelstück von ikea oder ein Spielzeug für Ihr Kind gekauft und versuchen , es an Heiligabend zusammenzubauen, und Sie denken : Oh, ich musste das Handbuch nicht lesen, ich kann es ohne dass. Und dann fängst du an, es zusammenzusetzen und dann sagst du: Oh, ich stecke fest. Was machst du dann? Dann schnappst du dir das Handbuch. Die Leute suchen also nach Hilfe, aber nur, wenn sie nicht weiterkommen. Wenn sie also zu einem Webformular kommen , müssen sie die Anweisungen nicht lesen. Ich fülle einfach dieses Webformular aus. Dann stecken sie fest und suchen dann Hilfe. Und sie suchen an der Stelle der Verwirrung nach Hilfe. Manchmal möchten wir ihnen jedoch Ratschläge geben oder Dinge geben , die ihnen bei diesem Prozess helfen. Bevor sie anfangen. Und es ist wirklich schwer , denn wenn Sie diese Anweisungen oben auf ein Telefon legen , ignorieren die Leute sie einfach. Das ist also ein gutes Beispiel für eine Website von asic. Als wir unseren Firmennamen geändert haben. Im Grunde wurde mir das präsentiert. Bevor ich mit den Preisen begann, gab es eine Checkliste mit Dingen, die Sie beachten sollten, da es sich um eine Regierungswebsite für die Registrierung Ihres Unternehmens handelt. Irgendwie sollte ich diese Dinge wahrscheinlich lesen. Und mit einer Checkbox habe ich sie viel wahrscheinlicher gelesen. Hier sind die Dinge, die Sie beachten müssen. Jeder könnte all diese Kontrollkästchen durchgehen und einfach so ziemlich ankreuzen, ohne sie zu lesen. Aber wenn Sie das Kästchen hier ankreuzen , stimmen Sie diesen Dingen zu. Sie lesen also jede dieser Anweisungen, klicken auf die Kontrollkästchen und Sie können nicht fortfahren. Die Schaltfläche wird ausgegraut bis Sie alle diese Kontrollkästchen aktiviert haben. Dies ist also ein gutes Beispiel dafür , wie Sie manchmal Anweisungen im Stil eines Prozesses bereitstellen können , insbesondere wenn sie bestimmte Dokumente benötigen oder wenn sie bestimmte Dinge zuvor erledigt haben müssen . starte diesen Prozess. Wenn wir jetzt Inhalte schreiben, wollen wir die sogenannte umgekehrte Pyramide verwenden. Also wollen wir die wichtigen Dinge in den Vordergrund stellen. Es ist also fast das Gegenteil von akademischem Schreiben, wo wir unsere Einführung, Methode oder Herangehensweise, unsere Ergebnisse und Diskussionen haben und zu einer Schlussfolgerung gelangen. Beim Schreiben von Webinhalten. wollen wir auf den Kopf stellen. Wir wollen mit dem Fazit beginnen. Was die Leute wissen wollen, was sollen sie dann wissen? Was für all die anderen kleinen Dinge , die man in ihre Allgemeinen Geschäftsbedingungen setzen muss, solche Dinge. Ich habe also oben auf der Seite die wirklich wichtigen Dinge , die den Benutzern helfen werden, ihre Ziele zu erreichen. Und das kommt natürlich darauf zurück, was sind die Ziele des Benutzers und wer sind die Benutzer für diese Seite? Denken Sie also immer daran, wenn Sie Inhalte schreiben. Wer ist das Publikum für diese Seite? Und was versuchen sie zu erreichen? Ich zeige dir jetzt ein kleines Video. Also ziemlich sauber. Hast du dich mit Steaks beschäftigt? Ich habe häufig Fragen gestellt, bitte nur, um weiterzuwandern, sagt das in diesem Abschnitt nicht wirklich. Sie können dies und das beantworten , indem Sie nur auf Assists wandern und hier für diese letzte Frage klicken. Wie Sie hier sehen können, gibt es eine Menge überflüssigen Text. Dies ist eine häufig gestellte Frage. Sie erhalten 1.000 Anrufe am Tag. Ja. Ich hoffe also, dass Ihre FAQs oder Basis und alle Anrufe Sie einige Ihrer Fragen noch beantwortet haben. Okay. Wo werden sie beantwortet? Wenn Sie die Informationen nicht finden können, gehen Sie zur Tat. Nun, viel Glück damit. Der Versuch, Informationen aus einem Regierungsgesetz zu lesen. Und dann ganz unten auf der Seite befinden sich die drei kleinen Links, unter denen die häufig gestellten Fragen tatsächlich zu finden sind. größte Teil dieses Textes ist also überflüssig. Gf ist mein wissenschaftliches Label für diese überflüssige Freundin. Im Folgenden gestalten wir diese Seite neu. Wir haben jetzt die drei Links für die FAQs, weil ich so viele FAQs hatte , die nach der Zeit kategorisiert sind ob es eine Tendenz begann oder beendete. Es gab viele Kleinigkeiten wie tausche ich eine Glühbirne aus? Wer muss dafür bezahlen? Also viele kleine spezifische Fragen. Aber indem sie sie kategorisiert haben , haben sie das getan. Also hatten wir zuerst diese drei Links und wenn Sie sie nicht finden können, dann gehen Sie zu diesen Orten. Eine andere Sache, die Sie mit Inhalten tun können , ist die Verwendung von Expand Collaps oder Show Hide Panels. Diese sind sehr nützlich, insbesondere auf Mobilgeräten, da der Benutzer die Kontrolle darüber hat , welche Inhalte sagt und was er erweitert sehen möchte. Das ist also ein nettes Beispiel. Hier ist ein weiteres Beispiel für ein erweiterbares Panel. Dies ist das Turn Data Discovery-Portal, an dem wir gearbeitet haben. Auch hier haben wir viel Benutzerrecherche angestellt. Wir haben mit Ökologen und Forschern gesprochen. Und wir fanden heraus, dass eines der Dinge, die Wissenschaftler an Hochschulen wissen möchten, Metadaten oder Daten über Daten sind. Es ist also ein Ort, an dem ich nach ökologischen Daten suchen kann. Und was wir gefunden haben , sind die Dinge, die sie alle wissen wollten. Wir haben dort oben auf der Seite platziert und dann die Dinge, die einige Benutzer wissen möchten, haben wir in diesen Panels zum Erweitern oder Reduzieren getroffen. also erneut sicher, dass Sie Etiketten wie Anzeigen und Ausblenden anbringen , um die Barrierefreiheit zu gewährleisten. Und stellen Sie sicher, dass es einen starken visuellen Hinweis gibt als ob der gesamte Bereich anklickbar ist, wie ein Rand um ihn herum oder Schattierung oder Farbe, solche Dinge. Das sind also Beispiele für expandierende Paneele. Jetzt möchte ich ein wenig über Alphabetisierung und Lesbarkeit sprechen . Ich denke, das ist ein bisschen tragisch, aber etwa 14% der Australier haben eine sehr schlechte Alphabetisierung, und das ist auch in anderen westlichen Kulturen sehr verbreitet. Das heißt nicht, dass sie dämlich oder dämlich sind. Und wie auch immer, es ist nur so, dass Menschen unterschiedliche Hintergründe haben oder Lernstörungen haben , die ihnen das Lesen erschwert haben könnten haben , die ihnen das Lesen erschwert , oder Dinge wie Legasthenie, solche Dinge. Die allgemeinen öffentlichen Websites. Das bedeutet, dass wir generell Inhalte schreiben wollen , die auf die sechste Klasse ausgerichtet sind der es um uns eines 12-Jährigen geht. Das klingt also ziemlich beängstigend. Aber denken Sie nur daran, ob Sie ein allgemeines öffentliches Publikum haben. Wenn Sie also eine Bank-Website oder eine Regierungswebsite für staatliche Unterstützung haben , sollten Sie sicherstellen, dass diese Inhalte auf etwa eine sechste Klasse ausgerichtet sind. In der australischen Regierung heißt es im Styleguide für Webinhalte , dass es sich um eine fünfte Klasse handelt. Das kann also schwierig sein. Wie beurteilen Sie das eigentlich? Es gibt also verschiedene, was wir Lesbarkeitsskalen nennen, die die Lesbarkeit von Texten bestimmt haben. Das ist also eines dieser Beispiele namens Pommes. In diesem Beispiel nehmen Sie drei Textabsätze. Sie haben die durchschnittliche Anzahl der Silben über 100 Wörter und die Anzahl der Sätze pro hundert Wörter. Und dann chatten Sie das für diese drei Absätze diesem Raster in diesem Diagramm. Und dann zeigt es Ihnen, dass es sich ein College-Niveau handelt, das eine Universität ist, oder ob es sich um einen Fünftklässler handelt und so weiter. Das ist also eine Möglichkeit, das zu tun. Das ist der schwierige Weg, aber das ist die Hintergrundtheorie dahinter, ein paar andere Tools, die Sie verwenden können, auch nur grundlegendes Microsoft Word. Wenn Sie in die Optionen gehen, können Sie auf Lesbarkeitsstatistiken klicken und dann eine Rechtschreibprüfung durchführen. Und am Ende erscheint es und gibt Ihnen die Punktzahl für die Lesbarkeit. Das benutzt also eine Methode namens Flesch-Kincaid anstelle von Pommes. Dies ist eines meiner Lieblingstools. Dies heißt Hemingway App. Viele Texter verwenden Tools. Mit diesem Tool erhalten Sie Ihre Texte von Ihrer Website oder was auch immer Sie testen möchten, und fügen sie in diesen mittleren Bereich ein. Und das einzige, was ich an diesem Tool nicht mag , ist , dass es keine kristallklare Art ist, Ihre Texte einzufügen. Sie fügen Ihren Text also direkt über den Text ein, der bereits da ist. Und dann erhalten Sie automatisch eine Punktzahl auf der rechten Seite. Dieser Text hier ist also lesbar. Und was wirklich nützlich ist, ist, dass Sie es in einer Zeile bearbeiten können. Also kannst du hier reingehen und sagen, okay, dieser Satz in dunkelroter Schattierung , der sehr schwer zu lesen ist. Lass mich gehen und das ändern. Und dann können Sie in Echtzeit sehen, wie sich das ändert. Dann kannst du gehen, okay, ich bringe es auf die fünfte Klasse, indem ich ein paar große Wörter entferne. Manchmal ist es also schwierig, es runterzukriegen, wenn man Worte wie die australische Regierung hat , das sind große Worte. Und ich werde die Lesbarkeit beeinflussen, aber es kommt nicht damit zurecht. Wenn Sie es Ozzie und Gov nennen, ist das wahrscheinlich nicht der beste Weg, um getroffen zu werden. Es gibt also Begriffe wie diese , die Sie einfach nie vermeiden können. Als Nächstes werden wir den visuellen Designprozess durchlaufen . 8. Visuelle Design-Prozesse – vom Wireframe bis zum visuellen Design: Jetzt werden wir über den visuellen Designprozess sprechen, hauptsächlich darüber, wie wir Moodboarding verwenden können, um vom Schwarz-Weiß-Wireframe zu einem tatsächlichen visuellen Design überzugehen vom Schwarz-Weiß-Wireframe . Wir werden uns auf Moodboarding konzentrieren, um unseren Designs einen visuellen Stil zu verleihen. Und wir werden auch über Styleguides sprechen, entweder als Hilfsmittel im Prozess oder als Möglichkeit, diese Stile zu dokumentieren. Moodboards sind Sammlungen von Bildmaterialien zur Präsentation von Ideen und Konzepten. Es ist nicht etwas, mit dem wir in UX sehr vertraut sind, aber es ist eine beliebte Technik in der gesamten Designwelt und anderen kreativen Bereichen. Moodboards eignen sich hervorragend, um visuelle Anweisungen für Ihr Design zu erstellen und es Ihnen zu ermöglichen, diese Ideen effektiv mit anderen zu teilen. Sie wollten die richtige Stimmung vermitteln und die emotionaleren Aspekte des Designs hervorheben. Im Gegensatz zu Wireframes und Prototypen zeigen Moodboards kein detailliertes Bild eines zukünftigen Projekts. Aber noch mehr, diese emotionalen und irgendwie breiteren Farben, die Topographie und die Bildsprache und so weiter. Warum beschäftigen wir uns überhaupt mit Moodboards? Zuallererst geht es darum, Zeit und Mühe in ein paar Stunden oder vielleicht weniger zu sparen . Designer können diesen visuellen Leitfaden für Kunden erstellen. Wenn wir ein Konzept vorstellen. Und das Handy kann problemlos bearbeitet werden , was sowohl Zeit als auch Mühe spart. Es ist auch eine gute Möglichkeit, Kunden in den Prozess einzubeziehen. Wir können Ideen von Kunden bekommen und versuchen zu verstehen, was sie von dem Projekt erwarten. Sie können aktiv an der Auswahl von Stilen und Mustern teilnehmen . Und es ist eine einfache Technik, die auch durchgeführt werden kann , wenn Sie kein Designer sind. Sie können es auch tun, um das Projekt zu verstehen. So können Sie Moodboarding auf dem Client durchführen. Wie sieht die Marke jetzt aus? Die demografische, vielleicht zu Ihren Personas hinzufügen. Was ist der visuelle Stil? Was lieben sie? Was benutzen sie? Was sehen sie? Kann auch ein Moodboard über die Konkurrenten des Kunden erstellen. Wie sehen die Websites der Mitbewerber aus, um zu vermeiden, dass dies auch der Fall ist? Am wichtigsten ist also, dass wir uns langweilig bewegen , um uns inspirieren zu lassen und diese visuelle Richtung festzulegen. Es ist eine gute Möglichkeit, Ideen und Inspiration für die visuelle Ausrichtung Ihres Designs zu finden . Je mehr der Mund im Mittelpunkt steht, desto einfacher wird Ihr visueller Gestaltungsprozess. Als UX-Designer könnten wir ein Moodboard für Interface-Elemente, für Ikonographie, für die Topographie einer Farbe erstellen ein Moodboard für Interface-Elemente, . Schauen wir uns einige Beispiele an. Moodbody hilft uns also dabei, herauszufinden , wie wir vom Wireframe zum visuellen Design übergehen können. Das ist also nur ein Beispiel, eine Art einfaches Beispiel. Wir haben das Wireframe auf der linken Seite und wir haben eine Art Datei-Benutzeroberfläche auf der rechten Seite. Lass uns versuchen, das ein bisschen aufzuschlüsseln. Bisher haben wir uns im Bereich UX auf die funktionalen Aspekte des Designs konzentriert. Welche Art von Interaktionselementen benötigen wir? Wie sieht der Ablauf der Website aus, die wir zum Handeln aufrufen werden? Müssen wir mit einbeziehen, wenn wir mit dem Moodboarding beginnen, beginnen wir , diese visuelle Richtung für unser Design festzulegen . Und dies ist ein einfaches Wireframe für eine Website zur Suche nach einem Haustier. Und schauen wir uns an, wie der Moodboarding-Prozess dazu beigetragen hat, die Richtung dieses Designs zu bestimmen. Also wurden zunächst einige Stichwörter festgelegt, sodass diese fröhlich und flott im Retro-Look waren. Diese Seite war eine Website für Haustiere und richtet sich an Familien mit kleinen Kindern , die ein Haustier für ihre Familie suchen. Deshalb wurde dieser sehr fröhliche Flow, deine Retro-Vibes ausgewählt. Dies ist ein Beispiel für ein einseitiges Moodboard. Basierend auf diesen Schlüsselwörtern. Basierend auf diesen Schlüsselwörtern können wir beginnen, uns inspirieren zu lassen. Dies ist also eine Sammlung einiger Screenshots von anderen Websites. Es gibt einige Fotos, die auf die visuelle Richtung des Designs hinweisen. Es muss nicht superkompliziert sein. Sie können ein paar Bilder machen. Es muss nicht lange dauern, aber die Beschaffung, also nur ein bisschen Inspiration, bevor Sie mit der Gestaltung beginnen, wird hilfreich sein. Sobald Sie diese Inspiration gesammelt haben, können Sie mit der Aufschlüsselung und Analyse des Designs beginnen. Dann verwenden Sie das als Ihre Richtlinien. Also wollen wir zum Beispiel nicht das Design kopieren, wir wollen nicht die Inspirationsquellen kopieren, die wir gefunden haben. Wir wollen verstehen, was sie getan haben und warum sie das getan haben, und das dann kopieren und dann tun. Also hier konnte ich kein bisschen analysieren. Also gab es. Sie haben große bunte Blöcke als Hintergrund für jeden Abschnitt verwendet . haben sie. Die geraden Linien werden durch überlappende Elemente unterbrochen . In diesem Fall fließen die Socken, die gewählt werden, überall heraus. Und dann haben sie abgerundete Knöpfe im Design. Und dann die Verwendung von Farbblöcken, da wird kaum Weiß verwendet. Okay, also wie könnte uns dieses Moodboard helfen , diese Benutzeroberfläche für diese Website zu erstellen? Wir haben also diesen Schwarz-Weiß-Wireframe und dann werden wir die verschiedenen Elemente anwenden , die wir in einem Moodboard gesehen haben. Deshalb haben wir die großen bunten Blöcke als Hintergrund für jeden Abschnitt auf der Pet-Website verwendet Die Abschnitte mit geraden Linien sind durch überlappende Elemente unterteilt, in diesem Fall einige Formen und ein paar Hunde. Wir haben diese abgerundeten Knöpfe und abgerundeten Kacheln verwendet. Dann haben wir Farbblöcke verwendet. Es gibt kaum eine Möglichkeit. Das war also das Ergebnis einer einfachen Moodboard-Übung und dann auf dieses Wireframe angewendet. Es ist auch alles in einem sehr kurzen, einfachen Styleguide zusammengefasst , dem wir die Schaltflächenstile, die Überschriften, die Farben und dann einige der darin verwendeten visuellen Elemente haben , die Farben . Okay, lassen Sie uns den Prozess ein wenig Ethanol aufschlüsseln . Sie können drei visuelle Keywords brainstormen. Es könnte also Markenwerte geben, im Grunde Keywords, die die Marke widerspiegeln und Ihnen eine Richtung geben. Während Ihrer UX-Recherche und -Analyse haben Sie also höchstwahrscheinlich viele Erkenntnisse von Ihren Benutzern darüber gewonnen, was sie mögen, über die Marke. Welche Stimmung gibt ihm die Marke und was soll sie bewirken? Und wir können diese Recherche verwenden, wenn wir diese Keywords dann beschreiben. Wir können Mindmapping, Wortassoziationen oder Brainstorming zu Wörtern durchführen . Dann können wir zusammen mit oder ohne die eines Kunden diese Keywords ermitteln. Hier einige Beispiele für emotionale Keywords. Fröhlich, kompetent, freudig, neugierig und so weiter. Als Nächstes wollen wir entscheiden, welche Moodboards wir benötigen. Brauchen wir Interaktionselemente oder ist das schon etabliert? Benötigen wir Farbe, eine neue Farbpalette oder Typografie oder ein Moodboard für das Layout. So oft gibt es vielleicht einen vollständigen Styleguide In diesem Fall brauchen wir wahrscheinlich nicht viel, um viel Moodboarding zu machen. Aber manchmal bin ich vielleicht die Hälfte. Wir haben diese Schaltfläche, hat diese Tastenstile, diese Farbpalette, aber es gab keine, es fehlen immer noch einige Elemente. Ja, wenn also etwas fehlt, ist es eine gute Idee, sich dafür inspirieren zu lassen, dass wir einfach anfangen wollen, ein Moodboard mit Beispielen zu erstellen und zu erstellen , die diese Keywords widerspiegeln. Wir können Screenshots machen, wir können ein paar Fotos machen. Und denken Sie noch einmal daran, ein Moodboard, das fokussiert ist , ist etwas effizienter , als einfach viele verschiedene Quellen zu haben , die in verschiedene Richtungen zeigen. Es ist also eine gute Idee, die Optionen zu verfeinern, das bestmögliche Ergebnis zu erzielen. Also lieber drei fokussierte Referenzen als ein Haufen verschiedener Ideen. Schließlich wollen wir ein Moodboard analysieren. Wir wollen es aufschlüsseln und verstehen, was diese Beispiele zu guten Beispielen macht. Was zeichnet diese Inspiration aus, die wir gewonnen haben? Wir wollen das Design nicht kopieren, sondern erstellen unser eigenes Design, das auf einigen guten Ideen basiert. Ein Beispiel dafür könnte das Layout sein. Es hat breite oder schmale Ränder. Haben wir, welche Art von Topographien verwenden , wenn das von Interesse ist. Es könnte die Art und Weise sein , wie die Website ausgewogen ist , oder es könnte die Hierarchie sein, die uns gefällt. Also ja, wir können, wir können uns diese Inspiration holen und sie dann aufschlüsseln. Schauen wir uns ein anderes Beispiel an. Es geht wieder darum, etwas Gespieltes in etwas Emotionaleres und Visuelleres zu verwandeln . Von diesem Schwarz-Weiß zu etwas Buntem übergehen . Das ist wie eine richtige UX-Skizze, sehr frühe Skizze, die nur diese Microsite und die Elemente darauf skizziert. Dann gehen wir in die Wireframe-Phase über, wo wir zu Figma oder Sketch übergehen. Und dann beginnen wir, unsere Elemente auf dem Raster zu platzieren , das wir angelegt haben. Dann können wir anfangen, diese Keywords zu erstellen , die zur Marke passen. In diesem Fall sind Quirky, Library und Dynamic einige der Wörter. Dann können wir mit dem Moodboarding beginnen. Also hier ist ein Moodboard für UI-Elemente. Also ein bisschen Inspiration dafür. Wir haben irgendwie cartoonartige Schaltflächen und farbige Rahmen mit Leerzeichen und so weiter. Also brechen wir es auf. Es gibt einige Anregungen zum verwendeten Layout und zur verwendeten Bildsprache. Und dann Farben. Schon wieder. In diesem Fall haben wir zweifarbige Bilder. Die Verwendung heller Neonfarben, um dieses Gefühl von Emotionen und Gefühlen hervorzurufen. Es ist ein bisschen mehr Gefühl und ein bisschen mehr Gefühl, Gefühl in dieser Phase des Prozesses. Basierend auf denen, die diese Analyse aufschlüsseln, können wir dann damit beginnen , diesen visuellen Stil auf unser Wireframe anzuwenden . Wir können es Abschnitt für Abschnitt machen. Also fangen wir oben an und arbeiten uns dann nach unten. In dieser Phase könnten wir gleichzeitig auch einen Styleguide einrichten. Deshalb werde ich auch in dieser Phase etwas mehr über innovative Styleguides sprechen . Es gibt einige gute Ressourcen , die Sie vielleicht nutzen möchten. Kostenlose Bilder können also von Unsplash, Pixabay Pixels, nappy.co und Stock Snap bezogen werden. Um nur einige Icons zu nennen, um Icons in einem Design zu verwenden. Es gibt viele kostenlose da draußen. The Noun Project D, ich kann es sagen, und Ionische Säulen sind nur einige Beispiele. Und dann wieder Schriften, wenn wir eine benutzerdefinierte Schrift haben möchten oder nur eine Schrift, die unserer Marke und dem, was wir vermitteln wollen, passt, können wir Schriften von Google Font, Font Fabric, Adobe-Schriften herunterladen , und es gibt noch viel mehr da draußen. Lassen Sie uns über Styleguides sprechen. Styleguides definieren die konsistenten Muster, die Benutzeroberflächenelemente und die visuellen Stile wie die Schriften, die Farben und die in den Designs verwendete Ikonographie. Kunden haben oft Styleguides. Manchmal sind sie umfangreicher, manchmal gibt es kaum welche. Manchmal müssen Sie als UI-Designer mit dem Kunden zusammenarbeiten, um einen umfassenderen Styleguide zu entwickeln. Es gibt verschiedene Möglichkeiten , sich diesen Styleguides zu nähern und sie zu interpretieren. Wenn es bereits einen Styleguide und definierte Elemente gibt, dann müssen Sie hier anfangen. Als großer Kerl kann neben Ihrem Wireframe auch einfach in Arbeit sein , warum Sie Stile testen und Zeit nach und nach verfeinern. Es ist also fast so, als würden Sie von Ihrem Wireframe hin und her gehen und dann eine Art Elementdesign , interaktives Elementdesign. Sie verwenden es auch als Ende des Prozesses, um das Design dann zu dokumentieren, damit andere es verwenden können. Es könnte also zusammen mit Ihrem Wireframe geliefert werden. Und Sie sind eher visuelle Designs, die sehr spezifisch sein können und pixelgenaue Abmessungen für bestimmte Elemente zeigen . Oder sie können lockerer sein und umfassendere Richtlinien bieten. Anhand von visuellen Beispielen gibt es keinen einzigen richtigen oder falschen Weg , diese Styleguides zu erstellen. Es muss nur von anderen verstanden werden. Es ist wichtig, sich daran zu erinnern, dass sie lebende Vermögenswerte sind und dass sie sich mit dem Design ständig weiterentwickeln. Hier ist ein weiteres Beispiel dafür , wie die Schlagzeilen und die Bilder auch im Design zusammenspielen. Ich habe die Symbole, die Verwendung von Bildern für den verwendeten Bildstil sowie die Farbcodes und das Zitatdesign. anderen Fällen gibt es einen umfangreicheren Styleguide als diesen Medecins Sans Frontieres-Styleguide, Branding-Richtlinien online. Wie es hier heißt, ist das visuelle Identitätssystem eine Möglichkeit, die Konsistenz über alle Kommunikationskanäle, die wir verwenden, sicherzustellen Konsistenz über . Das ist also eine globale Marke und sie hat eine Art lokales Zentrum. Um diese weltweite Einheitlichkeit zu gewährleisten, haben sie diese stille, umfangreiche Markenrichtlinie entwickelt. Es hat also quasi herunterladbare Assets. Wir haben also die Logos und dann, wie das Logo angebracht wird. Wann sollten Logos verwendet werden, wann Symbole verwendet werden, was beim Design nicht zu tun ist und was zu tun ist. Es hat auch Farbe. Eine der Hauptfarben und was sind die Sekundär- und Tertiärfarben? Es hat Typografie und dann auch Komposition. Struktur, Bilder, Karten, Piktogramme und Beispiele dafür, wie all dies zusammenkommt , um die Marke zu kommunizieren. Als Designer für dieses Projekt müssten Sie also auf diese Seite gehen, die Assets herunterladen und dann die Markenrichtlinien durchschauen und dann sicherstellen, dass sie mit ihnen übereinstimmen. In diesem Fall würdest du wahrscheinlich nicht viel Moodboarding machen. Du würdest einfach gehen, direkt loslegen. Als Nächstes geben wir Ihnen eine kleine Zusammenfassung der Lektionen , die wir durchgemacht haben. 9. Zusammenfassung und wichtige Kurseinheiten: Beste Arbeit jetzt bei einer Zusammenfassung, für Kurs 7 über visuelles Design und Informationsdesign. Was ist visuelles Design? Erinnerst du dich an diese Es ist die Praxis , Raster zu entwerfen, Seiten anzulegen, Farbpaletten auszuwählen und Symbole zu entwickeln. Und das ist die Definition laut BCS. Also die Grundprinzipien des visuellen Designs, die wirklich wichtigen, an die Sie sich erinnern müssen , wenn Sie dort sitzen, BCS, Prüfung, Nähe , Ausrichtung, Wiederholung und Kontrast. Erinnerst du dich an das Akronym park PARCC? Auch hier sind sie laut BCS die grundlegenden , sie sind wahrscheinlich auch andere, aber dies sind diejenigen, die sie für am wichtigsten halten. Sophie sprach über Gestaltprinzipien, Prinzipien der Nähe , Ähnlichkeit, Figur , Schließung, Fortsetzung und Ausgrenzung. Sie sprach auch über andere Gestaltungsprinzipien wie Hierarchie und Ausrichtung, Wiederholung, Balance und Kontrast. Sophie sprach über die visuellen Elemente Farbe, Typografie und Ikonographie. Ich habe dann das Konzept der Erschwinglichkeit angesprochen. Hier beeinflussen oder implizieren die physikalischen Eigenschaften die Funktion. So etwas wie ein Joystick ist für einen Dreijährigen wirklich offensichtlich, wie man damit umgeht. Wir haben Metaphorical und Skim Office angesprochen und wo ein Objekt in der Software dieses Gegenstück aus der realen Welt nachahmt . Denken Sie also auch an diese Bedingungen. Und die kognitive Belastung reduzieren. Und ich habe darüber gesprochen, dass der Benutzer sich keine Informationen von einem Teil des Systems zum anderen merken muss. Lassen Sie mich den Informationsfluss und das Schreiben von Webinhalten testen. Also sprach er darüber, dass der Informationsfluss viele verschiedene Elemente hat. Dann sprachen wir über Informationsdesign in Bezug auf das Schreiben von Webinhalten, beigefügt über Alphabetisierung und Lesbarkeit und wie diese gemessen werden können. Wir haben darüber gesprochen, dass einige der Prinzipien des roten Schreibens für das Web darin bestehen, wie Benutzer Inhalte lesen. Und wir haben über das F-förmige Muster gesprochen. Dann sprach Sophie über den Prozess vom Drahtmodell zum visuellen Design und wie wir das machen. In unserem nächsten Kurs, Nummer acht, werden wir über die Bewertung der Benutzerfreundlichkeit sprechen, einschließlich Designheuristik.