GUI Bloopers - University of Alaska Anchorage

GUI Bloopers - University of Alaska Anchorage

GUI Bloopers Navigation and Text Bloopers Navigation The most pervasive problem software users encounter is navigation: finding their way to what they are seeking.

People should know Where they are Where theyve been Where they can go Whether the goal is near or far Blooper 13: Window or page not identified

Some applications or websites fail to provide any sign of where the user is. One failure is to provide a window title: Blooper 13 Avoiding Blooper 13

Title all windows, including dialog boxes. Use the format: : Blooper 14 : Same title on different windows Sometimes different windows or web pages have the exact same title; this can mislead

users about where they are. Unique Window Names Especially common with MDI Forms Blooper 15 : Window title doesnt match

command or link Users need reassurance that they got what they wanted to get. Avoid haphazard mappings between commands or links and the windows or pages they display. Mismatched titles can mislead user into thinking they selected the wrong command

Blooper 15 Example Blooper 15 on the Web Related Problem : Mystery Meat Navigation This is when you have to click on something to figure out what it is.

Examples: Avoiding Blooper 15

Make titles of windows or web pages match the command that displays them Inexact matches are OK if they work for users As long as users see the connection E.g. Show Order Status and Status of Order #52 would be minor enough not to confuse anyone

Blooper 16 : Distracting off-path buttons and links People follow an information scent to their goals based on cues in the interface. Software should help provide proper scents to guide users and not lead them astray.

Blooper 16 Example Too many distracting links for IEEE renewal page Blooper 16 : Lured Off Track, No Return Blooper 16 : Confusing Links

Users may skip to continue and click it instead of Submit Information Avoiding Blooper 16 Dont distract the customer from their task, let them finish the primary task first Create a process funnel that guides users

toward their goal Make sure off-path button or link labels dont trick users into thinking they are on the same path. Could use pop-up or tooltip windows to show explanations

Blooper 17 : Self-links Some web pages have links to themselves Disorienting as users may not recognize the redisplayed page as the one they are on On home page already, but can

click on Home Avoiding Blooper 17 Dont include active links to the current page on the current page Dont forget about the navigation bar Dont include a link to the current page

Helps illustrate the current page as well In breadcrumb, avoid link to here Blooper 18 : 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 lose track more than a few levels down a hierarchy

Avoiding Blooper 18 General rule: avoid more than two levels of dialog boxes Rule only applies to dialog boxes Some dialog boxes dont count E.g. a File chooser or error messages

Ways to cut excess levels Chart the window hierarchy Use a details pane instead of a separate window Blooper 19 : Competing search boxes When users are faced with multiple search boxes they often Which one should I use?

Multiple Search Which search to use and why is one better than another?

Avoiding Blooper 19 Less is more usually one search box is sufficient If you need to provide different search functions for searching different types of structured data then design each search box to look completely different and specific to its

search domain Blooper 20 : Poor search results browsing Users should be able to browse search results efficiently IBM search result for

tablet computers Only Back and Next buttons for 1438 results Blooper 20 Example Search from has only

Back/Next with 20 hits per page and no Totals Avoiding Blooper 20 Search results should remind users what the search terms were, indicate number of hits,

and make it easy to browse through the hits. Blooper 21 : Noisy Search Results How easy is it to spot relevant hits amid all the others? Humans scan the list quickly for those that look promising

To thwart humans, an evil web designer could: Bury differences in noise : Add junk to each result so items are hard to distinguish Force users to click on hits : Make hits look exactly alike Blooper 21 Example

Many hits are identical or look similar. Avoiding Blooper 21 Show and stress important data in search results. Minimize repetition and show information that lets people distinguish hits.

Minimize the need to click. People should have to click on hits only to actually get the item, not find out what it is. Main Yale site search: Textual Bloopers Blooper 22 : Inconsistent Terminology

One of the most common textual bloopers is to be haphazard and inconsistent about which terms are used for what concepts Exercise: List all terms Variations: Different term for same concept Folder, Directory

Properties, attributes, settings Task, step Same term for different concepts View Avoiding Blooper 22

One name per concept Create a product lexicon Test the lexicon on users Use industry standard terms for common concepts E.g. select means clicking on an object to mark it

for future action, not for other purposes like default Blooper 23 : Unclear terminology Ambiguous terms, e.g. enter Terms for different concepts overlap in meaning Concepts too similar

Avoiding Blooper 23 Avoid synonyms Avoid ambiguous terms Test the terminology on users If users misinterpret the terminology used in your software, its your problem. Theyll use

something else that doesnt mislead or confuse them. Blooper 24 : Bad writing Makes software look amateurish even if it doesnt hurt usability Inconsistent writing style

Terse in some places, verbose in others Commands named after verbs in some places and named after nouns in others Different capitalization Ending some but not all sentences with periods Blooper 24 Example

Blooper 24 Variation: Poor diction, grammar, spelling, punctuation Blooper 25: Too much text Needless text is bad anytime, but especially in software

when it can distract users from their goals Blooper 25 Example Wordy and repetitious text from Avoiding Blooper 25 Use no more text than is necessary

Avoid long prose paragraphs Use headings, short phrases, bullet points Keep links short, one to three words; explain with non-link text Avoid repetition in link lists; cut repeated text or move into headings

Goals: Scannability, clarity, simplicity Example cutting needless text website from early 2002 to late 2002 to 2007

Blooper 26: 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 didnt work. Blooper 27 : Calling users user to their face Users is what software developers call people who use our systems. Its a fine term when talking to other developers, but it is not

what users call themselves. Only two industries call their customers users. One is computer software. Do you know what the other industry is? Blooper 27 Examples

Blooper 27 Examples Avoiding Blooper 27 Use a non-developer term like visitor, customer, or member instead of user. Blooper 28 : Vague error messages

Related to geek-speak are error messages that give vague, generic errors instead of being helpful to the user. Variations Messages displayed by low-level code Reason for error not given to higher level code Generic message components

Blooper 28 Examples 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 dont have access. Name contains invalid characters. Value of field exceeds limit. The Winner of Vague Error Messages

Avoiding Blooper 28 Express the error in terms of the task Dont just identify the problem; suggest a solution Messages should contain: Error symbol; Problem: Solution Pass errors up to code that can translate them for users.

Design messages and message-bearing components to accept details at runtime As opposed to a static error message with no runtime details Different types of messages have different audiences User errors: end users Logs: system admin

Debugging/tracing: developers Blooper 29 : Erroneous Messages Messages that are just plain wrong United Air:

User tries to review activity with a TO date in the future Blooper 29 Examples

Blooper 29 Examples Avoiding Blooper 29 It is very bad for software to lie to its users Error messages that scold users for the wrong error or for errors they did not commit, and

instructions that are false, are software flaws consider them bugs Give high priority to fix Blooper 30 : Text makes sense in isolation but is misleading in the GUI Labels, headings, descriptions, etc. may make sense in

isolation, but in the context of real-world use may not be clear Example: Printer described as perfect for small business but then all printers on the site end up with the same description Page of software patches that can be downloaded to fix bugs titled These patches have been tested and will keep your workstation

running smoothly implies other patches on the site are not tested Avoiding Blooper 30 Consider text in the context of where it will appear, not in isolation Blooper 31 : Misuse (or nonuse) of on command labels

Commands that need more information had on the end, such as Save As which brings up a file dialog box Dont violate this standard (omitting or overusing) Blooper 31 Example

Avoiding Blooper 31 Know the rule for Standard in Java, Vista, Apple interface guidelines Not for any command that opens a window Only when further information is needed to

complete the command For graphical buttons, could include on tooltip text

Recently Viewed Presentations

  • October Dawn - AS LITERATURE

    October Dawn - AS LITERATURE

    October Dawn. By Ted Hughes. October is marigold, and yet. A glass half full of wine left out. To the dark heaven all night, by dawn. Has dreamed a premonition. Of ice across its eye as if. ... The word...
  • Prevenient Grace  Wesleys theology = theology of grace

    Prevenient Grace Wesleys theology = theology of grace

    先備的恩典 Prevenient Grace 神的怜悯 神的恩典 神的爱 耶稣 我的恐惧 我的错误 我的罪 我 衛理的神學可稱為「恩典神學」 Wesley's theology = theology of grace 恩典的途徑 - Means of Grace 先備的恩典 - Prevenient Grace 稱義的恩典 - Justifying Grace 成聖的恩典 - Sanctifying Grace 負責任的恩典 - Responsible Grace 完全的...
  • Application of Radioactivity and the Law to Contaminated Land ...

    Application of Radioactivity and the Law to Contaminated Land ...

    V_2009-06-01. Application of Radioactivity and the Law to Contaminated Land and Demolition Projects Gareth Walker, BSc, PhD, MRSC ... Golder Associates UK Ltd Other titles:
  • Searching alternative sources Document discovery in integrated care

    Searching alternative sources Document discovery in integrated care

    Supporting people to be independent - care in your own home / services/technology. Avoiding unplanned admissions - e.g. falls - Channel shift. Every service in the NHS has nationally set priorities, targets and budget constraints, etc. Increasingly, solutions are looking...
  • REM 663 - - Simon Fraser University

    REM 663 - - Simon Fraser University

    Piketty: Piketty's thesis did not arise suddenly with the writing of "Capital in the 21st Century", but rather over many years with the help of other (as he says "…several dozen…") scholars in the construction and analysis of a large...
  • Jasper Johns When have you seen numbers today?

    Jasper Johns When have you seen numbers today?

    Jasper Johns wanted us to look at their details and see them in a new way, as art! So, he made paintings of them. Jasper did the same with other objects, such as maps and flags. Jasper said that we...
  • Processing and Characterization of Piezoelectric Materials into MicroElectroMechanical

    Processing and Characterization of Piezoelectric Materials into MicroElectroMechanical

    Click to edit company slogan . ... (MEMS) denote systems that include one or more small microstructures (sub- μm to mm) that often are fabricated using a technology μnamed micromachining, and materials,that originates partly from the semiconductor industry's processes and...
  • Software Defined Acoustic Modems Ryan Kastner Department of

    Software Defined Acoustic Modems Ryan Kastner Department of

    Scenario for WetNet for Eco-Surveillance Aquanode WetNet using Aquanodes Underwater Acoustic Channel Severe multipath - 1 to 10 msec for shallow water at up to 1 km range Doppler Shifts Long latencies - speed of sound underwater approx 1500 m/sec...