Lecture 1 : Multi-touch tangible interface; HCI trends, projects, and development

By Jazmi Jamal

Area of expertise: new media interactive technology, eLearning technology, mixed and augmented reality, sound art & design.

Employment history: interactive designer, instructional designer, multimedia designer, video editor, sound designer, project manager.

Twitter : jazmiizwan

Outline

History of HCI

Today’s HCI : environment computing

Introduction to tangible interface

IT Project management

Multi-touch workshop

Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them

History of Human-Computer-Interface (HCI) Technology

“Before the computer, there wasn’t interaction design. But most of the qualities we seek have been valued through ages.”

• Usable

• Useful

• Desirable

• Affordance for the right people

• Appropriately complex & style

• Appropriately transparent in function and use

• Appropriately adaptable, extensible, and user-friendly

• Good fit with people, activity, context, and result

Interaction design history

Operate the machine

Back in the day..

Engineering design-based: make faster and bigger machine

People adapt to machine: people speak the machine’s language.

No designers involve, but lots of expert engineers.

“When programmable-interactive machines first appeared, the creators of their controls and interfaces emphasized the goal of ‘operating the machine’.”

igital computer capable of being reprogrammed to solve a full range of computing problems

ENIAC (Electronic Numerical Integrator And Computer)

• Digital computer capable of being reprogrammed to solve a full range of computing problems

• ENIAC was designed to calculate artillery firing tables for the United States Army's Ballistic Research Laboratory

Mauchly and Eckert, 1946Wiring the ENIAC with a new program

• 3,000 cubic feet, 30 tons, 18k vacuum tubes, 70k resistors, 170 kW, 1 kbit memory.

• Not a stored program device.

• Approximate processing power is similar to ‘singing birthday card’.

PDP-8

• First successful commercial mini computers.

• General purpose computer.

• Input/Output : Front panel interface, paper-tape reader, teletype printer, magnetic tape, punched cards readers and fixed-head disks.

DEC, 1960sFront panel switches

• Size of a ‘mini-bar’.

• More ? http://wapedia.mobi/en/PDP-8

Mouse

• Rotation of each wheels defines motion of one axis.

• The researcher patented the mouse technology “X-Y Position Indicator for a Display System.

• This mouse used with Xerox Alto computer.

Doug Engelbart , 1960sFirst mouse

IBM 3270

• Terminal-based display (programmable characters).

• Command line interface

• Designed to connect with mainframe computers, often at a remote distance.

• The computer display subsystem consisted of displays, printers and controllers.

IBM, 1972Command line interface

Use the software

Work on spreadsheet

Work on word processor

Play a game

“Shift in focus from controlling the computer to using application and tools”

“People have to adapt less to use the machines’ capability”

VisiCalc (Calculation spreadsheet software)

• The first spreadsheet program available for personal computer.

• Microsoft Excel’s grandpa.

• People had a reason to buy personal computer. To used the spreadsheet.

VisiCorp, 1979A tool for business calculation

• Some of the features that contributed for recent application :

• Scroll left, right, up or down• Real-time scrolling• Instant recalculation based on formulas stored.• Numeric and text formatting

Wordstar (writing tools)

• Word processor application.

• Text-based word processing program.

• People had a reason to buy personal computer. To create, edit, store and format the text document.

S. Rubenstein & J. Barnaby, 1979A tool for writing

Perform a task

Draw and edit a picture

Create printed materials

Create a budget

Compose music

“Previous applications are too complicated. Hence, it invited complaint and competitors ”

“The tools had emphasis on ease of learning, ease of use, reduce errors and save time.”

“Eventually, professionals emphasis on people doing a task rather than ‘a tool with good control’.”

Apple Lisa (personal multipurpose computer)

• Introduced the early GUI to the customer. GUI have been adapted from Xerox PARC which is based on SRI research.

• Input/Output : mouse, keyboard, & floppy disk.

Apple Computer Inc, 1980sGraphical User Interface (GUI)

• Advance virtual memory that can run cooperative multitasking.

• The OS enable third-party software to run on the computer.

• http://www.youtube.com/watch?v=W35vpsPIwlU

Software design manifesto

“The most important social evolution within the computing professions would be to create a role for the software designer as a champion of the user experience”

“The software designer should be the person with overall responsibility for the conception and realization of the program."

http://hci.stanford.edu/publications/bds/1-kapor.html

Experience: live, learn, work & play

Manage household

Learn math, science or etc.

Manage a small business

Immerse in a fantasy

“After the years of trying to help people to perform, we realised success depended on expanding the view scope. ”

“Majority of good works now involves an effort to fit context of use, characteristics of individuals, and patterns of life.”

“And most great work attempt to go beyond expressed need to talent”

Notebook / Laptop

• Mobile, portability, and ubiquity enable the user to access computer anytime anywhere.

• http://www.youtube.com/watch?v=4dqLT0UBPx0&feature=player_embedded

PowerBook Duo & PowerBook 500, 1990sIntegrated with other hardware • Introduction on trackpad. Originally can be seen on

Apollo’s computer.

Designing the interaction have many layers of concerns

StrategyDoes the product connect with the business goal ?

ExperienceAttraction-engagement-retention

InteractionInterface in use through time by different people

InterfacePresentation of information and control

Information & functionallyCategories, types, attributes and relationships.

Connect

Personal blog

Podcast & Video sharing

Cloud computing

Multiplayer game

“Another aspect of modern design: we are learning to design new ways for people to connect with one another. ”

“We design what happens between people through the machines.”

“and make it possible for people to build something together through the machine.”

Software & Application

• Availability of internet makes people connect and improve the way of interactions.

• Collaborative in making variety projects

• http://www.youtube.com/watch?v=ae_DKNwK_ms

Dynamically available

Personal blog

Video sharing

Cloud computing

Multiplayer game

“From: we adapt to the machine,

To: our environment and tools adapt to us as we move through life.”

Mobile

• Internet & multimedia smart-phone.

• Each individuals have the access to internet anytime anywhere

• iPhone features: Camera, call, portable media player, GPS navigation, social networking, games and etc.

iPhone, 2007-presentBrilliant multimedia device

Surface computing

• The computer environment adapt the human activity

• http://www.youtube.com/watch?v=um6BIaPWLao•http://www.youtube.com/watch?v=TIXsvTVhrws&feature=related

Philips Future KitchenTabletop computing

Environment computing & interaction

• You explain to me.

• http://www.youtube.com/watch?v=8Ff7SzP4gfg&feature=related

Microsoft Vision 2019Environment computing

Interaction design history

What is Tangible Interfaces ?

Tangible interfaces

“Generally graspable and tangible interfaces are systems relating to the use of physical artifacts as representations and controls for digital information"

http://www.youtube.com/watch?v=Mgy1S8qymx0

There are 4 characteristics concerning representation and control:

1. Physical representations are computationally coupled to underlying digital  information.

2. Physical representations embody mechanisms for interactive control.

3. Physical representations are perceptually coupled to actively mediated digital representations.

4. Physical state of tangibles embodies key aspects of the digital state of a system.

http://vimeo.com/13879559

Tangible interfaces

“Tangible interfaces rely on a balance between physical and digital representations."

“Digital representations are needed to mediate dynamic information."

Tangible interfaces

“Physical spatiality describes the co-presence of user, objects and other users in one interaction space. This space is a hybrid."

“Haptic directness denotes direct manipulation where the physical, graspable objects themselves are the interface.."

http://www.youtube.com/watch?v=Cog8b8ojji0

Do you want to develop Tangible Interface project ?

First, you need to know the project management.

Project management (PM)

“Project management is the discipline of planning, organizing, securing and managing resources to bring about the successful completion of specific project goals and objectives."

PM Criterion

Hard Criteria

Scope

Time

Cost

Resources

Quality

Soft Criteria

Motivation

Leadership

Communication

Recognition

and etc.

Based on ‘Why IT projects fails ?”

Failures : PM in IT

• Unrealistic or unarticulated project goals

• Inaccurate estimates of needed resources

• Badly defined system requirements

• Poor reporting of the project's status

• Unmanaged risks

• Poor communication among customers, developers, and users

• Use of immature technology

• Inability to handle the project's complexity

• Careless development practices

• Poor project management

• Commercial pressures

Based on ‘Why IT projects fails ?”

How to construct the project ?

Then I will explain the project outlines.

Multi-Touch ‘Workshop’

“Introduce to Multi-touch technologies including development, process, management, execution, and evaluation.”

MT ‘Workshop’

The Multi-touch technology software is based on vision tracking.

We will use Community Core Vision (CCV) and FLASH with AS 3.0 to develop the application.

The CCV works as bridge between the camera (input) and flash program (output).

MT ‘Workshop’

In developing the multi-touch kiosk/product, several hardware need to be prepared.

For instance, projector, computer, infrared sensor, camera sensor, glass surface, speaker and others.

What should I do for next step?

Prepare the ‘Resources’

Human resource

Create a group of 5 members. Each team members will play different role of profession in completing the project.

Rangers (team)

Multimedia TechnicianMultimedia Technician

Multimedia ProgrammerMultimedia

ProgrammerInteraction Designer

Interaction Designer

Multimedia Designer

Multimedia Designer

Industrial Designer

Industrial Designer

• Research on user’s experience and interaction.

• Study how user’s interact with the product.

• Eg: UI researcher & designer

• Create back-bone architecture of the application.

• Technical development of the application.

• Eg : Flash programmer

• Develop and organise the information in rich multimedia form.

• Creative in presenting information.

• Eg : Graphic designer

• Develop execute design solutions for physical ergonomics, usability, form and etc.

• Creative in develop fully-functional products.

•Eg : Product designer

• Setup, manage, and fix technical equipments.

• Technical setup of the product to be displayed.

• Eg : Multimedia Technician

Material resource : Input sensor

INFRARED WEBCAM

The best experience in vision tracking especially for this multi-touch project is PS3 EyeCam / ToyCam*.

However, there are lots of good infrared webcam available in the market.

* the EyeCam need to be hacked in order to operate as infrared camera.

Material resource : Input sensor

INFRARED LIGHTS

To enhance the detection of contrast between shade and light.

This light projection will help the camera to tracks ‘finger touched on transparent glass’

Re-cap : objective

History of HCI

Today’s HCI : environment computing

Introduction to tangible interface

IT Project management

Multi-touch workshop

Any questions ?