Wireframes und Co. von Andreas Demmer am 6. Juli 2009 beim 1. Webmontag.talk in Manhheim, Blog: http://www.andreas-demmer.de/weblog/beitrag330/

1. ANDREAS DEMMER
Technical Director · BARTENBACH AG 1
Vorstellung
Technischer Leiter der BARTENBACH AG
360 Grad Werbeagentur in Mainz
beschäftigt 100 Mitarbeiter

2. WIREFRAMES & CO.
Conceptual Design als Projektbaustein
2
Thema nennen
Dauer des Vortrags: 10-15 Minuten

3. 3
Auftrag des Vortrags: Verbesserung von Websites
und -anwendungen
Learn from the best: Um gute Websites zu bauen,
sollte man die anschauen, die erfolgreich sind

4. EINE TYPISCHE
GOOGLE-APPLIKATION
4
Google ist der Inbegriff von Erfolg

5. SUCHE
5
Reduktion auf das Wesentliche
Einfache Bedienung
schnörkellos

6. EINE TYPISCHES
APPLE-PRODUKT
6
Auch Apple ist sehr erfolgreicher Player am Markt

7. TOUCH
7
wieder:
aufgeräumt
strukturiert
Reduktion aufs Wesentliche

8. EINE TYPISCHE
DURCHSCHNITTS-
APPLIKATION
8
Leider sieht Gros der Anwendungen anders aus

9. 9
völlig überfrachtet
unübersichtlich
Funktionen die keiner braucht oder versteht
Wie kann es dazu kommen?

10. DAS PROBLEM
(und es trifft uns alle)
10
Die Erklärung dieses Problems
Problem tritt uns alle
Jeder hat es wahrscheinlich schon erlebt
Auftrag: Mach eine einfache Such-Applikation

11. 11
Anfangs noch schlicht und funktional
Doch dann: Logo dazu, Menü für Unterseiten
Danach: Ergebnisliste, Breadcrumb, TagCloud
Und noch mehr Suchfunktionen, erklärender Text
Dann: Neue Navi, WYSIWYG, Stats, Ergebnisfilter
Da es kompliziert wird: Hilfefunktionen, viele!
Um den Whitespace zu füllen: Weitere Funktionen
mehr und mehr

12. FEATURE-
INFLATION
12
Das Resultat:
Viele Features, die keiner braucht
Kernfeatures treten in den Hintergrund

13. CHAOS!
13
Anwendung sieht aus, als hätte eine Bombe
eingeschlagen
Unordentlich, überfrachtet
Man nutzt solche Seiten nicht gerne

14. DIE LÖSUNG
DER LÖSUNGSANSATZ
14
Die Lösung, dem vorzubeugen gibt es nicht
Es gibt kein 100% sicheres Mittel → Lösung zu
vollmundig
Eher Lösungsansatz

15. CONCEPTUAL DESIGNER
15
Der Beruf des Conceptual Designers, auch:
Informationsarchitekt
Planner
Konzepter, Konzeptioner
strukturiert Projekt im Vorfeld
plant Umfang, Features und Interface

16. 1 2 3 4
IDEE KONZEPT DESIGN CODE
16
An welcher Stelle im Projektverlauf tritt er auf?
4 Projektphasen
Kreative Leitidee, also noch vorm „loslegen“
Konzept und Planung → Conceptual Designer
Design und Text
programmiertechnische Umsetzung

17. IDEE KONZEPT DESIGN CODE
17
Conceptual Design betrifft (nicht nur) das Konzept

18. USER CENTERED DESIGN
INFORMATIONS USER
USABILITY
ARCHITEKTUR EXPERIENCE
18
Die 3 Säulen des Conceptual Design
Informationsarchitektur: Informationen für
Zielgruppen gliedern und aufbereiten
Usability: Möglichst intuitive und einfache Bedienung
ermöglichen
User Experience: Wie verhält sich das UI während
der Bedienung?
Diese Säulen tragen das User Centered Design

19. DER MENSCH IM
MITTELPUNKT
19
Der Mensch steht immer im Mittelpunkt!
Immer im Hinblick auf die Nutzer arbeiten
D.h. Auch: Funktionen weglassen, die keiner braucht
oder versteht
Nichts implementieren, nur weil es cool wäre oder
einfach zu realisieren ist

20. RESEARCH PERSONAS USE CASES
STORY- WIRE- SITEMAP
BOARD FRAMES
20
6 Werkzeuge der Conceptual Desinger
Research: Statistiken wälzen, Feldforschung
Personas: verschiedene typische Nutzer und deren
Umfeld sowie Bedürfnisse beschreiben
Use Cases: Wie würden diese Personen vorgehen
um das Gewünschte zu Erreichen?
Storyboard: Wie verhalten sich Funktionen und
Seiten bei der Benutzung? Wie interagiert die
Seite?
Wireframes: Welche Funktionen und Inhalte gibt es?
Wie sie auf den einzelnen Seiten angeordnet?
Sitemap: Wo sind welche Inhalte in der Hierarchie
der Website verortet?

21. 21
Das Ende meines Vortrags ist nah
Ich möchte nur noch ein Fazit ziehen:

22. 22
Erinnern wir uns an die Chaos Applikation vom
Anfang und wie diese entstanden ist
Wenn nun kein Aufblähen während Entwicklung,
sondern sorgfältige Planung eines Conceptual
Designers im Vorfeld:
Dann die Reduktion auf die wesentlichen
Kernfeatures und diese einfach benutzbar machen

23. 23
Dann überrascht das Ergebnis vielleicht durch
Schlichtheit
Schließen möchte ich Zitat

24. „Probleme kann man niemals
mit der Denkweise lösen,
mit der sie entstanden sind.“
– Albert Einstein
24
Dankeschön!
Eine kurze Sache noch:

25. FOLIEN IM NETZ
www.andreas-demmer.de
25
Folien ab morgen Mittag im Blog meiner Website
Mit Anmerkungen
Verlinkung im Web Montag Wiki