Designing with C.R.A.P.

#CRAPdesign @csteinert

Designing with

C.R. A.P.

Stir Trek 2014 #CRAPdesign

Caitlin Steinert @csteinert

1


Designing with

C.R. A.P.

Stir Trek 2014 #CRAPdesign

Caitlin Steinert @csteinert

My name is Caitlin, I’m a front-end developer. There’s a hashtag that I invite you to use, I’d love to hear what you all have to say.

2


The Non-Designer’s Design Book!Robin Williams

This talk was inspired by “The Non-Designer’s Design Book” by Robin Williams. I first read this book as a textbook in college, and I still refer to it often. Ms. Williams has a bunch of other “Non-Designer” books on Amazon.

3


What is design?

Who knows, right? There’s a ton of different definitions.

4


In most people's vocabularies, design means veneer. It's interior decorating. It's the fabric of the curtains of the sofa. But to me,

nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up

expressing itself in successive outer layers of the product or service.

- Steve Jobs

Some people have definitions that are a bit emotional. And I apologize for the obligatory Steve Jobs quote in a design presentation.

5


One could describe design as plan for arranging elements to accomplish a particular purpose.

- Charles Eames

Some have really simplistic definitions. Charles Eames, along with his wife Ray, was (and still is) an influential furniture and architecture designer.

6


DESIGN: (noun) a specification of an object, manifested by some agent, intended to accomplish goals, in a particular environment,

using a set of primitive components, satisfying a set of requirements, subject to some constraints.

- Paul Ralph and Yair Wand

Some people try to get as academic as possible. Ralph and Wand are Computer Science academics who wanted to define design as scientifically as possible. The point is, there’s no one definition. But if there was, it wouldn’t include the word…

7


…magic. OR illusion! Sometimes I wish it was. I wish we could just wave a magic wand and make our projects perfect.

8


Design is a process.

But design is a process. And it involves a lot of decision making. Lots of educated guesses, tests, and trying over until we’re happy.

9


Contrast Repetition Alignment Proximity

Many of the design decisions we make are influenced by these four principles. I believe that you can boil down good design decisions and find that these principles are their basis.

10



And, of course, here’s where we get CRAP. So let’s jump right in.

11


Contrast:the state of being strikingly different from something else, typically something in juxtaposition or close association.

I want to point out one specific word here.

12


Contrast:the state of being strikingly different from something else, typically something in juxtaposition or close association.

Contrast is a “go big or go home” game.

13


R: 200

G: 40

B: 50

R: 190

G: 30

B: 80

We’ve got two colors here. We can tell from their Red Green Blue values that they are, indeed, different colors.

14


Cats

Dogs

It’s raining:

But once they’re both on an even playing field, it becomes hard to tell which one is which.

15


Cats

Dogs

It’s raining:

Once we switch to a color with more contrast, though, we’re good to go.

16


Where’s Waldo is an excellent example of low contrast.

17


Searching for Waldo is the point of these books, but it shouldn’t be the effect our designs have on our users.

18


Vero Eos et Accusamus et Iusto Odio

Dignissimos Ducimus Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

We can guess what’s going on here, but why not make it very obvious?

19


Vero Eos et Accusamus et Iusto Odio

Dignissimos Ducimus Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Vero Eos et Accusamus et Iusto Odio Dignissimos Ducimus Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Now we can more accurately parse this information. And it didn’t even take that much effort. Ok, that’s all well and good, but is it possible to have TOO MUCH contrast?

20


Have you even been told by a manager that everything on that huge list they just gave you was top priority? That’s what’s going on here. !Here’s a user test for you. You’re a user coming to this site to contact the owners. How do you accomplish that?

21


Apparently “contact us” wasn’t as high on the priority list as EVERY OTHER THING ON THIS PAGE.

22


Contrast

Use sparingly

23


Contrast

Use sparingly Don’t be shy

24


Contrast

Use sparingly Don’t be shy

25


Contrast

Use sparingly Don’t be SHY

26


Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222(555) 555-5555 Fax (555) 555-5556

We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year.

Renew your lease early and have only $10 increase.

Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014.

• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent

for your unit.) if nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.

We will require 60 day written notice from the 1st of the month if you are planning to move at the of your current lease term. You will need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is to move.

My landlord (names have been changed to protect… everyone involved) obviously wants me to read everything on this lease renewal agreement. But, of course I’m going to read it, it’s my lease renewal agreement. So let’s make it easier to actually read.

27






• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if

nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.


Let’s start by making everything the same. First the font sizes.

28









And then by removing unnecessary underlines.

29









And unnecessary italics.

30






• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if nothing

is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.


And unnecessary bolding.

31









Now that we have a clean slate, we can start adding contrast back in. But only to the things that really deserve being called out! Onto the next principle!

32


Repetition:similar parts within a system should be expressed in similar ways

Repetition is all about earning users’ trust and promoting comprehension of our systems.

33


Don’t Repeat YourselfRepetition is the root of all software evil.

Now, I know that the developers in the audience might cringe at “repetition,” but the idea is a bit different in design. What we’re really talking about is “consistency,” (but “C.C.A.P.” isn’t as fun).

34


This is a chore to read.

35


This isn’t, because the colors convey meaning. Green = comments, red = strings. With this repetition of colors, our users understand what they’re looking at and can better parse the info.

36


Branding is straight-up repetition. We are assuring our users that they’re in the right place.

37


And repetition doesn’t mean copy-pasting every element of a design. These Adobe product splash screens have similarities, but aren’t identical. So we know they’re related, but separate.

38


Fitbit uses repetition in color, typography, icons and charts to make their UI easy to parse at a glance.

39


The “traffic light” colors translate well, and by seeing just one chart fully completed, we can infer if necessary where the other charts stand.

40


StackOverflow has a LOT going on on every single page. But they make that information easy to parse just by repeating one key element.

41


Once I know that these numbers indicate up-votes, I can easily skim this page for the information I need.

42


Andy Warhol took repetition to a different, almost subversive level. By shoving multiple, slightly different versions of the same image into our faces, we’re almost forced to notice things we may not have before. And to consider our assumptions of what we THINK Marilyn Monroe looks like by confronting an image of her with blue skin or green hair.

43


Alignment:placement of elements such that edges line up along common rows or columns, or their bodies along a common center.

Alignment is probably the most straight-forward of all these principles.

44


Alignment naturally draws our eyes. We can use it to quietly suggest reading/viewing patterns to users.

45


Certain alignments are stronger than others.

46


Because they create an invisible “edge” when all the content stops at the same place.

47


When there’s no definitive edge, the result isn’t as strong. That doesn’t mean we shouldn’t use it. In fact, center-aligned content, when contrasted with either left- or right-aligned content can be very attention-grabbing.

48


But in the hierarchy of strong alignment, center still ranks below justified. Sorry, center alignment.

49


The same goes for horizontal alignment. If there’s a strong “edge” being created, our eyes will notice it.

50


Still noticing it.

51


And then it falls off. I am of the personal opinion that horizontal center alignment is pretty terrible if the items being aligned aren’t uniform or similarly sized.

52


Horizontally-aligned objects that are the same size can look similar to the point of being completely overlooked.

53


But once one item breaks the alignment, whoa buddy, all eyes are on that contrasting item!

54


Which is why tab strips work so well.

55


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

“Nemo enim ipsam voluptatem. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.” - Plato

Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

There’s a block quote in this wall of text, but it isn’t initially noticable.

56


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

“Nemo enim ipsam voluptatem. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis

et quasi architecto beatae vitae dicta sunt explicabo.” - Plato

Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Changing the alignment helps. Changing the font weight and adding a background color could help, too, but this is a slide about Alignment, not Contrast!

57




Renew your lease early and have only $10 increase.Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014.




Ok, back to this piece of… not C.R.A.P. Let’s add some alignment.

58







Magic Hill Apartments1234 Boat Road, Freedom Town, OH 44222

(555) 555-5555 Fax (555) 555-5556

In this case, the center alignment is a great contrast to the rest of the document since it’s all left aligned.

59



(555) 555-5555 Fax (555) 555-5556



• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee

• Maximum of 60 days only • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)

• If nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.


And here we’ve moved the parenthetical information in the bulleted list into sub-items, which reinforces their “child” status without the need of parenthesis, and therefore makes the whole mess easier to read.

60


Proximity

Humans perceive relationships based on the distance between objects. In this example, the two circles have no relationship to each other because they are separate.

61


Proximity

But as soon as they look like this, we assume — without any other information — that they share something. That’s because elements that are close together are perceived to be more related than elements that are farther apart.

62


Proximity

Now they’re SUPER related. In fact, we might infer that the smaller circle even depends on the larger one.

63


The audio controls on this dashboard are all located close to each other, in the same area.

64


And they’re located away from the temperature controls. Presumably so that the driver won’t accidentally blast the tunes instead of the AC.

65


Order #10! $204/10/14

(15) bananas!! $10

(10) oranges! ! $10

(2) apples!! ! !$5

Order #11! $204/11/14

(15) bananas!! $10

This is a simplified version of an app I worked on a few years back. I scrolled down and realized I no longer had any idea what I was looking at. Which headers belong to which data?

66


4/10/14

4/11/14

Order #10! $204/10/14

(15) bananas!! $10

(10) oranges! ! $10

(2) apples!! ! !$5

Order #11! $204/11/14

(30) bananas!! $20

Order #10! $204/10/14

(15) bananas!! $10(10) oranges! ! $10

(2) apples!! ! !$5

Order #11! $204/11/14

(30) bananas!! $20

All it took was adjusting the margins in the CSS and we were all set.

67



(555) 555-5555 Fax (555) 555-5556

Alright, back to this guy again. Now, if I wanted to fax this completed form back to my landlord, but which number is the fax? I can make an educated guess and say it’s the second one…

68



(555) 555-5555 Fax (555) 555-5556

But I could be wrong.

69



(555) 555-5555 Fax (555) 555-5556

Or I could be right.

70



(555) 555-5555 Fax (555) 555-5556

Since my landlord didn’t see fit to hit the enter key and clear things up for me…

71



(555) 555-5555 Fax (555) 555-5556

I guess I’ll just call both numbers and assume the one that makes a horrible noise is the one I’m looking for.

72


Let’s Review!

73


Contrast

When we use contrast, we go for it. Don’t be shy!

74


Contrast Repetition

Repetition is about building trust and comprehension for our users.

75


Contrast Repetition Alignment

Alignment shows users the way. Certain types of alignment are stronger than others.

76



People instinctively process proximity (or the lack thereof) as relationship cues.

77






• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent

for your unit.) if nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.


With these four basic principles, we took this from flat out ugly…

78



(555) 555-5555 Fax (555) 555-5556




• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee

• Maximum of 60 days only • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)

• If nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice.

to legible and useful! Hooray!

79


The Non-Designer’s Design Book!Robin Williams

Resources

A Proposal for a Formal Definition of the!Design Concept!Paul Ralph and Yair Wand

Universal Principles of Design!William Lidwell, Kritina Holden, Jill Butler

Design <for> Hackers!David Kadavy

80


Thanks!www.csteinert.com

@csteinert

Jokes! How many designers does it take to change a light bulb? It only takes one, but you’ll need to provide the bulb as either a vector or high resolution raster file. How many developers does it take to change a lightbulb? None, we don’t do hardware issues.

81

Designing with C.R.A.P.

Design

Transcript of Designing with C.R.A.P.