User Interface Design & Implementation

Transcription

1 SEG 3210 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) x 6277 site.uottawa.ca mcrlab.uottawa.ca 1 Unit E: Design Guidelines 2 1. A General Meta-Guideline 2. Interaction Styles vs. Interaction Elements 3. Coding Techniques and Visual Design 4. Response Time 5. Feedback and Error Handling 6. Command-Based Interfaces 7. Menu Driven Systems 8. Keyboard Shortcuts 9. Forms-Based Interfaces 10. Organizing a Windowing Interface 11. Question and Answer Interfaces 12. Information Query Interfaces 13. Voice I/O 14. Natural Language Interfaces 15. Other Types of I/O 16. Localization and Internationalization 17. On-Line Help 18. Guidelines and Standards Documents 1

2 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 3 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 4 2

3 Types of Windows Secondary window: is a supportive window that is dependent on a primary window or another secondary window 5 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. 6 3

4 Types of Windows Plain window: is a window with no title bar or window controls typically used for splash screens 7 Basic Interface Components in Windowing Systems Title Bars Window Frame Menu bar/menus Toolbar and toolbar buttons Scrollbar Content pane 8 Picture from Java Look and Feel Design Guidelines 4

5 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 9 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 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 10 5

6 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 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 12 6

7 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 13 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 errorcorrection 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 14 7

8 12. Information Query Interfaces 15 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 8