Going Beyond Conventional GUIs. 2 Changing the assumptions n What happens when we step outside the conventional GUI / desktop / widgets framework? – Topic.

Slides:



Advertisements
Similar presentations
Chapter 16 Graphical User Interfaces
Advertisements

Chapter 11 Designing the User Interface
Understanding an Apps Architecture ASFA Computer Science: Principles Fall 2013.
Windows Basics An Introduction to the Windows Operating System.
JustinMind: Dynamic Panels
Computer Basics Hit List of Items to Talk About ● What and when to use left, right, middle, double and triple click? What and when to use left, right,
Chapter 16 Graphical User Interfaces John Keyser’s Modifications of Slides by Bjarne Stroustrup
CS0004: Introduction to Programming Visual Studio 2010 and Controls.
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
S.T.A.I.R.. General problem solving strategy that can be applied to a range problems.
Creating Custom Reports. 2 Design and create a custom report You can easily create custom reports based on a table or query. There are seven sections.
XP Exploring the Basics of Microsoft Windows XP1 Exploring the Basics of Windows XP.
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Exploring the Basics of Windows XP. Objectives Start Windows XP and tour the desktop Explore the Start menu Run software programs, switch between them,
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
What is a prototype? A prototype is a small scale model of your larger product. Can be a physical object, or a simple software program. Many physical.
Stanford hci group / cs376 research topics in human-computer interaction UI Software Tools Scott Klemmer 27 October 2005.
Getting Started with Linux: Novell’s Guide to CompTIA’s Linux+ (Course 3060) Section 2 Use the Linux Desktop.
Exploring the Basics of Windows XP
Revision Lesson : DESIGNING COMPUTER-BASED INFORMATION SYSTEMS.
Visual Basic 2008 Express Edition The IDE. Visual Basic 2008 Express The Start Page Recent Projects Open an existing project Create a New Project.
Ch 26 & 27 User Interfaces.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Introduction to Graphical User Interfaces. Objectives * Students should understand what a procedural program is. * Students should understand what an.
1 SWE 513: Software Engineering Usability II. 2 Usability and Cost Good usability may be expensive in hardware or special software development User interface.
Model View Controller (MVC) Rick Mercer with a wide variety of others 1.
| | Tel: | | Computer Training & Personal Development Outlook Express Complete.
London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris Automatic Studio DEV221.
Introduction to Visual Basic. Quick Links Windows Application Programming Event-Driven Application Becoming familiar with VB Control Objects Saving and.
IE 411/511: Visual Programming for Industrial Applications
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Windows3.ppt1 Objectives: l Describe the Windows 2000 user interface l Identify elements of a window Using Windows Using Windows.
Copyright © 2010 Wolters Kluwer Health | Lippincott Williams & Wilkins Introduction to Windows Chapter 2.
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.
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:
MIT 6.893; SMA 5508 Spring 2004 Larry Rudolph Lecture 4: Graphic User Interface Graphical User Interface Larry Rudolph MIT 6.893; SMA 5508 Spring 2004.
Toolglasses and Magic Lenses. 2 Reading: Eric A. Bier, Maureen C. Stone, Ken Pier, William Buxton and Tony D. DeRose, “Toolglass and magic lenses: the.
SD1230 Unit 6 Desktop Applications. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics.
Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.
Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes.
The Web User Interface. Communication medium. It used in businesses, organizations, and homes around the world. Web interface design is the design of.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Users and the Interface When designing an information system you need to have a clear idea of who the target audience is. If the target audience is an.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Software Interfaces. Learning Objectives Describe the characteristics of different types of user interfaces. Discuss the types of user interfaces which.
Basic Organization of UI Software. 2 The User Interface n Typically want to think of “UI” as only one component of an overall system – The part that “deals.
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.
Robotic Assistance. The PROBLEM Providing assistance for the Blind –What do we mean by “Blind?” Stereotypical blindness Visually impaired What assistance.
1 Visual Basic: An Object Oriented Approach 7 – The User interface.
Control Panel Patterns. What do we may when we say patterns?
Human Computer Interaction Lecture 07 The Interaction
GUI Design and Coding PPT By :Dr. R. Mall.
An Introduction to Computers and Visual Basic
Example Program DemoLowLevelEvents.java DemoHighLevelEvents.java
Unit 2 User Interface Design.
An Introduction to Computers and Visual Basic
Understand Windows Forms Applications and Console-based Applications
Lesson 1: Buttons and Events – 12/18
Cooper Part III Interaction Details Designing for the Desktop
Following Initial Design Review
Information System Design Info-440
GRAPHICAL USER INTERFACE
An Introduction to Computers and Visual Basic
PRESENTATION ON IPTV.
Model-view-controller
Human Computer Interaction
Mapping GUIs to Auditory Interfaces
Presentation transcript:

Going Beyond Conventional GUIs

2 Changing the assumptions n What happens when we step outside the conventional GUI / desktop / widgets framework? – Topic of lots of current research – Lots of open issues n But, a lot of what we have seen is implicitly tied to GUI concepts

3 Example: “Interactive TV” n Idea is now mostly dead, but was attempt to add a return channel on cable and allow the user to provide some input  interactive – I worked on this some a few years back while on sabbatical as US West – Initially thought: “just another GUI”

4 Not just another GUI because... n Why?

5 Not just another GUI because... n Remote control is the input device – Not a (decent) pointing device! n Context (& content) is different – “Couch potato” mode F only a few alternatives at a time F simple actions è Convenient to move in big chunks

6 Preview: Leads to a navigational approach Have a current object Act only at current object – Typically small number of things that can be done at the object F Often just one Move between current objects

7 Generalizing: Non-pointing input n In general a lot of techniques from GUIs rely on pointing – Example: a lot of input delivery n What happens when we don’t have a pointing device, or we don’t have anything to point to? – Extreme example: Audio only

8 The Mercator System n Designed to support blind users of GUIs – GUIs have been big advance for most – Disaster for blind users n Same techniques useful for e.g., cell phone access to desktop – Converting GUI to audio

9 Challenge: Translate from visual into audio n Overall a very difficult task n Need translation on both input and output

10 Output translation n Need to portray information in audio instead of graphics (hard) – Not a persistent medium F Much higher memory load – Sequential medium F Can’t randomly access – Not as rich (high bandwidth) as visual – Can only portray 2-3 things at once F One at a time much better

11 Mercator solution n Go to navigational strategy – only “at” one place at a time – only portray one thing at a time n But how to portray things? – Extract and speak any text – Audio icons to represent object types

12 Audio icons n Sound that identifies object – e.g. buttons have characteristic identifying sound n Modified to portray additional information – “Filtears” manipulate the base sound

13 Filtear examples n Animation – Accentuate frequency variations – Makes sound “livelier” – Used for “selected” n Muffled – Low pass filter – Produces “duller” sound – Used for “disabled”

14 Filtear examples n Inflection – Raise pitch at end – Suggests “more” – Used for “has sub-menus” n Pitch – map relative location (e.g., in menu) to change in pitch (high at top, etc.)

15 Filtear examples n Pitch + Reverberation – Map size (e.g., of container) to pitch (big = low) and reverb (big = lots) n These are all applied “over the top of” the base audio icon n Can’t apply many at same time

16 Mapping visual output to audio n Audio icon design is not easy n But once designed, translation from graphical is relatively straight forward – e.g. at button: play button icon, speak textual label n Mercator uses rules to control – “when you see this, do that”

17 Also need to translate input n Not explicit, but input domain also limited – Nothing to point at (can’t see it)! – Pointing device makes no sense n Again, pushes towards navigation approach – limited actions (move, act on current) – easily mapped to buttons

18 Navigation n What are we navigating? – Don’t want to navigate the screen F very hard (useless?) w/o seeing it – Navigate the conceptual structure of the interface F How is it structured (at UI level) F What it is (at interactor level)

19 Navigation n But, don’t have a representation of the conceptual structure to navigate – Closest thing: interactor tree – Needs a little “tweaking” è Navigate transformed version of interactor tree

20 Transformed tree n Remove purely visual elements – separators and “decoration” n Compress some aggregates into one object – e.g. message box with OK button n Expand some objects into parts – e.g. menu into individual items that can be traversed

21 Traversing transformed tree n Don’t need to actually build transformed tree – Keep cursor in real interactor tree – Translate items (skip, etc.) on-the-fly during traversal n Traversal controlled with keys – up, first-child, next-sibling, prev- sibling, top

22 Traversing transformed tree n Current object tells what output to create & where to send input – upon arrival: play audio icon + text – can do special purpose rules n Have key for “do action” – action specific to kind of interactor – for scrollbar (only) need two keys

23 Other interface details n Also have keys for things like – “repeat current” – “play the path from the root” n Special mechanisms for handling dialog box – have to go to another point in tree and return – provide special feedback

24 Mercator actually has to work a lot harder than I have described n X-windows toolkits don’t give access to the interactor tree! n Only have a few query functions + listening to the “wire protocol” – protocol is low level F drawing, events, window actions

25 Mercator actually has to work a lot harder than I have described n Interpose between client and server – query functions get most of structure of interactor tree – reconstruct details from drawing commands F amazing that they can do this – catch (& modify) events

26 Why not just use a toolkit that gives access to the tree? n To be really useful Mercator needed to work on existing “off the shelf” applications without modification (not even recompile or relink) – critical property for blind users

27 Question for the class n How would you do drag and drop in audio?

28