Nov 2002C.Watters 1 But I’m on my PDA! Device Independence Carolyn Watters Web Information Filtering Lab Faculty of Computer Science Dalhousie University.

Slides:



Advertisements
Similar presentations
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
Advertisements

HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.
Introducing new web content management tools for Priority...
Dec 2003, DRTC©C.Watters 1 Mobile Access to the Digital Library.
 Why should it be mobile?  What content should I make mobile?  What need do I serve by making my content available to mobile users?  What value does.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
Navigation Design. From the Brookfield Zoo, IL  (from Zoo)
Welcome to Our Website Comments and Suggestions Welcomed! Presented by: Vicky Green.
Section 13.1 Add a hit counter to a Web page Identify the limitations of hit counters Describe the information gathered by tracking systems Create a guest.
Unit 2 — Building Web Part B) Designing the Web. Phase 1: Planning a Web Site Like an architect designing a building, adequately planning your Web site.
TERMS TO KNOW. Programming Language A vocabulary and set of grammatical rules for instructing a computer to perform specific tasks. Each language has.
UNIT 14 Lecturer: Ghadah Aldehim 1 Websites. Introduction 2.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
Go to the MTSD Home Page In the URL add “/admin”
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
Website Research By Sophie Hiscock. Fan Marvel Website You know this website is Marvel because of the characters from the comics are in the body, which.
Web-designWeb-design. Web design What is it? Web-design features Before…
Human Factors in Web Design Mohsen Asgari. Contents WWW & Human Factors Relationship Human and Computer Interaction HCI & WWW Information Presentation.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Web site development: Basics & MS FrontPage. What I hope to demonstrate n n Basics of a good web site n n How to most effectively communicate via the.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
Lesson 8. Test 1 Topics Browser incompatibility Design Tips Site Navigation Browser- safe color Monitor resolution Content Copyright Use of tables vs.
1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.
Chapter 8 HTML Frames. 2 Principles of Web Design Chapter 8 Objectives Understand the benefits and drawbacks of frames Understand and use frames syntax.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
IA and the Small Screen Carolyn Watters & Bonnie MacKay Web Information Filtering Lab Dalhousie University.
Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
Co-director CCNA CATC - Ft. Worth, TX
The Future of Drupal and Content Delivery
DHTML.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Creating a Presentation
Dreamweaver – Setting up a Site and Page Layouts
Multimedia Design.
Usability Testing / Methods
Implementing Responsive Design UNIT I.
Designing Documents, Slides, and Screens
In this session, you will learn to:
Working in the Forms Developer Environment
Chapter 2 Developing a Web Page.
Jeff Wisniewski University of Pittsburgh
System Design Ashima Wadhwa.
Discussion Wireframes
L A B E L Marina Karapetyan.
Web Site Design Plan Checklist
Section 17.1 Section 17.2 Add an audio file using HTML
Web-design.
Information Architecture and Design I
Adding a File to a Course
Designing Information Systems Notes
Introduction With TimeCard users can tag SharePoint events with information that converts them into time sheets. This way they can report.
An Empirical Study of Web Interface Design on Small Display Devices
Improving Photo Retrieval in a User’s Browser History
Information System Design Info-440
International University of Japan
Nov 5th Inservice.
Pair Programming Assistant
A Powerpoint about ...and irony
CustomSource Online Tutorial August, 2017
Website Planning EIT, Author Gay Robertson, 2018.
Chapter 11 user support.
Step-3: Principles of Good Interface and Screen Design
Medium-Fi Prototype Rachel J and Esther G
Web Page Design Focus on Usability.
ZNA Power BI Dashboard Navigation Overview
Multipage Sites.
Adobe Acrobat DC Accessibility: Accessibility Checker
Adobe Acrobat DC Accessibility Adobe Acrobat Functionality, Part I
Tutorial Introduction to help.ebsco.com.
Presentation transcript:

Nov 2002C.Watters 1 But I’m on my PDA! Device Independence Carolyn Watters Web Information Filtering Lab Faculty of Computer Science Dalhousie University

Nov 2002 C.Watters 2 Overview Big Plan Use features Transformations Collaborations What next

Nov 2002 C.Watters 3

Nov 2002 C.Watters 4 Scenarios Full Web access on range of devices Migration between devices mid-task Collaboration including mixed devices

Nov 2002 C.Watters 5 General Picture

Nov 2002 C.Watters 6 The Problem Accessing data on a small screen is NOT the same as on a larger screen Same data for all users Device display and input get in the way!

Nov 2002 C.Watters 7 General Approach ElideTransform Syntactic Semantic Outlining Remove content Compress images Text summarization Retain Full Images Text/Tables/Forms Bickmore-Schilit Matrix

Nov 2002 C.Watters 8 Process

Nov 2002 C.Watters 9 Decomposition/Parsing HTML tag clues Frames Javascript + rules

Nov 2002 C.Watters 10 Display Composition Generate pages for display Maintain session state Maintain collaboration state

Nov 2002 C.Watters 11 Transformations Text Lists Tables Forms Images Links Scripts Applets Frames

Nov 2002 C.Watters 12 Use Features  In screens, size matters  Small screen is NOT just a small window on a large screen  Small screens do work  Scrolling minimized  Context preserved  Search added  Hierarchy used

Nov 2002 C.Watters 13 Text Transformations Chunk text to logical units Eliminate sideways scroll Keep clear context Add search

Nov 2002 C.Watters 14 Text

Nov 2002 C.Watters 15 Lists

Nov 2002 C.Watters 16 Forms

Nov 2002 C.Watters 17 Transformation

Nov 2002 C.Watters 18

Nov 2002 C.Watters 19 90% effective over 200 random sites with forms

Nov 2002 C.Watters 20 Problems Tables used as display structures Long segments Maps and images within form

Nov 2002 C.Watters 21 Tables & forms

Nov 2002 C.Watters 22 Tables  Using complete large tables on small devices  What is worth using screen space for?  Task Matters:  Simple look up task  More complicated task

Nov 2002 C.Watters 23 Tables

Nov 2002 C.Watters 24 Search only Context Search & Context Plain & search

Nov 2002 C.Watters 25 Measures  Effectiveness = % right answer for each task  Efficiency = number of clicks to get the correct answer NB: Not interested in time taken as a dependent variable

Nov 2002 C.Watters 26 Results:Effectiveness Both tasks did better on whole table For simple task --bigger screen performed better For complex task – no significant difference by size – adding context gave significant improvement search – wrong answers in complex task – worse as the screen got smaller [got to the wrong place faster or just wanted to use it ‘cause it was there!]

Nov 2002 C.Watters 27 Results Size matters for both efficiency and effectiveness Context is worth the space Search function is not necessarily helpful for complex task – Make it optional/toggable

Nov 2002 C.Watters 28 Collaboration Cross devices Between devices

Nov 2002 C.Watters 29 Collaborative sessions

Nov 2002 C.Watters 30 Session & Task Dependence

Nov 2002 C.Watters 31 Device Dependency

Nov 2002 C.Watters 32

Nov 2002 C.Watters 33

Nov 2002 C.Watters 34 Screen Collaboration Use multiple screens to provide larger view Other collaborators may be on larger screen OR smaller screens

Nov 2002 C.Watters 35 Collaboration potential

Nov 2002 C.Watters 36 Navigation Models Landmarks (bookmarks + post it notes) Overview maps (50,000 feet)

Nov 2002 C.Watters 37 Mapping Options tree sequence type DNA map

Nov 2002 C.Watters 38 Late Committal Navigation Do not click thru the hierarchy but go directly Extract enough info to decide Brush through hierarchy or list of segments Need to be able to present an overview (Focus + Context model)

Nov 2002 C.Watters 39 Brush Navigation

Nov 2002 C.Watters 40

Nov 2002 C.Watters 41

Nov 2002 C.Watters 42 Now What? User studies Development of use guidelines More on sessions More on tables Attention and inhibition characteristics

Nov 2002 C.Watters 43 Thank you!