Collegekurs User Experience Design: Einführung in UI- und UX-Design von einem Universitäts-UX-Dozenten

1. Kurseinführung: Willkommen beim User Experience Design Kurs 101. Mein Name ist Erin Lawrence und ich bin Principal UX Designerin und Gründerin einer UX-Agentur namens UX Honey in San Francisco, Kalifornien. Ich bin auch UX Instructor. Ryan unterrichtet fortschrittliches UX-Design an der Academy of Art University, auch hier in San Francisco. Okay, beginnen wir mit einem Überblick über die Einführung des Kurses auf hohem Niveau. Und ich werde alle Themen behandeln , die wir durchgehen werden. Alles klar, was ist UX, was ist der Ursprung davon? Und wenn man es sich anschaut, präsentiere ich genau hier das U und das X aus der Benutzererfahrung. Und Benutzererfahrungen genau das, was es sagt. Du entwirfst Dinge , die Leute benutzen können. Es ist wirklich wichtig zu wissen. Und viele Fälle , in denen Sie nicht der Benutzer der Produkte sind, für die Sie entwerfen. Du musst rausgehen und mit diesen Leuten lernen. Sie müssen bestätigen , dass die von Ihnen entworfene Lösung auch für diese Personen funktioniert. Was ist der Unterschied zwischen der gemeinsamen UX- und Begriff- und UI-Terminologie? Ich mag die Analogie , die ein Keks ist. Design der Benutzeroberfläche in Analogie zu einem Cookie ist das eigentliche Cookie selbst. So sieht es aus. Es sieht zäh aus, es sieht schokoladenlos aus. Er ist nicht neongrün und es sieht nicht so aus, als würde es dich krank machen. Das erste, was du tun wirst, ist dass du mit deinen Augen essen wirst. Der Cookie muss mich also visuell ansprechen. Zuerst sehe ich den Keks. Es ist schön warm, Schokoladengüte drin. Und dann esse ich es. Als mich jemand fragte Wie war der Keks, sage ich ihnen, dass es wirklich gut war, aber ich wünschte, er hätte mehr Rosinen drin. Der Akt des Lernens, wie es war. Das ist UX, der jemanden fragt warum und wie war diese Erfahrung? Ist das User Experience Craft, während das Handwerk der Benutzeroberfläche lernt, wie man Dinge visuell erstellt. Ich hoffe, das ist hilfreich. Aber nur für den Fall, Lassen Sie uns tief in dieses Thema UX und UI eingehen. Was ist erfolgreiches UX? Erfolgreiches User Experience Design besteht darin, Geschäftsziele mit Kundenmotivationen zu verbinden Geschäftsziele und gelöste Lösungen zu schaffen, die gute Ergebnisse für Unternehmen erzielen und gleichzeitig die Bedürfnisse der Kunde. Daher ist es wichtig , dass Sie die Ziele des Unternehmens verstehen , auch die Motivationen des Kunden. Und Sie werden Dinge lösen, die dem Geschäft zugute kommen und auch die Bedürfnisse des Kunden lösen. Wir werden das User Experience Design insgesamt 101 machen . Dies ist der gleiche Lehrplan in der Klasse, den ich auf Universitätsebene unterrichte . Das Ergebnis davon ist eine Fallstudie. Was Sie lernen werden, alle Methoden und Tools, die benötigt werden um eine solide UX-Fallstudie zu erstellen. Lassen Sie mich all die Dinge durchgehen, die wir in diesem Kurs durchmachen werden. In diesem Kurs lernen Sie, wie Sie Ziele setzen, wie Sie eine Persona erstellen ein Benutzerinterview-Skript erstellen. Best Practices bei der Durchführung von Forschung hatten synthetisierte Forschungsergebnisse. Wie schreibe ich eine Problemanweisung, wie man eine Customer Journey Map erstellt, Vorlagen und Frameworks skizziert. So erstellen Sie ein Wireframe-Design, wie erstellt man einen anklickbaren Prototyp, wie man Benutzertests durchführt, die Basis von Designsystemen, wie man visuelles Design auf Ihr Drahtmodell anwendet und Best Practices wenn es um Design-Lebensläufe geht. Okay, schauen wir uns das gesamte Klassenmaterial an , das wir in der nächsten Videorunde behandeln werden. Ich schließe meine Vorschau. Ich komme zur Fallstudie. Ich gebe Ihnen am Ende das Beispiel der Fallstudie. Und ich werde schnell all das Material durchgehen , das wir teilen werden, und alle Themen, die wir behandeln werden. Aber Sie können sehen, hier sind alle Themen auf einer Website dargelegt. Und das unterrichte ich an der Akademie der Künste. Das erste, was wir hier behandeln werden ist, dass wir zum Kickoff-Treffen kommen werden. Hier geht man alle Ziele durch. Und die Ziele, die wir abdecken werden, werden die Geschäftsziele sein. Darüber rede ich. Die Produktziele, die Nutzer und ihre Ziele, die Pfahlinhaber. Dies sind Personen, die an Ihrem Projekt beteiligt sind. Dies sind die Kunden, die Sie über sie wissen sollten, die Personen, die Sie durchführen, Bewertungen mit dem Risiko, dem Sie ausgesetzt sind, und wie Sie diese Risiken mindern können . Das nächste, was wir behandeln werden, ist, dass wir uns das Framework ansehen werden, um eine Persona zu erstellen. Und die Persona sieht so aus. Und wir werden lernen, dass Personas wichtig sind, den Prozess der Schaffung einer Persona kreuzen. Und dann schauen wir uns an, wie man ein Interviewskript erstellt. Und ich habe auch Vorlagen , die ich dir geben kann. Sie können also einige dieser Vorlagen herunterladen und sie selbst ausfüllen. Ich bringe dir bei , wie man ein Drehbuch baut. Wenn Sie eine erstellen möchten, erhalten Sie tatsächlich eine Vorlage, die Sie verwenden können. Und Sie können diese Vorlagenfragen ausfüllen und Sie können Sie Leute interviewen, an denen Sie interessiert sind. Und ich werde Ihnen auch die Best Practices für Interviews geben, wie Sie ausgehen und Leute interviewen und Notizen machen und diese Interviews aufzeichnen können. Auf diese Weise können Sie zurückkommen und die Synthese und das Clustering durchführen. Hier nehmen Sie alle Informationen auf, die Sie während der Recherche gefunden haben, und Sie machen einen Sinn dafür. Du suchst nach Mustern. Und diese Muster helfen dabei, Ihre Lösungen oder die Probleme zu lenken und die Probleme zu validieren , mit denen Sie konfrontiert werden. Danach bringe ich dir bei, wie man eine Problemaussage macht. Nachdem Sie also die Menschen und die Probleme kennengelernt haben , können Sie das Problem erneut beheben. Auf diese Weise können Sie Lösungen für diese validierten Probleme entwickeln . Danach lernen wir die Customer Journey Map kennen. Sie können hierher kommen und die Reise abbilden , auf die Sie Ihren Kunden bringen werden. Auf diese Weise können Sie anfangen, für diese Reise zu skizzieren, und ich gebe Ihnen in jedem Video Beispiele dafür. Dies wird das längste Video der Klasse sein. Die meisten Videos, die du haben wirst werden ziemlich kurze Sessions sein. Es sollte also leicht für dich sein, dich selbst aufzunehmen, zu lernen und zu tun. Nachdem Sie die Customer Journey Map erstellt haben, gehen wir zu den Konzepten über. Was wir hier lernen werden, nennt man Value Requisite, sieht irgendwie so aus. Wir lernen mehr Konzept-Frameworks wie eine Vier nach oben. Lerne eine andere Technik namens Bilderrahmen. Ich verweise Sie auch auf andere Websites, auf denen Sie coole Beispiele finden wie Sie Konzepte als Team, als Gruppe oder für sich selbst zeichnen und erstellen können. Danach bringe ich Ihnen allen bei, wie man ein Drahtgitter erstellt. Ich komme hier rüber. Ich verwende gerade Adobe XD. Und ich habe einen Wireframe-Workflow erstellt, um Baba t auf Abruf an Ihr Haus zu liefern. Das Ziel dieser Anwendung ist es also, Baba zu Ihnen nach Hause liefern zu lassen in San Francisco zu Ihnen nach Hause liefern zu lassen, wann immer Sie es wollen. Also lasst uns weitermachen und diesen Prototyp spielen. Ich klicke drauf. Geladen. Ich mache meinen FirstName, LastName, ich schicke ihnen eine E-Mail und melde mich für die Anwendung an. Ich sehe die Anmeldung. Ich kann alle Bobo t Application Drinks sehen , die ich habe. Ich kann eins hinzufügen. Ich möchte, dass dieser nicht regelmäßig, süß, sondern nur halb süß ist. Ich will große Tapioka. Ich drücke Add. Ich geh mal auschecken. Ich werde sehen, wie viele Bobo Teegetränke ich bestellen möchte. Nur einer ist in Ordnung. Ich drücke „Weiter“. Ich lege meine Straße ein, meine Adresse rein. Ich werde für dieses Baba t bezahlen. Jetzt sehe ich es auf einer Karte und es wird in meine Haussuite geliefert . Okay, was Sie als Nächstes lernen werden, ist , das Drahtmodell zu nehmen , das Sie für Ihre Fallstudie entwerfen , nicht Baba t sein muss . Und du gehst raus und machst Usability-Tests. Aber bevor Sie das tun, Sie mit dem Benutzertestskript zu tun haben. Ich habe eine Vorlage , mit der Sie ausfüllen können, wie Sie das richtig machen können, und ich gebe Ihnen Best Practices für Benutzertests. Danach lernen wir Designsysteme. Also gebe ich Ihnen das Ganze darüber, was ein Designsystem außerhalb des Ansatzes ist, was ein Styleguide ist, es hat auch hier viel Eintauchen. Sobald Sie verstanden haben , dass wir die Bobo t-Anwendung verwenden können , mache ich eine weitere Runde Video, um Ihnen zu zeigen, wie Sie dieses Design hier aufnehmen und visuell machen können. So können Sie jetzt sehen, dass wir das visuelle Design hinzugefügt haben. Ich werde das nochmal visueller durchmachen. Ich habe mich angemeldet. Ich konnte sehen, wie der Buddha t, sie sind süß. Ich will einen normalen Milchtee. Ich will es mit regulärem Set, unserem halbsüßen. Ich bin auf großer Tapioka. Ich möchte es in den Einkaufswagen legen. Ich kann sehen, dass es hier hinzugefügt wurde. Ich komme hier rüber. Ich habe die Menge, die ich bearbeiten kann, ich kann Dinge entfernen, die ich aus Usability-Tests gelernt habe. Ich drücke Weiter, ich lege meine Adresse ein. Wir haben auch gelernt, dass die Leute wollten, dass es Text sein sollte , wenn sie Baba t war, ausgeliefert werden würde. Also haben wir hier die Telefonnummer hinzugefügt, basierend auf den Usability-Tests, die wir durchgeführt haben. Wir drücken Weiter. Ich lege meine Kreditkarteninformationen ein und schaue mir das an. Die Glühbirne wird bei Lieferung zu mir nach Hause kommen. Und wir haben fünf Minuten, zwei Minuten. Und es ist fast da. Ja, ich habe Bobo t und ich bekomme die SMS, dass es an meiner Haustür geliefert wird, klopfen Sie, treffen Sie sich mit der Person Apple. Was du ganz am Ende des Kurses tun könntest, kannst du eine Fallstudie erstellen. Also werde ich einen Kurs über die Fallstudie machen und was der Rahmen einer richtigen Fallstudie ist. Sie haben das Wow-Image, das endgültige Design , das Sie gemacht haben. Du kannst ein bisschen über dich selbst tun. Sie können Ihre Ziele, die Produktziele und die Geschäftsziele aufzeigen . Sie können über das Problem sprechen , dem Sie ausgehen und konfrontiert sind. Du kannst deine Personas machen und einen sehr cool aussehenden Weg wie ich hier gemacht habe. Sie können über Ihre Annahmen oder Ihre Lernziele sprechen. Dies sind die Fragen, die Sie für die Personen kennenlernen möchten , die Sie anvisiert haben. Du wirst recherchieren gehen. Du sprichst mit Leuten. Ich möchte, dass du Fotos von Leuten machst, mit denen du sprichst. Sie können Benutzerzitate über das, was Sie gehört haben, machen. Ich bringe dir bei, wie man diese Synthese macht. Als ob du hier Bilder siehst. Sie werden die Erkenntnisse und Erkenntnisse machen , die die Muster sind, die Sie gefunden haben. Du wirst Entscheidungen über diese Muster treffen. Sie werden zurückkommen und neu erstellen, die Problemanweisung neu erstellen. Du wirst skizzieren und Konzepte machen und davon Fotos machen. Du wirst Ideen skizzieren. Sie machen Kundenservice, Customer Journey Maps. Du wirst die Wireframes erstellen, wie ich es dir in der Bobo t Anwendung gezeigt habe . Sie werden ausgehen und Usability-Tests und Benutzertests durchführen, wie wir es hier haben. Zeig Bilder davon. Sie werden Ihre Erkenntnisse beschreiben, die Sie während des Benutzertests gelernt haben. Sie werden die Treue wählen, es hübsch machen, all die schönen Designs und Icons und Illustrationen hineinstecken . Und dann kann ich drauf klicken. Und ich sehe mir das letzte hier an, das du erstellt hast. Ziemlich großartig. Ich bin gespannt. Ich hoffe, du bist es. Schauen Sie sich alle anderen Videos an und wir werden einen tiefen Einblick in jedes Thema machen , das ich mit Ihnen besichtigt habe. Und ich werde hier auf meiner Website enden, Aaron Lawrence, design.com Fall. Du willst mehr von meiner Arbeit sehen. Und ich danke dir, dass du die letzten 20 Minuten mit mir verbracht hast. Und hoffentlich werden Sie den Unterricht genießen. Tschüss. 2. Ziele für deine Goals festlegen: Hallo, Willkommen bei Video 1, wie man eine UX-Design-Fallstudie erstellt, und UX Design 1011 der ersten Dinge, die wir tun, bevor wir alle Prozesse der Erstellung von Designs und Recherchen durchlaufen . Wie wir verstehen, sind unsere Ziele das erste, was wir im UX-Design tun. Und welche Arten von Zielen sollten Sie wissen? Und wer hat diese, diese, diese Informationen? Und wie extrahieren Sie diese Informationen sind Dinge, die ich Ihnen in diesem nächsten Video zeigen werde. Und denken Sie daran, was erfolgreich UX ist. Ux geht es darum, Geschäftsziele mit Kundenmotivationen zu verbinden und Lösungen zu schaffen, die gute Ergebnisse für das Unternehmen erzielen und gleichzeitig die Bedürfnisse des Kunden lösen. Daher ist es wichtig, dass Sie die Kundenbedürfnisse verstehen. Sie arbeiten aber auch an Software für Unternehmen. Sie müssen also wissen, was gute Vorteile und gute Ergebnisse für das Unternehmen sind, wenn es plant, Software auf den Markt zu bauen, zu erstellen und auf den Markt zu bringen. Und was macht einen Markt aus? Ein Markt ist eine Reihe von Leuten, die Sie anstreben, um ihre Probleme zu lösen , und Sie lösen ihn mit Inhalten innerhalb von Software. Warum ist es wichtig, dass Sie Ihre Ziele verstehen? Es ist wichtig, weil es uns hilft, die Gründe und Absichten zu verstehen , warum wir die Arbeit machen, die wir leisten werden. Es hilft uns zu bewerten, was in unseren Designs in unseren Lösungen wertvoll ist. Und wenn Sie sich erinnern, ist R ein Ausdruck, bei dem Design Absichten und Motive dahinter steckt. Daher sollte die gesamte UX-Designentscheidung auf Vernunft und Logik abgebildet werden. Und das Verständnis verschiedener Ziele sind wichtige Aspekte, die sich auf den Grund warum Sie ein bestimmtes Problem lösen und wie diese Lösung und tendenziell dem Geschäft zugute kommt. Und im Laufe der Zeit müssen Produktmanager und UX-Designer diese Lösungen verfolgen und messen und sehen, wie sie dem Unternehmen helfen , diese Ziele zu erreichen, die wir heute in Layout lernen werden. In diesem Video zeige ich Ihnen also, was als Kickoff-Meeting bezeichnet wird. Hier treffen wir die Menschen, die diese Ziele haben, die diese Informationen haben. Und ich zeige Ihnen das Framework, in dem Sie Informationen von diesen Leuten extrahieren. In Ordnung, jetzt, da Sie Zugriff auf alle Videos haben, möchte ich Ihnen zeigen, wo Sie auf all diese Informationen zugreifen können , die ich Ihnen während des gesamten Unterrichts zeigen werde. Es ist eine Website und diese Website heißt UX honey.com. Sie können das Logo direkt in der Mitte sehen. Ich werde auch jedem Video eine Dokumentation beifügen , die Sie für jedes Thema herunterladen und verwenden können. Lassen Sie uns also herausfinden, wo Sie über das Kickoff-Meeting und die Ziele und UX honey.com lernen können . Wenn Sie also hier zu x2 kommen, klicken Sie darauf und scrollen nach unten. Und du siehst, wo das Kick-Off-Meeting steht. Das ist die Nummer eins, die wir zuerst machen, bevor wir in das Beispiel der Fallstudie eingehen. Und lass mich die Fallstudie eröffnen. Lassen Sie mich Ihnen zeigen, wie das Ergebnis des Erlernens dieser Ziele in Ihrer Fallstudie aussehen wird. Sie haben also ein Kickoff-Treffen. So sehen diese Treffen aus. Es sind viele Leute drin. Wir haben eine Agenda. Die Agenda ist, dass es die Ziele erreicht und den Beginn dieser Fallstudie ansieht , in der ich Ziele festgelegt habe. Und das ist kurz bevor ich anfange, über die Benutzer und die Personas zu sprechen. Also lass uns zurückgehen. Ich klicke auf dieses Kickoff-Meeting und rede ein wenig über das Kickoff-Meeting. Stell dir das also vor. Sie wurden von einem Startup oder einem Unternehmen in einem bestimmten Markt kontaktiert und sie haben Sie beauftragt zu recherchieren und eine UX-Designlösung zu entwickeln, die die Bedürfnisse, Ziele des Unternehmens und die Personen, die sie ansprechen, löst . Sie werden dieses Treffen am Montag abhalten. Und Sie müssen abrufen und sie möchten, dass Sie dieses Meeting durchführen und die Informationen erhalten, die Sie benötigen, um loszulegen. Klingt als wüsstest du was zu tun ist. Wenn nicht, ist das okay, weil ich dir zeigen werde, was zu tun ist. Okay, was Sie also tun werden, ist, dass Sie ein Kickoff-Meeting haben werden. Es ist ein ganztägiges Treffen. Normalerweise ist es etwa 10 Uhr bis fünf Uhr. Und du hast eine Agenda, die du durchlaufen musst. Und die Agenda ist, dass Sie über die Geschäftsziele und die Produktziele, die Benutzer und ihre Ziele, die Pfahlinhaber sprechen möchten , dies sind die Kunden und das Risiko und die Minderung, die Sie tun werden. Also sehe ich normalerweise so aus. Es gibt die Bedeutungen. Sie können ein Büro haben, das großartig ist. Sie können es auch über einen Anruf tun, ist in Ordnung. Du schreibst Agenden auf. Ich habe dir das Geschlecht bereits gegeben, aber stelle sicher, dass du Einführungen machst. Du musst dich vorstellen. Irgendwie das Treffen laufen wird. Und einige haben Ihnen Beispiele gegeben, was wir im Laufe der Jahre hier gemacht haben. Und jetzt lass mich ein bisschen darüber reden, was ein Kickoff Meeting ist. Jeder, der an Ihrem Projekt beteiligt ist, sollte sich in einem Meeting treffen, bevor alle mit der Arbeit beginnen. Das Kickoff-Treffen besteht aus Geschäftsleuten, Produktmitarbeitern und allen anderen, die für das Projekt verantwortlich sind. Denken Sie daran, dass wir Software bauen. Und Software ist teuer und die Kosten für Änderungen an Software sind noch teurer. Daher ist es sehr wichtig, als UX-Designer zu wissen, wie Sie Ihre Entscheidungen treffen. Es gibt Probleme und Ihre Lösungen werden validiert. Sie wissen also, dass sie die Ziele erreichen werden, die wir in dieser nächsten Sitzung oder in dieser Sitzung genau hier darlegen werden. Das Treffen hilft uns also, Informationen zu externalisieren. Das ist wichtig für jeden zu wissen und zu verstehen. Sobald jeder in diesem Treffen ein Verständnis hat, können wir diese Zeit nutzen, um eine Linie zu priorisieren und bestimmte Prioritäten zu vereinbaren. Und unser Gedächtnis, Sie werden diese Informationen nehmen, die Ihnen helfen werden, UX-Designentscheidungen zu treffen, während Sie den Prozess durchlaufen. Lassen Sie uns also hier die Agenda durchgehen, nämlich die Geschäftsziele, die Produktziele, die Nutzer und ihre Ziele, die Anteilnehmer, das Risiko und die Minderung. Fangen wir also mit Geschäftszielen an. Ich sprenge das etwas größer in die Luft. Okay? Die Geschäftsziele und das Warum dahinter, möchten Sie also wichtige Leistungsindikatoren kennen. Diese werden als KPIs bezeichnet, die Business Analytics informieren. Hier ist ein Beispiel. Die Leute möchten Software bauen, sagen, dass es sich um ein Solarunternehmen handelt, und sie möchten den Betrag der Support-Telefonanrufe senken , indem sie Informationen darüber geben , was zu tun ist, wenn etwas schief geht. Oder eine Aufforderung darüber, was Sie beim Kauf von Solar erwarten können, das ist eine Zahl, das ist ein Indikator. Und das sind wichtige Leistungsindikatoren, die wir verwenden möchten. Wir möchten diese Zahl senken, indem wir Software erstellen. Man könnte diesen Kunden also jetzt ohne Software auf dem Markt sagen Hier ist eine bestimmte Zahl, sagen 500. Telefonanrufe kommen an einem Tag. Sobald wir Software starten, möchten wir wissen, dass diese Zahl sinkt. Und das ist ein wichtiger Teil eines Geschäftsziels. Sie möchten also das Geschäftsziel verstehen und wie sie Meilensteinen abbilden , die Ihr Design erreichen muss. Dies hilft auch dabei, die Bedürfnisse und Ziele der Benutzer mit dem Unternehmen zu verbinden. Sie möchten wissen, wie gut Ihre Designentscheidungen haben, um die Geschäftsziele in kleinen und großen Phasen zu informieren. Phasen, die dort sehr wichtig sind. Sie entwerfen keine Lösungen mit Software, weil es cool ist und Spaß macht. Sie entwerfen sie, weil sie Geschäftsziele erreichen. Und es ist wirklich wichtig, dass Sie dies wissen und dass Sie verstehen, was die Geschäftsabsichten hinter dem Erstellen von Software sind und welche Ergebnisse sie haben möchten, nachdem wir Software gestartet haben. Sprechen wir also über Geschäftsleute. Wie sind sie, wie sind sie? Normalerweise haben sie Fragen zu dem, was wir tun. In der Forschung. Sie müssen Geschäftsleute darüber informieren, indem Sie Kundeneinfühlungsvermögen entwickeln. Dies ist Einfühlungsvermögen der Benutzer und das Experimentieren mit Lösungen. Wir werden geschäftliche Unbekannte gefährden und dazu beitragen, den Produkterfolg sicherzustellen. Je mehr Sie sich an ihren Zielen orientieren, ihre Initiativen verstehen und in ihrer Sprache sprechen können. Je wertvoller Sie sind auf geschäftlicher Ebene eines Unternehmens. Je länger Sie in einem Unternehmen sind , desto mehr zahlen sie Ihnen auch als Mitarbeiter. Okay? In diesem Meeting können Sie also ein Framework an eine Wand schreiben oder ein Dokument durchgehen und ich werde es Ihnen jetzt geben und wir werden in einer Sekunde auf die Website zurückkehren. Ich habe dieses Dokument, das die Informationen beschreibt, die Sie durchgehen werden. Wir haben also die Geschäftsziele, die Produktziele, die Benutzer und ihre Ziele, die Anteilnehmer und das Risiko. Und ich habe es tatsächlich durchgemacht und für dich ausgefüllt. Sie können also einige Beispiele sehen. Sie können dieses Dokument also im Video herunterladen. Und Sie können dies verwenden, wenn Sie in ein UX-, UX-Projekt gehen oder Ihr Projekt starten. Also lasst uns wieder hierher gehen und darüber reden. Nehmen wir an, Sie hatten die Geschäftsziele auf einem Whiteboard oder Sie haben zu Beginn Ihres Meetings einen Anruf mit Geschäftsleuten. Hier sind ein paar Fragen, die Sie ihnen stellen können, um sie in Schwung zu bringen. Sie können sie also fragen, was wollen Sie durch den Aufbau von Software erreichen? Wie wird das Unternehmen von dieser Softwareerfahrung profitieren? Sobald sie anfangen zu reden, um diese Informationen aufzuschreiben, sind das ihre Ziele. Sie können sie auch einfach explizit fragen, was die Geschäftsziele sind. Man kann auch sagen, das Projekt ist vorbei und die Anwendung ist aus, und es ist äußerst erfolgreich. Wie sieht Erfolg für das Softwaregeschäft aus? Sie geben dir den Erfolg. Du kennst das als Ziel. Das ist eine Sache, mit der du reden kannst. Das sind also zwei Fragen, die Sie verwenden können, wenn Sie Geschäftsziele durchlaufen. Und wenn Sie diese beiden Fragen hier stellen, waren die Geschäftsleute wirklich wie Sie, vertrau mir. Okay, reden wir hier über die Produktziele und die Gründe dafür. Daher ist es wichtig zu verstehen, was das Unternehmen von seinen möglichen Produktzielen hält. Dies sind keine feinen Details, aber insgesamt, was wir brauchen, um Geschäftsziele zu erreichen. Wenn Ihr Ziel also darin besteht, Geld zu verdienen, benötigen Sie wahrscheinlich eine Möglichkeit in der Software, Personen mit ihren Kreditkarten zu belasten , damit das Unternehmen Geld verdienen kann. Das ist eine einfache Verbindung dort. Und stell dir das vor. Sie können keine Fotoaufnahme-App haben, wenn Sie keine Kamera haben. Bei diesem Produktziel müssen wir die Kamera Ihres Telefons verwenden, damit wir Fotos damit aufnehmen können. Diese Ziele können also abhängig von den Ergebnissen des Forschungs- und Lösungstests geändert werden. Erinnerst du dich daran? Reden wir über Produktmenschen. Wie haben sie ausgesehen? Diese Leute sind also normalerweise Fachexperten. Das bedeutet, dass sie in einem bestimmten Bereich auf dem Markt viel wissen. Sagen Sie, es ist Bogen, aber dann würden diese Leute viel über Baba T. Es gibt auch Produktmanager. Produktmanager sind Spezialisten und Strategie. Und sie könnten auch Ingenieure sein. Und diese Leute werden Design viel mehr verstehen als die Geschäftsleute. Und sie werden Fragen zu bestimmten Benutzeroberflächenkomponenten und Details des Interaktionsdesign-Teams haben. Pms sind hier, um dir zu helfen, dich daran zu erinnern. Sie sind nicht hier, um dein Design zu zerquetschen. Sie sind hier, um sich mit Ihrem Design, den Geschäftszielen und den Produktzielen zu verbinden , die wir erreichen möchten. Denken Sie also daran, dass Ihr Design als Kommunikationsinstrument dient. Das war's, oder? Es ist das, was die Ingenieure bauen, ist das Letzte, was Benutzer sehen. Ihre Entwürfe helfen also jedem zu verstehen, was wir bauen, warum wir aufbauen und welchen Wert wir erlernen wollen. Endbenutzer sehen also die endgültigen Entwürfe nicht. Sie sehen, was der Ingenieur gebaut hat. Lassen Sie uns also auf Fragen eingehen, die Sie haben können. Sie können also sagen, was muss Ihr Produkt tun, um Geschäftsziele zu erreichen? Frage. Kann auch sagen, wenn Ihr Produkt ein Mensch wäre, was würde es die meiste Zeit damit verbringen? Und Sie möchten diese Informationen aufschreiben und erfassen. Und wieder zeige ich Ihnen Beispiele dafür, wie das nach einem Meeting aussieht. Dies ist also Ihre Domain, weil Sie normalerweise der benutzerzentrierte Designexperte sind , der UCSD genannt wird, zu einem großen Teil der Philosophie, benutzerzentrierte oder UX-Recherche und UX-Designarbeit durchzuführen , versuchen wir zu verstehen Die Benutzer, die sich auf die zu entwerfen Benutzer konzentrieren, ist für Benutzer gedacht. Denken Sie also an diesen Begriff, Sie sehen D, benutzerzentriertes Design. Warum ist es wichtig, die Benutzer alle Aspekte zu verstehen, die ich gerade dargelegt habe. Sie können diese Zeit auch in diesem Meeting nutzen, um Benutzer zu priorisieren. Wenn die Anwendung viele, viele Benutzer enthält , gibt Ihnen dies den Fokus und den Ausgangspunkt, mit wem Sie zuerst in der Recherche sprechen sollten. Denken Sie also daran, dass dies Ihre Gegend ist. Normalerweise können Sie aufgefordert werden, diesen Teil des Meetings zu bearbeiten. Wenn Sie mit einem Team zusammen sind, müssen Sie nur Informationen über die Benutzer auf hohem Niveau erfassen. Habe es nicht als Benutzerprofil bezeichnet. Wir wollen den Zielmarkt kennen, sagen Leute, die Boccia lieben. Wir möchten über den Zielbenutzer sprechen. Wir können sie als mobile Liebhaber bezeichnen. Und wir möchten die Ziele und Probleme innerhalb dieser Bevölkerungsgruppe oder Persona wissen . Sie möchten Fragen stellen, um zu den grundlegenden Informationen auf Benutzerprofilebene zu gelangen. Sie können also unten sehen und nach einem Benutzernamen fragen. Sie möchten ein wenig über ihre Ziele, einige ihrer Schmerzen und Probleme wissen und dann wissen, wie haben Sie diese Leute für Forschung und Tests in die Hand genommen? Normalerweise hat das Unternehmen eine gute Idee und kann Sie mit einigen Verbindungen darüber beginnen , wer sind diese Personen, auf die Sie abzielen und wie Sie sie finden. Und dann musst du sie in freier Wildbahn finden. Man muss Leute rekrutieren, um nach ihnen zu suchen. Fragen, um die Säfte zum Fließen zu bringen und Menschen dazu zu bringen, sich über Benutzer zu unterhalten, sind also die Menschen, die wir anstreben, um die Produktziele zu erreichen? Was weißt du über diese Leute? Welche Probleme müssen Sie am wichtigsten für sie lösen? Was sind die wichtigsten Ziele dieser Leute und was motiviert sie? Sind sie in der Nähe? Wo finde ich sie? Kann mich jemand mit ihnen verbinden? Alle Fragen, die ich in der Vergangenheit mit Kunden gestellt habe. Das ist bewährt und getestet und du solltest wirklich guten Erfolg haben. Aber nur diese vier Fragen hier. Okay? Dies sind also Beteiligungsinhaber, sind Ihre Kunden, sind Personen, die verantwortlich sind, wenn die von Ihnen entworfene Lösung und die Ingenieure sind. Diese Lösung und es geht schief. Normalerweise sind sie diejenigen, die dafür verantwortlich sind. Denken Sie also daran, dass diese Leute ihren Arbeitsplatz verlieren können, wenn die Dinge nicht richtig laufen. Geschäftsleute müssen Entscheidungen über Budget - und Geschäftsergebnisse treffen, die den Strategien und Initiativen des Unternehmens entsprechen. Sie haben daran beteiligt, können aber nicht die ganze Zeit bei dir sein. Deshalb nennen wir sie Stakeholder, weil sie einen großen Anteil an diesem Prozess haben. Warum ist es wichtig, dass Sie sie identifizieren? Sie müssen Designbewertungen durchführen, um Ergebnisse aus Forschung und Lösung anzuzeigen. Etwa alle zwei Wochen ist am besten. Und das sind die Menschen, die in Ihr Projekt einsteigen und Ihre benutzerzentrierte Designlogik mit ihren Meinungen stören können. Da sie möglicherweise nicht vertrauen, was im Projekt aufgrund mangelnder Beteiligung früh passiert , nennen wir das Beteiligten Angst. also diese Leute in den Prozess einbeziehen, Wenn Sie also diese Leute in den Prozess einbeziehen, wie Design-Sprints, auf denen ich ein anderes Video machen werde, das Sie sehen, wird jedem helfen, eine Linie und den Besitz über Informationen, Entscheidungen und Ideen auszutauschen. Je mehr Sie diese Personen früh in die Benutzerlogik einbeziehen können. Und wirf sie nicht einfach in die Entwürfe. Je weniger sie dir sagen, wie du entwirfst. Und sie werden Vertrauen mit dir aufbauen. Je mehr sie dir vertrauen, vertrau mir, desto glücklicher wirst du sein. Es würde also nicht an einem Team arbeiten. Normalerweise kann ein PM diesen Bereich Produktmanager für Sie übernehmen. Wenn nicht, musst du das nehmen. Normalerweise können Sie aufgefordert werden, damit umzugehen. Wenn nicht, verlassen Sie sich auf einen Produktmanager. Aber du wirst folgendes wissen wollen. Wer trifft Entscheidungen über Produkt und Design? Finde diese Leute heraus. Das sind die Leute, mit denen Sie Designbewertungen machen möchten. Sie können fragen, wer über technisches Wissen verfügt, und wir können sie als Fachexperten verwenden, die viel über die Menschen wissen, die ich anvisiere. Sie möchten diejenigen Leute einbeziehen, die uns helfen können, Benutzer zu finden und diese Leute zu identifizieren. Denken Sie daran, zu erfahren, was ihre Zeitpläne sind und wie viel Uhr es ist, Designbewertungen mit diesen Leuten zu haben. Und vielleicht möchten Sie sie zu Unternehmenszielen und zum Erfolg Ihres Projekts interviewen. Dies wird als Stakeholder-Interview bezeichnet, und das tun Sie früh im Projekt. Dies ist ein Tool, das genau wie Recherche ist, genau wie bei einem Benutzerinterview, aber Sie tun es mit den Pfahlinhabern. Und du hast Fragen darüber, was dich nachts wach hält? Was sind Ihre Ziele und Initiativen? Wie sieht der Erfolg in diesem Projekt für Sie aus? Und wenn Sie das tun, ist das bereits ein Tool, mit dem Sie Vertrauen aufbauen können. Okay, sprechen wir über Risiken und wie wir Risiken mindern. Risiko ist also alles, was ein Projekt oder eine Software, die wir erstellen, blockieren, stören oder fallen kann . Ein Risiko kann in eine Frage umgewandelt werden. Und das kann dir Arbeit geben. diese Frage beantworten, möchten Sie wissen, was ein Projekt erfolgreich macht. Aber genauso wichtig, Sie möchten wissen, was ein Projekt erfolglos macht. Nachdem Sie etwas über die Projektkontexte erfahren haben, sollte jeder Zeit haben, Risiken aufzurufen und zu priorisieren. So kann sich ein Team auf Aktivitäten konzentrieren, die beabsichtigen, die riskantesten Annahmen zu mildern oder zu lösen. Normalerweise haben die Geschäftsleute das und sie reden gerne darüber. Vertrau mir. Sie verstehen die Probleme immer mehr als Sie und Sie sind viel wertvoller, wenn Sie ihnen helfen können. Holen Sie sich also die Antworten auf die Fragen, indem Sie mit ihren Kunden sprechen. Oft haben sie Fragen darüber, wie Menschen über ihr Geschäft denken und wie sie ihr Produkt verwenden werden. Und Sie können mit ihnen arbeiten, indem Sie den benutzerzentrierten Designprozess einbeziehen und mit ihren Kunden sprechen und Antworten auf die Fragen erhalten, die sie haben. Wenn es sich bei dem Geschäft um Software handelt, denken Sie daran, dass dies UX ist und hier sind Sie eine der wertvollsten Waffen, die das Unternehmen haben kann. Denken Sie daran und stellen Sie sicher, dass Sie hier sehr gut bezahlt werden, da dies keine billige Arbeit ist. Sie lösen Geschäftsprobleme für Unternehmen, die Software bauen. Fragen, über die Sie sprechen und Geschäftsleute um Risiken stellen können, sind also, welche Dinge passieren können, die dies erfolglos machen und unsere Ziele nicht erreichen. Sagen wir, wir haben versagt. Was sind die Dinge, von denen du denkst, dass wir scheitern ließen? So können wir das verstehen, bevor wir irgendeine Arbeit machen, und wir können Scheitern vermeiden. Was ist das erste, was wir tun können, um diese erfolglosen Ereignisse zu mildern. Abschwächung, was bedeutet, wie können wir diese Ereignisse vermeiden? Was müssen wir tun, um sicherzustellen, dass sie nicht passieren? Okay? Und das schließt die meisten Geschäftsziele, die Risiken der Benutzer, alle Ziele ab. Wenn Sie also all diese Informationen haben und wo Sie irgendwann in Ihrer Fallstudie durchgehen können. Und Sie können dies zu Beginn Ihrer Fallstudie einbeziehen. In diesen Videos zeige ich Ihnen die Informationen und die Tools und Techniken, die ich Ihnen beibringe , und wie Sie diese Informationen in Ihre Fallstudie einfügen können, damit Sie sehen können, dass ich sie hier habe. Okay. Das Letzte, was ich Ihnen zeigen werde, ist die Anwendung, an der ich arbeite , nämlich eine Bobo-T-Anwendung. Also werde ich dich durch diesen Bot führen was T Erfahrung. Und dann gehe ich zurück und zeige dir die Ziele. Und die Produktziele, Geschäftsziele, die Benutzer und all diese Informationen, die uns dabei helfen, diese Anwendung genau hier zu erstellen. Was hier passiert ist, dass du Bokeh hast, wir gehen und wir melden uns an. Normaler Anmeldeprozess unterdrückt Anmeldung, wir sehen eine Liste von Biloba-Getränken und Anwendungen. Und ich kann dir diese Seite hier zeigen. Ziemlich klein, aber sehe ich scrolle nach unten, ich kann den ganzen Bogen sehen, aber T's. Sobald ich mit T wählbar bin, kann ich die normale Süße oder Halbsüße auswählen. Ich kann es auch sagen, dass es hier große Tapioka hat. Ich kann es in den Warenkorb legen. Siehe hier, der Einkaufswagen hat jetzt ein Icon drauf. Jetzt kann ich anfangen auszuchecken. Ich kann eine Menge Bot bestellen, aber ich kann zu dieser Adresse kommen. Und du bist meine Adresse, meine Telefonnummer. Ich kann meine Kreditkartendaten eintragen. Ich kann bezahlen. Und dann sehe ich doch die Karte von San Francisco. Und ich sehe, wie Bowtie bei Lieferung zu mir kommt. Und dann boom, mein Bobo wird ankommen. Sagen wir also, das war ein Geschäft. Und genau wie das Dokument im Video, das Sie herunterladen können, können Sie es hier verwenden. Ich habe auch Beispiele basierend auf dem Boot, dem Teamgeschäft. Und lasst uns ein bisschen über dieses Geschäft sprechen und welche Ziele es gibt. Das erste ist also der Geschäftsinhaber und ich möchte mehr als 100 Bogen verkaufen, aber es ist ein Tag mit unserer neuen On-Demand-Software. Das ist das Ziel dieser Software. Wir möchten mit einem bestehenden Lieferservice zusammenarbeiten und ihn verwenden, um BO zu liefern. Aber t, Wir wollen zusätzliche Einnahmen erzielen indem wir Gebühren und Liefergebühren für jedes Baba t, das erledigt wird, das geliefert wird. Okay, nun, wie sollen unsere Produktziele uns helfen, die Geschäftsziele zu erreichen? Während wir Benutzer brauchen, um sich anzumelden. Wir werden verschiedene Geschmacksrichtungen von Bogen zulassen, aber nicht ausgewählt werden. Wir werden Benutzern erlauben, Milch-, Süße- und Eispräferenzen und Präferenzen zu wählen . Wir erlauben Benutzern, Telefonnummern und Zahlungsdetails zu adressieren. Und wir werden ein Echtzeit-Update des Baba T zeigen, das von Bobo Erstellungsstationen an Benutzerstandorte geliefert wird . Sprechen wir ein wenig über Benutzer und ihre Ziele waren es, über Bot zu sprechen, aber zwei Liebende in San Francisco. Und das sind Leute, die Baba nicht nach Hause oder ins Büro liefern lassen wollen. Die Stakeholder hier wie ich selbst. Ich stehe also zehn Uhr bis fünf Uhr zur Verfügung. Wenn Sie also Designbewertungen bei mir haben möchten, stellen Sie sicher, dass Sie dies innerhalb von Montag bis Freitag in dieser Zeitzone tun. Und einige der Risiken, denen wir beim Erstellen dieser Anwendung ausgesetzt sind, besteht darin, dass das Bobo-Team schmilzt und bei der Lieferung nicht frisch bleibt, da es nicht schnell genug geliefert wird. Dies verursacht ein paar Dinge. Dieser Bobo kann jemanden krank machen. Und jetzt haben wir jemanden krank. Wie riskieren wir das Risiko, dass wir deswegen auch zu viele Rückerstattungen haben und aufgrund der Lieferkosten Geld verlieren. Okay? So können Sie sehen, haben Sie Beispiele für all diese Informationen zu Zielen. In Ordnung, so geht es darum, wie Sie Ziele für unser erstes Video im ersten Schritt des Prozesses und des UX-Designs setzen können. Begleite uns im nächsten Video, während wir lernen, wie man eine Persona erstellt. Wir sehen uns. 3. UX-Design Persona erstellen: In Ordnung, Willkommen beim nächsten Video zur Erstellung einer UX-Fallstudie und das User Experience Design 101. Und das letzte Video habe ich dir gezeigt, wie man Ziele setzt. Das nächste, was wir dabei tun werden, ist, dass wir lernen werden , wie man eine Person kreiert und was eine Persona ist. also ohne weiteres Lasst uns also ohne weiteres schauen und in eine Person eintauchen. Also komme ich hier rüber zur UX honey.com Website. Ich klicke auf UX to Goodness ist die Website, die ich mit allem Material verwende, um die Studenten der Akademie der Kunstuniversität zu unterrichten. Und hier sehe ich, dass ich die ungültigen Persona-User-Interview-Skripte habe. Ich klicke auf diesen Button. Und ich habe diesen Abschnitt der Website, der die Persona beschreibt. Das erste, was ich tun werde, ist ein bisschen über eine Person zu sprechen. Dann zeige ich dir den Rahmen einer Person. Und ich habe auch eine Dokumentation an das Video angehängt, die Sie herunterladen können, aber Sie können zum Erstellen Ihrer Personas verwenden. Sprechen wir also ein bisschen darüber, was eine Person ist. Eine Persona ist ein Design-Artefakt, das unabhängig von Alter und Geschlecht einen großen Markt von Menschen darstellt . Geschlecht. In den meisten Fällen haben diese Menschen die gleichen Probleme, Ziele, Motivationen und Verhaltensweisen. Und seine erste konstruierte aus unseren ungültigen Annahmen. Bevor wir recherchieren. Wenn wir recherchieren, sprechen wir mit diesen Leuten, wir lernen eine ganze Reihe von Runden. Und dann kommen wir nach der Recherche zurück und besuchen das Persona-Artefakt erneut und aktualisieren es mit ihren validierten Erkenntnissen. Das Ziel dieser Person ist es also, den validierten realen Kontext, Probleme, Verhaltensweisen und Aktivitäten, Bedürfnisse und Ziele und Motivationen zu erfassen Verhaltensweisen und Aktivitäten, Bedürfnisse und Ziele und Motivationen die die Person widerspiegeln, auf die wir abzielen, und alles in ein Design-Artefakt namens persona. Also hier drüben kannst du sehen, dass ich ein paar Beispiele habe, eine Person. Und einige dieser Beispiele sind Skizzen, die wir verwenden. Ich habe das Beispiel des Frameworks, auf das ich etwas später eingehen werde. Und ich habe einen hier ausgefüllt, und ich habe noch einen, der skizziert ist. Sie können also sehen, dass Sie diese Personas mithilfe des Frameworks skizzieren können. Wenn Sie sich über die Menschen, die Sie gelernt haben, sicherer fühlen, können Sie sie hier erstellen. Und lass mich ein bisschen mehr darauf eintauchen, warum sie wichtig sind. Eine Person ist also wichtig, weil sie ihr benutzerzentriertes Design automatisch in unseren Prozess einführt. Und wieder handelt es sich bei der UX-Studie um User Experience Design, in dem wir Dinge bauen und Dinge entwerfen werden, die Menschen verwenden können. Es ist also wirklich wichtig, dass wir verstehen, wer diese Leute sind. Und bevor wir etwas für sie entwerfen, möchten wir diese Person verwenden, um Gespräche zu führen und Gespräche zu führen die benutzerorientiert sind und nicht lösungs- und meinungsorientiert sind. Die Persona erinnert uns auch täglich daran, dass wir nicht die Nutzer unserer Produkte sind. So können wir zuerst Annahmen über Benutzer treffen. Wenn ich also etwas für, sagen wir mal, koreanische Popmusik entwerfe . Und ich bin kein 16-jähriger koreanischer Popstar oder Pop-Frontpfanne, dann ist es wichtig für mich zu wissen, dass ich nicht der Benutzer meines Produkts bin. Also verwende ich die Persona, um diese Benutzer zu repräsentieren. Es hilft mir auch, sie zu identifizieren, wenn ich in freier Wildbahn bin, wenn ich in meinen täglichen Routinen unterwegs bin, wo ich wohne. Ich treffe mich vielleicht mit jemandem. Und wenn ich mit ihnen spreche, merke ich vielleicht, dass es tatsächlich den Spender gibt, den ich für mein Produkt anvisiere. Und ich möchte sie vielleicht zur Recherche oder zum Testen meines Produkts verwenden. Es macht es einfach, den Benutzer während Meetings, Demos und bei Stakeholdern, Stakeholdern, über die ich im letzten Video gesprochen habe, zu verstehen Demos und bei Stakeholdern, Stakeholdern, . Dies sind die Geschäftsleute oder Kunden, die in meine Meetings einsteigen. So kann ich dieses Design-Artefakt leicht ziehen und an eine Wand stellen. Und wir können darauf zeigen und es als Referenz verwenden. Denken Sie daran, dass wir nicht die Nutzer unserer Produkte sind. Es dient auch als Medium, um Fragen und Meinungen zu lösen , die in Konflikt stehen, und hält uns nutzerorientiert. So oft, wenn wir gemeinsam Meinungen als Team haben und diese Meinungen in Konflikt geraten. Wir können immer fragen, warum sprechen wir nicht mit den Nutzern über diese Meinungen? Und lasst uns sehen, was ihre Meinung ist. Weil die Benutzer immer die Meinung haben, die wir während des Prozesses verwenden werden, und es hilft uns, Fragen zu lösen und zu lösen, die wir haben. Lassen Sie uns also ein wenig über den Prozess sprechen, von einer ungültigen Person zu wechseln und sie zu einer validierten Person zu verschieben. Also das erste, was wir tun, was Sie im nächsten Schritt lernen werden, nachdem ich darüber gesprochen habe. Wie erstellt man eine ungültige Person. Also treffen wir Annahmen über die Menschen, die wir anvisieren. Und im nächsten Video werde ich über Lernziele und Fragen sprechen. Aber das, was Sie als Nächstes tun möchten, ist Lernziele zu erstellen. Schaffen Sie Fragen, um Lernziele zu erreichen. Und du recherchierst, du gehst raus und redest mit Leuten. Dann synthetisieren Sie diese Themen und gruppieren diese Themen in Mustern. Danach werden Sie gehen und validieren oder ungültig machen, dass die Probleme Annahmen sind, die Sie hatten. Sie werden die Ziele, Bedürfnisse und Verhaltensweisen dieser Personen, mit denen wir gesprochen haben, validieren oder ungültig machen. Und dann besuchen und aktualisieren Sie die Persona mit den Validierungen. Das ist so ziemlich der Prozess hier. Lasst uns also lernen, wie man eine Persona erstellt, und ich werde ein wenig über das Framework sprechen, das wir für Personas verwenden. Hier ist also das Dokument, das an das Video angehängt ist , das Sie herunterladen und verwenden können. Und das Persona-Framework ist in vier Quadranten unterteilt. Hier sehen wir den ersten, den zweiten, den dritten, 1, vierten 1. Also der erste, über den ich hier sprechen werde, ist der obere linke Quadrant, ist die Person in den realen Kontexten. Dies ist ein Foto von ihnen und Sie können sehen, ich zeige es Ihnen, ich habe hier auch ein Beispiel für die Person geöffnet. Es ist ausgefüllt. Aber bevor ich das überprüfe, reden wir einfach über die Quadranten und den Rahmen einer Person. Sie können dies also auch zum Skizzieren verwenden. Sie können ein Blatt Papier in vier Quadrate zeichnen. Zeichnen Sie die Person in die realen Kontexte und schreiben Sie die Verhaltensweisen über sie sowie Bedürfnisse und Ziele auf. Aber bevor ich dir etwas zeige, bevor du das tust, ist es am besten, zuerst herauszufinden, wofür all diese Quadranten da sind. Die oben links ist also eine Person in den realen Kontexten. Und es ist immer gut, ein Zitat um sie zu zeichnen. Und du kannst hier ein kleines Zitat Talk Bubble zeichnen. Und Sie möchten das Problem, das Sie lösen möchten, und das Ziel aus der Perspektive und dem Kontext des Benutzers geschrieben haben . Okay, nachdem Sie die Person im realen Kontext haben, haben Sie hier die Gesprächsblase mit dem Problem, das Sie lösen möchten, und dem Ziel, das aus der Perspektive des Benutzers geschrieben wurde. Sie alle, Sie können den kleinen Kreisbereich hier haben, der Bereich sein, in dem Sie ihren Namen angeben. Dies kann ihr Vorname sein, der jeder Name sein kann, den Sie möchten. Aber die Naht LastName muss diesen Benutzer repräsentieren. Lassen Sie mich Ihnen also das Beispiel zeigen, das ich hier habe. Das ist also unser Bot aber T Persona. Und wir haben Franny und Franny identifiziert sich als Feinschmecker. Der Vor- und Nachname dieser Person ist Frannie Foodie. Was ich gerne machen möchte, ist, dass ich gerne den Vornamen haben und der Nachname denselben Buchstaben hat. In diesem Beispiel haben wir also f. Und warum das wichtig ist, ist es mir hilft, über die Person zu sprechen, wenn ich Gespräche über Design führe. In diesem Fall kann ich also mit Franny Foodie reden. Und es ist auch hilfreich, wenn ich mehrere Personas habe. Mal sehen, ich habe eine andere Person von einer Person, die Fahrräder wirklich mag. Ich kann diese Persona Billy Bikes nennen. Wenn ich jetzt beide Personas in einem Gespräch verwende, kann ich Franny Foodie sagen, und ich kann Billy Bike sagen. Und es macht es wirklich einfach, benutzerzentrierte Design-Philosophien in meiner Konversation zu erstellen . Okay, der nächste Quadrant, über den ich sprechen werde, ist von ihnen. Sie können sich also fragen, welche Informationen Ihrer Meinung nach wichtig sind, um sie zu erfassen? Und ich habe hier keine Demografie, weil es egal ob Alter oder Geschlecht ist. In 90% der Fälle von Persona-Arbeit, die wir leisten. Solange die Person das gleiche Problem und die gleichen Ziele hat. Ich könnte ein 21-Jähriger sein, ich könnte ein 31-Jähriger sein, ich könnte eine Melone oder eine Frau sein. Und wenn ich die gleichen Probleme und Ziele habe, spielt das keine Rolle. Ich löse Probleme und Ziele für Menschen. In meiner Situation möchte ich also eine Anwendung erstellen, die Bobo On-Demand an Menschen liefert. Denken Sie also, dass es für mich wichtig ist zu wissen, ob eine Person in diesem Fall männlich oder weiblich ist, wenn ich Bogen aber T für sie bringe, ist es meine Meinung wahrscheinlich nicht. Einige der Dinge, die Sie sich fragen können, wenn Sie im Persona-Quadranten darüber ausfüllen , sind die Beispiele, die ich hier habe. Welches Bildungsniveau haben sie also? Wo denkst du? Wo leben die? Arbeiten sie Vollzeit? Haben sie eine Familie? Wie hoch ist ihre Altersspanne? Und es spielt keine Rolle, ob sie männlich oder weiblich sind. In einigen Fällen kann es wichtig sein. Sagen wir, ich baue ein Make-up auf. Anwendung, mit der Sie Make-up auf Anfrage liefern lassen können, dann kann es wichtig sein, darauf hinzuweisen, dass hauptsächlich Frauen unsere Anwendung verwenden werden. Im oberen rechten Quadranten habe ich Verhaltensweisen und Aktivitäten. Dies sind also Fragen, die Sie sich stellen können, wenn Sie dies ausfüllen Was sind die täglichen Aktivitäten dieser Leute? Welche Verhaltensweisen haben sie, die sich auf den Raum beziehen, in dem Sie arbeiten? In diesem Fall können Sie also Essen, Getränke oder Bhabha sagen. Mit wem teilen sie diese Aktivitäten? Und wo sind sie bei diesen Aktivitäten? Der unten rechts hier, das sind Bedürfnisse und Ziele. Welche Probleme haben sie und warum hatten sie diese Probleme? Arbeiten sie um ihre Probleme? Lösen sie derzeit ihre Probleme? Was sind ihre Ziele? Was brauchen sie, um ihre Ziele zu erreichen? Was sind ihre Motivationen und was veranlasst sie, diese Bedürfnisse zu haben? Also schauen wir uns die ausgefüllte Person an. Sie können also das Framework verwenden, das ich Ihnen früher gegeben habe, und Sie können es ausfüllen. Also hier haben wir Frannie Foodie. Frannie ist gerade bei der Arbeit. Sie arbeitet an etwas in ihrem Laptop. Sie ist sehr beschäftigt. Und Sie können das Problem hier und das Ziel sehen, das in ihrer Welt gerahmt ist. Wir haben keine Kontexte und Benutzerperspektive. Im Moment sagt sie, dass ich so beschäftigt bin und ich möchte gehen und ein Bokeh bekommen Wenn ich hier bleiben und meine Arbeit erledigen soll. Ihr Ziel, da sie ihre Arbeit erledigen will, möchte sie auch eine Glühbirne haben, eine T. Aber unser Problem ist und sie kann es nicht, weil sie darum gebeten hat, unsere Arbeit zu erledigen. Lasst uns ein bisschen über Franny Foodie lernen. Sie identifiziert sich als Feinschmecker. Ihr Alter liegt zwischen 21 und 35 Jahren. Sie ist College-Ausbildung. Sie lebt in San Francisco. Sie arbeitet bei einem Technologieunternehmen in San Francisco. Sie hat vielleicht eine Familie, die keine Rolle spielt. In diesem Fall. Ich habe Franny als Frau vertreten, aber in unserem Fall spielt es keine Rolle. Ich rufe nirgends an, dass es weiblich oder männlich gibt. Der Grund dafür ist, dass es bei diesen Bedürfnissen und Zielen und Verhaltensweisen und Aktivitäten keine Rolle spielt . Sie stellen nicht wirklich ein bestimmtes Geschlecht dar. Lassen Sie mich also das Verhalten und die Aktivitäten von Frannie vorlesen. Sie ist also oft am Telefon. Sie hat einen vollen Terminkalender, geht am Wochenende gerne mit Freunden essen. Er ist immer auf der Suche nach neuen Restaurants, in denen er essen gehen kann. Sie folgt Feinschmeckern und Food-Blogs auf Instagram. Sie macht Fotos von Essen und teilt sie mit Freunden und sozialen Medien. Sie geht in Kaffee- und Getränkeschäfte und nutzt einmal pro Woche On-Demand-Services. Rechts unten sind Bedürfnisse und Ziele. Sie möchte also mehr Zeit an ihrem Tag oder ihrem Tag. Mehr Möglichkeiten, bessere Lebensmittelgetränke zu Hause oder am Arbeitsplatz zu liefern. Ich will nicht zu lange auf Dinge warten, die sie im Moment brauchen. Möchte Freunden gute Essensgetränke zeigen. Ich mag es, mit neuen Essensmöglichkeiten auf dem Laufenden zu sein, damit sie diese Erfahrungen mit Freunden teilen können. Okay, und da hast du es. Wir haben gerade ein bisschen gelernt, was eine Person ist, warum sie wichtig sind. Wann man sie baut, wann man sie benutzt. Sie haben etwas über das Framework erfahren und ich habe Ihnen ein Beispiel gegeben. Sie können auch diese Datei herunterladen, die ich Ihnen hier gezeigt habe, zusammen mit diesem Video. Und das kannst du für dein Projekt verwenden. Okay, damit geht es um, wie man eine Persona erstellt. Lass uns weitermachen und weitermachen. Sie können das nächste Video zum Erstellen eines Benutzerinterview-Skripts öffnen. Und das wird Sie dazu bringen, zu recherchieren. Okay, hoffentlich sehe ich dich im nächsten Video. Danke nochmal. Tschüss. 4. Erstelle ein User in der Best Practices für die Erstellung.: In Ordnung, Willkommen bei der nächsten Reihe von Videos zur Erstellung einer Fallstudie zu UX Design und zum Benutzererlebnisdesign 101. In den letzten beiden Videos haben wir beschrieben, wie man Ziele setzt und wie man eine Persona erstellt. In diesem Video erfahren Sie, wie Sie ein Benutzerinterview-Skript und die Best Practices bei der Durchführung von Recherchen erstellen . Beginnen wir also damit, ein Benutzerinterview-Skript zu erstellen. Was ist ein Benutzerinterview-Skript? Es ist eine Richtlinie für Fragen, die Sie mitnehmen werden, wenn Sie recherchieren und Menschen interviewen. Dies sind normalerweise etwa drei bis vier Blatt Papier. Sie drucken es aus und verlassen Ihr Büro oder Ihr Zuhause und sprechen mit Leuten. Er bringt vielleicht sogar Leute in Ihr Büro und zu Hause, aber Sie verwenden jedes Mal dasselbe Skript, wenn Sie ausgehen und mit jemandem sprechen. Was ist also das Ziel der Forschung? Und bei den meisten Recherchen gehen wir aus und lernen um die Menschen, die wir anvisiert haben. Die Ziele sind also, dass wir wollen, du bist ein Entdecker, die Reaktionen anderer Leute. Wir möchten ihr Verhalten identifizieren und untersuchen. Wir wollen das Unbekannte beleuchten. heißt also, wir werden Antworten auf viele Fragen haben , über die wir uns am Anfang nicht sicher waren, als wir die Forschung beenden. Was machst du also? Man geht raus, sammelt Erkenntnisse und lernt etwas über die Menschen, die wir auf Target eingestellt haben. Und während wir das tun, suchen wir nach Informationsmustern, die uns helfen, unsere Probleme und Lösungsannahmen zu validieren oder ungültig zu machen. Wenn Sie also das Skript entwickeln, ist es eine gute Idee. Persona neben dir. Dies ist diejenige, die wir im letzten Video behandelt haben. Weil dies viele der Informationen enthält, die Sie sehen möchten, sind tatsächlich wahr oder nicht wahr. Oder eine andere Möglichkeit, dies zu sagen, ist, dass Sie entweder die Informationen, die wir über diese Person haben, validieren oder diese Informationen ungültig machen möchten. Sie können dies also ausdrucken, wenn Sie Fragen zu Ihrem Benutzerinterview-Skript entwickeln . Also hier habe ich eine Datei und diese Datei kannst du zusammen mit dem Video herunterladen. Und es muss Richtlinien für ein richtiges Benutzerinterview-Skript sein. Okay, das erste, was Sie tun möchten, ist, dass Sie Ihren Namen und das Datum angeben möchten und dann Ihre Rekrutierungsfragen definieren möchten. Diese Fragen, werden Sie feststellen, dass jemand Ihre Person ist? Sie helfen Ihnen anzugeben, ob Sie jemanden interviewen sollten oder nicht. Es hängt also alles davon ab, wie diese Personen auf diese Fragen antworten, die Ihnen helfen festzustellen, ob die Person, auf die Sie abzielen, tatsächlich diese Person hier ist, über die wir gesprochen haben, wir ins Visier genommen haben. Im Bokeh-T-Beispiel habe ich hier eine Reihe von Fragen, die mir helfen würden, festzustellen, ob diese Person meine Person ist oder nicht. Also drei Fragen hier. erste Frage ist, bekommen Sie oft Lebensmittel an Sie liefern? Trinkst du 0 aber nicht häufig? Und betrachtest du dich selbst als Feinschmecker oder liebst gutes Essen und Getränke? Wenn sie auf alle drei Fragen mit Ja antworten , möchte ich sie vielleicht einziehen und sie tatsächlich interviewen. Okay, das nächste, was wir haben, ist, dass wir unsere Lernziele identifizieren wollen, was unsere Lernziele Lernziele hochrangige Bereiche sind, über die wir mehr erfahren möchten. Und dieser ganze Abschnitt hier dient nur zu Ihrer Referenz. Es ist also gut, dies in Ihrem Skript zu haben, aber Sie teilen den Abschnitt zum Lernziel nicht mit Ihren Mitarbeitern, die Sie interviewen möchten. Das ist die nächste Reihe von Seiten, die ich hier auf der rechten Seite aufgestellt habe. Was sind unsere Lernziele im Bowl? Aber T Beispiel. Erstens ist das, was sie bei Bedarf Verhalten liefern. Denken Sie daran, dass wir eine Bot-aber T-Anwendung erstellen, die es jemandem ermöglicht, einen Bot zu bestellen, aber nicht wo immer er gerade ist. Und innerhalb von 10 oder 15 Minuten wird ihnen Mobilität zur Verfügung gestellt. Das wird also nirgendwo auf der Welt sein. Es wird nur für Menschen in San Francisco sein. Die Idee ist also wieder, dass sie ihr Mobiltelefon herausziehen. Sie leben in San Francisco, sie sind derzeit in San Francisco. San Francisco ist sieben Meilen mal sieben Meilen. Wir sind also eine Menge, die wir tatsächlich innerhalb von 15 Minuten überall in der Stadt liefern können. Und sie bestellen etwas Mobitz II und wir liefern es ihnen innerhalb von 10 oder 15 Minuten an ihrem Standort. Sie möchten also die aktuelle Lieferung und das Lieferverhalten der Menschen kennenlernen. Wir wollen wissen, was ihnen gefällt, und finden schmerzhaft an aktuellen Liefer- und On-Demand-Diensten und y. Und das nächste, was wir lernen möchten, ist, was ihr Bogen ist? Aber kein Verhalten. Saw zeigt Ihnen, wie Sie diese Lernziele nutzen, um eine ganze Reihe von Fragen zu entwickeln , die sich auf jedes Lernziel beziehen und sich auf sie beziehen. Bevor ich das mache, zeige ich Ihnen die Einführung, die Sie während eines Interviews verwenden. Jedes Mal, wenn Sie interviewen, bevor Sie den Leuten diese Fragen stellen, möchten Sie sie mit ihnen teilen. Diese Einführung. Die ersten neun Dinge in dieser Einführung, die Sie fragen werden , können Ihrem Interviewpartner sagen. Nummer zehn ist es, Fotos von ihnen für Ihre Fallstudie zu machen. Machen Sie keine Fotos von ihnen in den ersten fünf Minuten, in denen sie getroffen wurden. Du willst bis zum Ende warten? Fragte ihn, ob er ein Foto von ihnen machen kann. Also Nummer eins, das erste, was du tun willst, ist dich vorzustellen. Und wenn Sie einen Notiznehmer bei sich haben, stellen Sie Ihren Notiznehmer vor. Und Sie können Dinge sagen wie, ich bin Designerin und Forscherin, die im Lebensmittel- und Getränkebereich arbeitet. Also wurde der Raum eingeführt, in dem du arbeitest. In unserem Fall gebe ich Ihnen das Bobo t Lieferbeispiel. Wir nennen es also die Nummer für Lebensmittel und Getränke , um zu fragen, ob es in Ordnung ist, aufzuzeichnen. Nur für Notizenzwecke. Was Sie tun werden, ist Ihr Telefon herauszuziehen und es mit der Audio-App auf Ihrem Telefon aufzunehmen. Bleiben Sie, wie lange das Interview dauern wird, wird ungefähr eine Stunde dauern. Manchmal sage ich, dass es immer noch ein guter Zeitpunkt ist. Das Interview wird ungefähr 10 dauern. Nummer 4 gibt das Ziel des Interviews an. Das ist Dinge, die ich sage. Du kannst es auch sagen. Sagen Sie einfach, ich möchte nur eine Diskussion über Ihre Erfahrungen mit Liefer- und On-Demand-Services führen. Außerdem arbeite ich an einem Boot würde Bewerbung sehen. Und ich würde gerne etwas über Ihre Omega-T-Erfahrungen erfahren. Sie können also dort bleiben, wo es heißt, ich möchte nur eine Diskussion über Ihre Erfahrungen mit und dann alle Lernziele einbringen, die Sie hier für Ihren Raum haben. Und das Gleiche kannst du ihnen die gleichen Kontexte geben, ihnen sagen, worin du arbeitest. Und Sie möchten auch ein bisschen in diesem Raum lernen und wie sich ihr Verhalten auf diesen Raum bezieht. Nummer 5, Gesetz, wissen er oder sie, es gibt nichts, was sie sagen, dass sie dich beleidigen werden. Sagen Sie, es gibt keine richtigen oder falschen Antworten auf die Fragen, die ich für Sie habe. Die einzig richtige Antwort ist Ihre Nummer 6. Lassen Sie sie wissen, dass sie Ihnen jederzeit Fragen stellen können. Nummer 7, lassen Sie sie wissen, dass sie am Ende auch fünf Minuten für Fragen haben werden. Nummer 8, fragen Sie sie, Haben Sie Fragen bevor wir beginnen? Und die Nummer neun, lassen Sie sie wissen, dass Sie mit der Aufnahme beginnen werden, und drücken die Aufnahmetaste Ihrer Audioanwendung auf Ihrem Telefon. Okay? Und was wir dann tun werden, ist, dass wir uns mit den Fragen befassen. Die erste Frage, die wir stellen, heißt die Icebreaker-Frage. Es hat wirklich nichts damit zu tun, was du lernen willst, ist sie nur kennenzulernen. Also frage ich normalerweise, was machst du zum Spaß, wenn du nicht arbeitest? Und das bricht einfach das Eis. Das bringt sie zum Reden. Es bringt mich zum Reden. Danach. Wir machen das über sie. Sie können also Fragen stellen, die wie die vier klingen, die wir hier haben. Und du kannst sagen: Erzähl mir ein bisschen über dich selbst. Wie alt bist du? Was machst du für die Arbeit? Wo wohnst du? Und wie sieht dein Leben zu Hause aus? Nachdem diese Fragen gestellt wurden, können Sie zu den Lernzielen übergehen. So können Sie hier sehen, dass ich hier das Lernziel Thema und eine Zeit pro Abschnitt hier habe. Und ich gebe Ihnen ein Beispiel dafür, wie das im nächsten Bildschirm rechts aussieht . Und wir verwenden das Bokeh T-Beispiel. Die Fragen, die Sie unter jedem Lernziel haben, sollten sich also auf dieses Lernziel beziehen und Ihnen helfen, mehr darüber zu lernen. Basierend auf den Lernzielen, über die wir zuvor im Abschnitt Lernziel gesprochen haben . Ich habe ein Lernziel, das Lieferverhalten und On-Demand-Verhalten ist. Also werde ich ungefähr zehn Minuten damit verbringen, mit dieser Person über ihr Verhalten bei der Bereitstellung von On-Demand-Dienstleistungen zu sprechen . Die erste Frage, die ich habe, ist also, wie oft nutzen Sie Lieferdienste? Nächste Frage. Warum und wann benutzt du sie? Wofür benutzt du sie? Wie haben Sie von diesen Diensten erfahren? Hast du jemals schlechte Erfahrungen gemacht, wenn du sie benutzt hast? Wenn ja, beschreiben Sie bitte ausführlich, was daran schmerzhaft war. Hattest du jemals eine wirklich großartige Erfahrung? Aber die Dienste, wenn ja, beschreiben Sie bitte ausführlich, was daran großartig war. Haben Sie einen Lieblingsservice? Wenn ja, beschreibe bitte, warum es deine Lieblingsfläche ist. Wann haben Sie das letzte Mal etwas bei Lieferung bestellt? Okay, jetzt gehe ich zum Abschnitt „Bobo t Behavior Learning Goals “ des Drehbuchs und verbringe zehn Minuten mit Fragen, die sich auf das Bulb AT Team beziehen. Das erste ist also, wie oft trinkst du Baba t? Wann trinkst du es? Wo gehst du hin, um über den Weg zu kommen. Hast du jemals schlechte Erfahrungen mit Bokeh gemacht? Wenn ja, beschreiben Sie bitte ausführlich, was daran schlecht war. Hatten Sie jemals mehr, hatten Sie jemals eine mehr als großartige Erfahrung mit einer Bogen- aber Teefirma? Wenn ja, beschreiben Sie bitte ausführlich, was daran großartig war. Möglicherweise haben Sie drei bis fünf Abschnitte dieser Bereiche, die wir unsere Lernzielbereiche mit Fragen darunter nennen würden. Und das ist das Fleisch des Interviews. Die meiste Zeit sollte damit verbracht werden. Fragen stellen und hören, wie diese Leute dir Geschichten über ihre Meinungen oder ihre Erfahrungen mit diesen Fragen erzählen. Wenn du genug für das Ende deines Interviews gelernt hast, gehe zum Outro. Und wir müssen die letzte Frage stellen. Das ist meine Lieblingsfrage. Du wirst so viel von dieser letzten Frage lernen, die wir haben. Und du kannst etwas fragen, das so klingt. Sie können sagen, basierend auf allem, was ich Sie gefragt habe, werde ich Ihnen eine Lösung geben, um alle Probleme zu lösen, die Sie haben. Und du hast einen Zauberstab. Du kannst alles kriegen. Was ist dein Wunsch? Und du wirst viel lernen. Es ist eine lustige Frage. Einer meiner Favoriten. Danach kannst du auftauchen, du kannst endlich mit dem Outro fortfahren. Also das erste, was du tun willst, ist ihnen für deine Zeit zu danken. Lassen Sie sie wissen, dass alle Notizen und Aufzeichnungen vertraulich sind und nur für Notizen verwendet werden. Und auch die einzigen Leute, die diese Aufnahme sehen und hören werden, sind Sie und das Team. Wenn die Zahlung involviert ist, führen Sie die Transaktion durch? Manchmal bezahlen wir Menschen für ihre Zeit bei uns. Sagen Sie ihnen, dass Sie sie erneut kontaktieren können, wenn Sie eine Lösung finden, damit Sie sie mit ihnen testen können. Und dann sag einfach Danke und auf Wiedersehen. Okay, also hast du diese Akte. Es ist an das Video angehängt. Sie können es herunterladen und damit ausfüllen. Sie können Ihr eigenes Benutzerinterview-Skript erstellen. Lassen Sie uns jetzt Best Practices kennenlernen , wenn Sie tatsächlich ausgehen und Leute interviewen. Also zurück bei UX honey.com. Das erste, was ich will, ich spreche braun, sind die Fragen wie der beste Weg, Ihre Fragen zu formulieren. Daher werden wir normalerweise mit hochrangigen und offenen Fragen beginnen wollen. Sagen wir, ich möchte lernen, wie jemand ein iPad benutzt. Wenn ich einfach damit anfange, wofür benutzt du dein iPad? Ich werde eigentlich ganz am Anfang zu spezifisch. Ich fange lieber auf höherer Ebene an, offener. Es ist also besser, eine Reihe von Fragen zu haben, die so klingen. Wie interagiert man mit Technologie? Und jemand kann zurückantworten, sagen wir: Nun, ich benutze mein iPhone, ich benutze einen Laptop, ich benutze einen Wecker, der futuristisch ist. Ich benutze auch ein iPad. Und dann kannst du sie fragen, was benutzt du am meisten? Und vielleicht sagen sie, nun, ich benutze mein iPad am meisten. Und dann kannst du y sagen und lass sie dir einen Absatz oder eine Geschichte erzählen, warum sie ihr iPhone und iPad benutzen. Aber sieh dir an, wie viele weitere Informationen ich bekommen habe. Als ich eine offene Frage auf hohem Niveau stellte. Es gibt Bereiche, in die ich zurückkommen möchte, weshalb hatten sie einen fortgeschrittenen Wecker oder einen futuristischen Wecker? Was benutzen sie? Ihr iPhone 4 auch. Stellen ihre iPhones eine Verbindung zu ihren iPads her? Gibt es dort eine Beziehung? Startet sehr hohes Niveau, sehr offen. Als Nächstes können Sie Gespräche über Szenarien und Aktivitäten anregen. Dies bezieht sich auf die Lernziele rund um das Erlernen des Verhaltens von Menschen. Sie möchten über ihre Welt, ländliche Kontexte wissen , dass sie eine Aktivität ausüben. Wo machen sie es? Du willst um ihre Schmerzen und ihre Freude lernen. Sie möchten wissen, wann sie zum ersten Mal etwas getan haben sie etwas genau wie zuvor gemacht haben. Und das Skript hatten wir diese Frage, die ungefähr so klang, wann haben Sie das letzte Mal einen Liefer- oder On-Demand-Service genutzt? Sie möchten etwas über die beste Zeit in der schlimmsten Zeit wissen. So schlechte Erfahrungen und gute Erfahrungen. Und Sie möchten ihnen die Frage zur Wunschliste geben, über die wir in der letzten gesprochen haben. Okay. Dies sind Konversationsaufforderungen. Manchmal, wenn Sie nicht wissen, was Sie fragen sollen, können Sie ihnen einfach Konversationsaufforderungen geben und so klingen. Sie können sagen, haben Sie jemals eine Erfahrung gemacht, wo und um das Szenario zu beschreiben, das Sie denken, möchten Sie mehr lernen. Und es ist okay, wenn sie es haben. Wenn ja, kannst du sagen: Kannst du mir die Geschichte von Anfang bis Ende erzählen? Und dann können Sie im Laden Fragen stellen, die wie die nächste klingen, die dann passiert ist und was dann passiert ist. Sie erzählen dir noch ein paar Informationen und du sagst Warum hast du das getan? Oder wie hast du das gemacht? Was hast du daran geliebt oder gehasst? Und wenn du einen Zauberstab haben könntest, was würdest du, wie wäre es? Was wäre dein Wunsch? Als nächstes während des Interviews ist es am besten, einfach zu lächeln. Stellen Sie offene Fragen, holen Sie sich ihre Geschichten, seien Sie still und hören Sie zu. Du solltest die meiste Zeit nicht sprechen. Sie sollten sich fragen wie, warum, was, wann. Während des Interviews möchten Sie nicht über Ihr Produkt sprechen. Sie lernen etwas über den Menschen, nicht über das Produkt. Sprich die ganze Zeit. Gibt es Zeit zum Reden, nicht deine. Frag eine Führung. Und Fragen und uns werden nur sehr offene Fragen gestellt. Führe sie nicht zu einem Thema rund um ein iPad. Lasst sie drauf eingehen. Fragen Sie nach zukünftigen Verhaltensweisen. Du kannst mich fragen, mag ich Pferde? Und ich sage dir ja. Aber in meinem eigentlichen Ausgehen in der Zukunft oder in meinem Pass Pferde zu finden oder Pferde zu reiten? Nein, tue ich nicht. Aber ich sage dir, dass ich Pferde mag. Zukünftiges Verhalten ist also nicht etwas, worauf Sie sich konzentrieren sollten , weil die Leute nicht wissen, was sie in Zukunft tun werden. Sie wissen, was sie in der Vergangenheit gemacht haben. Konzentriere dich also auf aktuelles Verhalten und vergangenes Verhalten. Frag nicht, Gefällt es dir? Würden Sie mein Produkt verwenden? Das ist nicht bereit für sie. Sie werden es dir nochmal sagen, ich mag Pferde. Ja. Aber es liegt in ihrem Verhalten. Was Sie in ihrem Verhalten finden werden, sollte auf diese Fragen anspielen, gefällt es Ihnen und würden Sie es benutzen? Also machen sie nichts mit Pferden, dann benutzen sie vielleicht dein Produkt nicht, aber ich sage dir, ich mag dein Pferdeprodukt und vielleicht benutze ich es. Aber nichts in meinem Verhalten sagt dir, dass ich auf Pferde reiten oder mich für Pferde interessiere. Verkaufen Sie nicht. Dies ist nicht deine Zeit die Zelle, es ist deine Zeit, von diesen Leuten zu lernen. Und du willst nicht viele Ja- und Nein-Fragen. Du willst viele geschichtengesteuerte Fragen. Lassen Sie mich Ihnen also zeigen, wie Sie Ihre Fragen formulieren können, damit Sie am Ende keine Ja- oder Nein-Antwort erhalten. Wenn Sie also Ihre Fragen beginnen, beginnend mit dem Anfang von wie und warum, entspricht das Geschichten. Wenn Sie Ihre Fragen formulieren, würde es tun und dann werden Sie mit Ja und Nein-Fragen enden. Okay. So wie ich es auf dem iPad wissen wollte und jemanden gefragt habe, wie interagiert man mit Technologie? Du kannst die Story zuerst bekommen und du kannst tief tauchen. Sagen wir also, ich frage jemanden, wie er sich mit Technologie beschäftigt, wie ich es zuvor getan habe. Und ich habe ihre Geschichte bekommen. Sie sagten mir Mitglied: Sie sagten: Nun, ich benutze mein Handy. Ich habe diesen futuristischen Wecker. Ich hab einen Laptop. Ich benutze ein iPad. Yada, Yada, Yada. Lass sie weitermachen. Tauche noch nicht ins iPad ein. Hol dir ihre Geschichte und mach dann die tiefe Zeit. Sie werden alles benutzen, du bist wie Welchen benutzt du am meisten? Mein iPad y. Und dann geh auf das iPad und habe eine ganze Reihe von Fragen, warum und deren Verhalten rund um ein iPad. Aber ich habe nicht damit angefangen, wie benutzt du deinen iPad-Boden oder was benutzt du ihn? Viertens begann ich mit der geschichtengesteuerten Frage, die sehr offen war. Hab ihre vollständige Geschichte bekommen. Und ich kann tief in jeden Abschnitt ihrer Geschichte eintauchen und dort ein bisschen mehr lernen. Okay, das sind also einige der Best Practices beim Framing von Fragen, Interviews, lassen Sie mich Ihnen zeigen, wie ein Interview aussehen wird und wie das Beste ist. Also sind wir wieder bei UX Honey.com. Dies sind Ihre Best Practices, die auf der Interviewdynamik basieren. Wenn Sie also eine Zwei-Personen-Dynamik haben, was bedeutet, dass es einen Interviewer gibt und Sie da sind, gibt es nur zwei Personen. Stellen Sie sicher, dass Sie mit Audio aufnehmen. Sie können sich keine Notizen machen und gleichzeitig dem Befragten Fragen stellen. Was du also tun wirst, ist einfach Fragen zu stellen. Du wirst zuhören, du wirst lernen. Sie werden diese Sitzung aufnehmen. Und nach dem Interview kommst du zurück und hörst dir diese Aufnahmen an. Sie werden zurückspulen, vorwärts gehen oder zurückspulen, hören Sie sich das Audio an. Und hier ist der wahre Trick, um zu recherchieren. Sie schreiben Ihre Erkenntnisse, Ihre Zitate in Ihren Erkenntnissen oder irgendetwas Hilfreiches auf Haftnotizen auf? Ja, Haftnotizen. Holen Sie sich eine ganze Reihe von Haftnotizen mit verschiedenen Farben, Haftnotizen, die Sie brauchen. Ich zeig es dir ein bisschen bei y hier. Und im nächsten Video erfahren wir auch viel mehr, was mit diesen Haftnotizen zu tun ist. Sie möchten also ein Inside- oder ein Lernen pro Haftnotiz machen , die mit einem schwarzen Sharpie geschrieben wurde. Es ist also sehr einfach aus der Ferne zu lesen. Stellen Sie sicher, dass Sie den Namen des Befragten auf die Haftnotiz schreiben , damit Sie wissen, auf welche Farbe sich das bezieht? Ich habe diese Person hier interviewt, ich möchte ihren Namen auf Gelb schreiben. Wenn ich später mehr Leute interviewe, weiß ich, wer was auf den gelben Haftnotizen gesagt hat. Und Sie werden sehen, am Ende werden Sie mit dem, was wir User Bucket nennen. Eine ganze Reihe von Informationen, die sich auf ein Interview beziehen. Nach vielen Interviews werden Sie so etwas haben. Sagen wir, ich habe Tom und Joe und Jane interviewt. Dann nehme ich drei Farben. Und in jedem Abschnitt werden wir Erkenntnisse, Zitate und Erkenntnisse für jede Person darstellen . Und ich zeige dir im nächsten Video, was du damit machen wirst. Okay, sagen wir, du hast einen Notizennehmer bei dir. Wir müssen Forscher. Die Dynamik besteht also aus drei Personen. Es ist genau wie die Zwei-Personen-Dynamik. Sie möchten immer noch unsere Audioaufnahme laufen lassen. Aber dieses Mal wirst du einen Notizennehmer haben. Der Notiznehmer wird sich nur Notizen machen. Sie schreiben nur Informationen auf, die sie von dem Befragten hören. Der Job der Notiznehmer besteht darin, nicht zu sprechen. Das ist dein Job als Interviewer. Sie machen sich einfach Notizen mit Stift auf Papier. Nach dem Interview. werdet euch beide zusammen setzen und die Notizen gemeinsam durchlesen. Und du hörst dir das Audio zusammen an. Sie schreiben das Innere von Zitaten und Erkenntnissen oder etwas Hilfreiches auf Haftnotizen zusammen auf. Und du schreibst einen Einblick pro Haftnotiz, die mit dem Black Sharpie geschrieben wurde. Und du wirst am Ende mit dem Interview enden oder einfach so festgehalten. Also hier ist Tom, in Orange dargestellt. Nach min deinen Interviews siehst du, dass wir dasselbe haben, worüber ich gerade gesprochen habe. Okay, und lass mich dir ein Beispiel geben, bevor wir das Video abschließen, wie das aussieht. Hier ist ein Tool, das ich verwende. Es heißt Echtzeit-Board. Es ahmt nur ein echtes Whiteboard nach und ermöglicht es Ihnen, Haftnotizen zu erstellen. Siehst du, ich habe Haftnotizen hier. Ich kann hier alles schreiben, was ich will. Und ich kann Haftnotizen kopieren, sie so gestalten, dass sie die physische Welt nachahmen. Aber es ist am besten, dies zuerst mit echten physischen Haftnotizen zu machen. Leg sie an die Wand. Deine Wand sollte also so aussehen. Und Sie können hier sehen, dass ich drei Personen interviewt habe und alle ihre Informationen auf Haftnotizen erfasst habe, einen Einblick pro Notiz. Und dort werden Sie mit Recherchen enden. Und wenn Sie lernen möchten, was als nächstes zu tun ist, können wir zum nächsten Video der Serie gehen, in können wir zum nächsten Video der Serie gehen, in dem Forschungsergebnisse synthetisiert und wie man eine Problemaussage schreibt. Okay, also da hast du es. So erstellen Sie ein Benutzerinterview-Skript und die Best Practices bei der Durchführung von Recherchen. Hoffentlich sehe ich dich im nächsten Video. Und wieder wie immer, danke und auf Wiedersehen. 5. UX und die Beschreibung einer Problem schreiben: In Ordnung, Willkommen bei den nächsten Videos zum Erstellen einer UX-Fallstudie und das Benutzererlebnisdesign 1, 0, 1. In den letzten Videos haben wir bisher beschrieben, wie man Ziele setzt, wie man eine Persona erstellt, wie man ein Benutzerinterview, ein Skript und Best Practices bei der Durchführung von Recherchen erstellt . Hoffentlich hatten Sie die Gelegenheit, etwas zu recherchieren und mit einigen Leuten zu sprechen, paar Benutzerinterviews zu führen. Wenn nicht, ist es okay. Sie können diesen Prozess lernen und immer zurückgehen und diese Art von Arbeit erledigen. Ich bin so in dieser Videoserie, was wir uns ansehen werden, ist, wie Sie Ihre Forschungsergebnisse synthetisieren und wie Sie eine Problemaussage schreiben können. Was ist Synthese oder Synthese? Es geht wirklich nur darum, Ihre Informationen und einen systematischen Ansatz zu organisieren. Was ich also tun werde, ist auf die Ux.com zu gehen oder tut mir leid, UX honey.com Website. Dies ist die Website, die ich an der Universität unterrichte. Und wenn du hier auf die UX 2 klickst, gehen wir nach Hause. Wir werden die Synthese und das Clustering finden. Du klickst auf diesen Button und er bringt dich zur Syntheseseite. Und wieder, wie ich vorher gesprochen habe, ist dies die Definition von Synthese. Es organisiert und bereitet Informationen vor. Und so habe ich dir im letzten Video beigebracht, wie man recherchiert. Und was Sie tun werden, ist, dass Sie die Informationen, die Sie während jeder Recherche oder Benutzersitzung, Benutzerinterviewsitzung, gefunden haben, aufgenommen haben . Und du hast diese Erkenntnisse genommen und du hast sie auf Haftnotizen geschrieben. Ein Einblick pro Haftnotiz. Sie haben hier auf der rechten Seite erstellt, aber wir nennen es „User Bucket of Information“. Und in diesem Beispiel haben wir Tom, und Tom wird durch Orange dargestellt und wir haben alle Informationen, die wir aufschlussreich fanden, auf Haftnotizen festgehalten. Und das ist der Prozess, den wir Synthese nennen. Sobald Sie beispielsweise fünf bis sieben Personen interviewt haben , ist es normalerweise die beste Zeit, anzuhalten und die Clusterarbeit zu erledigen. Das Clustering ist, wenn Sie Muster und Themen für die Informationen finden , die wir haben. Und diese Muster helfen uns dabei, Interessenpunkte und Prioritätspunkte zu identifizieren. Und es hilft uns, die Lernziele und die Annahmen, die wir in der Person getroffen haben, zu validieren als zu beginnen. Du siehst also ein Beispiel, das ich hier habe. Wir können davon ausgehen, dass wir bisher drei Personen interviewt haben. Wir haben Tom in Orange dargestellt, wir haben Joe in Rosa dargestellt, und wir haben Jane in Gelb dargestellt. Das erste, was Sie tun, wenn Sie clustern, ist, mit einer sehr breiten Kategorie zu beginnen. Und in dieser Kategorie haben wir Technologie. Und denken Sie daran, als ich im letzten Video darüber gesprochen habe, wie wir unsere Fragen formulieren. Daher beginnen wir normalerweise nicht detaillierte, sondern sehr große, offene hochrangige Fragen. Im letzten Beispiel hatte ich eine Frage, ich wollte das iPad-Verhalten von jemandem kennenlernen, aber ich habe nicht mit einer Frage angefangen, die so klang. Wie benutzt du dein iPad? Ich habe tatsächlich mit einer viel umfassenderen Frage angefangen, was ist, wie interagiert man mit Technologie? Und die Eingänge, die ich von Leuten habe, waren überall. Also sprachen sie darüber, wie sie ihre nutzen, sie benutzen ihre mobilen Geräte. Sie benutzen einen Laptop, sie benutzen ein iPad, sie benutzen einen wie wirklich futuristischen Wecker. Einige verwenden wirklich interessante Technologien in der Küche. Aber ich habe eine Art breite Informationserklärung rund um Technologie. Was ich zuerst mache, ist, dass ich ein breites Thema erstelle. Also nennen wir diese Technologie. Und ich mache es zu einer Haftnotiz oder einem Blatt Papier oder einer Kategorie. Stellen Sie sich vor, dies ist ein physischer Raum und es heißt Technologie. Normalerweise verwende ich eine Haftnotiz Das ist eine andere Farbe alle Haftnotizen, die ich verwendet habe, die Benutzer darstellen. In diesem Fall können Sie dies eine größere Haftnotiz namens Technologie. Und jetzt höre ich auf und lese jedes Innere, das ich habe, basierend auf den Recherchen, die ich gemacht habe, und all den Benutzern, die ich hier gemacht habe. Und ich werde ziehen, dass es Einblicke unter diesem Thema, das sich auf Technologie bezieht. Sie können also sehen, dass ich aus jedem drei Interviews ziehe, die ich mit Tom, Joe und Jane gemacht habe. Und ich ziehe ihre Haftnotizen in dieses Thema namens Technologie und lege ihre Haftnotizen unter die Haftnotiz, auf der Technologie steht. Okay? Das zweite, was ich mache, ist, wenn ich diese breiten Kategorien voller Erkenntnisse habe, kann ich damit granular werden. Also Saatgut. Jetzt habe ich von dieser Frage gehört, wie man mit Technologie umgeht? Die Leute erzählten mir von Informationen darüber, wie sie ihr iPhone oder iPad benutzen und in diesem Fall, wie sie das Internet nutzen. Also habe ich Haftnotizen, die sich auf jedes Thema beziehen, aus dem Technologiethema herausgezogen. Und ich habe Themen erstellt, die detaillierter sind, beispielsweise iPad, iPhone und Web. Und dieser Akt, all diese Arbeit zu erledigen, gruppiert sich. So finde ich Muster und High-Find-Themen. Das hat mir geholfen, mit der Arbeit einherzugehen, die ich machen werde. So ziemlich was Sie tun möchten, ist, dass Sie alle Ihre Interviews durchlaufen möchten und alle Ihre Themen zusammenstellen möchten. Und ich scrolle wieder nach oben und zeige dir, wie das aussieht. Sie können also hier sehen, dass ich eine ganze Reihe von Leuten habe, die ich interviewt habe, in dem wir vier verschiedene Farben haben. Wir haben Blau, Grün, Grau und Gelb. Und ich habe die rosa Haftnotiz, die hier das eigentliche Thema darstellt. Also der rosa dort und all die Leute, die sie gesagt haben , beziehen sich auf dieses Thema darunter. Also zeige ich dir: Hier ist ein anderes Beispiel. Hier ist eine ganze Mauer. So sollte es in Ihrem physischen Raum aussehen. Du solltest ein paar Haftnotizen mit Sharpie schreiben lassen. Und Sie haben eine ganze Reihe von Informationen, die Sie zwei ziehen und zwei zuordnen können , um Entscheidungen über Ihre UX-Arbeit in Zukunft zu treffen. Hier ist noch ein Foto davon. Und sieh dir all die Arbeit an, die wir alle Interviews gemacht haben, die wir dort gemacht haben. Und Sie können unsere Persona hier sehen, die wir auch an der Wand geschaffen haben. Und hier ist der Prozess, in dem wir es tun. Hier treffen sich ein Haufen von uns in einem Raum zusammen. Und wir haben hier Themen in diesen Boards. Und wir ziehen hier relevante Informationen , die wir von unseren Nutzern gehört haben, zu diesen Themen zusammen . Es sieht also so aus. Hier bin ich mit einem Kunden da und sie haben Spaß. Wir lesen, was ich gerade mache, während ich ein Thema vorlese, eine Einsicht, Entschuldigung, von all den Leuten, mit denen wir gesprochen haben, einen bestimmten Einblick und es laut vorlese. Und ich frage das Team, wo passt das? In welche Szenenkategorie oder welches Thema passt diese Seite? Und dann übergebe ich es allein zu diesem Thema. Der ganze Akt, den ich dir gerade gezeigt habe, war das, was wir Synthese und das Clustering von Erkenntnissen nennen . Also lass mich dir das zeigen, zeig dir einfach in Echtzeit, wie das tatsächlich funktioniert. Also habe ich mein Echtzeit-Board geöffnet, das ich dir im letzten Video gezeigt habe. Das ist digitales Whiteboard. Und hier sind meine drei Leute, die ich interviewt habe, und hier sind alle Erkenntnisse, die ich habe. Also habe ich Naomi, Jo Han und Anna hier interviewt . Und jetzt bin ich bereit, hier ein paar Themen zu ziehen. Einige fangen ziemlich breit an. Und ich werde das Beispiel verwenden, über das wir im letzten Video gesprochen haben, nämlich Baba T und eine Bowtie On-Demand. Also war ich neugierig zu hören, wann ich ausgegangen bin und interviewt habe. Wie oft bestellen die Leute Baba t und wann bekommen sie beide ein T? Also wähle ich gerade aus, sagen wir gelb für meine Kategorie. Und ich nenne das klebrig. Wie wann bekommen Leute Omega t? Okay, da hast du es. Also nennen wir das hier. Wann trinken Leute, Beau, aber t, wir haben 0 beschäftigt. Und ich werde jede meiner Kategorien durchkämmen. Hier, sind meine Benutzer hier und sehen, wo sie herumgesagt haben, wann kommen sie über t hinweg? Also habe ich eine Person hier, er sagt, ich bekomme hauptsächlich am Wochenende Omega t. Also Laplace das hier. Und ich habe hier noch einen Einblick. Das hat manchmal zweimal pro Woche Omega t bekommen. Leg das auch hier hin. Wieder wurde es zu John verlegt. Ich habe hier auch eine Haftnotiz, die besagt In einer durchschnittlichen Woche würde ich Bokeh T dreimal pro Woche sättigen. Also werde ich das hier drüben ablegen. Und auf dieser Haftnotiz bekomme ich 0 aber fast jeden zweiten Tag. Ich liebe das Zeug. Das ist interessant. Ich ziehe das hier rüber. Und dieser sagt, dass ich am Wochenende normalerweise mehr durch San Francisco spaziere. Und wenn ich einen Bobo-T-Platz sehe, höre ich normalerweise auf, um einen zu holen. Jetzt interessantes, interessantes Verhalten dort. Lassen Sie uns diese also in diese Kategorie bringen. Ziemlich nett. Gehen wir hier rüber zu Anna. Der Weihnachtsmann hat einen, der besagt, dass ich 0 bekomme, aber nicht nur an den Wochenenden und ich versuche während der Woche gesund zu sein. Und sie sagte, ich würde sagen, ich würde wahrscheinlich zweimal im Monat Bobo t trinken. Das sind also interessante Erkenntnisse, die wir hier auf unser Thema eingehen sollten. Also jetzt habe ich dieses Thema , wann trinken Leute über t? Aber jetzt bekomme ich ein paar Einblicke darüber, wie oft sie es trinken. Machen wir also noch einen hier und ziehen Sie etwas aus dieser Kategorie weiter. Mach das hier. Wie oft trinken Menschen Tee? Also hat diese Person es hier gesagt, ich bekomme 0 aber meistens am Wochenende. Dieser sagt, Manchmal bekomme ich zweimal pro Woche Omega t. Okay, lass uns das da rüber ziehen. Auf dem südlichen hier heißt es, ich laufe normalerweise an einem Wochenende mehr durch San Francisco und wenn ich ein Boot sehe, aber T place, halte ich normalerweise an und bekomme eines. Okay. Lassen Sie uns gehen, dass sie eine durchschnittliche Woche haben. Ich würde sagen, dreimal pro Woche einen Drink. Lassen Sie uns das zu diesem Thema übergehen. Und ich kriege Bowtie fast jeden zweiten Tag. Ich liebe das Zeug. Lasst uns das hier rüberbringen. Okay. Ich bekomme Bogota nur an den Wochenenden und versuche unter der Woche gesund zu sein. Ich glaube, das springt da drüben. Und schau, wir fangen an, hier ein Muster zu sehen, die Leute bekommen Baba T an den Wochenenden. Sehr interessant. Ich würde sagen, ich trinke wahrscheinlich Beau, aber zweimal im Monat. Okay. Sehr interessante Art, Ihre Informationen, die Sie haben, zu thematisieren. Und dieser Akt, Themen zu setzen und Haftnotizen unter die Themen zu legen. Und das heißt und fördert Affinitäts-Mapping. Aber wir suchen wirklich nach den Mustern hier. Und so kann ich jetzt wiederkommen und eine ganze Reihe von mehr Menschen interviewen. Ich habe bei diesem Interview auch gelernt, dass die Leute Mobitz II nicht nur am Wochenende wollen, sondern auch bei der Arbeit wollten. Sie gehen unter dem Wochentag bei der Arbeit und zu Zeiten und holen es sich. Und Sie sollten irgendwann etwas haben, bei dem Sie viel mehr Leute zu einem dieser Themen mit verschiedenen Farben haben . Sie haben also mehr Leute interviewt, sagen wir, ich mache eine Orange, wir machen eine grüne, hellgrün, wir machen noch eine, es ist lila. Und irgendwann wirst du hoffentlich noch viel mehr davon haben. Sagen Sie, Sie haben hier ein Thema, wir nennen das wie Thema 1. Und viele weitere Einblicke zu diesem Thema. Und dann haben wir hier noch ein Thema zu diesem Thema 2. Und das ist hoffentlich das, was Sie am Ende haben, so etwas mit viel mehr Themen, die Sie durchgehen und alle Informationen vorlesen können , über die Sie gelernt haben. Wenn wir also zu diesem Zeitpunkt zurückgingen und erfahren, was das Ziel war, bestand eine Forschung darin, Reaktionen zu erforschen und zu erfassen, Verhalten zu erforschen und zu erfassen und viele Antworten auf die Fragen zu erhalten, die Sie hatten. In diesem Punkt können Sie also aufhören zu recherchieren, wenn Sie immer noch das Verhalten der Menschen verstanden und validiert haben, ihre Reaktionen haben und viele Antworten auf die Fragen über die Sie erfahren möchten, wann Sie hat zuerst recherchiert. Bevor Sie also ausgehen und mit dem Entwerfen und Entwickeln von Lösungen beginnen, sollten Sie am besten beginnen, Ihre Probleme zu gestalten. Als Nächstes, was wir gerade tun werden, ist, dass wir lernen werden, wie man eine Problemaussage schreibt. Also habe ich dieses Dokument hier, das an das Video angehängt ist, das Sie herunterladen können. Und das nennen wir es Problemaussage Framework. Und das Framework hier skizziert ein paar Dinge. Und was es tut, ist, dass es uns hilft, das Problem zu verstehen und zu artikulieren, mit dem wir konfrontiert sind und das wir lösen werden. Und innerhalb eines Problems ist es wichtig zu verstehen, wer die Person ist, dieses Problem zu haben, was ihr Ziel ist und welche Lösung sie haben möchte, und welche Lösung sie haben möchte die ihnen hilft, dies zu lösen Problem. Das Framework ist also genau so, wie Sie hier sehen , beginnen Sie mit IM, legen Sie die Persona ab und dann setzen Sie, ich versuche, was das Ziel für diese Person ist. Aber ich kann nicht weil und du darlegst das Problem auf. Und nur wenn ich das gelöste, die beabsichtigte Lösung hätte , würden wir gerne. Okay, also lasst uns gehen und benutzen das Beispiel „Bogen aber T“ -Problemaussage. Also haben wir die ganze Zeit mit diesem Bot-aber T-Thema als Beispiele für Sie gelaufen. Und hier ist die Problemaussage aus der Sicht des Bokehs. Nach unserer Recherche haben wir also gelernt, dass viele Leute um 0 bestellen wollten, aber von der Arbeit. Aber sie konnten die Arbeit nicht verlassen, weil sie viel Arbeit hinzufügten. Ihr Problem war also die R Diese Person, auf die wir abzielten, ihr Name war Franny Shruti, das war die Person. Auch hier war es ihr Ziel, dass sie versuchten, an ihrem Arbeitsplatz Mobilität zu erlangen. Aber das können sie nicht, weil sie zu viel Arbeit haben, um sie zu erledigen, und sie können das Büro nicht verlassen. Unser Problem. Wenn sie nur eine Möglichkeit hätten, Baba t zu bestellen und es in den nächsten 15 Minuten an sie liefern zu lassen. Sehen Sie sich also an, wie Sie diese Problemanweisung verwenden, um den Kontext des Problems richtig zu gestalten. Und das ist so ziemlich genau das. Es ist ziemlich einfach. Es braucht viel Arbeit und viel Zeit, um hierher zu kommen. Aber sobald Sie an diesem Punkt sind, können Sie nun beginnen, sich auf die Lösungsseite zu bewegen, nämlich das Schleppnetzwerk, das Skizzieren, das Entwerfen, Erstellen, die Design-Wireframes, die Prototypen und das Ausgehen und das Ausgehen des Benutzers testen. In der nächsten Videoserie werde ich das behandeln. Ich werde erläutern, wie Sie eine Customer Journey Map erstellen, Sie die Geschichte erzählen können, für die Sie entwerfen werden. Sie werden einige Skizziervorlagen und Frameworks verwenden , die zum Erstellen dieser Drahtgitterentwürfe verwendet werden. Ich bringe Ihnen bei, wie Sie einen anklickbaren Prototyp erstellen wie Sie den Benutzertest durchführen. Und wenn alles erledigt ist, machen Sie diese Grundlage eines Designsystems, das alle Gestaltungselemente erstellt. So wenden Sie das visuelle Design auf Ihr Drahtgitter an. Best Practices, wenn es darum geht, Ihre Lebensläufe und den Überblick über die Fallstudie zu entwerfen. Cool, also haben wir es nicht getan. Wir sehen uns in der nächsten Videoserie und habe immer Danke und auf Wiedersehen. 6. Erstelle eine Kundenreisekarte: Ordnung, willkommen zurück zur Gestaltung einer UX-Fallstudie und das Design einer Einzelklasse der Benutzererfahrung. Wir haben gerade eine ganze Reihe von Videos fertiggestellt. Wir haben bereits gelernt, Ziele zu erstellen und zu setzen. Wie erstellt man eine Design-Persona, wie man ein Benutzerinterview-Skript erstellt, Best Practices bei der Durchführung von Recherchen. So nehmen Sie alle Ihre Forschungseinblicke und synthetisieren Sie die Ergebnisse. Wie schreibe ich eine Problemanweisung. Und jetzt konzentrieren wir uns heute darauf, wie man eine Customer Journey Map erstellt. Also gehe ich zum Lehrplan der Website, einer Website, die ich für meinen Universitätsunterricht verwende. Ich habe zwei Klassen. Ich bringe Serotypen y2, x2 und unterrichte fortschrittliches Benutzererlebnisdesign, das wir UX S3 nennen. Die Customer Journey Map unterrichte ich den Fortgeschrittenen. Also klicke ich auf Y2, X3. Und hier sind alle Methoden, die ich für diesen Kurs unterrichte. Und wir werden hier unten scrollen, um die Customer Journey Maps genau hier zu finden. Wo also Karten stehen, klicke ich darauf. Und hier beginnen wir unsere Customer Journey Karteninformationen. Okay, was ist eine Customer Journey Map? Es ist ein Framework, der uns hilft, die aktuelle oder zukünftige Reise unseres Kunden zu verstehen . Wenn Sie also den aktuellen Status modellieren, modellieren Sie normalerweise das aktuelle Problem. Und normalerweise ist es ein Szenario, mit dem die Person oder der Zielbenutzer konfrontiert ist. Und wenn Sie den zukünftigen Status modellieren, verwenden Sie normalerweise die Customer Journey, um die zukünftige Lösung zu modellieren, in der Sie entwerfen werden. Wann benutzt du es im aktuellen Zustand? Wenn Sie am Anfang einen Domain-Experten haben oder viel über Ihren Benutzer wissen, könnten Sie dies tun. Sie könnten dies gegen Ende Ihrer Recherche tun, sobald Sie genügend Informationen über den Benutzer und sein Problem haben , wenn Sie das Problem normalerweise modellieren. Wann Sie es auf der zukünftigen Reise verwenden müssen, ist nach Ihrer Recherche, Sie haben eine ganze Reihe über die Person erfahren, auf die Sie ihr Verhalten ausgerichtet haben. Und Sie können dieses Modell, die Customer Journey Map, verwenden , um ein Konzept oder eine validierte Lösung zu modellieren. Also modellieren Sie normalerweise das Lösungsszenario. Also habe ich das Beispiel hier. Also habe ich ein Beispiel auf der Website und eines, das auch ausgefüllt ist. Also gehe ich zu Illustrator. Und ich habe bereits ein Dokument an dieses Video angehängt , das das Framework skizziert, das Sie herunterladen und verwenden können. Und lass mich dieses Dokument durchgehen. Hier oben haben wir also die Customer Journey. Normalerweise kannst du hier deinen aktuellen oder zukünftigen Status schreiben. Ich zeige dir das Beispiel, das wir hier haben, rechts. Hier in einer Sekunde. Und wie wir diese Reihen nennen, nennen wir diese Schwimmbahnen. Und so ist die erste Top-Umgebung, die wir haben, eine physische Umgebung. Also fragen wir uns selbst, wo befindet sich der Benutzer während jeder Aktion, die er während seiner Reise unternimmt? Das ist also die physische Umgebung. Es könnte so sein, als wären sie im Bus. Es könnte im Büro sein. Die nächste Schwimmspur unter physischen Umgebungen ist die Benutzeraktion. Der Schlüssel. Dies sind die Aktionen der Benutzer, die durchlaufen. Und der darunter genannte „Front of Stage“. Dies sind die Interaktionen, die der Benutzer sehen kann. Denken Sie also darüber nach, wenn Sie sich eine Theateraufführung ansehen, Es gibt eine Menge Dinge, die Sie auf der Bühne sehen, die passieren. Aber Sie können die nächste, die Backup-Phase, sehen , die hinter dem Vorhang liegt. Wenn Sie sich also eine Theateraufführung ansehen, Es gibt viel Arbeit hinter der Bühne, um sicherzustellen, dass die Vorderseite der Bühne tatsächlich nach Plan verläuft. Diese Schwimmbahn der Backup-Phase wird hier als Inneres bezeichnet, wird als Back-of Stage bezeichnet, und es sind die Interaktionen, die Sie nicht sehen können. Der Benutzer kann diese nicht sehen. Und der letzte hier, die Unterstützung auf der Unterseite, heißt die Unterstützungsschwimmspur. Und dies sind Support-Interaktionen können E-Mails, Textnachrichten, Benachrichtigungen sein , okay, also weiter, all die Serien von Videos, die wir gemacht haben, haben wir uns das Beispiel angesehen, der Online-Lieferservice von Mobitz II ist. Dies ist eine Anwendung, die wir hier bei ein paar weiteren Videos erstellen werden. Und ich habe dieses Customer Journey Framework verwendet, um die gesamte Reise zu modellieren , die der Kunde bei der Online-Bestellung eines Bobo t fortsetzen wird. Und das ist die Reise, für die wir auch in zukünftigen Videos gestalten werden. Okay, also zoome ich ziemlich eng hinein und scrolle herum, damit du es sehen kannst. Was ich hier gemacht habe, ist, dass ich mit dem aktuellen Staatsziel begonnen habe , das Bogan online gesehen wird, um an das Büro geliefert zu werden. Eigentlich ist das nicht der aktuelle Zustand. Hoffentlich hast du das erwischt. Lasst es uns ändern. Dies ist das zukünftige staatliche Ziel hier, weil wir die Lösung gerade entwickeln. Das zukünftige staatliche Ziel ist also, dass wir BY Bowtie online bestellen wollen , um an das Büro geliefert zu werden. Okay. Wir haben also unseren Benutzernamen oder Nutzer war Franny Foodie. Sie möchte einen Mobitz II im Büro bestellen. Und dann kann sie den aktuellen Zustand nicht. Weil sie zu viel Arbeit zu erledigen hat und das Büro nicht verlassen kann. Also suchte sie nach einer Möglichkeit, den Bot-Button zu bestellen und ihn an ihr Büro liefern zu lassen. Das ist also die Anwendung, die wir erstellen werden. Und hier ist die Customer Journey, Franny Foodie hier weiter modellieren wird, damit Sie sehen können. Okay. Frannie Foodie ist also im Büro. Sie ist an einem Computer. Sie geht hier auf die Website, was auch immer die Website ist, Benennung ist, wir können sagen, dass sie wenig gesüßt ist. Sie sieht eine Marketingseite mit Werbebotschaften. Es gibt Lieferorte, Ansichten als Karte, damit sie die Servicezeiten sehen kann und wo sie Bobo liefern werden. Nur in San Francisco sind die Servicezeiten acht bis neun Uhr. Und sie sieht einen Knopf, auf dem steht, siehe Menü. Im Backstage haben wir eine Backend-Datenbank. Dies gibt die Servicezeiten und die Liefergebiete an, die auf den neuesten Servicestunden und Standortbereichen auf dem neuesten Stand sind . Lass mich dort ein hinzufügen. Das nächste, was sie hier bei dieser Benutzeraktion tun wird, sie sich das Bot- und Bot-Team-Menü anschaut, ist sie gerade auf unserer Website auf einem Computer auf ihrem Schreibtisch im Büro. Sie kann aus verschiedenen Arten von Fliegen wählen. Einige Drinks, Bilder von Belägen, Preise und Schaltfläche „In den Einkaufswagen“. Die Back-End-Datenbank hinter dem Weisen. Sage wird verfallene Beläge und T-Typen aktualisieren, damit wir kein bestimmtes Topping haben. Oder T wird ein verbotenes Symbol auf der Vorderseite der Bühne werfen. Okay, das nächste, was Franny Foodie macht, ist, dass sie Bogen auswählt, aber T und ihre Beläge. Also ist sie wieder auf der Website an ihrem Schreibtisch. Sie wählt und fügt Milchtee mit großem Baba, mittel, süß, in den Warenkorb und fügt dem Becheretikett einen Namen hinzu. So können Sie die Menge an Süße bestellen, die Sie auf Ihrem Grundstück wünschen. Und so machen wir mehrere Bestellungen. Es ist wichtig, dass Sie den Namen auf die Tasse setzen. Wenn wir also vier Bestellungen haben, Ababa T, wird es die Leute nennen, die Sie für jeden Geschmack und jede Bestellspezialität die Namen der Leute angeben können. Sie sieht die Schaltfläche In den Einkaufswagen und fährt mit dem Warenkorb fort. An dieser Stelle haben wir die Back-End-Datenbank, die die Getränkeinformationen speichert und den Namen der Becheretiketten speichert. Okay, der nächste Schritt, den Franny Foodie macht, ist, dass sie die Bestellung überprüft. Sie sieht die Auswahl von Milchtee, den Gesamtpreis, die Steuern und die Liefergebühr. Und sie sieht einen Knopf mit der Aufschrift „Kasse“. An dieser Stelle steht das Backend hinter der Bühne, berechnen die Umsatzsteuer und berechnet die Liefergebühr ist ein Schätzwert. Denkst du, du hast hier schon etwas im Stützbein? Okay. Jetzt muss sie Granny einloggen. Sie sieht also dieses E-Mail-Formular, ein Passwortformular. Sie kann sich über Facebook anmelden, sie kann sich über Google anmelden. Sie sieht einen Button mit der Aufschrift Login. An dieser Stelle bestätigt diese Back-End-Datenbank, dass die Anmeldeinformationen korrekt sind. Ziehen Sie Kundeninformationen wie Name und Lieferadresse ab, die im letzten Bildschirm eingegeben wurden und speichern Sie sie im Profil dieser Person im Profil von Freitag. Okay, das nächste, was wir hier für Frannie tun werden, ist, dass sie ihr Lieferkleid und die Inter-Zahlungsdetails bestätigen wird . In der physischen Umgebung ist sie immer noch betreten, der einen Computer bekommen hat, aber jetzt zieht sie eine Kreditkarte heraus. Als sie die Lieferadresse sieht, sieht sie die Kreditkarte Florida, sie sieht eine geschätzte Lieferzeit. Sie sieht Gesamtkosten, eine Steueraufschlüsselung und eine Liefergebühr. Sie sieht einen Knopf mit der Aufschrift Bestellung aufgeben. Und im Backend werden wir die Umsatzsteuer berechnen. Wir berechnen die tatsächliche Liefergebühr, da wir jetzt wissen, dass die Immobilie vertraut, an die wir sie liefern werden. Okay. Dann werden wir die Zahlung bestätigen lassen, ist der nächste Schritt, den der Freund weitermachen wird. Also hat sie all diese Informationen eingegeben, sie gibt die Bestellung auf. Sie sieht, dass die Zahlung erfolgreich war. Sie sieht, dass die Lieferzeit dauern wird, um der Bokeh-Lehrerin ihr Büro zu verschaffen. Sie sieht die Lieferadresse. Die Back-End-Datenbank hier bestätigt die Bestellung der Zahlungsinformationen für das Unternehmen speichert die Benutzerbestellung in einem Benutzerprofilabschnitt. Also diese phrenisch und gehen zurück und sehen Sie sich das historische Protokoll ihrer Bestellungen an und es sendet eine Quittung an die E-Mail. Denken Sie also daran, dass dieser letzte Track hier Support Track war. Der Freitag erhält also eine E-Mail über die Quittung ihres Kaufs. Und dies wird auch die Bestellungen und Details für das Unternehmen schaffen , damit das Unternehmen anfangen kann, an ihrem Omega t zu arbeiten . Der nächste Schritt ist also, dass Franny in unserem Büro darauf wartet , dass Bobo t an ihren Bürostandort geliefert wird. In der letzten Phase passiert wirklich nichts. Sie wartet nur. Aber hinter der Bühne findet viel Arbeit an Billy the Bike Messenger statt. Er muss den Bobo t verpacken. Er informiert das System darüber, dass das T geliefert wird und er druckt jemals aus. Er lässt das System auch eine SMS senden, eine E-Mail-Benachrichtigung über die ETA senden, die geschätzte Ankunftszeit. Damit ETA als SMS und E-Mail an Franny auftaucht, dass wir auf dem Weg sind und ihr eine geschätzte Zeit gibt , in der ihr Bogen aber nicht an sie geliefert wird. Billy fährt in den Sonnenuntergang und es wird diesen Bobo T auf seinem Fahrrad liefern. Okay, jetzt gehen wir zur nächsten Aktion hier, dass der Bobo t geliefert wird. Die physische Umgebung ist also, dass Sie das Büro hektisch sehen und Billy sehen können, sie kann die Glühbirne sehen, eine T eine Quittung auch. Und ich stehe hinter der Bühne, der Bike Messenger Billy, und bildet das System, dass die Transaktion abgeschlossen wurde. Jetzt bekommt Franny eine Steuer und eine E-Mail, in der sie ihr für ihren Dienst dankt. Und das wäre ein guter Ort, um ihr auch einen Gutschein für einen Kampf zu geben, vielleicht 5 Dollar Rabatt auf die nächste Bestellung. Okay. haben Sie es also nicht getan, es gibt eine Customer Journey Map. Ich zeige Ihnen eine andere Version einer Customer Journey Map. Und Sie können es tatsächlich verwenden, wenn Sie Benutzertests durchführen oder wenn Sie mit Ihrer Zielperson oder Ihrem Kunden zusammen sind. Also gehe ich zurück zur UX, Schatz. Und wir werden ein bisschen über die emotionale Reise Map sprechen. Okay, was ist also eine emotionale Customer Journey Map? Dies ist ein Framework, der Ihnen hilft, die aktuelle Reise zu verstehen , die Ihr Kunde aus emotionaler Sicht durchläuft. Normalerweise machen wir dies öfter, nicht in Bezug auf diesen zukünftigen Staat. Sie können es auch während eines aktuellen Status tun. Und ich mache dies tendenziell, sobald wir entworfen haben, bereits in einem Workflow unserer Konstruktionen aufgebaut. Hier ist also das Beispiel hier auf der Website, das Sie finden können. Aber ich habe Ihnen auch das Beispiel in derselben Datei gegeben , die Sie auch mit dem Video herunterladen können. Es ist also ziemlich ähnlich der Customer Journey Map. Wir haben die gleichen Schwimmbahnen. Wir haben die physische Umgebung hier oben, wenn die Benutzer hier handeln. Aber an diesem Punkt wird Delaney, den wir unten haben, durch Emotionen beschrieben. Sie können also sehen, dass diese Spur hier durch Aufregung beschrieben wird. Wir haben einen normalen Zustand. Sie haben einen kleinen zögerlichen Zustand. Wir haben einen verwirrten Zustand. Sie haben einen Grenzstaat und wir haben einen, der offen ist. Was Sie also tun können, ist, dass Sie dieses Dokument ausdrucken können. Sie können Ihre Bewerbung testen, und Sie können die Person an dieser Stelle alle Informationen eingeben lassen, die sie hier gefühlt haben, sie kann sie mit einem Bleistift und einem Sharpie einzeichnen. Lassen Sie mich Ihnen also das Beispiel nennen, wie das in dem Bokeh t On-Demand-Service aussieht , den wir haben. Denken Sie also daran, dass ich an dieser Stelle bereits etwas entworfen habe. Ich bin zu meinem Kunden gegangen. Ich teste dieses Design mit ihnen. Oder das Design lebt bereits in freier Wildbahn. Und ich habe jemanden gefunden, der es benutzt hat. Und ich ging hin und sprach mit ihnen und ich wollte wissen, wie ihre emotionalen Zustände während dieser gesamten Benutzererfahrung befanden. Und was ich wirklich versuche zu wissen ist, was sind die Freude an Teilen der Anwendung und was sind die Teile des Schmerzes. Ich kann mich also darauf konzentrieren, an der Verbesserung zu arbeiten Nicht nur Dinge, die für die App bezahlen, sondern auch die freudigen Dinge und sorgen kontinuierlich für Freude für unsere Kunden. Es ist also die gleiche Reise, die wir zuvor beschrieben haben. Bekannter Strang geht auf die Website oder die Anwendung, je, es schaut auf ein Menü oben. Sie wählt sowohl ein t als auch so weiter und so weiter aus. Aber an diesem Punkt kann der Benutzer einfach eine Linie ziehen lassen wie er sich während dieser gesamten Erfahrung gefühlt hat, nachdem er es durchgemacht hat. So können wir sehen, dass Franny hier auf der Website ziemlich normales Japan angefangen hat. Durchsuche die Menüs, du warst sehr aufgeregt und wir haben gefragt warum. Sie war aufgeregt und sie mochte es sehr, alle Möglichkeiten der Mobilität zu sehen. Sie müssen einige Mobilitätsoptionen und Beläge auswählen. Immer noch ziemlich aufgeregt da drüben. Lassen Sie uns die Bestellung überprüfen. Der Senat war ziemlich normal. Boom, ich muss mich einloggen. Sie war keine Bestandskunde. Sie ist hier wirklich frustriert, weil sie ihr Passwort vergessen hat. Also musste sie einen vergessenen Passwortfluss durchlaufen und wurde schließlich immer mehr, als sie ihre Informationen dort erhielt. Okay. Sie bestätigte ihr Lieferkleid und gab die Zahlungsdetails ein, also war das ziemlich normal. Als sie zur Zahlungsbestätigung ging, sagte sie, sie sei wirklich aufgeregt, weil es passieren würde. Und dann sagte sie hier drüben, dass sie ziemlich gelangweilt sei, weil sie länger warten müsse als erwartet. Die Bewerbung sagte ihr, dass ich in zehn Minuten in ihrem Büro sein würde und am Ende etwa 15 Minuten dauern würde. Ähm, also sagte sie, sie sei dort ziemlich gelangweilt. Aber dann wieder, was sie ihren Bogen bekommen hat, aber sie mag es wirklich 0, aber es ist wirklich gut. Sie war hier sehr aufgeregt. So können Sie diese Methode also während einer Benutzer-Testsitzung oder nach einer Anwendung in freier Wildbahn verwenden . Ähm, ich werde dir was zeigen, was du sehen kannst, dass das benutzt wird. Also gehe ich hier auf meine Website und zeige Ihnen eine Fallstudie, die ich erstellt habe, oder Bewertungen. Dies wird diese Website sicherstellen. Ich gehe auf meine Arbeitsseite. Klicken Sie auf die ANOVA-Fallstudie. Und wir werden zu viel in die ANOVA-Anwendung eingehen. Dass Sie hier nach unten scrollen können und Sie sehen, wann wir einen Workflow im Anwendungszweifel bis hin zu einem SUV-Herd getestet oder getestet haben. Dies ist ein Gerät, das in Ihrer Küche kocht und tritt. Du benutzt Wasser, wie du hier sehen kannst. Und das ist die Reise, die Menschen durchmachen. Sie gehen auf den Startbildschirm, sie führen eine Reihe von Aktivitäten aus. Sie gehen in das Gerät und fangen tatsächlich an, Essen zuzubereiten und ihr Essen zu kochen. Und wir wollten nur wissen, wie sie sich während dieser Reise gefühlt haben. Sie können also sehen, wie ich es auch in Fallstudien verwendet habe. Okay, Sie haben also diese Datei hier an das Video angehängt, und Sie können sie gerne herunterladen und zu Ihrem Vorteil verwenden. Und da hast du es. So erstellt man eine Customer Journey Map. Cool wie immer, danke fürs Anschauen und Bleiben für das nächste Video, das Vorlagen und Frameworks skizziert. Danke nochmal. Tschüss. 7. Skizze und Sketching: Alles klar, Willkommen beim nächsten Video und wie man eine UX-Fallstudie und das Benutzererlebnisdesign eins zu eins entwirft. Also haben wir bisher viel Boden abgedeckt. Wir haben gelernt, wie man Ziele setzt, wie man eine Person erstellt, wie man ein Benutzerinterview-Skript erstellt, Best Practices bei der Durchführung von Recherchen, wie man Forschungsergebnisse synthetisiert, wie man ein Problem schreibt Aussage. Im letzten Video haben wir beschrieben, wie man eine Customer Journey Map erstellt. Und jetzt schauen wir uns das Skizzieren von Vorlagen und Frameworks an. An dieser Stelle, in der wir recherchiert haben, wir ein Problem validiert, wir haben ein wenig verstanden, wie diese Lösung und neigt dazu, das Problem zu lösen. Und jetzt werden wir Ideen und Konzepte zur Lösung dieses Problems skizzieren. Also gehe ich rüber zur UX Honey.com. Ich gehe zu X3. Dies ist die fortgeschrittene Klasse, die ich an der Universität unterrichte. Und scrollen Sie nach unten, hier sind alle Inhalte, die wir für den Kurs haben. Und ich gehe hier gelb auf die Skizzierkonzepte und Frameworks ein. Und wenn ich diesen Knopf drücke und du siehst, dass ich ein bisschen hilfreiche Informationen habe. Wenn Sie als Gruppe skizzieren. Denken Sie daran, dass es darum geht, Spaß zu haben. Es geht darum, wilde Ideen zu fördern. Wir beurteilen uns nicht gegenseitig. Wir unterscheiden uns vom Urteil. Wir möchten auf den Ideen des anderen aufbauen. Wir werden uns weiterhin auf das Thema konzentrieren. Wir möchten visuell und konzeptionell sein, wenn wir über die Arbeit des anderen sprechen oder eine Kritik machen oder Arbeit teilen. Eine Konversation nach dem anderen ist am besten und gehen Sie auf Quantität. Es geht darum, sehr breit zu werden und zu versuchen, so viele Ideen wie möglich zu bekommen. Okay, lassen Sie mich also über das erste Konzept sprechen, das wir haben, oder über das Skizzier-Framework und die Vorlage, die wir haben, die als Value Prompt bezeichnet wird. Und was Sie hier haben, ist, dass Sie hier eine Person in den Problembereich zeichnen. Und daneben hast du hier eine Person im Lösungsraum. Sieht also irgendwie so aus. Ich habe das auch in einem Dokument hier an die Datei angehängt ist, das ich hier in einer Sekunde durchgehen und mit Ihnen überprüfen werde. Ich gebe Ihnen die Gründe, warum sie diese Vorlagen verwenden und wofür sie gut sind. Die Wert-Requisite ist also eine schnelle Möglichkeit, Ihre Persona hier links im Problembereich zu platzieren . Und dann mache die vorgeschlagene konzeptionelle Lösung hier auf der rechten Seite. Und die vorgeschlagene Lösung sollte konzeptionell sein und keine UI-Workflows enthalten. Hier geht es also darum, so viele Konzepte wie möglich zu generieren. Wenn wir also zu dem Dokument gehen, das sich hier in der Datei befindet, können Sie sehen, dass ich das gleiche Bobo Szenario und dieselbe Anwendung verwenden werde das gleiche Bobo Szenario und , die wir in allen Videos getragen haben. Und ich habe hier die Vorlage für die Value Requisite hier. Also nochmal haben wir die Person im Problembereich auf der linken Seite, und wir haben den Lösungsraum hier auf der rechten Seite. Und ich gebe Ihnen das Beispiel, das sich auf die Bobo T-Erfahrung bezieht, die wir zuvor dargelegt haben. Okay, also hier haben wir Franny Foodie. Dies ist die Person, die wir gerade in ihrem Problembereich anvisieren , wenn Sie sich daran erinnern, dass das Problem für irgendjemanden bei der Arbeit war, ich wollte einen Mobitz II bekommen, aber ich hatte zu viel Arbeit, um das Büro zu verlassen und ein Boot mit t zu schnappen. sie ist an ihrem Computer und deine Kabine Scout-Arbeit. Und Sie möchten hier eine Gedankenblase oder eine Lautsprecherblase verwenden, um das Problem zu klären. Also hier ist das Problem so wie sie war, sie hatte eine Verbeugung, aber nicht dort, wo sie das Büro nicht verlassen kann. Wenn Sie also die Persona oder die Lösung hier auf der rechten Seite machen, beginnen Sie es am besten. Und genau mit dem Konzeptnamen. Sie können hier mit jetzt geöffnet sehen. Und dann schreibe, was der Benutzer mit diesem Konzept machen kann. C kann hier unten sehen. Unten ist, dass Franny Omega t auf Abruf bestellen kann. So können Sie hier sehen, dass sie jetzt ein Telefon in der Hand hat und eine Karte sehen kann, und sie kann sehen, wie der Bobo Tee zu ihrem Standort kommt. Der Konzeptname, den wir geschrieben haben, hieß jetzt Bobo. Und was kann er jetzt mit Bobo machen? Sie kann Mobilität auf Abruf bestellen. Ziemlich einfaches Zeug. Was Sie also tun können, ist, dass Sie dieses Dokument so ausdrucken können, wie ich es hier habe. Du kannst es als Gruppensitzung machen und es deinen Teamkollegen geben. Oder Sie können diese Skizze einfach so viele Konzepte verwenden , wie Sie sich vorstellen können, und wählen Sie dann Ihre Lieblingsskizze aus. Wenn Sie dies als Gruppeneinstellung tun, können Sie alle Skizzen haben, viele Konzepte wie möglich, an die Wand stellen und dann die Konzepte gemeinsam überprüfen. Und jeder kann drei Stimmen abgeben und er kann über seine Lieblingskonzepte abstimmen. Und dann haben Sie hoffentlich einen klaren Gewinner, mit dem Sie vorankommen können. Okay, schauen wir uns ein anderes Skizzier-Framework in Vorlage an. Eine, die ein bisschen mehr Benutzeroberflächendesign beinhaltet. Diese nennt man also Flora, und dies ist eine schnelle Möglichkeit, verschiedene Bildschirmdesigns oder Szenarien zu skizzieren, ohne sich in das Unkraut zu verfangen, sind die Details über die Lösung oder Alice-Lösung funktionieren. Sie können die Details hier durchsprechen, wenn Sie sie nicht anpassen können. Was wir also haben, ist, dass wir die Skizze hier haben , wo es vier Quadranten gibt und jeder Quadrant hier, oben links ist der Anfang. So stellen Sie den Benutzer und die Kontexte mit dem Ziel im Hinterkopf. Sie haben die Benutzeraktion hier auf der rechten Seite. Sie haben hier unten links eine andere Benutzeraktion. Und dann hast du das Ergebnis, wenn das Ziel erreicht ist. Schauen wir uns das also in den gleichen Kontexten wie die Bobo t On-Demand-Anwendung an. Hier habe ich das Dokument, das als Vier bezeichnet wird. Es ist an das Video angehängt, das Sie haben. Sie können es herunterladen, Sie können es ausdrucken. Und Sie können die gleiche Art von Skizzieren machen, die wir für die Wertestütze gemacht haben. Ich bin, ich zeige Ihnen das Beispiel, wie Sie das im Bokeh-T-Szenario verwenden können. Du siehst also hier, dass wir Franny Foodie haben. Sie ist wieder im Büro. Und ihr Ziel hier ist, dass sie sich wünscht, sie hätte gerade ein Over T, aber sie ist nach außen, kann das Büro nicht verlassen. Benutzeraktion eins ist also, Sie ein wenig Benutzeroberfläche sehen können. Jetzt wähle ich sowohl bei der gewünschten Benutzeraktion aus, als auch dann Benutzeraktionen Sie sehen können, wie sie in Echtzeit sehen kann, wann Bobo bei der Lieferung ankommt. Also hat sie eine kleine Karte. Das kannst du im Laufe der Zeit hier sehen. Und dann sieht man, dass das Ziel das Ergebnis erreicht. Sie befindet sich tatsächlich im selben Arbeitsbereich, den sie begonnen hat, und sie arbeitet immer noch. Aber Flüssigkeiten in ihrer Hand? Ja, das ist es. Sie ist niedrig, aber T und jetzt ist sie glücklich. So ziemlich einfaches Zeug für das Skizzieren hier. Und wieder finden Sie diese beiden an das Video angehängten Dateien. Nehmen wir an, mach weiter und benutze sie, benutze sie in Gruppen. Wenn Sie die Vier in der Gruppeneinstellung machen, machen Sie dasselbe, worüber wir zuvor gesprochen haben. Lassen Sie das alle ausdrucken, skizzieren Sie sie. Ich lege sie an eine Wand. Stimmen Sie über die beste ab. Hoffentlich gibt es einen Gewinner und Sie können in diese Richtung voranschreiten. Okay, ziemlich einfach. Da haben Sie es nicht getan, es gibt Skizziervorlagen und Frameworks, mit denen Sie die Lösung skizzieren können. Und als nächstes lernen wir, wie man ein Wireframe-Design erstellt und wie man aus diesem Drahtgitter einen anklickbaren Prototyp erstellt. So können Sie ausgehen und Benutzertests durchführen. Okay, wie immer, danke fürs Anschauen und wir sehen uns im nächsten Video. Tschüss. 8. Ein Wireframe mit Adobe XD erstellen: In Ordnung, willkommen zurück zur nächsten Videoserie zur Erstellung einer Fallstudie zum Erstellen einer UX-Design-Fallstudie und das Design der Benutzererfahrung wird nicht funktionieren. Bisher haben wir eine ganze Reihe von Videos darüber behandelt, wie man Ziele setzt, Personas erstellt, ein Skript erstellt, Best Practices bei der Recherche an einer synthetisierten Problemaussage für Forschungsergebnisse, wie man ein Customer Journey Map Wir haben uns das letzte Video angeschaut, wir haben Skizzierungen und Vorlagen und Frameworks für Konzepte gemacht. Und jetzt nehmen wir diese Konzepte an und gehen zu einem Wireframe, der entehrt wird. Lasst uns in was für Wireframes eingehen. Ein Wireframe ist ein Low-Fidelity-Design, das darauf abzielt, den Inhalt, die Benutzerfreundlichkeit und den Workflow einer Software zu validieren . Es ist normalerweise Graustufen in Farbe. Und der Grund dafür ist, dass Benutzer auf den Inhalt und den Workflow reagieren, nicht auf Farben und Illustrationen, Glocken und Geschäft. Es macht es Benutzern leicht, Ihnen ehrliches Feedback zu geben , da es nicht so aussieht, als hätten Sie viel Zeit in es investiert. Es hat nicht zu viel Zeit und all die Schnickschnack , die darin investiert wurden, weil Sie sich vielleicht irren. Warum also viel Politur und Illustrationen investieren und gute Arbeit, wenn Sie wissen, dass Sie etwas sein werden. Also ist es wirklich noch nicht validiert. Sobald es validiert ist, können Sie alle Schnickschnack hinzufügen und es ist auch sehr einfach, zu iterieren, wenn das Design wenig Wiedergabetreue aufweist. Okay, schauen wir uns hier einige Beispiele was ein gutes Drahtgitter und kein gutes Drahtgitter ausmacht. Und ich rede ein wenig über die Spalte links und die Spalte rechts. Und dann zeige ich Ihnen auch Beispiele dafür, was ein gutes ausmacht. Okay? Ein gutes Drahtgitter hat also genau das richtige Maß an Treue. Und nebenbei sieht es nicht wie ein Endprodukt aus. Fange an zu falten. Ein gutes Drahtgitter hat keine Staatskopie, was wir Loren Ipsum-Gesetz nennen. So gut benutzt gefälschte Kopie. Ein gutes Drahtmodell verwendet echte Fotos und schnelle Icons, wir hinterlassen es. Nicht gut. Man verwendet nur graue Quadrate, die auf Natrium hinweisen. Gutes Drahtmodell hebt den Inhalt hervor. Nicht so gutes Drahtmodell sieht schlampig und nicht strukturiert aus. Ein gutes Drahtmodell validiert den Workflow und das Interaktionsmodell. Es ist nicht so gut Wireframe ist alles eins. Und sie verwenden keine Komponenten des Modells wieder. Und das Material hat eine gute Platzierung für den Benutzerstandort. Das ist Paginierung, wir nennen es. Der Benutzer hat keine Ahnung wo er ist. Keine Ahnung von Standort. Verwendet gute Designmuster und Geräte. Geräteparadigmen sind verschiedene Interaktionen, die für verschiedene Geräte erstellt werden. So kann die Taille als Software im Web wirken. Aufgrund des kleineren kann es sich auf Mobilgeräten anders verhalten. Das nennen wir also Geräteparadigma. Und nicht so gut Man hat Interaktionsdetails, die nicht auf Logik stoßen. Es könnte drahtgedrahtet werden. Es geht ins Detail und validiert die Mikrointeraktionen. Und auch gut genauso hoch und berücksichtigt nicht die Details wie Staaten. Okay, schauen wir uns jetzt ein paar Beispiele an. Was macht gutes Beispiel visuell und nicht gut? Hier auf der linken Seite hat ein gutes Beispiel einen klaren Workflow von Standort und Inhalt und hebt den Inhalt hervor, damit Sie sehen können, wo die Benutzer hier aktiv sind. Es sieht die Reise, auf die ich gehen werde. Als gutes Highlight, Inhalte hervorheben und diejenigen betrachten, die richtig sind. Ich weiß nicht, was zur Hölle ich mir ansehe, sieh dir alle Kisten an. Die Vierkantstäbe sind verwirrend wie was sind diese Quadrate? Schlangen es durch? Normalerweise zeichnen wir dies als Designer als schnelle Skizze, um zu zeigen, dass es sich um eine Limonade handelt, die aber keinen Inhalt vermittelt. Sie können diese kleinen grauen Quadrate sehen, diese kleinen Linien hier. Das ist eine Darstellung von Kaffee. Aber es ist nicht, ich weiß nicht, jemand Benutzer, wenn ich es mir ansehe, sieht vielleicht nicht so aus wie ich. Es sieht aus wie graue Schachteln. Nun, ich kann nicht zum nächsten gehen. Exponent ist ein gutes Beispiel dafür, das Repetitive zu mischen und gleichzeitig Soto-Kontexte zu geben. Und sie haben viele Fotos, die sie dir zeigen können. Hey, hier sind ein paar echte Fotos, die wir benutzen werden. Und dann verwenden sie den gleichen Soto in Zukunft wieder. Es zeigt also Wiederholungen. Aber es sind nicht nur alle Blink-Fotos, die dir hier ein paar echte Fotos zeigen. Ich denke, es ist nett. Als nächstes ist der Inhalt unklar. Sieh dir die ganze Wiederholung hier an. Ich weiß nicht, was ich mich auf dem Schoß umsehe. Ich weiß, dass ich mir hier Fotos anschaue. Es sieht aus wie Boxen wieder mit Linie. Sie sind also nicht unverwechselbar. Noch eins. Es geht ins Detail und die Micro Interactions ein. Sie können sehen, dass ich hier überprüft habe, was wir Akkordeon nennen , und viele Informationen in nur einer dieser kleinen Koordinaten, mit dem ich interagieren kann. Der auf der rechten Seite wird nicht in unseren Details angezeigt. Auch hier weiß ich nicht, was der letzte ist. Eine gute Verwendung von Ausrichtung, Gitter und negativem Raum. Siehst du hier. Es ist eine Ausrichtung passiert. Entweder einer, es gibt keine gute Nutzung von negativem Raum, alles ist gefüllt und die Schwiegersohn-Symmetrie dazu. Es ist alles da drüben. Es sieht aus wie eine Linie zu Stützenrastern. Und es ist einfach nicht wirklich gut zusammengestellt. Okay? Bevor wir also in das Drahtgitter springen, zeige ich Ihnen die Skizze, die wir im letzten Video gemacht haben. Wenn Sie sich also daran erinnern, Ihre App und es ist ein On-Demand-Service, der es dieser Person ermöglicht , sie über eine mobile Anwendung zu erhalten. Öffnen Sie durch Schütteln die App, Sie können über zwei Geschmacksrichtungen sehen, Sie können einen auswählen. Sie kann den Kauf tätigen und sehen, dass er in Echtzeit an sie geliefert wird. Und jetzt ist sie wieder bei der Arbeit. Sie hat gesprochen. Sie ist also aufgeregt. Die Software, die wir verwenden werden, um dies zu erstellen, heißt Adobe XD. Es sieht also so aus. Du kannst es herunterladen. Sie haben drei Prüfungen dazu. Es ist ein wirklich einfaches und einfaches Tool zum Erstellen von Bildschirmen. Und es baute auch Prototypen aus, die wir im nächsten Video einbeziehen werden. Aber zuerst zeige ich Ihnen, wie Sie hier ein paar Bildschirme erstellen, einige Symbole hinzufügen, wie Sie es erstellen und Ihnen einfach einen Überblick über das Problem geben. Das erste, was Sie tun können, ist, dass Sie eine neue Datei erstellen können, indem Sie einfach Command new ausführen. Wenn Sie auf einer Tastatur oder einem PC sind, ist die Steuerung für max Befehl und Steuerung und verschiedene Geräte, die ich verwenden kann. Ich kann ein iPhone 6, 7, 8 benutzen. Ich habe ein iPad hier. Ich kann es gut machen und ich kann auch eine benutzerdefinierte Größe machen. Wenn Sie nicht wissen, wie man das benutzt, habe ich bereits Tutorials. Schlaf. Die Wissenschaft deutet darauf hin. Wenn Sie dieses Tool noch nicht benutzt haben, um sich einige Tutorials anzusehen, ist es wirklich einfach zu bedienen. So können Sie hier sehen, dass ich das Drahtmodell für die Anwendung bereits aufgebaut habe. Und lass es mich dir ein schnelles Video dafür zeigen. Okay, also mein Vortrag, während wir den ganzen Workflow hier durchlaufen, und ich werde dir beibringen, wie man einen Bildschirm erstellt. So ziemlich wir loggen uns ein. Wir sehen den ersten Bildschirm, den App-Login für mein E-Mail-Passwort. Stan wird sich anmelden. Sie konnten hier alle Bogota-Auswahlen sehen. Ich kann scrollen und bemerken, dass die untere Tableiste fest bleibt, was bedeutet, dass sie sich nicht unten bewegt. Ich drücke Add. Jetzt kann ich etwas komplexer werden. Ich kann das Dropdown-Menü öffnen halbsüße Bobo auswählen. Ich klicke auf den großen Tippen, einen Button oben und füge eine Tab-Leiste hinzu und unten in meinem Warenkorb, C1, ich kann hier quantitieren. Ich würde gerne als Nächstes gehen. Angaben zur Adresse. Und sie haben jetzt mein globales Team bei Lieferung und San Francisco gesehen. Und es wird mich fressen und das werde ich schließen. Also kommen wir im nächsten Video auf den Prototyp ein. Du siehst hier, hier sind alle Bildschirme, die dazu geführt haben, dass sie fest ziehen, locker sind und rausgehen und testen. Okay, also mache ich ein Kommando minus zum Verkleinern und einen Befehl plus zum Vergrößern. Wie ein Anemometer bin ich auf einem Mac. Ich kann hier auch das Zoom-Symbol verwenden, um hineinzuzoomen. Und wenn ich Option oder Alt auf einem PC halte, kann ich auch herauszoomen. Die nächsten grundlegenden Funktionalitäten, wenn ich die Leertaste halte, können Sie sehen, dass ich die Hand bekomme. Was ich also tun kann, ist, dass ich einfach navigieren kann, indem ich Command Plus Command Minus mache. Das sind grundlegende Navigationstools, die Sie verwenden. Ja. Okay, lasst uns weitermachen und beginnen mit dem Erstellen eines neuen Bildschirms. Also drücke ich diesen Knopf hier drüben. Es ist nur eine Art Board. Und ich mache hier eine Kunsttafel und schaue zu, wenn ich diesen Knopf drücke, es weiß bereits, dass ich ein iPhone mit sechs Seiten haben will, also ahmt es die gleiche Größe nach wie ich es bereits habe. Hört sich gut an. Ich kann diese Zeichenflächen kopieren, indem Option klicke und halte und klicke und ziehe. Und ich sehe hier, dass ich sie alle kopiert habe. Fangen wir damit an, hier eine ziemlich einfache Seite zu erstellen. Dies ist der Ladebildschirm. Was ist mit jemandem? Side-by-Side hier. So siehst du hier auf der Kunsttafel, dass ich es mit einer anderen Farbe füllen kann, die ich auswählen kann. Aber wie Sie in diesem Beispiel sehen, haben wir Black Cisco Flip Flop. Ziemlich einfach peasy. Als Nächstes möchte ich hier einen Typ haben, also kopiere ich diesen Befehl C und hole mir das Typ-Tool hier. Okay? Sie haben also das Typ-Werkzeug, Geben Sie das Feld ein. Ich nehme den Typ, den ich gerade hatte. Man sieht hier, dass es nicht so geschmeckt hat wie hier drüben. Das ist in Ordnung. Also scanne ich hier nach rechts, damit du es sehen kannst. Und was Sie hier finden werden, ist, dass ich die Werkzeuge habe, die ich für das Objekt brauche, auf dem ich bin, den Typ Appetit aufgeladen habe. Ich klicke und hole mir diesen ganzen Typ. Und du siehst hier ich habe diese Größe. Also lasst es uns ein bisschen aufstoßen. Aber ja, es ist schwer zu lesen. Das nennen wir den Raum dazwischen zu lassen. Hier haben wir also die Möglichkeit, es durch doppelten Zeilenabstand zu lassen. Auswahl ist ein Begriff, den wir im Trent Zeilenabstand verwenden , ist ein Begriff, den wir verwenden, wenn alle genau so aussehen. Es bedeutet nur den Abstand zwischen diesen Zeilen. Wir können dieses Beispiel hier sehen. Sie haben ein bisschen kleineren Text. Also bringe ich das ein bisschen runter. Lass uns ihm eine Formel geben. Lassen Sie uns das etwa 20 an alle Pixel geben. Ich verstehe das. Okay? Hier haben wir also die Absatzverluste. Also kann ich den zentralen Absatz machen, ich kann das tun, was wir als Schrägstrich bezeichnen, richtig zentriert. Das ist weniger geschlagen. Cisco spülen, bündig, links, dünner. Ich möchte die Farbe dieses Textes ändern. Sie können sehen, dass ich wieder zum Direktauswahl-Tool zurückkehren kann. Hier. Ich kann auch Escape drücken, um dieses Tool zu bekommen. Und ich kann die Textfarbe in jede Farbe ändern. Aber lass es uns leicht machen. Ziemlich einfach. Also gibt es dein Textwerkzeug. Wir haben ein bisschen gelernt, wie man verschiedene Größen kreiert. Was der Schriftzug im Zeilenabstand war, wie kann man darauf zugreifen. Und ein bisschen Absatzeinstellungen, also wenig Absatz zentriert. Lassen Sie uns diesen Absatz kopieren. Lass uns das Laden machen. Es ist also ein bisschen kleiner hier. Also sagen wir Pixel. Wir wollen es. Also sieh, wo es regelmäßig steht. alte Schule. Es sieht gut aus. Also schwenke ich sofort zu Illustrator. Dies ist ein Buchstabe W2. Und Sie können sehen, dass ich alle meine Vermögenswerte bereits hier habe, was wir Vektoren nennen. Eins. Vektorformat bedeutet, dass ich auf die Knie zoomen und sehen kann, wie es niemals pixelig wird. Ich habe dieses Kartenbild auf der linken Seite. Ich zoome die Karte pixelig heran. So nennen wir es also Vektor, sein eigentliches Kunstwerk. Und wenn ich darauf klicke, siehst du diese kleinen Zeilen. Ich kann dieses Kunstwerk machen. Was ich hier habe, habe ich eine Über-T-Illustration. Ich kopiere es von Illustrator, gehe direkt zu XD. Und ich bin ein Ort, an dem er es jetzt nicht sehen kann, weil es schwarz ist. zusammengesunken und sieh es hier drüben. Und ich kann die Farbe ändern. Ich kann das auf und ab sprengen. Ich kann es in eine andere Größe machen. Und gerade jetzt ist es Repräsentativität, weiße Psyche hier drüben zur Füllung. Und ich kann hier Weiß machen. Nimmt diesen Bildschirm auf. Lass es uns ein bisschen größer machen. Gerade 16. So funktioniert das also. Ich kann diese Sekunde machen, ich kann andere Farben hinzufügen, wenn ich es machen wollte. Alles klar, jetzt lasst es uns weiß lassen. Zoomen Sie also ein bisschen heraus. Okay, also als Nächstes zeige ich Ihnen, wie Sie die Anmeldeseite erstellen. Und wenn ich diesen Button mache, zeige ich Ihnen, wie Sie ein Symbol erstellen, das wirklich, sehr wichtig ist, um es zu lernen. Und ein Symbol ist ein UI-Element, das Sie über eine Reihe von Bildschirmen hinweg können. Sie können also hier sehen, dass ich den Anmelde-Button habe. Auf diesem Anmeldebildschirm ist es ein Symbol. Das bedeutet, dass ich auch einen Anmelde-Button habe, den gleichen Button auch auf diesem Bildschirm. Aber schau mal, wenn es ein Symbol ist, kann ich die Farbe dieses Hintergrunds ändern. Sagen wir zwei. Lassen Sie uns sehen, wie es für alle Anmelde-Flow ist. Das ist also das, was ein Symbol ist. Dies bedeutet, dass diese Komponente bei vielen Ihrer Wireframe-Designs möglich ist. Und du kannst es mit nur einem ändern. Und es wird sich in allen anderen Bereichen sowie oben an der Seite ändern. Lass mich dir das noch einmal zeigen. Wir machen einfach diesen Bildschirm. Ich kopiere diese Bildschirmoption, klicke und ziehe. Also habe ich die gleiche Bildschirmgröße. Ich kann auch zum Artboard Tool kommen. Einmal in dieser Schule. Was hat diesen Button gebaut, der Anmelde-Button. Und lass es uns hier in ein Quadrat schaffen. Bestellen Sie mir auch mitzukommen. Manchmal müssen Sie dieses Video möglicherweise pausieren. Sie lassen den Knopf zurückkommen, während sie ein Video abspielen. Das ist auch in Ordnung. Es sind Hormone. Nun, ich werde das Textwerkzeug greifen, das den Text hier einschränkt. Wir nennen es hier einen schwachen Link zum Werkzeugauswahl-Tool. Angenommen, ich möchte diesen Anmelde-Button an den Anfang dieses Textes bringen, wie er jetzt ist. Ich kann das auf verschiedene Arten arrangieren. Wenn Sie also mit der rechten Maustaste klicken und Sie sehen, wie das Subtile das Scharfe bringt, bringen Sie das Wort des Senats. So können Sie diese Objekte in unterschiedlicher Reihenfolge organisieren. Einige nehmen den Knopf und schicken ihn langsam zurück. Also der Anmelde-Button, den wir haben. Es besteht also aus einem Rechteck und es ist ausgewählt. Sie können auch Kreise erstellen, wenn Sie möchten. Sehen Sie, wie ich bei der Anmeldung voranschreiten werde, und stellen Sie sicher, dass dieser Text die gleiche Breite wie das Vectoring hat. Es ist eine gute Vorgehensweise. Und alles ist ziemlich gut. Jetzt klicke ich auf den Text aller Anmeldeschaltflächen, das dahinter liegende Rechteck. Ich komme hier rüber in den Symbolbereich. Und ich drücke hier das kleine Plus und das blaue Symbol, also ist es Ruhe. Die neue Anmeldung. Nennen Sie diese Dinge. Und hier ist mein Gemein, indem ich diesen und abgenutzten Bereich ändern kann. Und es ändert sich in allen Instanzen wie, sagen wir, ich kopiere diese Schaltfläche wird gestartet. Apple hier drüben, kleine Änderungen hier. Und ich kann den Text ändern, was wirklich großartig ist. Mal sehen. Ich kann dies sagen, die Zurück-Schaltfläche, Schaltfläche „ Abbrechen“ und das Lehrbuch, das Master-Symbol. Also kann ich hier verschiedene Instanzen haben. Sagen wir dieses spezifische Login. Sag das hier. Sag, das ist, sagen wir das hier. Sag das und schau dir das Video an. Okay, jetzt muss ich hier tun, dass ich die Füllung dieses Hintergrundrechtecks in jede gewünschte Farbe ändern kann , ich will und beobachte, was mit dem ganzen Rest passiert. Sie ändern sich. Wirklich süß. Spart Ihnen viel Zeit, wenn Sie Änderungen an Ihrer Anwendung vornehmen und Symbole erstellen müssen. Es ist ein wirklich, sehr wichtiger Teil unserer Arbeit. Da das gesagt wird, habe ich bereits einige Formularsymbole, die ich hier erstellt habe. Also lasst uns vorgehen, ich bin Alice, hol dir einfach etwas von diesem Layout. Probieren Sie schwarm-aktives Gesetz. Es ist, was Sie tun, ist, dass Sie diese Lunge hier klicken und ziehen, dieses eine schwarze Standardsymbol auf die Leinwand in den Workspace. Und jetzt kann ich sehen, dass ich das habe. Lassen Sie uns dieses Symbol kopieren. Option. Umschalttaste, klicken und ziehen. Lass uns Nachname machen. Aber wir hatten auch E-Mail und Passwort, also kopiere ich jetzt beide. Lassen Sie uns den Abstand sicher sein. Sieh etwas ländliches. Gehe zurück zu meiner Illustrator-Datei. Jetzt habe ich dieses Logo irgendwo wie hier. Nun Oktette D OPEX d Fall, diese Abbildung. Okay, Großartig. Das sieht also ziemlich gut aus. Hast du hier ein Exemplar und logge dich hier ein? Ich weiß schon, wie man Text macht. So können Sie diese erstellen, wenn Sie lernen möchten, wie man eine Limonade mitbringt. Dies ist nur ein Gedanke über diese Seite hier. Was ich diese Seite kopieren werde. Und ich war auch nicht aktiv, was ist, wenn ich auch als Symbol in dieses Formular klicke. Also werde ich es tun, dass ich diese drei löschen werde. Aktiv. Wenn Sie hier tatsächlich auf dieses Formular klicken oder tippen, ich sicher, dass es in den Staaten aufgestellt ist, und gehe tatsächlich zurück. Ich möchte sicherstellen, dass alle meine Formulare so sind. Also behalte ich die hier. Jetzt ziehe ich dieses Formular aktiv auf die Leinwand, der Aufstellung, die Zeilen hier, ich werde es kopieren. Befehl C, dieser FirstName, fremd, drücken Sie Befehl, Victor, und das fügen Sie direkt an Ort und Stelle ein. Also kopiere ich denselben. Lasst uns diesen Donnerstag sicher machen. Ich bin eine Kopie dieses Formulars bis zum letzten Zustand, und der Befehl löscht das Letzte. Ich möchte Os Ux. Das Gleiche. Ich gehe zur E-Mail, lösche diese und dann sehen sie Dinge, die dieses Haus rauchen. Und das wird das Gleiche tun. Oh, es wurde gelöscht. Die E-Mail der Chips dies an das Passwort. Ich mache nur eine kleine Zahl, 8, c. Also gibt es aktive Versionen dieses Formulars, also brauchen wir die Tastatur hier. Wenn du also zu meinem Ordner gehst, alle Bilder, ist es so. Ich kann also nur Agonisten machen. Jedes Bild, das Sie möchten, ziehen Sie es einfach auf die Ausgabe. Ich kann Prototypen erstellen, was wir im nächsten Video machen werden, Bildschirme zusammen. Und es wird sich anfühlen, als würde ich tatsächlich dieses Formfeld anschließen, das Entzündungen bekämpft. Das ist für alles großartige Tool, mit dem ich testen kann, wie die Slums Zeit und das Wireframing an Leuten testen, die es in das Formular eingeben. Was ist eine allgemeine Benutzerfreundlichkeit? Standardmäßig tun wir das alle? Du testest nur diesen Inhalt aus, wie jemand hier sagen könnte, ich bin es gewohnt, ihr Sperma das zu fühlen. Nehmen wir an, wir geben Ihren geheimen Passwort-Slot ein. Okay, das nächste, was ich dir zeigen möchte, ist etwas mehr Komplexität. Hier wählen Sie beides bei t. Ich zeige Ihnen, wie das aussieht. Also möchte ich darauf hinweisen, dass ich gerade den Plus-Plus den Play-Button hier oben rechts gedrückt habe. Ich kann das sehen und wie ich es auf meinem Handy machen würde. Wenn ich also über die Auswahl scrolle, aber schau, diese Tab-Markierung stinkt sie, klebt an der Flasche, was bedeutet, dass sie nicht verliert. Sehen Sie, wie Gruppen. Also zeige ich Ihnen, wie Sie diesen Tippen erstellen und wie Sie ihn unten beheben und Ihr Design fortsetzen können. Auf diese Weise spielen wir und Sie können durch verschiedene Optionen scrollen , die einige mobiler sind. Also lasst uns einfach weitermachen und mit einem Solid beginnen. Wir kopieren das hier. Ich wähle Modell B aus. Lass uns das Rechteck erstellen. Normalerweise handelt es sich überhaupt um 10025072 Sätze. Ich werde ein bisschen betrügen. Wir sehen uns, als ich getestet habe, dass es zu klein war. Lass es uns schwarz machen. Alles klar, lasst uns zu Illustrator gehen und lasst uns meine Icons schnappen und den Top-Ball machen. Ich gebe Ihnen eine Website, auf der Sie auf eine Website gehen können, die als Null-Objekt bezeichnet wird. Wir überprüfen das. Sie können das gewünschte Symbol haben. Sagen wir mal, du willst wie einen Donut. Klicke auf diesen Donut. Ich kann dieses Icon sofort bekommen Es ist kostenlos. Ich kann den grundlegenden Download sagen. Lade es hier herunter. Während es jetzt heruntergeladen wird. Schöpfen und ziehen Sie dies in meine Illustrator-Datei und checken Sie es aus. Es gibt meinen Vektor, elektrische Impulse heraus. Und ich kann mit dem Islam auseinandersetzen und dieses Projekt sowie top einfügen. Machen Sie weiter und erstellen Sie ein Konto. Und gehen wir zurück zu Illustrator. Ich fahre hier weiter. Gehen wir zurück zu XD. Schwarze Slums gehen zum Y. Für unser Profil. Es ist nur klein n. Das sind die Bildschirme. Alles klar, also haben wir drei Icons, sie haben alle die gleiche Farbe. Wir haben das, was wir als Standardstatus und diesen Staat bezeichnen. Der aktive Status ist also eine Darstellung dessen, wo ich gerade bin. Es ist mein Standort. Also jetzt nicht bis zur Akte und nicht im Herzen. Was ich also machen will, ist, dass ich sie zu 60 Prozent sicheren Leuten hierher bringen möchte. Lass uns weitermachen und auch 1650 icon sagen. Und wir halten das bei 0 Prozent. Nett. Tab-Leiste unten. Lass uns weitermachen und hier grafieren, Desktop hier. Das war's für diesen Herbst. Bisher. Also kann ich ein anderes Rechteck erstellen, Verbindung herstellen und diesen schwarzen Text erstellen. Also kopiere ich diesen Text einfach hier, da ich keine Schulden machen kann. Ich gebe diesen Knopf. Erstellen Sie eine Schaltfläche. Wenn du also einen neuen Knopf machst, lass uns einfach weitermachen und sagen, dass ich das schaffe. Aber es ist Best Practice, wenn ich es geschafft habe. Das Typwerkzeug, das blockiert, dass Sie es sehen. Es gibt Add. Ich werde beide mit Shift, Shift Philosophie greifen , um beide Bilder auszuwählen. Ich mache Command G, was eine Gruppe ist. Rechtsklick auch hier. Mach es zu einem Symbol. Plus markiere hier oben. Nun, jetzt habe ich mein Add-Button-Symbol, Symbol 17. Sagen wir, es sieht gut aus. Also lasst uns fortfahren und diesen Abschnitt kopieren. Hier. Zeig dir, was los ist und bringe es hier auf die nächste Ebene. Sieh mal, dass es glücklich ist, gut. Verlängern Sie diese Kunsttafel. Nun, diese Art Board ganz unten. Und hier ist eine wichtige Sache. Sehen Sie sich diese kleine gepunktete Linie hier an Das ist Darstellung dessen, was wir als versteckt bezeichnen würden, den der Ballon verkauft hat. Sie also unter dieser gepunkteten Linie liegen, wird der Benutzer nicht sehen, dass der Sprung nach unten scrollt, um diese Informationen zu sehen. So können Sie sehen, dass die Balken der Registerkarte Start fallen. Also klicke ich mit der rechten Maustaste darauf zurück. Und jetzt haben wir unsere Tab-Leiste. Also füge ich einen weiteren Abschnitt hinzu, für das dieses Bild etwas übrig ist. Unsere, ups, ich schnapp mir einfach die Artikel hier oben. Es heißt iPhone 6, 7, 8. Und dann bewege es etwas. Das sieht gut aus. Werfen wir einen Blick darauf und schauen uns an, was der Tab-Leiste passiert, die ich gesehen habe, und ich scrolle nach unten, wische nach unten und sehe, wie sich die Tableiste mit mir bewegt. Das wollen wir nicht. Wir wollen, dass das genau hier in der sogenannten festen Position bleibt. Es wird dir zeigen, wie das gerade geht. Sie möchten also diesen Tippball auswählen, alle darin enthaltenen Elemente. Manchmal lösche ich es einfach und mache einen Befehl Z. Geh zurück und sieh dir dieses kleine Kontrollkästchen hier an. Es heißt Arzt. Beim Scrollen oben rechts überprüfe ich, ob es in Position bleibt. Jetzt schauen wir uns an und drücken die Wiedergabetaste hier oben. Und jetzt schau was passiert. Lasst uns scrollen. Bar gibt an, dass es gut aussieht. Sie können das untere Bild sehen. Ich kann nicht ganz nach unten kommen, dass alle Auswahl um den Knopf zu drücken. Was wir also hier machen wollen, ist, dass du diese Kunst erweitern willst. Es ist, als würdest du dazu kommen. Es ist oft, dass du entwirfst und du kommst herein und siehst, wie das funktioniert. Aber wir kehren zu Ihren Notizen und Anpassungen zurück. So ziemlich das meiste Synthese-Tool. Und es gibt noch viel mehr, in das Sie hier einsteigen können. Aber ich wollte Ihnen wirklich das Symbol zeigen, wie man das Typwerkzeug benutzt, die Schaltflächen und Fotos hineinfügt, da der größte Teil unserer Benutzeroberfläche eine Kombination aus einem Quadrat oder Rechteck mit einer abgerundeten Kante ist , siehe hier die Wand, und das werden subtile Einblicke und Fotos und Typografie sein. Also die meisten Wireframes reden wir so. Sie können auch zu den Sinussymbolen Nomen Project 2 gehen. Wenn wir es also in Ihrem Design speichern möchten, können Sie hier mit dem Aufbau der Folie beginnen. Es ist im nächsten Video. Ich zeige dir zurück zu diesem Video. Zeigt dir, wie es zu einem Prototyp geht. Dies ist also etwas, das all diese Bildschirme zusammennäht , damit es sich wie eine echte Anwendung anfühlt. So kannst du ausgehen und es testen. Dieser Prototyp, den wir Usability-Tests nennen. Jetzt zeig dir das im nächsten Video. Also mach weiter und erstelle alle deine Bildschirme oder deine Designs. Ich sorge dafür, dass sie im vorherigen Abschnitt gut aussehen. Und dann gehe ich auf das Prototyping und die Übergänge ein, die du gerade hier im nächsten Video siehst. Also nochmal, wie immer, danke fürs Anschauen und hoffentlich sehe ich uns im nächsten Video. Tschüss. 9. Erstelle einen Clickable Prototyp mit Adobe XD: Willkommen beim nächsten Video zur Erstellung einer Fallstudie zum UX-Design und zum Eins-zu-Eins-Design der Benutzererfahrung. Okay, also haben wir hier viel Boden abgedeckt. Wir haben damit begonnen, Ziele zu setzen, und wir haben uns bemüht, ein Wireframe-Design zu erstellen. Und das haben wir im letzten Video behandelt. In diesem Video werde ich Ihnen also beibringen, wie Sie dieses Wireframe-Design aufnehmen und einen anklickbaren Prototyp mit den Designs erstellen, die Sie haben. So können Sie ausgehen und Benutzertests durchführen. Im letzten Video habe ich dir gezeigt, dass wir Adobe XD verwenden. Und dort haben wir all diese Bildschirmdesigns erstellt. Jetzt benutze ich Adobe XD. Wir werden einen anklickbaren Prototyp mit den Bildschirmen erstellen, die wir erstellt haben. Also hier ist was wir machen werden. Ich habe das Video hier und sie haben von Anfang an angefangen. Wir haben einen Ladebildschirm, bei dem Sie einen Anmeldebildschirm haben. Sie können die Tastatur sehen, weil Sie das E-Mail-Passwort erledigen müssen. Melden Sie sich an. Kann nach unten scrollen. Denken Sie daran, dass wir gelernt haben, wie man diese Tab-Leiste im letzten Video repariert, was bedeutet, dass ich weiter unten und unten klicke, da ist eine SlideUp-Waschmaschine vorhanden. Wie macht man das. Sie haben hier ein Dropdown-Menü. Wählen Sie halb süß aus. Ich drücke den großen Tapioka-Knopf. Füge das in den Einkaufswagen hinzu. Gehe zurück zur normalen Seite. Klicken Sie auf den Einkaufswagen. Wir haben die Rutsche nach oben. Lass es los, setze meine Adresse Intuit, um Weiter zu drücken. Irgendwie harte Informationen in diese gemachte Pressezahlung und LA LA Ich bekam ein niedriges T, das mir zugestellt wurde. Und zehn Minuten. Ja. Okay, cool. Also öffne ich XD und zeige dir hier ein paar Prototyping-Tricks und wie du eine Website erstellst. Es ist ziemlich einfach hier am nächsten Tag. Als erstes benötigen Sie hier zwei weitere Modi, diesen Entwurfsmodus und einen Prototyp-Modus. Und siehe die Informationen hier auf der rechten Seite, diese Leiste hier, ich verliere diesen Balken, wenn ich zum Prototyping gehe. So weiß ich, dass ich im Prototyp-Modus bin, damit du hier zwischen den beiden wechseln kannst. Schauen Sie sich den Design-Prototyp oben links an, Design-Prototyp. Okay, cool. Also lasst uns zurückgehen und den Designmodus entwerfen, ich hole mir ein neues Kunstbrett. Ich stelle diese Art Board unter das Anmeldeboard. Ich hole mir diesen Anmelde-Button hier. Ich habe ein Symbol 11 erstellt, ziehe es in diese Zeichenfläche Puma, nimm dieses Logo. Hier fangen wir hier an. Ich möchte Ihnen alle Funktionen zeigen, die Sie in Adobe XD ausführen können , wenn es um das Prototyping geht. Also kopiere ich diesen Bildschirm hier drüben. Ich lösche diese Elemente. Und ich hole mir ein Rechteck und mache einen schwarzen Bildschirm. Wie Sie hier sehen, ist es also einfach, damit wir wissen, mit welchem Bildschirm wir arbeiten. Ich werde auch ein x hier oben setzen. Und die Kopie des Bildschirms auch. Und ich mache hier einen Hinterpfeil. Und ich kopiere diesen Button auf diese Zeichenfläche. Ruf das als Nächstes hier an. Okay, jetzt haben wir genug, um mit dem Prototyping zu beginnen. Ich möchte Ihnen zeigen, bevor wir mit dem Prototyping der gesamten Anwendung der Bobo T-Erfahrung beginnen Prototyping der gesamten Anwendung der Bobo T-Erfahrung Ich möchte einfach in das Prototyping gehen und Ihnen die Möglichkeiten der Prototypenfunktion zeigen . Das Wichtigste zuerst, ich bin hier vom Design gegangen und jetzt bin ich im Prototyp drüber. Also klicke ich auf den Button. So können Sie hier sehen, dass ich auf den Button klicken und diesen kleinen blauen Kreis mit dem Pfeil darauf sehen kann . Ich kann das auf jeden Bildschirm ziehen, den ich möchte. Und es wird diese Schaltfläche mit diesem Bildschirm verbinden. Es ist also ziemlich einfaches Zeug. Also wollte ich auf den Bildschirm nach rechts gehen. Und wenn ich dann auf meinen Klick klicke und rückgängig mache, erscheint ein kleines Pop-up. Und das ist der Auslöser. Dies ermöglicht also eine Möglichkeit, Sprachbefehle im Prototyp zu tippen, zu ziehen oder auszuführen. Für unsere meisten unserer Fälle werden wir also tippen. Also gehe ich durch Tap und zeige Ihnen verschiedene Ich bin Übergangszustände, die Sie jetzt verwenden können. Also kann ich jetzt den Übergang einstellen. Ich kann auch eine automatische Animation machen und ich kann das Overlay machen. Meistens müssen Sie nur den Übergang und das Overlay in 99% der Zeit kennen. Das verwende ich, Übergang und Overlay. Und für Animationen hast du dich aufgelöst und du musst die Folie nach links streichen oder nach rechts nach oben schieben, nach unten schieben. Fangen wir also einfach zuerst mit keinem Stil an. Was ich hier habe, ist, dass der Anmelde-Button zur nächsten Kunsttafel geht , wenn ich hier als Übergang darauf tippe. Und wir haben keine Animation. Also lasst uns sehen, wie das aussieht. Wenn ich also oben rechts auf Play drücke, bekomme ich meinen kleinen Spieldialog. Und wenn ich jetzt die Anmeldung drücke, wirst du sehen, dass es mich nur zum nächsten Bildschirm bringt. Aber lassen Sie uns ein paar Übergänge hineinbringen und wir können einige erforschen. Die Übergänge hier, hier macht es richtig Spaß. Also lasst uns weitermachen und sagen, dass wir es auflösen. Also habe ich die Dauer, wie es sich hier bei 0,1 Sekunden auflösen wird. Oh nein, lass uns weitermachen und fünf Sekunden sagen. Okay, also drücke ich Play. Sehen Sie, wie sich das jetzt in ihn aufgelöst hat, um es zu verlangsamen. Sie können also ein bisschen mehr sehen, was hier passiert. Lass es uns wie eine sehr lange Dauer machen, sagen wir etwa 30 Sekunden. Nun, merke, wie Schriftart, Lass uns wie acht Sekunden gehen und sehen, dass es hier aufgelöst ist, drücke auf Play und sehe das langsame Auflösen Um langsam zu werden. So können Sie es auch dieses kleine Vorschaufenster hier behalten. Es bleibt auf Ihrem Bildschirm und Sie können Änderungen in Echtzeit vornehmen. Also gehe ich zurück zu, sagen wir mal, 0,3 Sekunden hier beim Auflösen. Und du siehst jetzt, wenn ich darauf klicke, ist es schneller. Es macht also Echtzeit-Updates für diese kleine Vorschau. Aber um unseretwillen komme ich hin und her und öffne mich vorher, du kannst sehen, was passiert. Alles klar, das nächste, was wir hier tun können, ist, dass wir eine Folie nach links machen können. Dadurch wird eine Kunstrandwand erstellt oder von der rechten Seite des Bildschirms nach links in die Betrachtungsposition geschoben . Also lass mich dir zeigen, wie das aussieht. Also musst du beide das T hier machen, ich drücke die Anmeldung, um zu sehen, wie es sich nach links bewegt hat. Ganz einfach. Okay, lass uns zum nächsten gehen. Lass uns rutschen gehen, oder? Irgendwie das Gleiche. Ich werde einfach rutschen, richtig? Lass uns auf Play drücken und sehen, wie du von rechts reingeschlitzt bist. Am häufigsten schieben wir nach links oder rutschen nach unten. Schauen wir uns also die nächste an, die Folie ist, oder, tut mir leid, nach oben zu rutschen und nach links zu schieben sind am häufigsten. Also werden wir die Rutsche hier oben machen. Und wie das aussieht ist, wenn Sie den Anmeldeknopf drücken, rutscht dieses Ding nach oben. Jetzt werden wir jetzt eine Rutsche nach unten machen, und wir werden ein „x“ machen. Dieses x soll diesen kleinen Schieberegler schließen. Und wir haben den gleichen Tap-Übergang, aber jetzt wollen wir nach unten rutschen. Und jetzt bauen wir eine Interaktion auf. So können Sie dies sehen, dies ist am häufigsten in der Arbeit, die wir in mobilen Anwendungen leisten, wenn Sie sich anmelden, Sie werden sich anmelden. Das hab ich geschlossen. Du wirst nach unten rutschen und sehen, wie das funktioniert hat. Es war ziemlich nett. Eine andere Sache, die ich auf diesem Bildschirm bekommen kann ist dieses kleine Home-Icon hier zu sehen, das in Grau ist. Wenn ich darauf klicke und es blau mache, bekomme ich hier einen zusätzlichen Übergang. Wenn ich das also mit diesem Screen-Art-Board verbunden habe, dem nächsten Kunstbrett, bekomme ich eine Zeit, wenn es Homepage ist. Und das erlaubt mir, etwas zu tippen. Also kann ich hier in fünf Sekunden sagen, dass es zum nächsten Bildschirm geht. Dies ist also üblich für Ladebildschirme. Und so habe ich diesen Ladebildschirm hier erstellt. Gehe direkt zum Anmeldebildschirm. Wenn du also siehst, was hier passiert, wenn ich die Play-Taste drücke, habe ich nichts gedrückt. Ich habe auf nichts geklickt und es wird bis zum nächsten Bildschirm kommen. Du siehst, dass es eine Zeitfunktion ist, aber das bekommst du nur, wenn es der Startbildschirm ist. Also gehe ich zurück und mache das auf den Startbildschirm. Das ist also Teil der Anwendung. Okay, großartig. Eine andere Sache, die ich Ihnen hier zeigen möchte, ist, dass wir diesen Übergang hier löschen. Okay, also was wir hier machen werden, ist, dass wir den Anmelde-Button erstellen. Was wir hier ein Overlay machen werden. Wenn ich also hier auf das Pop-up klicke, bekomme ich hier die Möglichkeit, keinen Übergang zu machen, sondern ein Overlay. Und dann überlagert unsere Trauer, wenn Sie ein Dropdown-Menü für Mobilgeräte machen. Also gehe ich hin, dass ich wieder in meinen Design-Modus gehe. Ich werde diesen Bildschirm ein bisschen ändern. Also werde ich hier mehr wie ein Dropdown-Menü machen. Und was ich hier gemacht habe, ist das Erscheinen dieser Art Board. Ich kann es mit Weiß füllen lassen. Ich kann es auch nicht mit irgendeiner Farbe füllen lassen. Und was mir das ermöglicht, ist, wenn ich zu meinem Prototyp gehe und ihn ansehe, und ich drücke die Anmeldung, nur dieses kleine Stück wird vom nächsten Bildschirm nach oben rutschen. Und das nennt man Overlay. Also überlagere ich nur den Einstiegsbildschirm, auf dem ich war. Nun, lass uns zurückgehen. Lassen Sie uns hier noch ein paar drei Bildschirm-Prototypen machen. So wie jetzt habe ich den Anmeldeknopf, der auf den Bildschirm rechts hier geht. Und wir wollen diese Folie ausdenken. Ich habe das x, das mich zurück zum Originalbildschirm bringt. Und das hatte ein bisschen hier unten. Aber ich habe diesen Next Button hier, den ich zum nächsten Bildschirm gehen möchte. Und was das tun wird, ist, dass wir umsteigen wollen. Und wir wollen diese eine Folie nach links haben. Also schauen wir uns mal an. Alles klar, also melde ich mich an, ich drücke den Next und du wirst sehen, dass es nach links gleitet , um es dir noch einfacher zu sehen. Lassen Sie uns das zu einer anderen Farbe machen. Lasst uns hier etwas Spaß haben. Lass es uns so rosa machen. Okay, also lasst uns zurück zum Prototyp das machen. Werfen Sie einen Blick darauf. Also hier sind Rutsche hoch und dann habe ich eine nächste Folie links. Und der Grund, warum es eine Folie nach links ist, ist, dass ich einen Zurück-Button habe und sie zu dieser Seite zurückkehren möchten. Also hier gehen wir weiter und greifen diesen Knopf und verbinden ihn mit dieser Kunsttafel. Und wir wollen eine Folie richtig machen. Jetzt kann ich zum mentalen Modell des mittleren Bildschirms zurückkehren. Jetzt haben wir ein vollständiges, komplettes Prototyp-Set. Noch ein Stück, ich zeige dir, was ich mit dem Knopf machen werde. Also hier bei der Anmeldung, die Folien hoch, ich kann es schließen, gehe zurück, um mich anzumelden. Ich kann zur nächsten Folie nach links gehen. Und ich kann den rechten Knopf hier oder den linken Knopf machen, um zurückzukehren, und es geht zurück zum Bildschirm, zurück zur Home-Taste. Ein Großteil Ihres Interaktionsdesigns und Ihres Prototypings sollte es Benutzern ermöglichen , auf Bildschirmen voranzukommen und wieder auf die Bildschirme zu gehen. So haben wir es hier gemacht. Okay, und das Gleiche am Ende hier wollen wir schließen. Dieser Button sollte sich genauso verhalten wie der Schließen-Button hier. Bringt mich zurück zum Original-Screen-Set. Dieser ist ein leichter Rückgang. Jetzt kannst du also sehen, wie ich zurückspringen kann, wenn ich will. Also lasst uns weitermachen und sagen, dass es viele dieser Seiten hier hatte. Lass uns das kopieren. Lasst uns das hier rüber machen. Und wir sagen es als Nächstes. Ist noch eine Rutsche hier übrig. Dieser, dieser Zurück-Button hier geht hier auf den pinken Bildschirm. Schieben Sie nach rechts. Das x wird wieder nach Hause gehen, X wird wieder nach Hause gehen. Lasst uns die Kunst machen, das Kunstbrett hier ganz rechts. Lass es uns blau machen. Du weißt also, dass sie in Ordnung sind. Und schauen wir uns diesen Prototyp an, jetzt können Sie die Acts auf allen drei dieser Bildschirme sehen. Ich gehe zurück zum Startbildschirm. Als nächstes geht es auf den Bildschirm nach rechts und die nächste Schaltfläche geht immer zum nächsten Bildschirm auf der rechten Seite. Und die Zurück-Taste kehrt immer auf den Bildschirm auf der linken Seite zurück. Du kannst also sehen, dass ich meine Anmeldung hierher komme. Als Nächstes. Hier ist der pinke Bildschirm. Als Nächstes mache ich noch einen. Hier ist der blaue Bildschirm. Ich gehe zurück und bringe mich zurück zum pinkfarbenen Bildschirm. Ich gehe zurück, bringe mich zurück zum ersten ersten Einstiegsbildschirm und bin dann wieder auf dem Startbildschirm. Nun, sagen wir, ich bin bis zum blauen Bildschirm und ich bin irgendwie fertig mit diesem Workflow x, gehe zurück zum Startbildschirm. So ziemlich einfach. Sie haben gerade eine ziemlich detaillierte, komplexe Interaktion auf sehr einfache Weise gelernt . Und der beste Weg, dies zu lernen und einfach herumzuspielen. Gehen Sie einfach darauf ein, spielen Sie mit diesen Interaktionen. Drücken Sie Play und sehen Sie, was sie tun und haben Sie Spaß damit. Also löschen wir diese. Und wie versprochen zeige ich Ihnen hier die anderthalb Prototyping für jeden Bildschirm. Das macht diese vollständige Baba-T-Anwendung vollständig. Jetzt habe ich diesen Startbildschirm mit der Zeitverzögerung für vier Sekunden eingestellt. Und dann können Sie hier sehen, wenn ich auf eines dieser Formulare klicke, es bringt mich direkt zum nächsten Bildschirm, nämlich der Tastatur. Wenn ich auf die E-Mail und das Passwort klicke, bringe ich zum nächsten Bildschirm, in dem ich meine E-Mail und mein Passwort eintrage. Und dann siehst du den „Fertig“ -Knopf hier. Ich habe gerade transparentes Quadrat gesagt. Es gibt keine Farbe und sie ist unsichtbar. Bringt mich hier zum nächsten Bildschirm, keine Übergänge. Was wir also sehen können, ist diese Reihenfolge hier. Also haben wir die Ladung in einer Sekunde mal raus. Melden Sie sich an, ich klicke auf meinen Vornamen, klicke auf die E-Mail, eine Presse Fertig, und das ist so ziemlich genau das, ähm, für den Anfang der Anmeldung. Sobald ich die Anmeldung drücke, können wir sehen, dass ich einen Übergang habe, der zum nächsten Bildschirm führt, der auflösen heißt. Es ist also eine sehr schnelle Auflösung. Und Sie können sehen, dass es direkt zum Hauptbildschirm geht, wo ich mit 0 aber t bestellen kann . Das nächste, was ich hier habe, ist, wenn Sie zur Schaltfläche Hinzufügen kommen, dies ist eine Folie nach oben, weil es das x und das x hat mich zurück zu diesem Bildschirm, um es zu schließen. So können Sie hier sehen, wie ich hinzufüge, wir haben den Wischen aus nächster Nähe, gehen hier zu diesem Startbildschirm zurück und drücken Sie erneut Hinzufügen. Und dann, sobald wir auf diesem Bildschirm sind, wollten wir hier das Prototyp-Overlay machen. Wenn ich bestelle, was ich möchte die normale Süßigkeit in eine halbsüße umwandeln. Was wir hier gewählt haben, war das Overlay und dies ist eine Rutsche nach oben, sodass ich die verschiedenen Optionen der Süße auswählen kann. Side, drücke die Play-Taste und klicke auf die reguläre Süßigkeit. Sieh dir das Overlay an, komm rein. Und dann habe ich aus dem Overlay hier Semi Sweet ausgewählt. Das bringt mich zum nächsten Bildschirm, wo ich den Text hier von regulär süß zu halbsüß geändert habe . Also bin ich an diesem Punkt hier. Ich bin eigentlich hier, drücke viel spielen, um halb süß zu sein. Die nächste Seite. Okay, an dieser Stelle möchte ich auf die Schaltfläche Tapioka mit der Tab-Markierung klicken. Das geht zum nächsten Bildschirm, in dem ich den aktiven Status ausgewählt habe , damit sie sehen können, wie das aussieht. Ja, es geht zum nächsten Bildschirm. Und dann haben wir den Button Hinzufügen , der mich zu diesem Bildschirm führt, wo ich sehen kann Warenkorb eine Benachrichtigung vorhanden ist, dass ich eine Bestellung habe. Schauen wir uns das an und wir drücken Add Bu. Das nächste, was wir hier haben, ist, dass ich den Button Hinzufügen habe, der mich zur Kasse bringt. Das Checkout-Button-Icon, das mich zum Kassenbildschirm bringt, schieben Sie nach oben. Weil denken Sie daran, dass wir das x. Das x haben wird mich hierher zurückbringen. Was wir hier haben, sieht so aus. Geh weiter und sieh dir das an. Rutsch nach oben. Großartig. Sieht gut aus. Okay, das nächste, was wir hier machen, ist, dass wir den Next Button haben , der zum nächsten Bildschirm der Ereignisse führt, nämlich die Eingabe Ihrer Adresse. Alles klar, und von dort aus haben wir nicht den Rechtsklick auf die Adresse, bringt mich zur Tastatur. Und dann mache ich das Dunn bringt mich zum nächsten Bildschirm hier. Also können wir uns das ansehen. Und dann bringe ich als nächstes zur Kreditkarte. Betrachten wir das also als eine Interaktion. Hier. Ich gehe. Als Nächstes. Klicken Sie auf die Adresse, holen Sie sich die Tastatur, sieht gut aus. Tastatur zurück auf dem Zahlungsbildschirm. Und wieder kann ich hierher zurück zum Bildschirm gehen. Geh zurück zum Bildschirm, soll mich hierher zurückbringen. Und das sollte eine Rutsche nach links sein. Großartig. Schauen wir uns das also ganz schnell an. Und wenn ich zurückgehe, schau, wie es mich zurückbringt. Das war komisch. Mal sehen, was dort passiert ist. Also bin ich fertig. Ich drücke Weiter. Schieben Sie nach links, damit es so aussieht. Alles klar. Das hier sollte mich also zurück zum Bildschirm bringen und leicht nach links schieben. Richtig ist das, was wir wollen es draußen links, entschuldigen Sie mich. Alles klar, also lasst uns das im Interessenbildschirm ansehen und ich drücke als Nächstes. Ich gehe zum Inter-Zahlungsbildschirm und mache das Zurück-Button. Trotz, oder? Denn zurück zum Adressbildschirm kann ich Änderungen vornehmen, wenn ich möchte. Danke geh zurück zur Zahlung. Sieht gut aus. Okay. Klicken Sie auf eine beliebige Stelle in den Zahlungsbildschirmen, es zieht die Tastatur hoch, lassen Sie meine Informationen dort eingeben, drücken Sie auf die Tastatur, bringt mich zu diesem Bildschirm und dann bezahle ich. Und bezahle, bringt mich zum Bildschirm. Es ist vorbei t. Also da hast du es. Schauen wir uns das Finale an, das heißt, ich habe meine Kreditkarteninformationen eingegeben. Geh weiter und geh zu bezahlen. Und boom hier. Okay, das nächste, was Sie wissen müssen, ist, dass wir diesen kompletten Prototyp haben. Jetzt kann ich hineinklicken. Ich möchte diesen Prototyp packen und ich möchte ausgehen, die Straße gehen und ihn mit Leuten testen. Das erste, was Sie wissen müssen, ist Adobe XD eine Anwendung hat, die Sie auf Ihr Telefon herunterladen können. Und wenn Sie das auf Ihr Telefon herunterladen und die von Ihnen erstellten Prototypen speichern können, damit Sie Ihre Prototypen außerhalb des Büros verlassen und testen können. Wenn Sie zu Ihrem Telefon gehen, gehen Sie zum App Store und machen Adobe XD. Sie können dies für das iPad, diese Anwendung für das iPad oder das iPhone herunterladen . Es ist kostenlos und es wird für Sie in Ihrem Ordner eine Verbindung zu Ihrem Prototyp herstellen. Okay, wenn du eine Website machst und diese im Internet testen musst, dann ist es hier ziemlich einfach. Was Sie tun können, ist, dass Sie hier zum Link Teilen gehen können. Veröffentlichen Sie den Prototyp. Und du siehst, dass ich bereits veröffentlicht wurde. Ich kann den Link hier kopieren. Und ich kann auch den Share-Button drücken. Und es bringt mich zum Prototyp hier. Es wird es laden. Voila, los geht's. Und jetzt kann ich meinen Web-Prototyp für jemanden besorgen. Und Benutzertests können diesen Link auch einfach per E-Mail hier senden. Kann es gerne in die E-Mail von jemandem schreiben. Sie können es öffnen. Jeder auf der Welt kann zu diesem Prototyp kommen. Ich kann mit ihnen testen. Okay, cool. Also da hast du es. Ich werde dir ein bisschen zeigen, was ich mit dieser Datei gemacht habe , die wir in der nächsten Videoserie behandeln werden. Und einer von ihnen ist, wie man Design hier anwendet, visuelles Design auf diese Datei anwendet. So können Sie hier sehen, dass ich etwas visuelles Design habe. Fügen Sie es hier zu dieser Erfahrung hinzu, aber ich zeige Ihnen, wie Sie den Drahtgitter zum visuellen Design bringen können. Aber zuerst werden wir in der Reihenfolge der Videos lernen, wie man Benutzertests und ein Designsystem durchführt. Also wie immer, danke fürs Zuschauen und hoffe, dass du Spaß mit den anklickbaren Prototypen hattest. Begleiten Sie mich beim nächsten Video und ich gebe Ihnen einige Ratschläge, Anweisungen und Best Practices, wie Sie Benutzertests durchführen können. Geh raus und teste einen anklickbaren Prototyp, den wir heute erstellt haben. Okay, danke. Tschüss. 10. Erstelle ein User und die bewährte Praktiken: Willkommen beim nächsten Video in der Art und Weise, wie man UX entwirft, Fallstudie entwirft und Benutzererfahrungsdesign Einzelklasse entwirft. Bisher haben wir viele Gründe abgedeckt. Wir haben Ziele, Personas, Interviews, Skripte und Recherchen- und Problemaussagen, Customer Journey Maps, Skizziervorlagen und Wireframe-Designs durchgeführt. Im letzten Video habe ich dir beigebracht, wie man einen anklickbaren Prototyp macht, damit du ausgehen und Benutzertests durchführen kannst. Ich habe dir gezeigt, wie man einen Link erstellt. C kann aus der Wildnis laufen, durch die Straßen gehen. Und das sind Tests mit Personen mit Ihrem Mobilgerät. Wenn es von einem Laptop kommt, wie geht es auch von einem Laptop aus. Und in diesem Video zeige ich Ihnen, wie Sie Benutzertests durchführen. Sie können also einfach keinen anklickbaren Prototyp haben, der nicht ausreicht. Sie benötigen auch ein Benutzertestskript. Also bringe ich Ihnen ein Skript bei und zeige Ihnen Best Practices beim Durchführen eines Benutzertests. Okay, also was ich hier machen werde, ist, dass ich ein Skript in unseren Dateien vorgefertigtes Skript habe , das an die Klasse angehängt ist, damit du diese Datei herunterladen kannst. Dies wird die Skriptvorlage für Benutzertests durchlaufen. Aber bevor ich darauf eingehe, lassen Sie mich Ihnen einfach mitteilen, warum das Skript gemacht wurde und einige Erkenntnisse zu Best Practices bei Benutzertests und warum wir es tun. Also hier gehe ich zu UX, Schatz. Und das ist die Website, die ich an der Universität hier in San Francisco unterrichte. Wenn Sie auf den 2x2-Bereich klicken, gelangen Sie nach Hause. Scrollen Sie nach unten, um den Benutzertest zu finden Klicken Sie auf den Benutzertest. Und du wirst zu so etwas kommen. Eine Seite, die so aussieht. Das sind also Tests, es geht wirklich um Aufgabenaufgabe. Sie werden Ihren Benutzer beauftragen, eine Aktion in der Anwendung durchzuführen. Und dann wirst du zuschauen und beobachten. Und in den meisten Fällen hilft man ihnen nicht, es sei denn, sie stecken wirklich, wirklich fest. Denn wenn Sie die Anwendung in die Wildnis starten, werden Sie nicht jedem helfen, der die Anwendung verwendet. Sie möchten sie also markieren und beobachten als wären Sie nicht einmal wirklich da wie eine Fliege an der Wand. Aber Sie werden auf dem Weg Fragen haben, die Ihnen helfen können. Warum haben wir Usability-Tests durchgeführt? Weil es beim User Experience Design oder Lean UX darum geht, in jeder Phase Ihres Designs ständig zu testen, wissen Sie die Auswirkungen Ihrer Designentscheidungen nicht, es sei denn, Sie testen es. Testen ist, wie Sie wissen, dass Ihr Design funktioniert oder nicht. Denken Sie daran zu denken, wie ein Wissenschaftler Experimente durchführt und Sie entscheiden wie ein Anwalt, Sie haben Fakten, Logik und Vernunft. Wenn Sie nicht testen, häufen Sie jedes Mal Risiken an, wenn Sie Designänderungen und Designentscheidungen vornehmen. Testen Sie also unbedingt diese Anwendungen, die Sie entwerfen. Wann machst du es? Die ganze Zeit so weit wie möglich in der Branche ist es am besten, einmal pro Woche oder jede zweite Woche Tests durchzuführen. Wir nennen einen ABT immer testen. Ihr Design muss nicht perfekt oder vollständig sein, um es zu testen. Warte nicht, bis es zu spät ist, geh einfach raus und teste es. Sie können Konzeptebene mit Papierprototypen und Ihren Skizzen testen. Sie können während der Wireframe-Ebene unzählige Tests durchführen und auch die visuelle Entwurfsphase testen. Wenn Sie eine Reihe neuer Bildschirme hinzufügen oder vorhandene Interaktionen ändern, sollten Sie die neuen Änderungen testen, die Sie erstellt haben. Alles klar, also das erste, was Sie sich fragen können, ist das Wie. Sie können also sagen, welche Szenarien Sie Personen in Ihrer Anwendung beauftragen möchten. Und Sie können sich die Szenarien einfallen lassen. Ich werde mit dem Bobo T-Beispiel hier in einer Sekunde ein bisschen darauf eingehen. Okay, dann kannst du dir jedes Szenario ansehen und dir die Bildschirme ansehen, die du pro Szenario zeigen wirst. Schreiben Sie dann Fragen, die den Benutzer durch diesen bestimmten Workflow oder Szenario führen . Drittens, richtig, ein Testleitfaden oder ein Benutzertestskript durch jedes Szenario Ihrer Anwendung. Und führe den Benutzer durch die Bildschirme mit Fragen zu jedem Bildschirm und Abschnitt, den du anzeigst. werden wir jetzt also tun, ist, dass wir zu der Datei gehen, die ich erstellt habe, die Sie herunterladen können, und Sie können diese als Testvorlage verwenden. Denken Sie also daran, dass das Ziel des Benutzertests darin besteht, die Designentscheidung oder die von uns erstellten und erstellten Designlösungen zu validieren . Wir möchten sicherstellen, dass unsere Inhalte für den Benutzer sinnvoll sind. Und wir möchten bestätigen, dass unser Workflow nutzbar ist. Und wir werden auch Erkenntnisse sammeln. Verwirrungen, Freude, Schmerzen und Bitte gingen dort mit Menschen getestet. Und ich zeige Ihnen, wie Sie all diese Erkenntnisse aufnehmen und sie systematisch in eine Synthese bringen können, um Informationen, die sich auf jeden Bildschirm beziehen, einzusetzen. Und es ist nicht anders als das, was ich Ihnen in dem Forschungsvideo gezeigt habe , in dem wir Einblicke von Leuten erhalten, die wir testen, wir setzen sie auf Haftnotizen. Nur dieses Mal werden wir die Haftnotizen nach jedem Thema einfügen, das sich auf jedes Szenario oder jeden Bildschirm bezieht. Also werde ich in einer Sekunde darauf eingehen, aber lasst uns zuerst die Vorlage zum Testen der Benutzerfreundlichkeit durchgehen und Ihnen eine Vorstellung geben , wie das aussieht und wie Sie das ausfüllen können. Und dann zeige ich Ihnen, nachdem Sie eine ganze Reihe von Benutzertests durchgeführt haben, wie Sie diese Einblicke in Themen und Muster synthetisieren, damit Sie iterieren können. Okay? Noch oft, bevor wir recherchieren oder Usability-Tests durchführen, haben wir eine Einführung. Stellen Sie sich also vor, der Notitennehmer, der sagt, als wäre ich ein Designer oder Forscher in diesem Fall für die Arbeit an der Bobo t-Anwendung. Sie sagen also, dass Sie im Lebensmittel- und Getränkebereich arbeiten. Was auch immer Ihre Domain ist, stellen Sie sich einfach in der Domain vor, in der Sie arbeiten. Ich werde ihn gefragt, dass es in Ordnung ist, die Sitzung aufzunehmen. Viele Notizen nur zu Zwecken geben an, wie lange das Interview stattfinden wird. Wann wird die Sitzung stattfinden. Man kann eine Stunde sagen. Dies ist wirklich wichtig in diesem Abschnitt hier, diesem Zielabschnitt hier. Geben Sie also das Ziel an, wenn wir Prototyping machen, es ist sehr wichtig, dass sie diese Informationen kennen. Also hier ist was ich sage. Man kann sagen, dass ich im Lebensmittel- und Getränkebereich arbeite. Und wir haben a und C, die Dinge sind fett. Wir haben ein frühes Stadium. Der Typ, den ich Ihnen mitteilen möchte, um Ihr Feedback zu erhalten. Wenn du dir diesen Prototyp zeigst. Bitte wisse, dass dies kein Test ist. Bitte sei ehrlich. Und lass mich wissen, ob es etwas Verwirrendes, Seltsames oder Fehlendes im Prototyp gibt, dann wiederhole es. Sagen Sie insgesamt, ich möchte nur lernen, was verwirrend ist. Und ich bin auch neugierig, welche Dinge dir gefallen. Lassen Sie es sie während der Sitzung wissen, sagen wir und sprechen Sie während dieser Sitzung bitte laut. Schon wieder. Nummer 5 hier, lass es ihnen wissen. Nichts, was sie sagen, wird dich beleidigen. Siehst du, es gibt nichts, was du diesen Krieg sehen wirst. Bitte sei ehrlich. Fühlen Sie sich frei, jederzeit Fragen zu haben. Es wird am Ende fünf Minuten für Fragen sein und sie dann stellen, gibt es noch Fragen, bevor wir beginnen? Schalten Sie das Aufnahmegerät ein, fangen Sie an zu gehen und denken Sie daran, Fotos von ihnen , nicht gerade jetzt, aber gegen Ende für Ihre Fallstudie ist es immer wichtig, das zu tun. Ich bin so in die Tests oder das Gedächtnis involviert, um aufzustehen und ein Bild von ihnen zu machen. Okay, an diesem Punkt möchten Sie sie markieren, um etwas in der Anwendung zu tun. Was du also tun wirst, ist, dass du sie testen wirst. Dann siehst du sie an und lässt sie laut reden. Und die Fragen, die wir dafür haben, sind eine Reihe von Sicherheitsfragen, mit denen Sie mehr über Ihr Design erfahren können. Aber Sie hoffen, wenn der Benutzer laut spricht, dass Sie keine dieser Fragen benötigen, die Sie sich ausgedacht haben. Der Benutzer wird Ihnen einfach sagen, welche Dinge verwirrend sind. Was ist schön, dass irgendetwas fehlt, was ihm gefällt? Und ich zeige dir einen kleinen Trick. Wenn ich teste, gehe ich gerne zu dem Adobe XD-Prototyp, den wir zuvor erstellt haben. Ich möchte am Anfang gerne einen Bildschirm platzieren, der das eigentliche Szenario oder die Aufgaben darstellt, für die ich einen Benutzer hier beauftrage. Bevor sie in die Bewerbung einsteigen. Beginne sie mit einer lauten Lesung, die ihre Mission erwischt hat. Es macht es mehr Spaß. Also sage ich, lies deine Mission laut vor. Genau wie im Skript hier habe ich die Bobo Beispielaufgabe, die sich für die Anwendung anmeldet. Bestellen Sie einen Bot mit T war halbsüß, Süße mit großer Tapioka. Geben Sie Ihre Adresse in die Bewerbung ein und zahlen Sie für Bobo t. Great. Also habe ich das auch hier in der Bewerbung. Also lasse ich sie laut vorlesen. Aktualisiere das. Großartig. Also lasse ich sie die Anwendung oder die Aufgabe laut vorlesen. Und ich habe einen Startknopf mit der Aufschrift Starte deine Mission. Und sie drücken den Startknopf. Boom, sie sind auf dem Weg in die Anwendung. Wir beginnen mit dem Interview. Okay, Sie hoffen also, dass der Benutzer an diesem Punkt anfängt, laut zu sprechen. Ich gehe hier zurück zu unserem Drehbuch. Und hier sollten Sie Ihre Fragen hier haben. Wir haben also nur Aufgaben, die Glühbirne bei der Aufgabe zu erledigen und zu sehen, dass Ihre Fragen genauso aussehen sollten wie bei den Benutzerinterview-Skripten. Sie sollten diesen Bildschirm oder dieses Szenario haben, hier ist der Titel. Und Sie sollten eine Reihe von Fragen haben, die sich auf den Bildschirm oder das Szenario beziehen , das Sie beauftragen. Also hier ist unser Beispiel. Wir haben eine Anmeldeseite. Und das ist die beste Frage, wenn ein neuer Bildschirm im sichtbaren Bereich für den Benutzer ein neuer Bildschirm im sichtbaren Bereich steht , sagen Sie einfach so etwas. Sprechen Sie laut aus. Sag mir, was alles auf dem Bildschirm für dich bedeutet, was sie dazu veranlasst, laut zu sprechen. Die nächsten Fragen, die ich hier habe, sind die Bokeh-Auswahl. Dies ist also der Bereich des Designs. Wenn sie nach dem Login ankommen und sich alles anmelden. Dieser Bildschirm hier, wo es hier über t Auswahlen hat. Denken Sie also daran, dass Sie sich diese Icons hier ansehen, um Schaltflächen hinzuzufügen, die Fotos. Hier habe ich hier eine Reihe von Fragen, aber ich werde dasselbe tun, wenn sich dieser Abschnitt für den Benutzer öffnet Ich sage laut. Sag mir, was alles auf diesem Bildschirm für dich bedeutet. Und dann habe ich unterwegs ein paar Fragen. Ich sage, dass wir irgendwelche Bobo Chief Labors vermissen, die Sie viel bestellen. Und dann sage ich: Was glauben Sie, was die kleinen Icons unten tun? beziehe mich irgendwie auf diese kleinen Symbole, um sie laut sprechen zu sehen, nicht um mit den Symbolen zu interagieren. Geh einfach, sag mir was glaubst du, was sie tun? Was glaubst du, was die Schaltfläche „Hinzufügen“ tun wird? Und fehlen Informationen? In Ordnung, Sie möchten also ein paar dieser Abschnitte haben, jeder für ein Szenario oder einen Bildschirm. Und dann hast du das Outro. Nach dem Jahr sind die Benutzertests vorbei, haben sie hoffentlich viel gelernt. Sie haben die Bewerbung durchgegangen. Sie können sie mehrmals durch die Anwendung gehen lassen. Und sobald sie es aus erster Sicht durchlaufen haben, können Sie sie zurückgehen lassen und auf alles andere hinweisen , was verwirrend war oder Dinge, die ihnen gefallen haben. Und ich bekomme meine Lieblingsfrage am Ende ist die Wunschlistenfrage. Hier können Sie also sagen, basierend auf allem, was Sie gesehen haben. Nehmen wir an, wir sollten dir einen Zauberstab geben und du kannst alles in die Anwendung bekommen. Was ist dein Wunsch? Und du wirst dort eine Menge gutes Feedback und coole Dinge hören. Dann kannst du das Outro treffen, du hast eine Zeit oder du hast Zeit für Fragen an sie, alles, was sie dir wenden müssen. Manchmal sagen sie einfach: Hey, der Ort kommt, ich möchte Bobo bestellen. Das ist es, worauf du hoffst. Das Outro ist ein Dankeschön für Ihre Zeit. Alle Notizen und die Aufzeichnung sind vertraulich und werden nur von mir selbst im Team gesehen, da Zahlungen erforderlich sind. Machen Sie die Transaktion. Sagen Sie ihnen, wenn Sie einen Kommentar abgeben möchten, wenn es in Ordnung ist, sie erneut zu kontaktieren, um die Lösung weiter zu testen. Auf kannst du sogar fragen, ob sie Freunde haben, die am Testen interessiert sind. Das ist ein guter Ansatz dort. Und dann sagst du einfach Danke und auf Wiedersehen. Okay, jetzt werde ich darüber nachdenken, wie diese Tests tatsächlich aussehen sollten und dir dort einige Best Practices geben. Also nochmal, du bist der Dirigent, du hast den Testkandidaten, du hast den Notiznehmer. Sie das Audio am besten hier mit Ihrem Telefon auf. Tests mit dem Telefon einer anderen Person. Denken Sie daran, dass die Notizteilnehmer nur beobachten und sich Notizen machen. Sie reden nicht. Sie führen die meisten Gespräche und die Beobachtungen mit diesem Testkandidaten. Wenn Sie vor Ort sind, machen Sie Aufnahmen. Das bedeutet also, dass jemand bei Ihnen vor Ort ist und Sie sagen, dass Sie einen Laptop haben, auf dem Sie testen. Sie können die Bildschirmaufnahme mit Zoom testen. Zoom ist ein Tool, mit dem Sie FaceTime-Videos erstellen und auch teilen können. Sie können die Bildschirmaufnahme auch mit QuickTime teilen . Das mache ich gerade, um diese Gespräche aufzuzeichnen. Und Sie möchten immer noch Ihr Audiogerät für das Audio haben. Zoom macht das Audio mit dir. Quicktime wird es auch tun. Aber ich empfehle es auch von deinem Handy aus zu tun. Okay, wenn Sie einen Test auf Ihrem Telefon machen, können Sie eine Anwendung namens Lookback Partition herunterladen. Und das ermöglicht es Ihnen, Bildschirmaufnahmen von Ihrem Telefon und Audioaufnahmen in einem einzigen Schuss durchzuführen. Die Anwendung funktioniert ziemlich gut. Es hat jedes Mal, wenn ich es benutzt habe, ein paar Fehler hier und da, aber es ist eine insgesamt wirklich solide Anwendung und die Fähigkeit, die es tut. Diese beziehen sich also auf alle vor Ort, wo Sie tatsächlich jemanden physisch im Raum mit Ihnen sehen können. Für Remote- und Remote-Aufzeichnung Wenn Sie eine Desktop-Anwendung ausführen, können Sie eine Remote-Aufzeichnung durchführen. Sie können einen Zoom-Link teilen. Dies ist die Zoom-Anwendung. Wenn Sie daran interessiert sind, mehr zu erfahren, gehen Sie einfach zu zoom-Punkt IO und Sie finden Informationen zur Verwendung von Zoom. Sie können die Aufnahmetaste drücken und zoomen. Sie können Ihren Bildschirm teilen. Sie können Maussteuerung geben und Sie können jemanden den Prototyp testen lassen. Sie können auch die Aufnahme-Taste in Zoom drücken damit Sie Ihre gesamte Arbeit für Sie an einem Ort erledigen. Wenn Sie beim Testen eines Mobiltelefons eine Bildschirmfreigabe durchführen, tun Sie das nicht. Es wird empfohlen, dies nicht zu tun. Mobile Geräte sollen in freier Wildbahn verwendet werden, nicht über einen Bildschirm. Testen Sie das Handy also nicht aus der Ferne. Es ist nicht zu 100 Prozent schlüssig. Und wenn Sie es tun würden, testen Sie nur Inhalte, nicht die Benutzerfreundlichkeit der Anwendung. Ordnung, dies ist also die Best Practices, wenn Sie Benutzertests durchführen. Ich komme hier zum Echtzeitboard, das ist mein digitales Whiteboard und zeige Ihnen, wie Sie Ihre Erkenntnisse und Ihre Ergebnisse synthetisieren können, nachdem Sie Benutzertests durchgeführt haben. Du siehst also, ich scrolle hier weiter. Nun, bevor ich darauf eingehe, lass mich dir einfach ein paar interessante Dinge mitteilen, die ich beim Testen von Benutzern gelernt habe. Es gibt also einige interessante Dinge rund um Verbage. Wenn Sie also nach einer ganzen Reihe von Tests feststellen , dass Ihre Benutzer etwas in der Benutzeroberfläche einen anderen Namen nennen, die Benutzeroberfläche, einen anderen Namen als auf dem Bildschirm. Kommen Sie zurück und ändern Sie den Wortlaut in den Wireframes oder Designs und ändern Sie eine Verbage in die Wörter, die Sie hören, als die Benutzer es beschreiben. Schau und beobachte die Körpersprache der Menschen. Manchmal nicht die ganze Zeit, aber manchmal stützen sich die Leute auf etwas. Es bedeutet, dass es ihnen vielleicht gefällt. Manchmal, wenn sie sich zurücklehnen, gefällt es ihnen vielleicht nicht. Lehnen Sie sich in den verschränkten Armen zurück, sie mögen es wahrscheinlich nicht. Testet den Raum, aber wenn es kalt ist, neigen die Leute dazu, auch ihre Arme zu falten. Okay, so schmal diese Frage ein. Dies ist eine gute Frage bezüglich der Erwartung. Wenn ein Benutzer also auf eine Schaltfläche klickt oder tippt, bevor er damit interagiert, sagen Sie einfach, was ist das? Was denkst du, was das tun wird? Und kriegen Sie ihre Erwartung? Und dann lass sie weitermachen, um zu sagen, okay, großartig, mach weiter und mach weiter. Und dann geben sie Trinkgeld und tippen oder klicken auf den Button. Den Walk-Through habe ich dir das schon gegeben. Dies ist die beste Eröffnungszeile aller Zeiten, wenn Ihr Benutzer einen neuen Bildschirm sieht, mich einfach durch den Bildschirm und sagen Sie mir, was alles für Sie bedeutet. Eines der besten Dinge dort. Wir werden uns ein bisschen weiter in die andere einlassen. Hier ist einer, der großartig ist. Ohne zu testen, ist es in Ordnung, Fehler zu machen. Laufen Sie einfach nicht ab und reagieren Sie sofort, nachdem Sie einen negativen Datenpunkt erhalten haben, wenn Sie die Validierung für diesen negativen Datenpunkt erhalten haben. Wenn es also für eine Person wirklich schmerzhaft oder verwirrend ist, hören Sie nicht auf und ändern Sie das gesamte Design. Bestätigen Sie, dass dies für mehr als drei Personen, drei bis fünf Personen schmerzhaft und verwirrend ist, dann können Sie das Design ändern. Okay? Wenn das gesagt wurde, sagen wir, du bist ausgegangen, hast ein paar Interviews gemacht. In diesem Fall haben Sie drei Personen interviewt, die gleiche Synthese machen, die ich Ihnen in den Forschungsvideos beigebracht habe, oder verwenden Sie Haftnotizen wieder. Du hast also drei Personen. Wir haben kein Naomi, wir haben Joe Hahn und wir haben hier. Und wir haben bisher mit drei Personen getestet. Und das sind all ihre Erkenntnisse, eine pro Haftnotiz hier. Und was Sie tun wollen, ist, sich diese Erkenntnisse zu schnappen und Sie können sich vorstellen, dass dies ein physisches Board ist, aber es sieht tatsächlich in etwa so aus. Hier. Sie haben die Bildschirme auf ein Brett geklebt. Du hast diese Haftnotizen hier darunter. Hier bin ich, Designer hier macht das zusammen mit dem Kunden. Wir haben den Bildschirm. Ich werde Insights unter den Bildschirmen sein, alle Leute hier, die wir auf der linken Seite interviewt haben. Also zeige ich Ihnen, wie wir das machen, auf digitale Weise mit Echtzeit-Board. Aber du kannst dies auch in der physischen Welt mit echten Haftnotizen tun. Einige im Echtzeit-Board habe ich Naomi. Was ich also tun könnte, ist, dass ich die Erkenntnisse erfassen kann, die sich auf jeden Bildschirm beziehen. Nehmen wir an, meine Naomi sagte, dass wir hier auf diesem Bildschirm einige ihrer Lieblingsgeschmacksrichtungen vermissen . Also können wir uns diesen Einblick schnappen und sie hierher stellen. Und sagen wir, sie sagte, sie würde gerne eine Telefonnummer oder eine Möglichkeit haben, diese Person bei der Lieferung zu kontaktieren , falls sie sich ein wenig bewegt, sie könnte vorne oder einen Block entfernt sein. Sie kann Schütz dieser Person schreiben lassen, die den Bobo von t liefern wird , und wir haben das Gleiche von Joe Hahn hier gehört. Also stelle ich das neben diesen Bildschirm. Und Anna sagte das Gleiche um den Bogen, aber T-Aromen gesetzt, wir fehlen hier ein paar Geschmacksrichtungen. Und du kannst den Kern davon sehen. Irgendwann hoffen Sie, dass Sie viele Einblicke pro Bildschirm haben. Punkte der Verwirrung, Punkte der Freude. Aber irgendwann hast du was Gefällt mir hier, was eine Reihe von Erkenntnissen in Bezug auf jeden Bildschirm ist. Okay, cool. Also denke ich, dass das die meisten Benutzertests abdeckt. Der beste Weg, dies zu tun und darin gut zu werden, ist nur eine gute Praxis. Das geht in freier Wildbahn raus. Machen Sie Ihre Benutzertests. An. Im nächsten Video zeige ich Ihnen die Grundlage eines Designsystems. Ich führe dich durch, was ein Designsystem ist. Und dann nehmen wir dieses Wissen auf und wenden visuelles Design auf das Drahtmodell an, das wir in den vorletzten Videos vor diesem erstellt haben. Wie immer danke fürs Anschauen und ich sehe euch hoffentlich das nächste Video. Tschüss. 11. Entwerfen von Designsystemen: Das ist ein Video, das behandelt, wie man eine UX-Design-Fallstudie und das User Experience Design 101 erstellt . Und letzte Videoserie. Wir haben hier viel Boden abgedeckt, aber mit den Zielen, Personas und der Forschung fortgesetzt. Problemanweisungen zu Wireframes machen wir anklickbare Prototypen. Und das letzte Video habe ich darüber gesprochen, wie Benutzertests und Best Practices bei Benutzertests durchgeführt werden und wie Sie Ihre Erkenntnisse und Muster synthetisieren können, die Sie auch aus Benutzertests lernen. Im nächsten Video, das ich haben werde, wird es darum gehen, visuelles Design auf Ihr Drahtgitter anzuwenden. Aber bevor ich darauf eingehe, wollte ich ein wenig über ein Designsystem sprechen und was ein Designsystem ausmacht. Und wir werden auch ein wenig auf Styleguides und Komponentenbibliotheken eingehen. Okay, wenn Sie also zu UX honey.com kommen, ist dies die Website, die ich an der Universität unterrichte. Und Sie klicken auf diesen Link, um zu einer Seite wie dieser zu gelangen. Scrollen Sie nach unten und Sie finden den Link hier, der als Designsystem bezeichnet wird. Gehen Sie weiter und klicken Sie auf diesen Link und es wird zu einer Seite wie dieser gelangen. Okay, cool. Deswegen designen Systeme, wir brechen wirklich Entwürfe für Engineering auf und verwenden ein Designsystem auch als eine Reihe von Designregeln, Komponenten und Stilen, die von anderen Produkten innerhalb einer Organisation oder anderer Unternehmen übernommen werden können in der Branche. Das ist also die Definition eines Designsystems. Sie beim Entwerfen daran, dass es gut ist, einmalige UI-Elemente wiederzuverwenden und nicht zu erstellen. Auch hier handelt es sich um eine Reihe von Designregeln, Komponenten, die von Ihrem Produkt oder anderen Produkten übernommen werden können , können sich in Ihrem Unternehmen befinden oder sich innerhalb von Unternehmen innerhalb des Images befinden. Beispiele dafür sind also ein gutes Beispiel dafür ist Google Material Design. Das ist ein wirklich gutes Designsystem, das andere Organisationen und Unternehmen innerhalb der Branche nutzen und aufgreifen. Okay? Denken Sie also daran, dass Ihre Designentscheidungen zu UI-Artefakten werden, Artefakte der Benutzeroberfläche, die zu lebenden wiederverwendbaren Designkomponenten werden. Ich zeige Ihnen einige Beispiele für lebenswerte Designkomponenten. Und von dort aus werden sich eine innere und eine iterative Designsprache entwickeln und verwendet werden, um die Lücke von Design und Engineering zu schließen. Sie möchten also alle das gleiche Vokabular haben, wenn Sie über die Komponenten und Elemente der Benutzeroberfläche sprechen . Und denk drüber nach. Ich denke mir diese Komponenten und UI-Elemente gerne so vor, als würdest du einen Kuchen backen. Und sagen wir, Kc ist ein Stück Software in dieser Analogie, was einen Kuchen ausmacht, ist eine Reihe von Zutaten. Und du übergibst das Rezept der Zutaten an jeden auf der Welt. Und sie können genau den gleichen Kuchen machen, den Sie zu Ihrem Haus machen können. Stellen Sie sich also vor, dass ein Kuchen ein Produkt ist und was ein Produkt ausmacht. Es gibt viele UI-Elemente. Und alle diese UI-Elemente haben Visuals, Designs und Stile für sie. In diesen Stilen sind die Rezepte, aus denen diese Software besteht. So ziemlich einfache Analogie dort. Okay, wann sollten Sie also ein Designsystem verwenden und darüber nachdenken? Sie können also ein Design von Grund auf neu haben, über das Sie anfangen zu denken. Und wenn Sie in ein Designwerkzeug einsteigen, können Sie damit beginnen, ein paar Bildschirme zu entwerfen. Nachdem Sie ein paar Bildschirme haben, entwirft Duns und Sie beginnen, ein Element wiederzuverwenden. Er fing an, Elemente zu kopieren und einzufügen. Du hörst an diesem Punkt auf. Und Sie sollten eine globale Komponentenbibliothek erstellen , aus der Sie beim Entwerfen neuer Bildschirme abrufen können. Denken Sie also daran, in den letzten Videos, als ich Ihnen in den Wireframe-Videos zum Entwerfen eines Drahtmodells gezeigt habe, wie Sie ein Symbol erstellen und wie es wirklich einfach gemacht hat , diese Symbolfarbe und den Stil in einem Bereich zu ändern . Und es würde sich auf hunderten von Bildschirmen ändern, dass Sie das bekommen haben und darüber sprechen wir hier. Sie erstellen eine globale Symbolbibliothek. Und denk darüber nach. So haben Ingenieure Software entwickelt. Sie sollten also ihren Prozess in Ihren Design-Tools spiegeln. Nun, es ist eine beste Vorgehensweise, das zu tun. Okay, was macht ein Designsystem aus? Wir haben so ziemlich einige Elemente, über die wir reden können. Der erste hier auf der linken Seite ist, dass wir die Stimme und den Ton haben. Wie willst du klingen? Was ist der Ton der Stimme? Was für eine Erfolgsmeldung ist, was unsere Fehlermeldungen sind. Was ist mit Marketingseiten? Ein Bereich eines Designsystems. Der andere ist ein Markenführer. Wie hat sich Ihre Software mit dem Markt verbunden? Haben Sie Regeln für Farbe, Regeln für Logos, Regeln für Symbole? Und hast du Regeln zum Typ? nächste ist eine Komponentenbibliothek. Das ist, wenn ich von viel spreche. Ähm, wie schaffen wir keine einmaligen UI-Elemente? Wir haben also Buttons und Felder und Drop-downs und Modals. Wie lautet Ihre Bildsprache? Wie löst dein Visual Emotionen aus? Was ist dein visueller Ton? Welche Emotionen kommen Sie aus Ihrem visuellen Ton? Was sind die Sprachdefinitionen und wie lauten Ihre visuellen Regeln? Also Sprachdefinitionen, wie spricht man als Team? Sprechen Sie über Dinge, die wir hier entwerfen. Wie lauten Ihre visuellen Regeln? Das hat also auch viel mit Ihrem Markenführer zu tun. Und dann dein Styleguide. Dies ist das erfundene von UI-Elementen. Also deine Farbmuster, der Zusammenbruch von Eli, die Raumkonsistenz, das Typografiesystem. Und dann haben Sie die Designsprache, die wirklich die Regeln von Interaktionsdesigns ist. Und diese Regeln können anpassbar sein. Sie haben also Interinterinteraktionsregeln, Sie haben Übergangskonsistenzen, Sie haben Nutzungsmuster und Sie haben Design- und UI-Muster. Jedes Mal, wenn Sie hier über eines dieser Elemente sprechen, sprechen Sie von einem Designsystem. Dies ist also der systematische Ansatz des Designs, der diese sechs Elemente hier zusammenbringt. Lassen Sie mich Ihnen also ein ziemlich gutes Beispiel für einen Styleguide oder eine Komponentenbibliothek zeigen. Also der Klick hier, Hier ist die Firma, für die ich für Pivotal gearbeitet habe. Sie können zum Styleguide Punkt Pivotal Dot io gehen. Sie können zu den Komponenten gehen und Sie können alle Schaltflächen sehen, die sie haben. Sie können nach unten scrollen und ihre Schaltflächen sehen. Viel und das ist ein Lifestyle-Leitfaden. Wenn ich das will, kann ich den Code tatsächlich bekommen. Also siehst du diese Show HTML. Ich kann diesen HTML jetzt kopieren. Wenn Sie diese React sehen, ist React auch ein visuelles Framework. Ich kann diesen Code in meine Anwendung kopieren, ziemlich solide zu Hause. Und wir haben auf der linken Seite alle Komponenten. Sie haben also Warnungen hier, hier sind eine Reihe von Warnungen. Ich sehe den Code für jeden einzelnen. Sie haben Formulare hier. Ich kann also sehen, dass hier ein Benutzerformular ist. Und es geht weiter und weiter. Es ist ziemlich gutes UI-System. Wenn Sie an eine Designsprache wie Interaktionsregeln und Übergangskonsistenzen denken . Das hier, Material Dot IO, ist wirklich solide. Also hat Google das gemacht und es wird hier. Hier sind ihre Regeln. Ich mag es, weil sie dir gute Beispiele und schlechte Beispiele geben, oder? So sehen Sie also, wie Sie eine Karte preisgeben und weitere Informationen preisgeben können. Es wächst einfach irgendwie. Hier dreht es sich um. Es ist also auch, es ist zu schwer für einen Übergang. Der Slip auf dem Ich schaue mir das oft an. Es ist cool, aber es ist viel, wo das sehr sanft und nett ist und das ist sehr abrupt, dieses System hier. So können Sie die ganze Single durch Gesten hier durchgehen und Ihnen sagen, dass sie dafür Regeln haben. Und alle Arten von coolem Zeug, das du sehen kannst. Ziemlich cool hier. Okay, das nächste was ich behandeln werde, ist der Styleguide. Dies ist also eine Zusammenstellung aus Farbmustern und Typografiestilen. Und es wird auch in einige Komponentenbibliotheken gelangen. So können Sie hier sehen, dass es Best Practice ist, wenn Sie visuelles Design für eine Anwendung studieren . Und denken Sie daran, wenn ich zum nächsten Video komme, denn wenn wir visuelles Design auf unsere Anwendung anwenden , die wir früher in den vergangenen Videos erstellt haben, die OPT-Anwendung, spreche ich über die Aktionsfarbe. Die Farbe, die die wichtigste Aktion für den Benutzer in jedem Bildschirm oder jedem Abschnitt ist. Und das sollte konsequent sein. Das ist also unsere Actionfarbe. Es heißt cooles Blau. Wir haben hier das sogenannte Hex-Farbmuster. Und das können wir dem Engineering übergeben und sie werden genau wissen, welche Farbe das mit diesem Code hat, wir haben die sekundären Aktionsschaltflächen. Dies ist die sekundäre Aktion, z. B. Abbrechen, eine Schaltfläche zum Abbrechen im Vergleich zu einer Aktionsfarbe, die eine Schaltfläche zum Speichern ist. Dies ist also die sekundäre Aktion, die Benutzer ausführen sollen. Und wir haben alle unsere Farben hier, alle benannt. Sie haben eine Fehlerfarbe, Sie in der Erfolgsfarbe haben. Sie haben alle Namen dafür. Und so können wir uns als Team um diese Farben unterhalten. Wenn wir also Arrow Fehlerfarbe sagen, sagen wir nicht nur Rot. Wir können es korallenrot nennen, oder wir können es als Fehlerfarbe bezeichnen. Wir können auch sagen, dass grün GO green. Und dann beziehen wir uns auf diese Erfolgsfarbe, diese Grautönen, wir können Delfingrau verwenden, wir können Strichgrau verwenden, wir können Hover Teal verwenden, wir können Hubbard Blau, Hot Orange, Lila Regen verwenden . Das gefällt mir. Ich bleibe blau, oder? Dies ist also eine Sprache, die wir aus Farbe erstellt haben. Und Sie können hier sehen, dass wir unsere Primärfarben für den größten Teil der Anwendung an der Spitze verwenden. Sekundärfarben hier unten verwenden wir für andere Teile der Anwendung. Okay, jetzt werden wir uns mit den Topographieregeln befassen. Also hier haben wir eine Reihe von dem, was wir H1, H2, H3, H4, H5, A1, a2 nennen . Und so weiter. Und was das ist das sind Schlagzeilen, also diese sind 21 wird die größte Schriftart sein, nicht unbedingt eine Überschrift in Ihrer Benutzeroberfläche, sondern die eine ist die größte Schriftgröße in der Anwendung. H2 ist sekundär bei der größten Schriftgröße, die für H1 verwendet wird. Manchmal haben Sie ein H2A, was bedeutet, dass wir in diesem Fall regelmäßig verwenden, wir verwenden Licht. In diesem Fall ist h3 nicht so groß wie H2, etwas kleiner und ein bisschen klüger als h3, h4 und dann ein bisschen schlauer als H4, H5. Und dann haben wir A1 für Absätze. So kleiner Text. Sie haben also a1, a2, a3 hier sollte es sein, es ist ein Kopier-Duplikat. Sie können also hier auf der rechten Seite sehen, wir haben dieses System dargelegt. Wir werden Roboto Open Sans für BAD Open Sans verwenden. Und wir haben hier Beispiele, wenn wir sie auch auf der rechten Seite verwenden. So können Sie die Beispiele in der Anwendung sehen, wo diese leben. Wenn Sie mehr über Topografie erfahren möchten, können Sie zu Momenten mit Typografie gehen. Dies ist eine Website, die ich erstellt habe, und dies war ein Vortrag, den ich für Adobe auf einer Konferenz namens Adobe MAX geführt habe. Und das durchläuft eine ganze Reihe von letzten systematischen Designs. Was am besten für Absätze und Toxin auf H1 verwendet wird und wie man H1 und H2 für Desktop-, Tablet- und Mobilgeräte und Best Practices verwendet, fasst es zusammen. Ich habe Medium, den beliebtesten Webblog der Welt und ihre Typsysteme kaputt gemacht. Und es deckt hier viel Boden ab. Ich werde wahrscheinlich noch einen Vortrag darüber führen, dass Skillshare das hier nur in der Typografie bricht. Aber wenn Sie eine Chance haben möchten, einen Blick auf all das zu werfen, gehen Sie einfach zu Momenten mit typography.com. Sie können sehen, dass hier die URL ist. Und dazu findest du eine ganze Reihe von Informationen. Und so haben sie es nicht getan, es gibt einige Farben, die den Styleguide widerspiegeln. Und wir haben das Typografiesystem hier. Und dann werden wir mehr in die Komponentenbibliothek einsteigen. Also haben wir Buttons, wir haben Hover-Status für die Buttons. Und wir teilen hier die Typen, die Farbe, die Farbe, die Wiederverwendung, die Farbe, die Wiederverwendung, die Hexadezimalfarbe auf. Und das ist echter Code. Du kannst darauf eingehen, du kannst das kopieren. Sie können den Browser hier öffnen. Sie können den Code hier sehen, wenn Sie ihn möchten. Und wir haben alle unsere Formulare hier. Also sprechen wir über die Schwebezustände und aktiven Zustände unserer Formulare. Und die Fehlerstatus haben Kontrollkästchen. Und dann werden wir zu viel in die komponentengesteuerte Designwelt einsteigen. Vieles davon finden Sie hier in den entscheidenden Beispielen für Materialdesign. Aber eine Sache, über die ich reden möchte, ist, dass Sie Raum als Komponente nutzen können. Also hier habe ich diese kleinen roten Quadrate. Und wenn Sie zwei rote Quadrate haben, gibt es 30 Pixel, also hat jedes ein Inkrement von 15 Pixeln. Jedes Mal, wenn ich meine Designs verwende, denke ich auch gerne den Abstand als Attribut nach. Sie können diese Karte also hier auf der rechten Seite sehen. Es hat ein Symbol, es hat Texte, aber sie sind alle entsprechend Platz, wie das Symbol von oben auf dieser Karte 16 Pixel beträgt. Und der Text hier, Empfänger zielgerichtet ist, liegt 120 Pixel von unten. Und Sie können sehen, wie ich dieses Space-Attribut während meines gesamten Designs verwende. Okay, also da hast du es. Das ist so ziemlich die Grundlage und das Beispiel des Designsystems und was ein Designsystem ist. Nochmals vielen Dank fürs Anschauen, und hoffentlich sehe ich Sie im nächsten Video, das visuelles Design auf Ihr Drahtgitter anwendet. Lassen Sie mich einen kleinen Blick darauf werfen, wie das aussehen wird. Männer, dass es hier XD geben wird. Ich gehe zu dem Bokeh-Design, das wir die ganze Zeit gemacht haben , und dir einen kleinen Überblick geben, werde ein paar dieser Bildschirme und Watson Visual Design auch hier zu ihnen bringen. Ziemlich lustiges Zeug. Alles klar, so wenig Vorschau da, was zu erwarten ist. Und hoffentlich sehe ich Sie im nächsten Video, wie Sie visuelles Design auf Ihr Wireframe anwenden können. Wie immer, danke nochmal und bis bald. Tschüss. 12. So wende man Visuelles Design auf deinen Prototyp: Ordnung, willkommen zurück bei der Erstellung einer UX-Design-Fallstudie und eines persönlichen Benutzererlebnisdesigns. Ordnung, wir haben also vom Beginn des Lernens, wie man Ziele setzt, über die Erstellung von Personas und Skripten für Benutzerinterviews und das Ausgehen und Recherchieren bis hin zur Synthese viel abgedeckt vom Beginn des Lernens, wie man Ziele setzt, über die Erstellung von Ziele setzt, über die Erstellung Personas und Skripten für Benutzerinterviews und das Ausgehen und Recherchieren bis hin . Ihre Recherche auch, wie man eine Problemstellung schreibt. Wir haben einige Customer Journey Maps gelernt. Wir haben Vorlagen und Frameworks skizziert. In der letzten Videoserie habe ich beschrieben, wie man ein Wireframe-Design erstellt. Wie man einen anklickbaren Prototyp erstellt, wie man diesen anklickbaren Prototyp nimmt und Benutzertests und Best Practices durchführt, wenn man Erkenntnisse und Erkenntnisse aus Benutzertests zusammenfasst . Wir haben im letzten Video gelernt, wie man ein Designsystem und die Basis eines Designsystems erstellt . Jetzt werde ich Ihnen beibringen, wie Sie dieses ursprüngliche Drahtgitterdesign verwenden und visuelles Design darauf anwenden. Lassen Sie uns ein wenig darüber sprechen, was visuelles Design ist? Visuelles Design ist das Studium des Erstellens, Positionierens grafischer Elemente für visuelle Absichten. Es ist eine kontinuierliche Untersuchung von Layoutkompositionen, Farben, Typografie und visueller Stimmung. Es erfordert viel Übung , um darin gut zu werden. Denken Sie also daran, wenn Sie anfangen und lernen, braucht es Zeit. Seien Sie also nicht zu hart mit sich selbst, üben und erkunden Sie einfach weiter visuelle Stimmungen und Behandlungen. Lassen Sie sich inspirieren oder helfen Sie. Und ich gebe Ihnen hier einen kleinen Tipp, bevor wir mit der Erstellung von hier einen kleinen Tipp, bevor wir visuellem Design für Ihr Wireframe beginnen Ich zeige Ihnen einige Methoden, die ich verwende. Deshalb werden hier einige Tipps beschrieben, bevor Sie ausgehen und visuelles Design machen. Visuelles Design mit Adjektiven. Es wird Ihnen helfen, ein bisschen mehr darüber zu erfahren , was das Ziel Ihres visuellen Designs ist. Einige Adjektive, die Sie sich vorstellen können, sind, dass Sie sagen können, ich möchte, dass etwas Visuelles Spaß macht und verspielt, aber modern ist. Dann kannst du diese Adjektive nehmen und nach Moodboards suchen. Dies sind visuelle Beispiele, die für diese Adjektive gelten. Es ist auch am besten, einen Ordner zu erstellen , um sich visuell inspirieren zu lassen. Wo immer Sie Dinge finden , die interessant oder cool sind, oder wenn Sie in der Wildnis sind und Ihrem eigenen Leben etwas sehen, machen Sie ein Foto davon mit Ihrer Kamera auf Ihrem Handy und platzieren Sie es in diese Ordner. Und es ist auch gut zu üben, nur viele verschiedene visuelle Behandlungen zu erkunden. Lassen Sie mich Ihnen hier eine kleine Technik zeigen , wie Sie Adjektive entwickeln und wie Sie ein Moodboard auf einige dieser Adjektive anwenden wie Sie ein Moodboard auf einige dieser Adjektive anwenden können. Okay, Sie können sich das visuelle Make-up am Anfang also nur als Worte vorstellen , die Ihre Stimmung beschreiben , die Sie von Ihrem visuellen Design erwarten. In diesem Beispiel haben wir ein wenig über etwas gesprochen , das modern, strukturiert, glaubwürdig und ehrgeizig ist. Wir beschreiben diese Adjektive, wir verwandeln sie in Substantive, indem wir Moodboard machen. Hier ist ein Beispiel für einige Designs, die den Monitor füllen. Moderne Farbpalette. Sie sind sehr sauber, gutes Layout. Schau dir diese kleine iPhone App hier an. Das ist echte Arbeit. Das ist echte Arbeit, die ich für einen Kunden geleistet habe. Hier sind einige Beispiele, die dafür gesorgt haben, dass es sich glaubwürdig anfühlt, wie eine Bank, aber wirklich vertrauenswürdig. Es ist also viel Blau hier drin. Blau ist eine vertrauenswürdige Farbe, daher ist es eine Farbe, die Krankenhäuser und Banken verwenden. Es ist eine sehr beruhigende Farbe. Diese kleinen Beispiele hier gelten für das Glaubwürdige. Also das Nächste hier, eine Struktur, ich kann sehen, dass alles irgendwie als Gitter verpackt ist. sind sehr strukturiert. Sie können hier etwas Ehrgeiz sehen, nur die Fotos, die Behandlungen von Sonne, Sonnenstrahlen und einige Abendaufnahmen und einige Sonnenuntergänge. Einfach sehr inspirierend. Wir haben versucht , das visuell einzufangen. Wohin gehst du also, um viele dieser Stimmungen zu bekommen? Ein paar Orte, an die ich gerne gehe. Zuerst gehe ich gerne dribbeln. Ihr seht hier verdreifacht. Es hat drei Bs und es DRI BB. Es ist nur ein Ort , an dem Designer coole Dinge posten, die sie getan haben. Sie können hier eine Suche durchführen. Schauen wir uns einige Bildschirme an. Und Sie können hier viele verschiedene Möglichkeiten sehen , ein Bildschirmdesign zu erstellen. Ziemlich interessant. Sie können sich inspirieren lassen, wenn Sie sich diese Art von Arbeit ansehen. Es enthält animierte Gifs, sodass Sie hier kleine Interaktionsdetails sehen können. Ein interessanter Ort zum Vorführen und iPhone dort. Schauen wir uns das an. Dieser hier. Ziemlich cool. sind einfach viele Dinge, die Sie mitnehmen müssen, lassen Sie sich inspirieren und schauen Sie sich an und helfen Sie dabei, Ihr visuelles Handwerk zu verbessern. Okay, eine andere Möglichkeit , Moodboard-Beispiele zu finden , ist, dass ich keinen Inspirationsordner habe. Also nochmal, das ist ein Ordner, mit dem ich meinen Desktop auf meinem Computer hatte und mit dem ich ihn immer dann gefüllt habe, wenn ich etwas so Inspirierendes gesehen habe, entweder es kommt von Dribble, mir und mir in der Welt. Wenn ich eine Website auf irgendetwas sehe, lege ich sie einfach in diesen Ordner. Und lassen Sie uns ein paar davon durchgehen. Sie sind einfach voll von verschiedenen Layouts und Stimmungen, sogar Illustrationsstilen und Logos. Und jedes Mal, wenn ich an etwas hängen bleibe, öffne ich diesen Ordner normalerweise zuerst und ich gehe ihn einfach durch und es inspiriert mich einfach. Und es ist voll von tonnenweise schönen Designbeispielen , die andere Leute gemacht haben und von denen ich wünschte, ich könnte zwei machen. Ja, es geht weiter und weiter und weiter und weiter. Ich habe diesen Ordner gestartet, glaube ich im Jahr 2009. Und es enthält viele, viele Informationen darüber. Ich klicke mich gerade durch einige Bereiche. Gehen wir hier einige durch, die ich 2015 gefunden habe. Viel cooles, nur interessantes Layout, einige Möglichkeiten, verschiedene Designs zu machen. Mach weiter und ich zeige dir hier vielleicht noch ein paar Beispiele. Ja, es können iPhone-Apps und Websites und Logos und iPad-Anwendungen, animierte Gifs, redaktionelle Layouts, alle möglichen guten Dinge sein. empfiehlt sich also, einfach gesamtes inspirierendes Material in einen Ordner zu legen Ihr gesamtes inspirierendes Material in einen Ordner zu legen und es im Laufe der Zeit weiterzuentwickeln und darauf zurückzukommen, wenn Sie beim visuellen Design oder der Hilfe nicht weiterkommen . du musst dich einfach lösen und dich inspirieren lassen. Einige Best Practices bei der Entwicklung Ihres visuellen Designs. Schauen wir uns das an, was wir heute machen werden. Ich habe hier ein Video von der letzten Bow-Betsy-App , die wir die ganze Zeit gemacht haben. Und wieder ist dies eine Anwendung, die in allen Videos, die wir hier sehen können, ein Thema war . Ich werde weitermachen und Baba-Tee bestellen. Ich mag den normalen Milchtee. Und haben die Semi-Suiten. Große Tapioka. Klicken Sie hier auf die Schaltfläche Hinzufügen. Gehe zum nächsten Bildschirm. Aber in meiner Adresse. Als nächstes geben Sie meine Kreditkarteninformationen ein und bumm, hier bin ich und da kommt Bobo fünf Minuten, 2 Minuten in mich rein und ich bekomme Bulbar t. Also wirklich ordentlich. Also werden wir lernen, wie man sein Wireframe nimmt , und wir werden lernen, wie man visuelles Design so anwendet, dass es so aussieht, visuelles Design so anwendet, dass es so aussieht, vielleicht sogar Spaß haben wird und wir werden ein anderes verwenden Farbe neben dem Rosa. Vielleicht verwenden wir hier etwas Blau. Lassen Sie uns also ohne weiteres Adobe XD öffnen. Sie können sehen, dass dies das Wireframe war, das wir im letzten Video gebaut haben . Wenn Sie also mehr über den Aufbau dieses Drahtgitters und die Herstellung des Prototyps erfahren möchten , sehen Sie hier. Du kannst zurück zum Video gehen. Sie können lernen, wie man dieses Design macht. hier einige der Prototyping-Techniken gelernt. Was ich gerade mache, dann habe ich das alles Wireframes und Prototypen. Aber schauen wir uns an, wie wir hier einen Bildschirm aufnehmen und etwas visuelles Design darauf anwenden. Das erste, was ich hier tun werde , ist, dass ich mit einer Seite an Seite dieses Intro-Bildschirms beginne. Und wir werden etwas Farbe darauf auftragen. Ich behalte den schwarzen Hintergrund bei. Ich werde den Text hier ein bisschen behalten. Ich werde es weiß lassen, aber ich werde es ein bisschen zurückziehen, ein bisschen Transparenz darauf. Und es sieht gut aus. Aber ich glaube nicht , dass ich das hier tun werde , ist, dass ich weitermachen und oben eine Linie setzen werde. Das hat einen visuellen Stil. Warum mache ich diese Zeile? Ich will aber nicht, dass es zu stark ist. Eine wichtige Sache, wenn Sie visuelle Designarbeiten durchführen, ist, dass Sie normalerweise möchten, dass Ihre Kommunikation der stärkste Punkt auf der Seite ist. Das ist es, was Ihr Design tun soll. Es soll visuellen Absichten und visueller Kommunikation dienen . Sehen Sie jetzt, wie der Text ein wenig grau ist und diese Zeile hier weiß und stärker als der Text ist. Das wollen wir im Hierarchiebereich unseres Visuellen nicht. Also werde ich die Opazität dieser Linien zurückdrängen , damit Sie sie kaum sehen können. Nett. Das sieht gut aus. Okay, also werde ich weitermachen und vielleicht auch dieses Laden Baba zurückdrängen . Ich denke, die Textgröße ist in Ordnung. Ich werde das auch zurückdrängen . Cool. Und ich habe dieses Symbol eines Probit T, aber ich habe es hier in Illustrator. Also öffne ich Illustrator und gehe zu meinem Vermögen. Und Sie können sehen, dass ich hier alle Vorzüge habe, um diese Glühbirne bei T zu erfinden, auch diese hier, die Kanzel T selbst. Was ich also tun werde, ist, dieses falsche T in Illustrator über Schwarz zu platzieren . Und ich fange zuerst an , es weiß zu machen, damit du es weiß sehen kannst. Dann füge ich die Farbe hinzu. Ich weiß, dass wir in dem Beispiel , das ich dir gezeigt habe, Pink verwenden. Lass uns Spaß haben. Lass uns Blau benutzen. Und ich werde den Strohblau auch machen. Wir werden es ein bisschen ändern. Danke. Okay, jetzt habe ich das in meinem Illustrator. Ich gehe weiter und gehe zurück zu OPM, Adobe XD. Bevor ich das mache, kopiere ich diese Glühbirne von T. Ich gehe zu XD und platziere diese Glühbirne ein T auf dem Bildschirm. Es sieht ziemlich lustig aus. Dadurch wird es ein bisschen verkleinert. Cool. Okay, cool, das sieht ziemlich gut aus. Das nächste, was ich hier tun werde, ist, dass wir nach dem Ladebildschirm auf diese fremde Seite gehen . Und wir kommen hier rüber. Da steht der Bobo, nicht den Bildschirm kopieren. Löschen Sie hier einiges davon, behalten Sie dies im Blick. Und ich mache weiter und mache das zuerst zu einem dunklen Hintergrund , damit ich die Füllung hier rechts machen kann. Mach diesen Raum einfach so dunkel. Ich hole mir diesen Text hier, den LastName, ich mache den Text. Lass uns das weiß machen. Und lasst uns die Texte machen, die ich hier tatsächlich hinzufüge. Ich mache das mit den blauen Texten. Ich mag diese Farbe, also füge ich diese Farbe in meine Farbfeldpalette ein. Und ich werde einfach weiter hier durchgehen und diese Änderungen vornehmen. Lass uns weitermachen und das mit der E-Mail hier blau machen . Zündet an und schnappt euch meine E-Mail. Mach das blau. Das gleiche gilt für das Passwort und mach es weiß. Und mach weiter und mach das hier. Dieses Blau. Es gibt ein paar Zeilen hier. Lassen Sie mich also all diese Zeilen greifen und diese Linie weiß machen. Und ich habe eine sehr leichte Opazität darauf. Man sieht also, dass sie so weiß sind, aber das ist zu stark. Ich möchte diese visuelle Kommunikation hier hervorheben. Okay, und ich hatte ein altes Logo hier oben. Aber bevor ich das tue, lassen Sie mich hier den Call-to-Action-Text schreiben, Texas Ihnen sagt, was zu tun ist. Ich habe dieses Login. Ich mache weiter und mache das Login blau. Und ich melde mich auch hier an. Wir werden es schaffen. Lass mich das alte Logo von Illustrator holen. Also gehe ich hier rüber zu Illustrator. Ich habe dieses Logo und kopiere es, füge es in seinen Mangel ein. Zweitens kehren Sie etwas davon um. Also werde ich den Text dort weiß machen und das Gespräch Bubble White machen. Und ich werde die Knietexte schwarz machen . Wenn ich das kopiere. Ich füge dieses Logo ein. Hier. Sieht gut aus. Es sieht so aus, als sollte ich die Gedankenblase nicht berühren. Das ich, schau, ich kann Änderungen direkt in Adobe XD vornehmen, was nett ist. Schnappen wir uns dieses Logo. Lass es uns wieder in den Ladebildschirm stellen. Wie wär's damit? Wir werden ein wenig untersuchen, worüber ich vorhin gesprochen habe. Es geht darum, Dinge zu erkunden. Ja, lass uns das machen. Das sieht gut aus. Lass uns hier ein bisschen Spaß mit dem Logo haben. Lass uns das machen, lass uns diese eine Farbe hier mehr machen. Gipfelpunkt. Ja, das ist irgendwie cool. Durch ein bisschen offizielleres Design auf diesem Bildschirm hier, nur aus Lust, werden wir uns dieses Rosa hier schnappen. Ich mache daraus eine Farbpalette. Füge das hier zu meiner Farbpalette hinzu. Jetzt kommt Pink, richtig? Wählen wir die Ladetexte aus. Lass das P die Deckkraft erhöhen. Ja, los geht's. Das sieht lustig aus. Mir gefällt wo das hinführt. Was ist mit dir? Cool? Ordnung, setzen wir das tatsächlich, probieren wir etwas aus. Stellen wir die Deckkraft hier hin und die Tasse hier. Es sieht cool aus. Okay, also was wir hier vor sich haben ist, dass ich ein paar Dinge habe. Wir verwenden die Farbe Blau. Und wir haben Blau für die Formulare und wir haben Blau für die Schaltflächen und wir haben das Blau für die Anmeldung. Aber lassen Sie uns eine starke Aktionsfarbe für Dinge erstellen , auf die Sie klicken können. Also lass uns diese rosa machen. Wir werden dieses Thema bei allen Designs, die wir machen, beibehalten . Wir möchten, dass eine Aktionsfarbe all die Dinge darstellt , auf die Sie klicken können. Nicht alle, aber die meisten Dinge, auf die Sie auf die primären Aktionen pro Bildschirm klicken können . Gehen wir also zum nächsten Bildschirm, dem großen Bildschirm. Hier haben Sie das gesamte Make-up der Homepage der Bulb of T-Anwendung. Und genau wie ich es mit dem Login oder der Anmeldeseite gemacht habe, werde ich es hier kopieren. Und ich werde Ihnen ein bisschen zeigen , wie Sie das aufbauen können. Ich werde einige dieser Elemente hier löschen. Wir fangen bei Null an. Sehen Sie diese kleine gepunktete Linie hier. Dies zeigt die Unterkante der Falte an. Dies ist der Inhalt, den Sie nicht sehen können , wenn Sie ihn auf einen Bildschirm laden. Also kann ich gehen. Hier oben rechts, wo Play steht. Ich kann mir diesen Prototyp ansehen. Und Sie können sehen, ich kann die Tab-Leiste hier sehen , sie ist in Sicht, aber wenn ich sie unter die Falte bewege, sehen Sie, wie sie auf dem Betrachter links hier verschwindet. Das ist es also, was mir diese kleine gepunktete Linie anzeigt. Lassen Sie uns also weitermachen und damit beginnen , hier draußen ein wenig von dieser OPT-Anwendungsregisterleiste zu erstellen. Sie können also sehen, dass ich diese Symbole löschen werde und sie aus dem Illustrator holen nur um sie neu zu erstellen. Ich habe den schwarzen Balken hier. Es ist nur ein schwarzes Rechteck. Hier oben rechts. Wenn du siehst, wohin meine Maus zeigt, beim Scrollen eine feste Position sagt, beobachte, was passiert, wenn ich das nicht aktiviert habe und ich gehe auf Play, wodurch ich den Mach sehen kann. Und sieh dir das an. Wenn ich scrolle, geht dieser schwarze Balken nach oben. Das will ich nicht. Ich will, dass das repariert wird. Ich mache weiter und drücke hier die Checkbox, feste Position beim Scrollen, drücke Play und schau, es bleibt unten. Was ich mit der Tabulatortaste oder Wische, scrolle nach unten. Gehen wir zurück zu Illustrator. Ich schnappe mir hier dieses kleine Symbol, das Glühbirnen-Etsy-Symbol mit etwas Farbe darin. Ich gehe zurück zur XD-Anwendung. Ich füge es ein. Das Falsche. Lass mich wieder hier rüber gehen. Lass mich einfach die Glühbirne des T-Symbols nehmen und ich werde sie hier einfügen. Lass mich den Betrachter loswerden. Fügen Sie es hier direkt in die Mitte dieser Leiste ein und Sie können sehen, dass es hilft. Die Guides haben mir geholfen zu wissen, ob es zentriert ist. Ordnung, es sieht gut aus. Gehen wir rüber zu meiner Illustrator-Datei. Das sind alle meine Icons , die ich live brauche. Schnappen wir uns dieses kleine Profilsymbol. Ich werde es in Illustrator weiß machen. Ich kopiere es. Komm rüber zu XD. Ich werde es platzieren und etwas verkleinern. Ordnung, ich mache weiter und gruppiere mich. Es erleichtert die Auswahl der Gruppe. Ich werde es ein bisschen verkleinern. Platziere es hier drüben. Lass mich das andere Symbol in Illustrator schnappen . Ich schnappe mir den Einkaufswagen, lege ihn hinten drüben, schwarz hier und mache ihn weiß. Damit ich es sehen kann. Geh zurück zu XD. Ich werde es hier auf den Tab setzen. Die Barmischung befindet sich relativ zu allen anderen Elementen in derselben Größenposition . Und visuell raus. Nun, welcher Bildschirm neu aufgebaut wird, ist der Startbildschirm, es ist der Bulbar-T-Symbolbildschirm. Wenn du also nicht auf dem Bildschirm bist, werde ich diese Abschnitte ein bisschen veröffentlichen. Ich werde die Opazität bei etwa 50 machen, 45 Prozent sollten in Ordnung sein. Okay, lass uns weitermachen und sicherstellen, dass diese das feste Element haben. Also schnappe ich sie mir und aktiviere das Kästchen hier auf der ersten festen Position beim Scrollen Ich werde es gruppieren Command G, um sicherzustellen , dass es gruppiert ist. Sie können dies auch tun, indem Sie hier eine Gruppe erstellen, mit der rechten Maustaste klicken und eine Gruppe erstellen. Lassen Sie uns das ganz schnell in der Vorschau anzeigen. Sorgt dafür, dass es unten bleibt. Es sieht nicht, was passiert ist. Ich glaube, es hat es entfernt , als ich es gruppiert habe. Also lass es uns noch einmal machen. Feste Position beim Scrollen. Zeigen wir eine Vorschau an. Und es bleibt unten. Nett. Okay, aus Zeitgründen habe ich diese Fotos und das Beispiel, das ich dir gezeigt habe, ich habe sie auf einem Foto. Sie können also sehen, dass ich auf den High-Fidelity-Prototyp eines bereits gebauten Prototyps eingehen werde den High-Fidelity-Prototyp eines , der P verwendet oder ein bisschen mehr Spaß hat als einer, den wir bauen . Wir werden hier Blau verwenden. Ich werde mir diese Fotos einfach schnappen, damit wir sie hier haben und sie zur Seite legen. Ordnung, also als Erstes wollen wir hier machen, also lasst uns das Skelett zur anderen Kunsttafel hier holen . Also das Silber. Nur für den Moment. Hier sind die Fotos. Großartig. Lass uns diese normale Fälschung sagen. Er wurde hier geboren. Und Sie können sehen, dass ich den Text hier habe. Lass uns das einfach kopieren. Und das sieht ungefähr richtig aus. Das ist ziemlich gut. Lassen Sie uns diesem Schwarz einen kleinen Farbstil hinzufügen. Also immer wenn ich Grace benutze, mache ich gerne ein bisschen mehr bläuliches Grau mit etwas Blau in deiner Anmut. Hilft immer ein bisschen. Ordnung, das sieht gut aus. Lass uns diesen Hinzufügen-Button hier anwenden. Alex. Ein bisschen gut. Es ist ein bisschen stark. Also frage ich mich, ob wir das Quadrat überhaupt brauchen. Vielleicht schreiben wir einfach die Texte dort. Wir werden das hier etwas größer machen, damit ich den Textbereich von Adobe XD gehen kann. Lass uns vielleicht 25 gehen, lass uns 27 Schriftgröße machen. Okay, lass uns nett und groß und nett sein. Okay, cool. Fügen wir den nächsten hinzu. Ich füge das nächste Foto hier hinzu. Ich werde denselben Text nur aus Zeitgründen verwenden, ich werde ihn kopieren. Eine Sache, die ich tun werde, ist es nach oben zu schieben. Sehen Sie also, wo „ Bring to Front“ steht. Ich werde das nach vorne bringen. Und ich kopiere es und verschiebe es einfach so hierher. Es sieht gut aus. Ich werde diese Hinzufügen-Buttons ein wenig nach unten verschieben . Okay, lass uns das nächste Foto machen. Und das wollen wir unter der Tableiste. Also wenn alles unter der Tableiste scrollt. Und wieder werde ich das Overlay hier kopieren, aber es wird laufen. Und dann lass uns den hinstellen Milchtee hier drüben probieren. Hoffentlich wirst du hungrig oder durstig nach einer Glühbirne T. Ich werde sicherstellen , dass dieses Element hier oben ist. Also bring es nach vorne, bring es runter. Okay, und jetzt schnappe ich mir diese Tableiste und stelle sicher, dass sie sich auf der Vorderseite von allem befindet. Sie haben immer noch ein bisschen Platz hier. Um Spaß zu haben, wollen wir dem Zuschauer zeigen, dass wir noch etwas Käse haben werden. Wir haben nicht alle Geschmacksrichtungen , die wir im Moment haben könnten. Also werde ich hier einen kleinen schwarzen Abschnitt machen. Ich bringe es nach hinten. Und es ist tatsächlich ein bisschen bläulich schwarz hier. Also zurück zu unserem Thema dort. Ein blaues Symbol hier drüben, das mag, ja, los geht's. Schnappen wir uns das hier. Fügen wir es hier genau in die Mitte ein. Sehen Sie sich mehr Geschmacksrichtungen an. Das ist Copy That. Lass uns mehr Aromen daraus machen. Lass uns das einfach blau machen. Und lass uns das machen, behalte es weiß. Also verwenden wir hier hauptsächlich diese rosa Farbe für Actionfarben. Also lasst uns nichts tun. Peak hier ist, halte das blau. Ich schiebe alles zurück. Steuerung Shift linke Klammer. Oder wenn Sie an einem PC sind, ist es die linke Klammer Control Shift. Wenn du auf einem Mac bist, ist es die linke Klammer Command Shift. Aber ich mache es auch andersherum. Schicken Sie zurück. Lass uns weitermachen und jetzt schauen, ich gehe zum Vorschaubereich von XD und sehe mir das Video an und sehe gut aus. Ich scrolle hier durch meine Fovea. Ich habe bald ein paar Geschmacksrichtungen. Tableiste sieht es etwas zu eng aus. Also lass uns wieder hierher gehen. Ich werde den Vorschau-Viewer schließen. Verschieben wir diese Kunsttafel etwas nach unten und geben uns etwas mehr Platz. Schnapp dir das, es gibt mehr Aromen und Bubble Tea hier. Zentriere es im Weltraum. Und geh weiter und gehe zurück in den Vorschaumodus. Stellen Sie sicher, dass ich auf der richtigen Kunsttafel bin. Und großartig. Ich schaue mir eine Vorschau an. Nett, sieht bis jetzt nach einem schönen Bild aus. Cool. Gehen wir zu einer anderen Seite, die zeigt, was passiert, wenn ich hier auf die Schaltfläche Hinzufügen klicke. an dieser Stelle diese Schauen wir uns an dieser Stelle diese Seite im Wireframe-Bereich an. Es sieht also ungefähr so aus. Ich mache weiter und kopiere es. Auf diese Weise können wir das visuelle Design daneben anwenden. Sie können also auf diesem neuen Bildschirm sehen, was ich tun werde, ist das alte Foto, das ich hier habe, loszuwerden . Und ich nehme dieses neue Foto, aber über T. Und ich mache ein Rechteck darüber. Um dieses Rechteck hier zu erstellen. Wo ich ein bisschen von dieser Glühbirne sehen konnte, ein T. Basierend auf dieser Linie hier auf der nächsten Kunsttafel. Ich werde diese beiden Elemente auswählen. Ich komme hier nach oben. Und ich werde die Schnittbereiche machen, die kleinen zwei Quadrate , die sich schneiden. Und bumm, ich kann die Glühbirne bei T zuschneiden und ich kann sie ein bisschen runterschicken. Großartig. Schicken Sie es jetzt an den Ende der Seite. Sieht gut aus. Lass uns weitermachen und dort die weiße X-Markierung entfernen. Ich hole mir eine Farbe, die wir gebrauchen könnten. Okay, also lassen Sie uns hier zu unserem ursprünglichen Gedanken zurückkehren, nämlich dass die Bereiche, die anklickbar sind, Bereiche sind, in denen wir diese rosa Farbe machen werden. Also lass uns gehen und all diese kleinen Rechtecke rosa machen, nur um darauf hinzuweisen, dass dies die anklickbaren Bereiche sind. Dieses kleine Weiß ist hier ziemlich stark, also gehen wir zurück und machen hier nur einen weißen Umriss, das Quadrat. Machen wir das, machen wir 30%. Ich schnappe mir hier auch den anderen, mach das um 30% weniger. Sie können sehen, dass sie sich überschneiden. Wir wollen dort also keine Opazität machen. Wir wollen es eigentlich nur grau machen. Also lasst uns ein schönes Grau finden , das wir verwenden können und das ein bisschen Blau enthält. Stärker. Da hast du es. Schnappen wir uns das. Ich mache weiter und mache daraus ein Farbmuster, damit ich diese Farbe auch problemlos wiederholen kann. Wählen wir das nächste Grau aus. Jetzt heben wir den Inhalt hervor, nämlich die Milch, das normale T mit Eis. Ordnung, das sieht gut aus. Das andere Design , das ich dir gezeigt habe, wir hatten diese Knöpfe hier. Sie wurden skizziert. Also lasst uns weitermachen und diese Umrisse machen. Sie sehen aus, als wären sie gerade gefüllt, als wären sie aktive Staaten. Also klicke ich darauf und entferne die Füllung. Und du kannst sehen, dass ich es habe. Symbole, also werden sie alle dasselbe tun , was ich von ihnen möchte, was großartig ist. Ich habe dir im Wireframing-Video beigebracht, wie man Symbole macht. Wenn Sie also neugierig sind, wie man ein Symbol erstellt, können Sie sich dieses Video ansehen. Aber ich habe diese Symbolbibliothek hier links von allen Buttons und allem, was ich in diesem Design erstellt habe. Also werde ich den Strich etwas größer machen wenn sie sehen, dass die beiden großartig aussehen. Und sieh dir diese Bobo Tapioka-Texte an. Lass es uns weiß machen. Markieren Sie diesen Inhalt. Großartig. Okay, und Sie können sehen, dass es sich auf dem Bildschirm daneben ändert. Das liegt daran, dass ich all dies als Symbol habe, wodurch Symbole bewertet werden, wenn ich alle drei Hinzufügen-Schaltflächen beobachte. Sie ändern ihre Farbe, wenn ich sie in Echtzeit ändere. Das ist es, was ein Symbol bewirkt. Es ist also sehr, sehr praktisch, hier Symbole zu erstellen. Also lass uns weitermachen und einen Teil der App-Buttons entfernen , die ich habe. Schnappen wir uns den Anmelden-Button. Lass es uns hier ziemlich einfach halten. Die Schaltfläche „Tempo zur Anmeldung“ bevor ich das mache, werde ich ein Symbol erstellen. Ich werde dir ganz schnell zeigen, wie man ein Symbol für die Anmeldung macht. Fügen Sie einfach den Plus-Button hier zum Symbol hinzu. Lass mich einfach die Texte holen. Und ich nenne es den primären Knopf hier auf der linken Seite. Aber wann immer ich es benutzen möchte, kann ich es einfach auf den Bildschirm ziehen. Also lasst uns weitermachen und zurück zu Wir entwerfen hier. Ich schnappe mir das Symbol und wir platzieren es hier auf dieser Kunsttafel. Ich werde hier Texte per Anmeldeschaltfläche eingeben. Ja, das sieht gut aus. Okay, wir haben hier ein nahes Symbol. Lassen Sie mich zuerst das Symbol holen, das ich in Illustrator habe. Also habe ich es hier in Schwarz. Ich gehe zurück zu Adobe XD. Ich werde es platzieren. Sieht gerade ziemlich groß aus. Lassen Sie uns das verkleinern. Lass uns auch daraus ein Rosa machen. Und jetzt können Sie auf dieser Seite sehen, dass alles, was antippbar ist, pink ist. Ich verwende also die hellste Primärfarbe, um dem Benutzer anzuzeigen, was antippbar ist und was nicht. Und das ist ein wichtiger Aspekt beim Design der Benutzeroberfläche. Verwende deine Grundfarbe. Verwenden Sie eine helle Farbe, machen Sie sie stark, und das sind die wichtigsten Aktionen, die Sie für Ihren Benutzer ausführen möchten. Also werde ich weitermachen und den Bildschirm daneben löschen. Oh, wir haben diesen Text vergessen. Lass uns weitermachen und diesen Textblock erstellen. Cool. Es ist ziemlich gut. Okay, also werde ich diese Seite hier löschen und einen weiteren Button für den gefüllten Zustand dieser Tapioka erstellen . Nehmen wir an, der Benutzer tippt hier auf diese klebrige Tapioka. Was ich tun werde, ist es zuerst von den Symbolen zu lösen , weil ich nicht alle Symbole ändern möchte. Ich wähle nur den Hintergrund aus. Ich werde es füllen. Ich fülle es mit dem Rosa. Cool. Sieht gut aus. Es ist fast so, als hätte der Benutzer auf diese Schaltfläche getippt. Ordnung, also verstehen wir uns hier. Sie können hier sehen, wie wir eine ziemlich einzigartige, mit Formularen ausgefüllte Seite erstellt haben , melden Sie sich an. Wir haben die Homepage hier erstellt und fügen unseren Fotos und Overlays Stile hinzu. Eine Tableiste, die ich dir in Illustrator gezeigt habe, ist am besten. Alle Ihre Icons in einem Bereich. Wenn ich überhaupt wollte, kann ich all diese Icons hier kopieren. Und ich kann sie hier in XD drüben in nur einer Kunsttafel platzieren , damit ich sie aufnehmen kann, sie kommen als Vektor. Ich kann die Farben ändern. Wenn ich sehen will, könnte ich den Pfeil ändern. Lass uns hier weitermachen. Ich mache noch eins für dich. Ist dieser Kartenbildschirm. Ich finde dieses Match Green echt cool. Gehen wir also auf den Bildschirm. Lass uns hier etwas Liebe hinzufügen. also Die stärkste Kommunikation an dieser Stelle ist also, dass wir das Bild der Karte haben, aber es ist auch die geschätzte Ankunftszeit. Lass uns weitermachen und mir hier ein Grau für meinen Namen holen. Cool. Ich weiß meinen Namen. Ich muss nicht an meinen Namen erinnert werden und wir werden diesen Text weiß lassen , damit er wirklich stark ist. Ich habe das Kartenbild hier nicht. Wenn ich also zu Adobe XD gehe, hier ist mein Export, mein Illustrator. Ich habe meine Kartendatei hier. Ich kann kopieren und einfügen. Es. Kann direkt in Adobe XD gehen, es hier in meinen Bildschirm einfügen, genau wie ich es hier getan habe. Fügen wir dieser Linie hier einige kalte Farbdesigns hinzu. Also werde ich die Deckkraft erhöhen und sie blau machen. Lass uns weitermachen und dieses Logo-Symbol ein wenig nach oben bringen. Wir werden es breit halten. Schnappen wir uns hier unser bobo-T-Symbol von oben. Aber ich werde hier ein paar Dinge in diesen Eigenschaften hinzufügen . Diese kleine bauchige Sektion, ich werde diese Gipfel erreichen um ein bisschen Spaß zu haben. Es ist ziemlich klein. Wir könnten es wahrscheinlich kriegen. Lass uns dieses Dürrelicht oder Blau so auswählen . Viel Spaß mit diesem. Ich schnappe es mir. Ich komme zurück, geh zurück zu meinem Ziel. Und ich werde die Armut loswerden , die ich hier im Zentrum habe. Lass uns das hier einfügen. Dieser ist ein bisschen cooler. Ordnung, ein Ort, an dem sie das ein bisschen in die Luft jagen werden. Ja, los geht's. Cool. Lass uns dieses Symbol, das kleine Kartensymbol, blau machen. Und das, was auf dem Bildschirm antippbar ist , ist der stornierte Fall, den ich stornieren musste , und alle entweder weiß stornieren. Aber lehnen wir uns hier mit ein bisschen Grau zurück. Ja, los geht's. Das sieht gut aus. Ordnung. Werfen wir noch einmal einen Blick auf das Finale. Ich habe das andere endgültige visuelle Design hier drüben geplant. Du siehst, ich habe alle Bildschirme echt hübsch. Ich habe alle Buttons als Symbole gesetzt. Nehmen wir an, ich ändere diesen nächsten Button in eine andere Farbe wie Blau. Schau was passiert. nächsten Schaltflächen ändern den Ballon. Das ist ziemlich nett. Ich muss Buttons alle als Symbole hinzufügen. Wenn ich also einen Hinzufügen-Button in eine andere Farbe ändere, sagen wir mal gelb, werden sie alle gelb. gleiche gilt für diese Tapioka. Wenn ich also einen der Ränder in Orange ändere, kannst du sehen, dass sie alle orange werden. Das gleiche gilt für das x. Ich habe das x2 geändert. Sagen wir blau. Schau, wie sie alle blau werden, jede Farbe, die ich wirklich will. sind alles Symbole, daher ist es für mich sehr einfach zu arbeiten. Schauen wir uns hier den Prototyp an. Im letzten Video habe ich behandelt, wie man einen Prototyp entwirft, damit Sie ein wenig von den Dingen lernen können , die ich Ihnen an dieser Stelle zeige. Und hier ist der letzte Bildschirm, das endgültige Design. Und ich kann weitermachen und meinen Vor- und Nachnamen, mein Passwort, meine Anmeldung, Grafiken und unter dem T, normal, süß machen meinen Vor- und Nachnamen, mein Passwort, . Was ist jetzt halb süß? Dann wurde ich halb süß hier. Wir können die große Tapioka machen, drücken, hinzufügen. Nett. Sieh dir diese Benachrichtigung in meinen Einkaufswagen an. Geh zurück. Es sieht so aus, als ob ich mit meiner Bulbar gut . Ich kann Weiter drücken und meine Adresse eingeben. Ich gebe meine Kreditkartendaten ein und bumm, ich habe T bei Lieferung überholt. Eine Sache, die Sie platzieren könnten, zu der Sie gehen können Ich habe über diese Website zum Erstellen eines Wireframe-Videos gesprochen , ist, dass Sie hier auf eine Website namens Noun Project C gehen können . Und schau dir das an. Ich kann jedes Symbol bekommen, das ich will. Sagen wir einfach Eiscreme. Eiscreme. Zentrum. Schau, was passiert. Ich erhalte eine ganze Reihe von Eiscreme-Ikonen. Also schnappen wir uns eines dieser Icons hier. Welches wollen wir haben? Schnappen wir diesen. Das ist ein netter. bekomme dieses Symbol, grundlegender Download und mache es von meiner Website, SVG, das heißt skalierbare Vektorgrafik. Und jetzt kann ich das nehmen es in Illustrator ziehen. Ich habe dieses Symbol und kann die Farben ein wenig ändern. Nehmen wir an, ich möchte dieses Symbol blau machen. Ich kann es blau machen, kopiere es. Und ich kann es einfach so in Adobe XD einfügen. Auch keine Eiscreme-Symbole. Ziemlich cooles Zeug. Stimmt's? Ich hoffe, Sie lernen wieder ein bisschen über visuelles Design, es erfordert viel Übung, also üben Sie es einfach. Es ist okay, wenn deine Designs nicht so aussehen wie meine. Es braucht viel Zeit, um an bestimmte Punkte zu gelangen, an denen Sie sehr einfache visuelle Design-Handwerke anwenden können. Aber hoffentlich ist dies eine gute Startanleitung für Sie. Ordnung, also lasst uns weitermachen und uns hier die nächste Videoserie ansehen. Also begleite mich für das nächste Video, das ich ein bisschen sprechen werde. Was macht einen guten Design-Lebenslauf aus. Sie können also einige dieser visuellen Handwerke, die Sie lernen, mitnehmen . Sie können sehen, wie unser gutes Design in freier Wildbahn wieder aufgenommen wird. Ich gebe Ihnen die besten Beispiele und auch Beispiele , die nicht so gut sind. Und es gibt Ihnen hoffentlich eine kleine Richtlinie, was zu tun ist, wenn Sie einen Design-Lebenslauf erstellen. Wie immer danke fürs Zuschauen. Ich hoffe du hast etwas gelernt und auf Wiedersehen. 13. Entwirf und Don'ts mit Do's: Alles klar. Es sieht so aus, als hätten wir viele Kurse beendet. Auch hier haben wir Ziele und Personas und Interviewskripte gemacht. Recherche. Wie synthetisieren Sie Ihre Forschung. Problemanweisungen, Aufschlüsselung einer Customer Journey, Karte, Skizzieren, Wireframing, anklickbare Prototypen, Benutzertestbasis des Designsystems und Anwenden von Design auf Ihre Wireframes. Cool, also schauen wir uns die Best Practices an, wenn es um Ihren Design-Lebenslauf geht. Und was ich Ihnen hier zeigen muss, ist das, was ich für das Recruiting-Team in meinem Unternehmen gemacht habe. Und ich habe das für sie erstellt, damit sie sehen können, wie ein guter Design-Lebenslauf aussieht und wie ein nicht so guter Design-Lebenslauf aussieht. Also lasst uns rübergehen und einen Blick darauf werfen. Das hilft mir also, einen guten Designer zu finden. Ich habe kein Bewertungssystem, das ich verwende. Und wenn Sie hier ein wenig nach unten scrollen, habe ich wirklich eine Liste von Fragen, die mir helfen sollten, einen Lebenslauf zu bewerten. Bevor ich zum nächsten Schritt gehe, der sich das Portfolio anschaut. Dann schaue ich mir eine Fallstudie an. Hoffentlich haben sie ein paar Fallstudien. Dann führt es zu einem Telefonanruf. Dieser Anruf führt zu einem ganztägigen Interview mit dem Team und mir. Und dann fällen wir ein Urteil über das AllDay-Interview und hoffentlich kann der Designer unserem Team beitreten und wir werden zusammenarbeiten. Lassen Sie uns also die Liste der Dinge durchgehen, die Ihr Lebenslauf haben sollte, um sicherzustellen, dass es sich um einen gut gestalteten Lebenslauf handelt. Hat das TextField zunächst eine Ausrichtung und sind sie nicht überall? Das ist der Fall. Sie können dieses Kästchen ankreuzen. Ist der Abstand zwischen Absätzen und Titeln konsistent? Markiere das Kästchen. Das Layout und die Typografie sehen benutzerdefiniert aus und sehen nicht so aus, als wäre es in Microsoft Word erstellt worden. Auch hier sollten Sie maßgeschneiderte Tools verwenden. Schwarz ist nicht die einzige Farbe, die verwendet wird. Es gibt mehr als eine Schriftgröße. Es gibt keine Rechtschreibfehler und es liest sich gut. Es wurde über benutzerzentriertes Design, Design Thinking, Recherche und Tests gesprochen. Es wird über die Zusammenarbeit mit anderen Team- und Produktmanagern und Kunden gesprochen. Und es gibt einen Link zu einem Portfolio, um den Rest der Arbeit zu sehen. Okay, schauen wir uns jetzt Beispiele an. Okay, hier ist ein gutes Beispiel von Franklin Jam Heart. Und hier sind ein paar Beispiele auf der rechten Seite und einige Callouts, warum. Es ist ein guter Lebenslauf. Es sieht also benutzerdefiniert aus und es hat schöne Layouts, sauber. Es hat einen konsistenten Abstand, der überall ausgeführt wird. Es hat eine schöne Topographie-Hierarchie, die Rechtschreibung sieht gut aus. Hat eine gute Ausrichtung, verwendet mehr als ein Stützenraster. Hat mit dem Portfolio verknüpft. Sie können genau dort als Portfolio-Link sehen. Werfen wir einen Blick darauf. Ein weiteres gutes Beispiel. Hier ist eine vertraute Evelyn selbst gebrandmarkt. Es ist ein schönes und einfach zu lesendes Layout. Es gibt einen guten Gebrauch des Typs. Geben Sie ein. Die Typhierarchie hat eine schöne Ausrichtung, sauberen Abstand, der wirklich organisiert aussieht. Okay, schauen wir uns an, wie ein nicht guter Design-Lebenslauf es aussieht. Warum ist das nicht so gut? Das Layout ist nicht sauber und es ist schwer viel zu lesen. Der Abstand ist nicht konsistent. Schlampige Topographie-Hierarchie. Die Ausrichtung könnte besser sein. Man kann sehen, dass die Dinge oft mit den Kugeln übereinstimmen. Und es verwendet ein Einspaltenraster, ein riesiges Raster. Schauen wir uns eine andere an, die nicht so gut ist. Warum ist das hier? Es sieht so aus, als wäre es in Microsoft Word hergestellt worden und kein Design-Tool. Schwarz ist die einzige Farbe, die verwendet wird. Die Typhierarchie, die Hierarchie ist nicht so gut. Es ist ein bisschen besser als das letzte, aber immer noch nicht so gut. Der Abstand ist nicht konsistent. Sehen Sie hier viele seltsame Abstände dazwischen. Das Layout scheint nicht benutzerdefiniert zu sein. Um hier weitere gute Beispiele zu bekommen. Viele weitere gute Beispiele. Sehr sauber. Und sieh dir das Zweispaltenraster hier an, rechte Spalte. Und sieh mal, es gibt immer noch Schwarz für alle Texte, aber sie sind Topographiebehandlung ist hier wirklich nett. Einer auf der linken Seite ist Olivia mit Bailey hier drüben mit ganz Schwarz, aber es ist viel sauberer, bis sie sich Zeit in ihrem Design- und Typografie-Layout genommen haben. Dieser, auf dem Hallo steht, hat eine nette Einführung in die Persönlichkeit. Es ist eine Jane Doe, es ist eine Vorlage. Es ist nett. Es ist ein schönes, sauberes Layout. Gleiche gilt für das hier. Das ist wirklich nett hier. Von Justin. Hier ist ein interessantes. Hier ist ein Byte Molina. Schön und lustig, wer konnte keine Farben verwenden und die orangey rötliche Farbe mit dem Blaublau mögen. Und hier ist eine von einem Freund von mir namens John. John gehorchen sind wirklich solider Lebenslauf hier, um viel Zeit, dies zu gestalten. Okay, schauen wir uns noch ein paar an. Nicht so gute Beispiele. Sehen Sie, wir haben nur Layout-Farben sind ein bisschen seltsam. Dieses Rot und Blau scheinen ein wenig zu vibrieren. Und die Farbpalette, diese Mary Cunningham irgendwie überall, nicht wirklich, könnte ein bisschen mehr Hierarchie gebrauchen. schlimm ist es allerdings nicht. Dieser hier drüben und der blaugrüne Textabstand ist überall irgendwie inkonsistent. Schwer zu lesende Ausrichtung, Topographie, Hierarchie. Es ist diese Vorlage hier, nur eine riesige Kolumne. Genau da hast du es. Es gibt also die Grundlage für viele gute Beispiele für wirklich gut gestaltete Lebensläufe und nicht so gute Projektfortsetzungen. Hoffentlich gibt Ihnen das eine kleine Richtlinie. Wie immer. Danke nochmal. Und wenn Sie gehen möchten, schauen Sie sich das letzte Video dieser Serie an, das ist die Fallstudie. Ich gebe dir den Umriss. Ich zeige Ihnen Beispiele für Fallstudien. Und auf diese Weise können Sie einen guten Überblick über den UX-Prozess haben. Viele Methoden verwenden wir, um einen guten Design-Lebenslauf zu erstellen und wie eine gute Fallstudie aussieht. Okay, hoffentlich sehe ich dich dort. Tschüss. 14. UX Design: Ordnung, willkommen, wie man eine UX-Design-Fallstudie erstellt und 101 Klassen für Benutzererfahrung entwirft. Cool, wir sind in Klasse 13. Dies ist die Fallstudie Gliederungskurs. Hoffentlich haben Sie von Anfang an alle Videos angesehen, wie Sie Ziele setzen und Personas machen und dann Benutzerinterview-Skripte erstellen, recherchieren, Ihre Ergebnisse synthetisieren, eine Problemaussage schreiben, eine Problemaussage erstellen Customer Journey Map , machen Sie Skizzen, erstellen Sie einen Drahtgitter, machen Sie ihn anklickbaren Prototyp, führen Sie Benutzertests mit diesem Prototyp durch. Es gibt Synthesizer-Erkenntnisse aus dem Testen der Basis eines Designsystems, wie Sie visuelles Design auf Ihr Drahtgitter anwenden können. Und das letzte Video hier war Best Practices, wenn es um die Gestaltung Ihres Lebenslaufs ging. Und jetzt schauen wir uns die Umrisse der Fallstudie an. Dies beschreibt also, was Sie tun müssen, um es zu einer wirklich, wirklich guten Fallstudie zu machen . Und alle Tools und Techniken, die Sie in den vergangenen Videos gelernt haben, oder wie Sie alle Inhalte erstellen, die Sie für diese Fallstudie benötigen. Und was Sie dann tun werden, ist, dass Sie eine visuelle Geschichte erstellen. Das ist die Fallstudie. Es ist ein Umriss einer Geschichte über die Arbeit der Benutzererfahrung. Also lasst uns einfach direkt darauf eingehen. Lass mich die Website öffnen. Wir fangen hier mit UX Honey und UX Honey.com an. Dies ist die Seite, die ich an der Universität unterrichte. Und wenn Sie hier auf die UX klicken, gelangen Sie zu allen Methoden, die wir unterrichten. Ich unterrichte an der Universität. Und wir werden das treffen, den Umriss der Fallstudie. Und wir drücken den Ansicht-Button hier drüben. Und es wird uns zum Umriss einer guten Fallstudie führen. Dann zeige ich dir eine ganze Reihe von Beispielen. So können Sie hier sehen, dass ich ein Beispiel namens Pressen auf dieser Seite habe ich für Barnes und Noble gemacht habe, wie man vor Jahren ein Buch erstellt. Und eine weitere Fallstudie für einen sogenannten SUV-Kocher für ein Unternehmen namens ANOVA. Also zeige ich dir die Beispiele dafür, wie das aussieht. Aber lasst uns zuerst den Umriss durchgehen. Ähnlich zu sagen, dass Kapitel dessen, was eine gute Fallstudie ausmacht. Und dann zeige ich dir, wie das optisch aussieht. So wie Sie es in den letzten beiden Beispielen der Fallstudie gesehen haben, habe ich Ihnen gerade ganz oben gezeigt. Das erste, was Sie tun möchten, ist, dass Sie das Wow zeigen möchten, dies ist der Bildschirm des Endprodukts, der schönste Bildschirm, den Sie haben. Und es kann interaktiv sein, es kann ein Video sein, aber das Produkt zeigen. Also das Endprodukt hier, aber was Sie tun wollen, ist nicht mit dem Endprodukt zu enden. Sie möchten eine Geschichte darüber erzählen, wie Sie zu diesem Endprodukt gekommen sind. Dann scrolle ich nach unten. Als nächstes möchten Sie einige Kontexte angeben, den Produktnamen, die Unternehmensmission angeben, das Logo zeigen Ihre Rolle dabei zeigen. Und Sie können es visuell gestalten User Design Handwerk und visuell machen. Zeigen Sie dann das Haus, sprechen Sie ein wenig über Ihren Prozess oder Sie können es die Kapitel der Benutzererfahrungsarbeit nennen , die Sie recherchiert haben , und dann haben Sie einige Problemvalidierung durchgeführt und Sie skizzieren einige Ideen, Sie prototypieren einige Ideen und testete dich, gefoult die Treue, das Design und wurde visuell. Und Sie können diese Kapitel aufrufen, Sie können sie visuell anzeigen, Sie können Ihren Prozess zeigen. Und denken Sie daran, dass wir zu Beginn der Videos über Geschäftsziele und Produktziele gesprochen haben. Hier zeigen Sie sie, zeigen die Geschäftsfarben, zeigen die Produktziele. Sprechen Sie dann über das Problem, das Sie lösen, und warum Sie zeigen können, dass Sie ein wenig von der Problemaussage zeigen können, dass dies das ungültige Problem ist. Und dann lernt man eine Reihe von Recherchen und macht ein validiertes Problem. Aber du kannst ein bisschen über das Problem und die Mission sprechen, auf der du bist. Okay, als Nächstes möchten Sie Ihre Benutzer vorstellen. Zeig die Personas, über die früher gesprochen wurde. Sie können sogar Bilder der Benutzer anzeigen, wenn Sie möchten. Denken Sie daran, ihre Probleme hervorzuheben und ihr aktuelles Verhalten hervorzuheben. Wir hatten eine kleine Zitatblase beschossen, die ich dir im Persona-Video beigebracht habe. Und dann haben wir über die Lernziele und die Usability-Skripte gesprochen. Sie können also ein wenig darüber sprechen, was Sie lernen möchten. Wenn Sie ausgehen und recherchieren. Du könntest das Drehbuch zeigen, das du gemacht hast. Sie können ein paar Fragen zeigen, die sich auf die Lernziele beziehen , und dann Ihre Forschung beginnen. Zeigen Sie also Fotos von Ihnen, die recherchieren. Dies sind Bilder, die mit Leuten auf der Straße oder dem Chef oder in Ihrem Büro sprechen, oder wo immer Sie Leute interviewen, die Sie zeigen, sich mit diesen Leuten zeigen. Zeigen Sie diese Leute mit Ihnen und machen Sie viele Fotos und machen Sie viele Bilder in diesem Bereich der Fallstudie. Und denken Sie daran, dass ich Ihnen gezeigt habe, wie Sie die Haftnotizen nehmen und Ihre Forschungssynthese durchführen und auch nach Mustern suchen. Dies sollten Bilder dieser Haftnotizen sein. Es sollte hier drin getippt werden, die ich lesen kann. Es sollte Muster geben, die Sie in diesem Abschnitt aufrufen , und was Sie lernen, zeigen die Validierungen. Welche Art von Problemen haben Sie validiert? Eines der Dinge hast du von deiner Person gelernt? Dann können Sie diese Customer Journey Map zeigen. Sie können den aktuellen Status des zukünftigen Status ausführen. In diesem Fall können Sie dies tun. Die Lösung, die wir in der Customer Journey modellieren. Dann können Sie Ihre Skizzen, Ihre Lösungskonzepte zeigen. Sie haben Storyboards, Papierprototypen. Und dann zeige die Drahtmodell-Designs, zeige die Bildschirme. Zeigen Sie dann den Benutzer-Test an. Dies sind also die Bilder von Ihnen, die ausgehen, und dies sollten Benutzer sein Ihre Designs in den Händen haben und sie verwenden. Davon solltest du Bilder haben. Sie können unterwegs Zitate anzeigen und dann die Synthese zeigen. Dies sind die Muster pro Bildschirm. Was haben Sie aus Benutzertests gelernt? Dies ist der Bereich, um das zu nennen. Sie können auch hier weiterhin Anführungszeichen setzen. Dies sind Ihre Validierungen, dies sind Ihre Erkenntnisse, die Bildschirme zuordnen und das Designsystem anzeigen können . So können Sie ein wenig über Ihren visuellen Designprozess, Ihr Moodboard, zeigen. Es kann alle Ihre Schaltflächen anzeigen, Ihre Formularfelder Ihre Treue und Ihr endgültiges Design hier zeigen. Das ist also der Endteil. Hier zeigen Sie Ihren endgültigen Prototyp. All das visuelle Handwerk, das du gemacht hast. Die High-Fidelity-Mockups zeigen die Workflows. Wenn Sie mir einen Link geben möchten, auf den ich klicken kann um den Prototyp zu sehen, den Sie erstellt haben. Und das ist das Finale. Das macht also so ziemlich die meisten der verschiedenen Kapitel Ihrer Fallstudie oder die Geschichte aus, die Sie über die Arbeit der Benutzererfahrung erzählen , die Sie geleistet haben. Wie heißt, schau dir ein paar Beispiele dafür an. Wenn ich also zurück zum Benutzer zu UX honey.com gehe, habe ich hier einen Link, der als Fallstudienbeispiel bezeichnet wird. Wenn ich darauf klicke, gehen wir zur Presseseite. Dies ist eine Buchmacheranwendung, die ich vor ein paar Jahren für Barnes und Noble gemacht habe. Und es durchläuft das meiste von dem gleichen Umriss, von dem ich gesprochen habe. Es beginnt mit ein wenig über das Unternehmen, die Mission und meine Rolle. Wir beginnen mit einem kleinen Kickoff-Treffen hier, wo wir die Ziele definieren. Wir zeigen also die Produktziele, die Geschäftsziele hier. Ich hebe das Problem hervor. Ich zeige ein bisschen von dem Prozess, den wir durchlaufen haben. Ich stelle die Personas in diesem Fall vor, ich habe ein lustiger und illustrativer gemacht und ihre Verhaltensweisen, ihre Bedürfnisse, ihre Ziele, ihre Schmerzen, Persona hervorgerufen . Und ich hatte meine Lernziele sind meine Annahmen hier, über die ich lernen möchte. Und hier sind die Lernziele, die sich auf jede Person beziehen, über die ich lernen möchte, und einige Fragen, die ich für sie habe. Und dann fange ich mit der Recherche an. Hier spreche ich mit Leuten. Wir haben Remote-Interviews durchgeführt. Wir haben vor Ort mit Leuten mit Häusern der Leute interviewt und mit ihnen gesprochen. Und hier sind einige der Zitate, die sie haben. Seit den Dingen, die wir über sie gelernt haben. Hier ist unsere Synthese, all die Haftnotizen, alle Erkenntnisse, die zusammenkommen. Thematiere sie hier in Themen und Muster, die wir auf dem Weg gefunden haben. Hier sind unsere Erkenntnisse und Erkenntnisse, hier haben wir Recht gehabt, hier ist, woran wir uns hier geirrt haben, einige interessante neue Erkenntnisse. Wir haben hier einige Entscheidungen aus diesen Erkenntnissen getroffen, was wir tun werden und was wir lösen werden. Wir haben uns entschieden, uns nicht auf eine der Personen zu konzentrieren weil das Problem für sie nicht so überzeugend war. Unsere Mission war es also, ein Buchmacherlebnis zu schaffen , das es durchschnittlichen Handwerkern leicht genug macht, ein Buch online zu erstellen und dieses Buch in ein physisches Buch zu verwandeln und es für ein Buch online zu erstellen und dieses Buch in ein sie zu haben. Sie beginnen also mit einem digitalen Buch und die Plattform, die sie verwenden werden, ermöglicht es ihnen, ihre Inneneinrichtung, ihr Innere ihres Buches, die Vorder - und Rückseite des Deckels hochzuladen Innere ihres Buches, die Vorder . Und dann lassen Sie dieses digitale Buch zu einem physischen Buch machen und sie können es zu sich nach Hause schicken. Daher wollte er klare Schritte und hilfreiche Unterstützung in den Fehlermomenten der Erstellung dieser Lösung bereitstellen. Und wir möchten auch den Benutzer leiten. Hoffentlich machten sie sich Besorgungen. Also haben wir uns alle zusammengetan, wir skizzieren Konzepte. Wir haben ein Drahtgitterdesign erstellt. Einige Konzepte und einige Wireframes haben wir modelliert. So sehen Sie eine Vorschau des Drahtgitters an, wenn Sie möchten. Wir hatten Fragen und Annahmen pro Bildschirm, über die wir erfahren möchten, was ich Ihnen hier zeige. Und wir haben unsere Benutzer getestet und mit einer Reihe von Leuten nicht getestet. Wir hatten unsere Erkenntnisse basierend auf den Tests. Sie trafen Entscheidungen basierend auf den Tests und dem, wovon wir gelernt haben. Dann haben wir die Treue des Designs gewählt. Sie würden hier ein paar Bildschirme sehen und mir helfen, diesen komplexen Prozess zu lösen. Einige der Fehlerfälle, die hier auftreten könnten. Und wir besorgen uns ein paar Marketingseiten und schauen es uns dann an. Ich kann einen Link nehmen. Ich kann hier zur eigentlichen Website oder zum anklickbaren Prototyp gehen. Wir haben also die Marketingseite hier, die wir erstellt haben. Lassen Sie uns jetzt direkt in das Produkt einsteigen. Dies sind die endgültigen visuellen Designs. Zuerst wird es mich und mein Innenbuch fragen, welche Art von Druck, was ich mag, ich will Vollfarbdruck. Hört sich gut an. Ich hätte gerne eine Papierrückseite. Ich hätte gerne Whitepages, trimmen Sie die Größe sieben um zehn, und es wird hier etwa 0 bis 50 Seiten sein. Nennen wir das Leslies Buch. Der Projektname, den ich habe. Hier habe ich einen Taschenrechner berechnet. Dies kostet etwa 29 US-Dollar pro Buch. Ich kann verschiedene Änderungen vornehmen und die Preisänderungen im laufenden Betrieb sehen, während ich Änderungen vornehme. Sieht ziemlich gut aus. Lass uns weitermachen und weitermachen. Es wird mich dazu bringen, ein Konto zu erstellen. Also erstelle ich ein Konto. Und hier wird darum gebeten, das Innere meines Buches hochzuladen. Ich kann den Mauszeiger hier über diese Seite bewegen. So haben wir die Fehlerfälle behandelt. Und ich kann sehen und erfahren mehr über Ränder und Bilder und eingebettete Schriftarten und wie Trimmen sie aussehen. Ich kann mein PDF hochladen. Sie können sehen, dass es hochgeladen wird, sagen wir, ich hatte einen Fehler, aber das tut es, es bringt mich zurück in einem Highlights den Fehler hier. Ziemlich interessant dort. Also lass uns zurückgehen und mein Buch hochladen. Gehen wir zur Erfolgsroute. Jetzt kann ich eine Vorschau auf das Innere meines Buches anzeigen. Alles sieht gut aus. Jetzt kann ich zum Cover-Teil dieses Designs gehen und es ist das gleiche Schweben. Ich kann sehen, wo mein Innenleben des Covers aussehen würde. Die Ränder der Bilder würden gut abschneiden. Wo werden sie beim Einbetten von Schriftarten beschnitten. Und ich lade das Cover hier hoch. Jetzt gehe ich zur hinteren Abdeckung. Ich kann hier auf der linken Seite schweben, um dieselben Informationen zu erhalten. Sie können sehen, dass wir hier einen Barcode gesetzt haben. Lade die Rückseite hoch. Jetzt kann ich mein Rückgrat machen. Und schau, hier ist mein Buch mit dem Barcode und allem. Da ist mein Buchcover. Sieht ziemlich gut aus. Und dann kann ich hier zur Zahlung gehen, meine Versanddaten eingeben, meine Zahlungsdaten hier eingeben und kaufen. Und wir werden ein Gesetz machen. Da ist es. Das ist das Endprodukt dort. Das ist also ein Beispiel für eine Fallstudie, das auf das Endprodukt klickt . Lass mich dir noch eins zeigen. Rufen wir die Nova an. Dies ist ein SUV-Herd. Suv Cooker ist ein Gerät, das Fleisch, Gemüse und Fisch in Wasser kocht. Du steckst dieses Zeug tatsächlich in ein, du steckst dein Stück Fleisch in eine Ziploc-Tasche und dieses Gerät wird kochen. Ich heize die Wassertemperatur gerade genug auf , um das Fleisch über ein oder zwei Stunden zu kochen. Und es ist ein der besten Treffen, das Sie je hatten. Was wir also gebaut haben, war ein Gerät, das hier mit diesem Herd verbunden ist. Und es gab Annahmen, die wir auf dem Weg gelernt haben. Aber zurück zum Umriss der Fallstudie haben wir hier unseren Wow-Schuss. Wir sprechen über die Rolle, ein wenig über die Anwendung, die wir zu Geschäftszielen gekommen sind und ich rolle. Und wir sprechen über dieses kleine Szenario, um einen Koch zu planen, über den wir lernen wollten. Dies war, um Ihr Fleisch in eine Tasche zu legen, es in dieses Gerät zu stecken, zu arbeiten und Sie würden planen, dass dieses Gerät eingeschaltet wird. Vielleicht ungefähr fünf oder sechs Stunden nachdem er zur Arbeit gegangen ist. Es wird dein Fleisch für dich kochen und du würdest nach Hause kommen und das wäre fertig für dich zum Essen. Klingt ziemlich süß. Ha, nun, wir haben während der Forschung viel gelernt, die dies ungültig gemacht haben. Wir haben diese Lösung am Ende eigentlich nicht mitgemacht, weil wir viel gelernt haben. Insgesamt sind wir alle, das Team trifft sich zusammen. Wir werden die Persona jetzt so wenig über jede Person vorstellen. Wir werden über die Lernziele sprechen, über die wir lernen wollten. Und wir gingen raus und schauten uns an, einige Nachforschungen und Tests der anfänglichen Annahme zu machen , dass wir etwas darüber erfahren haben. Wir verwenden eine emotionale Customer-Journey-Map, von der ich in der vergangenen Serie ein Video gezeigt habe , wie das geht, um zu skizzieren, welcher Prozess für jemanden so seltsam oder verwirrend war oder wo er zögert. So können Sie hier sehen, dass es Bereiche in diesem Prozess gibt, in denen die Menschen verwirrt waren. Hier ist was wir gelernt haben. Wir haben viel über diese Anwendung gelernt. Wir ändern hier die Wegbeschreibung, und basierend auf einigen Zitaten ist es ziemlich interessant. Ich habe einen laut vorgelesen. Eine Person sagte, ich bin jetzt zehn Stunden weg Du bist sicher, dass Eis das Fleisch den ganzen Tag frisch hält und ich werde nicht krank, wenn ich dieses Fleisch esse. Viele Leute zögerten dies zu tun. Also haben wir uns schließlich entschieden, etwas anderes zu machen, was nur ein schönes Onboarding-Erlebnis für die Anwendung ist. Und auf eine Art und Weise, wie Sie erfahren können, welche Fleischsorten Sie kochen und welche Art von Zeit Sie dieses Gerät so ordentlich kochen können. Und dann fragten viele Leute danach. Sie fragen uns, wie lange es dauert, ein Steak im Vergleich zu einem Stück Hühnchen im Vergleich zu einem Stück Lachs zu kochen . Also haben wir beschlossen, das zu huckepack. Wir haben also hier eine kleine Customer Journey Map oder eine Service-Blueprint-Map hier, die den zukünftigen Stand unserer Lösung skizziert. Wir haben hier ein paar Skizzierungen gemacht. Wir haben ein Drahtgitter gebaut. Sie können Drahtrahmen-Designs verwenden. Wer ist rausgegangen und hat hier ein paar Usability-Tests mit Leuten gemacht. Wir haben etwas Synthese gemacht. Hier ist was wir gelernt haben. Und dann haben wir mehr Iterationen und die Zusammenarbeit mehr zusammen gemacht. Und hier ist das letzte Labor. Also lehne ich mich zurück und du kannst es dir ansehen. Es wird eine Verbindung zu Bluetooth herstellen. Verbinden Sie Ihr Telefon mit der Anwendung, Bluetooth. Es wird auf Bluetooth geladen. Sie werden hier sehen, dass es Erfolg, Erfolg werden wird. Und ich gehe auf den Startbildschirm der App. Ich kann sofort mit dem Koch anfangen oder gehe zum Kochführer. Also klicke ich auf den Guide. Sagen wir hier, ich möchte ein Stück Steak kochen. Site, geh zum Steak. Und sagen wir hier, ich wollte nachkaufen. Also klicke ich auf ein Rippenauge. Und hier habe ich die Möglichkeit, Zeit und Temperatur basierend auf dieser Spende einzustellen. Ich will, dass das Ding gut gemacht wird. Und schau, ich drücke den Knopf Kochen starten und boomt, es fängt an, den SUV-Kocher aufzustellen und du kochst Fleisch. Das ist also so ziemlich genau das. Also zeigte ich das Wow zu Beginn dieser Fallstudie und zeigte die Enderfahrung am Ende dieser Fallstudie. Alles klar, das sind also alles Beispiele für die guten Fallstudien. Wenn Sie diesen finden möchten, ist es auf meiner Website bei Air und Lawrence design.com. Ich gehe hier auf die Homepage, damit du es sehen kannst . Die Seite. Hier bin ich. Und so finden Sie diese Fallstudien hier auf dieser Website oder in mehr ist designed.com. Sie können mich auch einfach googeln, Lawrence, Designer, und Sie werden auch diese Website finden. Okay, das war also eine ziemliche Reise. Wir hatten hier 13 Kurse, und hier ist die abschließende Fallstudie. Hoffentlich gibt Ihnen dies einen kleinen Überblick wie Sie all die Arbeit, die Sie hier geleistet haben, aufnehmen und in eine schöne Geschichte umsetzen können, die Ihre Benutzererfahrung in der Arbeit umreißt. Und nochmal, wie immer, danke, dass Sie sich den Unterricht angesehen haben. Ich weiß es wirklich zu schätzen, dass du es durchstehst. Wenn du alle 13 Videos gesehen hast. Das ist wirklich großartig, echt genial. Ich applaudiere dir. Ich danke dir vielmals. Ich hoffe, du hast viel gelernt. Und hoffentlich bekomme ich noch ein paar Videos, gehe bald hier rein und wir geben dir noch ein paar Inhalte. Nochmals wie immer, vielen Dank und auf Wiedersehen.