Download - 101 Things I Learned In Interaction Design School - Web Directions South

Transcript
Page 1: 101 Things I Learned In Interaction Design School - Web Directions South

101 Things I (should have) Learned in Interaction Design SchoolShane Morris (@shanemo)

Page 2: 101 Things I Learned In Interaction Design School - Web Directions South

How to draw a line

101 Things I Learned in Architecture School, Matthew Frederick

1

Page 3: 101 Things I Learned In Interaction Design School - Web Directions South
Page 4: 101 Things I Learned In Interaction Design School - Web Directions South

Design an architectural space to accommodate a specific program,

experience , or intent.

For the drawing and description, see “101 Things I Learned in Architecture School” by Matthew Frederick

http://www.frederickdesignstudio.com/Books/101Things.html

101 Things I Learned in Architecture School, Matthew Frederick

12

Page 5: 101 Things I Learned In Interaction Design School - Web Directions South

How to draw a line

101 Things I Learned in Architecture School, Matthew Frederick

1

Page 6: 101 Things I Learned In Interaction Design School - Web Directions South

I didn’t go to Interaction Design School

Page 7: 101 Things I Learned In Interaction Design School - Web Directions South

When I started out in this industry…

Page 8: 101 Things I Learned In Interaction Design School - Web Directions South

HCI was a science

amazon.com/Psychology-Human-Computer-Interaction-Stuart-Card/dp/0898598591

Page 9: 101 Things I Learned In Interaction Design School - Web Directions South

The 2 disciplines

Technology Psychology

Page 10: 101 Things I Learned In Interaction Design School - Web Directions South

Engineering vs. Design

Page 11: 101 Things I Learned In Interaction Design School - Web Directions South

The 4 disciplines

Technology

Behaviour

Design

Business

Page 12: 101 Things I Learned In Interaction Design School - Web Directions South
Page 13: 101 Things I Learned In Interaction Design School - Web Directions South

Careful anchor placement can generate an active building interior

87

101 Things I Learned in Architecture School, Matthew Frederick

For the drawing and description, see “101 Things I Learned in Architecture School” by Matthew Frederick

http://www.frederickdesignstudio.com/Books/101Things.html

Page 14: 101 Things I Learned In Interaction Design School - Web Directions South
Page 15: 101 Things I Learned In Interaction Design School - Web Directions South

TO WRITE “101 THINGS I LEARNED IN INTERACTION DESIGN SCHOOL”…

Page 16: 101 Things I Learned In Interaction Design School - Web Directions South

ixd101.com

Page 17: 101 Things I Learned In Interaction Design School - Web Directions South

Functionality is the enemy of usability

When you are handed a functional specification, it is easy to take it on face value, and then work hard to make that functionality as usable as possible. If you are really focussed on usability, then your job starts with critiquing the functionality itself.

Page 18: 101 Things I Learned In Interaction Design School - Web Directions South

ixd101.com

Page 19: 101 Things I Learned In Interaction Design School - Web Directions South

UPDATE – IXD101.COM

timeUXA 2009

UXA 2010

Matt Frederick Calls

WDS 2010

activity

Page 20: 101 Things I Learned In Interaction Design School - Web Directions South
Page 21: 101 Things I Learned In Interaction Design School - Web Directions South

The level of detail in your mock-ups should reflect the level of confidence

in your design Mock-ups are prepared as a way of exploring a particular design problem, and in order to communicate your thoughts on a solution to important stakeholders (i.e. users, clients or developers).In the early stages of design, mock-ups should communicate broad concepts and groupings of information or functions. Keeping the details scant at these early stages allows you to progress through iterations quickly and keeps your stakeholders from throwing the baby out with the bath-water by quibbling over colours and button placement.

As you progress towards a final design, mock-ups should be rendered in increasingly higher fidelity so that the full detail of your approach is exposed

Page 22: 101 Things I Learned In Interaction Design School - Web Directions South

Approach vs. Technique

Matt Shane0

1

2

3

4

5

6

7

8

9

10

ApproachTechnique

Page 23: 101 Things I Learned In Interaction Design School - Web Directions South

The timeless way of…

Page 24: 101 Things I Learned In Interaction Design School - Web Directions South

Play tricks, don't wait for a full-house

Deciding when your design is mature enough to put in front of a client is always difficult. Unfortunately, there is a natural tendency to err on the side of holding off for longer than we should.All other things being equal, you should expose your design earlier rather than later - in fact, earlier than you feel comfortable with.Even if you have problems with aspects of the design, it is better to bring your stakeholders over to your side of the problem sooner.To use an analogy from card games; play your design out in small "tricks" don't wait for a "full house", lest you be left with a hand full of great - but now useless - cards when the project moves on without you.

Page 25: 101 Things I Learned In Interaction Design School - Web Directions South

TO WRITE “101 THINGS I LEARNED IN INTERACTION DESIGN SCHOOL”…

Page 26: 101 Things I Learned In Interaction Design School - Web Directions South

The getting of wisdom

Data Information Knowledge Wisdom

Page 27: 101 Things I Learned In Interaction Design School - Web Directions South

The getting of wisdom

Data

• Miller’s Number

• Fitt’s Law• Usability

Testing• Analytics

Information

• Contextual Inquiry

• Activity Theory

• Information Architecture

Knowledge

• Heuristics• Patterns

Wisdom

• Intuition

designDesign

Page 28: 101 Things I Learned In Interaction Design School - Web Directions South

Random unsubstantiated hypothesis

101 Things I Learned in Architecture School, Matthew Frederick

69

For the drawing and description, see “101 Things I Learned in Architecture School” by Matthew Frederick

http://www.frederickdesignstudio.com/Books/101Things.html

Page 29: 101 Things I Learned In Interaction Design School - Web Directions South

Like buildings, applications break at the joins

It’s the journey between pages or screens, not the pages and screens themselves, that can cause the most problems for users.

Plus - problems with the journey are the most expensive problems to fix.

Design the journey between states first, before designing the states.

Page 30: 101 Things I Learned In Interaction Design School - Web Directions South

Have we achieved wisdom in interaction design?

NO

Page 31: 101 Things I Learned In Interaction Design School - Web Directions South

Interaction design is hard!

www.vintagecalculators.com

Page 32: 101 Things I Learned In Interaction Design School - Web Directions South

Separation of action and reaction

The greater the distance between a user’s action and the system’s reaction, the more you need to emphasise the relationship between the action and the reaction.

Distance can be measured in space, or in time.

Page 33: 101 Things I Learned In Interaction Design School - Web Directions South

Interaction design is hard!

www.vintagecalculators.com

Page 34: 101 Things I Learned In Interaction Design School - Web Directions South

Do you know where your pixels come from?

Powerhouse Museum Collection

http://www.powerhousemuseum.com/collection/database/?irn=28769

Gift of Australian Consolidated Press under the Taxation Incentives for the Arts Scheme, 1985

Page 35: 101 Things I Learned In Interaction Design School - Web Directions South

INTERACTION DESIGN IS HARD…BUT WE ARE SOFT!

Page 36: 101 Things I Learned In Interaction Design School - Web Directions South

Architects don’t get to usability test

“You can use an eraser on the drafting table or a sledge hammer on the construction site.“

Frank Lloyd Wright

http://quotesondesign.com/frank-lloyd-wright/

Page 37: 101 Things I Learned In Interaction Design School - Web Directions South

Industrial designers don’t get to A/B test

Page 38: 101 Things I Learned In Interaction Design School - Web Directions South

INTERACTION DESIGN IS HARD…BUT WE ARE SOFT!

Page 39: 101 Things I Learned In Interaction Design School - Web Directions South

Landmarks help us know where we are going, and where we have been

When we explore a new city, landmarks break our journey into stages. At each landmark we stop, assess where we’ve been, reorient ourselves, and set out again.

Landmarks can help with any journey. On a web site, arriving at a page that is markedly different to others marks the end of a stage of the interaction, or the beginning of a new stage.

Memorable landmarks that stand out from their surrounds help us form a mental model of where we have been, and where else we can go.

Page 40: 101 Things I Learned In Interaction Design School - Web Directions South

TO WRITE “101 THINGS I LEARNED IN INTERACTION DESIGN SCHOOL”…

Page 41: 101 Things I Learned In Interaction Design School - Web Directions South

To write “101 Things I Learned in Interaction Design School”…

…we need greater confidence

http://www.cafepress.com.au/jenkramer.145505508#

Page 42: 101 Things I Learned In Interaction Design School - Web Directions South
Page 43: 101 Things I Learned In Interaction Design School - Web Directions South

Design with models

72

101 Things I Learned in Architecture School, Matthew Frederick

For the drawing and description, see “101 Things I Learned in Architecture School” by Matthew Frederick

http://www.frederickdesignstudio.com/Books/101Things.html

Page 44: 101 Things I Learned In Interaction Design School - Web Directions South
Page 45: 101 Things I Learned In Interaction Design School - Web Directions South

Four new books!

Page 46: 101 Things I Learned In Interaction Design School - Web Directions South

Roll your drawings for transport or storage with the image side

facing out

90

101 Things I Learned in Architecture School, Matthew Frederick

For the drawing and description, see “101 Things I Learned in Architecture School” by Matthew Frederick

http://www.frederickdesignstudio.com/Books/101Things.html

Page 47: 101 Things I Learned In Interaction Design School - Web Directions South

Thank youShane MorrisAutomatic [email protected]@shanemoIxd101.com

101 Things I Learned in Architecture SchoolMatthew Frederick