info 330 forward engineering project physical design

Post on 31-Mar-2015

216 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

INFO 330

Forward Engineering ProjectPhysical Design

The Project

Logical DesignFigure it out

2. Physical Design2. Build it

Logical Design

User studiesInfo modelFunnel designPage design

1. Physical Design

Database design2. Page Prototypes3. Templates4. Code spec

KNOW THE USER AND INFO

MichelleWhat’s the coolest car for me?

Info need: - What kinds of cars are there?- How do you buy a car?- What do my friends think?- What car suits my personality?- What can I afford ?

Info behavior: - Ask my friends & family- Look at a lot of cars and think- Google for certain cars- Look at lots of pictures/videos

Info type: Cool Car - Only most basic car facts- Lots of info on styling - Lots of media- Stories and anecdotes- Make it easy to share- Logistics not statistics - Chatty and friendly style

DESIGN THE INFO

Info Type Logical Model

Info type: Cool Car Content- Only most basic car facts- Lots of info on styling - Lots of media- Stories and anecdotes- Logistics not statistics

Controlled vocab

Cool Car

namestreet1street2 (o)citystatezipphoneemailfacebookURL (o)rating (0)shortDescription (basic rt)longDescription (full rt)

Dealer

Info need: - What kinds of cars are there?- How do you buy a car?- What do my friends think?- What car suits my personality?- What can I afford ?

nameshortDescription (basic rt)longDescription (full rt)featuresextras (o)personalityTraitsbestUseswhoOwnsOne (o)mediastories (o)price

Basic Rich Text• p

• b• i• u

Full Rich Text• p • ul• ol• media• b, i, u,• Inline link (e

or i) in p, li

Info need: - What kinds of cars are there?- How do you buy a car?- What do my friends think?- What car suits my personality?- What can I afford ?

Info behavior: - Ask my friends & family- Look at a lot of cars and think- Google for certain cars- Look at lots of pictures/videos

Hierarchy

Index

Association

Sequence

Index

Sequence

Index

Association

Association

Association

Hierarchy

Index (car)

SequenceAssociation

• Cars by type

• Cars like this one• Other dealers with

this car

• Features• Personality trait• Uses• Owners• Price• Car name

• Steps to buying a car• Cars we want you to see• Top Dealers• Index search results

Index (dealer)

• Zip• City• Name

Full text Index

• Car.longDesc• Dealer.longDesc

Access Structure Logical Model

IMPLEMENT THE INFO

Data model

DESIGN THE EXPERIENCE

Dealer Funnel

car

Goo

gle,

FB

post

s, A

ds o

n ot

her s

ites

car

car

car

car

car

Car at dealer

Car at dealer

Car at dealer

Car at dealer

car

car

car

car

car

Car at dealer

Car at dealer

Car at dealer

Drive one

Drive one

Buy one

Flow Conversion Success!!

Landing

Michelle’s Journey

I’m unsure of what car I want

I am on the trail of the car I want

I found one I want

You made me even more confused

I lost the scent I can’t decideI don’t trust the dealer

What I see helps me

I found some good cars

The Car For You Site

Landing Page(Car full view)

World

• Google Page Rank• Partial View Ad• Facebook Post

Faceted SearchResult Sequence

Associations by car attributes

Drive one

What I see helps me

Price sortLocation sort

Other cars at dealer

I found good car models

Car-Dealer Page

My type of cars is for sale around here

I want this carI trust this dealer

My Cars Page

I found some good cars and dealers

I want this carI trust this dealer

LikesViewed

Saved SearchAssociations by car attributes

IMPLEMENT THE EXPERIENCE

qiuxian-ed.blogspot.com

www.inovdesigns.com

jonas.follesoe.no

37signals.com

www.mikehill33.com

Prototypes

From logical to physical

Wireframes – half way to physical

Deliverable- Page Prototypes

• Done in HTML (at what ever level you can)– Don’t sweat browser compatibility (say which one)

• At least your two info type full-view pages• Visual

– As close to a real look and feel as you can– CSS for styling

• Functional– As much UI behavior as you can make happen– JS for behavior

• Content– As much real content as you can find/create– One full item of each type– As much about other items to make the prototype real(ish)

http://twitter.github.io/bootstrap/

http://twitter.github.io/bootstrap/

What should happen between wireframes and page design

• You get real about the design you are able to create

• You add lots to the info/data model• You find access structures that don’t fit but

need to• You drop stuff that seemed so good• You come to grips with screen real estate• You spend a lot of time on stuff that seemed

trivial in the wireframes

Deliverable: Controlled Vocabularies

• In Word or Excel• At least three• At least two sources on the web that help you

construct the list• The list– Flat lists– Hierarchical lists (taxonomies)

• Used in your page prototypes

Next week

• No class Monday– I’ll record the lecture

• Templates– Break your page prototypes into

• Page level templates• Area level templates

– Turn mock-up content into template commands• Code spec– Queries– Logic– Functions for features

My Page Prototype

top related