Slide 1

Slide 1 text

UNCONVENTIONAL SoundCloud TechTalk, Berlin, Germany July 7th, 2014 Heather Miller Applying THINKING & PROGRAMMING to DESIGN Principles from

Slide 2

Slide 2 text

UNCONVENTIONAL SoundCloud TechTalk, Berlin, Germany July 7th, 2014 Heather Miller THINKING PROGRAMMING DESIGN + +

Slide 3

Slide 3 text

CONVENTIONAL SoundCloud TechTalk, Berlin, Germany July 7th, 2014 Heather Miller THINKING PROGRAMMING DESIGN

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

BRAUN SK4

Slide 6

Slide 6 text

Uh, WHAT DOES A TURNTABLE HAVE TO DO WITH PROGRAMMING?

Slide 7

Slide 7 text

PRINCIPLES.

Slide 8

Slide 8 text

PRINCIPLES. SPOILER: 10 OF THEM.

Slide 9

Slide 9 text

ANYBODY RECOGNIZE THIS GUY?

Slide 10

Slide 10 text

DIETER RAMS BRAUN CHIEF DESIGN OFFICER , 1961-1995

Slide 11

Slide 11 text

DIETER RAMS BRAUN CHIEF DESIGN OFFICER , 1961-1995 Ulm School of Design, successor to Bauhaus Architect & interior designer by training, 1954. Began work as an architect and interior designer, eventually ending up at Braun. Became chief design officer at Braun from 1961 until 1995. German industrial designer, born 1932, and associated with the functionalist school of industrial design. Gave all Braun products a “new face” in the 50s

Slide 12

Slide 12 text

Ulm School of Design, successor to Bauhaus Architect & interior designer by training, 1954. Began work as an architect and interior designer, eventually ending up at Braun. Became chief design officer at Braun from 1961 until 1995. German industrial designer, born 1932, and associated with the functionalist school of industrial design. DIETER RAMS BRAUN CHIEF DESIGN OFFICER , 1961-1995 Braun was a company that existed in relative obscurity in Germany in the 1950s. By 1960, the “new faces” Rams gave to products had made Braun an internationally renown brand for small electronics.

Slide 13

Slide 13 text

FORM FUNCTION Ironically, Rams follows the “functionalist” style. Post-Bauhaus minimalistic product design and architecture. FOLLOWS Of the persuasion,

Slide 14

Slide 14 text

DIETER RAMS BRAUN CHIEF DESIGN OFFICER , 1961-1995 LESS, BUT BETTER. “ ” Weniger, aber besser. ” “

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

“He demonstrates how simple, accessible, and straightforward good design can be. Something that looks very simple is somehow very desirable even though it might contain very complex technology or complex engineering.” – Deyan Sudjic, Vitsœ of Dieter Rams,

Slide 17

Slide 17 text

“He believes in the abolition of built-in obsolescence. He believed if you analyze the functions and the object carefully enough, you can come up with the optimum set of operating controls. You can make the perfect face for a machine, you give it a form which will outlives fashion. Whole categories of products have been abolished, and yet his machines still have a timelessness.” of Dieter Rams, – Deyan Sudjic, Vitsœ

Slide 18

Slide 18 text

APPLYING THAT TO THE BRAUN SK4

Slide 19

Slide 19 text

APPLYING THAT TO THE BRAUN SK4 Every detail had to have a functional purpose and it was designed to pioneer a new contemporary language of design.

Slide 20

Slide 20 text

APPLYING THAT TO THE BRAUN SK4 Every detail had to have a functional purpose and it was designed to pioneer a new contemporary language of design. Braun became the epitome for honest, functional products and the principles set then are still foundational to helping us (as in designers) fathom what good design truly is.

Slide 21

Slide 21 text

Every detail had to have a functional purpose and it was designed to pioneer a new contemporary language of design. Braun became the epitome for honest, functional products and the principles set then are still foundational to helping us (as in designers) fathom what good design truly is. The controls of the SK55 are all about clarity. Ornamentation is nowhere to be found and everything is designed for ease of use. APPLYING THAT TO THE BRAUN SK4

Slide 22

Slide 22 text

ELSE, THIS IS WHAT PEOPLE WERE BUILDING

Slide 23

Slide 23 text

“The SK series by Braun is our On the Origin of Species. It's the foundation of everything we believe today as creators of objects and experiences.” – Andrew Kim, product designer at Microsoft

Slide 24

Slide 24 text

“The SK series by Braun is our On the Origin of Species. It's the foundation of everything we believe today as creators of objects and experiences.” – Andrew Kim, product designer at Microsoft the 10 principles of good design has become the bible of today’s industrial designers 20 years later, after countless more of his designs continued to hit the market, Dieter Rams founded the 10 principles of good design.

Slide 25

Slide 25 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS INNOVATIVE. 1 MAKES A PRODUCT USEFUL 2 IS AESTHETIC. 3

Slide 26

Slide 26 text

GOOD DESIGN: MAKES A PRODUCT UNDERSTANDABLE IS UNOBSTRUSIVE IS HONEST IS LONG-LASTING IS THOROUGH TO THE LAST DETAIL IS ENVIRONMENTALLY FRIENDLY IS AS LITTLE DESIGN AS POSSIBLE 4 5 6 7 8 9 10

Slide 27

Slide 27 text

SOFTWARE WHY DON’T WE APPROACH THE SAME WAY? Um,

Slide 28

Slide 28 text

IN SOME SENSE UIs MOSTLY. WE DO

Slide 29

Slide 29 text

“Simplicity is the ultimate sophistication.” Jobs had aimed for the simplicity that comes from conquering complexities, not ignoring them. “It takes a lot of hard work, to make something simple, to truly understand the underlying challenges and come up with elegant solutions.” For Jobs it was not about cheap fashion effects. “Fashion is what seems beautiful now but looks ugly later. Art can be ugly at first but it becomes beautiful later.”

Slide 30

Slide 30 text

SOMEWHAT LINES UP WITH ONE MIGHT APPLE FELL TO ARGUE THAT FORM OVER FASHION RAMS’S INTENTIONS

Slide 31

Slide 31 text

SOFTWARE WHY DON’T WE TRY TO BUILD THIS WAY? But,

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

=

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3 The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful. HAMS’S WORDS DESIGN → PROGRAMMING: SOME CODE WE WORK WITH EVERY DAY. “It has an effect on people and their well-being”

Slide 37

Slide 37 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3

Slide 38

Slide 38 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3 “Our goal is that students who complete this subject should have a good feel for the elements of style and the aesthetics of programming. They should have command of the major techniques for controlling complexity in a large system. They should be capable of reading a 50-page-long program, if it is wri en in an exemplary style. They should know what not to read, and what they need not understand at any moment. They should feel secure about modifying a program, retaining the spirit and style of the original author.”

Slide 39

Slide 39 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3 ANOTHER EXAMPLE. Taken from Lutz Prechelt, "An Empirical Comparison of Seven Programming Languages" (2000) •Tested with Tcl, Python, Perl, Rexx, Java, C, C++ •About 100 LOC for scripting languages, 200-300 for others (including Java) •Can we do be er with Scala?

Slide 40

Slide 40 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3 ANOTHER EXAMPLE. Taken from Lutz Prechelt, "An Empirical Comparison of Seven Programming Languages" (2000) •Tested with Tcl, Python, Perl, Rexx, Java, C, C++ •About 100 LOC for scripting languages, 200-300 for others (including Java) •Can we do be er with Scala? RESULT: 61 LOC including comments, code aesthetically pleasing

Slide 41

Slide 41 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS AESTHETIC. 3 ANOTHER EXAMPLE.    val  codeToChars:  Map[Char,  String]  =          Map(              '2'  -­‐>  "ABC",  '3'  -­‐>  "DEF",  '4'  -­‐>  "GHI",  '5'  -­‐>  "JKL",              '6'  -­‐>  "MNO",  '7'  -­‐>  "PQRS",  '8'  -­‐>  "TUV",  '9'  -­‐>  "WXYZ"          )          /**  Inverse  of  codeToChars,        *  e.g.  'A'  -­‐>  '2',  'B'  -­‐>  '2'.        */      val  charCode:  Map[Char,  Char]  =          for  {              (digit,  chars)  <-­‐  codeToChars                        char  <-­‐  chars                                                            }  yield  char  -­‐>  digit

Slide 42

Slide 42 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: MAKES A PRODUCT UNDERSTANDABLE 4 It clarifies the product’s structure. Be er still, it can make the product clearly express its function by making use of the user's intuition. At best, it is self- explanatory. HAMS’S WORDS DESIGN → PROGRAMMING: Focus: seek to express the clearest intent of a module or API. Clear interfaces, higher-order functions often succinct and clear. Static types clarify the structure of code Reducing or eliminating side effects makes it easier to understand the widreaching affects of invoking a function.

Slide 43

Slide 43 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS UNOBSTRUSIVE 5 It clarifies the product’s structure. Be er still, it can make the product clearly express its function by making use of the user's intuition. At best, it is self- explanatory. HAMS’S WORDS DESIGN → PROGRAMMING: GOOD FP IS UNOBTRUSIVE: Don’t introduce a new datatype if a regular function type would do Restrained designs are favored, since they are typically more composable Libraries should have neutral types that room for the user's self-expression"

Slide 44

Slide 44 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS UNOBSTRUSIVE 5 EXAMPLE If one of my tiny modules is a simple function then I can pass it to a higher-order function like map, unchanged. If it is not a simple function, but an instance of a more complicated class, then I might not be able to do that. Or I will have to make the class more complex by explicitly also extending a function type.

Slide 45

Slide 45 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS UNOBSTRUSIVE 5 EXAMPLE CONT’D A simple function avoids both complexities and is usually favored. The same holds true for datatypes: reuse existing types of the standard library (in Scala: Option, Try, ...)

Slide 46

Slide 46 text

RAMS’S 10 PRINCIPLES OF GOOD DESIGN: IS HONEST 6 It does not make a product appear more innovative, powerful or valuable than it really is. It does not a empt to manipulate the consumer with promises that cannot be kept. HAMS’S WORDS DESIGN → PROGRAMMING: If you work in a statically typed language, then you can leverage static types to keep your design honest. Usually, the type signature of a function already specifies a lot of the functionality "Well-typed programs can’t be blamed” Wadler & Findler

Slide 47

Slide 47 text

CONCLUDING Surprising how long-known principles from industrial design can be directly applied to software. This talk just scratches the surface. Just an – oh hey, this looks similar! Good design is thorough to the last detail Good design is long-lasting FP especially seems to be a good fit for Ram’s design principles Awareness of design principles and some intuition of how they map to code could improve the process of building software. Others:

Slide 48

Slide 48 text

THANK YOU.