1 / 15

SEG 3210 User Interface Design & Implementation

SEG 3210 User 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/. Unit E : Design Guidelines. A General Meta-Guideline

viet
Download Presentation

SEG 3210 User Interface Design & Implementation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related