Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
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
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