Wireframes II

Typical Wireframes wireframes/ 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 navigation Basic info architecture Defines types of navigation Show main features (as opposed to functions)

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

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 Item The Page

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

Indexes Hierarchies Displaying Info Organization

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

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

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

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

Be the start of a technical spec profilenarrative feature

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

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

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

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

Hierarchical tables

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!

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