human design for developers - codestock 2015

HUMAN DESIGN FOR DEVELOPERS

July 10, 2015 - Codestock Richard Lee - @richardlee_tn - rich@minotaurdesign.com

1. What problem does it solve?

2. How does this affect the user?

3. Why is it better than the alternative?

Three questions for the developers AND designers

in the room

<—- Chasm

King —->

Crazy smart developers

HAT ++1;

Developer-adjacent

———>

As designers that also code a bit, our taste is better than our craft.

!As developers who do more than code,

our craft is better than our taste. !

Both are equally noble, and both benefit from learning more about the other.

…sorry?

Design is…Design includes things like visual graphics, user interfaces and animation. !Design is also early research into problems and users. !Design is also making good use of the research findings. !Design is also testing concepts with real users, and being open to change, to improvement.

Refactoring your code is design. !Making your application extensible - that’s design. !Ensuring you have defaults in place so things don’t blow up when dependencies fail - that’s just good design.

sensory memory !attention !short-term memory

The Memory Cycle

#RAGEQUIT

Designing for emotion(This one’s for my little girl)

<—- WINNING!

hierarchy of needs

hierarchy of user needs

Usable = edible. We can do better.

Let’s push for pleasurable. Let’s demand delicious.

Now for a look at Perception(See what I did there?)

PerceptionDepicting depth & distance (Distance cues)

•Absolute cues •Relative cues •Two types of distance

Designers should provide:

•Affordances

•Good conceptual model

•Visibility

•Good mapping

•Feedback

!

Norman’s 7 Stages of Action

•Forming the goal

•Forming the intention

•Specifying an action

•Executing the action

•Perceiving the state of the world

•Interpreting the state of the world

•Evaluating the outcome

• Stay out of people’s way

• Present few choices

• Limit distractions

• Group related objects near each other

• Create visual hierarchy to match user’s needs

• Provide strong information scent

• Provide signposts and cues

• Provide context

• Avoid jargon

• Make things efficient

• Use appropriate defaults

• Use constraints appropriately

• Make actions reversible

• Reduce latency

• Provide feedback

• Use emotion

• Less is more

• Be consistent

• Make a good first impression

• Be credible and trustworthy

Experience design principles (big nod to Whitney Hess @whitneyhess)

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry 5. Law of Common Fate

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity

7. Law of Simplicity

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity

7. Law of Simplicity 8. Law of Past XP

!

Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure

4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity

7. Law of Simplicity 8. Law of Past XP 9. Law of Figure and Ground

Designers and developers get consistency, predictability & efficiency. (so do users) !Generally a really good idea. !Avoid if… • Grid too expensive for project • Consistency NOT DESIRED

Let’s briefly talk about Grid systems Why are grids and grid systems important?

1. What problem does it solve?

2. How does this affect the user?

3. Why is it better than the alternative?

Remember these? !

As designers & as developers, for every decision we make or solution we offer, we should be able to answer these three questions:

These questions get to the heart of any brisk debate and can resolve conflicting viewpoints effectively.

Final thoughts !Designers are strongly opinionated creatures who by and large are fairly certain that our opinion is valuable based on our experience solving problems using design. Please, go get as much exposure as you can to the tech that supports your design work. You’ll be a better designer for it. !

Final thoughts !Developers on the other hand are strongly opinionated creatures who by and large are fairly certain that our opinion is valuable based on our experience solving problems using code. Go get as much exposure as you can to the research, planning and design that provides structure and reason to your development work. You’ll be a better developer for it. !

Thank you, and happy learning!