0
Design für
Nicht-Designer.
Lennart  Hennigs  
UX  Day  Mannheim,  24.10.2013  
Vicco	
  von	
  Bülow,	
  1978.	
  

Sie  sind  wohl  Designer,  was?  
Niemand versteht uns...
Sidney	
  Harris	
  –	
  From	
  “What's	
  so	
  Funny	
  about	
  Science”,	
  1977.	
  
“Wir vertreten die
Interessen der Nutzer.“
hEp://www.flickr.com/photos/faasdant/3510772523/

Braun SK 6!
Der Scheewittchensarg!
Zehn Thesen für gutes Design. 

Dieter Rams.
1.  Gutes Design ist innovativ. !
2.  Gutes Design macht ein Produkt brauchba...
…weil wir’s falsch
machen!
http://www.flickr.com/photos/photography-andreas/

Wir müssen über
den „Tellerrand” schauen.
usable ≠ erfolgreich
User Experience	


Technology	


Business	


Aspekte erfolgreicher Produkte.
IDEO	
  –	
  Human	
  Centered	
  Design	
  T...
http://www.flickr.com/photos/hoyvinmayvin/

Interdisziplinäre
Zusammenarbeit.
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.
§  Anforderunge...
hEp://shaEered-­‐black-­‐rose.deviantart.com/art/Wicked-­‐wallpaper-­‐38452670	
  

P ROBLEMS
Horst	
  RiEel	
  and	
  Mel...
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 ...
Diese Schritte sollten
unsere
Best Practices sein.
Was fange ich
damit an?
1.

Definiere eine gemeinsame Vision.

hEp://www.flickr.com/photos/hoyvinmayvin/	
  
Dilbert’s	
  Mission	
  Statement	
  Generator	
  

Aber bitte nicht so.
METRO IS OUR DESIGN
ETRO
LANGUAGE. WE CALL IT
METRO BECAUSE IT’S
MODERN AND CLEAN. IT’S
FAST AND IN MOTION. IT’S
ABOUT CON...
Metro

Chad	
  Roberts,	
  Michael	
  Smuga,	
  Albert	
  Shum	
  –	
  Windows	
  Phone	
  UI	
  and	
  Design	
  Language...
hEp://www.flickr.com/photos/hoyvinmayvin/4833003019/	
  

The Elevator Pitch.
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.
§  …...
2.

Leite Design Prinzipien ab.

www.thebricktestament.com	
  
IBM Design Principles.
1. 

Concepts from the product's subject domain should
be central and apparent in the software desi...
METRO IS OUR DESIGN
ETRO
LANGUAGE. WE CALL IT
METRO BECAUSE IT’S
MODERN AND CLEAN. IT’S
FAST AND IN MOTION. IT’S
ABOUT CON...
Principles
Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital

Chad	
...
Principle: Clean, Light, Open, Fast
Feels Fast and Responsive
Focus on Primary Tasks
Do a Lot with Very Little
Fierce Redu...
generische  

Projekt-­spezifische  

Design Prinzipien ≠ Design Prinzipien
Zehn Thesen für gutes Design. 

Dieter Rams.
1.  Gutes Design ist innovativ. !
2.  Gutes Design macht ein Produkt brauchba...
Take-­aways.

Gute Design Prinzipien…
§ 

...sind Projekt spezifisch.

§ 

...beschreiben die angestrebte User Experienc...
3.

Dokumentiere Ideen und
kommuniziere sie.

hEp://www.flickr.com/photos/hoyvinmayvin//	
  
So sehen unsere Spezifikationen für
„normale Menschen“ aus.
hEp://www.flickr.com/photos/cannedtuna/	
  

Sie sind nicht wirklich „usable“.
Fangt nicht so an…
…sondern so.
Take-­aways.  

Sketching.
§  Skizzen helfen das Problem zu verstehen.
§  ...während man an der Lösung arbeitet.
§  Sie...
4.

Binde Stakeholder ein.

hEp://www.flickr.com/photos/hoyvinmayvin//	
  
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 arbeit...
Design Studio.
5.

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

Mache kleine Schritte,
überprüfe dein Ergebnis und iteriere.
hEp://www.flickr.com/photos/oEerman/5253602842/	
  

Design findet nicht
im luftleeren Raum statt.
Gutes Design
braucht Kooperation.
…und nur fünf
Schritte:
1.

Definiert eine gemeinsame Vision

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

Leitet Design Prinzipien ab.
3.

Dokumentiert Ideen und
kommuniziert sie.

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

Bindet Stakeholder ein.

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

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

Macht kleine Schritte,
überprüft euer Ergebnis und iterier.
Vorteile?
http://www.flickr.com/photos/psmania//

Diese Schritte lassen sich einfach
und schnell umsetzen.
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.
lennart.hennigs@telekom.de!
!
@LennartHennigs!

.T…

http://www.telekom.com/design!
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Design für Nicht-Designern @ UX-Day Mannheim
Upcoming SlideShare
Loading in...5
×

Design für Nicht-Designern @ UX-Day Mannheim

1,047

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,047
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Design für Nicht-Designern @ UX-Day Mannheim"

  1. 1. Design für Nicht-Designer. Lennart  Hennigs   UX  Day  Mannheim,  24.10.2013  
  2. 2. Vicco  von  Bülow,  1978.   Sie  sind  wohl  Designer,  was?  
  3. 3. Niemand versteht uns...
  4. 4. Sidney  Harris  –  From  “What's  so  Funny  about  Science”,  1977.  
  5. 5. “Wir vertreten die Interessen der Nutzer.“
  6. 6. hEp://www.flickr.com/photos/faasdant/3510772523/ Braun SK 6! Der Scheewittchensarg!
  7. 7. 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  
  8. 8. …weil wir’s falsch machen!
  9. 9. http://www.flickr.com/photos/photography-andreas/ Wir müssen über den „Tellerrand” schauen.
  10. 10. usable ≠ erfolgreich
  11. 11. User Experience Technology Business Aspekte erfolgreicher Produkte. IDEO  –  Human  Centered  Design  Toolkit.  
  12. 12. http://www.flickr.com/photos/hoyvinmayvin/ Interdisziplinäre Zusammenarbeit.
  13. 13. Gutes Design braucht Kooperation.
  14. 14. Bill  Buxton  –  Sketching  User  Experiences.  
  15. 15. Deborah  Mayhew  –  The  Usability  Engineering  Lifecycle.  
  16. 16. hEp://www.flickr.com/photos/legofenris/5297917346/   ...auf einmal waren wir mitten drin.
  17. 17. hEp://www.flickr.com/photos/hoyvinmayvin/   Ein typisches Projekt?
  18. 18. 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. ?
  19. 19. hEp://shaEered-­‐black-­‐rose.deviantart.com/art/Wicked-­‐wallpaper-­‐38452670   P ROBLEMS Horst  RiEel  and  Melvin  Webber,  1973.    
  20. 20. Und nun?
  21. 21. Bösartige Probleme sind „leicht” zu lösen...
  22. 22. 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.  
  23. 23. Diese Schritte sollten unsere Best Practices sein.
  24. 24. Was fange ich damit an?
  25. 25. 1. Definiere eine gemeinsame Vision. hEp://www.flickr.com/photos/hoyvinmayvin/  
  26. 26. Dilbert’s  Mission  Statement  Generator   Aber bitte nicht so.
  27. 27. METRO IS OUR DESIGN ETRO 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.
  28. 28. Metro Chad  Roberts,  Michael  Smuga,  Albert  Shum  –  Windows  Phone  UI  and  Design  Language.  
  29. 29. hEp://www.flickr.com/photos/hoyvinmayvin/4833003019/   The Elevator Pitch.
  30. 30. hEp://www.flickr.com/photos/hoyvinmayvin/   “Design the Box“ Exercise.
  31. 31. Take-­aways. Eine gute Produkt Vision... §  …wird gemeinsam vor Projektstart erstellt. §  …baut Team-Wissen auf. §  …dokumentiert und kommuniziert ein gemeinsames Ziel. §  …bezieht Position.
  32. 32. 2. Leite Design Prinzipien ab. www.thebricktestament.com  
  33. 33. 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.  Keep your users informed and in control by providing informative and timely feedback tailored to the current situation. 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. Be flexible. 7.  10.  8.  9.  Things that look the same should behave in the same way, and an action should always produce the same 16.  result. Provide the ability to undo and redo actions. 17.  Bring objects to life through good visual design. Create user interfaces that promote clarity and visual simplicity. hEp://bit.ly/prinicples  
  34. 34. METRO IS OUR DESIGN ETRO 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.  
  35. 35. 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.  
  36. 36. 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.  
  37. 37. generische   Projekt-­spezifische   Design Prinzipien ≠ Design Prinzipien
  38. 38. 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  
  39. 39. Take-­aways. Gute Design Prinzipien… §  ...sind Projekt spezifisch. §  ...beschreiben die angestrebte User Experience. §  ...inspirieren. §  ...helfen bei Design-Entscheidungen.
  40. 40. 3. Dokumentiere Ideen und kommuniziere sie. hEp://www.flickr.com/photos/hoyvinmayvin//  
  41. 41. So sehen unsere Spezifikationen für „normale Menschen“ aus.
  42. 42. hEp://www.flickr.com/photos/cannedtuna/   Sie sind nicht wirklich „usable“.
  43. 43. Fangt nicht so an…
  44. 44. …sondern so.
  45. 45. Take-­aways.   Sketching. §  Skizzen helfen das Problem zu verstehen. §  ...während man an der Lösung arbeitet. §  Sie sind schnell anzufertigen und wegzuwerfen.
  46. 46. 4. Binde Stakeholder ein. hEp://www.flickr.com/photos/hoyvinmayvin//  
  47. 47. Macht eure Ergebnisse greifbar.
  48. 48. Zeigt das große Ganze.
  49. 49. 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.
  50. 50. Design Studio.
  51. 51. 5. hEp://www.flickr.com/photos/jeffgamble/   Mache kleine Schritte, überprüfe dein Ergebnis und iteriere.
  52. 52. hEp://www.flickr.com/photos/oEerman/5253602842/   Design findet nicht im luftleeren Raum statt.
  53. 53. Gutes Design braucht Kooperation.
  54. 54. …und nur fünf Schritte:
  55. 55. 1. Definiert eine gemeinsame Vision hEp://www.flickr.com/photos/hoyvinmayvin/  
  56. 56. 2. Leitet Design Prinzipien ab.
  57. 57. 3. Dokumentiert Ideen und kommuniziert sie. hEp://www.flickr.com/photos/hoyvinmayvin//  
  58. 58. 4. Bindet Stakeholder ein. hEp://www.flickr.com/photos/hoyvinmayvin//  
  59. 59. 5. hEp://www.flickr.com/photos/jeffgamble/   Macht kleine Schritte, überprüft euer Ergebnis und iterier.
  60. 60. Vorteile?
  61. 61. http://www.flickr.com/photos/psmania// Diese Schritte lassen sich einfach und schnell umsetzen.
  62. 62. Sie liefern greifbare Ergebnisse.
  63. 63. http://www.flickr.com/photos/jeremymates/ Und sie sind „Menschen freundlich“.
  64. 64. Design für Nicht-Designer.
  65. 65. Design mit Nicht-Designern.
  66. 66. Dankeschön.
  67. 67. lennart.hennigs@telekom.de! ! @LennartHennigs! .T… http://www.telekom.com/design!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×