1. Wireframes II

2. 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

3. Wireframe basic function Input to visual design Show the basic layout Show the relative importance of elements Show position of content and navigation Basic info architecture Defines types of navigation Show main features (as opposed to functions)

4. We will go a bit further You 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

5. 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

6. The logic of info presentation Header Nav Item The Page

7. Displaying Info Types Narrative full view Photo full view Photo partial view

8. Indexes Hierarchies Displaying Info Organization

9. The technology behind presentation

10. 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

11. We will go a bit further You 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

12. Inside a wider user journey I’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 feature Wizard user profiler Browse feature Wizard user profiler Facets products Viewed Favorites Social solidifiers Facets products Viewed Favorites Social solidifiers Two states One wireframe

13. banner narrative profile Preferred A Preferred B Drop off from confusion Design constraint: KISS Design constraint: Be chatty and friendly Drop off from confusion Design 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 cred Design constraint: Be trusted Drop off from cred Design constraint: Be trusted

14. We will go a bit further You 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

15. Be the start of a technical spec profilenarrative feature

16. User Profiles A user has a profile A profile has a type

17. Display profile Algorithm 1.On page display 2.query for all profile records 3.Sort by type 4.Format display 1.type = tab 2.text/id = checkbox Pseudo Query What: profile types, text and ids Where: all Pseudo Query What: profile types, text and ids Where: all

18. From Users to Phones user-profile = profile-feature = feature-phone

19. Add to profile Algorithm 1.User clicks checkbox 2.Passes profile id 3.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 Query What: number of phones Where: phone-features = profile-features Pseudo Query What: number of phones Where: phone-features = profile-features

20. Hierarchical tables

21. Pseudo Query (run mult times) What: narrative title and id Where: parentFK = current id Pseudo Query (run mult times) What: narrative title and id Where: parentFK = current id Build Narrative area Algorithm 1.Query for top level 2.Recursive query for each child level 3.Format nav the way the HTML needs it 4.Format text area the way HTML needs it 1.Formatting 2.Links!

22. Click a link Algorithm 1.Mouse over = like popup 2.Click like 3.Pass profile id 4.Use the profile id to create a user- profile record 5.Calc the number of phones with all profile-features 6.display the number above the button Pseudo Query What: number of phones Where: phone-features = profile-features Pseudo Query What: number of phones Where: phone-features = profile-features user-profile = profile-feature = feature-phone