SEG 3210 User Interface Design & Implementation

1. SEG 3210User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) 562-5800 x 6277 elsaddik @ site.uottawa.ca abed @ mcrlab.uottawa.ca http://www.site.uottawa.ca/~elsaddik/

2. Unit E: Design Guidelines • A General Meta-Guideline • Interaction Styles vs. Interaction Elements • Coding Techniques and Visual Design • Response Time • Feedback and Error Handling • Command-Based Interfaces • Menu Driven Systems • Keyboard Shortcuts • Forms-Based Interfaces • Organizing a Windowing Interface • Question and Answer Interfaces • Information Query Interfaces • Voice I/O • Natural Language Interfaces • Other Types of I/O • Localization and Internationalization • On-Line Help • Guidelines and Standards Documents

3. 10. Organizing a Windowing Interface A window is a container that designers use to organize the information that users see in an application • Window interface actions include • Open action • Close action • Resize action • Move action • Bring forward or activation

4. Types of Windows • Primary window: • is a window in which the user's main interaction with the data or document takes place • An application can use any number of primary windows, which can be opened, closed, minimized, or resized independently

5. Types of Windows • Secondary window: • is a supportive window that is dependent on • a primary window or • another secondary window

6. Types of Windows • Utility window: • is a window whose contents affect an active primary window • Unlike secondary windows, utility windows remain open when primary windows are closed or minimized. • e.g. tool palette that is used to select a graphic tool.

7. Types of Windows • Plain window: • is a window with no title bar or window controls • typically used for splash screens

8. Basic Interface Components in Windowing Systems • Title Bars • Window Frame • Menu bar/Menus • Toolbar and toolbar buttons • Scrollbar • Content pane Picture from Java Look and Feel Design Guidelines http://java.sun.com/products/jlf/ed2/book/index.html

9. Multiple Windows Design • Advantages • Windows optimizes the use of limited display space: • More information can be accessible • Users can use multiple sources on screen simultaneously to complete a task: • They give the user freedom to multitask • Windowing Systems allow standardization of interfaces across many applications • The user moves easily between applications and quickly learns to use new applications. • Automatic facilities for organizing window working sets: • save time and make large collections of windows easier to manage • They lend themselves to direct manipulation • Disadvantages: • Users perform some tasks slower • Due to the need to switch windows • Due to getting lost • Display screen size and resolution are limitations • Time can be lost in rearranging windows • User can be confused by user switches context

10. Window focus patterns • Mouse focus • Typical of X-windows • Input goes wherever the mouse is pointing • Input can go into a partly obscured window • Advantages: • Allows easier interaction with multiple windows without rearranging • Faster interaction in many cases • Click to focus • Standard in MS-Windows and Macintosh • A window must be brought to the front before it will accept input • Input goes to that window regardless of where the mouse is pointing • Advantage: • Input cannot accidentally input to the wrong window

11. General guidelines for arranging windows • Ensure window arrangement is only changed by the user • Keep secondary windows to only one level and limit their number • Secondary windows can be: • Windows within windows • Separate windows that depend on a primary window • Make the use of secondary windows optional • As alternatives use multiple primary windows or menus • Allow the user to save the arrangement of windows from run to run of a program • Allow a choice of what to do when opening new windows: • Automatically position • Cascaded is best • Respond to window events in real time • Dragging, resizing, bringing to front, closing, iconizing

12. 11. Question and Answer Interfaces • Concept • Step 1: System asks a question, user responds • Go to step 1 Users are asked a series of questions leading them through an interaction to the progress of the stages of a procedure or method Wizards are classic examples

13. 11. Question and Answer Interfaces • Will always be needed in some circumstances: • Gathering information where subsequent questions often depend on previous questions • Preparing a tax form • Taking surveys • Diagnosis • System setup • Question/answer Advantages • Simple mechanism for providing input to an application in a specific domain • Yes/no, multiple choice, codes • Good for novice users: • Useful in restricted domains for novice users

14. Question and answer guidelines • Maintain on the screen: • A title describing the task • A label for each question or group of questions • Ask questions in a simple, straightforward way • As with forms and commands, allow defaults and error-correction • e.g. Are you filing jointly with your spouse (yes): • Give the user an immediate way to: • Back up to change answers to previous questions • Ask why a certain question is being asked • Summarize what information has been gathered so far • Quit or suspend the session

15. 12. Information Query Interfaces • Concept • Looking up information • Structured (database) or • unstructured (information retrieval) • Options for query interfaces • Query language • Good for expert users: • Query languages require experience of the data model and language • Full-text and keyword searches • System searches for any items containing a given keywords • Used mainly for information retrieval: • Query dialogues retrieve information from databases/IR systems • Query by example • Enter a few fields in a form • A list of matching items appears • The user selects one to display a filled form