1 / 22

Wireframes II

Wireframes II. Typical Wireframes. http://www.akendi.ca/software-ux-user-experience-gui-design/gui-wireframes-diagram-design.php. http://www.strangesystems.net/archives/2005/03/using_wireframe.php. http://www.york.ac.uk/communications/websites/content/dreamweaver/page-structure/.

neka
Télécharger la présentation

Wireframes II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Wireframes II

  2. Typical Wireframes http://www.akendi.ca/software-ux-user-experience-gui-design/gui-wireframes-diagram-design.php http://www.strangesystems.net/archives/2005/03/using_wireframe.php http://www.york.ac.uk/communications/websites/content/dreamweaver/page-structure/ http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

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

  7. Photo full view Displaying Info Types Narrative 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 Two states One wireframe I’m unsure of what I want Browse feature Wizard user profiler I have an idea of what I want Facets products Viewed Favorites Social solidifiers You made me even more confused I am committed to some specific ones I can’t narrow down I can’t decide

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

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

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

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

  19. Add to profile Algorithm User clicks checkbox Passes profile id Use the profile id to create a user-profile record Calc the number of phones with all profile-features Display the number in the button Select chosen checkboxes in the screen from now on Pseudo Query What: number of phones Where: phone-features = profile-features

  20. Hierarchical tables

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

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

More Related