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

Design für Nicht-Designer.

Lennart  Hennigs  UX  Day  Mannheim,  24.10.2013  

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

Niemand versteht uns...

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

“Wir vertreten die Interessen der Nutzer.“

Braun SK 6!Der Scheewittchensarg!

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

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  

…weil wir’s falsch machen!

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

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

usable ≠ erfolgreich

IDEO  –  Human  Centered  Design  Toolkit.  

Technology Business

User Experience

Aspekte erfolgreicher Produkte.

Interdisziplinäre Zusammenarbeit.

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

Gutes Design braucht Kooperation.

Bill  Buxton  –  Sketching  User  Experiences.  

Deborah  Mayhew  –  The  Usability  Engineering  Lifecycle.  

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

...auf einmal waren wir mitten drin.

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

Ein typisches Projekt?

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.

?

PROBLEMS

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

Horst  RiEel  and  Melvin  Webber,  1973.    

Und nun?

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

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.  

Diese Schritte sollten unsere

Best Practices sein.

Was fange ich damit an?

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

1.

Definiere eine gemeinsame Vision.

Aber bitte nicht so.

Dilbert’s  Mission  Statement  Generator  

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.

Metro

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

The Elevator Pitch.

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

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

“Design the Box“ Exercise.

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

§  …wird gemeinsam vor Projektstart erstellt.

§  …baut Team-Wissen auf.

§  …dokumentiert und kommuniziert ein gemeinsames Ziel.

§  …bezieht Position.

Leite Design Prinzipien ab.

2. www.thebricktestament.com  

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  

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.  

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.  

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.  

Design Prinzipien ≠ Design Prinzipien

generische   Projekt-­spezifische  

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  

Take-­aways. Gute Design Prinzipien…

§  ...sind Projekt spezifisch.

§  ...beschreiben die angestrebte User Experience.

§  ...inspirieren.

§  ...helfen bei Design-Entscheidungen.

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

Dokumentiere Ideen und kommuniziere sie.

3.

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

Sie sind nicht wirklich „usable“.

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

Fangt nicht so an…

…sondern so.

Take-­aways.  Sketching.

§  Skizzen helfen das Problem zu verstehen.

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

§  Sie sind schnell anzufertigen und wegzuwerfen.

Binde Stakeholder ein.

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

4.

Macht eure Ergebnisse greifbar.

Zeigt das große Ganze.

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.

Design Studio.

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

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

5.

Design findet nicht im luftleeren Raum statt.

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

Gutes Design braucht Kooperation.

…und nur fünf Schritte:

Definiert eine gemeinsame Vision

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

1.

Leitet Design Prinzipien ab.

2.

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

Dokumentiert Ideen und kommuniziert sie.

3.

Bindet Stakeholder ein.

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

4.

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

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

5.

Vorteile?

Diese Schritte lassen sich einfach und schnell umsetzen.

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

Sie liefern greifbare Ergebnisse.

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

Und sie sind „Menschen freundlich“.

Design für Nicht-Designer.

Design mit Nicht-Designern.

Dankeschön.

T . …

lennart.hennigs@telekom.de!!

@LennartHennigs!

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