Introduction to Information Systems

Interaction design

Software postures

Sovereign
Programs that fill the whole screen Long sessions Rich visual feedback and input

Sovereign

Transient
Single, high-relief function Simple, clear, to the point Single window and view Remember state

Auxiliary
Blends the characteristics of sovereign and transient programs Continuously present but only supporting role Small, super-imposed on another application

Sovereign vs Auxiliary vs Transient

Daemonic
Do not normally interact with users Serve quietly and mostly invisibly in the background

10

User interface elements

Controls: Buttons
Text-based

Butcons
Blend between button and icon

12

Controls: Radio buttons

Mutually exclusive In groups Take up screen space Only for frequently used options

13

Controls: Check boxes

Options that can be combined In groups Take up screen space Only for frequently used options

14

Controls: Text box

Free text entry Single or multi-line

15

Controls: Drop-down List

Bounded entry

16

Controls: Combo boxes

Combination of drop-down list and text box Bounded entry Accommodate values other than numbers

17

Other controls

Spin box

Treeviews

Scroll bar Tabs Slider

18

Other controls

Date picker Time picker

Progress bar

Tooltips

19

Control design
Intuitive mapping of controls to functions
Minimize cognitive friction

20

Dialogs
Modal window covered with controls Logical flow Alignment of elements Group boxes

21

Menus
Communicate to users available functions
Instructive for beginners
W = Mnemonic F5 = Accelerator Separator

Quasi standard
File, Edit, Window, Format, Help

Disable inapplicable menu items Checkmarks quickly grasped by users Accelerators

Frequent commands only Often forgotten Follow standards (Ctrl+C) Show how to access them
Cascading menu

Mnemonics
Menu selection by keystroke (ALT...) rather than direct manipulation

22

Menus
Cascading menus
Difficult for users to remember Only as last resort Never for frequently used functions

Expanding menus
Infrequently used functions hidden Undermines motivation for menus (show available functions)

Cascading menu

Expanding menu

23

Toolbars
Collection of button controls Visible, immediate functionality, triggered with single mouse click Space-efficient compared to menus Positioned below a menu bar, to the side of the main window, or free-floating Frequently used commands for experienced users (not for beginners) Composition not necessarily the same as menus Icons versus text
Recognizing images faster than reading Text more precise and clear Use tooltips to explain function of a toolbar button

24

Visual controls
Used when options are more clearly communicated visually

25

Visual controls
Drawing applications
Rich, immediate feedback Grids, shadows, texture Multiple views/zoom Tooltips

26

27

Literature
Alan Cooper, About face 2.0 the essentials of user interaction design Alan Cooper, The inmates are running the asylum Peter Morville and Louis Rosenfeld, Information architecture Steve Krug, Dont make me think a common sense approach to web usability

28

29

Assignment 4: User interaction design

Assignment
Your firm has been commissioned to design an office building. The clients wish to incorporate an intelligent lighting system which is tailored to user needs. Your task is to outline a user interaction design for such a system. For the purpose of this assignment, you can ignore cost or technical feasibility considerations. As a first step, think about these aspects of the system:

1. What are key functional and non-functional system requirements? 2. What are user goals? Summarize your findings to these questions on 2 slides (text only)

[In the next assignment, you will develop the interaction design based on system requirements and user goals]

Submission
Pdf document (ca 2 pages, A4 landscape) Include your name at least on the first slide April 7, 2011, 12:00, TUWEL
30