1
ANDREAS DEMMERTechnical Director · BARTENBACH AG
Vorstellung Technischer Leiter der BARTENBACH AG 360 Grad Werbeagentur in Mainz beschäftigt 100 Mitarbeiter
2
WIREFRAMES & CO.Conceptual Design als Projektbaustein
Thema nennen Dauer des Vortrags: 10-15 Minuten
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 TYPISCHEGOOGLE-APPLIKATION
Google ist der Inbegriff von Erfolg
Reduktion auf das Wesentliche Einfache Bedienung schnörkellos
5
SUCHE
6
EINE TYPISCHESAPPLE-PRODUKT
Auch Apple ist sehr erfolgreicher Player am Markt
7
TOUCH
wieder: aufgeräumt strukturiert Reduktion aufs Wesentliche
8
EINE TYPISCHEDURCHSCHNITTS-
APPLIKATION
Leider sieht Gros der Anwendungen anders aus
9
völlig überfrachtetunübersichtlichFunktionen die keiner braucht oder versteht
Wie kann es dazu kommen?
10
DAS PROBLEM(und es trifft uns alle)
Die Erklärung dieses Problems Problem tritt uns alle Jeder hat es wahrscheinlich schon erlebt
Auftrag: Mach eine einfache Such-Applikation
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
Das Resultat: Viele Features, die keiner brauchtKernfeatures treten in den Hintergrund
13
CHAOS!
Anwendung sieht aus, als hätte eine Bombe eingeschlagen
Unordentlich, überfrachtet Man nutzt solche Seiten nicht gerne
14
DIE LÖSUNGDER LÖSUNGSANSATZ
Die Lösung, dem vorzubeugen gibt es nicht Es gibt kein 100% sicheres Mittel → Lösung zu
vollmundig Eher Lösungsansatz
15
CONCEPTUAL DESIGNER
Der Beruf des Conceptual Designers, auch: Informationsarchitekt Planner Konzepter, Konzeptioner
strukturiert Projekt im Vorfeld plant Umfang, Features und Interface
16
1 2 3 4KONZEPT DESIGN CODEIDEE
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
KONZEPT DESIGN CODEIDEE
Conceptual Design betrifft (nicht nur) das Konzept
18
INFORMATIONSARCHITEKTUR USABILITY
USEREXPERIENCE
USER CENTERED DESIGN
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 IMMITTELPUNKT
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
USE CASESPERSONAS
STORY-BOARD
RESEARCH
WIRE-FRAMES
SITEMAP
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
Das Ende meines Vortrags ist nah
Ich möchte nur noch ein Fazit ziehen:
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
Dann überrascht das Ergebnis vielleicht durch Schlichtheit
Schließen möchte ich Zitat
24
„Probleme kann man niemalsmit der Denkweise lösen,mit der sie entstanden sind.“
– Albert Einstein
Dankeschön!
Eine kurze Sache noch:
25
FOLIEN IM NETZwww.andreas-demmer.de
Folien ab morgen Mittag im Blog meiner Website Mit Anmerkungen
Verlinkung im Web Montag Wiki