Wireframes II. Typical Wireframes
-
Upload
nickolas-marshall -
Category
Documents
-
view
244 -
download
0
Transcript of Wireframes II. Typical Wireframes
![Page 1: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/1.jpg)
Wireframes II
![Page 2: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/2.jpg)
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
![Page 3: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/3.jpg)
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)
![Page 4: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/4.jpg)
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
![Page 5: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/5.jpg)
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
![Page 6: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/6.jpg)
The logic of info presentation
Header
Nav ItemThe Page
![Page 7: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/7.jpg)
Dis
play
ing
Info
Typ
esNarrative full
view
Photo full view
Photo partial view
![Page 8: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/8.jpg)
IndexesHierarchies
Dis
play
ing
Info
Org
aniza
tion
![Page 9: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/9.jpg)
The technology behind presentation
![Page 10: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/10.jpg)
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
![Page 11: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/11.jpg)
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
![Page 12: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/12.jpg)
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
![Page 13: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/13.jpg)
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
![Page 14: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/14.jpg)
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
![Page 15: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/15.jpg)
Be the start of a technical spec
profile narrative
feature
![Page 16: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/16.jpg)
User Profiles
A user has a profile
A profile has a type
![Page 17: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/17.jpg)
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
![Page 18: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/18.jpg)
From Users to Phones
user-profile = profile-feature = feature-phone
![Page 19: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/19.jpg)
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
![Page 20: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/20.jpg)
Hierarchical tables
![Page 21: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/21.jpg)
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!
![Page 22: Wireframes II. Typical Wireframes](https://reader035.fdocuments.net/reader035/viewer/2022070401/56649f1d5503460f94c34c07/html5/thumbnails/22.jpg)
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