Top Banner
PRESENTED BY UX Detroit | February 19, 2015 PRACTICAL CONCEPTUAL MODELING Hoff | Hinton | Elmendorf
26
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Practical Conceptual Modeling at UX Detroit Feb 2015

PRESENTED BY

UX Detroit | February 19, 2015

PRACTICAL CONCEPTUAL MODELING

Hoff | Hinton | Elmendorf

Page 2: Practical Conceptual Modeling at UX Detroit Feb 2015

2

Abstract Models

Physical Models

Mathematical Models

Scientific Models

Conceptual Models

MANY KINDS OF MODELS

Our Focus Here

Page 3: Practical Conceptual Modeling at UX Detroit Feb 2015

3

• Manipulate ideas as objects

• Explore their relationships

• Work with complex systems

Conceptual Models

Page 4: Practical Conceptual Modeling at UX Detroit Feb 2015

4

MODELS INTERFACES

microsoft.com

(relationships/ideas) (pixels/atoms)

Models can do things interfaces can’t…

Page 5: Practical Conceptual Modeling at UX Detroit Feb 2015

5

MODELS INTERFACES

microsoft.com

Why are we doing this? What is it? How do all the parts relate?

How will someone use each part? What will it look like?

Page 6: Practical Conceptual Modeling at UX Detroit Feb 2015

6

Conceptual is not the opposite of practical.

Page 7: Practical Conceptual Modeling at UX Detroit Feb 2015

7

Models become molds for making.

http://tombanwell.blogspot.com/2010/09/olifant-neoprene-trunk-hose.html

Page 8: Practical Conceptual Modeling at UX Detroit Feb 2015

8

• Gain shared understanding • Align direction • Prioritize focus • Identify assumptions • Grasp essentials about big/complex challenges

When collaborating, models help us…

… before getting tangled in the weeds.

Page 9: Practical Conceptual Modeling at UX Detroit Feb 2015

9

Models establish understanding …

project

Before DuringAfter

Page 10: Practical Conceptual Modeling at UX Detroit Feb 2015

10

Examples …

Page 11: Practical Conceptual Modeling at UX Detroit Feb 2015

11

An “Info Model” for a large medical ecosystem

Page 12: Practical Conceptual Modeling at UX Detroit Feb 2015

12

Defining the nature of a site among stakeholders

Page 13: Practical Conceptual Modeling at UX Detroit Feb 2015

13

Describing complex workflow before making the system

Page 14: Practical Conceptual Modeling at UX Detroit Feb 2015

14

How people shop / decide + supporting site functions

Page 15: Practical Conceptual Modeling at UX Detroit Feb 2015

15

Created to clarify structure of checkout for developers

Cart with Purchasable

ItemsMessaging

asking users if they would like to keep their

cart

Cart empty

Cart deleted

No?

Yes?

Cart with Purchasable

Items&

Non-Purchasable Items

Cart Non-Purchasable

Items

CheckoutConfirmation of Purchase Page

Purchasable Items

purchased

Page 16: Practical Conceptual Modeling at UX Detroit Feb 2015

16

An example going from blobs to boxes…

Page 17: Practical Conceptual Modeling at UX Detroit Feb 2015

17

Circles can help avoid implying structure prematurely …

no sides, no lines sides imply lines

Page 18: Practical Conceptual Modeling at UX Detroit Feb 2015

18

Architects’ “Bubble” Diagrams

Page 19: Practical Conceptual Modeling at UX Detroit Feb 2015

19

Architects’ “Bubble” Diagrams

wikimedia commons

Page 20: Practical Conceptual Modeling at UX Detroit Feb 2015

20

Looking for emergent patterns in all the elements …

Page 21: Practical Conceptual Modeling at UX Detroit Feb 2015

21

Finding functional priorities & centers of gravity …

… before locking down structure.

!

Page 22: Practical Conceptual Modeling at UX Detroit Feb 2015

22

From functional model to conceptual architecture …

ARTMAX HOME

[Visual Showcase]Topical / curated spotlight of brand-representative products.

PRODUCTS COMMUNITYLEARNING ACCOUNT ABOUT

[Brand Statement / Description(Links to "About")]

Latest NewsAggregated from learning, social media, community, etc. - Editorially curated (can have sticky posts)- Item from a given org links to that org's new or home. - Link to the main News area in "About"

Social Media Links

Promotion Spot

History / Mission content.

Store Managers’ Blog

Sharing (curated)- Art - Tips / Ideas (more tbd)

Events Calendar (cross-ref w/ store finder)

Intro / Overview About the community, policies, etc.

Cross-channel connections / directions / kiosk locations shortcut to ‘find store’ facet.

Company News

Store Managers’ Blog - Most Recent

Utility Nav- Search- Contact - Find Store

Footer- Required boilerplate - Business & B2B Links

Tutorials

- cross-ref w/ Products when specific to a particular catalog item

For Each Product …

(Specifics TBD)

- Attributes should include editorial ranking + user ranking

Browse by tree hierarchy + facets. (Account Specifics TBD)

2.0

3.0

3.1

4.0 6.0 7.05.0

Learning Blog / Stories

Related products

Global NavPRIMARY emphasisSECONDARY emphasis

Persistent Nav Elements

1.0

!

Page 23: Practical Conceptual Modeling at UX Detroit Feb 2015

23

• Modeling is a kind of making: it’s the craft of understanding.

• It can work at many levels of fidelity, from abstract to specific.

• You can do it whenever, to figure out big / complex concepts.

Practical Modeling

Page 24: Practical Conceptual Modeling at UX Detroit Feb 2015

24

understandinggroup.com | @undrstndng

Page 25: Practical Conceptual Modeling at UX Detroit Feb 2015

25

Page 26: Practical Conceptual Modeling at UX Detroit Feb 2015

26

Caption