design für nicht-designern @ ux-day mannheim

76
Design für Nicht-Designer. Lennart Hennigs UX Day Mannheim, 24.10.2013

Upload: lennart-hennigs

Post on 27-Jan-2015

106 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Design für Nicht-Designern @ UX-Day Mannheim

Design für Nicht-Designer.

Lennart  Hennigs  UX  Day  Mannheim,  24.10.2013  

Page 2: Design für Nicht-Designern @ UX-Day Mannheim

Sie  sind  wohl  Designer,  was?  Vicco  von  Bülow,  1978.  

Page 3: Design für Nicht-Designern @ UX-Day Mannheim

Niemand versteht uns...

Page 4: Design für Nicht-Designern @ UX-Day Mannheim

Sidney  Harris  –  From  “What's  so  Funny  about  Science”,  1977.  

Page 5: Design für Nicht-Designern @ UX-Day Mannheim

“Wir vertreten die Interessen der Nutzer.“

Page 6: Design für Nicht-Designern @ UX-Day Mannheim

Braun SK 6!Der Scheewittchensarg!

hEp://www.flickr.com/photos/faasdant/3510772523/  

Page 7: Design für Nicht-Designern @ UX-Day Mannheim

Zehn Thesen für gutes Design. Dieter Rams.

1.  Gutes Design ist innovativ. !2.  Gutes Design macht ein Produkt brauchbar.!

3.  Gutes Design ist ästhetisch.!

4.  Gutes Design macht ein Produkt verständlich.!

5.  Gutes Design ist unaufdringlich.!

6.  Gutes Design ist ehrlich. ! !!

7.  Gutes Design ist langlebig.!

8.  Gutes Design ist konsequent bis ins letzte Detail.!

9.  Gutes Design ist umweltfreundlich.!

10. Gutes Design ist so wenig Design wie möglich.!

hEps://www.vitsoe.com/de/ueber-­‐vitsoe/gutes-­‐design  

Page 8: Design für Nicht-Designern @ UX-Day Mannheim

…weil wir’s falsch machen!

Page 9: Design für Nicht-Designern @ UX-Day Mannheim
Page 10: Design für Nicht-Designern @ UX-Day Mannheim
Page 11: Design für Nicht-Designern @ UX-Day Mannheim

Wir müssen über den „Tellerrand” schauen.

http://www.flickr.com/photos/photography-andreas/

Page 12: Design für Nicht-Designern @ UX-Day Mannheim

usable ≠ erfolgreich

Page 13: Design für Nicht-Designern @ UX-Day Mannheim

IDEO  –  Human  Centered  Design  Toolkit.  

Technology Business

User Experience

Aspekte erfolgreicher Produkte.

Page 14: Design für Nicht-Designern @ UX-Day Mannheim

Interdisziplinäre Zusammenarbeit.

http://www.flickr.com/photos/hoyvinmayvin/

Page 15: Design für Nicht-Designern @ UX-Day Mannheim

Gutes Design braucht Kooperation.

Page 16: Design für Nicht-Designern @ UX-Day Mannheim

Bill  Buxton  –  Sketching  User  Experiences.  

Page 17: Design für Nicht-Designern @ UX-Day Mannheim

Deborah  Mayhew  –  The  Usability  Engineering  Lifecycle.  

Page 18: Design für Nicht-Designern @ UX-Day Mannheim
Page 19: Design für Nicht-Designern @ UX-Day Mannheim
Page 20: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/legofenris/5297917346/  

...auf einmal waren wir mitten drin.

Page 21: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/hoyvinmayvin/  

Ein typisches Projekt?

Page 22: Design für Nicht-Designern @ UX-Day Mannheim

Ein typisches Projekt?

§  Viele Stakeholder.

§  ...mit unterschiedlichen Vorstellungen und Prioritäten.

§  Anforderungen sind komplex und miteinander verwoben.

§  Das Problem ändert sich.

§  Es ist „einmalig“.

§  Es gibt im Voraus keinen Hinweis, was eine optimale Lösung ist.

?

Page 23: Design für Nicht-Designern @ UX-Day Mannheim

PROBLEMS

hEp://shaEered-­‐black-­‐rose.deviantart.com/art/Wicked-­‐wallpaper-­‐38452670  

Horst  RiEel  and  Melvin  Webber,  1973.    

Page 24: Design für Nicht-Designern @ UX-Day Mannheim

Und nun?

Page 25: Design für Nicht-Designern @ UX-Day Mannheim

Bösartige Probleme sind „leicht” zu lösen...

Page 26: Design für Nicht-Designern @ UX-Day Mannheim
Page 27: Design für Nicht-Designern @ UX-Day Mannheim

Bei bösartigen Problemen...

1.  Definiere eine gemeinsame Vision.

2.  Dokumentiere Ideen und kommuniziere sie.

3.  Binde Stakeholder ein.

4.  Mache kleine Schritte, überprüfe dein Ergebnis und iteriere.

John  C.  Camillus  –  Strategy  as  a  Wicked  Problem,  2008.  

Page 28: Design für Nicht-Designern @ UX-Day Mannheim

Diese Schritte sollten unsere

Best Practices sein.

Page 29: Design für Nicht-Designern @ UX-Day Mannheim

Was fange ich damit an?

Page 30: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/hoyvinmayvin/  

1.

Definiere eine gemeinsame Vision.

Page 31: Design für Nicht-Designern @ UX-Day Mannheim

Aber bitte nicht so.

Dilbert’s  Mission  Statement  Generator  

Page 32: Design für Nicht-Designern @ UX-Day Mannheim

ETRO METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.

Page 33: Design für Nicht-Designern @ UX-Day Mannheim

Metro

Chad  Roberts,  Michael  Smuga,  Albert  Shum  –  Windows  Phone  UI  and  Design  Language.  

Page 34: Design für Nicht-Designern @ UX-Day Mannheim

The Elevator Pitch.

hEp://www.flickr.com/photos/hoyvinmayvin/4833003019/  

Page 35: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/hoyvinmayvin/  

“Design the Box“ Exercise.

Page 36: Design für Nicht-Designern @ UX-Day Mannheim

Take-­aways. Eine gute Produkt Vision...

§  …wird gemeinsam vor Projektstart erstellt.

§  …baut Team-Wissen auf.

§  …dokumentiert und kommuniziert ein gemeinsames Ziel.

§  …bezieht Position.

Page 37: Design für Nicht-Designern @ UX-Day Mannheim

Leite Design Prinzipien ab.

2. www.thebricktestament.com  

Page 38: Design für Nicht-Designern @ UX-Day Mannheim

IBM Design Principles.

1.  Concepts from the product's subject domain should be central and apparent in the software design.

2.  Keep it simple.

3.  Optimize the design for the most frequent or important tasks.

4.  Make the interface accessible and visible to users.

5.  Use proper default values when supporting complex tasks.

6.  Be flexible.

7.  Keep your users informed and in control by providing informative and timely feedback tailored to the current situation.

8.  Things that look the same should behave in the same way, and an action should always produce the same result.

9.  Provide the ability to undo and redo actions.

10.  Make your application predictable by using industry standard user interface conventions wherever possible.

11.  Always keep your target users in mind as the product is designed.

12.  Avoid adding features just so they can be ticked off a list.

13.  Design your user interface so that it can be localized for other geographies without redesigning the interface.

14.  Consider persons with disabilities when designing your applications.

15.  Design the application so that contextual help is available to users when they need it.

16.  Bring objects to life through good visual design.

17.  Create user interfaces that promote clarity and visual simplicity.

hEp://bit.ly/prinicples  

Page 39: Design für Nicht-Designern @ UX-Day Mannheim

ETRO METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.

Chad  Roberts,  Michael  Smuga,  Albert  Shum  –  Windows  Phone  UI  and  Design  Language.  

Page 40: Design für Nicht-Designern @ UX-Day Mannheim

Principles

Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital

Chad  Roberts,  Michael  Smuga,  Albert  Shum  –  Windows  Phone  UI  and  Design  Language.  

Page 41: Design für Nicht-Designern @ UX-Day Mannheim

Principle: Clean, Light, Open, Fast

Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas

Chad  Roberts,  Michael  Smuga,  Albert  Shum  –  Windows  Phone  UI  and  Design  Language.  

Page 42: Design für Nicht-Designern @ UX-Day Mannheim

Design Prinzipien ≠ Design Prinzipien

generische   Projekt-­spezifische  

Page 43: Design für Nicht-Designern @ UX-Day Mannheim
Page 44: Design für Nicht-Designern @ UX-Day Mannheim

Zehn Thesen für gutes Design. Dieter Rams.

1.  Gutes Design ist innovativ. !2.  Gutes Design macht ein Produkt brauchbar.!

3.  Gutes Design ist ästhetisch.!

4.  Gutes Design macht ein Produkt verständlich.!

5.  Gutes Design ist unaufdringlich.!

6.  Gutes Design ist ehrlich. ! !!

7.  Gutes Design ist langlebig.!

8.  Gutes Design ist konsequent bis ins letzte Detail.!

9.  Gutes Design ist umweltfreundlich.!

10. Gutes Design ist so wenig Design wie möglich.!

hEps://www.vitsoe.com/de/ueber-­‐vitsoe/gutes-­‐design  

Page 45: Design für Nicht-Designern @ UX-Day Mannheim

Take-­aways. Gute Design Prinzipien…

§  ...sind Projekt spezifisch.

§  ...beschreiben die angestrebte User Experience.

§  ...inspirieren.

§  ...helfen bei Design-Entscheidungen.

Page 46: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/hoyvinmayvin//  

Dokumentiere Ideen und kommuniziere sie.

3.

Page 47: Design für Nicht-Designern @ UX-Day Mannheim

So sehen unsere Spezifikationen für „normale Menschen“ aus.

Page 48: Design für Nicht-Designern @ UX-Day Mannheim

Sie sind nicht wirklich „usable“.

hEp://www.flickr.com/photos/cannedtuna/  

Page 49: Design für Nicht-Designern @ UX-Day Mannheim

Fangt nicht so an…

Page 50: Design für Nicht-Designern @ UX-Day Mannheim

…sondern so.

Page 51: Design für Nicht-Designern @ UX-Day Mannheim

Take-­aways.  Sketching.

§  Skizzen helfen das Problem zu verstehen.

§  ...während man an der Lösung arbeitet.

§  Sie sind schnell anzufertigen und wegzuwerfen.

Page 52: Design für Nicht-Designern @ UX-Day Mannheim

Binde Stakeholder ein.

hEp://www.flickr.com/photos/hoyvinmayvin//  

4.

Page 53: Design für Nicht-Designern @ UX-Day Mannheim

Macht eure Ergebnisse greifbar.

Page 54: Design für Nicht-Designern @ UX-Day Mannheim

Zeigt das große Ganze.

Page 55: Design für Nicht-Designern @ UX-Day Mannheim

Take-­aways.  Sketching - Part 2.  

§  Skizzen helfen das Problem zu verstehen.

§  ...während man an der Lösung arbeitet.

§  Sie sind schnell anzufertigen und wegzuwerfen.

§  Konzepte können früher gezeigt und diskutiert werden.

§  Skizzen sehen unfertig aus.

§  Auch Nicht-Designer können einen Stift halten.

Page 56: Design für Nicht-Designern @ UX-Day Mannheim

Design Studio.

Page 57: Design für Nicht-Designern @ UX-Day Mannheim

Mache kleine Schritte, überprüfe dein Ergebnis und iteriere.

hEp://www.flickr.com/photos/jeffgamble/  

5.

Page 58: Design für Nicht-Designern @ UX-Day Mannheim
Page 59: Design für Nicht-Designern @ UX-Day Mannheim
Page 60: Design für Nicht-Designern @ UX-Day Mannheim
Page 61: Design für Nicht-Designern @ UX-Day Mannheim

Design findet nicht im luftleeren Raum statt.

hEp://www.flickr.com/photos/oEerman/5253602842/  

Page 62: Design für Nicht-Designern @ UX-Day Mannheim

Gutes Design braucht Kooperation.

Page 63: Design für Nicht-Designern @ UX-Day Mannheim

…und nur fünf Schritte:

Page 64: Design für Nicht-Designern @ UX-Day Mannheim

Definiert eine gemeinsame Vision

hEp://www.flickr.com/photos/hoyvinmayvin/  

1.

Page 65: Design für Nicht-Designern @ UX-Day Mannheim

Leitet Design Prinzipien ab.

2.

Page 66: Design für Nicht-Designern @ UX-Day Mannheim

hEp://www.flickr.com/photos/hoyvinmayvin//  

Dokumentiert Ideen und kommuniziert sie.

3.

Page 67: Design für Nicht-Designern @ UX-Day Mannheim

Bindet Stakeholder ein.

hEp://www.flickr.com/photos/hoyvinmayvin//  

4.

Page 68: Design für Nicht-Designern @ UX-Day Mannheim

Macht kleine Schritte, überprüft euer Ergebnis und iterier.

hEp://www.flickr.com/photos/jeffgamble/  

5.

Page 69: Design für Nicht-Designern @ UX-Day Mannheim

Vorteile?

Page 70: Design für Nicht-Designern @ UX-Day Mannheim

Diese Schritte lassen sich einfach und schnell umsetzen.

http://www.flickr.com/photos/psmania//

Page 71: Design für Nicht-Designern @ UX-Day Mannheim

Sie liefern greifbare Ergebnisse.

Page 72: Design für Nicht-Designern @ UX-Day Mannheim

http://www.flickr.com/photos/jeremymates/

Und sie sind „Menschen freundlich“.

Page 73: Design für Nicht-Designern @ UX-Day Mannheim

Design für Nicht-Designer.

Page 74: Design für Nicht-Designern @ UX-Day Mannheim

Design mit Nicht-Designern.

Page 75: Design für Nicht-Designern @ UX-Day Mannheim

Dankeschön.

Page 76: Design für Nicht-Designern @ UX-Day Mannheim

T . …

[email protected]!!

@LennartHennigs!

http://www.telekom.com/design!