Design Issues Managing Design Processes Design Tools Direct Manipulation Course 5, CMC, 30/09/03

30/09/03HC52 Design Process 1 Observation of users Analysis of task frequences Analysis of task sequences Prototype validation Usability tests

30/09/03HC53 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/03HC54 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/03HC55 The 3 Pillars

30/09/03HC56 Guidelines Text and Icons Screen-layout issues Input and Output devices Action Sequences Training

30/09/03HC57 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/03HC58 High Concept Definition Example 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/03HC59 Scenarios of Usage Example 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/03HC510 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/03HC511 Specification Methods Natural language specifications Formal and Semiformal languages Menu-tree structures Transition Diagrams Statecharts User-action notation

30/09/03HC512 Statechart Example simplified bank transaction system

30/09/03HC513 User-Action Notation Example 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/03HC514 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/03HC515 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/03HC516 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/03HC517 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/03HC518 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/03HC519 OAI model

30/09/03HC520 Problems with Direct Manipulation Visual representations too large for screen, too detailed Visual representations without obvious meaning Misleading metaphors Shift hardware devices

30/09/03HC521 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