Design Principles – Part 3 of 3

Slides:



Advertisements
Similar presentations
The New User Interface MEDITECH Training & Education.
Advertisements

Microsoft ® Office Training Get up to speed with the 2007 system presents:
An Introduction to Using
Microsoft Word 2010 Lesson 1: Introduction to Word.
FINAL REVIEW Carley. Contents Unit A: Understanding Essential Computer Concepts Unit B: Getting Started wit Mac OS X Leopard Unit C: Understanding File.
Design Principles. Test High: 89 Average: 67 Median: 71.5 A: B: C: D:
Microsoft Office Illustrated Brief File Management Understanding.
Design process & principles
XP New Perspectives on Microsoft Office Word 2003 Tutorial 1 1 Microsoft Office Word 2003 Tutorial 1 – Creating a Document.
FIRST COURSE Getting Started with Microsoft Office 2007.
Basic process and guidelines for interaction design
XP 1 Using Common Features of Microsoft Office 2003 Rod Rodrigues.
XP Using Common Features of Microsoft Office Tutorial 1.
Word Processing Microsoft Office: Exploring Word 2011 for MAC.
Lecture 6 Desktop Publishing III – Presentation Software Introduction to Information Technology With thanks to Dr. A. Zhang, Dr. Haipeng Guo, and Dr. David.
1 Chapter Overview Introduction to Windows XP Professional Printing Setting Up Network Printers Connecting to Network Printers Configuring Network Printers.
Exploring the Basics of Windows XP
Module 3 Productivity Programs Common Features and Commands Microsoft Office 2007.
An Introduction to Microsoft Word. Microsoft Word This program allows you to type letters, papers, reports and even books. It is available through the.
FIRST COURSE Word Tutorial 2 Editing and Formatting a Document.
Lesson 15 Getting Started with PowerPoint Essentials
XP M.S. Word Editing and Formatting a Document. XP New Perspectives on Microsoft Office 2007: Windows XP Edition2 Objectives Check spelling and grammar.
Configuring the MagicInfo Pro Display
Microsoft ® Office 2007 Get up to speed with the 2007 system Murray State University College of Education:
Systems Analysis and Design in a Changing World, 6th Edition
Microsoft Office 2003 Illustrated Introductory with Programs, Files, and Folders Working.
XP New Perspectives on Introducing Microsoft Office XP Tutorial 1 1 Introducing Microsoft Office XP Tutorial 1.
Key Applications Module Lesson 19 — PowerPoint Essentials
Getting Started with Application Software
Pasewark & Pasewark 1 Word Lesson 1 Word Basics Microsoft Office 2007: Introductory.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
CHAPTER 9 Introducing Microsoft Office Learning Objectives Start Office programs and explore common elements Use the Ribbon Work with files Use.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Gorman, Stubbs, & CEP Inc. 1 Introduction to Operating Systems Lesson 4 Microsoft Windows XP.
An Introduction to Microsoft Word. Microsoft Word This program allows you to type letters, papers, and other documents. This program allows you to type.
XP 1 Microsoft Word 2002 Tutorial 1 – Creating a Document.
Chapter 3 – Part 1 Word Processing Writer for Linux CMPF 112 : COMPUTING SKILLS.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.
Productivity Programs Common Features and Commands.
Computing Fundamentals Module Lesson 3 — Changing Settings and Customizing the Desktop Computer Literacy BASICS.
Copyright © 2010 Wolters Kluwer Health | Lippincott Williams & Wilkins Introduction to Windows Chapter 2.
Key Applications Module Lesson 21 — Access Essentials
Why do we need good user interfaces?. Goals of User Interfaces Usable – how much effort to do a task? – example: often-used buttons easier to find – example:
Kingdom of Saudi Arabia Prince Norah bint Abdul Rahman University College of Computer Since and Information System NET201.
© 2010 Pearson Education, Inc. | Publishing as Prentice Hall1 Computer Literacy for IC 3 Unit 2: Using Productivity Software Chapter 1: Starting with Microsoft.
 Given live by a presenter  Played without a presenter on a computer screen or on the Web  Slides provide a way to use text and graphics to introduce.
Lesson 1 - Understanding the Word Window and Creating a New Document
Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles Last revised 9/2010.
Design Principles. Test High: 98 Average: 76 Median: 78 A: (11) B: (12) C: D: < 65.
Fall 2002CS/PSY UI Design Principles Categories  Learnability Support for learning for users of all levels  Flexibility Support for multiple ways.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Explore GNOME The easy way, using a live CD By Carl Weisheit.
MICROSOFT WORD PRESENTATION. Word Processing  Software that is designed for the entry, editing, and printing of documents.  Windows Version = Microsoft.
1. Using word you can create the document and edit them later, as and when required,by adding more text, modifying the existing text, deleting/moving.
Pasewark & Pasewark 1 Office Lesson 1 Microsoft Office 2007 Basics and the Internet Microsoft Office 2007: Introductory.
Key Applications Module Lesson 12 — Word Essentials Computer Literacy BASICS.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
The Desktop Screen image displayed when a PC starts up A metaphor
Java Look-and-Feel Design Guidelines
Microsoft Office Illustrated Introductory, Premium Edition
UI Design Principles Categories
Introducing Microsoft Office 2010
Microsoft Office Illustrated Introductory, Windows XP Edition
New Perspectives on Windows XP
Lesson 20 Getting Started with PowerPoint Essentials
Microsoft Office Illustrated Fundamentals
Presentation transcript:

Design Principles – Part 3 of 3 Robustness Principles Styleguides Summary Last revision September 2010

3. Robustness Principles Supporting user in determining successful achievement and assessment of goals Observability Recoverability Responsiveness Task Conformance UI Design - Georgia Tech

Robustness: Observability Can user determine internal state of system from information provided? Browsability Explore current state (without changing it) Reduces memory load But don’t overwhelm user with information either Reachability Navigate through observable states Persistence How long does observable state persist? Observability also aids learnability UI Design - Georgia Tech

Observability - Role of Feedback Feedback helps create observability Feedback taxonomy (generally don’t need all of these) “I understand what you have asked me to do” “I am doing what you have asked me to do” “And it will take me this much longer” Song and dance routine to distract user (busy interval as opposed to idle interval) “And here are some intermediate results to keep you happy until I am done “All done, what’s next?” UI Design - Georgia Tech

Observability - Forest + Trees Represents overall drawing Work area, showing part of a larger drawing Represents portion of drawing seen in work area Menus, feedback, etc. Overall display area UI Design - Georgia Tech

Observability - How Did I Get Here? Tree showing history of queries Presidents elected before age 50 & Democratic & & & from East of graduate from farm Mississippi degree family & served two terms in office UI Design - Georgia Tech

Observability - How did I Get Here? List of pages visited Graphical histories UI Design - Georgia Tech

Observability – Where am I, How did I Get Here? Bread crumbs on web site UI Design - Georgia Tech

Observability - Where Did I Come From, Where can I go? UI Design - Georgia Tech

Observability – Acrobat Reader Acrobat Reader with ToC to give context Forest is the bookmarks, tree is the single page UI Design - Georgia Tech

Observability - Scroll Bar Scroll bar size indicates % in view - but does not indicate absolute sizes. Can add other info, such as Page 5 of 12 UI Design - Georgia Tech

Observability - feedback placement Where the eyes are Cursor shape In Newshole Thumbs down – problem Buddha – to encourage patience Use of sounds can supplement or sometimes replace use of cursor UI Design - Georgia Tech

Observability - Forest + Trees Work Area List 2 Item 1 Item 2 Item 3 UI Design - Georgia Tech

Observability - Memory Load Use as a tool to decrease user memory load Also to avoid mis-steps Gray-out disabled menu items Indicate type of input (alpha, numbers) expected UI Design - Georgia Tech

Do Not Set the User Up Make it hard for the user to make errors Instead of allowing them to make error and then saying “tsk, tsk” Gray out disabled menu items Ask for confirmation of major actions UI Design - Georgia Tech

Do Not Set the User Up Don’t let the user do something that will lead to an error message UI Design - Georgia Tech

Robustness: Recoverability Ability to take corrective action upon recognizing error Forward recovery Ability to fix when we can’t undo Backward recovery Undo previous error(s) Abort operation underway Only makes sense if is a slow operation UI Design - Georgia Tech

Why is recoverability such an important feature????? Encourages experimentation (hence learnability) by reducing cost of making mistakes Allows us to work faster We know we can easily recover UI Design - Georgia Tech

Robustness: Responsiveness Response to motor actions Keyboarding, mouse movement - less than 100 msec. Rich Human Factors literature on this Consistency is important - experimental result Users preferred longer but more consistent response time Times that differed 10% to 20% were seen as same (JND) UI Design - Georgia Tech

Robustness: Responiveness Sometimes is argued that “too fast” is not good because: Makes user feel like they need to do something quickly to keep up with computer? Other reasons?? ?? Do you agree/disagree? UI Design - Georgia Tech

Robustness: Task Conformance Does system support all tasks user wishes to perform in expected ways? Task completeness Can system do all tasks of interest? Task adequacy Can user understand how to do tasks? Does it allow user to define new tasks? Extensibility UI Design - Georgia Tech

Task Conformance - Extensibility What are mechanisms for providing extensibility? What are their pros and cons? UI Design - Georgia Tech

Using the Principles In doing design and implementation of your project, revisit this list Assess your design against these usability principles UI Design - Georgia Tech

Styleguides Codify many of these principles for a particular look and feel Mac OS, Windows, Motif, Palm, Blackberry Developed in concert with toolkit, but go beyond toolkit UI Design - Georgia Tech

Styleguides “How to” for a specific UI UI Design - Georgia Tech

Typical TOC - MAC OS X UI Design - Georgia Tech Introduction to the Apple Human Interface Guidelines What Are the Mac OS X Human Interface Guidelines? Who Should Read This Document? Organization of This Document Conventions Used in This Document See Also Part I: Fundamentals Human Interface Design Human Interface Design Principles Keep Your Users in Mind The Development Process Design Decisions Managing Complexity Extending the Interface Involving Users in the Design Process Part II: The Macintosh Experience First Impressions Packaging Installation General Installer Guidelines Setup Assistants Mac OS X Environment The Finder The Dock The File System Multiple Users Remote Log In Assistive Technologies Networking Application Services Displays The Always-On Environment Using Existing Technologies Providing User Assistance Internationalizing Your Application Storing Passwords Printing Choosing Colors Setting Fonts and Typography Characteristics Selecting Attributes Associated With People Speech Technologies Part III: The Aqua Interface User Input The Mouse and Other Pointing Devices The Keyboard Selecting Editing Text Drag and Drop Drag and Drop Overview Drag and Drop Semantics Selection Feedback Drag Feedback Destination Feedback Drop Feedback Clippings Text Fonts Style Icons Icon Genres and Families Icon Perspectives and Materials Conveying an Emotional Quality in Icons Suggested Process for Creating Aqua Icons Tips for Designing Aqua Icons Cursors Standard Cursors Designing Your Own Cursors UI Design - Georgia Tech

More TOC UI Design - Georgia Tech Layout Examples Menus Menu Behavior Designing the Elements of Menus The Menu Bar and Its Menus Contextual Menus Dock Menus Windows Types of Windows Window Appearance Window Behavior Utility Windows The About Window Preferences Windows Inspectors and Info Windows Find Window Fonts Window and Colors Window Dialogs Types of Dialogs and When to Use Them Dialog Behavior The Open Dialog Dialogs for Saving, Closing, and Quitting The Choose Dialog The Printing Dialogs Controls Buttons Selection Controls Adjustment Controls Indicators Text Controls View Controls Grouping Controls Layout Examples Positioning Controls Sample Layouts Grouping Controls Using Small and Mini Versions of Controls Keyboard Shortcuts Quick Reference Tab View Differences Between Mac OS X Versions Document Revision History UI Design - Georgia Tech

Excerpt from OS X Styleguide Drag and Drop Overview Ideally, users should be able to drag any content from any window to any other window that accepts the content’s type. If the source and destination are not visible at the same time, the user can create a clipping by dragging data to a Finder window; the clipping can then be dragged into another application window at another time. Drag and drop should be considered an ease-of-use technique. Except in cases where drag and drop is so intrinsic to an application that no suitable alternative methods exist—dragging icons in the Finder, for example—there should always be another method for accomplishing a drag-and-drop task. The basic steps of the drag-and-drop interaction model parallel a copy-and-paste sequence in which you select an item, choose Copy from the Edit menu, specify a destination, and then choose Paste. However, drag and drop is a distinct technique in itself and does not use the Clipboard. Users can take advantage of both the Clipboard and drag and drop without side effects from each other. A drag-and-drop operation should provide immediate feedback at the significant points: when the data is selected, during the drag, when an appropriate destination is reached, and when the data is dropped. The data that is pasted should be target-specific. For example, if a user drags an Address Book entry to the “To” text field in Mail, only the email address is pasted, not all of the person’s address information. You should implement Undo for any drag-and-drop operation you enable in your application. If you implement a drag-and-drop operation that is not undoable, display a confirmation dialog before implementing the drop. A confirmation dialog appears, for example, when the user attempts to drop an icon into a write-only drop box on a shared volume, because the user does not have privileges to open the drop box and undo the action. (Color added for emphasis.) UI Design - Georgia Tech

Styleguides General User Interface Design Style Guides Apple Human Interface Guidelines (Mac OS X) Design Guidelines Microsoft User Interface Guidelines (Click in the left tree on User Interface Design...) Windows XP Guidelines Yale Web Style Guide (2nd Edition) Java Look and Feel Guidelines (version 1) Java Look and Feel Guidelines version 2 Java Look and Feel Guidelines: Advanced Topics IBM 3D design Guidelines Silicon Graphics Indigo Magic User Interface Guidelines Open Source Usability Guidelines Motif Style Guide KDE User Interface Guidelines Gnome Human Interface Guidelines 1.0 Corporate User Interface Standards and Guidelines (samples) Telstra Online Standards Taligent Human Interface Guidelines Ameritech Graphical User Interface Standards and Design Guidelines http://www.experiencedynamics.com/science_of_usability/ui_style_guides/ UI Design - Georgia Tech

And More Styleguides …. UI Design - Georgia Tech Government funded Usability Guidelines MITRE Guidelines for Designing User Interface Software (US Airforce) Research based Web Design and Usability Guidelines (Dept. of Health and Human Services) Cancer Institute Usability Guidelines NASA User Interface Guidelines Canadian Command Decision Aiding Technology (COMDAT) Operator-Machine Interface (OMI) Style Guide: Version 1.0 Gaming Devices (J2ME games) Games Usability Guidelines (from Nokia) Wireless and Mobile Usability Guidelines Palm OS Design Guidelines Openwave GSM Guidelines Openwave Top 10 Usability Guidelines for WAP Applications Blackberry and RIM wireless handheld UI Developers Guide (PDF) Sprint Usability Requirements for XHTML (Application Developers Program) NTT DoCoMo imode service guideline (user interfaces) Accessibility Guidelines Techniques for Web content Accessibility Guidelines 1.0 UI Design - Georgia Tech

Design Patterns UI design elements that have been found useful in practice Typically follow / instantiate design guidelines Typically more macroscopic than low-level interaction techniques such as menu selection, dialogue boxes, icon drag, slider dial Provide a design vocabulary – a palette Example at http://www.welie.com/patterns/ Includes code to implement Are many other web sites UI Design - Georgia Tech

Design Pattern Books (are more) Web-centric UI Design - Georgia Tech

End Part 3 of 3 UI Design - Georgia Tech