Du bis nicht der Benutzer! … sondern sie... oder sie...

Präsentation zum Thema: "Du bis nicht der Benutzer! … sondern sie... oder sie..."—  Präsentation transkript:

1

2 Du bis nicht der Benutzer!

3 … sondern sie...

4 oder sie...

5 … oder gar sie.

6 Beschäftige Dich mit Menschen, die nicht 8 Stunden am Tag einen Computer bedienen

7 Benutzermodell

8 Aus Sicht des Benutzers designen

9 Systemmodell

10 Benutzermodell Das Internet besteht aus Kabeln und Leitungen

11 Beziehe die Benutzer mit ein

12 Erstelle Benutzer-Archtypen Ziele, Verhalten und Einstellungen erfassen Personabeschreibung der einzelnen Archetypen

13 Erstelle typische Profile

14 Erstelle Prototypen

15 Teste früh und oft mit Usern

16 Kosten der Fehlerbehebung

17 Sei nicht zufrieden - Mach mehrere Vorschläge - Such nach besseren Lösungen - Der erste Wurf ist nie optimal

18 Ein Designprozess Bestandteile einer Kontoseite: 1.Firmendaten 2.Versicherungsdaten 3.Benutzerdaten 4.Andere Benutzer auf dem Konto 5.Zuständiger Vertriebspartner 6.Aktuelle Vertragsinformationen 7.Link zum Sucheinstellungen ändern 8.Erstellungsdatum

19 Ein Designprozess II Sonstige Informationen: 9.Versicherungsdaten werden selten betrachtet oder geändert 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen 11.Passwort ändern ist die wahrscheinlichste Aktion 12.Leute könnten hier Sucheinstellungen ändern wollen (auf einer anderen Seite)

20 Gruppieren verwandter Teile A 1.Firmendaten 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen B 2.Versicherungsdaten 9.Versicherungsdaten werden selten betrachtet oder geändert 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen C 3.Benutzerdaten 11.Passwort ändern ist die wahrscheinlichste Aktion 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen D 4.Andere Benutzer auf dem Konto 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen E 5.Zuständiger Vertriebspartner F 6.Aktuelle Vertragsinformationen 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen G 8.Erstellungsdatum H 7.Link zum Sucheinstellungen ändern 12.Leute könnten hier Sucheinstellungen ändern wollen (einer anderen Seite)

21 Priorisieren C 3.Benutzerdaten 11.Passwort ändern ist die wahrscheinlichste Aktion 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen A 1.Firmendaten 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen G 8.Erstellungsdatum E 5.Zuständiger Vertriebspartner B 2.Versicherungsdaten 9.Versicherungsdaten werden selten betrachtet oder geändert 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen D 4.Andere Benutzer auf dem Konto 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen F 6.Aktuelle Vertragsinformationen 10.Jeder Benutzer kann alles ändern, außer Benutzerdaten von anderen H 7.Link zum Sucheinstellungen ändern 12.Leute könnten hier Sucheinstellungen ändern wollen (einer anderen Seite) Am Wichtigsten Notwendig Nice to have

22 Teile einzeln designen

23 Die Teile zusammenfügen

24 Szenarios/Storyboards

25 Design-Grundprinzipien ● 80/20-Regel ● 20% der Features machen 80% des Nutzung ● Einfachheit ● KISS - Keep it simple, stupid ● Keep it clear ● Vermeide eine Ablenkung des Benutzers ● Richtiges Verhältniss: Einfachheit/Features ● Erreichbarkeit ● Tastenbedienbarkeit ● Visuellehinweise/Hints ● Redundanz ● Konsistenz ● Gleiches Layout und Terminologie ● Einheitliches Interaktionskonzept / Navigation

26 Design-Grundprinzipien II ● Feedback ● Sofort Feedback an Benutzer geben ● Informiere den Benutzer über aktuelle Zustände ● Vorallem bei Hintergrundaktivitäten ● Toleranz ● Verhindere dass der Benutzer Fehler macht ● Schalte Aktionsflächen bei Bedarf aktiv ● Deaktiviere Aktionsflächen währen der Aktion

27 Gestaltungsprinzipie n ● Ähnlichkeit ● Umgebung ● Abstand / Nachbarschaft ● Kontinuität ● Vervollständigen ● Symmetrie

28 Zu beachten ● Ausrichtung und Linien ● Abstände ● Farbzusammenstellung ● Kontraste ● Farbharmonie ● Behinderungen (Rot/Grün-Blind etc.) ● Zeichensätze ● Effekte

29 Farbschemata ● http://colorschemedesigner.com

30 Farbtheorie Rot ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Rot ist die Farbe des Feuers. ● Sie erregt Aufmerksamkeit, steht für Vitalität und Energie, Liebe und Leidenschaft. ● Sie kann jedoch auch aggressiv und aufwühlend wirken, da sie auch Wut, Zorn und Brutalität verkörpert.

31 Farbtheorie Orange ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Orange ist die Farbe der untergehenden Sonne. ● Sie ist die Symbolfarbe für Optimismus und Lebensfreude. Sie signalisiert Aufgeschlossenheit, Kontaktfreude und Jugendlichkeit, Gesundheit und Selbstvertrauen. ● Sie kann aber auch Leichtlebigkeit, Aufdringlichkeit und Ausschweifung vermitteln und wird in unserer Gesellschaft oft als billig und unseriös empfunden

32 Farbtheorie Gelb ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Gelb ist die Farbe der Sonne. ● Sie vermittelt Licht, Heiterkeit und Freude. Sie steht auch für Wissen, Weisheit, Vernunft und Logik. ● Schmutzige Gelbtöne dagegen vermitteln negative Assoziationen wie Täuschung, Rachsucht, Pessimismus, Egoismus, Geiz und Neid.

33 Farbtheorie Grün ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Grün ist die Farbe der Wiesen und Wälder. ● Sie ist eine beruhigende Farbe. Sie steht für Großzügigkeit, Sicherheit, Harmonie, Hoffnung, Erneuerung des Lebens. ● Sie kann aber auch Gefühle wie Neid, Gleichgültigkeit, Stagnation und Müdigkeit vermitteln.

34 Farbtheorie Cyan ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Cyan, in der Umgangssprache auch Türkis genannt, ist eine frische Farbe. Es ist die Farbe des Meers an einem sonnigen Tag. ● Sie vermittelt Wachheit, Bewußtheit, Klarheit, geistige Offenheit und Freiheit. ● Cyan kann aber auch sehr kühl und distanziert wirken und ein Gefühl von Leere vermitteln.

35 Farbtheorie Blau ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Blau ist eine kühle Farbe. Sie ist die Farbe des Himmels. ● Sie steht für Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht. ● Sie kann aber auch Traumtänzerei, Nachlässigkeit oder Melancholie vermitteln.

36 Farbtheorie Violett ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Violett ist eine würdevolle Farbe. Sie ist die Farbe der Inspiration, der Mystik, Magie und der Kunst. ● Sie ist eine außergewöhnliche, extravagante Farbe, die auch mit Frömmigkeit, Buße und Opferbereitschaft in Verbindung gebracht wird. ● Sie kann aber auch stolz und arrogant oder unmoralisch wirken.

37 Farbtheorie Magenta ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Magenta, im Bereich der Mode auch Pink genannt, ist eine sanfte Farbe. ● In der Natur erleben wir sie hauptsächlich als Farbe von Blüten. Sie steht für Idealismus, Dankbarkeit, Engagement, Ordnung und Mitgefühl. ● Sie hat aber auch etwas von Snobismus, Arroganz und Dominanz.

38 Farbtheorie Weiß ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Weiß ist die Farbe von Eis und Schnee. ● Sie ist ein Symbol der Reinheit, Klarheit, Erhabenheit und Unschuld. ● Sie gilt aber auch als Zeichen der Unnahbarkeit, Empfindsamkeit und kühler Reserviertheit.

39 Farbtheorie Grau ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Grau ist die Farbe des wolkenverhangenen Himmels an einem trüben Tag. ● Sie ist die Farbe vollkommener Neutralität, Vorsicht, Zurückhaltung und Kompromißbereitschaft. ● Sie ist eine unauffällige Farbe, die auch mit Langeweile, Eintönigkeit, Unsicherheit und Lebensangst in Verbindung gebracht wird.

40 Farbtheorie Schwarz ● http://www.ipsi.fraunhofer.de/~crueger/farbe/ ● Farbempfinden: ● Schwarz ist die Farbe der Dunkelheit bzw. Lichtlosigkeit. ● Sie drückt Trauer, Unergründlichkeit, Unabänderlichkeit und das Furchterregende und Geheimnisumwitterte aus. ● Schwarz ist aber auch Ausdruck von Würde und Ansehen und hat einen besonders feierlichen Charakter.