Contents 5d 5e 5f 5g Interaction Flow / Process Flow Structure Maps Reference Zone Wireframes / Mock-Up
5d Interaction Flow (Frontend, sichtbar) / Process Flow (Backend, nicht sichtbar) Flow Chart: A Flowchart is a tool that graphically represents the steps of a process or the steps that users have to take to use the service (user Flowchart). The Flowchart helps you analyze the number of steps and the time required for each step, to detect bottlenecks, unnecessary steps, repetitions, and other obstacles. Interaction Flow bezieht sich auf Frontend (sichtbare) Prozesse Process Flow bezieht sich auf Backend (unsichtbare) Prozesse http://erc.msh.org/quality/pstools/psflcht.cfm http://thinkingandmaking.com/entries/13
5e Structure Maps The web site structure map is simply a visual way to look at the architecture of a web site. Much like an organization chart, the structure map lets the designer visualize what content is included in the web site, and what path users will follow to reach it. Ideally, you want to have the most important content easily available from the Homepage what is typically referred to as one click away. Information that is less important to the users of the site can be sub pages of other pages maybe two or three clicks into your site.
5f Reference Zone "low fidelity wireframes" show just major positioning discuss big ideas or concepts show the overall structure of particular page show family of pages working together no details or functionality http://www.palantir.net/blog/website-wireframes-making-your-whole-world-better
5g Wireframes / Mock-Up Ein Wireframe wird zum Beispiel zur grundlegenden Strukturierung einer Webseite eingesetzt und untergliedert eine Internetseite unabhängig von Grafiken oder Farben. statisch!= dynamisch
5g Wireframes / Mock-Up statisch Erstentwurf Definition der Elemente rudimentäres, konzeptionelles Schema dynamisch mehrere Seiten mit hierarchischer Ordnung Verknüpfungen funktionieren Dennoch befinden wir uns auch bei dynamischen Wireframes immer noch in der Konzeptionsphase. Das Design spielt lediglich eine untergeordnete Rolle. Einzelne grafische Elemente werden nur vereinfacht dargestellt, da es lediglich um die grundlegende Gliederung eines Internetauftritts und seiner Websites geht.
schnelle Zusammenfassung: Wer kann was? Interaction & Process Flow Structure Maps Reference Zone / low-fidelity-wf Wireframes veranschaulicht Abläufe veranschaulicht Struktur Darstellung der Bereiche Weiterführung der RZ Reihenfolge Hierarchie und Verlinkung Position, Größe, Relation höherer Detailgrad einzelne Schritte präzisere Relation Dauer der Schritte Hilft Wiederholungen, über- Hilft die Struktur so simpel Organisiert die Bereiche ein- Verfeinert die Organisation flüssige Schritte oder Miss- wie möglich zu organisieren zelner Seite, ihre Wichtigkeit der Inhalte auf Basis der RZ. verständnisse zu klären. und kann überflüssige Zwis- und evtl. Zusammenhänge Einzelne Textzeilen werden chenseiten oder komplizierte von Seitenfamilien. dargestellt sowie einzelne Hierarchien vereinfachen. Elemente.