Make It So Workshop

Design Lessons From the Future Nathan Shedroff

nathan@nathan.com @nathanshedroff

scifiinterfaces.com M A K E I T S O Interaction Design Lessons from Science Fiction

b y N AT H A N S H E DR OF F & C H R I S TOP H E R NOE S S E L

foreword by Bruce Sterling

Many designers enjoy the interfaces seen in science fiction films

and television shows. Freed from the rigorous constraints of designing

for real users, sci-fi production designers develop blue-sky interfaces

that are inspiring, humorous, and even instructive. By carefully studying

these “outsider” user interfaces, designers can derive lessons that make

their real-world designs more cutting edge and successful.

“Designers who love science fiction will go bananas over Shedroff and Noessel’s delightful and informative book on how interaction design in sci-fi movies informs interaction design in the real world. . . . You will find it as useful as any design textbook, but a whole lot more fun.”

ALAN COOPER“Father of Visual Basic” and author of The Inmates Are Running the Asylum

“Part futurist treatise, part design manual, and part cultural analysis, Make It So is a fascinatinginvestigation of an often-overlooked topic: how sci-fi influences the development of tomorrow’s machine interfaces.”

ANNALEE NEWITZEditor, io9 blog

“Shedroff and Noessel have created one of the most thorough and insightful studies ever made of this domain.”

MARK COLERANVisual designer of interfaces for movies (credits include The Bourne Identity, The Island, and Lara Croft: Tomb Raider)

“Every geek’s wet dream: a science fiction and interface design book rolled into one.”

MARIA GIUDICECEO and Founder, Hot Studio

www.rosenfeldmedia.com

MORE ON MAKE IT SOwww.rosenfeldmedia.com/books/science-fiction-interface/

MAK

E IT SO

by NATH

AN SH

EDR

OFF &

CHR

ISTOPH

ER N

OESSEL

Make It So Workshop

IntroductionPresentationDiscussion

Exercise 1: Diverge

Exercise 2: Diverge

Exercise 3: Converge

Exercise 4: Converge

Results PresentationDiscussion

:60

:30

:30

:30

:30

:30

presentation

Make It So Workshop

0:45:00

www.youtube.com/watch?v=u6lHVkTakSs

Make It So Workshop

Design for Dreaming (01956)

Make It So Workshop

Who’s Future? dream-house-design.blogspot.com

Visible Human Project (01989) Lesson: Real Design Inspires Science Fiction

X-Men (02003) Lesson: Real Design Inspires Science Fiction

Damien Hirst (01993) Lesson: Real Design Inspires Science Fiction

The Cell (2000)

The Cell (02000) Lesson: Real Design Inspires Science Fiction

X-Men (02000) Lesson: Science Fiction Inspires Real Development

XenoVision Mark II Dynamic Sand Table (02004) Lesson: Science Fiction Inspires Real Development

XenoVision Mark II Dynamic Sand Table (02004) Lesson: Science Fiction Inspires Real Development

Star Trek (01966) Lesson: Science Fiction Sets Expectations that Audiences and Developers Internalize

Motorola StarTAC (01996) Lesson: Science Fiction Sets Expectations that Audiences and Developers Internalize

Motorola MicroTAC (01989) Lesson: Science Fiction Sets Expectations that Audiences and Developers Internalize

The Empire Strikes Back (01980) Lesson: Visual Scale Telegraphs Social Hierarchy

Revenge of the Sith (02005) Lesson: Visual Scale Telegraphs Social Hierarchy

The Fifth Element (01997) Lesson: Systems Should Respond to Erroneous Input Appropriately

2001: A Space Odyssey (01968) Lesson: Systems Should Respond to Erroneous Input Appropriately

The Fifth Element (01997) Lesson: Systems Should Respond to Erroneous Input Appropriately

Into Eternity (02010) Onkalo Nuclear Waste Repository, Eurajoki, Finland

Lifted (02006) Lesson: Form Language Can Help Novice Users Quickly Learn Complex Systems

Apple “Snow White” Design Language (01984-01990) Lesson: Most Design IS Fiction

Lesson: (So is much of Business)

Metropolis (01927) Lesson: Humanness is Transferrable to Non-human Systems

Roomba (02002) Lesson: Humanness is Transferrable to Non-human Systems

Knight Rider (01982) Lesson: Conversation casts the system in the role of a character

Star Wars: A New Hope (01977) Lesson: Use Nonlinguistic Sounds Expressively to Trigger Anthropomorphism

Moon (02009) Lesson: Use an agent’s social pressure for a social agenda

Microsoft Bob & Clippy (01987) Lesson: Anthropomorphized Interfaces Are Difficult To Greate Successfully

Microsoft Ms. Dewey (2006) Lesson: Anthropomorphized Interfaces Are Difficult To Greate Successfully

Knowledge Navigator (01987) Lesson: Anthropomorphized Interfaces Are Difficult To Greate Successfully

The Matrix (01999) Lesson: The More Human The Representation, The Higher The Expectations Of Human Behavior

40

Realistic >>>

Acc

epta

ble

>>>

Star Trek:The Next Generation (01987) Lesson: Beware the Uncanny Valley

Until the End of the World (01991) Lesson: Consider Zoomorphizing (Animal-likenesses) For Low-Functioning Systems

Iron man (02008) Lesson: Achieve Anthropomorphism Through Behavior

The Time Machine (02002) Lesson: Achieve Anthropomorphism Through Behavior

Star Trek (02010) Lesson: Rely On A User’s Recognition Rather Than Recall

Flash Gordon (01980) Lesson: Avoid Reminding People of the Simulation

2001: A Space Odyssey (01968) Lesson: The Network Ruins Tension-Filled Narratives

Science Fiction is a prototyping tool

Make It So Workshop

Make It So Workshop

Make It So Workshop

Sci Fi Character Story Inspiration

Design User/Persona Scenario/Use Case Outcome/Value

< >

Make It So Workshop

Exercise 1: Diverge: Design for a New User

Exercise 2: Diverge: Design for New Medium

Exercise 3: Converge: Reverse Engineer for the Present

Exercise 4: Converge: Add a Sci-Fi Patina

Make It So Workshop

exercise 1 : Diverge: Design for a New User

Choose a character from a Sci-fi film or TV show (similar to your user) and imagine the system that would meet their needs

0:30:00

Make It So Workshop

0:30:00

exercise 1 : Diverge: Design for a New User

Choose a character from a Sci-fi film or TV show (similar to your user) and imagine the system that would meet their needs

Make It So Workshop

0:30:00

Make It So Workshop

0:30:00

exercise 1 : Diverge: Design for a New User

Refamiliarize yourself with it by researching its interfaces online with images.

exercise 2 : Diverge: Design for New Medium

Choose one of the following media and imaginehow it might transform your system:

AR, VR or 3D Gesture Interface

Voice Interface Anthropomorphism

Make It So Workshop

0:30:00

exercise 3 : Converge: Reverse Engineer for the Present

Redevelop your new solution into present-day technology. How much of it can be built “today”?

Make It So Workshop

0:30:00

exercise 4 : Converge: Add a Science Fiction Patina

Incorporate Sci-Fi typography, colors, shapes,and other visual design elements into your solution.

Make It So Workshop

0:30:00

Lesson: Sans Serif Is The Typeface Choice Of The Future

The Island (c 02005) Lesson: Incorporate Typographic Principles From Print

Star Trek (02009) Lesson: Science Fiction Glows

Star Trek: The Next Generation (c 01987-01994) Lesson: Science Fiction Glows

Galaxy Quest (01999) Supernova (02000) Battlestar Galactica (02004) The Hitchhiker’s Guide to the Galaxy (02008) Lesson: Future Screens Are Mostly Blue

1968 1973 1974 1977 1979

1980 1982 1983 1986 1989

1990 1991 1996 1997 1999

2000 2002 2003 2004 2005

2007 2008

Lesson: Future Screens Are Mostly Blue

The Fifth Element (01997) Red Planet (02000)Star Trek: Nemesis (02002) The Incredibles (02004) Lesson: Red Means Danger

Enterprise (02001) The Matrix: Revolution (02003) Lesson: Gray Makes Interfaces Look Like An Early-Generation GUI

Roomba (2002)

Space:1999 (01975)Star Wars 1: The Phantom Menace (01999) Lesson: To Create A Unique Interface, Avoid Single, Common Colors And The Glow Effect

Men in Black II (02002) Firefly (02002) Torchwood (02005)Star Wars IV: A New Hope (1977) Lesson: Use Nonrectilinear-Shaped Screens To Make Them Look Advanced

District 9 (02009) Lesson: Use Transparency To Order Important Information While Preserving Context

Star Trek (02009) Lesson: Avoid The Confusion Caused By Too Many Overlapping, Transparent Layers

Eagle Eye (02008) Lesson: Avoid The Confusion Caused By Too Many Overlapping, Transparent Layers

Gamer (02009) Hackers (01995) Lesson: Three-Dimensional Data Makes Use of Users’ Spatial Memory

Lost in Space (01998) Lesson: Use Motion To Draw Attention, Cautiously

The Hitchhiker’s Guide to the Galaxy (02008) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

Final Fantasy (02001) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

The Chronicles of Riddick (02004) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

The Incredibles (02004) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

LCARS Interface, Star Trek: The Next Generation, Star Trek: Deep Space 9, and Star Trek: Voyager (01987-2001) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

Misc. Alien Interfaces, Star Trek: The Next Generation,Star Trek: Deep Space 9 (01987-2001) Lesson: Creative Combinations of Even Common Stylistic Choices Create Unique Appearance

present :

What did you create? 1: what is your system/interface?

2: who is your character (and what changed)? 3: what sci-fi tech did you try (and what changed)?

4: how do you bring it back to the present?

Make It So Workshop

0:30:00

Use Science Fiction

scifinterfaces.comNathan Shedroff & Chris Noessel

nathan@nathan.com @nathanshedroff

M A K E I T S O Interaction Design Lessons from Science Fiction

b y N AT H A N S H E DR OF F & C H R I S TOP H E R NOE S S E L

foreword by Bruce Sterling

Many designers enjoy the interfaces seen in science fiction films

and television shows. Freed from the rigorous constraints of designing

for real users, sci-fi production designers develop blue-sky interfaces

that are inspiring, humorous, and even instructive. By carefully studying

these “outsider” user interfaces, designers can derive lessons that make

their real-world designs more cutting edge and successful.

“Designers who love science fiction will go bananas over Shedroff and Noessel’s delightful and informative book on how interaction design in sci-fi movies informs interaction design in the real world. . . . You will find it as useful as any design textbook, but a whole lot more fun.”

ALAN COOPER“Father of Visual Basic” and author of The Inmates Are Running the Asylum

“Part futurist treatise, part design manual, and part cultural analysis, Make It So is a fascinatinginvestigation of an often-overlooked topic: how sci-fi influences the development of tomorrow’s machine interfaces.”

ANNALEE NEWITZEditor, io9 blog

“Shedroff and Noessel have created one of the most thorough and insightful studies ever made of this domain.”

MARK COLERANVisual designer of interfaces for movies (credits include The Bourne Identity, The Island, and Lara Croft: Tomb Raider)

“Every geek’s wet dream: a science fiction and interface design book rolled into one.”

MARIA GIUDICECEO and Founder, Hot Studio

www.rosenfeldmedia.com

MORE ON MAKE IT SOwww.rosenfeldmedia.com/books/science-fiction-interface/

MAK

E IT SO

by NATH

AN SH

EDR

OFF &

CHR

ISTOPH

ER N

OESSEL