Design Issues

Managing Design Processes

Design Tools

Direct Manipulation

Course 5, CMC, 30/09/03

30/09/03 HC5 2

Design Process 1

• Observation of users

• Analysis of task frequences

• Analysis of task sequences

• Prototype validation

• Usability tests

30/09/03 HC5 3

Design Process 2• Direct interaction with users

– design phase– development process– system lifecycle

• Iterative design methods– early testing of prototypes– revisions based on feedback from users– refinements suggested by usability tests

30/09/03 HC5 4

Usability Engineering• Attention to usability

– shortened learning times– faster performance– lower error rates

• Organizational design to support usability

• The 3 pillars of succesful user-interface development

30/09/03 HC5 5

The 3 Pillars

30/09/03 HC5 6

Guidelines

• Text and Icons

• Screen-layout issues

• Input and Output devices

• Action Sequences

• Training

30/09/03 HC5 7

Development Methodologies

• Logical User-Centered Interaction Design method (LUCID)– develop product concept– perform research and needs analysis– design concepts and key-screen prototype– do iterative design and refinement– implement software– provide rollout support

30/09/03 HC5 8

High Concept DefinitionExample

The new home banking system will provide customers with with unified access to their accounts. It will support balance inquiry, management of credit accounts and loans, transfer of funds among accounts, electronic bill payment, and investment in the bank’s family of mutual funds. The system will provide the customer with year-end accountingfor tax purposes.

30/09/03 HC5 9

Scenarios of UsageExample National Digital Library

A seventh-grade social-studies teacher is teaching a unit on the Industrial Revolution. He wants to make use of primary source material that would illustrate the factors that facilitated industrialization, the manner in which it occurred, and the impact that it had on society and on the built environment. Given his teaching load, he only has about 4 hours total to locate and package the supplementary material for classroom use.

30/09/03 HC5 10

User-Interface Software Tools

• Simple and quick sketching to identify needs and preferences of clients

• precise working out of details with clients

• coordinating with graphic designers and technical writers

• telling software engineers what to do

30/09/03 HC5 11

Specification Methods

• Natural language specifications

• Formal and Semiformal languages

• Menu-tree structures

• Transition Diagrams

• Statecharts

• User-action notation

30/09/03 HC5 12

StatechartExample simplified bank transaction system

30/09/03 HC5 13

User-Action NotationExample Task: Delete a File

User Actions

~ [file] Mv

~ [x,y]*

~ [trash]

M^

Interface Feedback

file!, for all (file!): file -!

outline(file) > ~

outline(file)> , trash!

Erase(file), trash!!

30/09/03 HC5 14

Interface-Building Tools• User-interface prototyping vs. System

development

• Design Tools– visual editing/development tools

(HyperCard, VB, Delphi, Cafe)

• Software Engineering Tools– general-purpose programming languages

(+Toolkits)(C/C++, Motif, Tcl/Tk, Galaxy, Java)

30/09/03 HC5 15

Evaluation and Critiquing Tools

• Simple metrics

• Menu-tree depth; redundancy; consistency; transitions; spell checkers; concordances

• Task-dependent metrics (run-time logging software; NGOMSL)

• Website analyzers

30/09/03 HC5 16

Direct Manipulation

“In signs one sees an advantage for discovery that is greatest when they express the exact nature of a thing briefly and, as it were, picture it; then, indeed, the labor of thought is wonderfully diminished”

Leibniz

30/09/03 HC5 17

Examples Direct-Manipulation

• Text editors (line editor-display editor-WYSIWYG word processors)

• Spreadsheets (VisiCalc-Excel)

• Spatial data management

• Video games

• Computer-aided design

• Office Automation

30/09/03 HC5 18

Direct Manipulation: 3 integrated principles

• Continuous representation of objects and actions of interest with meaningful visual metaphors

• Physical actions or presses of labeled buttons instead of complex syntax

• Rapid incremental reversible operations whose effect on objects of interest is visible immediately

30/09/03 HC5 19

OAI model

30/09/03 HC5 20

Problems with Direct Manipulation

• Visual representations too large for screen, too detailed

• Visual representations without obvious meaning

• Misleading metaphors

• Shift hardware devices

30/09/03 HC5 21

Visual Thinking and Icons• Commercial graphic designers,

semiotically oriented academics, data-visualization gurus

• Preferences vary by user and by task

• Icons or Text?

• How to design icons?

• Sound and Animation