Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

description

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

Transcript of Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

Page 1: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

1

ANDREAS DEMMERTechnical Director · BARTENBACH AG

Vorstellung Technischer Leiter der BARTENBACH AG 360 Grad Werbeagentur in Mainz beschäftigt 100 Mitarbeiter

Page 2: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

2

WIREFRAMES & CO.Conceptual Design als Projektbaustein

Thema nennen Dauer des Vortrags: 10-15 Minuten

Page 3: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 4: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

4

EINE TYPISCHEGOOGLE-APPLIKATION

Google ist der Inbegriff von Erfolg

Page 5: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

Reduktion auf das Wesentliche Einfache Bedienung schnörkellos

5

SUCHE

Page 6: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

6

EINE TYPISCHESAPPLE-PRODUKT

Auch Apple ist sehr erfolgreicher Player am Markt

Page 7: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

7

TOUCH

wieder: aufgeräumt strukturiert Reduktion aufs Wesentliche

Page 8: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

8

EINE TYPISCHEDURCHSCHNITTS-

APPLIKATION

Leider sieht Gros der Anwendungen anders aus

Page 9: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

9

völlig überfrachtetunübersichtlichFunktionen die keiner braucht oder versteht

Wie kann es dazu kommen?

Page 10: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 11: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 12: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

12

FEATURE-INFLATION

Das Resultat: Viele Features, die keiner brauchtKernfeatures treten in den Hintergrund

Page 13: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

13

CHAOS!

Anwendung sieht aus, als hätte eine Bombe eingeschlagen

Unordentlich, überfrachtet Man nutzt solche Seiten nicht gerne

Page 14: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 15: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

15

CONCEPTUAL DESIGNER

Der Beruf des Conceptual Designers, auch: Informationsarchitekt Planner Konzepter, Konzeptioner

strukturiert Projekt im Vorfeld plant Umfang, Features und Interface

Page 16: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 17: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

17

KONZEPT DESIGN CODEIDEE

Conceptual Design betrifft (nicht nur) das Konzept

Page 18: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 19: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 20: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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?

Page 21: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

21

Das Ende meines Vortrags ist nah

Ich möchte nur noch ein Fazit ziehen:

Page 22: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

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

Page 23: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

23

Dann überrascht das Ergebnis vielleicht durch Schlichtheit

Schließen möchte ich Zitat

Page 24: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

24

„Probleme kann man niemalsmit der Denkweise lösen,mit der sie entstanden sind.“

– Albert Einstein

Dankeschön!

Eine kurze Sache noch:

Page 25: Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen

25

FOLIEN IM NETZwww.andreas-demmer.de

Folien ab morgen Mittag im Blog meiner Website Mit Anmerkungen

Verlinkung im Web Montag Wiki