GUI Tips From GUI Bloopers, Jeff Johnson. GUI Blooper List of common mistakes that software developers frequently make when designing Graphical User Interfaces.

Slides:



Advertisements
Similar presentations
Microsoft ® Office Training Get up to speed with the 2007 system presents:
Advertisements

CS0004: Introduction to Programming Visual Studio 2010 and Controls.
User Training. Step 1 Press Ctrl-I or choose File > Login, this will open the Login window. Figure 1-1 shows the Login window. Figure 1-1 Login Window.
USABILITY & ACCESSIBILITY IN WEB CONFERENCING TOOLS: A SIDE-BY-SIDE COMPARISON Accessing Higher Ground, 2009.
2-May-15 GUI Design. 2 HMI design There are entire college courses taught on HMI (Human-Machine Interface) design This is just a very brief presentation.
Microsoft Word 2010 Lesson 1: Introduction to Word.
CHAPTER TWO Creating Simple Visual Basic.NET Windows Applications.
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
XP Exploring the Basics of Microsoft Windows XP1 Exploring the Basics of Windows XP.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Copyright 1999 all rights reserved Screen-Based Controls n Primarily ready-made objects –Standard look and feel across applications –Available in APIs.
Using Microsoft Outlook: Basics. Objectives Guided Tour of Outlook –Identification –Views Basics –Contacts –Folders –Web Access Q&A.
C HAPTER 7 Microsoft Windows 7. Part1: Getting Started with Windows7 Fundamentals 7.1 What is Windows 7? It is the latest version of a series of Operating.
Prepared by: Ms. Catherine M. Catamora IAS - IT
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical User Interface Design.
How to Use a Computer?.
Visual Basic Chapter 1 Mr. Wangler.
Microsoft ® Office 2007 Get up to speed with the 2007 system Murray State University College of Education:
Basic Navigation in SAP For the Windows Graphical User Interface (GUI) Click your mouse anywhere or select “Page Down” to scroll through the pages.
1 CA201 Word Application Increasing Efficiency Week # 13 By Tariq Ibn Aziz Dammam Community college.
Get up to speed with the 2007 Office system The new Office: Made for you Yes, there’s a lot of change to familiar Microsoft Office programs. But it’s good.
Teach Yourself Windows 98 Module 2: Working with Files, Folders, and the Desktop.
GUI Bloopers Basic Principles. What is a GUI Blooper? “Bloopers” are mistakes that software developers frequently make when designing graphical user interfaces.
MICROSOFT WORD GETTING STARTED WITH WORD. CONTENTS 1.STARTING THE PROGRAMSTARTING THE PROGRAM 2.BASIC TEXT EDITINGBASIC TEXT EDITING 3.SAVING A DOCUMENTSAVING.
CIS—100 Chapter 15—Windows Vista 1. Parts of a Window 2.
CHAPTER TWO Creating Simple Visual Basic.NET Windows Applications.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 21 Fields and Forms.
Exploring Your Desktop To run presentation, please click on bottom arrow to right to change to next frame.
Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design.
Designing Interface Components. Components Navigation components - the user uses these components to give instructions. Input – Components that are used.
XP 1 Microsoft Word 2002 Tutorial 1 – Creating a Document.
GUI Widgets Jeff Offutt SWE 432 Design and Implementation of Software for the Web.
1. Chapter 25 Protecting and Preparing Documents.
Information Technology Word Processing. Word Processing is the preparation of documents such as letters, reports, memos, books, or any other type of correspondences.
Computing Fundamentals Module Lesson 3 — Changing Settings and Customizing the Desktop Computer Literacy BASICS.
Windows Tutorial Common Objects ACOS: 1, 4. Using the Taskbar 1. Using the taskbar, you can switch between open programs and between open documents within.
Microsoft ® Office Training Get up to speed with the 2007 system.
Word Lesson 1 Review. Mini-Toolbar Appears automatically based on the tasks you perform; is transparent until you point to it.
Get up to speed What’s changed, and why Yes, there’s a lot of change in Excel It’s most noticeable at the top of the window. But it’s good change.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
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:
Computing Fundamentals Module Lesson 10 — File Management with Windows Explorer Computer Literacy BASICS.
Basic Editing Lesson 2.
XP New Perspectives on Windows 2000 Professional Windows 2000 Tutorial 2 1 Microsoft Windows 2000 Professional Tutorial 2 – Working With Files.
GUI Design Spreadsheet-Based Decision Support Systems Chapter 23: Aslı Sencer MIS 463.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
© 2010 Pearson Education, Inc. | Publishing as Prentice Hall1 Computer Literacy for IC 3 Unit 2: Using Productivity Software Chapter 1: Starting with Microsoft.
By Felixberto Dominic B. Eruela.  Using a computer to create, edit, and print documents. Of all computer applications, word processing is the most common.
Chapter 23: GUI Design Spreadsheet-Based Decision Support Systems Prof. Name Position (123) University Name.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
Microsoft Visual Basic 2010 CHAPTER TWO Program and Graphical User Interface Design.
Lesson 1 - Understanding the Word Window and Creating a New Document
LECTURE 18 16/11/15. MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce the users conceptual model of applications and give.
 2002 Prentice Hall. All rights reserved. 1 Chapter 2 – Introduction to the Visual Studio.NET IDE Outline 2.1Introduction 2.2Visual Studio.NET Integrated.
The desktop (overview) Working with desktop icons The desktop is the main screen area that you see after you turn on your computer and log on to Windows.
Cs413_design02.ppt GUI Design The User Controls Navigation Traditional GUI design the designer can control where the user can go gray out menu options.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
What’s changed, and why Lesson 1 By the end of this lesson you will be able to complete the following: Get a handle on the new look of Excel. Understand.
DB Implementation: MS Access Forms. MS Access Forms: Purpose Data entry, editing, & viewing data in Tables Forms are user-friendlier to end-users than.
DB Implementation: MS Access Forms
Program and Graphical User Interface Design
Chapter 2 – Introduction to the Visual Studio .NET IDE
Windows xp PART 1 DR.WAFAA SHRIEF.
DB Implementation: MS Access Forms
Presentation transcript:

GUI Tips From GUI Bloopers, Jeff Johnson

GUI Blooper List of common mistakes that software developers frequently make when designing Graphical User Interfaces (GUI) Categories we will discuss: –GUI Components –Layout and Appearance –Textual –Interaction –Responsiveness

Review of Design Principles Focus on the users and tasks, not technology Consider function first, presentation later Conform to the user’s view of the task Don’t complicate the user’s task Be consistent Deliver information, not just data Design for responsiveness Try it out on users, then fix it!

GUI Component Blooper: Dynamic Menus Menu item that changes depending upon the context –Might seem to help; removes commands one shouldn’t be able to execute at that time –But users end up wondering where commands went

Dynamic Menus: Better Gray out or add entirely new menu that appears/disappears

GUI Component Blooper: Duplicate Menu Items Where to put an item? Better chance of finding if it’s in two places? But users wonder if they are different or assume that they are Even worse: multiple menu items with different names

GUI Component Blooper: Hidden Functions Design might allow users to drag/drop between scrolling lists, use control key to delete

Better: Hidden Functions Hidden functions OK as long as it’s not the only way

Hidden Functions (Weak) Reasons –Design software to resemble software they already know (e.g. vi) –Lack of space –Belief that they are faster ways than visible interfaces

GUI Component Blooper: No Keyboard Accelerators Keyboard shortcuts in case: –Blind, Mouse inoperable, Save time –Avoid same shortcut key that does different things in different contexts (Ctrl-F / Ctrl-S)

GUI Component Blooper: Commands only on toolbar buttons What do the icons mean? Toolbar should be shortcuts for menu items Opposite problem: –ALL commands on the toolbar

Toolbars Primary windows should always include a menu bar –All top level commands organized into categories –Provide keyboard shortcut to invoke Toolbar optional –Should contain commands users will use frequently –Ideally customizable by the user

GUI Component Blooper: Confusing checkboxes and radio buttons Radio buttons when only one is selectable Checkboxes when many selectable Word: Change font, effects, subscript and superscript

GUI Component Blooper: No Initial Values Always provide initial values when possible or logical Some programmers do this intentionally as a way to allow users to not specify a value, but it violates the expectations about how a radio button operates Instead give a “No Opinion” or “No answer” option

GUI Component Blooper: Checkboxes for non-ON/OFF Setting Checkboxes should be used for on/off not for a selection of items. Instead use radio buttons.

GUI Component Blooper: Command Buttons as Toggles Saves space on the screen but toggling meaning of a button can be missed by the user Use two buttons and disable the inactive one, or use a toggle switch style control

GUI Component Blooper: Using tabs as radio buttons Misuse of tabs is to use them as if they are radio buttons to present choices that affect what the application will do rather than just which controls are displayed Some users will not realize the last tab selected is the one that is used

Tabs as Radio Buttons Better design:

GUI Component Blooper: Too Many Tabs Intended to save space but too many uses more space – usually doesn’t scale beyond a handful Never use dancing tabs; change position based upon which tab is selected –Unavoidable with multi-rows of tabs

Multi-Row Tabs Solutions: Widen panel, make tabs narrower, or use another control instead of tabs

GUI Component Blooper: Buttons Triggered on Mouse Down Button should not trigger until mouse-up to give the user an option to abort

GUI Component Blooper: Ambiguous Selections If your app allows the selection of multiple items in different controls, make it clear which one is “the” selection If press delete, which selection does it apply to? Multiple selection in the same control is fine; operation applies to all selected items

GUI Component Blooper: Abusing Text Fields Using text fields for read-only data Use label instead Worse: –Read-only but selectable, reader tries to change it

GUI Component Blooper: Overusing Text Fields Common when converting a command line or paper form

Take advantage of the GUI

Layout Blooper: Mixing dialog box buttons with content control buttons Last time we talked about hidden controls Everything OK here?

Align Buttons To Controls Make function clear

Layout Blooper: Un-Natural Order Avoid the “random” layout Add proper tab stops, but also reorganize layout

Layout Blooper: Radio Buttons too far apart Related radio buttons should be grouped closely together

Improved Spacing

Layout Blooper: Shoddy Labeling Alignment of labels and textboxes, use of : Layout Blooper: Inconsistent or Tiny Fonts :

Excuses for Tiny Fonts I can read it. What’s the problem? Hey, we gotta fit all this info in somehow. I just used the default font. It’s not my fault, the text is in the image. It’s big enough in low resolution. Minimum font size is 10, but 12 better Design for high resolution displays Let users adjust the font size

Layout Blooper : Poor Window Location Where should an application’s windows first appear? Heuristics: –On-screen –Staggered –No occlusion

Layout Blooper: Unlabeled Scrolling Container Components It is common for GUI programmers to label small components (e.g. textboxes) but leave large scrolling components unlabeled –Perhaps the content explains its purpose? Not always the case

Text Blooper: Inconsistent Terminology Easy to be inconsistent in providing documentation regarding terms –Folder, Directory –Properties, Attributes, Parameters, Settings –Find, Search, Query –Arguments, Parameters –Login, Authenticate –Server, Service –ID, Key –Pounds, Kilograms

Text Blooper: Geek Speak Easy to allow programmer jargon to seep into the end product (assuming non-tech end user) –Error while checking mail TCP/IP Error 706; {37:1253} –Interface Hall of Shame: A caller to Compuserve customer support said that even though he did what the software told him to do, it didn’t work.

Text Blooper: Poor Writing Actual examples: –Link label: “Information before Getting Started” –“Connect is your contact to CompanyX technical support.” –“Can not connect with host server exitting.”

Text Blooper: Clueless Error Messages Some examples: –“Nesting level too dip.” Burned into ROM and shipped tens of thousands –“Error 500 HTTP Web Server” –“Excuse me, but Eudora could use some help.” –“File missing or you don’t have access.” –“Name contains invalid characters.” –“Value of field exceeds limit.”

Text Blooper: Misleading Window Titles No distinguishing name in MDI Form Can mislead users as to “where they are”, which function they are using

Unique Window Names

Text Blooper: Window Title Doesn’t Match Invoking Command Mismatched titles can mislead user into thinking they selected the wrong command

Interaction Blooper: Exposing implementation to users Users should not be subjected to internal implementation details when they are contrary to their working model Examples: –Speed in a game a setting from 1 to 10 Expect 10 to be fast and 1 to be slow, but it was the opposite Delay loop for the setting’s number of times –Limits on data sizes to “weird” numbers 16, 32, 64, 128, etc. Most people would prefer 10, 100, 1000, etc. Design for the convenience of users, not developers

Interaction Blooper: TTY GUIs Conversion of old prompt-based UI to GUI:

Avoid TTY-GUI Take advantage of GUI components to validate, constrain:

Interaction Bloopers Overwhelming users with decisions and details –Too many choices, many the user doesn’t care about –Trying to fit too much into one screen can make the application more complex –Chunk choices into categories or different screens – iv.engr.uaa.alaska.edu/ncar/tdf14wizard.htmhttp://holmes- iv.engr.uaa.alaska.edu/ncar/tdf14wizard.htm Easily missed information –Often status indicators, mode indicators, prompts for input, results, status messages, can be missed –May not be where the user is looking –Make these items stand out if important

Interaction Blooper: Unexpected Rearrangement of Display What if the OS constantly rearranged your icons for you? Software sometimes rearranges when the user does not expect it

Interaction Blooper: Mission Impossible Instructions Instructions that go away too soon Detailed instructions should remain on the screen while the user is carrying them out –Latest Office apps display help in right hand pane

Interaction Blooper: Installation Nightmares Many software products are a nightmare to install and set up, even if it is otherwise useful and usable gForge installation

Interaction Blooper: Diabolical Dialog Boxes Too Many Levels –Deep hierarchies divert users from original goals, lose track of which OK, Apply, Cancel buttons are before them –Most people lost track more than a few levels down a hierarchy

Interaction Blooper: Dialog Boxes Traps Dialog boxes that provide no way out other than the way the user doesn’t want to go

Dialog Box Traps Unclear meaning behind cancel

Dialog Box Traps Forced to enter data! Cancel disabled?

Interaction Blooper: Ok and Cancel do the same thing OK should mean “Yes do this” and Cancel should mean “No, I don’t want to do this”

Responsiveness Blooper: Waiting Let the user know when the system is busy Without it the user may think the application is locked up, submit data multiple times, kill it

Responsiveness Blooper: Phony Progress Bars Progress bars should actually be accurate Better Beware of fancy animations that don’t actually display progress –Might as well just give an hourglass

Responsiveness Tips UI designers rarely consider responsiveness during design Programmers equate responsiveness with performance –e.g. better algorithms or data structures A system can still be responsive but have “low” performance –Respond to user input quickly, but may process in the background –Respond to user input immediately but put job in queue for later

Real Time Interface 0.1 seconds –Limit for perception of cause-and-effect between events –Software that waits longer than 0.1 seconds to register a reaction to a user action appears “broken” –Limit for perception of smooth animation 1 second –Maximum comfortable gap in a conversation –If displaying information on the screen the user is unlikely to react until at least one second 10 seconds –Unit of time into which people break down their planning and execution of larger tasks –Every ten seconds user like to look up and reassess their task status, relax, etc. –Like to mark a task complete and move onto the next one –Amount of time a user is willing to spend to set up and operation and start it before losing patience (operation can take longer)

UI Testing WE’LL HAVE TO ELIMINATE A FEW STEPS IN ORDER TO HIT THE MARKET WINDOW. I THINK WE CAN GET RID OF MARKET RESEARCH AND TECHNICAL TESTING. THEY’RE BASICALLY “OVERHEAD.” GONE! NOW WE’LL HIT THE WINDOW! … LIKE A BIRD. Even if you commit all of these bloopers, UI Testing could still save you.