wireframes ii. typical wireframes
Post on 04-Jan-2016
242 Views
Preview:
TRANSCRIPT
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
Dis
play
ing
Info
Typ
esNarrative full
view
Photo full view
Photo partial view
IndexesHierarchies
Dis
play
ing
Info
Org
aniza
tion
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
top related