UX-Design: Entwirf einen Prototyp

1. Einführung: Hey, danke, dass Sie UX Design beitreten, erstellen Sie einen Prototyp. In dieser Klasse lernen wir, wie Sie einen interaktiven anklickbaren Prototyp erstellen , der Ihren Kunden präsentiert werden kann. Wir beginnen mit einigen UX-Recherchen, erforschen Ihre Ideen und Drahtrahmen, erstellen Ihren Prototyp und präsentieren dann Ihre Ideen Ihren Kunden. Aber zuerst, lassen Sie mich mich vorstellen. Mein Name ist Ginny und ich bin UX Designer und Creative Director. Ich begann als Grafikdesign-Major von der School of Visual Arts in New York City. Ich habe drei Jahre als Art Director in der Werbung gearbeitet, bevor ich ins Webdesign überging, weil ich HTML und CSS wirklich liebte. Ich dachte, ich wollte eine Weile ein Front-End-Entwickler sein , aber das war, als ich begann, wirklich eng mit einem Produktdesigner oder einem UX-Designer zu arbeiten und ich habe mich wirklich in ihn verliebt. Es befriedigt die geeky Seite von mir, die Forschung und Beweise und Daten lieben, und ich fand, dass UX-Forschung und UX-Design einfach wirklich gut mit meiner Persönlichkeit verliefen. In dieser Klasse werden Sie an einer fiktiven App namens Tutz Musical Collaboration Mobile App arbeiten , die einige Verbesserungen der Benutzerfreundlichkeit erfordert. Alle Beispieldateien werden Ihnen zur Verfügung gestellt, damit der Schwerpunkt dieser Klasse werden wir Ihnen beibringen, wie Sie sich durch einen typischen UX-Prozess bewegen, anstatt alles selbst von Grund auf neu zu entwerfen. Sie lernen, wie Sie ein Projekt sowohl als UX-Forscher als auch als Designer ansprechen. Diese Klasse ist für alle Ebenen offen, aber es kann am einfachsten für diejenigen sein, die Zugriff auf Grafikprogramme haben, wie Skizze oder Illustrator sogar oder Photoshop, alles, was Grafiken verarbeiten kann. Am Ende dieser Klasse haben Sie ein abgerundetes UX-Projekt, das Sie in Ihrem Portfolio präsentieren und auch in Skillshare Arbeit präsentieren können. Ich ermutige Sie, Ihr Projekt mit anderen zu teilen und vor allem, wenn Sie durch ihr Projekt fortschreiten, um Feedback zu erhalten. Es gibt einen erstaunlichen Kanal direkt hier in unserem Hinterhof mit Skillshare Projektgalerie, wo Sie Ihre Arbeit teilen können. So oder so, ich denke, du wirst stolz darauf sein, was du dir das am Ende dieser Klasse einfällt. Lasst uns loslegen. 2. Projektanforderungen: Hi, willkommen zurück. Ich freue mich, diese Reise mit Ihnen zu machen, während Sie Ihren Prototyp erstellen. Es kann eine kleine Lernkurve geben, besonders wenn Sie zum ersten Mal in Sketch oder einem anderen Grafikdesign-Programm arbeiten . Aber mit ein wenig Übung navigieren Sie in kürzester Zeit durch diese Werkzeuge. Sei einfach geduldig mit dir selbst. Schlagen Sie alle entmutigenden Gedanken zurück, weil wir alle irgendwo anfangen müssen. Aber ich freue mich, das mit dir durchzugehen. Hier sind unsere Anforderungen. Ausrüstung. Sie benötigen einen Laptop oder Desktop-Computer, Grafikanwendungen wie Sketch, Adobe XD, Photoshop, Illustrator oder ähnliches. Die Stärken und Schwächen jedes dieser Programme hängen davon ab, wofür sie ausgelegt sind. Ich bevorzuge Sketch, weil es wirklich für Prototyping ist. Adobe XD, obwohl ich keine Erfahrung damit habe, habe ich wunderbare Dinge darüber gehört. Illustrator ist in Ordnung, weil Sie darin einige gute Wireframes erstellen können, obwohl es nicht wirklich ein Web-Anwendungsprogramm ist. Photoshop, während es macht Web-Komponenten besser als Illustrator, es ist nicht wirklich ein Wireframing-oder Web-Anwendung Programm entweder. Projekt-Gliederung. Wir werden lernen, UX-Forschung zu analysieren, Wireframe-Ideen zu analysieren, diese Ideen zu validieren, indem wir unsere eigene leichte UX-Forschung durchführen , einen Prototyp erstellen und diesen Prototyp präsentieren. Klassen-Ressourcen. Wir werden einige Beispiel-UX-Forschung haben, die ich für diese Klasse bereitstellen werde. Wir haben auch ein Muster-TUTZ-Design als Sketch-Datei oder PNG zur Verfügung , mit dem Sie in das Grafikprogramm importieren können, das Sie verwenden, und wir haben auch ein Musterdesign Anforderungen und Dokumentation, die Stakeholder- und Geschäftsanforderungen. Sobald alle diese Elemente heruntergeladen wurden, sind wir bereit, den Kurs zu starten. 3. UX-Forschung: Hi, willkommen zurück. Wenn Sie sich dieses Video ansehen, bedeutet dies wahrscheinlich, dass Sie das letzte Video mit den Projektanforderungen gesehen haben und Sie sich bereit fühlen, das Klassenprojekt zu starten. Großartig. Als Auffrischung werden wir an einer fiktiven mobilen App namens Tutz arbeiten, die eine musikalische Kollaborations-App ist. Es ermöglicht Benutzern, Audiodateien hochzuladen , die letztendlich zu einem Original-Song beitragen. In dieser Klasse werden Sie in den Kopf eines UX-Designers eintreten, der von Ihrem Kunden Matt angestellt wurde, der möchte, dass Sie die Benutzerfreundlichkeit der Tutz App verbessern und er hat einige Dokumentation, um es zu beweisen. Matt gibt Ihnen einige Dokumentation von früheren Arbeiten und sagt Ihnen, dass es einige Rückmeldungen von Benutzern und von seinen Kollegen gibt , dass die Upload-Seite, die Seite, die Benutzer zum Hochladen ihrer Audiodateien verwenden, frustrierend war und verwirrend zu verwenden. Es hat dazu geführt, dass Tutz aufgrund der schlechten Benutzerfreundlichkeit Geschäft verliert, und Matt braucht Ihre Hilfe, um es zu untersuchen und Lösungen so schnell wie möglich anzubieten. Also ist es so schnell, nicht wahr? Sie bedanken sich bei Matt und finden einen ruhigen Ort, um sich die Projektdokumentation anzusehen. Werfen wir einen Blick auf Matts Dokument. Es ist wichtig zu beachten, dass alle Unternehmen ihre UX-Prozesse unterschiedlich behandeln und der Umfang der Projekte, an denen Sie arbeiten werden, variieren wird. Für diesen Kurs bleiben wir einfach, damit Sie die Grundlagen verstehen können. Beim Lesen der Dokumente ist es offensichtlich, dass Matts Ziel es ist, die Benutzerfreundlichkeit der Upload-Seite offensichtlich zu verbessern, aber speziell den Upload- und Collaboration-Prozess intuitiver zu gestalten. Dies bedeutet, dass Benutzer den Zweck und die Funktionalität dieser Seite nicht sehr klar finden . Wir wissen jetzt, dass Matts Dokument einige Beweise hat, die auf eine Menge Verwirrung hinweisen von Benutzern erlebt wird, aber es ist unsere Aufgabe als UX-Designer, herauszufinden, warum. Wenn wir auf Matts Dokument zurückblicken, sind einige wichtige Callouts, er möchte, dass wir uns an den Farbstil-Guide und die Kleinbuchstaben halten. Dies ist wichtig, weil viele Unternehmen ihr eigenes Branding haben und Sie sich an diese halten möchten. Er will auch dafür sorgen, dass die Grafiken sehr gut erkennbar sind. Wir müssen auch sicherstellen, dass die Schaltfläche Hochladen auffälliger ist, und wir müssen möglicherweise den CTA oder die Call To Action ändern , um für den Endbenutzer intuitiver zu sein. Schließlich will er ein frisches und lebendiges Gefühl für die App zu halten , um ihr Hauptpublikum anzuziehen, die junge Nutzer sind, vielleicht Mittelschule bis Ende 30er oder 40er Jahre. Bei der Analyse von Matts Notizen möchten Sie Ihre Fragen oder Ihre Bedenken bezüglich des Produkts notieren , um weitere Tests durchzuführen, die wir in dieser Klasse behandeln werden. Einige Fragen, die Sie sich stellen möchten, ist, was war das Ziel des Benutzers? Was war das Ziel des Produktmanagers? Haben sie sich auseinander gesetzt? Warum oder warum nicht? Haben sie ihre Ziele erreicht? Warum oder warum nicht? Eine andere Frage könnte sein, was im Leben der Endverbraucher vor sich geht, was ihre Wahrnehmung des Produkts beeinflussen könnte? Ist die Lösung zum Entfernen oder Hinzufügen von mehr zu dem Produkt? Es ist wichtig, die Ziele des Produkts wirklich gut zu verstehen, damit Sie verstehen können was es daran hindert, seine Ziele zu erreichen, damit Sie die bestmögliche Lösung bieten können. In der nächsten Lektion lernen wir, wie Sie Ihre UX-Forschung durchführen und sie in Wire-Frames umwandeln können. Also lasst uns weitergehen. 4. Wireframing: Hey, willkommen zurück. In dieser Lektion nehmen Sie Analysen aus dem letzten Video an und zeigen Möglichkeiten, Hypothesen und potenzielle Lösungen durch Wireframing anzugehen. Zu diesem Zeitpunkt können Sie mit der Verwendung einer Grafikanwendung wie Sketch oder Balsamiq oder anderen Drahtgitterwerkzeugen beginnen, um mit dem Skizzieren einiger Ideen zu beginnen. Aber es ist immer noch in Ordnung, Papier und Stift für diesen Teil zu verwenden. Lasst uns eintauchen. Auf diesem Bildschirm sehen wir uns die Tutz-Bildschirme an. Der erste Bildschirm ist der Startbildschirm mit einem prominenten Call to Action sagt jetzt starten. Die zweite Seite ist die Upload-Seite, die ist die problematische Seite nach Ihrem Client, und der dritte und vierte Bildschirm zeigen uns die Workflows, die mit der Upload-Funktion verbunden sind. In dieser Lektion werden wir so tun, als ob Matt, unser Kunde, uns Zugriff auf die ursprünglichen nativen Design-Dateien gegeben hat, die von einem früheren Designer erstellt wurden. Da es sich um vollfarbige Mockups handelt und wir jetzt in der Wireframing-Phase sein wollen, wollen wir das eher wie Konzeptkunst aussehen lassen als Endkunst so weit wie möglich. Der Grund dafür ist, dass die meisten Kunden es schwer haben, sich farbige Drahtmodelle anzuschauen und nicht zu denken, dass es das Endprodukt ist. Um dieses häufige Problem zu umgehen, werden wir diese farbigen Mockups in Schwarz-Weiß umwandeln wollen. Was ich getan habe, ist eine separate Seite in Sketch mit den ursprünglichen Farbdesigns erstellt und die farbigen Kunsttafeln in Schwarz-Weiß umgewandelt , um die Botschaft zu vermitteln, dass wir Konzepte und Informationsarchitektur betrachten, statt glänzende Benutzeroberflächenkomponenten. Bevor wir mit dem Wireframing beginnen, nur ein Wort des Ratschlags. Sie keine Angst, Ideen schon früh in der Wireframing-Phase zu zeigen. Denn je mehr Buy-In Sie frühzeitig von Ihren Kunden oder Ihrem Produktmanager erhalten, desto weniger Zeit verbringen Sie mit der Digitalisierung und Neudigitalisierung von Ideen, die nicht genehmigt wurden. Wie Sie sehen können, schauen wir uns die neu umgewandelten Schwarz-Weiß-Bildschirme an, und wir versuchen, unseren Kopf um die UX-Verbesserungen zu wickeln, die wir machen sollten. An dieser Stelle möchten wir auf Matts Dokument der Anforderungen zurückgreifen, und ganz unten auf der Seite habe ich einige Hypothesen hinzugefügt, die auf der Forschung und meiner eigenen Intuition des Standard-Benutzerverhaltens für Online-Apps basieren . Die Hypothesen besagt, dass Benutzer nicht wussten, wo die Upload-Schaltfläche war weil die Textschaltfläche verloren ging und besser auffindbar wäre , wenn es eine grafische Textschaltfläche handelte, die auf auf dem Bildschirm. Auch die neuesten Beiträge nehmen zu viel Platz ein. Schließlich ist die lila Pfeilschaltfläche für Benutzer wegen ihrer prominenten Position verwirrend und wird für eine Upload-Aktion verwirrt. Das macht Sinn. Da dies eine Upload-Seite ist und Benutzer natürlich erwarten sollten, dass die prominente umsetzbare Schaltfläche eine Upload-Aktion ist, wäre es sinnvoll, diese Benutzeroberfläche und Informationsarchitektur so intuitiv zu ändern . Nachdem wir diese Hypothesen verdaut haben, können wir natürlich zu einigen Schlussfolgerungen kommen und empfehlen, dass wir den Upload-Text-Link auf eine grafische Schaltfläche ändern. Wir verschieben den Grafik-Upload-Button an eine prominente Stelle oder ersetzen einfach den Play-Button damit. Wir können die Play-Schaltfläche visueller mit den neuesten Beiträgen Abschnitt verbunden machen , da sie in Informationen und einer Aktion verwandt sind. Wir können auch den letzten Beitragsbereich weniger prominent machen. Lassen Sie uns nun zum eigentlichen Wireframing übergehen. Was ich jetzt tun werde, ist Kopieren und Einfügen dieses Kunstboard durch Drücken von „Option Shift“ auf meinem MacBook und ziehen Sie eine Version des Kunstboards nach unten. Jetzt, da wir eine Kopie der Upload-Seite haben, werde ich eine neue Schaltfläche erstellen, um diese Wiedergabe-Schaltfläche zu ersetzen , die Benutzer auffordert, ihre Audiodatei hochzuladen , anstatt die von Benutzern hochgeladene Zusammenarbeit abzuspielen. Ich werde die Wiedergabe-Schaltfläche und die Audiografik gruppieren und sie über ziehen, um später zu verwenden. Als nächstes möchte ich die Upload-Schaltfläche hinzufügen, und da ich weiß, dass eine vorhandene Schaltfläche in der Benutzeroberfläche auf dem Startbildschirm verwendet wird, werde ich sie einfach kopieren und in mein neues Kunstboard einfügen. Da es sich um einen weißen Hintergrund handelt, ändere ich die Füllfarbe in ein Dunkelgrau und ändere den Text in Weiß. Denken Sie daran, dass dies nur ein Drahtmodell ist, so dass die Farben nicht endgültig sind. Ich möchte den Text auch in etwas intuitiveres ändern, wie zum „Datei hochladen“ oder „Audiodatei hochladen“. Ich werde auch die Schaltfläche erweitern, so dass der Text passt, und zentrieren Sie die Schaltfläche auf dem Bildschirm. Beim Betrachten möchte ich das Ausrufezeichen auf der Schaltfläche entfernen, da es auf diese Weise viel sauberer aussieht. Jetzt, da wir den Upload-Button front-und-center haben, können wir den alten Text-Link zum Hochladen loswerden. Lassen Sie uns den Upload-Button ein wenig nach oben bewegen, nur für jetzt, während ich mit dem Raum spiele. Jetzt möchte ich den Play-Button wieder in den Mix bringen und ihn visuell mit dem neuesten Beitragsbereich kombinieren. Da der Play-Button und die neuesten Beiträge verwandt sind. Wenn ich auf Matts Notizen zurückverweise, erwähnt er, dass der letzte Beitragsbereich viel zu viel Platz einnimmt und mit dem Upload-Button um Aufmerksamkeit konkurriert. Obwohl das wahr sein könnte. Ich werde nur diesen Kommentar allein für diese Lektion lassen, nur um zu sehen, ob Matt in Ordnung wäre , den letzten Beitragsabschnitt die gleiche Größe oder sogar ein wenig größer zu machen , da wir einen Upload-Knopf haben, der sehr groß und prominent auf dem Bildschirm angezeigt. Moment werde ich den Titel für die neuesten Beiträge nach oben verschieben , so dass ich den Play-Button in diesem Bereich passen kann. Ich werde die Grafik zurück verschieben und die Größe ein wenig anpassen, und dann werde ich die Play-Taste zurückbringen und sie kleiner machen, damit sie nicht visuell mit dem Haupt-CTA konkurriert , der zum Hochladen ist. Die anderen Seiten, auf die wir uns konzentrieren möchten, sind die Upload-Seiten, die den Upload-Workflow enthalten. Dieser Workflow beginnt, wenn ein Benutzer auf die Schaltfläche zum Hochladen Ihrer Datei klickt, wodurch ein Dateimanager ausgelöst wird, der vom unteren Bildschirmrand angezeigt wird. Der Benutzer klickt auf die gewünschte Datei oder sucht sie Sobald er hochgeladen wurde, der Dateiname auf dem nächsten Bildschirm als aktueller Beitrag angezeigt. Ich werde verkleinern und das gleiche wie zuvor tun, nämlich das ursprüngliche Kunstboard zu kopieren und einzufügen, indem Sie auf „Option Shift“ klicken und eine Kopie davon nach unten ziehen. Ich werde es vergrößern, und jetzt werde ich angehen, warum der Benutzer durch diesen Prozess verwirrt wird. Tutz aktuellen Workflow hat ein Benutzerland auf diesem Dateimanager nach dem Klicken, laden Sie Ihre Datei hoch, aber ich stelle fest, dass der Benutzer während dieses Schritts verwirrt wird , weil es keinen offensichtlichen Aufruf zur Aktion auf diesem Dateimanager gibt. diesem Grund gibt es eine Inkonsistenz in der Benutzererfahrung, weil Tutz überall sonst außer hier prominente Schaltflächen verwendet. Diese Inkonsistenz ist verpflichtet, den Endbenutzer zu verwirren, da er in der gesamten App dieselben globalen Aktionen erwarten würde . Was ich tun möchte, ist dieses Problem zu lösen, indem ich Schaltflächen wie die Schaltfläche zum Hochladen Ihrer Datei hinzufüge , die ich gerade zuvor abgeschlossen habe, und kopiere es und füge es auf dieses Kunstboard ein. Ich werde es an der richtigen Stelle platzieren, indem ich es an den unteren Rand des Bildschirms bringe und die Schriftgröße und die Tastengröße anpassen, um dem Benutzer den Eindruck zu geben , dass dies eine prominente, aber sekundäre Aktion auf der Seite ist. Jetzt, da das fertig ist, werde ich verkleinern, und wie Sie sehen können, ist das Original über die Oberseite und meine überarbeitete Version ist unten. Dies ist wahrscheinlich, wo ich aufhören würde und meine Ideen meinem Kunden oder Produktmanager zeigen würde, um frühzeitig Feedback zu erhalten. Es ist wichtig, darauf vorbereitet zu sein, ihre Fragen zu beantworten und Ihre Designentscheidungen zu verteidigen. Jetzt, da Sie Ihr erstes Drahtmodell unter Ihrem Gürtel haben, werden wir lernen, wie Sie Ihre Ideen validieren können, indem Sie einen einfachen Benutzertest durchführen. Feedback ist in dieser Phase vor dem Prototyping sehr wichtig, und es kann sehr iterativ sein. Aber am Ende werden Sie viel glücklicher mit dem Endprodukt sein. Wir sehen uns in der nächsten Lektion. 5. Bewaffnung von Wireframes: Hi, willkommen zurück. In der letzten Lektion haben wir etwas über Wireframing und einige bewährte Methoden für Wireframing erfahren. In dieser Lektion lernen wir, wie Sie die Ideen in Ihren Drahtmodellen validieren , indem Sie einen Usability-Test ausführen. Ein Usability-Test ist eine Methode, um Feedback darüber zu sammeln , wie brauchbar etwas ist. Das war's. Zwar gibt es viele verschiedene Möglichkeiten, UX-Forschung und Usability-Tests durch Kartensortierungen oder Umfragen oder A/B-Tests durchzuführen, die Methode, die wir in der heutigen Lektion behandeln werden, ist ein persönlicher moderierter Test. Dies ist der Fall, wenn ein Moderator wie Sie einen Benutzer durch eine Reihe von Fragen und Aktionen führt , um sein Feedback zu einem Produkt zu beobachten. Die meisten Probleme haben viele verschiedene Lösungen möglich, aber das Tolle an Usability-Tests ist, dass Sie in der Lage sind, die bestmöglichen Lösungen für Ihre App, für Ihre Zielgruppe einzugrenzen . Jetzt für Usability-Tests, sollten Sie einige Dinge im Auge behalten. Nummer eins, die den Ton für den Benutzer einstellt. Sie möchten die Umwelt sauber, frei von Ablenkungen und komfortabel für den Benutzer zu halten . Der Benutzer sollte sich auch wohl fühlen und Sie können dies tun , indem Sie ihn am Anfang mit einigen Fragen aufwärmen. Sie können ihnen Fragen stellen, wie ist ihr Name, ihre Beschäftigung, was machen sie mit ihrer Freizeit, wie oft benutzen sie ihren Computer, ihr mobiles Gerät, wie technisch versiert sind sie? Dies wird sie daran gewöhnen, laut zu sprechen und im Allgemeinen zu sprechen, um sie dazu zu bringen, Ihnen ihr Feedback natürlich zu geben , während Sie zum Usability-Test gehen. Die Fragen, die Sie dem Benutzer stellen sollten, sollten sehr neutral sein, ohne Voreinstellungen zu formulieren. Sie sollten so formuliert werden, dass es Ihnen hilft später zu beurteilen, warum der Benutzer auf diese Weise reagiert hat. Zum Beispiel möchten Sie Ihre Frage auf offene Weise formulieren, anstatt sie zu fragen „Haben Sie diese Schaltfläche verwirrend gefunden?“ Sie können sie fragen : „Was fühlten Sie, als Sie auf diesen Knopf schauten?“ Sie antworten dir und du kannst sie fragen: „Warum?“ Um Ihnen dabei zu helfen, habe ich einen Link zu einem sehr berühmten Usability-Test-Skript bereitgestellt , das unter diesem Link gefunden wird. Nummer zwei, Rekrutierung von Benutzern. dieser Klasse willen, Umdieser Klasse willen,werden wir Sie nur einen Benutzer rekrutieren lassen, wenn es ideal ist, normalerweise fünf, sieben, 12, 50 bis 100 Benutzer manchmal zu haben . Aber aus Gründen des Timings und nur um Ihnen die Grundlagen beizubringen, bleiben wir nur bei einem Benutzer. Die Kriterien, nach denen wir suchen, sind in Matts Dokument vermerkt. Sie sind, Nummer eins, im Alter von 14 bis 40 Jahren. Nummer zwei, sie sollten ein Smartphone besitzen. Nummer drei, häufig verwendet soziale Medien, weil dies eine soziale App ist, und Nummer vier, sie sollten Musik lieben. Einige Möglichkeiten, wie Sie Teilnehmer rekrutieren können, sind vielleicht durch eine Online-Anzeige oder eine Anzeige in der Zeitung, Online-Kanäle wie Remote testing.com oder sogar Bürgersteiger-Tests, wo Sie in einen öffentlichen Raum gehen und einfach Leute finden, die bereit, mit dir zu reden. Der Trick ist, wie können wir Menschen dazu anregen, an der Studie teilzunehmen? meiner persönlichen Erfahrung gaben Benutzer, Nachmeiner persönlichen Erfahrung gaben Benutzer,die Anreize für eine Geschenkkarte oder eine Art Belohnung angeboten werden, viel bessere Antworten und tauchten auch für die Benutzerstudie auf. Hier ist eine Liste von einigen Möglichkeiten, die ich gefunden habe , um Leute zu rekrutieren und sie anzuregen. Nummer eins, bieten Sie eine Geschenkkarte an, alles von $25-100, je nach Länge Ihres Studiums. Nummer zwei, biete geradliniges Bargeld an, etwa 50 Mäuse für eine Stunde ihrer Zeit. Nummer drei, bieten eine Chance, ein Geschenk oder eine Geschenkkarte von einem größeren Betrag zu gewinnen, wie zum Beispiel $200, oder so etwas wie ein iPad sogar. Dies funktioniert gut, wenn Sie viele Leute rekrutieren müssen und Sie einfach nicht das Budget haben, um für alle einzeln zu bezahlen. Sobald der Benutzer sich in seiner Testumgebung befindet, ist es an der Zeit, den Test durchzuführen. Jedermanns Methoden werden aufgrund ihrer Persönlichkeitstypen und ihrer bevorzugten Testmethode ein wenig anders sein. Aber ich werde Ihnen die Methode zeigen, die ich bevorzuge, die für mich am hilfreichsten und effektivsten für mich war. Am wichtigsten, ich erinnere den Benutzer daran, laut zu denken. Nummer eins, zeigen Sie das Produkt in seinem aktuellen Zustand an. Das heißt, zeigen Sie die Version des Produkts oder Designs, das gerade verfügbar ist. Nummer zwei: Lassen Sie den Benutzer Feedback zu diesem Produkt geben , indem Sie es beobachten, ohne zuerst klicken zu müssen, und geben Sie Feedback nach der Interaktion mit dem Produkt. Nummer drei, zeigen Sie dem Benutzer das vorgeschlagene Design. Sie müssen den gleichen Prozess durchlaufen, um Feedback durch Beobachtung zu geben, und sie dann Feedback geben, nachdem sie mit ihm interagieren. Nummer vier, geben Sie ihnen eine Aufgabe durchzuführen, dies ist eine Aufgabenanalyse. Obwohl es nicht ideal ist, einen nicht interaktiven Papierdraht zu haben , um eine Aufgabenanalyse durchzuführen, können Sie dennoch viele hilfreiche Rückmeldungen für einfache Aufgaben im Zusammenhang mit der Navigation und der Auffindbarkeit von Informationen sammeln . Nun, was ich gerne tun würde, ist, während ich teste, ich mag, die Sitzung aufzuzeichnen, wenn der Benutzer damit vertraut ist. Während des Tests sollten Sie Notizen so gut wie möglich notieren, aber das ist auch der Grund, warum die Aufnahme so wichtig ist weil Sie nicht in der Lage sein werden, alles zu fangen, während Sie Notizen notieren, und Sie wollen nicht weiter fragen sie zu wiederholen, was sie tun, weil es zu diesem Zeitpunkt kein echtes Verhalten sein wird, so dass die Aufnahme plus die Notizaufnahme wirklich wichtig für die Analyse später ist. In der nächsten Lektion werden wir uns mit den lustigen Sachen befassen, dem Prototyping, also bleib dran. 6. Prototyping: Hey, Leute, willkommen zurück. Es ist Zeit für den lustigen Teil, das Prototyping. In dieser Lektion nehmen wir die Drahtmodelle aus der vorherigen Lektion an und verwenden sie als Struktur, um unsere Entwürfe aufzubauen. Nur ein Vorsprung, wir werden einige UX-Prozesse überspringen, wie Iteration, um zum Prototyping zu gelangen, von dem ich sicher bin, dass jeder begeistert ist. Lasst uns eintauchen. Wie Sie sehen können, betrachten wir die Schwarzweiß-Drahtmodelle aus der vorherigen Lektion, aber jetzt gehen wir über das, was passiert ist, nachdem sie durch Benutzertests validiert wurden. Dies sind die Originale in der obersten Reihe hier. Diese Notizen in Rot sind meine Benutzer-Testnotizen, so dass ich sie immer zur Hand habe, auf die ich zurückverweisen kann, da ich Ideen verdrahte. In der zweiten Reihe haben wir die neuen Wireframes, die wir vom Benutzer auf Feedback getestet haben, wie Sie hier sehen können. Aber weil wir Benutzer getestet haben, um unsere Wireframes zu validieren und neues Feedback zu sammeln, führte es mich dazu, meinen ersten Ansatz für das Upload-Redesign von Tutte zu überdenken, was UX-Designern beim Testen sehr viel passiert. Aufgrund des neuen Feedbacks entschied ich mich, einen neuen Satz von Wireframes zu entwickeln, um das Feedback aus unserer Benutzer-Testsitzung zu adressieren. Die neuen Wireframes, die nach der Validierung erstellt wurden, befinden sich hier unten in dieser dritten Zeile, die mit der Titelversion 3 gekennzeichnet ist. Die Upload-Seite hat sich geändert und ich habe den Play-Button wieder in den oberen Bereich verschoben, und ich habe meinen Upload-Button nach unten verschoben. Ich habe auch den Text geändert, wie Sie bemerkt haben. Die neuesten Beiträge wurden in Größe und Prominenz nach dem Feedback geändert, das ich bekam. Ich habe auch zusätzliche Workflow-Bildschirme hinzugefügt, die ich ein wenig später näher eingehen werde. Der neue Flow beinhaltet, der Benutzer auf der Upload-Seite landet, der Benutzer auf den Upload-Audiodatei-Button klickt, der Dateimanager wird ausgelöst, nachdem der Upload-Audiodatei-Button geklickt wird, der Benutzer kann Wählen Sie die Datei aus oder suchen Sie nach einer Datei, während der Upload-CTA nun ausgegraut und deaktiviert ist, bis eine Datei ausgewählt wurde. Der Benutzer wählt eine Datei aus, die durch einen hell hervorgehobenen Rahmen um den Dateinamen angezeigt wird, und die Schaltfläche Jetzt hochladen wird aktiv, was durch eine aktive Farbe angezeigt wird. Sobald es hochgeladen wurde und der Upload erfolgreich ist, ein Erfolgsbildschirm angezeigt , der nach einigen Sekunden verschwindet. Schließlich landet der Benutzer auf dem letzten Bildschirm, der anzeigt, dass der Benutzer gerade eine Audiodatei im letzten Beitragsbereich hochgeladen hat. Nun, da wir alle Workflows genehmigt haben und Ihr Kunde glücklich ist und Ihre Benutzer generell glücklich sind, werden wir dies verspotten wollen. Da diese Klasse nicht behandelt, wie Skizze in der Tiefe verwendet wird, habe ich bereits die farbigen Mock-ups für Sie erstellt, habe ich bereits die farbigen Mock-ups für Sie erstellt, die die Mock-Ups sind, die wir verwenden, um den interaktiven Prototyp zu erstellen. Wir können sehen, wie die Markenfarben und die Benutzeroberfläche hinzugefügt wurden um dieser App das Aussehen und das Gefühl zu geben, dass sie während des Drahtrahmens fehlte. Alle diese UI-Komponenten wurden aus Übereinstimmungsnotizen und den bestehenden Designparadigmen der aktuellen Produkte entnommen. Lasst uns diesen Prototyp zusammenfassen. Wie Sie sehen können, verwende ich Skizze für Prototyping. Wenn Sie andere Grafikanwendungen wie Photoshop oder Illustrator verwenden , machen Sie sich keine Sorgen. Ich werde Ihnen am Ende dieser Lektion Tipps geben, um zu erklären, wie Sie mit Photoshop und mit Adobe Acrobat einen einfachen Prototyp erstellen können. Was ich an Skizze liebe, ist, dass Sie Hotspots oder Hotlinks erstellen können, die Bildschirme verbinden , so dass es aussieht, als ob ein Benutzer sich durch einen Workflow bewegt. Das erste, was ich tun möchte, ist, wählen Sie einen Ausgangspunkt für meinen Prototyp, indem Sie zum Menü gehen und auf Prototyping klicken, und wählen Sie Zeichenfläche als Startpunkt im Dropdown-Menü verwenden. Dadurch wird sichergestellt, dass unser Prototyp immer auf dem richtigen Bildschirm startet , wenn Sie Kunden präsentieren. Wie Sie sehen können, hat diese Zeichenfläche jetzt ein kleines Flag, das anzeigt, dass dies der Ausgangspunkt ist. Nun, wählen wir den Startpunkt Zeichenfläche, und klicken Sie auf die Taste 'H', die eine Verknüpfung zu der Hotlink-Aktion ist. Dies wird durch die Maus angezeigt, die nun in einen quiggly Pfeil umgewandelt wurde. Das bedeutet, dass wir jetzt bereit sind, einige Elemente zu verknüpfen und interaktiv zu werden. Wenn Sie sich erinnern, soll der Benutzer auf die Schaltfläche „ Meine Audiodatei hochladen “ klicken, um seine Musik hochzuladen. Was ich tun werde, ist, ziehen Sie einen Hotlink-Bereich um diese Schaltfläche, beginnend von oben links und ziehen Sie nach unten rechts. Der Bereich, den Sie gerade herausgezogen haben, ist orange hervorgehoben. Jetzt sehen Sie einen Schwanz, wir verwenden, um mit dem nächsten Bildschirm im Workflow zu verknüpfen. Wenn ich den Mauszeiger über die nächste Zeichenfläche führe, wird diese automatisch für mich ausgewählt, wie durch die orangefarbene Markierung angezeigt. Wenn jemand auf die Schaltfläche „Meine Audiodatei hochladen“ klickt, wird er auf den nächsten Bildschirm übertragen, der den Dateimanager anzeigt. Jetzt wähle ich die Zeichenfläche mit dem Dateimanager aus. Da der Benutzer die Datei hier auswählen soll, insbesondere die obere linke Datei, werde ich einen Hotlink erstellen, indem ich erneut auf H über dieses Dateibild und den Schwanz auf den nächsten Bildschirm der hervorgehobene Datei mit dem aktiven Upload-CTA-Button. Von hier aus möchte ich, dass der Benutzer weiß, dass er eine Datei ausgewählt hat, was wir auf dem vorherigen Bildschirm gemacht haben. Ich möchte, dass sie auf den Upload-CTA-Button klicken , um die Datei offiziell in die App hochzuladen. Ich werde erneut auf H klicken, ziehen Sie über die Schaltfläche, und dann werde ich den nächsten Bildschirm auswählen. Da der nächste Bildschirm ein Verhalten hat, das keine Interaktionen wie Klicken auf ihn erfordert, da er nach wenigen Sekunden von selbst verschwindet, ist dies ein guter Zeitpunkt, um den Client durch das Verhalten zu sprechen. Ich wähle die gesamte Zeichenfläche als Hotlink aus. Wie ich dem Client erklärt habe, dass der Erfolgsbildschirm nach ein paar Sekunden verblasst und schließlich den letzten Workflow-Bildschirm der letzten Beiträge mit der neu hinzugefügten Audiodatei anzeigt . Mit dem letzten Bildschirm muss ich keinen Hotlink erstellen, da hier der Workflow endet, und wir haben unsere Aufgabe gemacht, die Upload-Funktion zu verbessern, die unsere Finger überqueren. Wir wollen nur, dass der Kunde den Workflow durch den einfachen, aber übersichtlichen Prototyp sieht , den wir gerade erstellt haben. Sehen wir uns nun an, wie die Präsentationsansicht des Prototyps aussieht, da dies das ist, was Sie Ihrem Kunden präsentieren werden und das ist, was der Client tatsächlich sehen wird. In der Skizze haben wir eine wirklich einfache Möglichkeit, dies zu tun. Oben rechts oben, gibt es eine kleine orangefarbene Schaltfläche, die Vorschau sagt, auf die wir klicken werden. Wie Sie sehen können, geht es direkt auf den Startpunkt Zeichenfläche, die mit der Flagge markiert wurde. Dies ist das Fenster, das wir verwenden, um unserem Kunden zu präsentieren, über das wir in der nächsten Lektion mehr erfahren werden. Lassen Sie es uns testen. Was der Benutzer tun wird, ist, auf dieser Seite zu landen und seine Audiodatei hochladen. Sie können sehen, wie sich die Maus ändert, wenn ich den Mauszeiger über die Haupt-Upload-Taste führe, und sobald ich darauf klicke, führt es uns zum Dateimanager. Die Datei, die wir hochladen möchten, heißt Cowbell, also wählen wir diese aus und sehen, dass sie hervorgehoben ist und die CT aktiv ist. Wir werden darauf klicken und sehen, dass es erfolgreich war, und wir werden uns daran erinnern, dem Kunden zu erklären, dass der Erfolgsbildschirm nach ein paar Sekunden von selbst verblasst. Ich werde irgendwo auf dem Bildschirm klicken, nachdem ich fertig bin zu erklären und schließlich landen auf dem letzten Bildschirm, die von den neuesten Beiträgen, wo Sie gerade Cowbell5 Mp3 in die Zusammenarbeit Stück gerade jetzt hochgeladen haben . Gute Arbeit für Sie. Für Leute, die andere Anwendungen verwenden, um Ihre Prototypen wie Photoshop oder Illustrator zu bauen, ist mein Rat, jeden Bildschirm ähnlich zu haben, wie Sie gerade in der Skizze als eigene Seite gesehen haben, die dann als separate exportiert werden kann PDFs. Importieren Sie mit Adobe Acrobat alle PDFs in eine Datei mit allen Seiten in der richtigen Reihenfolge, so dass Sie auf die Pfeilschaltflächen klicken können, um sich leicht durch jeden Bildschirm zu bewegen, und sprechen Sie dann einfach mit Ihrem Kunden über den Workflow, da es nicht interaktiv sein wird. In der nächsten Lektion werden wir darüber sprechen, Kunden zu präsentieren, ohne einige unerfahrene Fehler zu machen. Bleiben Sie dran. 7. Kunden präsentieren: Hey, willkommen zurück. Du bist auf der Heimstrecke. In der heutigen Lektion werden wir darüber sprechen, Kunden zu präsentieren und einige unerfahrene Fehler zu vermeiden. meiner Erfahrung habe ich gelernt, dass sich die Kunden um ein paar verschiedene Dinge mehr kümmern als andere, und ich werde sie mit Ihnen teilen. Nummer Eins, die Kreative. Dies ist der Prototyp, den Sie Ihrem Kunden mit den verbesserten Funktionen präsentieren werden , die für ihn spannend sein sollten. Nummer zwei, der Bericht. Dies sollte hochrangige Einblicke und Daten aus Ihren Ergebnissen enthalten, und Nummer drei, die nächsten Schritte. Hier schlagen Sie vor, dass das Projekt gehen sollte. Bei der Präsentation des Prototyps. Im Folgenden finden Sie einige Dinge, die Sie für Ihre Präsentation beachten sollten. Ein paar der Do's. Erklären Sie das Gesamtthema des Berichts und welche Ziele Sie erreichen wollten. Nummer zwei, erklären Sie, wie Sie Daten bekommen haben. Nummer drei, erklären Sie die Aufschlüsselung der Daten in großen Blöcken, nicht zu granular. Dies kann durch Diagramme, Prozentsätze und andere Infografiken angezeigt werden. Nummer vier, nennen Sie wichtige Beobachtungen oder Daten, wie Zitate und eine kurze Liste interessanter Beobachtungen, die Sie gesammelt haben. Nummer fünf, wickeln Sie es mit etwas Positivem ein und ermutigend für die Kunden, sich für die nächsten Schritte zu begeistern. Jetzt für einige der Don'ts. Verwenden Sie nicht viel Industrie-Jargon. Ich würde auch vermeiden, viele Akronyme zu verwenden. Obwohl es uns bekannt ist, könnte es am besten sein, andere Wege zu finden, um diese Liste zu beschreiben, wie über der Falte, Mausereignis, FBO, was bedeutet nur für Platzierung, heuristische Analyse, hexadezimal, 508-Konformität, Responsive, API, SVG, Vektor, PNG und vieles mehr. Sie sollten auch Ihre Entwurfsentscheidungen erläutern , während Sie einen Kunden durch den Prototyp führen. Vielleicht möchten Sie etwas sagen wie, Ich habe mich entschieden, diese Farbtaste zu verwenden, weil es mit der Benutzeroberfläche konsistent war oder Sie möchten vielleicht sagen, ich habe beschlossen, diese Schaltfläche kleiner zu machen, weil dies eine sekundäre Aktion war und ich nicht vom primären CTA ablenken wollen. Nun, in meiner persönlichen Erfahrung, als ich Kunden präsentierte, fand ich, dass Kunden bestimmte Dinge ein bisschen mehr mögen als andere. Während sie Daten mögen, mögen die Leute oft die Daten nicht selbst verdauen, also wollen sie, dass andere Leute es für sie tun, also was ich gerne mache, ist ihnen die Daten zu geben, aber ich gebe ihnen auch gerne etwas Sonst, das Feedback. Ich finde, dass Kunden Zitate lieben, weil es etwas ist, auf das sie sich beziehen können. So können Sie ihnen zum Beispiel ein Angebot von einem Kunden geben, der wirklich Sie stand, weil es höchstwahrscheinlich von ihnen abheben wird. Das war's, du hast großartig gemacht. In der nächsten Lektion, die die letzte Lektion ist, werden wir einige Schlussfolgerungen und einige Takeaways durchlaufen. 8. Schlussfolgerungen: ( HINTERGRUND) Hi, du hast es geschafft. Herzlichen Glückwunsch, zum Abschluss dieses Kurses. Sie haben einige erstaunliche Dinge in dieser Klasse erreicht, wie die Analyse von UX-Forschung, Durchführung Ihrer eigenen Forschung, Drahtrahmen, Prototyping und Präsentation für Kunden. Ich hoffe, Sie können von dieser Klasse weg gehen, mit einem Gefühl der Leistung und Zuversicht, dass Sie Ihr nächstes UX-Projekt aus einer abgerundeten Perspektive angehen können Ihr nächstes UX-Projekt . Hier sind einige wichtige Takeaways, Sie sich für Ihr nächstes erstaunliches UX-Projekt merken möchten. Bevor Sie ein UX-Projekt starten, sollten Sie unbedingt die Anforderungen, Ziele und sogar Einschränkungen des Projekts verstehen . Versuchen Sie, eine neue Benutzerstudie zu initiieren, um neue Einblicke in das Projekt zu erhalten, insbesondere wenn die vorangegangene Forschung älter als sechs Monate ist. Drahtrahmen müssen nicht schick sein. Es ist wichtiger, grundlegende Drahtrahmen oder Skizzen zu entwickeln und diese Ideen zu wiederholen, im Gegensatz zu viel Zeit, auf einem ausgefallenen zeitraubenden Drahtrahmen zu verbringen , hochrangige Informationen für Kunden zu präsentieren, und Nicht-Jargon-Sprache, mit einem Prototyp, der so nah wie möglich ist, fertig ist. Schließlich, viel Spaß mit UX. Denken Sie daran, Ihr Projekt zu posten, in Skill Shares Project Gallery, und denken Sie daran zu folgen, mich über mehr UX Klassen informiert zu bleiben. Viel Glück auf deiner Reise zur UX Mastery.