20
Interface Design Walter Jenner | http://valderama.net

Interface Design, Walter Jenner

Embed Size (px)

Citation preview

Page 1: Interface Design, Walter Jenner

Interface Design

Walter Jenner | http://valderama.net

Page 2: Interface Design, Walter Jenner

3 Qualitäten nach Vitruv

- Firmitas (Festigkeit)

- Utilitas (Nützlichkeit)

- Venustas (Schönheit)

(Römischer Architekt, 1. Jht. vor Christus)

Page 3: Interface Design, Walter Jenner

Interface Design

- Benutzbarkeit

- Usability

(in dieser Präsentation)

Page 4: Interface Design, Walter Jenner

Design spielt sich zwischen

Tradition & Transzendenz ab.

Pelle Ehn: Work-oriented design of computer artifacts. Arbetslivscentrum, Stockholm, 1988. (PDF: http://www.diva-portal.org/smash/get/diva2:580037/FULLTEXT02)

Page 5: Interface Design, Walter Jenner

Tradition & Transzendenz

„Querty“ Keyboard Layout from Christopher Sholes, 1870s

Page 6: Interface Design, Walter Jenner

Tradition & Transzendenz

Wo in diesem Text ist ein Link? !

Ists der fettgedruckte Teil oder doch der schräggestellte? Ists der pinke, der

grüne, oder der graue?!!

Oder ist vielleicht doch der blaue unterstrichene Text ein Link?

Page 7: Interface Design, Walter Jenner

Tradition & Transzendenz

Smartphone mit Touch-Interface

Page 8: Interface Design, Walter Jenner

Tradition & Transzendenz

- Neue Navigationspattern

- zB Hamburger Icon, Off Canvas Menüs

- Swipe Gesten zum Blättern

- Einfachere Layouts und Ästhetik (Flat Design?)

Innovationen in der Webgestaltung

Page 9: Interface Design, Walter Jenner

Erlernbarkeit

- Konsistenz

- Vermeiden von Widersprüchen

- Selbsterklärende Elemente

- Einfach

Page 10: Interface Design, Walter Jenner

Konsistenz

- Festes Set an Interaktionselementen (Pattern)

- Durchgängige Verwendung von Labels

- Buttons immer gleich positionieren

- Bei neuen Elementen: Widersprüche vermeiden

Page 11: Interface Design, Walter Jenner

Konsistenz

- Drupal 8 Style Guide

https://groups.drupal.org/node/283223 https://drupal.org/ui-standards

- iOS Human Interface Guidelineshttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Page 12: Interface Design, Walter Jenner

Verständliche Elemente

http://www.medien.ifi.lmu.de/fileadmin/mimuc/mmi_ws0506/essays/uebung2-holzer.html

„Affordance“ - die Fähigkeit eines Objekts sich selbst zu erklären

http://alistapart.com/article/flat-ui-and-forms

Page 13: Interface Design, Walter Jenner

Einfachkeit

- Weniger ist mehr

- Dem Benutzer Entscheidungen abnehmen

Page 14: Interface Design, Walter Jenner

Mentale ModelleUnbewusstes schnelles Verstehen

„Don’t make me think“

Page 15: Interface Design, Walter Jenner

Gestaltgesetze

Page 16: Interface Design, Walter Jenner

Animationen

http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity

Page 17: Interface Design, Walter Jenner

Animationen

http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity

Page 18: Interface Design, Walter Jenner

Zusammenfassung

- Erlernbarkeit

- Tradition & Transzendenz

- Konsistenz

- Affordances

- Mentale Modelle

Page 19: Interface Design, Walter Jenner

–Bruce Mau

„In fact, the secret ambition of design is to become invisible, to be taken up into the culture, absorbed into the background.

The highest order of success in design is to achieve ubiquity, to become banal.“

Page 20: Interface Design, Walter Jenner

–Alan Cooper

„If we want users to like our software we should design it to behave like a likeable

person: respectful, generous and helpful.“