Seitenskizzen

 

Ein Prototyp ist ein Model der Webseite, das unterschiedlich deteiliert sein kann. Prototypen können schon einfache Entwurfe auf Papier sein bis hin interaktiven HTML-Seiten, den sogenannten Klick-Dummys.

 

Mithilfe von Scribbles können Sie schnell viel Varianten entwickeln, um die Anforderungen der Nutzer in eine Anwendung unzusetzen. Sie kommen auf innovative Lösungsansätze und können grob abschätzen, ob diese funktionieren. So produzieren Sie am Anfang viele Ideen, ohne lang entwickeln oder gestalten zu müssen, und haben am Ende ein Produkt, das eine gute Ux Experience bietet.

 

Vorteile von Scribbles:

 

1) Sie können schnell, viele Ideen etwickeln.

2) Jeder erkennt Vorläufigkeit eines Scribbles.

3) Ein Scribble macht noch kaum grafische Vorgaben.

4) Niemend wird die Farbe Ihrer Linien in Frage stellen oder sagen, dass ihm eine von Ihnen nur angedeutete Abbildung nicht gefällt.

 

Bevor Sie losgehen mit dem Scribbeln, sammeln Sie alle bisher vorhandenen Informationen zu Ihrer Anwendung: Personas, Nutyungsszenarien, Anforderungen, Moodboards.

Legen Sie fest, was das Ziel Ihrer Scribble - Sitzung sein soll: Wollen Sie neue Idee generieren, wie ein Nutzungproblem gelöst werden kann? Wollen Sie Varianten für die Gestaltung einzelner Seite finden? Oder wollen Sie den idealtypischen Umgang eines Nutzers mit Ihrem Produkt abbilden?

 

Ein Scribble ist im Idealfall selbsterklärend. Rechnen Sie immer damit, dass jemand Ihre Scribbles ansieht, der mit dem Projekt nur am Rande vertraut ist.

 

Tipp: Mit der Smartphone-App Marvel oder mit der InVision z. B. fotografiert man seine handgezeichneten Scribbles und kann dann in der App Hotspots, also klick-/tippbare Zonen definieren. Sehr schnell haben Sie so eine Testversion zusammengestell, in der Sie die gesammte Interaktion der geplante Website oder App abbilden. Natürlich nur, sofern diese nicht allzu kompliziert wird und z. B. keine Texteingaben verarbeitet werden sollen. [9]

 

Meine Skitzze

Während des Skribbels meines Blogs (siehe Bild 5) war es wichtig für mich, das unabhängige von Haupmenü das Untermenü, so platzieren, dass für die Nutzer die Navigation auf dem Blog bequem war. Die Informationsblöcke so plazieren werden mussten, dass sie für Besucher informativ und bequem für das Lesen sein sollten.

Es war auch notwendig, bequem Informationen über mich auf dem Blog zu plazieren, über die Programme, in denen ich arbeite. Für die Besucher war es auch notwendig, sowohl eine praktische Anordnung von Lektionen und Informationsvideos, als auch die Bereiche für Kommentare, um die Kommunikation mit Besuchern meines Blogs zu organisieren, bereitzustellen.

 

 

Wireframe

Wareframe sind Seitenskizzen, auf dennen Sie die wichtigsten Inhalte festhalten, die in einem bestimmten Moment auf dem Bildschirm yu sehen sein sollen. Sie sind schnell und helfen vor allem, Ideen zu sehensein sollen.Sie sind schnell erstellt und helfen vor allem, Ideen zu konkretisieren und Team zu dieskutieren. Allein das hilft, eine Anwendung zu entwickeln, die eine bessere Usability hat. Und Nutzertests können Sie mit Wireframe auch durchführen.

Ein Wireframe ist mit dem Software erstellt und deutlich detaillierter ist als ein Scribble. Mit einem Wireframe nähert man sich dem fertigen Produkt noch weiter an. Man liegt z.B. fest, wie viele Elemente genau auf einer Seite sein sollen, in welcher Reihenfolge sie angeordnet werden und wie groß sie etwa sein sollen.

Schlißlich können wir mit Wireframes auch Usability - Test durchfüren, um in einer frühen Phase schon das Feedbackder Nutzer einzuholen. So können wir schon Probleme finden und lösen, bevor Grafik und Programmirung Arbeit in die Anwendung investiert haben. Und auch zu Dokumentation der Anforderungen an Grafik und Prorgammirung sin Wireframes aus unserer Sicht in größeren Projekten unverzichtbar. Nur mit Textdokumenten oder Gesprächen kommt man meist nicht weit. Beide lassen zu viel unbestimmt, und am Ende muss man sich in mehreren Überarbeitungsrunden dem annähern, was man eigentlich wollte.[10]

 

 

Mein Wareframe

 

Ich habe mein Prototyp mit Hilfe des Programms Xd von Adobe gestaltet. Das ist ein Programm mithilfe von dem können UX-Designer in einer einzigen Applikation interaktive Benutzererlebnisse für das Web und iOS-/Android-Apps erstellen.

 

Für mein Blog habe ich Wireframe für folgende Seitentypen angelegt (siehe Bild 5):

Startseite (1), Übersichtsseite (2), Deteilseite mit Tutorial (3 ), Deteilseite mit Beitrag (4).

 

Ich habe mir auf dieser Stadie überlegt, welche Elemente un warum, in welcher Größe und an welcher Position ich sie auf meinem Blog überhaupt brauche.

 

Bei Gestaltung meines Wireframes hab ich solche Elemente, wie Logo, Kopfzeile (Header), Fußzeile (Footer), Inhaltsbereich (Content), Navigation, beispielhafte Elemente (Bilder, Überschriften, Fließtext, Listen, Kästen, Video, Kommentare, Icons) verwändet.

 

Ich habe mit grauen Farben mein Wireframe gemacht, weil die Farben ablenken können. Zuerst es war mir wichtig auf Funktionen, Inhalten und Struktur meines Blogs zu konzentrieren.