Start Smarter with a Concept Diagram

60
Start Smarter with a Concept Diagram This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. @scottrocketship | #startsmarter

description

Concept diagrams are one of the best bang-for-buck deliverables available to today’s UX designer. In its most basic form, a concept diagram uses nouns connected by verbs to describe a system, idea, or application. It can be a sophisticated deliverable or a quick-and-dirty sketch. The technique is not unlike diagramming sentences in elementary school — though it tends to be quite a bit more fun. This is a fast-paced primer on building better concept diagrams and using them to understand relationships between ideas in new ways. In particular, we’ll examine how to use concept diagrams to represent domain expertise and create a mechanism for transferring knowledge between stakeholders, subject matter experts, and designers. Learn the simple rules for creating concept diagrams, when you will and won’t want to create one, and what to do with it once you have it. Understand how concept diagrams differ from similar techniques such as affinity diagramming and mindmapping, and when best to apply each in your process. Variations on this talk have been presented at the 2014 Information Architecture Summit in San Diego, MinneWebCon 2014 at the University of Minnesota, Web 2013 at Penn State, and the 2014 University of Illinois Web Conference.

Transcript of Start Smarter with a Concept Diagram

Page 1: Start Smarter with a Concept Diagram

Start Smarter with a Concept

Diagram

!This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

@scottrocketship | #startsmarter

Page 2: Start Smarter with a Concept Diagram

From the film “Ten Bullets” by Tom Sachs http://vimeo.com/34901903

Page 3: Start Smarter with a Concept Diagram

From the film “Ten Bullets” by Tom Sachs http://vimeo.com/34901903

Page 4: Start Smarter with a Concept Diagram

From the film “Ten Bullets” by Tom Sachs http://vimeo.com/34901903

Page 5: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Page 6: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

There’s nothing worse than a sharp image of a fuzzy concept.

- Ansel Adams, photographer

Page 7: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Page 8: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Clarity is empowering.

Page 9: Start Smarter with a Concept Diagram

When you don’t know what you believe, everything becomes an argument.

- Jason Fried & David Heinemeier HanssonRework p. 44, 2010

@scottrocketship | #startsmarter

Page 10: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Minding your isness…

Page 11: Start Smarter with a Concept Diagram

How do we know we’re

finished?

Page 12: Start Smarter with a Concept Diagram

Where does this project fit?

Page 13: Start Smarter with a Concept Diagram

It’s a good idea, but is it “us”?

Page 14: Start Smarter with a Concept Diagram

I don’t understand.

Page 15: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Never delegate understanding.

- Charles Eames

Page 16: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Building Concept Diagrams

Page 17: Start Smarter with a Concept Diagram

Concept Modeling is a

results in

Concept Diagram(s)

Process

Page 18: Start Smarter with a Concept Diagram

Concept Diagrams are also called

Concept Models

Concept Maps

Page 19: Start Smarter with a Concept Diagram

Nouns connected by Verbs

Concept (noun)

Concept (noun)

Proposition

link (verb)

Page 20: Start Smarter with a Concept Diagram
Page 21: Start Smarter with a Concept Diagram
Page 22: Start Smarter with a Concept Diagram

knowledge is assimilated in the framework of what we already know

@scottrocketship | #startsmarter

CONSTRUCTIVISMBASICALLY...

Page 23: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Ask a question.

Page 24: Start Smarter with a Concept Diagram

Novak, J. D. & A. J. Cañas, The Theory Underlying Concept Maps and How to Construct and Use Them, Technical Report IHMC CmapTools 2006-01 Rev 01-2008, Florida Institute for Human and Machine Cognition, 2008

Page 25: Start Smarter with a Concept Diagram

What did I learn at the IA Summit?

Page 26: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Make a List

Page 27: Start Smarter with a Concept Diagram

Nouns Verbs

Page 28: Start Smarter with a Concept Diagram

Nouns ------ members authors events sales

Verbs ------ join author attend buy

Page 29: Start Smarter with a Concept Diagram

Materials Review

Expert Interviews

Competitive Research

Mindmapping

Page 30: Start Smarter with a Concept Diagram

Photo by Flickr user Jay Malone http://www.flickr.com/photos/jcorduroy/

Page 31: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Arrange the pieces.

Page 32: Start Smarter with a Concept Diagram
Page 33: Start Smarter with a Concept Diagram
Page 34: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Make connections.

Page 35: Start Smarter with a Concept Diagram

IA Summit was in

I

attended

madenew friends

San Diego

Page 36: Start Smarter with a Concept Diagram
Page 37: Start Smarter with a Concept Diagram
Page 38: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Refine and test.

Page 39: Start Smarter with a Concept Diagram
Page 40: Start Smarter with a Concept Diagram
Page 41: Start Smarter with a Concept Diagram
Page 42: Start Smarter with a Concept Diagram
Page 43: Start Smarter with a Concept Diagram
Page 44: Start Smarter with a Concept Diagram
Page 45: Start Smarter with a Concept Diagram
Page 46: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Building Concept Diagrams:Focus Gather Arrange Link Refine

Page 47: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Concept diagrams in practice.

Page 48: Start Smarter with a Concept Diagram

A POST

Replies

Title

User

Body

Type

Question

Feature Request

Topic

always has a

always has a

written by the

written by the

belongs to exactly one

is described with zero or more

such as

Issue

is the anchor for any number of

Userchosen by the

User

chosen by the

Categories

organized into

User

which are NOT selected by the

Interface

that are only part of the

Any User

written by

Body

which only have a

Hardware Interfaces

Mathematica

Consumer Products

Wolfram Tones

CDF Mobile

Architecture

Physics

Transportation

Graphics

such as

which can be browsed and followed the same way as

will not (in version one) affect the

?

ARTICULATION

Page 49: Start Smarter with a Concept Diagram

A POST

Replies

Title

User

Body

Type

Question

Feature Request

Topic

always has a

always has a

written by the

written by the

belongs to exactly one

is described with zero or more

such as

Issue

is the anchor for any number of

Userchosen by the

User

chosen by the

Categories

organized into

User

which are NOT selected by the

Interface

that are only part of the

Any User

written by

Body

which only have a

Hardware Interfaces

Mathematica

Consumer Products

Wolfram Tones

CDF Mobile

Architecture

Physics

Transportation

Graphics

such as

which can be browsed and followed the same way as

will not (in version one) affect the

Groups

April 20, 2012

Page 50: Start Smarter with a Concept Diagram

COORDINATION

Page 51: Start Smarter with a Concept Diagram

COORDINATION

+

Page 52: Start Smarter with a Concept Diagram

brand

company

CONVERSATION

Page 53: Start Smarter with a Concept Diagram

Facebook Page

Complete Vehicle

Inventory

Dealership Information

Homescreen Icon

Website Portal

available at

idealer.co/dealername

is built byis a

Service

for

that powers

Native Mobile Apps for Auto Dealerships

used by

DealershipCustomers

Dealership Staff

to enhance the relationship

and communication with

used to

manage

Auto Dealers

designed for featuring

Apple's App Store

Android Marketplace

iPhoneiPad iPod

Multiple Android Devices

Twitter Profile

YouTube

Google Plus

Push Messages

about

Events

News

Special Offers

In-App Logo

In-App Photos & Graphics

that run onthat run on downloaded

through

downloaded

through

Social Links

to

with dealership

branded

User Toolbox

containing

Flashlight

Loan Calculator

Parking Assistant

Vehicle Manuals

including

Contact Details

Hours and

ServicesMap and

Locations

who access Application Features

including

Vehicle Photos

Detailed Descriptions

Links to more info

Overall Look

and Feel

brand

company

Page 54: Start Smarter with a Concept Diagram

@scottrocketship | #startsmarter

Use concept models for yourself. Ultimately, they are the most selfish, introspective, and self-indulgent artifact...

- Dan M. BrownCommunicating Design, 2nd Edition, p.65

CONVERSATION

Page 55: Start Smarter with a Concept Diagram

DOCUMENTATION

Page 56: Start Smarter with a Concept Diagram

DOCUMENTATION

Page 57: Start Smarter with a Concept Diagram

EVALUATION

✔✔

✔✔

Page 58: Start Smarter with a Concept Diagram

FACILITATION

Page 59: Start Smarter with a Concept Diagram

FACILITATION

Page 60: Start Smarter with a Concept Diagram

?@scottrocketship | #startsmarter

Thanks.

http://kubie.co

Search Icon: Gianni Clifford, from The Noun Project

List icon by Charlérik Lemieux, from The Noun Project

Puzzle icon by Irene Trautluft, from The Noun Project

Repeat icon by Greenwave, from The Noun Project

Idea exchange icon by Luis Prado, from The Noun Project

Question icon by Marc Orro, from The Noun Project