IAT 355 1 1 Scent, or Interaction & Navigation ______________________________________________________________________________________ SCHOOL OF INTERACTIVE.

Slides:



Advertisements
Similar presentations
Jestek Web Site SITE DELUX Making Web Site Changes: Basic Tutorial
Advertisements

© Tan,Steinbach, Kumar Introduction to Data Mining 8/05/ Data Mining: Exploring Data Lecture Notes for Chapter 3 Introduction to Data Mining by Tan,
Chapter 12 Creating and Using Templates. If you have already created and designed a page you like, you can use the layout and design for other pages in.
IAT 355 Basic Tasks with Interactive Example: EZChooser, Chapter 2 of Spence ______________________________________________________________________________________.
Microsoft Expression Web-Illustrated Unit L: Using Code Tools.
Richard Yu.  Present view of the world that is: Enhanced by computers Mix real and virtual sensory input  Most common AR is visual Mixed reality virtual.
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.
1 i247: Information Visualization and Presentation Marti Hearst Interactive Multidimensional Visualization.
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Inventory Throughout this slide show there will be hyperlinks (highlighted in blue) follow the hyperlinks to navigate to the specified Topic or Figure.
The Internet & The World Wide Web Notes
Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.
Chat with a librarian 24/7!. What is AskAway? AskAway is an interactive online service that allows you to chat with a librarian, much like Instant Messaging.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Spring /6.831 User Interface Design and Implementation1 Lecture 3: Visibility.
Instructional Guide. How does EasyBib make research easier? Citation Generation Easily create a bibliography Export to Word or Google Docs fully formatted.
Mestrado em Informática Médica SIntS 13/14 – T5 Design Concepts Miguel Tavares Coimbra.
Design for Interaction Rui Filipe Antunes
June 6, 2014 IAT Interaction ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS +
1 HTML – HyperText Markup Language Representation and Management of Data on the Internet.
Scent Trails: Integrating Browsing and Searching on the Web Christopher Olson et al. Blake Adams November 4, 2003.
Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.
Cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page:
Review session for Web development. Time line of the internet history When was the ARPANET first demostrated? When did the NFSNet replace it? When did.
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.
Calibration & Measurements. Calibrating the System Before we can make any measurements we need to calibrate our imaging system to create real world numbers.
User Interfaces & IR Readings Review - Googling Further - HomeFinder Live Demos!
Ch 9 Colors Yonglei Tao School of Computing & Info Systems GVSU.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Powerpoint as a Multimedia Platform Matt Monjan Discovery Educator Network.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright.
Spreadsheet Engineering Builders use blueprints or plans – Without plans structures will fail to be effective Advanced planning in any sort of design can.
User Interface Components Lecture # 5 From: interface-elements.html.
Websites with good heuristics Irene Wachirawutthichai.
A Tutorial By Jennifer Wagner
Chapter 3 Response Charts.
Tight Coupling of Dynamic Query Filters with Starfield Displays / Spotfire.net Desktop By Chris Ahlberg and Ben Shneiderman / Spotfire Inc. IC280 5/9/02.
Computer Science 160 Group 5 Scott Carter, Chuck Moidel, Leila Takayama, Kevin Wang Tuesday, December 4, 2001.
Intermacs Form Download Excel Tutorial Pivot Tables, Graphic Tools, Macros By: Devin Koehl.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
Oct 091 Example Program DemoInputValidation1.java DemoInputValidation2.java.
Text Mapping for Technology Watch A research application Z. Jacobson, CA.
TEISS Interface Review Melinda Ronca-Battista, ITEP.
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.
Color Theory. Primary Colors Colors that cannot be created by mixing others.
COMP 143 Web Development with Adobe Dreamweaver CC.
Review session for Web development. Today’s class Review the web designing. Filling out instructor evaluation form.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
1 INTRODUCTION TO COMPUTER GRAPHICS. Computer Graphics The computer is an information processing machine. It is a tool for storing, manipulating and correlating.
XP Creating Web Pages with Microsoft Office
© 2011 DigitalDay | MOBILE WEB INFORMATION ARCHITECTURE Best Practices Workshop 1.
IAT 355 Basic Tasks with Interactive Example
Add More Zing to your Dashboards – Creating Zing Plot Gadgets
Usability Testing and Web Design
Color Theory in Web Design
Elements of Design.
Design patterns in HCI.
Designing Information Systems Notes
Elements of Design.
TEISS Interface Review
Usability Case Study: Datamaps Visualization
The big boring complex industry I’m referring to is financial services
TEISS Interface Review
Designing for the World Wide Web
Where am I? Navigating a website: Browsing, searching, menus & breadcrumbs.
Presentation transcript:

IAT Scent, or Interaction & Navigation ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] |

Jun 9, 2014 IAT Interaction In discrete information spaces, need ability to move from current to new view Discrete Info space? –Situations where there are discrete queries Web Between moves in dynamic query

Jun 9, 2014 IAT Discrete information space Stepped interaction Figure 5.2

Jun 9, 2014 IAT Figure 5.3 Discrete information space Continuous interaction Responsive system

Jun 9, 2014 IAT Figure 5.5 Continuous interaction Continuous relation Immediate response Preliminary calculation may be needed

Jun 9, 2014 IAT Figure 5.6 Two classes of information space

Jun 9, 2014 IAT Figure 5.7 Information spaces, interaction modes and examples of their combination

Jun 9, 2014 IAT Figure 5.8 Norman’s Action Cycle Norman’s Action Cycle

Jun 9, 2014 IAT Perceive-Think-Act In small-scale visualizations, this is easy –Select variable to map to X –Select color of Honda Cars In large-scale info spaces, the volume of data is too large Must be selected, or Navigated through –WWW

Jun 9, 2014 IAT Navigation Questions Where am I? Where can I go? How do I get there? What lies beyond? Where can I usefully go? Where have I been?

Jun 9, 2014 IAT Sensitivity A movement in information space and the interaction required to achieve it SM – Sensitivity Movement –Visible cues to future locations Labeled hyperlinks on web Signs, labeled doors in real life SI – Sensitivity Interaction –Actions you can take to change location Click on a button pass through door

Jun 9, 2014 IAT Black encoding of houses that fail one attribute limit provides sensitivity information SM, SI SM: Black bars indicate that only one attribute does not satisfy SI: Range sliders under each histogram

Jun 9, 2014 IAT Figure 5.22 In a limit positioning tool colour coding indicates that selection will be unaffected while the lower limit stays within the white region. When a limit moves into the yellow region selection will be affected SM, SI SM: Yellow range shows “populated” region of parameter SI: Arrowheads

Jun 9, 2014 IAT Where can I go? Often answered by displaying possibilities In InfoVis case, showing what is in and/or beyond current range –Outlook: Preview content –Google: Show context or search terms –Dynamic Query: next slide

Jun 9, 2014 IAT Figure 5.24 A possible modification to the Dynamic Queries interface. Houses violating only one limit are identified, so that sensitivity is explicit rather than having to be discovered by manual movement of the limits

Jun 9, 2014 IAT Figure 5.25 In the EZChooser outline cars are those that satisfy all requirements except one. Selection of the range immediately underneath an outline car ensures that the car then satisfies all requirements

Jun 9, 2014 IAT Figure 5.49 Limits placed on the four stresses S1 to S4 have been brushed into the parameter histograms, with red designs indicating those which satisfy all limits on S1, S2, S3 and S4

Jun 9, 2014 IAT Figure 5.50 A prosection matrix associated with a design involving four parameters. Red indicates the location of designs that satisfy all performance limits. Yellow defines the regions within which the designs of a mass-produced design will lie as a result of manufacturing tolerances on the parameters

Jun 9, 2014 IAT Residue An indication of distant content in SM encoding

Jun 9, 2014 IAT Scent Scent: The perceived benefit associated with a movement in information space, evaluated as one interprets one or more cues Where can I usefully go from here?

Jun 9, 2014 IAT Figure 5.31 The relation between sensitivity, residue and scent remote content Residue (= cue encoding remote content) sensitivity cues SM and SI encoding Interpreted sensitivity cues and residues scent human evaluation of the benefit of available SMs human interpretation

Jun 9, 2014 IAT DateLens Search for HCIL: Highlight yellow Yellow highlights extend beyond visible region in scrollbar

Jun 9, 2014 IAT Where am I? Navigational aids

Jun 9, 2014 IAT Figure 5.39 Available paths from the current location in discrete information space

Jun 9, 2014 IAT Figure 5.40 Location breadcrumbs (red) provide an awareness of the structure of a site within which the current location resides

Jun 9, 2014 IAT Figure 5.41 An example of path breadcrumbs within a website