info 330 forward engineering project physical design
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
www.smashingmagazine.com
Prototype Facets - Wireframes
X
X
X
www.smashingmagazine.com
Prototype Facets – Page proto
X
X
X
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