Einführung ins Interaction-Design: User-Flow, Drahtmodelle, Prototypen und vieles mehr!

1. Willkommen zu Interaction-Design 101: Willkommen bei Interaction Design 101. In dieser Klasse werde ich Ihnen beibringen, wie Sie Benutzerflüsse abbilden, Benutzeroberflächen skizzieren und sie alle in Drahtmodellen und Prototypen zusammenbringen, um das Interaktionsdesign mit Entwicklern und anderen Stakeholdern zu kommunizieren . Sie verwenden diese Fertigkeiten in Ihrem Projekt in jeder Lektion. Diese Klasse richtet sich an Studenten, die zumindest eine grundlegende Vorstellung davon haben, was UX ist und Interaktionsdesign genauer verstehen möchten. Es ist ideal für Freiberufler oder visuelle Grafiker, die in Interaktionsdesign einsteigen möchten. Eine andere Möglichkeit, diese Fähigkeiten zu nutzen, ist, wenn Sie bereits ein UX-Designer sind und nur das Interaktionsdesign auffrischen möchten. Jede Lektion folgt der folgenden Struktur. Zuerst werde ich einige der Theorie erklären. Dann führe ich Sie durch ein Beispiel für den Schritt mit einer Kaffee-Bestell-App als mein Beispiel, gibt Ihnen Tipps und Tricks auf dem Weg. Dann, vor der nächsten Lektion, werden Sie diese Schritte selbst in die Praxis umsetzen, indem Sie Ihr eigenes Klassenprojekt verwenden. Setzen Sie die Idee in das Community-Board und ich gebe Ihnen Feedback. Am Ende dieser Klasse haben Sie einen Benutzerfluss für Ihre eigene App oder Produktidee, einige Wireframes und einen Prototyp der dokumentierten Bildschirme. Denken Sie über die Idee nach, die Sie für Ihr Projekt verwenden möchten. Es könnte eine bestehende Idee sein, die Sie in Ihrem Kopf haben , oder Sie könnten ein fiktives Beispiel verwenden, wie eine Alkohol Bestellung Lieferung App oder Car-Sharing-App, alles, was Sie wirklich denken können. Wenn Sie sich nicht vorstellen können, können Sie ein vorhandenes Produkt verwenden und prüfen, wie Sie es verbessern können. Dies kann in Ihr Portfolio gehen. Denken Sie darüber nach, welches Beispiel Sie verwenden möchten, und legen Sie es in das Community-Board ein. Tun Sie dies vor der nächsten Klasse und ich werde sicherstellen, dass Sie ein Feedback geben. Wir sehen uns bald. 2. Was ist der Interaktionsdesign: In dieser Lektion erfahren Sie, was Interaktionsdesign ist. Also, was ist es? Interaktionsdesign geht über das, was die Benutzeroberfläche aussieht oder das UI-Design und denkt darüber nach, wie Benutzer mit Ihrem Produkt oder Ihrer Dienstleistung interagieren. Visuelles Design ist nur die Spitze des UX Eisbergs. Unter der Oberfläche dessen, was Sie sagen, ist die visuelle Schicht, was tatsächlich die gesamte UX ausmacht. Dies ist das Interaktionsdesign, die Informationsarchitektur, die Art und Weise, wie Informationen präsentiert und organisiert werden, das Interaktionsdesign, der Inhalt und das konzeptionelle Design, wie das ganze System zusammenhängt. Im Grafikdesign müssen Sie nicht unbedingt darüber nachdenken, wie Menschen mit Ihrem Produkt interagieren oder es im Laufe der Zeit verwenden würden. Aber im Interaktionsdesign, tun Sie das. Schauen wir uns ein Beispiel an. Wir müssen die Interaktionen berücksichtigen. Auf der Oberfläche sieht dieses Bild wie ein gut genug Design aus. Aber wenn ich ein Entwickler bin, habe ich Fragen. Was passiert mit dem Platzhaltertext, wenn ein Benutzer in das Feld klickt? Wenn es verschwindet, weiß der Benutzer, in welchem Feld er sich in einem „Mehr“ befindet? Was passiert, wenn der Benutzer etwas Ungültiges eingibt? Wo passt die Fehlermeldung in den Bildschirm? Hat sich alles nach unten bewegt? Was sagt die Fehlermeldung aus? Wann erscheint es? Was ist ungültig? Das Adressfeld ist nur ein Feld. Welches Format ist der Benutzer gemeint und zu hören? Woher wussten sie das? Wo ist der Tooltip? Was verwendet es, um mit der Adresse übereinzustimmen? Ist das eine Google Maps API? Ist nur freier Text? Welche Validierung gibt es? Beantwortung all dieser Fragen, und wahrscheinlich mehr, die ich nicht erwähnt habe, ist Interaktionsdesign. Der Prozess, den ich beim Entwerfen gerne gemacht habe, ist, zuerst den Benutzerfluss zu verstehen und was sie zu erreichen versuchen. Skizzieren Sie dann die Schnittstelle, um mögliche Lösungen zu erkunden. Erstellen Sie als Nächstes Drahtmodelle mit dem endgültigen Design, und Sie dann Prototypen einer Lösung. die Wireframes interaktiv machte, kam ich zum Endprodukt und dokumentiere schließlich die Interaktionen, so dass es aufgebaut werden kann. Je nachdem, was das Projekt ist und wie Ihr Team funktioniert, gehen Sie möglicherweise nicht alle diese Schritte durch. Wenn es sich beispielsweise um eine kleine Optimierung eines vorhandenen Bildschirms handelt, können Sie direkt zu Drahtmodellen springen. Sie könnten sogar nur Prototypen im Browser haben, Sie könnten einen Chat mit dem Entwickler haben und wenn Sie irgendwo arbeiten, der eine ziemlich anspruchsvolle Style-Karte hat, müssen Sie möglicherweise nicht alle diese Interaktionen angeben. Sie wissen bereits, was mit dem Platzhaltertext passiert, wenn Sie in das Feld klicken, was mit Fehlermeldungen passiert usw. Vergessen Sie nicht, darüber nachzudenken, welches Beispiel Sie für Ihr Projekt während dieses Kurses verwenden möchten , und öffnen Sie es in der Gemeindekugel. Wir sehen uns bald. 3. Benutzerströme: Jetzt, wo Sie wissen, was Interaction Design ist, werden wir in dieser Lektion beginnen, den ersten Schritt zu tun, nämlich den Benutzerfluss zu verstehen. Was ist also ein Benutzerfluss? Nun, es ist eine Karte oder ein Diagramm der Schritte oder Bildschirme, die ein Benutzer durchlaufen wird, während Sie Ihr Produkt verwenden. Es kann auch eine Illustration dafür sein, dass sich jemand durch das System bewegt. Warum machen wir diesen Schritt nicht? Nun, es hilft Ihnen, den logischen Ablauf von Schritten zu verstehen, die der Benutzer ausführen kann. Es hilft Ihnen, durch das zu arbeiten, was wohin gehen muss und was passieren wird. Es hilft Ihnen, darüber nachzudenken, was passiert, wenn die Dinge nicht richtig laufen. In einem bestehenden System hilft Ihnen dies zu sehen, wo Dinge nicht so effizient sind, wie sie sein könnten, oder wo es Probleme mit dem aktuellen Prozess gibt, so dass Sie sie verbessern können. Es hilft Ihnen auch, die Flüsse an Ihre Stakeholder zu kommunizieren. Lassen Sie uns ein Beispiel durcharbeiten. Ich werde meine fiktive Kaffeebestell-App verwenden. Sie können dies mit vielen verschiedenen Werkzeugen tun, zum Beispiel mit Stift und Papier oder einem Whiteboard. Sie können auch spezielle Software wie Visio, Lucidchart, Miro zuvor Echtzeit-Aufzählungszeichen oder einfach Symbole in Sketch, PowerPoint, Word, etc. verwenden, alles, was Sie sich wohl fühlen. Heute werde ich Sketch benutzen. Also haben wir den Anfang und ich werde durch den glücklichen Weg gehen. Das ist es, was passiert, wenn die Dinge richtig laufen? Dies ist der Weg, auf dem die meisten entscheidet, die meiste Zeit zu nehmen. Ich bin eher darauf ausgelegt, ihnen auf diese Weise zu helfen. Also Katalanen oder Kaffee, sie öffnet die App, weil sie bereits über unser Produkt weiß. Wir machen den vereinfachten Flow, der nicht einloggen muss, registrieren wir uns nur auf die wichtigsten Punkte. Dann ist der nächste Schritt in diesem Prozess vielleicht die Auswahl eines Kaffees. Jetzt, da ich das durchdenke, ist die Auswahl des Milchtyps vielleicht ein anderer Schritt im Prozess. Wählen Sie, welchen Kaffee Sie dann die Milch wollen. Ich werde das zu meiner Bestellung hinzufügen. Wiederverwenden Sie „Linien“ oder „Pfeile“, um den nächsten Schritt zu bezeichnen. Öffnen App, dann „Kaffee auswählen“, „Kaffee auswählen“, dann „Milchtyp auswählen“ usw. Wir haben ein Ende, das Ende des Prozesses, „Erfolg“. Das ist also ein vereinfachter glücklicher Weg, aber das ist nicht immer, wie die Dinge in der realen Welt laufen, Dinge schief gehen, Menschen müssen Entscheidungen treffen. Ein Diamant wird normalerweise verwendet, um einen Entscheidungspunkt darzustellen. Der Entscheidungspunkt kann eine Entscheidung sein, die der Benutzer trifft, oder es kann etwas sein, das das System tut. Zum Beispiel, das System jetzt nachsucht, haben wir die Kreditkarte in der Datei? Kann sagen, ich gehe zurück und ändere meinen Fluss, weil ich ursprünglich nicht über all diese zusätzlichen Komplexitäten nachgedacht hatte. Dies ist, wo die Verwendung von etwas Digitalem von Vorteil sein kann. Ich kann die Boxen leicht neu anordnen und umbenennen. Also, während ich in diesem Set bin, denke ich durch ein paar Dinge, die nicht funktionieren und Änderungen vornehmen. Vielleicht gehen Sie zur Kasse Seite, wenn Sie bereits eine Kreditkarte getan haben, so dass Sie eine Auftragsbestätigung haben und dann gibt es möglicherweise einen zusätzlichen Bildschirm, um Ihre Kreditkartendaten einzugeben. Manchmal wird es Fehler geben, wir müssen sicherstellen, dass wir über die Fehlerwiederherstellung oder Fehlerpfade nachdenken und wie Benutzer sich davon erholen können. Zum Beispiel können Kreditkarten abgelehnt werden. Also brauchen wir eine Schleife, um zurück zum „Add Credit Card“ oder aktualisieren Kreditkarten Korn. Jetzt kennen wir zumindest einen Teil des Benutzerflusses und können entscheiden, für welche Bildschirme sie entwerfen müssen. Dieser Prozess hilft Ihnen, durch die verschiedenen Pfade oder Bildschirme nativ zu denken. Ursprünglich dachte ich nicht, dass, obwohl Sie vielleicht keine Kreditkarte in der Datei haben, die Kartierung durch diesen Prozess erlaubte es mir, das zu finden. Jeder Schritt im Prozess kann ein anderer Bildschirm sein, oder es kann ein anderes Feld sein, das benötigt wird. Möglicherweise haben Sie mehrere Schritte auf einem Bildschirm. Sie können in diesem Format freigeben, oder Sie können den Fluss in mehr von einem User Story-Board mit Illustrationen machen , abhängig davon, wie verstanden Benutzerflüsse in Ihrem Team sind. Hier ist ein Beispiel Comic, wie dieses Produkt funktionieren könnte. Will jemand einen Kaffee? Warum können sie nicht gehen und einen holen? Vielleicht haben sie sich verletzt, vielleicht ist das unser Geschäftsmodell. Dann erinnern sie sich an die App oder den Intellektuellen, den sie tun müssen, und dann sind sie glücklich. Es ist eher ein Benutzer eine Geschichte als ein Benutzerfluss. Wir könnten auch abstrahierte Bildschirme betrachten und sie mit Pfeilen dazwischen zeichnen. Also sind wir nicht zu viel ins Detail gegangen, wir schauen immer noch nur auf den Fluss und die Art und Weise, wie Menschen sich durch das System bewegen. Versuchen Sie nun, einen Benutzerfluss für Ihre eigene Produkt-App oder Idee zu erstellen, vergessen Sie nicht, es in der Community Stand für Feedback zu setzen, bis bald. 4. Skizze: Jetzt, da Sie Ihren Benutzerfluss haben, ist es an der Zeit, mit dem nächsten Schritt des Prozesses fortzufahren. Skizzieren der Benutzeroberfläche. Wie ich in der letzten Lektion erwähnt habe, haben Sie möglicherweise mehrere verschiedene Bildschirme für jeden Schritt oder jeder Schritt kann auf einem Bildschirm oder einer Kombination der beiden sein. Sie werden wahrscheinlich auch über Dinge und Schritte nachdenken, die Sie auf dem Weg verpasst haben, während Sie diesen Prozess auch durchlaufen, und das ist absolut in Ordnung. Es ist ein Teil davon. Es ist wirklich wichtig zu wissen, dass es beim Skizzieren nicht um Kunst geht, um Kommunikation, es geht darum, den Prozess durchzudenken. Wie Sie aus meinen Skizzen sehen werden, bin ich zu 100 Prozent kein Künstler. Sie sind nicht schön, aber sie müssen es nicht sein. Der Zweck dieses Schritts ist es, Ihnen zu helfen, durch den logischen Fluss nachzudenken, welche Schnittstellen werden benötigt, welche Interaktionen werden benötigt, wie können wir den Benutzer dazu bringen, diese Interaktion zu tun? Wenn ich meinen Benutzerfluss aus der letzten Lektion anschaue, werde ich anfangen zu skizzieren. Ich werde Stift und Papier für diese Aktivität verwenden. Aber Sie können eine Vorlage verwenden, zum Beispiel, etwas, das bereits hat, die Größen für Sie gezeichnet. Aber das ist nicht notwendig. Wirklich, nur Stift, Papier oder ein weißes Brett ist absolut in Ordnung. Ich neige dazu, an dieser Stelle nicht digital zu verwenden, weil ich mich nicht zu stark hineinlassen möchte, was sind die Farben? Welche Größe sollte die Schriftart haben? Ich möchte wirklich nur darüber nachdenken, welche Elemente ich verwende und warum. Ich beginne mit einem groben Umriss des Bildschirms mit einem Kopf darüber. Vielleicht haben wir unsere aktuellen Bestellungen auf dem Startbildschirm und einen großen Aufruf zum Handeln , den ich in Sharpie und Färbung skizziere. Die Pfeile stellen das Verschieben zum nächsten Bildschirm dar, ich traf New Order. Also, jetzt bin ich auf dem Bestellbildschirm. Was muss ich tun? Wählen Sie Kaffeetyp aus. Vielleicht benutzen wir dafür eine Dropdown-Box. Sobald ich das getan habe, gehen wir zum nächsten Bildschirm, und mein Kaffeetyp ist da, so dass ich zurückgehen und es bearbeiten kann. Jetzt muss ich aus einer Dropdown-Box für den Milchtyp auswählen, den ich möchte. Vielleicht kostet Soja mehr. Jetzt habe ich meinen Kaffeetyp und meinen Milchtyp. Welches Café wird es mir liefern? Vielleicht ist dies eine einzige Auswahl, weil ich nur eine auswählen kann, und es gibt mir die Schätzung, wie lange jedes Café dauern wird. Dann habe ich auf Kasse geklickt. Hier gehe ich auf verschiedene Arten zu bezahlen. Vielleicht Kreditkarte, vielleicht PayPal. Können wir Nachnahme leisten? Nicht sicher. Kannst du dem Fahrer Trinkgeld geben? Das sind einige Dinge, die wir durchdenken werden. Dann fülle ich die Kreditkarte aus, großen Pay-Button und ich bin fertig. Wir haben noch nicht alles durchdacht. Was passiert auf der anderen Seite? Was sagen die Fahrer? Was sagt das Café? Aber das gibt uns nur eine kleine Vorstellung von einem Teil des Flusses, durch den wir arbeiten werden. Wie Sie sehen können, sind sie chaotisch. Aber das ist in Ordnung. Der Punkt ist, dass ich den Prozess und den Fluss durchdachte und ein paar verschiedene Interaktionsparadigmen gefunden habe, die ich vielleicht verwenden möchte. Ich bin jetzt bereit, auf Digital zu wechseln. Versuchen Sie nun, die Bildschirme für sich selbst zu skizzieren, für Ihr eigenes Projekt. Wie immer, legen Sie sie in den Community-Vorstand. Wir sehen uns bald. 5. Erstelle Wireframes: Meine Skizzen aus der letzten Lektion sind im Wesentlichen Low-Fidelity-Drahtmodelle. Der nächste Schritt im Prozess besteht darin, diese Drahtmodelle zu festigen. Wireframes sind im Grunde ein Blueprint dessen, was gebaut werden soll. Es gibt ein berühmtes Zitat von Frank Lloyd Wright, Sie können einen Radiergummi auf dem Zeichentisch oder einen Vorschlaghammer auf der Bauseite verwenden. Das heißt nicht mit Software. Wenn wir weitermachen und den Code aufschreiben, müssen wir ihn einfach wiederholen, wegwerfen und es wird teurer. Wir müssen eine Blaupause oder eine Vorstellung davon haben was wir machen werden, bevor wir mit dem Programmieren beginnen. Wireframes helfen uns, durch die Ideen nachzudenken und wirklich mit Stress zu beginnen, sie zu testen, bevor wir bauen, und sie helfen uns, die Idee zu kommunizieren, damit andere Leute wissen, was sie bauen sollen. Low-Fidelity-Prototypen sehen nicht genau wie das fertige Produkt aus. Sie können Zeichnung gemacht werden, sie können ein wenig skizzenhaft aussehen, oder vielleicht ist das visuelle Design gerade genug für die nächste. Der Vorteil der Verwendung eines Low-Fidelity-Prototyps ist, dass Sie gehen, um zu bekommen, sagen Sie zurück auf der richtigen Ebene. Du wirst keine Kommentare bekommen wie, ich mag die Farbe nicht, ich mag die Schrift nicht. Was Sie in diesem Stadium wirklich suchen, ist Feedback über den Fluss und die vorgeschlagenen Interaktionen. Sie verwaltet auch die Erwartungen. Sie wollen nicht, dass ein Kunde etwas nimmt, das genau wie das fertige Produkt aussieht , und dann verstehen sie nicht, warum es immer noch so viel länger dauert, wenn ich das Design bereits gespeichert habe? Es kann auch verhindern, dass Entwickler versehentlich etwas aufnehmen und bauen. Wenn es wirklich klar ist, dass es sich nicht um einen endgültigen Entwurf oder Entwurf handelt. Low-Fidelity-Prototypen sind auch schnell und einfach zu machen, und deshalb, wissen Sie, wie mit ihnen verheiratet und Sie sind eher bereit, sie wegzuwerfen und neu zu beginnen, versuchen Sie es erneut, versuchen Sie es mit einer anderen Idee. High-Fidelity-Prototypen haben ihren Platz. Wenn Sie Low-Fidelity-Wireframes für Usability-Tests oder Benutzerforschung verwenden würden. Du wirst keine wirklich strengen Antworten bekommen. High-Fidelity-Prototypen sind das Beste dafür. Wireframes können wieder mit vielen verschiedenen Tools hergestellt werden, Adobe-Produkte, Balsamic, was wirklich gut für skizzenhafte aussehende ist, und Jill oder Skizze. Heute werde ich Skizze verwenden und Sie werden sagen, dass ich Bibliotheken installiert habe viele Komponenten haben, die ich verwenden werde, um mir Zeit zu sparen. Ich nahm etwa eine halbe Stunde, um diese Aktivität zu tun und es ist nirgends fast abgeschlossen, aber ich werde nur durch ein paar verschiedene Dinge, die ich getan habe, und ein paar verschiedene Tipps und Tricks sprechen. hier spielt es keine Rolle zu viel über die Farben und die Schriftart und die Größe ist in diesem Stadium, aber Sie werden sehen, wie ich sie ein wenig ändere, nur um die Reihenfolge zu zeigen, Dinge, die größer sind oder Aktionen zeigen, die Links zeigen, sind blau und dass Ding. Aber am Ende wirst du sagen, dass es offensichtlich nirgends fast fertig ist. Sie werden auch sehen, dass ich während wir durchmachen, meine Meinung ändere und erkenne, dass es verschiedene Dinge gibt , die wir hinzufügen sollten, also gehen Sie zurück und fügen Sie es hinzu, das ist offensichtlich, warum wir den Code nicht starten sollten, das ist offensichtlich, warum wir den Code nicht starten sollten, Dinge zu entfernen, neu zu ordnen Dinge wird eine Menge Zeit und Geld kosten. Ich dupliziere meine Kunstboards, so dass ich für jedes Ding den gleichen Grundrahmen haben kann. Ich habe auf „Neue Bestellung“ geklickt, also wechseln wir zum nächsten Bildschirm. Die, die ich in früheren Lektionen skizziert habe. Während wir durchlaufen, werden Sie sehen, wie ich Elemente aus Bibliotheken auswähle , die ich in meiner Skizze installiert habe. Das spart nur Zeit. Ich schiebe heraus, um ein Rechteck zu zeichnen, und es ist nur ein bisschen eine Verknüpfung und Typ, um Text auf dem Bildschirm zu bekommen. Ich habe mit Kaffee-Typ angefangen, also werde ich eine Reihe von verschiedenen Arten von Kaffee schreiben , die ich mir vorstellen kann. Ich erfinde die nur. Aber offensichtlich im wirklichen Leben, machen Sie Analyse und Sie würden herausfinden, was Coffeeshops bieten. Wieder ist es keine echte App, also habe ich nur etwas Kaffee, ich muss nicht bezahlen und andere Dinge, die Sie vielleicht kaufen möchten. Ich habe auch keine Preise in dieser Phase gesetzt. Sie sagen auch, dass ich nur ein paar verschiedene Kaffees, die ich mir vorstellen kann, von der Oberseite meines Kopfes. Ich muss gehen und die Rechtschreibung für einige von ihnen überprüfen. Aber ich lege sie in zufälliger Reihenfolge, damit ich sie am Ende in alphabetischer Reihenfolge platzieren kann. Es macht Sinn, in alphabetischer Reihenfolge zu sein, besonders [unhörbar] nicht wissen, was in der Liste ist und dann vielleicht wissen, wie sie sich fühlen, damit sie durch sie blättern können. Hier wähle ich alle Elemente in der Liste aus, klicke mit der rechten Maustaste und wähle vertikal verteilen aus. Dadurch werden die Elemente gleichmäßig verteilt. Ich habe Platz auf Sub-Pixeln ausgewählt, weil ich wieder nicht nach Pixel-perfektem Design suche. Aber ich wollte nur ein bisschen messen aussehen. An diesem Punkt habe ich erkannt, dass ich nicht nach Größe gefragt habe und vielleicht ist das etwas, was Sie im Voraus tun möchten. Ich fühle mich wie ein großer Kaffee oder fühle mich wie ein kleiner Kaffee anstatt auszuwählen, was Sie wollen und dann die Größe. Nun, sie sind wahrscheinlich [unhörbar]. Ich ordne einfach meine Bildschirme neu an und gehe zurück und füge das gleiche hinzu. Sie können sagen, wie ich die Kunstboards habe, ist von links nach rechts in der Reihenfolge der Handlung, die passiert, und ich zeige, wie es aussieht, wenn es geschlossen ist, wie es aussieht, wenn es erweitert wird und wie es aussieht, wenn es ausgewählt wird. Dies zeigt ein wenig von der Interaktion, wenn Sie wissen, wonach Sie suchen. Für die Kaffeegröße, vielleicht wollen Sie wissen, was die Kaffeegröße ist. Wir legen nur einen Platzhalter für wie viele Milliliter der Kaffee ist. Obwohl das wahrscheinlich nicht in der realen Welt funktionieren wird, denn hat jeder kleine Kaffee aus jedem Café die gleiche Größe? Ich habe auch Inputkosten hier überhaupt und offensichtlich kann der Kaffee unterschiedliche Preise basierend auf verschiedenen Cafés sein. Das ist nur eine gewisse Komplexität, die ich vorerst außer Reichweite lasse aber im wirklichen Leben müssten Sie darüber nachdenken, wie diese Interaktion auch aussehen würde. An dieser Stelle habe ich festgestellt, dass meine Schaltflächen immer noch eine neue Reihenfolge sagen , weil ich sie quer kopiert habe. Jetzt gehe ich zurück und ändere es, um „Add to order“ zu sagen. Sobald wir unseren Artikel zu unserer Bestellung hinzugefügt haben, wird in der Lage sein, es in einigen zusammenfassenden Ansicht mit der Fähigkeit, zurück zu gehen und es zu ändern. Jetzt müssen wir es verwenden, um auszuwählen, woher sie ihren Kaffee holen wollen. Ich habe in diesem Modell entschieden, wir schauen uns Cafés an, die diesen Kaffee haben, den Sie zur Verfügung gewählt haben. Da Sie Ihre Bestellung nur aus einem Café auswählen können, werde ich Optionsfelder verwenden, die dem Benutzer vorschlagen, dass nur eine ausgewählt werden kann. Ich habe mir nicht die Mühe gemacht, die Menge anzuschauen. Was passiert, wenn Sie mehrere Kaffees auf einmal bestellen möchten, was ich bin sicher in Reichweite sein würde. Auch diese Interaktionen, die Sie durchdenken müssen. Wieder einmal, der Einfachheit halber, habe ich nur die Möglichkeit, mit Kreditkarte zu bezahlen und ich gehe davon aus, dass ich noch keine Kreditkarte habe. Diese Interaktion ist wirklich hoch, je nachdem, wie komplex das reale System war, müssen Sie möglicherweise viel mehr abbilden. Möglicherweise müssen Sie alle verschiedenen Felder abbilden und es würde viel länger als eine halbe Stunde dauern, die ich für dieses hier verbracht habe. Aber Sie können sehen, dass wir schon ein bisschen einen Fluss von dem haben, was passiert? Was ist los? Wie könnte es aussehen? Welche Arten von Kontrollen, wo wir eine Drop-Down-Box, Radio-Buttons, große Code-Aktion, große lila Tasten für Kohle verwenden Radio-Buttons, große Code-Aktion, ? Dinge, die wir wollen, dass Benutzer tun und Links für Dinge bearbeiten , die nicht so viel verwendet werden, aber immer noch sein müssen, in der Lage, auf die Schnittstelle zugegriffen werden kann. Wenn ich diese Wireframes zu Usability-Tests bringen würde, müssten die Verwendungen schrecklich viel darüber ausmachen , wie die Interaktionen funktionieren, und Sie erhalten möglicherweise keine wahren Ergebnisse. In ähnlicher Weise müssen Entwickler diese Idee in diesem Stadium möglicherweise viele Entscheidungen darüber treffen, was die Interaktion tut, wie wir in der zweiten Lektion gesprochen haben. In der nächsten Lektion lernen Sie, wie Sie Prototypen erstellen, um diese Header zu durchlaufen. Versuchen Sie nun, Drahtmodelle für Ihr Projekt zu erstellen und denken Sie daran, dass sie nicht pixelgenau sein müssen. Es geht um Kommunikation im Moment still und low file ist besser, wie wir sprachen. Vergessen Sie nicht, sie in das Community-Board hochzuladen, um Feedback zu erhalten. Wir sehen uns bald. 6. Prototyping: Prototyping löst einige der Probleme, über die wir am Ende der letzten Lektion gesprochen haben. Sagen Sie die Interaktion nicht. Wenn ein Bild tausend Worte wert ist, dann ist ein Prototyp eine Million wert. Ein Prototyp ist im Wesentlichen ein Muster oder ein Modell eines Systems oder eines Prozesses. Es gibt zwei Haupttypen von Prototypen. Es gibt einen anklickbaren oder abschaltbaren Prototyp und es gibt einen interaktiven Prototyp. Ein anklickbarer oder abschaltbarer Prototyp ist ein Prototyp, bei dem Sie einfach Ihre Wireframes nehmen und Hotspots auf einige der Kernaktionensetzen Hotspots auf einige der Kernaktionen und dann auf das Links zum nächsten Korn im Wesentlichen klicken. Sie können dies in Vision oder Skizze tun und ich werde ein Beispiel dafür durchlaufen, wie das geht. Wir können einen dieser anklickbaren Prototypen in Skizze erstellen. Wir gehen zum Prototyping-Menü und klicken auf „Link zur Zeichenfläche hinzufügen“. Sie wählen, was Sie klicken möchten, die Schaltfläche zum Beispiel, und fügen Sie dann zur Zeichenfläche hinzu, und klicken Sie auf die Zeichenfläche, mit der sie verknüpft. Es lässt diese Pfeile auf dem Bildschirm, so dass Sie die Interaktion sehen können. Die Abkürzung dazu ist, das WK zu treffen, während Sie etwas auf einer Zeichenfläche ausgewählt haben und dann auf die nächste Zeichenfläche drücken, und es wird diesen Link machen. Dann können Sie die Prototypen abspielen. Wenn Sie also auf die Stelle klicken, an der Sie diese Hotspots gemacht haben, gelangen Sie zum nächsten Bildschirm. Aber Sie können sagen, weil mein Bildschirm eine andere Größe hat, bewegt sich das Bild nach oben und unten. Wenn Sie ein wenig mehr Zeit verbringen, können Sie dies ein wenig glatter machen, aber wieder, Sie sehen, dass es nur zum nächsten bewegt. So liefen die Dinge nicht wirklich. Wenn Sie auf die Schaltfläche klicken, wird sie nicht auf einen neuen Bildschirm verschoben. Es würde nur animieren oder auf eine andere Weise auswählen , so dass das die einzige Einschränkung dieser anklickbaren Prototypen ist. Um interaktive Prototypen zu erstellen, in denen Benutzer Dinge tatsächlich eingeben können, wählen Sie aus Dropdown-Feldern aus, sagen Sie, wie die Schaltfläche aussieht, wenn sie angeklickt wird, Sie können den Code verwenden, aber offensichtlich könnte dies zu zeitaufwendig für einige -Designer. Oder Sie können Werkzeuge wie Ajua verwenden, was ich heute verwenden werde. Nun, das wird ein bisschen mehr altmodisch aussehen, die Stile sind nicht so modern, wie Sie in der Skizze sehen, aber es gibt Ihnen die Interaktivität. Sie müssen nur die Interaktion zwischen zeigen wie genau es im Browser im Endprodukt aussehen wird. Das ist Ajua oder Axia, ich bin mir nicht sicher, wie Sie es aussprechen und ich benutze nur eine kostenlose Testversion. Was ich tue, um Zeit zu sparen, ist, meine Drahtbilder aus der Skizze zu kopieren und darüber zu schreiben. Ich setze einen Knopf von Ajua, der Aktionen mit ihm über die Schaltfläche verknüpft hat , die ich gerade in meinem Bild habe. Um Interaktionen in Axia zu machen, verwenden Sie Fälle, also habe ich die Schaltfläche ausgewählt und ich werde Fall beim Klicken hinzufügen. Wenn auf die Schaltfläche geklickt wird, wird es tun, was ich hier eingestellt habe, eine weitere Seite des Prototyps im selben Fenster öffnen. Jetzt füge ich ein Dropdown-Feld hinzu und wieder lege ich es einfach über das Dropdown-Menü aus meinem Bild bei y Frame und füge hinzu, welche Elemente ich in dieser Liste erscheinen möchte. Ich kann viele auf einmal hinzufügen, was nützlich ist, wenn Sie mehrere gleichzeitig schreiben. Was ich hier mache, ist, das zweite Element zu einem dynamischen Panel zu machen und es auf ausgeblendet zu setzen. Dies liegt daran, dass ich einen interaktiven Fall zur Kaffeegröße hinzufügen werde , dass, wenn ein Element aus dieser Liste ausgewählt wird, das nächste Dropdown-Menü angezeigt wird. Dies spart nur, dass Sie auf mehrere verschiedene Bildschirme gehen müssen, da Sie alles im Prototyp tun können. Ajua hat einige wirklich komplexe Interaktionen, die Sie wählen können, und das ist ziemlich außerhalb des Geltungsbereichs für diese Klasse, aber Sie können ein Spiel herum haben, wenn Sie interessiert sind. Auch hier arbeite ich nur um meine Wireframes. Ich werde ein Rechteck hinzufügen, um die Dinge aus meinem Bild abzudecken und es durch die in Ajua verfügbaren Optionsfelder zu ersetzen , weil diese vollständig interaktive Optionsfelder sein werden und zeigen, was sie tun sollten und wie sie interagieren. Sie können eine Vorschau des Prototyps anzeigen. Dies öffnet es im Browser und zeigt Ihnen, wie die Interaktionen funktionieren. Wenn ich aus diesem Element auswähle, das nächste Dropdown-Menü angezeigt, wie wir es eingerichtet haben. Sie werden sehen, dass die Optionsfelder funktionieren. Diese dauerten ungefähr 20 Minuten, aber wieder, wenn ich herumspielte und viel länger verbrachte, könnte ich es eher aussehen lassen, wie das endgültige System würde. Es hängt nur davon ab, wie viel Zeit Sie verbringen möchten, ob ich nur die Interaktion zeige oder ob sie genau pixelgenau aussehen muss. Es gibt neuere Werkzeuge, die herauskommen. Wir können tatsächlich im Code entwerfen, aber ich werde mir heute keine von denen ansehen. Wenn Sie wirklich komplexe Interaktionen haben, die Sie zeigen möchten, ist eine andere Möglichkeit, dies zu tun, indem Sie ein GIF oder eine PowerPoint-Animation verwenden und ich werde Ihnen zeigen, wie Sie dies auch tun. Lassen Sie uns eine Animation in PowerPoint vortäuschen. Nehmen wir an, Sie haben eine Liste von Dingen, die Sie speichern können, und wenn Sie es speichern, gibt es Ihnen einen kleinen Hinweis und sagt Ihnen, dass es in Ihr Menü gegangen ist. Ich habe zwei Sterne, die den geretteten Zustand repräsentieren , und ich lasse sie beide gleichzeitig erscheinen. Dann mache ich eine halbe Animation, damit ich den Stern dorthin gehen kann , wo ich will, dass die Animation gehen. Ich will, dass das mit früheren passiert. Klicken Sie hier oben auf den Stern und die Animation geschieht. Dann müssen wir es verlassen, damit du nicht nur den Stern durch das Menü schweben lässt. Was ich tun werde, ist sicherzustellen, dass ich den richtigen auswähle und einen Exit-Effekt habe und dies nach dem vorherigen mache. Wenn du spielst, fälschst du die Interaktion. Klicken Sie auf „Verschwinden animieren“. In Wirklichkeit nehmen wir in diesem Schritt wahrscheinlich diesen Prototyp, um Radiergummis oder Usability-Tests zu verwenden. Dies ist zu überprüfen, ob die Benutzer die Aufgaben ausführen können, die wir erwarten, dass sie mit dieser Schnittstelle tun können , und es wird uns zeigen, ob etwas verwirrend, schwierig oder schwer zu bedienen ist . Erstellen Sie jetzt einen Prototyp Ihres eigenen Projekts und vergessen Sie nicht, es in das Community-Board zu setzen, um Feedback zu erhalten. Auch hier muss es nicht erstaunlich aussehen, es geht nur darum, die Interaktionen zu zeigen. Selbst wenn es in Bezug auf die Texte, die Stile und all das ein bisschen altmodisch aussieht , ist es immer noch okay. Wir sehen uns bald. 7. die Interaktion dokumentieren: Jetzt haben Sie das Interaktionsdesign ziemlich fertiggestellt, gut gemacht. Mein Prototyp ist immer noch ziemlich rau, also würde ich im wirklichen Leben mit visuellem Design arbeiten, um zu verfeinern, wie es im Abstand aussieht , bevor ich es an die Entwicklung übergebe. Abhängig davon, wo und wie Sie arbeiten, hängt davon ab, wie Sie mit dem Interaktionsdesign umgehen müssen. Wenn Sie eine Agentur sind, die keine Entwicklung macht, die gesamte Entwicklung ausgelagert ist, dann brauchen Sie vielleicht ein wirklich dickes Anforderungsdokument mit wirklich gespecktem, verspottetem Feld, das sagt: „Wenn Sie dies anklicken, geschieht dies , geschieht dies als Nächstes. Dies ist die Reihenfolge der Bildschirmlesegeräte.“ All das wirklich knackige Detail. Vielleicht arbeiten Sie irgendwo, der bereits einen ziemlich komplexen Styleguide hat, so dass Sie sich nicht darum kümmern müssen, all diese kleinen Minutien anzugeben. Aber unabhängig davon, welche es ist, hilft es, eine Dokumentation zu haben. Sie sind vielleicht nicht in der Nähe, wenn sie es aufheben, oder es könnte eine gewisse Verzögerung zwischen dem Fertigstellen des Designs und dem Zeitpunkt, zu dem es aufgenommen wird, und die Leute können die Interaktion vergessen. Was ich gerne mache, ist, den Prototyp zu teilen, die Bilder zu teilen und für alles Komplexe zu dokumentieren. Das könnte nur Text sein, es in Sketch machen, kommentieren, markieren, nur mit Bildern, mit Symbolen, mit Wörtern oder mit einem Plug-In, oder Sie könnten ein Video des verwendeten Prototyps aufnehmen, und rede darüber oder füge kleine Boxen hinzu, um hinein zu fliegen und auszufliegen. Wieder hängt alles davon ab, wie viel Zeit Sie haben und wie beschäftigt Sie sind und wie komplex die Interaktionen sind. Lohnt es sich, einen halben Tag damit zu verspotten, oder ist das nur eine Verschwendung meiner Zeit, die niemand anschauen wird, wird jemand die Speisekarte lesen? Wenn nicht, vergeuden Sie nicht Ihre Zeit. Ich würde gerne eine Kombination machen. Ich werde nur ein Beispiel dafür durchlaufen, wie ich das dokumentieren würde, wenn es ein echtes Produkt wäre. Was ich in Word oder Confluence oder was auch immer Werkzeug tun würde, das Sie verwenden; ist, was das Produkt ist Link zu dem Prototyp. Kopieren Sie einfach die eigentliche URL, sagen Sie, wem das Projekt gehört, also an wen Sie für Fragen kommen sollen, und haben Sie dann auch Links dazu, wo ich die einzelnen Bilder mit den Kommentaren platziert habe. Dies liegt daran, dass nicht jeder Sketch haben wird, so dass sie es nicht herunterladen können. Ich kopiere sie oft entweder in dieses Dokument oder irgendwo, wo sie sichtbar sind, und füge sie ein. In Bezug auf die eigentliche Dokumentation werde ich mich einfach bewegen, so dass ich ein wenig Platz zwischen den Appboards habe, und zwischen den Appboards werde ich Text einfügen. Wenn sie auf diese Schaltfläche klicken, wechseln sie zur nächsten Seite. Sobald sie ausgewählt haben, welche Art von Kaffee sie wollen, verwendet der Film progressive Offenlegung, so dass es zeigt das nächste Feld, das ausgewählt werden muss. Es verschiebt dann auch das, was ausgewählt wurde, in diesen Bearbeitungsmodus, mit der Möglichkeit zu klicken, ändern und zurück zu gehen. Jetzt habe ich beschlossen, hier einen zusätzlichen Link hinzuzufügen, um diesen Prozess zu zeigen. Ich könnte auch mock-up, wo verschiedene Dinge herkommen. Ich verspotte, dass die Bestelldetails zusammenbrechen sobald Sie zum nächsten Bildschirm gelangen, so dass alles in einer Zeile ist. 8. Recap - Interaktionsdesign 101: Jetzt wissen Sie, was Interaktionsdesign ist. Alles, was damit zu tun hat, wie der Benutzer mit Ihrem Produkt im Laufe der Zeit interagiert. Nicht nur das Aussehen und Gefühl. Sie kennen die Schritte, die die Benutzerflüsse erstellen, ein Diagramm der Schritte, die ein Benutzer durchführt, oder die Bildschirme, die sie durchlaufen. Wie skizziere ich die Schnittstelle, um darüber nachzudenken, wie man die Bildschirme entwerfen könnte, wie man Drahtmodelle macht. Framing up dieser Designs und Denken durch die interaktiven Komponenten zu verwenden, Prototyping Next, Erstellen eines interaktiven Prototyps, um Interaktionen zu testen und besser zeigen. Schließlich dokumentieren, um Ihre Entwürfe zu kommunizieren. Denken Sie daran, dass Sie nicht alle diese Schritte für jedes Projekt ausführen müssen. Es hängt davon ab, wie groß die Stücke sind, wenn es nur eine kleine Änderung ist und Sie können es einfach im Browser selbst markieren, oder ob es sich um ein großes Greenfields-Projekt handelt, in dem Sie alle diese Schritte ausführen möchten. Sie mehr Erfahrung sammeln, erfahren Sie, wann Sie entscheiden können, welche Schritte Sie ablegen und welche Schritte Sie tun müssen. Das bringt uns zum Ende von Interaction Design 101. Bitte folge meinem Profil und überprüfe die Klasse. Wenn es Ihnen gefallen hat, verbreiten Sie das Wort. Viel Glück auf Ihrer Interaktionsdesign-Karriere. Ich stelle alle Folien zur Verfügung und lade sie hoch , damit Sie später darauf verweisen können. Fröhliches Gestalten.