1. Card Sorting 2. Card SortingDefinition: Card SortingThere are often better ways toorganize data than the traditional onesthat first occur to us. Each organization ofthe same set of data expresses differentattributes and messages. It is alsoimportant to experiment, reflect, andchoose which organization bestcommunicates our messages. Nathan Shedroff, Experience Strategist 3. Definition: Card SortingMethodology Grouping and labeling with index cards,post it notes Two types:Open Participants sort cards with nopre-established categories. Useful fornew architecturesClosed Participants sort cards intopredetermined, provided groups. Usefulfor fitting content into existingarchitecturesSelf Study"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07 4. Definition: Card SortingCase Studies: Wachovia Wealth Management Group American Red Cross Mercedes Benz 5. Definition: Card SortingClass Exercise:As individuals: Take 5 minutes to think of all the events aperson could attend Write each event you come up with on aPost-It note 6. Definition: Card SortingClass Exercise:Now, as a group: Take a few minutes to organize your eventsinto categories (group & label them) Then well share some categories 7. Definition: Card SortingCharacteristics & Findings: Lumping and splitting Outliers and miscellaneous items Placing items in multiple categories Categories versus filters E.g. Free, Family, Outdoors Unique but intuitive labels E.g. Geeks 8. Definition: Card SortingNext Steps:With the results of a card sort we then can: Build consensus Refine terminology Create a site map Help define navigation 9. IDnefofinition: Card Sort ToolsPost-It PlusThis new app from 3Mallows you to scan yourPost-It Notes, organizeand share them. 10. Design 11. Site Maps 12. CDeosnicgenp: tSuaitel D MeaspigsnA site map is a high level diagramshowing the hierarchy of a system.Site maps reflect the informationstructure, but are not necessarilyindicative of the navigationstructure.- Step Two Designs 13. CDeosnicgenp: tSuaitel D Measpigsn 14. CDeosnicgenp: tSuaitel D Measpigsn 15. Page TypesThe Mercator Atlas of EuropeFrom The British Library 16. Conceptual DesignDesign: Page TypesHome Page Category Page Details Page 17. NavigationNavigation Bridge, USS Enterpriseby Serendigity, Flickr 18. GridsDesign: NavigationTypes of Navigation Site Structure major nav Hierarchical product families Function sitemap privacy Direct banner ad/shortcut Reference related links Dynamic search results Breadcrumb location Step Navigation sequencethrough forms/results Faceted Navigation filtersresultsAreas of Navigation Global universal header/footer Local left nav/right nav Local content text links, buttonsStyles of Navigation Rollover Dropdown Flyout Tabs AccordionSelf StudyAdapted from Atsushi Hasegagwas The 7 Navigation Types of Web Sites 19. GridsDesign: NavigationMega Dropdowns 20. GridsDesign: NavigationPower Footers