INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 8, 2012 This work is licensed under.

Slides:



Advertisements
Similar presentations
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Advertisements

INFM 700: Session 5 Techniques and Technologies (contd) Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 22, 2012 This work is licensed under.
INFM 700: Session 4 Techniques and Technologies Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 15, 2012 This work is licensed under a Creative.
Chapter 11 Designing the User Interface
INFM 700: Session 2 Principles of Information Architecture Paul Jacobs The iSchool University of Maryland Wednesday, February 1, 2012 This work is licensed.
WI.org Site Training Laura Peterson 3/31/2014.
Chapter 19 Design Model for WebApps
ORGANIZING THE CONTENT Physical Structure
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
1 COMM 1213 H1 COMP 4923 X1 HTML Page Structure and Navigation (Readings: Ch. 5 Lazar)
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
contrast, repetition, alignment, proximity
By Choksi Siddharth Dubey Anshu Karkera Prasad Shah Parth.
INFM 700 Course Review Paul Jacobs The iSchool University of Maryland May 2, 2012 This work is licensed under a Creative Commons Attribution-Noncommercial-Share.
M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic information isn’t very different n Special aspects for web.
Visual Organization and Content Organization
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Content Organisation Based on Chapter 4 Mc Cracken.
INFM 700: Session 2 Principles of Information Architecture Jimmy Lin The iSchool University of Maryland Monday, February 4, 2008 This work is licensed.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Knowledge organisation and information architecture, Nils Pharo Knowledge organisation and the Web Nils Pharo, 6th November 2002.
What do you hate most about the web?
Chapter 13: Designing the User Interface
Information Architecture Web Design – Sec 2-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Information Architecture Donna Maurer Usability Specialist.
IBE312 Information Architecture Ch. 5 Organization Systems Ch. 6 Labeling Systems 2013.
Content Management Systems Week 13 LBSC 671 Creating Information Infrastructures.
Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.
INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Tuesday, February 17, 2009 This work is licensed.
XP 1 HTML: The Language of the Web A Web page is a text file written in a language called Hypertext Markup Language. A markup language is a language that.
INFM 700 Course Review Paul Jacobs The iSchool University of Maryland Tuesday, May 5, 2009 This work is licensed under a Creative Commons Attribution-Noncommercial-Share.
1999 Asian Women's Network Training Workshop. A short discussion about Information Architecture.
Content Management Systems Week 9 INFM 603. Muddiest Points How JSON differs from XML –And how JSONP differs from JSON How Ajax works Examples of JavaScript.
1 4. Content Organization In this chapter you will learn about: Organizational schemes: classification systems for organizing content into groups Organizational.
Drupal Week 10 INFM 603. Agenda Questions Drupal Project Plan.
3231 Software Engineering By Germaine Cheung Hong Kong Computer Institute Lecture 12.
Content Management Systems Week 14 LBSC 671 Creating Information Infrastructures.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
Chapter 7 Navigation Systems From Information Architecture: Rosenfeld and Moreville.
Information Architecture Navigation. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. Client Project 2.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Developing a Web Site. Two Components of Web Site Development Systematic Planning Systematic Planning Design and Development Design and Development.
Interface Design Web Design Professor Frank. Design Graphic design and visual graphics are equally important Both work together to create look, feel and.
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
School of Information, Fall 2007 University of Texas A. Fleming Seay Information Architecture Class Four.
INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 23, 2011 This work is licensed.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
Information Design Goal: identify methods for representing and arranging the objects and actions possible in a system in a way that facilitates perception.
Information Architecture & Design Week 4 Schedule -Group Project Proposal Due -Planning IA Structures -Other Readings -Research Topic Presentations.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
C.R.A.P. (OR C.A.R.P.) FORMULA The Non-Designer’s Design Book.
4-0 MULTIMEDIA INFORMATION AND COMMUNICATION TECHNOLOGY.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 5 KEY CONCEPTS 1 Copyright ©
Objective % Select and utilize tools to design and develop websites.
INFM 700: Session 2 Principles of Information Architecture
Content Management Systems
Objective % Select and utilize tools to design and develop websites.
Chapter 17 Designing for the web
Basics of Visual Design
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Developing a Web Site.
Interface Design Interface Design
Presentation transcript:

INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 8, 2012 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

iSchool Today’s Topics Finish organization discussion Segue from organization into navigation Aspects of navigation Tools for navigation Basics of page layout and design Organization Navigation Page Layout

iSchool Organization and Navigation Organization: “How we categorize Information” (can be by subject, task, code number, alphabet, etc.) Navigation: “How we browse or move through information” (can fit with organization, or can be sequential, or much more haphazard) Navigational tools can match organization (e.g., top-level menus, breadcrumbs) or not (e.g., hyperlinks, cross-references, suggestions) Even where navigational tools reflect organization, the user’s navigation may not (think of breadcrumbs)

iSchool Analogy: Printed Book Organization System: Chapters Sections Paragraphs Navigation System: Table of contents Index Page numbers Cross-references … Established over 500 years… Not all present at the dawn of printing Users’ Needs Architecture Components Organization Systems

iSchool Organization Site organization Content organization Different organization methods/tools Expressing organization/blueprints Users’ Needs Architecture Components Organization Systems

iSchool Hierarchical Organization Systems of organization are mostly hierarchical Represents a specific mode of thinking: reductionistic, decompositional, general-to-specific Why? “Natural order” Convention and familiarity Physical limitations Cognitive limitations Hierarchies are everywhere: Human organizations Computer file systems Physical file systems Biological organisms Users’ Needs Architecture Components Organization Systems

iSchool Depth vs. Breadth “shallow but wide” “narrow but deep” What are the tradeoffs? Users’ Needs Architecture Components Organization Systems

iSchool Non-Hierarchical Systems Hypertext Direct links between different information segments Pre-dates the Web Social tagging “Wisdom of the mob” Shows what everyone else likes Web 2.0 (hype?) Users’ Needs Architecture Components Organization Systems

iSchool “Exact” Systems Alphabetical Chronological Geographical Organizational (for Intranets) Any inherent attribute of entities Users’ Needs Architecture Components Organization Systems

iSchool “Inexact” Systems Topic Task User Metaphors Hybrid Organizational (in general) Process Users’ Needs Architecture Components Organization Systems

iSchool Hypertext Diana Philip Elizabeth Charles Balmoral Tony Elizabeth Users’ Needs Architecture Components Organization Systems

iSchool Social Tagging del.icio.us flickr YouTube del.icio.us Users’ Needs Architecture Components Organization Systems

iSchool Other Organizational Tools Relational databases/tables Wizards Hybrids... Users’ Needs Architecture Components Organization Systems

iSchool Ideas in Tension Does a hierarchical organization system defeat the entire point of hypertext? Does a hierarchical organization system decrease emphasis on users? Does social tagging eliminate the need for organization systems? Users’ Needs Architecture Components Organization Systems

iSchool Organization and Behavior Bookmarks Arrangement of tabs and windows Social tagging Personal homepage Blogs Users’ Needs Architecture Components Organization Systems

iSchool So what do we do? Type of task/contentType of organization system User generated content (e.g. blogs)Structured database/form Overall site content/task Hierarchy (e.g. “buy a book”, “contact us”)Chapter/section Local site content/taskUser Tags (e.g. “cars for sale”, “product specs”) Local site content/taskHypertext (e.g., “today’s news”)Calendars/maps Frequently consulted contentTask/User/Organization Related/required content Users’ Needs Architecture Components Organization Systems

iSchool Blueprints Blueprints are diagrams outlining the organization system of an information space Can provide overview at different levels Conceptual level Physical level (i.e., how pages are actually linked) Keep it simple and uncluttered! Choose the appropriate level of detail Users’ Needs Architecture Components Organization Systems

iSchool Blueprint: Conceptual Main Homepage TeachingResearch Other Activities LBSC 690 INFM 718R INFM 700 Ph.D. Students Publications Projects IR Colloquium TREC Users’ Needs Architecture Components Organization Systems

iSchool Blueprint: Physical Index Page “other”“teaching”“research” “teaching”“research”“other” Users’ Needs Architecture Components Organization Systems

iSchool Blueprint: Conceptual Main Homepage TeachingResearch Other Activities LBSC 690 INFM 718R INFM 700 Ph.D. Students Publications Projects IR Colloquium TREC Organization Navigation Page Layout

iSchool Fitting the Pieces Together See Organization Navigation Page Layout

iSchool Design Navigation Systems Chess analogy: a few simple rules that disguise an infinitely complex game The three-part structure Openings: many strategies, lots of books about this End game: well-defined, well-understood Middle game: nebulous, hard to describe Information navigation has a similar structure! Middle game is underserved Organization Navigation Page Layout

iSchool Opening Moves Organization Navigation Page Layout

iSchool Opening Moves Organization Navigation Page Layout

iSchool Opening Moves Organization Navigation Page Layout

iSchool Opening Moves Organization Navigation Page Layout

iSchool End Game Organization Navigation Page Layout

iSchool Middle Game Organization Navigation Page Layout

iSchool Middle Game Organization Navigation Page Layout

iSchool Middle Game Organization Navigation Page Layout

iSchool Supporting the “Middle Game” Navigation systems must support moves through the information space Analogy: User views a projection of the information space Information Space Possibly Relevant Information What the user sees Organization Navigation Page Layout

iSchool Possible “Moves” n1n1 n2n2 b2b2 b1b1 s1s1 s2s2 j1j1 j2j2 narrow broaden shift jump Organization Navigation Page Layout

iSchool Navigation Patterns Movement in the organization hierarchy Move up a level Move down a level Move to sister Move to next (natural sequences) Move to sister of parent Drive to content Drive to advertisement Jump to related Jump to recommendations Organization Navigation Page Layout

iSchool Navigation Patterns $$ Mostly navigationMostly content Organization Navigation Page Layout

iSchool Types of Navigation Systems Global Shown everywhere Tells the user “what’s important” Local Shown in specific parts of the site Tells the user “what’s nearby” Contextual Shown only in specific situations Tells the user “what’s related” Organization Navigation Page Layout

iSchool You are here Remind users “where they are” Not everyone starts from the front page Don’t assume that the “back button” is meaningful Example from AmazonExample from IBM Organization Navigation Page Layout

iSchool Designing CRAPy Pages Contrast: make different things different to bring out dominant elements to mute lesser elements Repetition: repeat design throughout the interface to create consistency to foster familiarity Alignment: visually connect elements to create flow to convey organization Proximity: make effective use of spacing to group related elements to separate unrelated elements From: Saul Greenberg Organization Navigation Page Layout

iSchool CRAPy Pages: Contrast Important Less important Important Less important Important Less important Important Less important Organization Navigation Page Layout

iSchool CRAPy Pages: Repetition Block 1 My points You points Their points Block 2 Blah Argh Shrug Organization Navigation Page Layout

iSchool CRAPy Pages: Alignment Major Bullets Secondary bullet Major Bullet Secondary bullet Alignment denotes items “at the same level” Organization Navigation Page Layout

iSchool CRAPy Pages: Proximity Important Less important Important Less important Important Less important Important Less important Related Less Related Organization Navigation Page Layout

iSchool Page Layout: Conventions Navigation Content Navigation (Local) Navigation (Global) Navigation Content Navigation (Contextual) Organization Navigation Page Layout

iSchool It’s all about the grid! Natural correspondence to organization hierarchy Conveys structure Easy to implement in tables Easy to control alignment and proximity Organization Navigation Page Layout

iSchool Grid Layout: NY Times Organization Navigation Page Layout

iSchool Grid Layout: NY Times Navigation (Global) Banner Ad Another Ad Content Popular Articles Users’ Needs Organization Systems Navigation Systems Page Layout and Design

iSchool Grid Layout: ebay Organization Navigation Page Layout

iSchool Grid Layout: ebay Navigation (Global) Banner Ad Search Results Navigation (Local) Navigation (Search) Organization Navigation Page Layout

iSchool Grid Layout: Amazon Organization Navigation Page Layout

iSchool Grid Layout: Amazon Navigation (Global) Search Results Navigation (Contextual) Users’ Needs Organization Systems Navigation Systems Page Layout and Design

iSchool Navigation Overload Organization Navigation Page Layout

iSchool Beware: Navigation Overload Navigation Content More Navigation Even More Navigation Organization Navigation Page Layout

iSchool Recap of Today’s Topics Organization Systems Navigation Systems How users move through the information space Dynamic in nature Different tools/consideration at each level Reflect both user and organizational behavior Page layout and design Focus on content, repetition, alignment, proximity Use wireframes to express organization and content Organization Navigation Page Layout