iOS-Design I: Erste Schritte mit UX

1. Trailer: Hallo an alle. Ich bin Kara Hodecker und ich bin der führende Produktdesigner für iOS bei Ever note. Ich freue mich wirklich darauf, was ich über iOS-Design gelernt habe zu teilen. Egal, ob Sie gerade erst mit dem mobilen Design beginnen oder einfach nur eine Auffrischung wünschen. Diese nächste Reihe von Klassen soll Ihnen helfen, ein vollständiges Bild des Entwurfsprozesses zu erhalten. Wir werden viel mehr als nur visuelles Design abdecken. In dieser ersten Klasse führe ich Sie durch die Grundlagen des User Experience Designs und eine Vielzahl von UX-Techniken, einschließlich User Journeys, Skizzieren User Experience Designs und eine Vielzahl von UX-Techniken, und Wireframing. Ich werde erklären, warum jeder Schritt des UX-Prozesses wichtig ist und wie Sie diese Techniken auf Ihr eigenes Projekt anwenden können. Ihr Klassenprojekt wird es sein, Ihre eigene Reise-App zu erstellen oder bestehende zu überdenken. Sie teilen den Fortschritt für jeden Schritt in der gesamten Klasse mit einer Reihe von Drahtmodellen als endgültiger Lieferumfang. In den folgenden Klassen der Serie werden wir diese Projekte Backup auswählen und gehen zu visuellem Design, Interaktionsdesign, Prototyping und Benutzertests. Am Ende dieser Reihe von Klassen, werden Sie eine schöne und entzückende iOS-App entworfen haben. 2. Class: Hi. Willkommen zurück zu iOS Design 1, Erste Schritte mit UX. In diesem ersten Video beginnen wir mit Ihrem Projektauftrag. Ihr Projekt wird es sein, eine iPhone-App mit dem Thema Reise zu entwerfen. Sie können sich Ihre eigene einzigartige Idee für die App entwickeln, oder Sie können Ihr Projekt auf eine bestehende Reise-App stützen. Dieses Projekt erstreckt sich über die drei Klassen in dieser Reihe, sodass Sie jeweils verschiedene Phasen des Projekts abschließen. In dieser ersten Klasse legen Sie die Grundlagen für Ihre App fest, indem Sie auswählen, was die App sein wird, welche Ziele die Benutzer sind und wie Ihre Benutzeroberfläche diese Ziele unterstützt. Warum eine Reise-App? Features von Reise-Apps sind wirklich gut auf die Bedürfnisse der Benutzer ausgerichtet. Diese Anforderungen sind ziemlich einfach zu identifizieren, so dass es hilft, einige der Ratschläge aus den frühen Phasen der Planung Ihrer App zu nehmen . Es wird uns auch als Klasse zusammen helfen, da wir in der Lage sein, ähnliche Muster und Probleme anzugehen. Lassen Sie uns beginnen, indem Sie einige Benutzerbedürfnisse betrachten , die von verschiedenen Reise-Apps adressiert werden. Einige dieser Dinge sind; Ich möchte einen Hin- und Rückflug buchen. Ich möchte Tipps, Touren und Interessenpunkte für einen bestimmten Standort recherchieren . Ich möchte Hotels nach Preis, Lage und Ausstattung vergleichen. Ich möchte ein Hotel oder eine andere Unterkunft buchen. Ich möchte einen kompletten Reiseführer für meinen Urlaub. Nehmen Sie sich eine Minute Zeit, um darüber nachzudenken, was ein Benutzer für jedes Beispiel tun müsste. Diese Schritte sollten sich im Ablauf Ihrer App widerspiegeln und dem Benutzer auf die klarste und logischste Weise präsentiert werden. Überlegen Sie, was für den Benutzer bei jedem Schritt und insgesamt am wichtigsten ist. Wenn ein Benutzer einen Flug buchen möchte, würde er sich wahrscheinlich am meisten um Preise, Flugzeiten, Entlassungen und welche Fluggesellschaft er fliegen möchte. Bevor Sie beginnen, werfen Sie einen Blick auf mehrere Reise-Apps, um sich mit ihren Flows und der Art und Weise vertraut zu machen, wie die Informationen dem Benutzer präsentiert werden. Entscheiden Sie, welche Art von Reise-App Sie erstellen möchten oder welche App Sie neu vorstellen möchten. Hier sind ein paar Reiseapp-Beispiele; Tripadvisor, Kayak, Airbnb, Hotel Tonight, Expedia, Priceline, Hit Mönch und City Guides von National Geographic. Alle diese Apps tun etwas andere Dinge, aber sie sind alle auf Reisen zentriert. Diese zeigen Ihnen die Breite der Reise-App, die Sie versuchen könnten, zu erstellen. Hier ist ein Beispiel für die Kayak-App. Dies ist ein großartiges Beispiel für Mehrzweck-Reise-App, die immer noch wirklich einfach zu bedienen ist. Der Startbildschirm zeigt dem Benutzer alle Optionen an, die er hat. Von der Suche nach einem Hotel oder Flug bis hin zur Sendungsverfolgung und Festlegung von Preisbenachrichtigungen. Sobald eine Entscheidung getroffen wurde, in diesem Fall, um einen Flug zu buchen, wäre der nächste Schritt, das einzugrenzen, was Sie suchen. Die Optionen sind einfach und was der Benutzer erwarten würde. Wo fliegen Sie? Wann? Wie viele Reisende? Wenn die Suchergebnisse zurückgegeben werden, sehen Sie, dass die Flüge nach Fluggesellschaft und Preis gruppiert sind. Los geht's. Anschließend können Sie einen Drilldown zu bestimmten Zeiten, Verbindungen und der Anzahl der Stopps innerhalb eines Preispunkts durchführen. Es kann ein wenig überwältigend aussehen, aber ich denke, Kayak macht einen anständigen Job, indem es Ihnen erlaubt, viele Flüge auf einem Bildschirm zu vergleichen. Sobald Sie einen bestimmten Flug ausgewählt haben, sehen Sie einen weiteren Bildschirm, der alle Fluginformationen und die Option zum Buchen enthält. Der Bildschirm ist etwas sauberer. Dies ist der letzte Bildschirm auf dem Bildschirm jetzt. Es ist ein bisschen sauberer und organisiert die Informationen auf eine Weise, die viel einfacher zu analysieren ist. Wie wirst du anfangen? Sie werden zunächst einige erste Recherchen zu Reise-Apps durchführen und entscheiden, was Sie für Ihr eigenes Projekt tun möchten. Wieder können Sie Ihre ganz eigene Reise erstellen, was auch immer Sie tun möchten, oder wenn Sie das Gefühl haben, ich will nicht so verrückt werden, nehmen Sie einfach eine App, die bereits existieren und gehen Sie von dort, neu gestalten, wie Sie wollen. Als Nächstes notieren Sie einige Funktionen, die Sie in Ihre App aufnehmen möchten. Was sind die Benutzerbedürfnisse, die Sie ansprechen werden? Wird die Suche eine große Komponente der App sein? Wird es auf jedem Bildschirm eine Menge Inhalte geben, die organisiert werden können? Wenn Sie eine vorhandene App neu erstellen, sollten Sie immer noch über die Anwendungsfälle und Benutzeranforderungen nachdenken und darüber, wie Ihre Neugestaltung die allgemeine Benutzererfahrung verbessern könnte. Im nächsten Video führe ich Sie durch einen Überblick über das User Experience Design, um mehr Ideen zum Laufen zu bringen und Sie auf die kommenden Lektionen vorzubereiten. 3. Übersicht über UX: Willkommen bei Unit 1, ein Überblick über UX. Ich wollte heute mit einem Zitat von Steve Jobs beginnen, dem ich denke, dass [unhörbares] Design ziemlich gut einfängt. „ Design ist nicht nur so, wie es aussieht und sich anfühlt, Design ist, wie es funktioniert.“ Zu Beginn ist es wirklich wichtig zu verstehen, was User Experience Design und benutzerzentriertes Design bedeuten. Um das User Experience Design zu definieren, konzentriert es sich darauf, ein Produkt zu erstellen, das intuitiv, einfach zu bedienen und angenehm für den Benutzer ist . Beim benutzerzentrierten Design werden die Bedürfnisse, Ziele Wünsche des Anwenders während des gesamten Entwurfsprozesses sorgfältig berücksichtigt. Wir werden beide abdecken, während wir in dieser Klasse gehen. Wenn Sie über Ihre App und die Funktionen nachdenken, die Sie einschließen möchten, sollten Sie die folgenden Überlegungen beachten, wenn Sie speziell für Mobilgeräte entwerfen. So sind einige dieser Dinge Kontext und Relevanz sind der Schlüssel. Heutzutage sind viele Apps Benutzer in Oberflächeninhalte positioniert und es ist relevant, wo Sie sich befinden oder um die Suche einfacher zu machen. Hier ist ein Beispiel für den App-Schwarm , der es Ihnen leicht macht, einzuchecken, wenn es Ihren Standort hat. Mobil ist schnell, unterwegs und Sie haben ständigen Zugriff darauf. Dies ist etwas, das in den letzten Jahren neu ist, aber es ist wirklich wichtig, sich daran zu erinnern. So sind Twitter und andere News-Apps großartige Beispiele dafür, was Menschen nutzen möchten, wenn sie unterwegs sind. Sie können Ihr Telefon schnell herausnehmen, durch einige Inhalte blättern und dann Ihre nächste Aufgabe übernehmen. Wenn Sie Ihr Handy wieder in die Tasche stecken, sind Sie auf dem Weg. Häufige Nutzung oder Check-Ins und kleinere Gerätegrößen sind eine weitere Sache, die Sie bei Mobilgeräten berücksichtigen müssen. So einfache Apps wie Yahoo Wetter zeigen Ihnen die Inhalte, die Sie vorne und in der Mitte sehen möchten, ohne dass Sie sehr weit navigieren müssen. Apps wie diese sind für einen schnellen Check-in ein paar Mal am Tag gedacht. Schließlich müssen Sie daran denken, dass Ablenkungen während des Gebrauchs vorhanden sind. Bei Mobilgeräten ist es besonders wichtig, sich daran zu erinnern, dass Benutzer Ihnen nicht ihre ungeteilte Aufmerksamkeit schenken werden. Kurze Aufmerksamkeitsspannen haben Menschen dazu gebracht, frustriert zu werden, wenn sie nicht finden können, was sie wollen, wenn sie es wollen. Als Designer ist es wichtig, diese Überlegungen des Benutzers jederzeit im Auge zu behalten. Verwenden Sie sie, um Sie in jedem Teil des Entwurfsprozesses zu führen. Denken Sie daran, dass Ihre App fokussiert bleiben sollte und dem Benutzer die wichtigsten und relevantesten Informationen mit dem geringsten Aufwand präsentieren sollte. diesem Grund ist der Startbildschirm oder der Hauptbildschirm der App wahrscheinlich der wichtigste. Diese Ansicht sollte dem Benutzer Folgendes zur Verfügung stellen. Die Informationen, an denen der Benutzer am meisten interessiert ist. Wenn es sich um eine komplexere App handelt, springen Sie von Punkten zu anderen Abschnitten innerhalb der App. Einige Apps konzentrieren sich also auf ein oder zwei Hauptfunktionen, die es ermöglichen, dass diese Informationen dem Benutzer sofort präsentiert werden. Dazu gehören das Durchsuchen und Verbrauchen von häufig aktualisierten oder geänderten Inhalten, das Verweisen auf Informationen und Protokollierungsinformationen. Die einfacheren Apps verfügen oft über Feeds oder Timelines. Dies ist eine unglaublich effektive Möglichkeit, Inhalte für Benutzer anzuzeigen , die Inhalte schnell konsumieren möchten. Hier sind ein paar Beispiele. Ich habe Facebook, Twitter und Pinterest. Ein paar andere sind Fitbit, Kalender, Wetter-Apps und sogar deine E-Mail. Alle diese Apps sind super einfach. Sie öffnen sie, Sie sind auf dem Feed, der wahrscheinlich die Informationen, die Sie sehen möchten, und alles andere, was Sie brauchen, um zu bekommen. Du kannst ganz einfach dorthin gelangen, wenn du auf Pinterest suchen musst. Wenn Sie Ihre Benachrichtigungen in Facebook sehen möchten, können Sie zu diesem springen. Aber wahrscheinlich ist alles, was Sie brauchen, richtig auf diesem Hauptbildschirm. Andere Apps verfügen über einen komplexeren Featuresatz und ermöglichen es dem Benutzer, mehrere Arten von Aufgaben auszuführen. Einige Beispiele für Apps mit einem eher navigationstechnischen Ansatz sind Evernote, wo Sie Notizen lesen, suchen und Notizen erstellen können. Airbnb, das ist dieses Beispiel, das ich hier zeige, wo Sie suchen und surfen, etwas wie Foursquare Sie einchecken, Ihre Suche, Browsen, Lesen von Bewertungen, sowie Karten. Du bekommst Wegbeschreibungen, schaust dir den Verkehr an. Das ist ein bisschen komplexer. Obwohl eine App möglicherweise komplexer als andere ist, bedeutet das nicht unbedingt, dass es eine schlechte Benutzererfahrung sein wird. Airbnb ist ein wirklich gutes Beispiel dafür. Hier können Sie sehen, dass sie Fotos und große Topographie in Verbindung mit einem großen Fluss verwenden , um die Informationen für visuell ansprechende Bildschirme zu brechen. Obwohl es viele Informationen gibt, die dem Benutzer präsentiert werden, fühlt es sich nicht so überwältigend oder verwirrend an. In diesem Beispiel zeige ich hier, ein Benutzer sucht nach einem Ort in South Lake, Tahoe. Sie haben all diese schönen Bilder, die sie durchblättern können. Wenn sie dann etwas finden, das sie mögen, können sie durchklicken, um das zu lesen. Ziemlich einfach. Indem Sie also ein Verständnis dafür haben, was Ihre Nutzer mit Ihrer App tun sollen, sind Sie auf dem besten Weg, Benutzerpersonas, eine User Journey Map, Skizzen und Drahtrahmen zusammenzustellen eine User Journey Map, , die alle deckt in den folgenden Videos ab. 4. Projektbeispiel: Auswahl einer App: Zu diesem Zeitpunkt wurden Sie in das Klassenprojekt eingeführt und Sie hatten einen Überblick über das User Experience Design. Als nächstes werde ich Sie durch ein Beispielprojekt führen, um Ihnen hoffentlich ein besseres Verständnis für jeden Schritt zu geben und wie Sie erwarten können, dass die Ergebnisse aussehen. Für mein Beispielprojekt wollte ich mich auf die Buchung eines Flugaspektes der Reise konzentrieren. Für diese Zwecke werde ich die Southwest Airlines App als mein Beispiel verwenden, und ich werde Ihnen zeigen, wie ich es mir vorstelle, sie von Anfang bis Ende neu zu gestalten. Werfen wir einen Blick auf die bestehende Southwest App. Ich habe hier eine Reihe von Bildschirmen von der App, die ich auf meinem Handy genommen habe , nur um Ihnen eine Vorstellung davon zu geben, wie es jetzt aussieht. Ich bin sicher, wie Sie sagen können, sieht das visuelle Design ziemlich veraltet und klobig aus. Es ist auch nicht super freundlich auf den ersten Blick. Ich habe den Eindruck erweckt, dass es eine langsame Erfahrung werden wird, ehrlich gesagt, weil es veraltet aussieht. Ich weiß es nicht. Es macht mir einfach keinen guten Eindruck. Ich fühle mich nicht wirklich großartig, wegen , oh, das wird großartig. In Bezug auf den Fluss selbst fühle ich mich, als wäre es ein bisschen lästig, mit dieser Option präsentiert werden zu müssen , um sich sofort als Gast anzumelden oder fortzufahren. Vor allem, wenn Southwest keine App ist, die ich viel benutze und ich keinen Benutzernamen und kein Passwort habe , ist das ärgerlich. Wenn ich auf „Als Gast fortfahren“ klicke, ist das allererste, was ich oben sehe, sich anzumelden oder sich anzumelden und mich anzumelden, damit sie mich bereits auf etwas verkaufen , wenn ich nur einsteigen und einen Flug buchen möchte. Dann sehe ich auch verschiedene Optionen hier unten, so dass ich einchecken, einen Flugstatus überprüfen, Reisen buchen, Reisen verwalten und Sonderangebote usw. Jetzt, wenn ich auf „Buchen Reisen“ klicke, komme ich hierher, und nichts ausgefüllt ist. Eine Sache, die mich wirklich verrückt macht , ist , dass sie nicht nach dem Ort gesucht haben, in dem ich gerade bin. Sie wissen nicht, dass ich in Kalifornien bin. Sie werden San Francisco nicht wieder als meinen Heimatflughafen bevölkern. Das ist etwas, das viele Apps nutzen. Sie tauchten auch nicht einmal etwas auf, sagen einfach: „Southwest Airlines würde gerne Ihren Standort nutzen.“ Ich hätte ihnen gerne die Erlaubnis gegeben, meinen Standort zu nutzen, wenn sie mich davon ersparen würden, das hinzuzufügen. Es ist nur eine von diesen kleinen netten zu Haves, was es das Gefühl macht, dass ich weniger Arbeit mache. Selbst wenn ich tatsächlich durchgehe und klicke auf, wo ich eine Stadt wählen kann, alles, was ich hier sehe, nicht einmal irgendwelche Vorschläge. Wieder, sie benutzen meinen Standort einfach überhaupt nicht. Wenn es so wäre, dann hätten sie vielleicht Oakland, San Francisco und San Jose gesagt , zum Beispiel alle Flughäfen, die in der Nähe sind. Aber stattdessen sehe ich die Liste der nur Städte alphabetisch. Ich würde voran gehen und jede Stadt eingeben, die ich will. Jedes Mal, wenn ich auf den Bildschirm zurückgehe, also hin und her, hin und her, füllen Sie das Datum aus. Wählen Sie hier aus, wie viele Passagiere. Ich habe keine Promotion-Codes oder irgendetwas, also klicke ich auf „Suchen“. Es dauert eine Weile, um den Himmel zu füllen. Aber dann, nachdem ich auf „Suchen“ geklickt habe, werde ich mit meinem Auswahl-Abflugbildschirm angezeigt. Nun, es ist ziemlich klar, dass ja, hier werde ich meinen abreisenden Flug wählen, es ist super überwältigend. Es passiert gerade so viel auf dem Bildschirm. Es gibt riesige, violette Knöpfe. Sie erzählen mir auch, wie die Taschen frei fliegen. Persönlich kenne ich das Ding von Southwest. Ich weiß es schon. Ich muss es hier nicht sehen. Selbst wenn ich es nicht wüsste, ist hier der richtige Ort, um mir diese Informationen zu präsentieren? Ich bin mir nicht wirklich sicher. Auch dieses $ und Punkte Dinge fühlt sich einfach wirklich, wirklich sehr prominent. Wenn ich nach unten scrolle, eine andere Sache, die ich bemerken werde, ist, dass die lila Tasten nur schlimmer werden. Sie haben diese tolle Farbverlaufs-Textur auf ihnen. Es ist nur eine Menge los. Sie haben dies für jeden der Flüge. Also ja, ich schätze, sie sind zusammengefasst, aber es fühlt sich wirklich überwältigend an. Eine andere Sache, die ich wirklich seltsam finde, ist, dass, wenn ich tatsächlich auf eine von ihnen klicke, also wenn ich traffe, will weg, jederzeit , oder Geschäft wählen, anstatt nur den Flug zu wählen und mir voranzugehen, es wird sich erweitern, wie Sie hier sehen können. Was erweitert es, um mir zu zeigen? Dass ich zwei kostenlose Schecksäcke bekomme. Warte, das wusste ich schon, weil er es mir vor einer Weile gesagt hat. Es wird mir sagen, wie viele schnelle Belohnungspunkte ich bekommen könnte. Vielleicht sind das hilfreiche Informationen, aber brauche ich das hier wirklich? Wieder, nicht wirklich sicher, ob das das wert ist. Denn jetzt muss ich wieder Ja sagen, wählen Sie diesen Flug, das ist der, den ich will. Nachdem ich durchgefahren bin und ich meinen Abflug gewählt habe, wähle ich meinen Rückflug, ich werde hier den Übersichtsbildschirm sehen. Wieder, vorwärts, sie haben diese Kopfzeilen, die sagen: „Hier sind die verschiedenen Flüge.“ Aber dann wird dieser Text wirklich klein und zusammengequetscht. Es hat alles kaputt, aber ich habe einfach das Gefühl, dass es einen besseren Weg geben könnte diese Informationen zu zeigen, die ein bisschen leichter zu lesen sind. Mein Gesamtpreis ist hier unten, großartig. Hey, erstes und aufgegebenes Gepäck fliegen frei. Das ist eigentlich ein bisschen hilfreicher hier unten, weil ich es direkt neben dem Preis sehen kann , den ich bezahle und ich weiß, dass ich keine extra für Taschen bezahlen muss. Ich mag das wirklich. Dann habe ich von dort auf „Weiter“ geklickt, und dann gehe ich auf meinen Weg, um mit dem Hinzufügen meiner Kreditkarte fortzufahren und so weiter. Ich werde diesen Teil des Flusses für meine Zwecke überspringen , weil ich denke, dass wir hier am Anfang viel zu arbeiten haben. Bevor ich meine Personas erstelle, möchte ich eigentlich über einige Benutzeraufgaben und Anwendungsfälle nachdenken , für die mein Benutzer die Southwest-App verwenden würde. Um Brainstorming, griff ich einige Post-it, packte einen Sharpie und begann gerade notieren, was die Leute tun würden , wenn sie kamen, um die Southwest App zu verwenden. Was ich aufgeschrieben habe, ist die Suche nach einem Hin- und Rückflug nach Preis und Zeitplan, Buchung rund um den Flug. Eigentlich, ob sie nur surfen, um eine Vorstellung von Preisen zu bekommen , ist manchmal anders als tatsächlich, wenn Sie bereit sind zu buchen. Oftmals mache ich das selbst. Ich werde weitermachen und schauen, um zu sehen, wie viel Dinge sind, aber ich plane nicht wirklich zu buchen. Darüber hinaus kann ich eine bestehende Reservierung einsehen, also sehen Sie, was alle Flugdetails sind. Dann kann ich zusätzlich meinen Sitzplatz wechseln oder aufrüsten. Wenn ich einen Flug bevorsteht, kann ich morgen zum Beispiel in diesen Flug einchecken, und ich kann den Flugstatus sehen, um zu sehen, ob ich mich verspätet habe, wichtige Informationen wie diese. Wenn Sie eine eigene Liste von Anwendungsfällen erstellen, versuchen Sie, darüber nachzudenken, was für jede Aufgabe wirklich wichtig sein wird, und machen Sie einige Recherchen. Fragen Sie Ihre Freunde oder Familie nach ihren eigenen mobilen Reiseerlebnissen. Welche Apps verwenden sie? Welche Apps mögen sie? Verwenden sie überhaupt Apps, oder werden sie nur den Computer benutzen weil sie nichts gefunden haben, das für sie funktioniert, oder sie haben einfach Angst davor? Die Aufgaben, die ich hier aufgelistet habe, sind ziemlich häufig für mobile Benutzer. Sobald ich meine Persona erstellt habe, werde ich eine dieser Aufgaben verwenden, um den Rest des Projekts zu leiten. Sobald ich meine Anwendungsfälle bereits habe und bereit, auf Post-it Notes erstellt, als nächstes werde ich über die Arten von Menschen nachdenken, die Southwest App verwenden würden. Dies ist eine weitere Brainstorming-Übung. Wieder, holte mein Skizzenbuch raus und holte meine Post-it Notes raus. Ich habe einige potenzielle Benutzer aufgelistet. Was ich tue, ist, Stereotypen oder durchschnittliche Benutzer zu vermeiden. Mit Personas möchten Sie ein Modell erstellen, das sich wie eine echte Person anfühlt. Was ich hier ausgedacht habe, sind sie ein bisschen verallgemeinert, aber wir werden sie zu etwas viel konkreterem machen, während wir gehen. Die sechs, die ich mir ausgedacht habe, und sechs ist eine völlig willkürliche Zahl. Es passt wirklich gut auf das Skizzenbuch. Was ich angefangen habe, war College-Student, eine berufstätige Mutter von drei Jahren, eine Geschäftsleitung, sagen wir, ein Kerl in seinen 40ern, der wirklich budgetbewusst ist, ein junger Profi und eine neu verheiratete Frau. Nur ein breites Spektrum an verschiedenen Arten von Benutzern. Zum Beispiel, beginnend mit College-Student, ist es wirklich ein bisschen wie eine Verallgemeinerung. Aber wenn Sie sich für den Archetyp entscheiden, werden Sie diesem College-Student Leben einhauchen, indem Sie ihre Persönlichkeit zeigen, ihre Eigenschaften zeigen und welche Ziele sie haben. Weil man nicht einfach alle College-Studenten in einem Eimer gruppieren kann. Natürlich werden sie völlig anders sein. Jeder hat verschiedene Persönlichkeiten. Aber sobald Sie mehr Details haben, wird das Ihnen helfen, herauszufinden, welche Art von Benutzer sie sind. Sie wählen am Ende einen College-Student, zum Beispiel, Sie werden auf einen bestimmten College-Student zu bestimmen, was die Persönlichkeit dieser Person ist, was ihre Eigenschaften sind, diese Art von Sache. Sie werden wirklich in der Lage sein, sich auf diese bestimmte Person zu konzentrieren. Es ist zufällig ein College-Student, also gibt es Ihnen ein bisschen einen Ausgangspunkt. Jetzt, im nächsten Video, werde ich Sie durch die Person führen, die ich gewählt habe. Ich werde eigentlich jungen Profi wählen, um das als Leitfaden für den Rest dieses Projekts zu verwenden . Aber das werden wir im nächsten Video genauer durchgehen. 5. Definieren von Benutzerpersonen: Willkommen zurück. Im letzten Video gab ich Ihnen einen Überblick über das User Experience Design und wie es sich um mobile Apps handelt. In diesem nächsten Video werden wir den ersten Schritt unseres UX-Prozesses behandeln Benutzerpersonas für unsere App definieren. Es gibt viele verschiedene UX-Tools und Techniken, die Designer jeden Tag verwenden, um Projekte zu beginnen. Einige Designer konzentrieren sich auf ein paar ausgewählte Techniken, während andere viel umfangreicher sind. Einige der UX-Techniken, die wir hier nicht behandeln werden , umfassen die Durchführung von Interviews mit Stakeholdern, Sammeln von Anforderungen, die Analyse von Wettbewerbern, Umfragen und Analysen. Dies liegt nicht daran, dass diese Techniken überhaupt nicht wichtig , sondern weil sie für uns an dieser Stelle einfach nicht relevant sind. Da es so viele verschiedene Techniken gibt, die Sie verwenden können, werden viele dieser Dinge in mehr professionellen Sinn verwendet und so macht es einfach keinen Sinn für uns, diese abzudecken, um zu beginnen. Aber die UX-Technik, mit der wir anfangen werden, ist die Erstellung von Benutzerpersonas. Eine Persona ist ein Charakter, der für die Bedürfnisse, Gedanken und Ziele des Zielbenutzers repräsentativ ist . Personas wurden entwickelt, um die bestmögliche Erfahrung für Ihre Benutzer zu gestalten. Stellen Sie sich eine Persona als Ihren typischen oder idealen Benutzer vor, und wen sehen Sie mit Ihrer App? Personas kann Ihnen helfen, sich daran zu erinnern, dass Ihre Benutzer möglicherweise nicht genau wie Sie sind. Sie halten Sie auch davon ab, alle Benutzer in einem Haupt-Bucket zu verallgemeinern und denken, dass jeder die gleichen Bedürfnisse und Ziele hat. Natürlich haben viele Benutzer wahrscheinlich die gleichen oder ähnlichen Ziele für die Verwendung Ihrer App, aber jede Person kommt aus einem anderen Hintergrund. Zum Beispiel möchten zwei Benutzer beide einen Flug buchen, aber ein Benutzer vielleicht eine hochrangige Führungskraft, die Meilen für erstklassige Reise verwenden möchte, während andere vielleicht eine Mutter, die nur den günstigsten Weg finden will , um sie zu bekommen drei Kinder, um ihre Großeltern zu besuchen. Diese Nutzer haben völlig unterschiedliche Bedürfnisse und haben daher unterschiedliche Möglichkeiten, in einer Reise-App zu navigieren. Es gibt wahrscheinlich mehrere verschiedene Arten von Personen, die Ihre App verwenden würden, um zu versuchen, mit 2-3 Personas zu kommen, um Ihre Benutzer zu vertreten. Jeder sollte einen etwas anderen Story und Anwendungsfall haben, warum er Ihre App verwenden möchte und welche Schritte sie unternehmen, um ihre Bedürfnisse zu erfüllen. Wir werden beginnen, indem wir eine Beschreibung für jede Ihrer Personas aufschreiben. Betrachten Sie verschiedene Arten von Personen, um eine Vielzahl von Benutzern am besten zu repräsentieren. Denken Sie zurück an die Führungskraft gegen die Mutter, die eindeutig sehr unterschiedliche Benutzer sind. Wenn Sie jede Beschreibung schreiben, sollten Sie Folgendes angeben: Geschlecht, Alter, Familienstand, Beruf, Wirtschaftsstatus, wie vertraut sie mit Technologie sind, Geräte, allgemeine Hobbys, usw. sollten Sie Folgendes angeben: Geschlecht, Alter, Familienstand, Beruf, Wirtschaftsstatus, wie vertraut sie mit Technologie sind, Geräte, allgemeine Hobbys, usw. diese Dinge werden helfen, zu erfassen, wer diese Person wirklich ist, dass Sie versuchen, zu vertreten. Nachdem Sie die Beschreibung der Persona erfasst haben, erstellen Sie anschließend ein Szenario, für das Sie sich vorstellen können, dass ein Benutzer Ihre App verwenden möchte. Denken Sie darüber nach, was die Motivationen, Ziele und Bedürfnisse der Nutzer sein würden. Die Personas, die Sie erstellen, sollten einige Szenarien und Benutzertypen abdecken , für die Sie entwerfen möchten. Sie werden nicht in der Lage sein, für jeden Benutzer zu zählen, aber Sie können zumindest ein paar in Betracht ziehen. Beginnen Sie, indem Sie Ihre Beschreibungen und Szenarien aufschreiben. Sie müssen nicht viel Zeit damit verbringen, diese wirklich großartig zu gestalten oder zu gestalten. Es liegt auch an Ihnen, wenn Sie ein repräsentatives Foto für jeden Benutzer hinzufügen möchten. Es kann hilfreich sein, Ihre Personas auszudrucken und sie in der Nähe zu haben , wenn Sie über Ihre App und mehr Details nachdenken. Aber an dieser Stelle gibt es wirklich keine Notwendigkeit, sie wirklich schick zu machen. Wieder, Ihre erste Lieferung wird es sein, 2-3 Personas zu erstellen , um Ihre Zielbenutzer am besten zu repräsentieren. Sie können diese in jedem von Ihnen gewählten Format in Ihr Projekt hochladen. Ich werde auch einige Referenzen im Web einschließen , die Sie durchschauen können, wenn Sie mehr Informationen über Personas haben möchten, gibt es eine Menge wirklich tolles Zeug da draußen. In unserem nächsten Video erfahren Sie, wie Sie diese Personas verwenden können, um Ihnen bei der Erstellung einer Nutzerfahrenkarte zu helfen. 6. Projektbeispiel: Persona: Wir haben gerade unseren ersten UX-Schritt zur Definition von Benutzerpersonas behandelt. Jetzt werde ich Sie durch mein Projektbeispiel führen, um Personas zu definieren. Der Persona-Archetyp, den ich für mein Beispiel wählen werde, ist der junge Profi. Ich begann mit der Entscheidung, dass dies eine weibliche Nutzerin sein würde, und ich nannte sie Kelly. Was ich hier getan habe, war, dass ich mein Skizzenbuch wieder rausnahm und gerade angefangen habe, ein paar Sachen zu notieren, die ich über Kelly abdecken wollte. Ich habe versucht, mir vorzustellen, welche Art von Person Kelly sein würde und welche Art von Benutzer sie repräsentieren würde. Auf der Skizze notierte ich persönliche Statistiken, Eigenschaften, ihre Sicht auf Technologie und was ich mir ihre Ziele vorgestellt habe und sein muss. In den meisten von dem, was ich aufgeschrieben habe, hat etwas mit Reisen in der einen oder anderen Weise zu tun. Ich fing hier an, wie Sie sehen können, also entschied Kelly, sie ist ungefähr 27, für unsere Zwecke ist sie eine UX-Designerin, und ich fing an, ein paar persönliche Dinge über sie zu schreiben und zu sagen, dass sie nicht verheiratet ist, aber Sie ist in einer engagierten Beziehung. Sie macht ein anständiges Gehalt, sie lebt in San Francisco, hat ein paar Mitbewohner, aber keine Haustiere. Dann Eigenschaften, um zu erklären, welche Art von Person, die sie ist. Also, wenn du sie zum Beispiel einem Freund beschreiben würdest, was würdest du sagen? Ich wählte zu sagen, dass sie eine ziemlich aktive Person ist, sie macht Fitness-Kurse und Yoga, sie liebt es wirklich zu reisen, leicht zu gehen, und das ist wichtig. Sie ist nicht super sparsam, aber auch keine unverschämte Spender. Sie ist organisiert, aber sie plant gerne. Also nicht übermäßig OCD, aber sie mag Dinge, um ihren Weg zu gehen. All diese Dinge sind wirklich wichtige Unterscheidungen, während wir in ihr auf unsere Personas verfeinern. Als nächstes, Technologie, das ist wieder wichtig, weil wir hier eine mobile App machen. Weil sie eine UX-Designerin ist, wird das zu ihrem Einsatz von Technologie beitragen, so dass sie sie wirklich umarmt. Wieder ist sie wegen ihres Jobs drauf. Dies bewirkt, dass sie frustriert mit langsameren, schlechten Erfahrungen, sie hat das neueste iPhone, immer auf dem neuesten Stand über diese Art von Sache. Sie ist sehr bequem online zu kaufen, und sie ist eine ziemlich aktive Internetnutzerin. Das beschreibt also, wie sie sich mit Technologie fühlt und wie ich an sie denken werde, während ich die Version der Southwest App entwerfe. Zu guter Letzt, ihre Ziele und Bedürfnisse. sind Dinge, die ich durchdachte, was wird Kelly im Sinn haben, wenn sie diese App benutzt? Sie wird sich über gute Flugangebote bewusst sein wollen, das ist etwas, das ihr wichtig ist. Sie möchte die Möglichkeit haben, Reisedaten und -zeiten zum besten Preis zu vergleichen, sie möchte Meilen oder Punkte für Reisebuchungen verwenden können, und sie zieht es vor, bei einer Fluggesellschaft zu bleiben, weil sie auf diese Weise diese Meilen oder Punkte, um ihr zu helfen. Wieder, wie ich hier sagte, sie ist nicht sparsam, aber er ist auch kein unverschämter Spender, also ist sie ziemlich jung, also will sie jede Möglichkeit nutzen, dass sie ein wenig Geld sparen kann. Nun, da ich das getan habe, tauchen wir ein wenig tiefer in einige der Dinge ein, die wir hier bemerkt haben. Ich sagte, sie war in einer engagierten Beziehung und liebt Reisen, also stellen wir uns vor, sie würde viel mit ihrem bedeutenden anderen reisen. definiert, dass sie ein anständiges Gehalt macht, und wieder, dass sie nicht sparsam und nicht unverschämt Spender, all diese Dinge haben sie in eine bestimmte Kategorie gebracht. Man könnte davon ausgehen, dass sie nicht den absolut billigsten Flug wählen wird, und alles andere über die Reise opfern, nur um das gute Geschäft zu bekommen, aber dass sie wahrscheinlich eine Menge Forschung machen würde , um einen Flug zu finden, den sie gut fühlt über. Nun, da Sie Ihre Personas nicht einem Kunden oder einem anderen Stakeholder präsentieren werden , ist eine Skizze, wie ich hier gemacht habe, durchaus akzeptabel für diese Klasse. Völlig gut. Aber was ich als Nächstes tun werde, ist, Sie durch, wie das in digitaler Form aussehen könnte. Auch hier möchten Sie idealerweise 2-3 Personas für Ihr Projekt erstellen. Ich werde nur einen abdecken, aber das ist nur, um dir eine Idee zu geben. Als Nächstes ist die Demonstration. Jetzt beginnen wir mit dem eigentlichen Demonstrationsteil. Was ich tun werde, ist die Programmskizze zu öffnen, und ich werde zwei eine neue Datei erstellen, oops, es ging dort drüben. Ich weiß nicht, ob ihr mit Skizze vertraut seid oder nicht. Aber das ist ein wirklich großartiges Werkzeug für super schnelle Dinge. Viele Leute benutzen es tatsächlich für die tatsächliche Benutzeroberfläche, ich bevorzuge Photoshop selbst. Aber ich liebe dieses Tool, um Dinge schnell herunterzulegen und jedes Wireframing zu machen. Das ist, was ich für meine Personas und meine User Journeys verwenden werde, also ist es nur ein wirklich großartiges Werkzeug, um schnell und einfach etwas zu tun. Es ist ziemlich ähnlich wie andere Programme wie Keno und Sie haben entweder Tools auf der Seite hier, wir haben Werkzeuge oben und alle Arten von Dingen so, viele Dinge, die wir behandeln, wenn wir vorwärts gehen. Das erste, was ich tun möchte, Moment ist dies genau wie eine große leere Leinwand, wie Sie sehen können. Was ich eigentlich tun möchte, ist, dass ich eine Zeichenfläche einfügen möchte. Das wird mir genau wie eine Begrenzungsbox geben, wo ich alles platzieren werde. Du musst das nicht tun, aber es hilft ein bisschen, denke ich. Es hilft auch beim Exportieren, weil Sie auf diese Weise haben, wie genau das, was Sie exportieren werden. Von hier aus kann ich eigentlich einfach, halten und ziehen Sie hier, um eine Zeichenfläche zu erstellen, oder ich kann auch mit all diesen Dingen beginnen. So wird dies wirklich praktisch für Sie sein , wenn Sie dieses Programm für Ihre Wireframes später verwenden, weil Sie iPhone-Bildschirme für jede Größe, iPad auch, viele Dinge hier in wählen können . Aber zu diesem Zweck werde ich eigentlich mit der Buchstabengröße beginnen, und dann können Sie hier sehen, ich bekomme diese kleinen Grenzen, also kann ich dieses Ding tatsächlich so groß skalieren, wie ich will. Da ich das eigentlich nicht ausdrucke, egal, wie groß es ist, und wenn ich es drucken wollte, bekomme ich immer, es würde einfach nach unten skalieren. Ich weiß, dass meine Persönlichkeit tatsächlich ein bisschen größer wird, und ich möchte sie einfach etwas breiter und etwas größer machen. Also werde ich diesen Kerl willkürlich etwas größer machen, und das kann ich immer ändern. Wenn ich also wegklicke, dann habe ich diese kleinen Begrenzungsboxen nicht mehr, aber wenn ich wieder hier oben klicke, kommen sie sofort wieder. Super einfach an jedem Punkt zu wechseln. Das ist auch der Name dessen, was dieses Ding so ist, ich kann entweder hier rüber gehen und beschließen, es umzubenennen, und ich werde einfach sagen, Persona, und ich werde hier aktualisieren. Wieder, keine große Sache, aber es wird helfen, wenn Sie mehr als eine dieser Zeichenflächen nebeneinander haben, so dass Sie tatsächlich alle Ihre Personas in einer Datei machen können. Es wird nur Ihnen helfen, Spuren zu halten, so könnte dies Persona a sein. Wenn ich wollte, könnte ich gehen, fügen Sie unser Board, oder ich kann tatsächlich, Ich kann mit der rechten Maustaste auf dieses Zeichen und sagen Duplicate, und dann wird es setzen ein zweites hier. Also könnte ich alle drei auf einmal machen, und ich kann Ihnen zeigen, wie man das am Ende exportiert. Aber im Moment werde ich den Kerl einfach löschen, weil sie ihn nicht brauchen. Das nächste, was ich tun möchte, ist tatsächlich speichern Sie diese Datei nur für den Fall, ich werde diese Persona und eine Skizze nennen, Sie können einfach voran gehen und auf dem Desktop speichern. Großartig. Bereit zu gehen. Jetzt muss ich mit dieser Person arbeiten, also habe ich Kelly. Eine Sache, die viele Leute mit Personas tun, ist tatsächlich ein Foto zu verwenden, um diese Person zu repräsentieren, und es gibt nur ein bisschen mehr Leben für Ihre Person, also können Sie diese Person betrachten und sagen, ja, das ist Kelly für mein Beispiel. Ich habe das Internet ein wenig durchsucht und ein paar Fotos gepackt, aber für unsere Zwecke hier werde ich das einfach einfügen. Das ist also meine Vertretung von 27-jähriger Kelly. Kleben Sie das da rein. Großartig. Das nächste, was ich tun möchte, ist eigentlich, ich möchte etwas Text einfügen. Ich möchte im Hinterkopf behalten, welche Person Kelly repräsentiert, und dass für mich das der junge Profi war. Ich werde ein Textfeld einfügen, und ich werde sagen, Young Professional, cool. Das ist meine Person, ich werde nur entscheiden, es dort zu setzen. Dann möchte ich auch Kellys Namen hier setzen. Kelly, und dann habe ich alle meine Werkzeuge hier für meinen Text, was es wirklich einfach macht, Dinge [unhörbar] etwas zu machen. Cool, das sieht aus wie eine gute Größe. Sehen Sie, ob ich wie eine blaugrüne Art von Sache machen wollte, das ist völlig willkürlich, ich entscheide das nur, wenn wir gehen. Aber hier ist Kelly, und sie haben tatsächlich diese netten kleinen schlauen Führer, die alles aufstellen, damit es hilfreich ist. Großartig. Als nächstes möchte ich nur ein wenig mehr Leben in dieses eigentliche Dokument bringen und es hübsch aussehen lassen, zusammensetzen und es einfach schön aussehen lassen. Eine Sache, die ich tun möchte, ist, ich werde nur eine Farbbox verwenden und es hier schreiben. Ich habe nur, dass es gerade auf die Breite ihres Bildes groß ist. In diesem Block werde ich ein paar Dinge über Kellys Hintergrund stellen. Ich habe auch vergessen zu erwähnen, wenn du deine Personas kreierst, was ich getan habe, ist eigentlich nur online nach Inspiration dafür zu suchen, wie diese Dinge angelegt sind. Es ist ziemlich hilfreich, nur ein Gefühl für verschiedene Möglichkeiten zu bekommen , dass Sie sie auslegen können, oder es könnte eine Vorstellung davon auslösen, dass ich dies in meine Persona aufnehmen möchte, die ich nicht selbst abgedeckt habe. Für diese zum Beispiel habe ich gerade eine schön aussehende Persona gefunden und ich sagte „Das sieht toll aus, fand es auf [unhörbar]. Ich dachte, ich würde diese Struktur für dasselbe für meine verwenden.“ Ich habe schon etwas davon getippt, nur um uns ein bisschen Zeit zu sparen, aber ich habe, was ich Kellys Hintergrund hier nenne und nur das einzuspielen. Also, was ich hier habe, sind die kleinen Statistiken über Kelly, also sind es Alter, Ort, Familienstand, Kinder, Beruf, Gehalt und Ausbildung. Etwas von diesem Zeug, das ich vorher nicht in meiner Skizze geschrieben habe, aber es war nur etwas, das ich an dieser Stelle hinzufügen wollte, und das ist völlig in Ordnung. Dieser ganze Prozess ist wirklich flexibel. Also hier listen wir nur all diese Dinge auf, wie Sie sehen können. Was ich dann auch tun möchte, ist, dass ich es dir wieder zeigen kann. Ich hatte hier nur ein paar Dinge über Kelly geschrieben, also habe ich Listen und alles aufgezählt. Aber was ich auch tat, war, dass ich mir etwas Zeit genommen habe, um einen kleinen Absatz über Kelly zu schreiben. Also nochmal, wenn ich sie einer Freundin beschreibe oder eine Aufschrift über Kelly mache , wollte ich eine Geschichte erzählen, eine Grundlinie. Ich habe diesen Kerl auch schon geschrieben, einfach hier reinkleben, da gehen wir. Ich werde mich entscheiden, das hier zu setzen. Das ist ein großartiger Punkt. Jetzt können Sie sehen, dass mein Text etwas näher am Rand ist und ich möchte nicht wirklich, dass dieser Leitfaden viel größer ist. Ich werde meine Schachtel nur ein bisschen ausstrecken, perfekt. Da gehen wir. Also wegen Kelly, das ist im Grunde nur ein Absatz, um ein wenig über Kelly zu erklären. Es fasst zusammen, was ich in meinen Notizen behandelt habe. Grundsätzlich ist Kelly eine aktive Person, die gerne an neue Ziele reist, wann immer sie kann. Sie versucht, jedes Jahr eine Reise ins Ausland zu planen sowie kürzere Kurzurlaube zu nahegelegenen Orten. Sie hat drei Wochen Urlaub, die sie idealerweise weg von zu Hause verbringen wird. Sie reist hauptsächlich mit ihrem Freund, aber gelegentlich mit einer kleinen Gruppe von Freunden. Kelly macht ein anständiges Gehalt, also ist sie nicht ganz budgetbewusst, aber sie ist auch kein extravaganter Spender. Sie wiegt oft Optionen ab, um zu sehen, ob Qualität oder Preis attraktiver ist. Also fasst es alles zusammen, was wir bisher geschrieben haben. Das nächste, was ich hinzufügen möchte, sind diese Eigenschaften. Wir haben das wieder mit unseren Einschusspunkten abgedeckt. Ich werde tatsächlich einige Aufzählungspunkte hinzufügen, nur für ein wenig mehr Klarheit hier. Cool. Großartig. Super einfach. Eigentlich nicht endlich, ich habe hier oben ein Loch. Aber ich habe, was auch wirklich wichtig ist, ihre Ziele und Bedürfnisse. Also werde ich versuchen, diesen Kerl mit beiden auszurichten. Manchmal ist das der Grund, warum ich nicht super Pixel perfekt mit Skizze sein kann, weil es mich ein wenig verrückt macht. Also nochmal, mit ihren Zielen möchte ich Summenkugeln hinzufügen und das sind all die Dinge , die wir früher behandelt hatten und ich könnte einfach versuchen, zu sehen, ob ich kann, nein. Das ist also nicht so großartig, um Dinge auszurichten, aber wir können das später beheben. Alles klar, das letzte, was ich dieser Persona hinzufügen wollte, war eigentlich, oft benutzen Leute kleine Diagramme oder Grafiken oder Symbole, um verschiedene Dinge darzustellen, nur um dies visuell interessanter zu machen. Also, was ich getan habe, ist ein kleines Balkendiagramm mit drei verschiedenen Aspekten über Kelly gemacht. Also werde ich versuchen, das auszurichten. Sieht ziemlich gut aus. So technisches Wissen, Ausgabe-Gewohnheiten und Buchungsvorlieben. Diese drei Dinge, die ich hervorheben wollte, weil sie für mich ziemlich wichtig sind, da ich dieses Projekt fortsetzen werde. Also mit technischem Wissen, hat sie wenig Wissen auf Expertenebene? Also sagte ich: „Ziemlich nah an dem Experten.“ Natürlich ist sie nicht die Top-Expertin, aber sie hat ein gutes Gefühl. Gewohnheiten ausgeben, sparsam bis verschwenderisch. Sie ist in der Mitte, etwas mehr zu sparsam, aber definitiv nicht weit hier rüber. Ihre Buchungsvorlieben gegenüber dem niedrigsten Tarif im idealsten Flug auch in der Mitte, vielleicht ein wenig mehr in Richtung der idealsten Flug. Das wird mir ein wirklich gutes Gefühl geben, ich kann auf das schauen, ich kann für euch vergleichen, es wäre etwas wirklich Großartiges, weil du zwei vor drei dieser Personas haben wirst. Sie können sie zusammen betrachten und sagen: „Kelly ist der Benutzer, der so ist. Sagen wir mal, Sam, ist der Benutzer, der so ist.“ Vielleicht ist Sam auch der sparsamere, sein Budget-bewusster Kerl. Dann könnte es jemand anderes geben, der vielleicht wirklich wenig Wissen über Technologie hat, und das ist etwas, auf das Sie sich während Ihres gesamten Projekts konzentrieren wollen. Also bin ich hier fertig. Das nächste, was ich Ihnen zeigen werde, ist, wie man diesen Kerl exportiert. Weil ich bereits mein Kunstboard habe, wie ich schon sagte, wird es einfach exportiert. Ich gehe hier hoch, exportiere, wähle aus, also nennt es es eine Scheibe. Was ich will, dass zwei jetzt tun, ich will kein PNG. Du könntest, wenn du willst oder du JPG oder TIFF machen könntest, aber ich werde nur ein PDF machen, weil es ein bisschen einfacher und es auch den Text wirklich schön hält. Also exportieren und das wird sagen, „persona.pdf“. Klingt großartig. Klicken Sie auf Export, entscheiden Sie, wo Sie es speichern möchten. Perfekt. Fertig. Ich werde das retten und jetzt, wenn wir diesen Kerl öffnen , cool, habe ich meine Person hören. Also das ist wieder etwas, das ich ausdrucken kann, wenn ich will. Aber dies wäre auch eine gute Möglichkeit, als endgültige Leistung für dieses Projekt oder für diesen Teil des Klassenprojekts zu liefern . Ich werde einen Link zu einer Beispiel-Persona-Vorlage hinzufügen, die Sie herunterladen können, es ist etwas, das ich online gefunden habe. Es ist ein bisschen digitaler und nicht digitaler Stil, also ist es etwas, das Sie ausdrucken und dann zeichnen können. Das könnte ein guter Anfang sein, wenn Sie mit dem Skizzieren beginnen wollten. Dann lade ich auch meine Skizzendatei hier hoch , falls es etwas gibt, das ihr euch da rausholen wollt. In Ordnung. Nun, du solltest bereit sein, deine Personas in Gang zu bringen, und ich kann nicht darauf warten, sie zu sehen. 7. Kartierung der User: Willkommen bei Unit 3, Mapping the User Journey. Unsere nächste UX-Technik wird als User Journey Map bezeichnet und kann auch als User Experience Map bezeichnet werden. User Journeys bilden die Schrittfolge der Aktivitäten in Interaktionen ab, die der Benutzer mit Ihrer App haben wird. User Journeys sind vorteilhaft für den Designprozess da sie es Ihnen ermöglichen, über die App von einem hohen Niveau nachzudenken. Sie helfen Ihnen, herauszufinden, wie Ihre Benutzer mit Ihrer App interagieren, welche Erwartungen Sie haben und Sie sogar dazu bringen, über neue Funktionen nachzudenken, die Sie vielleicht noch nicht einmal in Betracht gezogen haben. In der Praxis können User Experience Maps sehr komplex sein und Details wie geschäftliche Anforderungen und Ziele, mehrere Berührungspunkte, die ein Benutzer mit dem Produkt oder Service hat, und qualitative Erkenntnisse enthalten mehrere Berührungspunkte, die ein Benutzer mit dem Produkt oder Service hat . Zu unserem Zweck wird sich jedoch auf eine vereinfachte Version konzentrieren, die die Geschichte der Beziehung eines Benutzers mit Ihrer App aus der Perspektive des Benutzers darstellt . User Journey Maps können eher als textbasierter Flow gestaltet werden, oder Sie können einen visuelleren Ansatz verfolgen. Das ist wirklich Ihre Präferenz, und ich zeige Ihnen einige Beispiele von beidem. Hier ist eins hier. Es könnte hilfreich sein, wenn Sie es ein wenig mehr hineinzoomen. Ich habe auch die Links online aufgenommen, wenn Sie auch einen genaueren Blick nehmen wollen. Hier ist noch eine. Sie können sehen, dass diese User Journeys hauptsächlich schwarz-weiß sind, ähnlich wie bei Drahtrahmen, mit Farbknöpfen, um den Pfad darzustellen, den der Benutzer einschlagen wird, oder Optionen, die er wählen kann. Hier ist ein weiterer sieht immer noch ein wenig Draht Rahmen mir. Auch hier möchte ich Sie ermutigen, einen Blick auf diese auch online zu werfen. Einige sind viel einfacher, dies ist ein Beispiel für ein sehr textbasiertes, aber es bekommt immer noch den gleichen Punkt, ist einfach nicht ganz so hübsch. Nachdem Sie nun im letzten Schritt zwei bis drei Personas erstellt haben, werden wir diese als Grundlage verwenden, um für jeden Benutzer eine Nutzerfahrenkarte zu erstellen. Wir beginnen damit, jeden Benutzer oder jede Person oder die Reise zu schreiben und zu visualisieren , die jede Person durch Ihre App nehmen wird. Sie werden darüber nachdenken, was die Ziele und Bedürfnisse Ihrer Benutzer sind? Welche Aufgaben müssen Ihre Benutzer ausführen? Überlegen Sie, welche Ziele und Aufgaben entscheidend sind und welche sekundär sind. Dies hilft wirklich, die Anzahl der Schritte, um eine Aufgabe zu erledigen, auf ein Minimum zu reduzieren. Wir wollen nicht, dass Benutzer durch Ihre App gehen und fühlen sich, als wären sie wirklich überwältigt oder es ist zu kompliziert. Als Nächstes werden wir jeden Schritt des Prozesses des Benutzers abbilden. Denken Sie darüber nach, welche Bildschirme sich der Benutzer bewegen wird, was er auf jedem Bildschirm sehen wird, und bedenken Sie die ganze Zeit, wie sich der Benutzer fühlen sollte. Wieder, wir wollen niemanden betonen. Sie sollten sich gut anfühlen, wenn sie Ihre App verwenden. Eine User Journey Maps sollte einen Verweis auf die Persona, auf der sie basiert, und auf das Endziel des Benutzers enthalten . Einige Beispiele für Aufgaben, die Ihre Benutzer möglicherweise ausführen möchten, insbesondere innerhalb einer Reise-App, wäre, sagen wir, nach drei oder höheren Sternen Hotels in San Francisco zu suchen, oder eine Hin- und Rückfahrt, ein Flugticket, vielleicht buchen Sie eine Ferienwohnung, und dann sogar zu recherchieren und finden Sie Dinge, die Sie in einem bestimmten Urlaubsort tun können. Dies sind ein paar Dinge, die Ihre Benutzer tun möchten und über die Sie nachdenken möchten. Dies sind gute Beispiele dafür, wie Sie können, was Sie tun würden, um den Benutzer durch, wie sie jede dieser Aufgaben erfüllen würde. Bewerten Sie schließlich die Karten, die, sobald Sie einen Entwurf abgeschlossen haben, und fragen Sie sich folgendermaßen, ist der Grad der Komplexität für jede Aufgabe angemessen? Wo kann ich die Dinge vereinfachen? Ist der Gesamtfluss sinnvoll? Sie werden bei Bedarf Anpassungen vornehmen möchten. Dies ist nicht etwas, das Sie wahrscheinlich beim ersten Versuch richtig bekommen werden. Ihr Lieferbestandteil besteht darin, eine User Journey für jede Ihrer Personas zu erstellen , um die Ziele Ihrer Benutzer zu repräsentieren. Wenn Sie Ihre User Journeys abgeschlossen haben, teilen Sie sie mit der Klasse. Als Nächstes tauchen wir ins Skizzieren ein, wo man diese Personas und User Journeys endlich in etwas Konkreteres verwandeln kann. folgenden Videos werden wir ein wenig mehr in den Design-Teil einbringen. 8. Projektbeispiel: User: Also habe ich im letzten Projektschritt meine Persona abgeschlossen. Nun, was ich tun muss, ist zu entscheiden, was die Schlüssel-User Journey ist, die ich skizzieren werde. Lassen Sie uns also beginnen, indem wir die Benutzeraufgaben überprüfen, die ich wieder ausgedacht habe. Zurück zu meinen Post-it-Notizen. Dies waren die Suche nach Hin- und Rückflug nach Preis und Zeitplan, Buchung eines Hin- und Rückflugs, Ansicht und bestehende Reservierung, Änderung oder das Upgrade meines Sitzplatzes, das Einchecken in einen Flug oder die Anzeige meines Flugstatus. Für mein Beispiel werde ich hier die erste Aufgabe verwenden. Suchen Sie nach einem Hin- und Rückflug nach Preis und Zeitplan. Diese Aufgabe ist immer noch ziemlich generisch, also möchte ich eine kleine Geschichte mit meiner Persona von Kelly erstellen. Ich habe mir ein Szenario ausgedacht, das Kelly durchmachen würde. Nehmen wir an, Kelly wollte eine Suche nach einem Hin- und Rückflug von San Francisco nach Portland, Oregon durchführen , um ihre Freunde für ein langes Wochenende zu besuchen. Sie wird mit ihrem Freund reisen. Sie hat drei verschiedene Wochenenden im Sinn und sie möchte den Preis und den Zeitplan jedes Wochenendes vergleichen , um zu bestimmen, welches am besten ideal ist. Mit diesem Szenario wird Kelly auch die Southwest App verwenden, um nach ihren Flugoptionen zu suchen. Basierend auf ihren Persona-Details im Szenario habe ich auch die Liste der potenziellen Ziele gefunden. Die erste ist, dass sie nach einem Hin- und Rückflug von San Francisco nach Portland suchen will . Darüber hinaus möchte sie die Möglichkeit, einfach und schnell mehrere Wochenenddaten zu suchen, um Preise vergleichen zu können. Klingt nicht so hart, oder? Nun, das erste Ziel ist das einfache. Das zweite Ziel, auf der anderen Seite, erfordert ein bisschen mehr Gedanken an meinem Ende. möchte ich besonders viel Aufmerksamkeit widmen. Ich denke darüber nach, wie ich den Fluss der App neu strukturieren könnte. Jetzt werde ich meiner User Journey Map einen Schuss geben. Was ich hier getan habe, ist die Schritte in den Bildschirmen skizziert , die Kelly durchmachen müsste, um ihr Ziel zu erreichen. Also dies wäre sie beginnt zu Hause, Buchung Reise, die erfordert, um eine Abfahrtsstadt wählen, kehrt Stadt und ihre Abreise- und Rückreisedaten. Sobald sie das getan hat, wird sie suchen und sie wird die Ergebnisse für einen Abflug bekommen , den sie wählen wird und dann bekommt sie Ergebnisse für den Rückflug, wo sie einen auswählen würde. Dann wäre ihr nächster Schritt, die Flugübersicht anzusehen und den Gesamtpreis zu erhalten, und dann weiter zu gehen und zu buchen und zu bezahlen. Wieder, für unser Beispiel hier, werden wir nicht wirklich durch die Buchung und Zahlung gehen, wir werden direkt bei diesem Flug Zusammenfassung Schritt stoppen. Sobald ich diese skizziert habe, ging ich zurück zu meinem Skizzenbuch und ich zog das als eher ein Flow heraus. Ich habe das getan, anstatt direkt in die Skizze zu springen, weil es mir wirklich geholfen hat, das zu visualisieren, was ich schneller skizzieren wollte. Dann habe ich am Ende ein paar verschiedene Male auf ein paar verschiedene Arten gezeichnet , bevor die Präsentation richtig anfühlte. Auf diese Weise habe ich eher eine Basis. Ich kann aus meiner Skizze arbeiten, um in die Skizze zu gehen. Als nächstes führe ich Sie durch, wie ich meine Benutzerreisekarte mit Sketch erstellt habe. Ich verheimliche das und gehe zurück zu Sketch. Erstellen Sie ein neues Dokument, und machen Sie diesen Vollbildmodus. In Ordnung. Auch hier möchte ich dieses Dokument speichern. Wir werden diese User Journey nennen. Speichern Sie auf dem Desktop, großartig. Wieder, wie wir es im vorherigen Schritt getan haben, möchte ich hier ein Kunstboard haben. Das werde ich nur kommen und zeichnen eine ziemlich willkürlich. Ich weiß, dass ich viel Platz brauchen werde. Ich werde versuchen, einen großen Teil des Platzes hier zu füllen. Dann möchte ich die Art Board nennen, User Journey. Großartig. Auch hier kann ich die Größe dieses Headers jederzeit ändern, also ist es wirklich keine große Sache. Was ich anfangen werde, ist tatsächlich ein kleiner Header dafür zu erstellen. Ich habe das hier gemacht, also bringe ich das einfach rein. Hier ist meine User Journey. Ich habe auch die Aufgabe skizziert. Also nur eine einfache Textsache, suchen Sie nach Hin- und Rückflug, Flug nach Preis und Zeitplan. Ich werde das nur tun. Großartig. Speichern. Jetzt habe ich meine Basis, um anzufangen. Wie ich schon sagte, wir werden auf dem Startbildschirm beginnen. Wenn Sie sich daran erinnern, dass die Southwest App auf dem ersten Bildschirm war , dass Sie sich anmelden möchten oder möchten Sie als Gast fortfahren? Ich werde nur diesen Bildschirm umgehen und zu dem gehen, was ich den eigentlichen Home-Bildschirm nenne, um zu starten. Als erstes, was ich tun möchte, habe ich hier, die meinen ersten Bildschirm darstellen wird. Dies wird am Ende wie ein Drahtmodell aussehen, aber es ist definitiv kein Drahtmodell. Das Wireframes wäre viel detaillierter. Was ich hier tun möchte, ist nur zu wiederholen, was die einfachen Dinge sind, die auf jedem Bildschirm sein würden , um durch dies ein wenig einfacher gehen zu können. Ich werde damit anfangen, und ich werde das beschriften. Das wird mein Home-Bildschirm sein. Was ich auf dem Home-Bildschirm setzen werde, eigentlich, werde ich mich nicht darum kümmern jetzt. Was ich eigentlich tun werde, ist hier die Tasten anziehen, die ich als Optionen habe. Ich habe gerade einige davon schon gemacht, nur damit es ein bisschen schneller für uns geht. Auf meinem Home-Bildschirm hier gab es ein paar Optionen, Hoppla, ich versuche, diesen Kerl zu kopieren. Ich werde diese einfach kopieren und einfügen. Ich habe fünf dort. Die 're etwa fünf Optionen oder so aus dem Denken zurück, was die Southwest App war. Was ich jetzt tun werde, ist, diese Typen zu beschriften. Wenn dies jemals passiert, können Sie tatsächlich sehen, dass, wenn ich den Mauszeiger über, sind die Ebenen, die oben sind, und dann ist diese Textebene darunter. Also kann ich diesen Kerl entweder nach oben ziehen, also ist er oben auf allem. Da sind wir. Oder ich kann auch nach oben gehen und gehen, um zu arrangieren und nach vorne wie immer eine Option zwei zu bewegen. Machen Sie diese links ausgerichtet und so meine Optionen vor waren Check-in, Flugstatus, Ich werde den Abstand in einer Sekunde zu beheben, buchen Sie Reisen, verwalten Reisen, und es gab etwas anderes, so dass wir einfach andere für jetzt setzen, weil es nicht super ist wichtig. Hier drüben kann ich tatsächlich den Zeilenabstand ändern. Ich kann die einfach ein bisschen mehr pumpen, und ich muss wahrscheinlich ein bisschen mehr als das gehen, damit sie alle passen. Das ist gut genug. Perfekt. Also hier sind meine Optionen für den Home-Bildschirm. Eigentlich wollte ich das nur tun, das ein bisschen mehr hervorheben, und all das Zeug spielt wirklich keine Rolle. Ich werde das nur ein bisschen mehr zurückziehen lassen. Der nächste Schritt, den ich tun werde, ist eigentlich möchte ich auf buchen Reise klicken. Nehmen wir an, ich möchte den Himmel auswählen und einfach die Hintergrundfarbe ändern , um etwas zu sein, auf das ich tatsächlich klicken werde. Ich habe eine Farbe hier drüben, die ich benutzen möchte. Ich werfe das da rein, damit ich die Farbe schnappen kann. Schöne Sache über Sketch ist sehr einfach zu sagen, oh, ich möchte diese Farbe verwenden. Cool. Werde den Kerl los. Als nächstes werde ich einen Pfeil zeichnen. Also gehe ich zu Einfügen, Form, Pfeil, und ich möchte von diesem Kerl auf unseren nächsten Bildschirm zeichnen. Ich werde diesen Himmel auch blau machen, nur für Konsistenz hier. Ich könnte es etwas dicker machen, damit ich es besser sehen kann. Cool. Als nächstes habe ich diesen Bildschirm bereits gemacht, das hat uns ein wenig Zeit gespart. Ich kann das kopieren. Los geht's. Mein nächster Bildschirm ist eigentlich der Buchreise-Bildschirm. Ich werde zwei beschriften diesen Kerl Buchreisen. Großartig. Auf diesem Bildschirm kann ich sehen, was ich hier bereits getan habe, ist ich werde den Flug wählen, wo ich fliege, wohin ich fliege, und dann das Datum von in und dann habe ich einen Suchknopf am unteren Rand. Das erste, was ich eigentlich tun möchte, ist das von. Weil diese alle in diesem Bildschirm sind, werde ich einfach nach unten gehen, anstatt mich zu bewegen. Ich gehe über, um zum nächsten Bildschirm zu gehen, sobald ich den Suchknopf geklickt habe. Was ich hier tun werde, wieder, ich habe das schon auf dem Bildschirm. Bringen Sie das in Einklang. Wenn ich auf „Von“ geklickt habe, hier ist meine Abflugstadt, ich werde dies als von kennzeichnen. Ich benutze nur die Pfeiltasten, um das nach unten zu bewegen. Du kannst es auch mit deiner Maus machen, von und ich ziehe den Kerl einfach ein bisschen runter. Hier wäre ich in der Lage, tatsächlich zu suchen. Ich werde nur eins davon kopieren. Hoppla, ich habe nicht alles kopiert. hat das hier unten geschrieben. Wieder, das hinter jemandem gegangen ist, muss sich vereinbaren, um sich nach vorne zu bewegen. Großartig. Dies wird als mein Suchfeld tatsächlich dienen und zusätzlich werde ich nur eine Zeile hinzufügen, um die Liste der Dinge darzustellen, die ich hier habe. Ein bisschen Perfektionist, ich versuche immer, diese Jungs wieder auszurichten. Jetzt werde ich es nur kopieren. Wenn ich das schnell machen und eine Reihe von Zeilen machen kann , wie aussehen, sind dies meine Suchergebnisse. Dann werde ich das einfach kopieren. Da gehen wir, ein bisschen schneller. Ich gruppiere sie einfach zusammen, nur damit ich sie ein bisschen schneller kopieren kann. Das ist meine kleine Vorlage für meine Abreise. Hier wäre meine Liste der Städte. Dies ist eines meiner Dokumente, es wird anfangen, größer zu werden. Ich werde hier drüben auswählen, und ich möchte, dass dieser Kerl größer ist, weil ich eine weitere Reihe darunter machen möchte. Ich werde das ganze Ding kopieren. Stellen Sie sicher, dass ich alles habe und duplizieren Sie das einfach für die Rückreise. Von, zu und dies wird Rückkehr Stadt sein. Ich möchte eigentlich einen kleinen Pfeil von hier nach hier zeichnen. Ich kopiere den Kerl und was ich tun kann, wird das einfach rüber ziehen. Wenn ich auf „Shift“ klicke, bleibt es auf der rechten Achse. Hier so werde ich den Kerl ein bisschen runterbringen. Cool. Dies zeigt, dass ich meinen Flug von und nach wähle. Ich werde dies ändern, um Zielstadt zu sagen , weil Rückkehr klingt ein wenig seltsam direkt an dieser Stelle. Großartig. Ich werde das retten, ich bin ein Zwangssparer, ich mag es nicht, Dinge zu verlieren. Das nächste, was ich tun möchte, ist, dass ich diesen Pfeil ändern werde. Mal sehen, hier. Wenn ich meine Pfeiloptionen bekomme. Ich sehe sie nicht. Wenn das passiert, sagte nur Flucht. Wir werden das vorerst in Ruhe lassen. Das nächste, was ich tun möchte, ist mein Date zu und von. Ich werde das kopieren, das und das, und es über das Hören verschieben. Dies wird Abreisedatum werden, und dies wird am Ende als Kalender. Ich werde nicht die Mühe machen, eine Tonne zu ziehen, aber ich werde hier eine etwas größere Art Ding machen. Sagen wir, das ist unser Kalender. Eine andere Sache, die Sie tun können, wenn Sie sich ein wenig lang lassen wollen sage ich einfach Kalender, um zu sehen, was Sie denken. Auch hier ist dies nicht wie jede Art von Drahtrahmen. Dies ist nur das Auslegen der Grundlagen dessen, was ich auf jedem Bildschirm mache. Ich werde das kopieren und es hier unten platzieren. Sieht ziemlich nah aus. Dies wird zwei sein und jetzt wird dies mehr Sinn als unser Rückgabedatum zu machen. Auch hier werde ich diese Pfeile greifen, um zu zeigen, dass ich von hier nach hier gehe. Rückgängig machen. Dieser Kerl kooperiert gerade nicht. Manchmal wird Skizze ein wenig verrückt. Ziehen Sie das hier rüber. Da gehen wir. Dies zeigt sich wieder, ich wähle all diese Dinge und dann gehe ich zwei zurück auf den Bildschirm. Diese werden mit allem, was ich in diesen Schritten wähle, bevölkern. Außerdem werde ich einige dieser Pfeile unten zeichnen. Los geht's. Es ist ein bisschen eng. Da gehen wir. Testen Sie, um alles abzudecken. Cool. Speichern Sie das. Der nächste Schritt ist, dass ich meine Suchergebnisse abrufen werde. Eigentlich fühlt sich das wirklich eng zu mir an und das stört mich. Also werde ich diese Kerle schnappen und die ganze Sache etwas runterbringen, und dann mache ich diesen Kerl einfach größer. Wie Sie sehen können, ist es super flexibel. Du kannst jedes von diesem Zeug jederzeit ändern. Das nächste, was ich tun werde, ist drücken Sie diesen Suchknopf , der hinter und dann die Front. Cool. Als Nächstes. Los geht's. Dieser Bildschirm wird meine Flugergebnisse für den Abflug sein. Ich werde nur die Ergebnisse für jetzt lesen, und dann wird der Bildschirm in all die verschiedenen Flugoptionen aufgeteilt werden, die ich habe. Ich werde das nur bezeichnen, indem ich diese Jungs ein bisschen größer mache. Da offensichtlich all diese Ergebnisse scrollen werden, werde ich nur zu diesem Kerl zurückkehren. Scrollt von unten und ist ausgerichtet. Das machen wir danach, also kopieren. Nehmen wir an, das ist Flugoption A. Ich werde Flugoption B machen und ich bin hier Flugoption C, und so weiter. Tu so, als ob das in der Mitte schwebt. Hier werde ich nur diesen Abflug machen. Ich werde diese ganze Sache noch einmal duplizieren , weil ich auch Ergebnisse für meinen Rückflug haben werde. Ich werde das hier rüber werfen, und sagen wir, Flug B war eine gute Option. Ich werde Flug B wählen. Ich werde diesen auf den Rückflug ändern. Sagen wir, ich wollte wählen. Ich werde diesen Kerl hier färben. Soll ich das wählen? Hier, sagen wir, Flug A war der beste. Ich werde Flug A wählen, das ist falsch. Die Grenze, wir gehen zu füllen. Cool. Zeichnen Sie noch einmal meinen Pfeil. Lass es ganz oben gehen. Eine Sache, die ich nicht erwähnt habe, war für jede von ihnen, ich könnte einige Flugdetails haben. Dieses Ding könnte entweder in der Linie erweitern oder es könnte mir einen anderen Bildschirm zeigen. Wir sind uns nicht ganz sicher, was das sein wird. Ich werde es jetzt nicht als einen anderen Bildschirm belassen. Das werde ich später im Hinterkopf behalten. Ich werde das kopieren, und das wird unsere letzten Bildschirme sein, also unsere Flugübersicht. Los geht's. Zusammenfassung. Das wird mit unserem Abflugflug beginnen, und das wird nur einige Informationen haben. Ich werde einen dieser Typen kopieren und das Ding nach vorne schnappen. Sagen Sie, das hat einige Informationen über unseren Abflug, und dann werde ich dasselbe für unseren Rückflug tun. Dann wollen wir unsere Gesamtsumme machen. Sagen wir, das ist, wo wir unseren Gesamtbetrag haben, und dann unten, werden wir eine große Taste zu kaufen haben. Wir wissen noch nicht, was das sagen wird. Völlig gut. Dies ist ein wirklich schneller Überblick über die Schritte, die wir ergreifen werden. Auch diese basieren auf der bestehenden Southwest App. Dies sind die Schritte, die wir sehen, dass der Benutzer unternimmt. Wieder, wir beginnen mit, wir werden buchen Reise wählen. Wir wählen aus, woher sie fliegen, wohin sie fliegen und die Daten. Suchen. Wieder, wählen Sie diese Typen. Sobald sie gesucht haben, werden sie ihren Abflug sehen. Sie werden ihren Rückflug sehen und dann eine Zusammenfassung von allem. Was das jetzt nicht abdeckt, das ist eine Art, wie wir es tun können. Das ist genau das, was Southwest gerade hat. Die einzige Sache, die wir für Kelly optimieren wollten, war, dass sie die Möglichkeit hat, verschiedene Flüge oder verschiedene Wochenenden zu betrachten. Nehmen wir an, sie hat hier ein Wochenende gewählt. Sie kommt zur Zusammenfassung und sagt: „Oh, das ist $600, ja, das ist ziemlich teuer. Ich möchte ein anderes Wochenende überprüfen.“ An diesem Punkt, war sie tun müsste, ist zurück zu gehen, zurück , zurück auf die Suche in der Lage, ihre Daten ändern zu können. Was ich als nächstes betrachten möchte, ist, was sind einige verschiedene Optionen, die ich versuchen kann , Kelly tatsächlich leichter änderte die Daten, während sie in dem Prozess ein wenig weiter unten ist, weil sie wahrscheinlich nicht ändern will diese von und nach. Sie will nur die Daten ändern. Es ist eine Menge zurück und vierte. Wir werden uns das in unseren Skizzen ansehen. Wir werden das nicht bei der User Journey betrachten, da dies den Weg für das führt, was sie tun wird. Darauf werden wir uns in unseren Skizzen und wieder in unseren Wireframes konzentrieren. Wir decken das als Nächstes ab. 9. Beginne mit dem Skizzieren: Willkommen bei Einheit 4, Sketching. Jetzt, da Sie mit Personas und User Journeys bewaffnet sind, ist es an der Zeit, diese in die Tat umzusetzen. In dieser UX-Phase skizzieren Sie Ihre User Journeys, um die Auswirkungen Ihrer Designentscheidungen durchzuarbeiten . Dadurch können Sie sehen, wie viele Entscheidungen die Benutzer treffen müssen und wie viele Bildschirme sie durchlaufen werden, um ihr Ziel zu erreichen. Dieser Schritt ist wirklich von unschätzbarem Wert und sollte definitiv nicht übersprungen werden. Warum ist das Skizzieren so wichtig? Ehrlich gesagt, es ist viel zu schwierig, direkt in Wireframes zu springen, auch wenn Sie bereits Ideen haben, die um Ihren Kopf schweben. Drahtmodelle werden ebenfalls auf dem Computer erstellt, sodass sie bereits mehr Zeit zum Erstellen als zum Skizzieren benötigen. Sie könnten auch zu früh im Prozess mit den Designdetails gestolpert werden, wie „Wohin geht der Button? Wie groß sollte dieser Text sein? Etc“ Sketching hilft Ihnen, Ihre Ideen wirklich schnell zu sammeln. Du kannst löschen, Dinge rauswerfen. Sie können Ihre Meinung so oft ändern, wie Sie brauchen. Es gibt keine Konsequenzen dafür. Du schnappst dir einfach ein neues Stück Papier und gehst. Sie möchten Ihre Skizzen locker halten und sich nicht auf jedes einzelne Detail konzentrieren. Sie speichern das Teil für die Drahtmodellen. Also, um zu beginnen, skizzieren Sie mehrere Ideen und Optionen für ein paar Schlüsselbildschirme Ihrer Flüsse. Sie beim Skizzieren daran, über Folgendes nachzudenken. Welche Informationen sollten auf jedem Bildschirm angezeigt werden? Wie sieht die Hierarchie der Informationen aus? Was sind einige verschiedene Layout-Optionen, die ich ausprobieren kann? Andere Dinge im Auge zu behalten, während Sie skizzieren sind; halten Sie Ihre Skizzen locker. Dies wird Ihnen wirklich helfen, schnell zu bewegen und versuchen Sie viele verschiedene Optionen. Nochmals, mach dir keine Sorgen darüber, perfekt zu sein. Wir sind nicht hier, um Sie über Ihre Skizzen zu beurteilen. Konzentrieren Sie sich nicht auf jedes Detail. Sie möchten nur den Kern jedes Bildschirms runterholen und Sie werden in der Lage sein, alles später zu verfeinern. Hast du an neue Ideen gedacht, die du skizzierst? Großartig. Haben Sie keine Angst, Brainstorming, wenn Sie den Stift in der Hand haben und lassen Sie sich frei gehen, nichts ist zu verrückt in diesem Stadium. Es wird Ihnen helfen, durch viele verschiedene Optionen zu arbeiten. Fühlst du dich feststecken? Treten Sie weg von Ihren Skizzen und machen Sie eine Pause. Möglicherweise benötigen Sie ein wenig Zeit, um Ihre Meinung zu klären, oder Sie möchten sich einfach von anderen Apps inspirieren lassen. Öffnen Sie also Ihr Telefon, gehen Sie zu Ihrem Computer, spielen Sie mit einigen Dingen herum und lassen Sie sich inspirieren. Vergessen Sie auch nicht Ihre Personas. Wenn Sie sie neben Ihnen ausgedruckt haben, lesen Sie sie erneut durch und setzen Sie sich in die Schuhe des Benutzers. Bist du noch auf dem richtigen Weg? Hier sind einige Beispiele für Skizzen, die Ihnen eine Vorstellung davon geben , was wir bei dem Schritt erreichen möchten. Das erste Beispiel ist eigentlich meine eigene Skizze, und Sie können sehen, dass es ziemlich einfach ist. Ich benutze nicht zu viele Wörter oder Buttons, und ich ziehe eigentlich keinen Vollbildmodus heraus. Stattdessen konzentriere ich mich auf die Aufgabe bei der Hand auf jedem Bildschirm. Es gibt nicht wirklich ein Bedürfnis, hier super komplett zu sein. Die nächsten paar Beispiele, die ich auf Dribbble gefunden habe, sind beide ein bisschen raffinierter als meine. Sie können sehen, dass sie wirklich gerade Linien und die Umrisse des Bildschirms haben. Da diese auf Dribbble gepostet wurden, nahmen die Designer wahrscheinlich ein bisschen mehr Zeit, um diese aufzuräumen, aber fühlen Sie sich frei, in beide Richtungen zu gehen. Sie können wirklich so chaotisch oder so perfekt sein, wie Sie möchten, solange Sie in der Lage sind, sie am Ende zu entziffern. An dieser Stelle haben Sie wahrscheinlich Tonnen von Papierskizzen. Was Sie jetzt tun werden, ist zu entscheiden, welche Optionen ideeller sind und welche Sie einfach rauswerfen können. Sobald Sie Ihre Skizzen der User Journeys genagelt haben, posten Sie sie zum Teilen. Stellen Sie sicher, dass Sie einige Notizen neben Ihren Skizzen einfügen, um zu kommunizieren, was der Fluss für sich selbst und für andere ist. Das nächste Video wird unser letzter Schritt im UX-Prozess sein, Wireframing. 10. Projektbeispiel: Skizzen: Hey Leute, willkommen zurück. Ich hoffe, dass Sie bisher viel Erfolg hatten an Ihren Personas und Ihren User Journey Maps zu arbeiten. Als Nächstes werden wir Skizzen anpacken. Ich habe einige Skizzen hier, um Ihnen zu zeigen, um durch das zu gehen, was ich bisher für die Southwest Apps getan habe. Um zu beginnen, schätze ich, ich werde damit beginnen, Sie wissen zu lassen, welche Methode ich nahm, um diese Skizzen zu machen, und ich wollte, dass diese wirklich locker sind. Wieder packte ich mein treues Skizzenbuch, packte ein paar Sharpies und fing gerade an, herumzulaufen. Sie können sehen, dass hier viel los ist. Ich habe eine Reihe von verschiedenen Bildschirmen, ich habe einige Notizen überall, aber ich wollte mich wirklich locker machen lassen und nur sehen, was passiert ist. Eine andere Sache, die ich erwähnen wollte, war, ich wollte etwas Inspiration für während ich damit begann, also durchforste ich das Web, schaute auf Dribbble, Behance und versuche einfach, ein allgemeines Gefühl zu bekommen, wie, was andere -Apps aussehen? Ich habe viel über andere Apps recherchiert, die jetzt da draußen sind, aber es ist immer schön, Dinge wie auf Dribbble zum Beispiel anzuschauen, weil die Leute ein wenig innovativer sind und es macht viel Spaß, etwas Inspiration zu bekommen, dass Art und Weise. Was ich damit beginnen wollte, war die verschiedenen Bildschirme anzugehen , die ich für diese App machen muss. Also der erste hier oben ist das Zuhause oder wie, wo wir eigentlich die Reise buchen. Hier werden alle Informationen eingegeben. Es gibt viele verschiedene Möglichkeiten, wie der Bildschirm aussehen könnte, und tatsächlich, um Ihnen zu zeigen, werde ich das rüber werfen, um sich daran zu erinnern, dass dieser Kerl hier der erste Bildschirm ist und dann das Buch hier drüben reisen . ist ein weiterer Bildschirm, den ich tatsächlich alles eingebe. Ich denke, ich zeige diesen Kerl tatsächlich nach auf einer anderen Seite, aber ich schätze, ich beginne hier mit diesem Buch Reiseabschnitt, weil eine Menge los ist und es viele verschiedene Möglichkeiten gibt, wie wir es tun können. Also bewege ich das den ganzen Weg. Eines der wichtigsten Dinge ist herauszufinden, ist dies eine Rundreise oder ein Weg. Ich habe gerade versucht, hier durch meine Skizzen einige der verschiedenen Möglichkeiten zu demonstrieren , wie wir dies tun können. So könnten wir mehr eine Umschaltfläche haben, gibt es diese Methode, bei der Sie die ausgewählt haben, ist unterstrichen oder sogar eine Pille hier, wo dies nur ein subtiler Hintergrund hinter dem ausgewählten sein könnte . Alle Informationen auf diesen Bildschirmen sind identisch. Es ist nur eine Frage, wie wir sie auslegen sollen. So wählen Sie Flughäfen, Abflug- und Rückflugdaten, wie viele Passagiere, Promo-Codes, und dann natürlich, unsere Such-Taste. Auf der ursprünglichen Version war alles seine eigene Linie. Also von zum Abreisetag, Rückgabetag, Passagiere, alles war wie gestapelt, so dass der Bildschirm tatsächlich lang in ihrer bestehenden App ist. Ich sah mir ein paar verschiedene Möglichkeiten an, wie könnten wir diese Dinge stapeln, um etwas Platz zu sparen? Hier, indem Sie diese Mittel stapeln, verlieren Sie ein wenig Platz für Text, aber wir könnten tatsächlich die Flughafencodes verwenden, um das etwas kürzer zu machen. So SFO statt San Francisco, zum Beispiel. Nur ein paar Optionen hier, mit denen ich rumgemacht habe, um loszulegen, und es gibt noch eine hier unten. Dann ging ich zu den Suchergebnissen. Wieder, wie könnte dieser Kerl aussehen? Gibt es eine Möglichkeit, dies nach $ oder Punkten zu sortieren? Ein Blick auf eine Möglichkeit, das Datum tatsächlich zu ändern, was etwas ist, von dem ich dachte, es wäre wirklich wichtig. Eine Sache, die Southwest ein wenig anders als einige der anderen Airline-Apps macht, ist, dass sie einen großen Wert auf die verschiedenen Tarifklassen legen. Sie haben den Wunsch zu Flucht, das ist die billige. Sie haben die jederzeit, ich glaube, Sie können Dinge ändern, und es gibt keine Strafen oder so etwas. Dann haben sie natürlich die Business Class. Andere Apps, so etwas wie United oder Delta, können Sie zwischen der Hauptkabine Economy oder Business Class wählen. Aber Southwest will sich wirklich auf die drei verschiedenen Klassen konzentrieren. Da sie also so einen großen Wert auf das gelegt haben, dachte ich, dass es ziemlich wichtig ist, und wir müssen uns ein paar verschiedene Möglichkeiten ansehen , wie diese Informationen präsentiert werden können. Wieder, ich zeige euch hier. Dies sind diese großen lila Tasten, die einfach ziemlich verrückt aussahen, vor allem, wenn Sie durch all diese scrollen müssen. Sie verlieren die Zeiten und dann die Fluginformationen, wenn es non-stop oder so ist, weil diese Tasten so prominent sind. Natürlich wollen wir, dass sie wie Knöpfe aussehen, aber diese gehen einfach über die Spitze. Eine Sache, die ich mit meinen Skizzen erkundet habe, ist, gibt es ein bisschen bessere Möglichkeit, das zu tun? Wenn wir sie in Zeilen übereinander haben müssen, könnten wir die Daten etwas größer machen? Oder könnten wir tatsächlich etwas tun, wo wir erweitern und zeigen, dass der Tarif beginnt bei $100. Ich kann darauf tippen, ich glaube, ich habe hier runtergezogen. Wenn ich diesen Kerl ausdehne, kann ich sehen, dass die verschiedenen Tarife 100, 248 und 270 sind. Eine andere Option, die ich hier angeschaut habe, war, diese Typen nebeneinander zu haben. Also eher eine Pille oder ein Kipp-Format, in dem ich wählen könnte, welchen Tarif, und vielleicht würde dieser Kerl ausgewählt werden und dann gibt es einen Weg, den ich von hier weitermache. Ein wenig mehr zu erkunden, aber nur für den allgemeinen Sinn, ich spielte mit diesen herum. Hier ist, wo ich meinen Home-Bildschirm. Auch hier ist der Bildschirm genau hier. Also dieser Typ ist derselbe wie dieser Kerl. Es ist ziemlich generisch, es ist ziemlich langweilig. Es ist eine Menge los an der Spitze, bei der es um Up-Selling geht, anstatt mich zu den Informationen zu bekommen, die ich hier möchte. Lass mich einfach wieder hier reingehen. Eine Sache, die ich dachte, das wäre wirklich nett, ist, dieser Southwest Marke etwas mehr Prominenz zu geben und vielleicht einfach ein paar schöne Bilder hier zurück zu haben. Nur um es ein wenig raffinierter und anspruchsvoller aussehen zu lassen. Eine andere Sache ist, zu schauen, wie ich diese Gegenstände stapeln kann. Ich habe alle die gleichen Elemente auf dem Bildschirm, aber kann ich sie auf ein wenig schönere Art und Weise neu anordnen? Vielleicht stellen Sie hier sogar eine Ikone vor, die ein wenig raffinierter ist. Wieder ein paar verschiedene Optionen. Das hier, ich konzentriere mich wirklich auf den Book of Flight Abschnitt, denn für mich ist das der größte Grund, warum ich zu einer App gehe. Ich gehe zu einer App mehr, um nach einem Flug zu suchen , anstatt einzuchecken, weil ich nicht die ganze Zeit fliege. Diese Option hat auch dieses untere Navigationsbeispiel, das ich hier unten einen Blick darauf nahm, was sind ein paar verschiedene Möglichkeiten, die ich die Navigation zeigen könnte. Wie könnte der Benutzer zwischen den verschiedenen Abschnitten kommen? Für etwas wie eine Travel App oder für diese spezielle Travel App wie die Buchung eines Fluges, kann dies nicht super wichtig sein, wo ich nach Hause gehen könnte Flüge buchen. Ich denke, dass dieser hier eincheckt, das sind Reservierungen, und genauso wie mein Profil. Es gibt ein paar verschiedene Dinge, die nützlich wären, aber ist dies der richtige Ansatz für diese App? Ich bin mir nicht ganz sicher. Die Methode, die sie jetzt verwenden, ist nur die Zurück-Taste, so dass das einfach perfekt sein könnte. Eine andere Möglichkeit, dies zu tun, wäre eine Schublade zu haben, in der dies auch andere Informationen enthalten könnte. Wieder, ein paar verschiedene Möglichkeiten, die wir diese Navigation tun könnten, es ist nur eine Frage der Präferenz in, wirklich, was glaube ich, wird für die App arbeiten? Etwas davon weiß ich vielleicht noch nicht ganz. Ich weiß es vielleicht nicht, bis ich tatsächlich auf die Wireframe-Bühne gekommen bin, denn hier versuche ich nur, mit vielen verschiedenen Dingen herumzuspielen. Sobald ich in Wireframes bin und sagen wir, ich entscheide, ich liebe dieses Layout wirklich, aber hey, dieses untere Navi funktioniert nicht und tatsächlich wird diese Version der Navigation am besten funktionieren. Dann hey, ich habe es schon durchdacht. Ich habe all diese Dinge zu meiner Verfügung, während ich gehe. Eine andere Sache, die ich auf meinen Skizzen hier wissen wollte, ich habe ein paar Randnotizen für mich hinzugefügt. Mit Navigation, Sie nicht nur sagen, wie, hey, Ich möchte nicht zu viele Tippen erinnern, dieses Ding sollte überall zugänglich sein, und es ist einfach, immer wieder zu diesem Home-Bildschirm. Für den Home-Bildschirm, wie ich sagte, vielleicht etwas mehr Branding für Southwest, einige größere interessantere Tasten. Dann fühlt sich das Layout nur ein bisschen moderner an, anstatt nur alles in einem vertikalen Ebenenlayout stecken zu lassen, wo es einfach ziemlich langweilig ist. Schließlich, meine dritte Seite von Skizzen, Ich konzentriere mich wirklich auf die Suchergebnisse und ich habe ein wenig für die Reise Zusammenfassung. Auch hier ist dies keine völlig umfangreiche Skizzierübung, aber es ist nur, um Ihnen ein Gefühl zu geben, wie ich mich dem nähern würde und wie ich mich den Skizzen im Allgemeinen nähern würde. Mit den Suchergebnissen gibt es wieder, wie wir es auf der ersten Seite der Skizzen angeschaut haben, wie wir es auf der ersten Seite der Skizzen angeschaut haben,viele verschiedene Möglichkeiten, wie diese Informationen angezeigt werden können. Hier wollte ich mich auf diesen Teil konzentrieren, so dass die verschiedenen Flüge zeigen. Ich mochte diesen kleinen oberen Abschnitt hier oben, wo ich meinen Abflug habe. Es zeigt, woher ich fliege, wohin ich fliege, und dann kann ich das Datum umschalten. Ich denke, das könnte wirklich, wirklich interessant sein, wo ich eines Tages rückwärts und vorwärts gehen kann. Oder vielleicht gibt es hier sogar ein kleines Kalendersymbol , mit dem ich das Datum komplett ändern kann, also möchte ich nicht eins nach dem anderen gehen. Vielleicht möchten Sie für diese Option von vorne anfangen, aber es könnte schön sein, wenn wir es direkt von hier aus machen könnten. Auch hier ist diese erste Option, dass Erweiterungsmodus, wo ich sehen kann, ist es von $100. Wenn ich auf diesen Kerl tippe, würde sich dieser erweitern. Ich konnte all die verschiedenen Optionen sehen, und das würde einfach die anderen Flüge aus dem Weg schieben. Wir müssten auch etwas mit dem visuellen Design tun, um sicherzustellen , dass dies auffällt und sich wie eine zusammenhängende Sache anfühlt. Aber das können wir später mit Design anpacken. Zweite Option hier, zeigt die mehr wie ein Kartenformat. Auch hier ist es dieses Format, in dem jeder dieser Preise nebeneinander angelegt wird. Dann habe ich ein wenig mehr Wert auf die Flugdaten oder die Flugzeiten, als auch, ob dies non-stop oder/und was die Flugnummer ist. Die dritte Version, dies ähnelt eher dem, was sie jetzt haben, aber vielleicht könnten wir den Typ ein wenig größer machen. Vielleicht müssen diese nicht so riesig sein und aber alle, sie können sich immer noch wie Knöpfe fühlen, einfach ein bisschen abfärben. Wieder ein paar verschiedene Optionen hier. die Reiseübersicht angeht, ist der wichtige Teil hier zu sehen, wohin Sie fliegen und von, was Ihre Flugzeiten für Ihren Abflug sind, sowie für Ihre Rückkehr, und das Datum ist besonders wichtig auch hier. Schließlich der Preis am unteren Rand und eine Schaltfläche zum Kauf. Dies ist möglicherweise nicht alles, was auf diesem Zusammenfassungsbildschirm gehen muss. Ich denke, dieses hier würde ich auf jeden Fall ein bisschen mehr erkunden wollen. Aber für diese Zwecke sollte das genug sein, damit ihr losgeht. Also geh raus, skizziere, und ich kann es kaum erwarten zu sehen, was ihr euch einfällt. 11. Skizzen auf Wireframes bringen: Willkommen zurück. Wir haben es zu unserer letzten UX-Technik geschafft. Bringen Sie Ihre Skizzen zu Drahtmodellen. Wireframes können Sie Skizzen und Benutzerflüsse verfeinern und in eine greifbare Darstellung Ihrer App umwandeln . Nun, da Sie eine Reihe großartiger Skizzen haben, von denen Sie beginnen können, können Sie endlich auf den Computer springen und auf Wireframing übergehen. Von der Skizzierungsphase hättest du schon viele Möglichkeiten erforschen und Ideen mit dem zusammenfassen sollen, was deiner Meinung nach am besten funktionieren wird. Diese Verfeinerung sollte Ihnen helfen, wenn Sie mit dem Wireframe beginnen, da Sie eine bessere Vorstellung davon haben, was Ihre App tun wird und wie Ihre Schnittstelle aussehen sollte, um dies zu unterstützen. Mit Wireframes sollten Sie beschreibend sein, aber nicht pixelgenau. Versuchen Sie, echte Kopie für Schaltflächen und andere UI-Elemente zu verwenden , damit Sie ein Gefühl davon bekommen können, wie die Dinge zusammenpassen. Sie sich keine Sorgen über das Ausfüllen von Inhaltsbereichen mit echter Kopie, verwenden Sie einfach Loremipsum dort. Achten Sie darauf, fortlaufend zu verfeinern und Anpassungen vorzunehmen. Wenn Sie dies noch nicht getan haben, müssen Sie sich für ein Navigationsmuster entscheiden. Wie werden Benutzer zwischen den Abschnitten der App wechseln? Noch wichtiger ist, was funktioniert am besten für Ihre App? Einige gängige Muster sind Bottom Tabs, die Foursquare, Facebook, Twitter und Pinterest verwenden, eine Schublade oder Schiebe-Panel wie LinkedIn und Google Maps, oder ein Home oder ein „Hub“ , den jeder jetzt verwendet. Die Beispiele hier veranschaulichen einige andere Möglichkeiten, wie Benutzer navigieren können. LinkedIn verfügt über eine verschiebbare Schublade, aber sie haben auch Symbole an der Spitze für neue Nachrichten, Benachrichtigungen und Anfragen. Expedia verwendet einen anderen Ansatz, bei dem Sie auf ein beliebiges empfohlenes Reiseziel in einer Scrolllistetippen beliebiges empfohlenes Reiseziel in einer Scrollliste oder einfach Hotels oder Flüge auswählen können. Schließlich zeigt der dritte Bildschirm Flickr, wo sie eine untere Navigation als Hauptnavigation verwenden, aber in jedem Abschnitt gibt es Registerkarten oben, um zwischen diesen Abschnitten zu wechseln. Der nächste Schritt ist, dass Sie die Details hashen möchten. Denken Sie daran, dass eine Schlüsselkomponente von mobilen Apps darin besteht, den Inhalt in erster Linie zu präsentieren. Lassen Sie Ihre Benutzer nicht nach dem suchen, was sie wollen. Denken Sie darüber nach, wie viele Calls-to-Action Sie auf jedem Bildschirm setzen sollten. Sie sollten versuchen, sich auf eine primäre und eine sekundäre höchstens zu konzentrieren, aber wissen, dass das nicht immer möglich ist. Denken Sie daran, dass Sie den Benutzern nicht zu viele Optionen geben möchten, damit sie von der vorliegenden Aufgabe abgelenkt werden oder sie verloren gehen. Sie sollten auch den Inhalt innerhalb jedes Bildschirmlayouts priorisieren. Hierarchie ist der Schlüssel, verwenden Sie so wenige Wörter wie nötig und stellt sicher, dass alles, was vorhanden ist, tatsächlich da sein muss. Überlegen Sie, welche UI-Elemente wie Suchfelder, Schaltflächen usw. Sie benötigen und wohin sie gehen. Vergraben Sie das Suchfeld nicht, wenn es ein integraler Bestandteil Ihrer Erfahrung ist. Wenn Sie durch die Erstellung Ihrer Drahtmodelle arbeiten, wird hier Ihre Verfeinerung ins Spiel kommen. Sie sollten sicherstellen, dass Ihre Dateien so eingerichtet sind, dass sie genaue Bildschirmabmessungen verwenden. Ich empfehle die Verwendung der iPhone 5S-Auflösung, die 640 mal 960 Pixel beträgt. Denken Sie daran, dass Sie ein wenig weniger Höhe für die kleineren iPhones haben, und Sie haben mehr Platz zum Spielen für das iPhone 6 und 6 Plus. Wir müssen uns jetzt noch zu sehr darum kümmern. Außerdem sollten die Maßstäbe und Größen, die Sie für Schaltflächen und andere UI-Elemente verwenden , nahezu endgültig sein, damit Sie die Designs, die Sie später erstellen, genauer darstellen können. Eine kleine Vorbereitungsarbeit in den frühen Stadien wird Ihnen eine Tonne später helfen. Abschließend möchten Sie Ihre Drahtmodellen sorgfältig zusammenstellen , um eine zusammenhängende Präsentation zu erstellen. Ihre Wireframes sollten jede Aufgabe oder User Journey darstellen, die Sie skizziert haben, um den logischen Fluss des Benutzerpfads durch Ihre App anzuzeigen. Es sollte klar sein, wie viele Schritte und Bildschirme ein Benutzer durchlaufen wird, um eine bestimmte Aufgabe zu erfüllen. Wie in der Skizzierungsphase können Sie die Vor- und Nachteile für verschiedene Lösungen einschätzen und diejenigen beseitigen, die nicht funktionieren oder Sie einfach nur das Gefühl haben, dass sie zu komplex sind. Es gibt eine Vielzahl von Werkzeugen, mit denen Sie Ihre Drahtmodellen erstellen können. Wählen Sie ein Programm aus, mit dem Sie am besten vertraut sind oder von dem Sie denken, dass Sie die besten Ergebnisse erzielen können. Die Werkzeuge, die ich selbst verwendet habe, sind Illustrator, Sketch, Omnigraffle und Balsamiq. In letzter Zeit habe ich Sketch für meine Wireframes verwendet, da ich mich ziemlich schnell in der Benutzeroberfläche bewegen kann und es im Vergleich zu Illustrator etwas leichter erscheint. Ich glaube auch, dass alle diese Programme eine kostenlose Testversion haben, also sollten Sie in der Lage sein, sie zu verwenden, was auch immer Sie brauchen. Werfen wir nun einen Blick auf einige Wireframing-Beispiele. Ich habe all diese von Dribbble gezogen, da sie dazu neigen, schön gestaltet und von höherer Qualität zu sein. Beachten Sie, dass die meisten dieser Designer ihre Drähte in Flows zusammengebaut haben und festlegen, wie Benutzer zwischen Bildschirmen wechseln würden, indem Sie auf verschiedene Schaltflächen oder Links tippen. Sie enthalten auch Text, um die Namen der Bildschirme und hilfreiche Notizen zu bezeichnen. Die verschiedenen Drahtmodelle zeigen auch eine Vielzahl von Stilen, die Sie verwenden können. Also die hier links, sie benutzen eine dieser roten Linien und Pfeile, um zwischen Bildschirmen zu gehen, diese ein bisschen Farbe. Die zweite zeigt nur die Bildschirme nebeneinander. Hier ist ein weiteres Beispiel. Dieser Designer führt wieder ein bisschen Farbe in die Drahtmodelle für die Betonung, Sie können es auf ein paar verschiedenen Tasten sehen hier und mit dem dunkelgrau. Schließlich ist dies ein weiteres Beispiel für Wireframes, die ein bisschen wie ein Hybrid sind. Sie verwenden echte Symbole, aber sie verwenden auch Platzhalterschaltflächen in Feldern zur gleichen Zeit. Wenn Sie die Klasse PDF heruntergeladen haben, die ich hoffe, Sie haben, empfehle ich Ihnen, sich diese Beispiele genauer anzusehen und sogar einige zusätzliche Recherchen online zu machen, um mehr Inspiration zu erhalten. Um dies für die endgültige Leistung der Klasse abzuschließen, erstellen Sie eine Reihe von endgültigen kommentierten Wireframes, um die Geschichte Ihrer Reise-App zu vervollständigen. Laden Sie Ihre Wireframes in Ihr Projekt hoch und teilen Sie sie mit der Klasse. Ich bin so aufgeregt zu sehen, was ihr euch ausgedacht habt. 12. Projektbeispiel: Wireframes: Hallo an alle. Bereit für die letzte Demonstration des Klassenprojekts. Hier werde ich Ihnen zeigen, wie ich Wireframes für dieses Projekt anpacken würde. Ich werde damit beginnen, einen Blick zurück auf meine User Journey Map hier zu werfen, um mich an den Fluss zu erinnern, den ich skizziert hatte. Das sollte vertraut aussehen, wir haben diese zwei Videos vor. Idealerweise würden Sie sich auf diese Karte sowie auf Ihre Skizzen beziehen , wenn Sie Ihre Drahtmodelle vervollständigen. Sie können sie ausdrucken, um sie einfach neben Ihnen zu haben, oder einfach die Datei öffnen , so dass Sie zwischen Dateien hin und her wechseln können. Eine andere Sache, die nützlich wäre, sind Ihre Skizzen. Da ich ein Foto von diesen gemacht habe, habe ich sie auf dem Computer, aber es könnte auch hilfreich sein, dein Skizzenbuch oder was auch immer du für deine Skizzen benutzt hast. Wenn wir einen Blick zurück auf diese User Journey werfen, der Fluss, den wir mit unseren Wireframes erfassen werden , beginnt vom Startbildschirm, wir werden auf Buchreisen tippen, ich werde betreten, wohin ich fliege und von, die Daten, und dann werde ich nach Flügen suchen und in der Lage sein, einen Abflug und einen Rückflug zu wählen, und dann sehen Sie eine Zusammenfassung, um voran zu gehen und weiterhin von dort zu kaufen. Das ist also der Fluss, den wir abdecken werden. Jetzt für die Wireframes. Öffne das auf. Um zu beginnen, da die Wireframes viel zeitaufwendiger sind, sind sie viel komplexer, während dieser Demonstration im laufenden Betrieb zu erstellen, ich ging voran und verspotte diese für dieses Projekt. Ich werde dich durch die ganze Sache führen. Aber bevor ich beginne, möchte ich tatsächlich einige der Dinge teilen, die ich verwendet habe, um diese Wireframes zu erstellen, von denen ich denke, dass sie wirklich hilfreich sein werden. Das erste ist, dass Sie hier bemerken werden, dass wir diese kleinen Umrisse haben. Dies ist eigentlich eine iPhone-Vorlage, die ich benutze, die ich online gefunden habe, die kostenlos zum Download war. Ich werde das für euch einschließen, damit ihr das auch für eure Projekte verwenden könnt. Es ist ziemlich hilfreich. Ich denke, es lässt die Wireframes nur ein wenig polierter aussehen, und es gibt Ihnen ein Gefühl, genau wo Ihre Inhalte in den Rahmen passen müssen. Die andere Sache, die ich tat, war tatsächlich eine andere Skizzendatei herunterladen , die eine Vorlage für iPhones ist , und nicht nur eine Vorlage, aber Sie können hier sehen, ich habe diese kleine Umschalttaste, ich habe einige dieser Pfeile. Wenn Sie mit iOS vertraut sind, sind dies ziemlich Standardelemente. Eigentlich wird es hier hochziehen. Dies ist die iOS 8 iPhone 6 Vorlage von Teehan-Lax, und dieses Unternehmen hat viele und viele Vorlagen erstellt, sie haben alle Arten von Mitarbeitern für Photoshop und für Illustrator und Skizze. Diese Skizzendatei ist eigentlich wirklich praktisch. Wenn Sie das nicht gesehen haben, schließe ich dies auch in die Klassenressourcen ein, damit Sie das herunterladen können. Hier können Sie sehen, dass sie alle Arten von Elementen haben, die Sie auf dem iPhone finden würden, verschiedene Symbole für den Fall, dass Sie Dinge für Symbolleisten benötigen. Sie haben Tasten, sie haben diese, was wir Segment-Steuerelemente, Suchfelder, Tastaturen nennen . Es gibt sogar die Möglichkeit, Tabellenansichten anzuzeigen. All diese Sachen stehen Ihnen zur Verfügung, um sie in Ihren Wireframes zu verwenden. Von dort aus können Sie sie tatsächlich ein wenig optimieren. Wenn ich also zu meinen Drahtmodellen zurückgehe, kann man hier sehen, dass ich gerade die Schriftart geändert und die Farbe geändert habe, um sie für meine Zwecke schwarz-weiß zu machen . Großartig. Das sind also einige Tools, um Ihnen den Einstieg zu erleichtern, aber dann, um zu beschreiben, wie ich diese Wireframes erstellt habe, habe ich dasselbe getan, wie ich beim Erstellen der Personas und der User Journeys gemacht habe. Das erste, was ich getan habe, war hierher zu gehen, um eine Zeichenfläche zu erstellen, und ich habe gerade dieses große Quadrat gezeichnet. Zum Aktualisieren kann ich hier oben klicken, und ich kann die Eckfelder hier ziehen, sie sind der Begrenzungsrahmen hier, um dieses Ding nach Bedarf größer oder kleiner zu machen, und klicken Sie einfach weg, um das zu speichern. Ich habe die Zeichenfläche erstellt und dann habe ich diese Hintergründe für das Telefon aus meiner Vorlagendatei gezogen. Eine Sache zu bemerken, ich werde das tatsächlich an den unteren Rand der Ebene setzen, ich habe diese Ebenen gesperrt. Wenn die Dinge nicht gesperrt sind, wenn ich das dort entsperre, dann kann ich manchmal Dinge etwas zu viel bewegen, und das wird ein bisschen ärgerlich. Ich möchte das einfach abschließen, damit ich weiß , dass ich das nicht versehentlich irgendwo hinwegschiebe. Großartig. Fangen wir an, indem wir durch das gehen, was ich hier getan habe. Das allererste, was war, den App-Startbildschirm zu erstellen. Wieder haben wir diesen Bildschirm auf ein paar verschiedene Arten behandelt, wir haben ihn in unseren Skizzen betrachtet. Ich werde meine Skizzen nochmal aufwerfen, um mich zu erinnern, mal sehen. Hier gehen wir nach Hause Optionen für unsere Navigation. Ich hatte ein paar verschiedene Variationen hier und ich habe mir ein paar Dinge angesehen. Für diese Zwecke habe ich gerade eine ausgewählt und lief damit, aber Sie möchten vielleicht ein paar dieser Versionen in Ihren Wireframes verspotten und dann sehen, was funktioniert. Sie können immer eine Masterdatei erstellen, in der Sie eine ganze Reihe von verschiedenen Optionen von Bildschirmen haben, und dann wählen und wählen, wie Sie gehen. Aber für diese Zwecke, hielt es einfach ziemlich einfach. Hier sind meine Optionen, die ich habe. Wir werden uns darauf konzentrieren, einen Flug hier zu buchen, also wäre das unser nächster Bildschirm. Dann habe ich hier gerade die paar Dinge aufgenommen , die wir während dieses Projekts erwähnt hatten. Also wieder, wir fliegen zu und von, Daten, wie viele Menschen reisen, wenn es einen Promotion-Code, und dann wieder Hin- und Rückfahrt oder eine Richtung, und dann suchen. Ich habe nicht jede einzelne davon abgedeckt, aber wenn ich auf eine davon tippe, wo ich anreise und von, dann unten hier, habe ich mich entschieden, die Abflugstadt zu skizzieren. Dies wäre das gleiche für beide, und ich habe das hier unten auch skizziert, zeigt, dass ich diesen Vollbildmodus tatsächlich machen werde um dies ein bisschen größer zu machen. Ok, großartig. Um zu zeigen, dass ich jeden dieser Schritte durchlaufen würde. Wenn ihr eure Wireframes macht, wäre es toll, all die verschiedenen Möglichkeiten und die verschiedenen Bildschirme zu sehen , aber dafür, nur zur Demonstration, wollte ich nur ein paar Dinge erfassen . Eine Sache, die ich erwähnt hatte, als ich über diese Flug-App nachdachte, ist, dass ich wirklich ein paar Optimierungen machen wollte. Eines der Dinge, die ich bemerkt habe, dass Southwest nicht tut , ist, dass sie Ihren Standort überhaupt nicht benutzen. Das hier zeige ich tatsächlich, dass das erste, was da drin ist, San Francisco ist, weil das zufällig der nächste Flughafen zu mir ist. Wenn ich darauf tippe und hier runterkomme, kann ich sehen, dass San Francisco überprüft wird, und ich kann auch sehen, dass Oakland und San Jose an der Spitze sind, weil das die Flughäfen sind, die mir am nächsten sind, und dann beginnen sie in alphabetischer Reihenfolge. Wieder kann ich hier eingeben, um nach jeder Stadt zu suchen, die ich will. Sobald ich damit fertig bin, wäre mein nächster Schritt, um diese Schaltfläche Suche Flüge zu drücken, und dann werde ich hier für einen Abflug zu suchen. Ich wollte diesen Bildschirm nur ein wenig visueller machen, indem ich die großen Flughafencodes, eine kleine Ikonographie, und es gibt auch eine Datumsleiste. Hier ist etwas, das ich verwenden kann, um umzuschalten. Nehmen wir an, ich sagte: „Oh, eigentlich möchte ich sehen, ob der 23. oder 22. April, oder vielleicht sogar der 25. einen besseren Preis hat, dann kann ich hier einfach umschalten.“ Ich habe diesen Kerl nicht für diesen einen Rahmen erweitert, aber wenn dies mein echtes Klassenprojekt wäre, dann hätte ich das definitiv tun wollen, um herauszufinden all diese Interaktionen und wie das Ding funktionieren würde. Dann hier zeige ich, dass hier die Flugoptionen sind, können wir sehen, dass es von diesem Preis ist. Dann, wenn ich tatsächlich auf eines davon tippe, werden wir hier runterziehen, und der Kerl wird sich erweitern, damit ich den Preis jederzeit sehen kann, und das Geschäft wählt Preis. Dann kann ich von hier aus eine von ihnen wählen. Auf diese Weise müssen Sie nicht alle diese verschiedenen Zahlen gleichzeitig betrachten. Schließlich, nachdem ich diesen Kerl gewählt habe, werde ich hier zurück gehen, um meinen Rückflug auszuwählen, und dieser Bildschirm sollte dem ersten sehr ähnlich aussehen weil sie im Wesentlichen genau dasselbe tun. Dann von hier aus werde ich weitermachen, ich habe diesen Kerl nicht einfach kopiert und eingefügt, aber das wäre dasselbe wie dieser, um herauszufinden , welches ich voran gehen und wählen wollte. Von dort, sobald ich meine beiden Flüge ausgewählt habe, gehe ich tatsächlich zu meiner Flugübersicht. Eine Sache, die ich getan habe, als ich Sie durchführe, ist, dass ich alle meine Pfeile ausgeschaltet habe. Ich werde nachher wieder durchgehen und Ihnen diese Jungs zeigen, aber vorerst ist es etwas sauberer, nur um vorerst ohne sie durchzugehen. Wieder, Flugzusammenfassung, ich habe nicht zu viel Zeit damit verbracht, dies offensichtlich zu verspotten , und dann von hier, sobald Sie alles überprüfen , wenn alles gut aussieht und Sie nicht von vorne anfangen wollen, werde ich weiter schlagen, dann würde ich durch die Buchungsprozess, und dann meine Bestätigung, und dann bin ich alles eingestellt. Ziemlich einfach, lassen Sie es uns hier sichern, und Sie können sehen, ich habe auch versucht, hier zu bemerken, dass ich alle meine Ordner beschriftet und versucht habe, Dinge zusammenzufassen, so dass es Sinn macht. Also dieser Typ ist meine Kopfzeile, meine Etiketten sind durchgehend, aber es sind diese Typen hier. Die Pfeile werden mein Fluss sein, den mein Benutzer nimmt, und ich werde dies tatsächlich nur sperren, um zu sehen, ob das es verbirgt. Ja, das hilft. Dann habe ich auch hier beschriftet, Ich habe Home-Bildschirm, buchen Sie einen Flug, so versuchen, nur jedes Stück zu zeigen, wie sie hier beschriftet wurden. Großartig. Hier sehen Sie, dass ich diese Felder oben auf meinen Drahtmodellen hinzugefügt habe, um den Pfad anzuzeigen. Dies kann wirklich hilfreich sein, besonders wenn Sie einen Fluss skizzieren und es gibt eine Reihe von verschiedenen Dingen, auf die ich klicken könnte, nur um es ein wenig klarer zu machen. Auch wenn Sie mehr als einen Fluss tun, so dass, wenn ich vielleicht auf dieser App Home-Bildschirm starten und ich werde das Buch Flugfluss zu tun, und dann vielleicht möchte ich auch den Flugstatus zu tun, so dass der Check-in Fluss als auch. Diese Umrisse zu haben, wird das für Sie geradeaus halten. Selbst wenn Sie ein anderes Dokument verwenden möchten, ist es schön zu sehen, dass ich auf diesen Kerl tippe und dann ziehe ich hierher. Noch einmal, tippen Sie auf Buchflug, ich kann sehen, dass ich auf diesen Kerl getippt, um hierher zu gehen. Sobald ich mit diesem Kerl fertig bin, werde ich auf den nächsten Bildschirm gehen gleiche Sache, Ich tippe auf hier zeigen, dass dieser ist offen, wählen Sie den Kerl, Ich gehe auf den nächsten Bildschirm. Es zeigt Ihnen nur einen linearen Pfad, während Sie gehen, und dann nur um es hier zu beenden. Ich werde ein bisschen wieder raus, da gehen wir. Dieses Dokument ist ein bisschen groß, nur weil dieses iPhone zufällig demütig war. Sie können immer alles nach unten skalieren, sich frei fühlen, aber ich dachte mir, und lassen Sie sie einfach in der Größe, die sie für den Moment sind. Hoffentlich gibt Ihnen dies eine gute Vorstellung davon, wonach wir mit den Wireframes für dieses Projekt suchen. Sie sind ein bisschen detaillierter, es gibt einige Dinge, die noch ausgebügelt werden müssen, es gibt einige Dinge, die, wer weiß vielleicht, wenn ich in die Designphase komme, ich könnte ändern, also so etwas wie diese, vielleicht ich Sie möchten kein Symbol verwenden. Vielleicht schaue ich mir das in das visuelle Design an und funktioniert eigentlich nicht ganz so gut, aber es hier in unseren Wireframes zu haben, fängt wirklich all die verschiedenen Dinge ein, die wir durchmachen werden. Wieder, wenn dies Ihre Wireframes wären, würde ich gerne alle verschiedenen Möglichkeiten sehen. Was passiert also, wenn ich auf das Abreisedatum tippe, um ein Datum auszuwählen? Wie sieht dieser Kalender aus? Wie sieht dieser Kalender aus, wenn ich zwischen Datumsangaben wechseln möchte? Lässt mich das Ding einfach durchklicken? Kann ich den Kalender wirklich öffnen und komplett auswählen? Nehmen wir an, ich wollte Mai tun, anstatt zum Beispiel durch tippen oder tatsächlich zurück zum März gehen zu müssen, wie sehen all diese Dinge aus? Das ist alles wirklich hilfreich, um einen Blick in dieser Wireframing-Phase zu werfen. Das ist ein Wrap. Sobald Sie Ihre Wireframes abgeschlossen haben, würde ich es lieben, dass Sie das endgültige Set in Ihr Klassenprojekt hochladen, und seien Sie auch nicht zu schüchtern, um Feedback zu bitten. Wenn Sie diese Klassenreihe fortsetzen wollen, werden wir dieses Projekt fortsetzen. So können Sie jederzeit Feedback oder Änderungen in Ihr Projekt integrieren , da es verfeinert wird. Ich hoffe wirklich, dass Sie diese Klasse genossen haben und Sie sich mit Ihren neuen UX-Fähigkeiten befähigt fühlen. Vielen Dank für das Zuschauen.