User Interface Software Projects

Similar documents
Chapter 2 Understanding and Conceptualizing Interaction. Anna Loparev Intro HCI University of Rochester 01/29/2013. Problem space

Vorlesung Mensch-Maschine-Interaktion

CSE440: Introduction to HCI

Alternative Interfaces. Overview. Limitations of the Mac Interface. SMD157 Human-Computer Interaction Fall 2002

Sketching and Storyboarding

CS 315 Intro to Human Computer Interaction (HCI)

RV - AULA 05 - PSI3502/2018. User Experience, Human Computer Interaction and UI

Direct Manipulation. and Instrumental Interaction. CS Direct Manipulation

Diseño y Evaluación de Sistemas Interactivos COM Affective Aspects of Interaction Design 19 de Octubre de 2010

Human Computer Interaction Lecture 04 [ Paradigms ]

Effective Iconography....convey ideas without words; attract attention...

Outline. Paradigms for interaction. Introduction. Chapter 5 : Paradigms. Introduction Paradigms for interaction (15)

What was the first gestural interface?

Interface Design V: Beyond the Desktop

HUMAN COMPUTER INTERFACE

Today. Sketching and Toolkits. Questions? Announcements 10/02/2017. February 9, Finishing coding activity. Sketching.

Speech Controlled Mobile Games

Beyond Actuated Tangibles: Introducing Robots to Interactive Tabletops

SKETCHING THE UX: METHOD. Lesson 11 Sketching the UX: 10 plus 10 method

SKETCHING THE UX: METHOD. Lesson 11 Sketching the UX: 10 plus 10 method

A SURVEY OF SOCIALLY INTERACTIVE ROBOTS

Storyboarding CHAPTER 1

Sketching Interface. Larry Rudolph April 24, Pervasive Computing MIT SMA 5508 Spring 2006 Larry Rudolph

Microsoft Scrolling Strip Prototype: Technical Description

Sketching Interface. Motivation

ARMY RDT&E BUDGET ITEM JUSTIFICATION (R2 Exhibit)

GLOSSARY for National Core Arts: Media Arts STANDARDS

SIMULATION MODELING WITH ARTIFICIAL REALITY TECHNOLOGY (SMART): AN INTEGRATION OF VIRTUAL REALITY AND SIMULATION MODELING

INTERACTION AND SOCIAL ISSUES IN A HUMAN-CENTERED REACTIVE ENVIRONMENT

Seaman Risk List. Seaman Risk Mitigation. Miles Von Schriltz. Risk # 2: We may not be able to get the game to recognize voice commands accurately.

Keywords: Human-Building Interaction, Metaphor, Human-Computer Interaction, Interactive Architecture

Interacting within Virtual Worlds (based on talks by Greg Welch and Mark Mine)

The 8 th International Scientific Conference elearning and software for Education Bucharest, April 26-27, / X

Touch & Gesture. HCID 520 User Interface Software & Technology

West Windsor-Plainsboro Regional School District Computer Programming Grade 8

Multi-Modal User Interaction

CHAPTER 1 DESIGN AND GRAPHIC COMMUNICATION

Understanding OpenGL

AIEDAM Special Issue: Sketching, and Pen-based Design Interaction Edited by: Maria C. Yang and Levent Burak Kara

ELEMENTARY TECHNOLOGY OVERVIEW GRADES K 6

Advancements in Gesture Recognition Technology

- applications on same or different network node of the workstation - portability of application software - multiple displays - open architecture

Envision original ideas and innovations for media artworks using personal experiences and/or the work of others.

Project Lead the Way: Principles of Engineering, (POE) Grades 9-12

8.1 Educational Technology A. Technology Operations and Concepts Pre-K

Direct Manipulation. and Instrumental Interaction. Direct Manipulation 1

Project Lead the Way: Civil Engineering and Architecture, (CEA) Grades 9-12

Classifying 3D Input Devices

NICE: Combining Constructionism, Narrative, and Collaboration in a Virtual Learning Environment

Classifying 3D Input Devices

Direct Manipulation. and Instrumental Interaction. Direct Manipulation

West Windsor-Plainsboro Regional School District Architectural Design and Fabrication

A Brief Survey of HCI Technology. Lecture #3

ENHANCED HUMAN-AGENT INTERACTION: AUGMENTING INTERACTION MODELS WITH EMBODIED AGENTS BY SERAFIN BENTO. MASTER OF SCIENCE in INFORMATION SYSTEMS

A Kinect-based 3D hand-gesture interface for 3D databases

UI Sketching. Revision of Ideas. Why Sketch? Getting the Design Right

Tangible User Interfaces

Adobe Photoshop Chapter 1 Study Questions /50 Total Points

Human Computer Interaction (HCI, HCC)

Designing Semantic Virtual Reality Applications

Application Areas of AI Artificial intelligence is divided into different branches which are mentioned below:

Pearson Education Limited Edinburgh Gate Harlow Essex CM20 2JE England and Associated Companies throughout the world

RingEdit: A Control Point Based Editing Approach in Sketch Recognition Systems

1 Sketching. Introduction

Touch & Gesture. HCID 520 User Interface Software & Technology

Tangible interaction : A new approach to customer participatory design

Technology designed to empower people

Pervasive design. Håkan Gulliksson 3 rd edition 2014

ACTIVE, A PLATFORM FOR BUILDING INTELLIGENT OPERATING ROOMS

Knowledge Enhanced Electronic Logic for Embedded Intelligence

GIMP (GNU Image Manipulation Program) MANUAL

Human-Computer Interaction

Project Multimodal FooBilliard

Immersive Visualization and Collaboration with LS-PrePost-VR and LS-PrePost-Remote

Usability Evaluation of Multi- Touch-Displays for TMA Controller Working Positions

2018 Avanade Inc. All Rights Reserved.

CPE/CSC 580: Intelligent Agents

Augmented Home. Integrating a Virtual World Game in a Physical Environment. Serge Offermans and Jun Hu

Milestone 2. Presentation Demonstration? Due July 5 th at noon. Additional requirements info User testing results

CONTENT RICH INTERACTIVE, AND IMMERSIVE EXPERIENCES, IN ADVERTISING, MARKETING, AND EDUCATION

Abstract. Keywords: Multi Touch, Collaboration, Gestures, Accelerometer, Virtual Prototyping. 1. Introduction

Learning Guide. ASR Automated Systems Research Inc. # Douglas Crescent, Langley, BC. V3A 4B6. Fax:

Virtual components in assemblies

Design and Manufacturing 1

Paper Prototyping Kit

The student will understand ethical behavior and be able to demonstrate sound understanding of technological concepts.

Cognition-based CAAD How CAAD systems can support conceptual design

Gestaltung und Strukturierung virtueller Welten. Bauhaus - Universität Weimar. Research at InfAR. 2ooo

Computing Overview Breadth of Study. Autumn Spring Summer

PiXL Independence. Technology Answer Booklet KS4. CAD, CAM and ICT. Contents: I. Multiple Choice Questions 10 credits in total

Lab 7: Introduction to Webots and Sensor Modeling

2009 New Jersey Core Curriculum Content Standards - Technology

Preserving the Freedom of Paper in a Computer-Based Sketch Tool

Until now, I have discussed the basics of setting

DESIGN THINKING AND THE ENTERPRISE

Context-based bounding volume morphing in pointing gesture application

Getting Started Guide

Creo Parametric Primer

Lesson Title Art Form Grade Level. Media. Grade Level Theme Key Concept Link. Perception of Self Identity/Social Roles Watercolor Portraits

Project Lead the Way: Robotics Grades 9-12

Transcription:

User Interface Software Projects Assoc. Professor Donald J. Patterson INF 134 Winter 2012 The author of this work license copyright to it according to the Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License http://creativecommons.org/licenses/by-nc-sa/3.0/us/

Understanding and Conceptualizing Interaction Content derived from Rogers, Sharp and Preece http://www.id-book.com/

Interaction types Instructing issuing commands and selecting options Conversing interacting with a system as if having a conversation Manipulating interacting with objects in a virtual or physical space by manipulating them Exploring moving through a virtual environment or a physical space

Instructing Where users instruct a system and tell it what to do e.g. tell the time, print a file, save a file Very common conceptual model, underlying a diversity of devices and systems e.g. word processors, VCRs, vending machines Main benefit is that instructing supports quick and efficient interaction good for repetitive kinds of actions performed on multiple objects

Which is easier and why?

Which is easier and why?

Conversing Underlying model of having a conversation with another human Range from simple voice recognition menu-driven systems to more complex natural language dialogs Examples include timetables, search engines, advicegiving systems, help systems Also virtual agents, toys and pet robots designed to converse with you

Conversing

Pros and cons of conversational model Allows users, especially novices and technophobes, to interact with the system in a way that is familiar makes them feel comfortable, at ease and less scared Misunderstandings can arise when the system does not know how to parse what the user says User doesn t know what the system is capable of

Manipulating Involves dragging, selecting, opening, closing and zooming actions on virtual objects Exploit s users knowledge of how they move and manipulate in the physical world Can involve actions using physical controllers (e.g. Wii) or air gestures (e.g. Kinect) to control the movements of an on screen avatar Tagged physical objects (e.g. balls) that are manipulated in a physical world result in physical/digital events (e.g. animation)

Direct Manipulation Shneiderman (1983) coined the term DM, came from his fascination with computer games at the time Continuous representation of objects and actions of interest Physical actions and button pressing instead of issuing commands with complex syntax Rapid reversible actions with immediate feedback on object of interest

Why are DM interfaces so enjoyable? Novices can learn the basic functionality quickly Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions Intermittent users can retain operational concepts over time Error messages rarely needed Users can immediately see if their actions are furthering their goals and if not do something else Users experience less anxiety Users gain confidence and mastery and feel in control

What are the disadvantages with DM? Some people take the metaphor of direct manipulation too literally Not all tasks can be described by objects and not all actions can be done directly Some tasks are better achieved through delegating e.g. spell checking Can become screen space gobblers Moving a mouse around the screen can be slower than pressing function keys to do same actions

Exploring Involves users moving through virtual or physical environments Physical environments with embedded sensor technologies Context aware

Which conceptual model is best? Direct manipulation is good for doing types of tasks, e.g. designing, drawing, flying, driving, sizing windows Issuing instructions is good for repetitive tasks, e.g. spellchecking, file management Having a conversation is good for children, computerphobic, disabled users and specialised applications (e.g. phone services) Hybrid conceptual models are often employed, where different ways of carrying out the same actions is supported at the interface - but can take longer to learn

Conceptual models: interaction and interface Interaction type: what the user is doing when interacting with a system, e.g. instructing, talking, browsing or other Interface type: the kind of interface used to support the mode, e.g. speech, menu-based, gesture

Many kinds of interface types available Command Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality Gesture (for more see chapter 6)

Summary Important to have a good understanding of the problem space Fundamental aspect of interaction design is to develop a conceptual model Interaction modes and interface metaphors provide a structure for thinking about which kind of conceptual model to develop Interaction styles are specific kinds of interfaces that are instantiated as part of the conceptual model Paradigms, theories, models and frameworks can also shape a conceptual model

Interactive Paper Interfaces Content derived from Buxton, Sketching User Experiences/

It is a part of a participatory design process General Goal: Use rapid prototyping to explore the design space Works well with brainstorming Important that it be sketched Sketched is not just about drawing, it s also an attitude

Design Process What is wanted? Design Analysis Prototyping Evaluation Implement and Deploy

Rapid Prototyping Fail fast

What is paper prototyping anyway?

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Quick to make (at least after some practice)

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Quick to make (at least after some practice)

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Can be provided when needed Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Can be provided when needed Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity A sketch is cheap. High cost inhibits design (early in the process)

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity A sketch is cheap. High cost inhibits design (early in the process)

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity If you can t afford to throw it away it probably isn t a sketch. The investment is in the concept, not the art. It s value depends on its disposability.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity If you can t afford to throw it away it probably isn t a sketch. The investment is in the concept, not the art. It s value depends on its disposability.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Sketched interfaces tend to work best as a series, in context with many other sketches.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Sketched interfaces tend to work best as a series, in context with many other sketches.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail The way a sketch is drawn distinguishes it from other ways of rendering. The style signifies to it s viewers that it s just a sketch Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail The way a sketch is drawn distinguishes it from other ways of rendering. The style signifies to it s viewers that it s just a sketch Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity There is a fluidity to sketches that gives them a sense of openness and freedom. They are not precise like a blueprint or engineering drawing.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity There is a fluidity to sketches that gives them a sense of openness and freedom. They are not precise like a blueprint or engineering drawing.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail They include only what is necessary to communicate the concept. Extra detail is distracting. Going beyond good enough is a bad thing with sketching. Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail They include only what is necessary to communicate the concept. Extra detail is distracting. Going beyond good enough is a bad thing with sketching. Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity a sketch is helpful because it suggests only a level of precision that corresponds to the level of certainty in the designer s minds at the time.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity a sketch is helpful because it suggests only a level of precision that corresponds to the level of certainty in the designer s minds at the time.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Sketches don t tell they suggest. Their value lies not in the drawing, but in its ability to provide a catalyst to the desired and appropriate behavior, conversations, and interactions. Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Sketches don t tell they suggest. Their value lies not in the drawing, but in its ability to provide a catalyst to the desired and appropriate behavior, conversations, and interactions. Appropriate degree of refinement Suggest and explore, not confirm Ambiguity

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Sketches are intentionally ambiguous. They can be interpreted in different ways. Unexpected relationships emerge from viewing them, even for the sketcher.

Why sketching? Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate degree of refinement Suggest and explore, not confirm Ambiguity Sketches are intentionally ambiguous. They can be interpreted in different ways. Unexpected relationships emerge from viewing them, even for the sketcher.