Navigation If it is difficult to use, it will not be used (simple, huh?) User needs to know: where am I? where have I been? who am I? where can I go from.

Slides:



Advertisements
Similar presentations
Introduci ng :. .NET Presentation Overview: Summary of.NET Benefits Software Architecture.NET Screens Overview The purpose of this presentation is to.
Advertisements

3.02C Website Organization
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
UEC 01 : Computer Skills & Programming Concepts I 1PUA – Computer Engineering Department – UEC01 – Dr. Mona Abou - Of Lecture 10: Presentation Graphic.
© 2011 PetroSkills, LLC. All rights reserved Launch your PetroSkills company web browser. 2. Enter your User ID and Password. 3. Click the Login.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.
Web Site Navigation.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Multimedia Design Guidelines General Guidelines for Multimedia Learning Design.
Help and Documentation zUser support issues ydifferent types of support at different times yimplementation and presentation both important yall need careful.
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Help and Documentation CSCI324, IACT403, IACT 931, MCS9324 Human Computer Interfaces.
Principles and Methods
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
PowerPoint Lesson 1 Microsoft PowerPoint Basics
Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.
ARCHIBUS Log On Instructions. Log Into ARCHIBUS Web Central Log In Screen 1.Open your Internet browser. 2.Enter the URL to view the ARCHIBUS Login Page.
In the Sandbox Playing with SkillPort 7 for the first time.
Classroom User Training June 29, 2005 Presented by:
CS 275Tidwell Course NotesPage 33 Chapter 3: Getting Around In complex software applications, it is critical to reveal where the user currently is, as.
Advanced Forms Lesson 10.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Where Innovation Is Tradition SYST699 – Spec Innovations Innoslate™ System Engineering Management Software Tool Test & Analysis.
ORGANIZING THE CONTENT INFORMATION ARCHITECTURE AND APPLICATION STRUCTURE September 11 th, 2009.
Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.
1 SWE 513: Software Engineering Usability II. 2 Usability and Cost Good usability may be expensive in hardware or special software development User interface.
Chapter Seven: Presentation Software (MS PowerPoint 2007) Author(s): Ahmed Dalalah, Ahmed Abusalameh, Mohammad AlZoubi & Khaled Dajani (Prepared By: Ahmed.
CHAPTER 9 Introducing Microsoft Office Learning Objectives Start Office programs and explore common elements Use the Ribbon Work with files Use.
Designing a Graphical User Interface (GUI) Krisana Chinnasarn, Ph.D. January 2007.
Microsoft Office 2007 PowerPoint Web Feature Creating Web Pages Using PowerPoint.
Internet Browsing the world. Browse Internet Course contents Overview: Browsing the world Lesson 1: Internet Explorer Lesson 2: Save a link for future.
Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
MULTIMEDIA DEFINITION OF MULTIMEDIA
GSA’s Vendor and Customer Self Service (VCSS). Login to VCSS  To login to VCSS, perform the following steps: 1.Go to the GSA launch page (
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.
Presentation Software IT DOES NOT HAVE TO BE POWERPOINT.
Usability and Accessibility CIS 376 Bruce R. Maxim UM-Dearborn.
Why do we need good user interfaces?. Goals of User Interfaces Usable – how much effort to do a task? – example: often-used buttons easier to find – example:
Interface Design Inputs and outputs –data flows to and from external entities –data flows into and out of processes that are manual or not fully automated.
3.02C Website Organization 3.02 Develop webpages..
Navigation and Tools Why do you need to plan your navigation? What does the user may need to know? Location: “Where am I now?” Options: “Where can I go.
Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:
Chap#11 What is User Support?
CS3041 – Final week Today: Searching and Visualization Friday: Software tools –Study guide distributed (in class only) Monday: Social Imps –Study guide.
User Interface Objects From Beginning iPhone 4 Development and The iPhone Developer’s Cookbook (Chapter 4)
Building Dashboards SharePoint and Business Intelligence.
Pad++: A Zoomable Graphical User Interface. Motivations View information at multiple scales –Semantic zooming Tap into natural spatial ways of thinking.
Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
Know your Operating System Thanks to Dina Sokol. An operating system is software (a computer program) that manages your computer.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
What’s New in SkillPort 7 for the End User. The Login Page Customize the login page Add your logo, change colors, graphics and welcome text.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Information Design Goal: identify methods for representing and arranging the objects and actions possible in a system in a way that facilitates perception.
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.
Exploring Microsoft Excel 97 Appendix A: Toolbars Office graphic copyright by Microsoft Corp.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
DOCUMENTATION REF: Essentials of IT (Hamilton et al) Chapter 1.
Game Creation Terminology. Procedure A set of instructions that performs a specific routine when required at several different points in the game. EXAMPLE:
Chapter 2 – Introduction to Windows Operating System II Manipulating Windows GUI 1CMPF112 Computing Skills for Engineers.
Web-based structures, links and testing
Designing for the World Wide Web
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
CIS 376 Bruce R. Maxim UM-Dearborn
MACROS MUST BE ENABLED FOR THIS FILE TO WORK
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Presentation transcript:

Navigation If it is difficult to use, it will not be used (simple, huh?) User needs to know: where am I? where have I been? who am I? where can I go from here? how can I get there? Care about Usability

How to measure Usability? speed of performance of some activity incidence of errors while performing act. user’s ability to recover from errors task magnitude in learning to use the system user’s retention of learned skills user’s ability to customize the system user’s satisfaction with the system You have arrived when the user thinks: “Interface? What interface?”

Navigation Tools Why do you need to plan your navigation? Location: “Where am I now?” Options: “Where can I go from here?” Path: “How do I get there?” History: “What have I already explored/learned?” Microworld: “How much more is there to explore?” Node structures Navigation aids Boston

Node Structures & Navigation Aids Linear circular Jump-linear wheel Rooted tree general tree binary tree Network Single-frame techniques Combination Menus Navigation maps Metaphors Histories Travel buttons Progress indicators

Node structure: Linear/CircularLinear Follows predefined path Good for zooming in/out sorted list animation sequence

Node structure: WheelWheel Predefined path with interruption Good for: sorted and unsorted list list slide show continuous animation

Node structure: Rooted treeRooted Most intuitive navigation Good for hypertext web browsers without maps organization chart hierarchies games with choices decisions

Node structure: Rooted tree (2) Warning: jumping between cousin and uncle nodes is particularly confusing people lose the hierarchical intuition

Node structure: NetworkNetwork Most general structure Good for adventure games web browsers with maps

Node structure: Framing (front-end) Framing Ultimate navigation (seems non-existent) Display windows (e.g. lexicon) Filtering (e.g., in FIND) Sub-screen detailing (e.g., zooming, see & point)

Combination of Node structures Case study: Broderbund kids’ Books

Navigation Aids Menus When to use: Navigation maps When to use: Metaphors When to use: Histories When to use: Travel buttons When to use: Progress indicators When to use:

Navigational Aids: Menus Full screen menus: explicit options text-only menus text & graphics menus graphics-only menus Hidden menus: options Pull-down menus Pop-up menus

Navigational Aids: Maps One of the best navigational aids They show the big/whole picture contents structure Linkage The WWW cannot implement them easily

Navigational Aids: Metaphors Common ones from office objects books cassette-players film projectors geography maps Very often they generate terminology and become “slang”

Navigational Aids: Histories Provide information about “where you have been so far” Combined with navigational structures provide a strong navigational tool Choose what to include since they grow very fast

Navigational Aids: Travel buttons Home, Next, Previous, Back, Beginning, Quit Traditionally the only/main navigational aid Explicitly denote options Should remain in same relative position Related buttons should be grouped

Navigational Aids: Progress indicators Very useful when there is a mass to be covered Thermometers, gauges, clocks, filled bars,...