Wireframes II

Typical Wireframes

http://www.strangesystems.net/archives/2005/03/using_wireframe.php

http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

http://www.york.ac.uk/communications/websites/content/dreamweaver/page-structure/

http://www.akendi.ca/software-ux-user-experience-gui-design/gui-wireframes-diagram-design.php

Wireframe basic function

Input to visual design• Show the basic layout• Show the relative importance of elements• Show position of content and navigationBasic info architecture• Defines types of navigation• Show main features (as opposed to functions)

We will go a bit furtherYou wireframe will also:• Be the start of a template

– Areas and sub areas– End user labeling

• Be inside a wider user journey– Expected path in– Preferred path(s) out to promote success– Drop-off mitigations

• Be the start of a technical specification– Data views– Functions– Queries

Be the start of a template

Given the structure of our info (types and access structures)• What is the logic of how our site presents that

info?• What is the technology for presenting info

and functionality?• What is “boilerplate” and what varies?

Templates are programs

The logic of info presentation

Header

Nav ItemThe Page

Disp

layi

ng In

fo T

ypes

Narrative full view

Photo full view

Photo partial view

IndexesHierarchies

Disp

layi

ng In

fo O

rgan

izatio

n

The technology behind presentation

The same and different info

• What is the same? Put it in the template– Layout– Styling– Labeling

• What is different? Fill it into the template– Values under the labels– Parameters for functions– Layout, styling, and labeling variations

We will go a bit furtherYou wireframe will also:• Be the start of a template

– Areas and sub areas– End user labeling

• Be inside a wider user journey– Expected path in– Preferred path(s) out to promote success– Drop-off mitigations

• Be the start of a technical specification– Data views– Functions– Queries

Inside a wider user journeyI’m unsure of what I want

I have an idea of what I want

I am committed to some specific ones

You made me even more confused

I can’t narrow down

I can’t decide

Browse featureWizard

user profiler

Facetsproducts Viewed

FavoritesSocial solidifiers

Two states One wireframe

banner

narrative

profilePreferred A

Preferred B

Drop off from confusionDesign constraint: KISS

Design constraint: Be chatty and friendly

In from Google: What phone to buy -- Where to start with phones -- What kind of phones are there – About cell phones– mobile phones

for dummies

Drop off from credDesign constraint: Be trusted

We will go a bit furtherYou wireframe will also:• Be the start of a template

– Areas and sub areas– End user labeling

• Be inside a wider user journey– Expected path in– Preferred path(s) out to promote success– Drop-off mitigations

• Be the start of a technical specification– Data views– Functions– Queries

Be the start of a technical spec

profile narrative

feature

User Profiles

A user has a profile

A profile has a type

Display profile

Algorithm

1. On page display2. query for all profile

records3. Sort by type4. Format display

1. type = tab2. text/id = checkbox

Pseudo QueryWhat: profile types, text and idsWhere: all

From Users to Phones

user-profile = profile-feature = feature-phone

Add to profile

Algorithm

1. User clicks checkbox2. Passes profile id3. Use the profile id to

create a user-profile record

4. Calc the number of phones with all profile-features

5. Display the number in the button

6. Select chosen checkboxes in the screen from now on

Pseudo QueryWhat: number of phonesWhere: phone-features = profile-features

Hierarchical tables

Pseudo Query (run mult times)What: narrative title and idWhere: parentFK = current id

Build Narrative areaAlgorithm

1. Query for top level2. Recursive query for each

child level3. Format nav the way the

HTML needs it4. Format text area the way

HTML needs it 1. Formatting 2. Links!

Click a link

Algorithm

1. Mouse over = like popup2. Click like3. Pass profile id4. Use the profile id to create a

user- profile record5. Calc the number of phones

with all profile-features6. display the number above

the button

Pseudo QueryWhat: number of phonesWhere: phone-features = profile-features

user-profile = profile-feature = feature-phone