Adobe XD lernen

Auflösung der Praxisübung zur Usability

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieser Film präsentiert die Auflösung der Übung.

Transkript

Eine sinnvolle Auflösung dieser Übung ist die Demonstration in Form der direkten Anwendung und des interaktiven Prototypen und das zeige ich Ihnen mit Hilfe dieser Desktop-Vorschau. Zuvor aber noch ein, zwei Hinweise auf die angebrachten Verknüpfungen. Schauen wir uns das mal kurz an. Sie sehen also, dass wenn man ein Fenster -- das haben Sie wahrscheinlich auch bei der Übung bemerkt -- aktiviert, dann bekommt man immer die Verbindung dieser einzelnen Objekte, bzw. Zeichenflächen miteinander. Und Sie haben jederzeit die Möglichkeit, natürlich auch die Aktionen zu verändern, das heißt, also hier die einzelnen Konfigurationen noch mal anzupassen, wenn Ihnen das in der Praxis nicht gefällt. Ich verfahre in der Regel immer so, dass ich bei den ersten Tests hier die Desktop-Vorschau verwende und dann, wenn ich soweit bin, dass ich alles gesetzt habe, dann schalte ich eigentlich das Device hinzu und überprüfe dann wirklich, wie ist es, wie fühlt es sich mit den Fingern an, wenn ich dort entsprechend drauf reagiere. Hier haben wir bspw. so eine Situation, das ändere ich jetzt mal. Da haben Sie zwei Möglichkeiten, ich kann also durchaus sagen: Bitte gehe immer wieder hier auf diese Startseite zurück, aber ich habe hier auch die Möglichkeit, zum Beispiel zu sagen: Gehe bitte auf die vorherige Schaltfläche. Und das lasse ich jetzt hier mal so in der Form drin. Sie sehen, dann fehlen diese Verbindungslinien. Ab einer bestimmten Anzahl an Schaltflächen mag das durchaus sinnvoll sein und da ich von dieser Seite aus niemals woanders hinkomme, ist das auch durchaus legitim. Und so könnte man auch bei allen anderen Seiten verfahren, wie auch immer. Aber ich habe das jetzt einfach mal in der Form so realisiert. Wenn man damit fertig ist, dann sollte das Ganze von der optischen Seite wie folgt aussehen. Ich klicke auf die Registrierung, kann mir das dann durchlesen, kann in der Präsentation ein bisschen was dazu sagen. Hier oben die Verbindungen zurück, die gehen natürlich bei allen Seiten, aber jetzt spiele ich das Spiel mal durch. Ich habe das, was ich gelesen habe, abgehakt und auch verstanden. Und vielleicht noch mal ganz kurz zurück, mir fällt gerade was ein. Wenn Sie so eine Simulation mit dem Häkchen machen möchten, dann wäre folgendes notwendig: Sie bräuchten zwei Seiten, also zwei Zeichenflächen, ohne einen animierten Übergang und dann klicken Sie quasi hier drauf, es wird sofort die andere Zeichenfläche eingeblendet, und das Häkchen erscheint. Also, erste Seite ohne Häkchen, dann Klick ohne Animation, zweite Seite mit Häkchen, und das hat den Effekt, als wenn hier ein Häkchen erscheint, obwohl das eben ohne Programmierung ist. Ich habe das Häkchen jetzt gesetzt und klicke auf "Verstanden". Es geht weiter. Ich kann jetzt hier diverse Dinge eintragen, ausfüllen. Auch das kann man mit etwas Mühe animieren, natürlich auch hier, die einzelnen Aspekte. Sei es jetzt darauf beschränkt, dass ich sage, ich fülle diese Daten aus und sage dann "Absenden". Ich bekomme die Bestätigung und sage dann "OK". Und bin wieder auf der Startseite. Ich bin sicher, jetzt kann sich der Auftraggeber wirklich unter dem "Look and Feel" was vorstellen und auch verstehen: Aha, so ist der Registrierungsvorgang gedacht. Ich gehe nochmal zu den Autos. Hier habe ich jetzt meine schöne Liste, da kann ich auch wunderbar zeigen, wie sich das auswirkt, wenn man hier scrollt. Auch das klappt prima. Dann würde ich mir jetzt von der Präsentation selbstverständlich genau das richtige Auto nehmen und dann hier so tun, als ob ich da draufklicke und Sie sehen, dann kommt auch der gelbe Opel und dann kann ich zum Beispiel noch sagen: Ruf mir hierzu wieder die Bildergalerie auf, wunderbar, das könnte man theoretisch auch noch animieren. Wie auch immer und dann bestätige ich auch das wieder. Ich bin jetzt wieder hier und gehe zurück auf die vorherige Seite. Da mache ich das Ganze ebenfalls wieder auf das Hauptmenü. Es ist mir gerade tatsächlich noch ein Fehler aufgefallen. Aber das sind so Kleinigkeiten, die verdeutlichen eben genau, wie wichtig das ist, das Ganze zu testen. Ich habe hier den Zurück-Button. Der funktioniert auch so, aber es gibt eigentlich auch ein Symbol für das Hauptmenü und das müsste anstelle dieses Zurück-Buttons tatsächlich an diese Position. Aber das sind Kleinigkeiten, die man auch sehr schnell ändern kann. Und jetzt gehe ich noch auf die "Strecken". Hier das Beispiel, ich habe die anderen Buttons nicht belegt, da muss ich natürlich in der Präsentation aufpassen und muss dann wirklich sagen: Okay, gucken wir uns an, welche Strecke das hier ist, die wähle ich jetzt aus: Aha, so und so sind die Informationen zur Strecke, alles klar, ich gehe wieder zurück. Und hier im Übrigen, derselbe kleine Designfehler, den man aber dann ja leicht beheben kann. Und damit wäre die komplette Usability erklärt. Sie sehen hier nochmal, was ich meine. Auf dieser letzten Seite habe ich hier dieses Symbol fürs Hauptmenü und die müssten genau hier an diese Positionen. Aber das ist wirklich eine Kleinigkeit, das ist nur eine simple Kopie und dann hätten wir das wieder. Sie sehen also, wenn Sie das so in dieser Art gelöst haben, dann sind Sie, glaube ich, jetzt an dieser Stelle angekommen, bestens vorbereitet Ihre eigenen Mock-Ups zu erstellen, Ihre eigenen Wireframes zu erstellen, diese zu einem Mock-up zu überführen, diese in einen Prototypen zu überführen, und mit Interaktionen oder Aktionen zu belegen.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!