Graphical User InterfacesGraphical User Interfaces

CS 5389CS 5389

Lecture 10Lecture 10

Introduction Introduction

• When it comes to learning about computer systems many When it comes to learning about computer systems many people experience anxiety, frustration, and people experience anxiety, frustration, and disappointmentdisappointment

• Even though increasing attention is being paid to Even though increasing attention is being paid to improving interface design, complex systems can still improving interface design, complex systems can still benefit both paper and online helpbenefit both paper and online help

• Forms of paper user manuals:Forms of paper user manuals:– Install manualInstall manual– Brief getting-started notes Brief getting-started notes – Introductory tutorial Introductory tutorial – Thorough tutorial Thorough tutorial – Detailed reference manual Detailed reference manual – Quick reference card Quick reference card – Conversation manual Conversation manual

IntroductionIntroduction

• Online materialsOnline materials– Online manual Online manual – Online help Online help – Context-sensitive helpContext-sensitive help– Online tutorialOnline tutorial– Animated demonstrationAnimated demonstration– GuidesGuides– FAQsFAQs– Online communities, newsgroups, listservers, e-mail, chat, and Online communities, newsgroups, listservers, e-mail, chat, and

instant messaginginstant messaging

User’s GoalUser’s Goal   PaperPaper OnlineOnline

I want to I want to buybuy it it Sales brochure, fact sheetSales brochure, fact sheet Animated demonstrationAnimated demonstration

I want to I want to learnlearn it it TutorialTutorial   Manual, tutorial, guide, animated demonstrationManual, tutorial, guide, animated demonstration

I want to I want to useuse it it User manualUser manual   Manual, help, context-sensitive helpManual, help, context-sensitive help

I want to I want to solvesolve a problem a problem FAQFAQ   Help, FAQ, online communityHelp, FAQ, online community

Paper versus online manualsPaper versus online manuals• There are many reasons to have online manualsThere are many reasons to have online manuals

– Physical advantagesPhysical advantages– Navigation featuresNavigation features– Interactive servicesInteractive services– Economic advantagesEconomic advantages

• However, these advantages can be compromised by However, these advantages can be compromised by potentially serious negative side effectspotentially serious negative side effects– Displays may not be as readable as paper manualsDisplays may not be as readable as paper manuals– Each display may contain substantially less information than a sheet Each display may contain substantially less information than a sheet

of paperof paper– The user interface of online help systems may be novel and confusing The user interface of online help systems may be novel and confusing

to novicesto novices– The extra mental effort required for navigating through many screen The extra mental effort required for navigating through many screen

may interfere with concentration and learning, and annotation can be may interfere with concentration and learning, and annotation can be difficultdifficult

– Splitting the display between work and help or tutorial windows Splitting the display between work and help or tutorial windows reduces the space for work displaysreduces the space for work displays

– Small devices such as cell phones do not have enough display space Small devices such as cell phones do not have enough display space to provide online helpto provide online help

Reading from paper Reading from paper versus from displaysversus from displays• Numerous studies have found 15% to 30% slower task times for Numerous studies have found 15% to 30% slower task times for

comprehension or proofreading of text on computer displays, comprehension or proofreading of text on computer displays, compared to on papercompared to on paper

• Potential Disadvantages in Reading from Displays:Potential Disadvantages in Reading from Displays:– Poor fonts, especially on low resolution displays Poor fonts, especially on low resolution displays – Low contrast between characters and the background Low contrast between characters and the background – Fuzzy character boundaries Fuzzy character boundaries – Emitted light from displays may be more difficult to read by than reflected light Emitted light from displays may be more difficult to read by than reflected light

from paper from paper – Glare may be greater on displays Glare may be greater on displays – Screen flicker can be a problem Screen flicker can be a problem – Curved display surface may be problem Curved display surface may be problem – Small displays require more frequent page turning Small displays require more frequent page turning – Reading distance can be greater than for paper Reading distance can be greater than for paper – Displays are fixed in place Displays are fixed in place – Display placement may be too high for comfortable reading Display placement may be too high for comfortable reading – Layout and formatting problems Layout and formatting problems – Reduced hand and body motions with displays as compared to paper may be Reduced hand and body motions with displays as compared to paper may be

fatiguing fatiguing – Rigid posture for displays may also be fatiguing Rigid posture for displays may also be fatiguing – Unfamiliarity of displays and the anxiety that the image may disappear can increase Unfamiliarity of displays and the anxiety that the image may disappear can increase

stress stress

Shaping the content of manualsShaping the content of manuals

• Traditionally, training and reference material often Traditionally, training and reference material often written by junior member of development team written by junior member of development team – manuals were often poorly written manuals were often poorly written – were not suited to the background of the users were not suited to the background of the users – were delayed or incomplete were delayed or incomplete – were not tested adequatelywere not tested adequately

• The benefits of well-designed manuals include shorter The benefits of well-designed manuals include shorter learning times, better user performance, increased user learning times, better user performance, increased user satisfaction, and few calls for supportsatisfaction, and few calls for support

• The “active user paradox”The “active user paradox”– Users’ eagerness to conduct meaningful activities often stops Users’ eagerness to conduct meaningful activities often stops

them from spending time “just” learning, and therefore their them from spending time “just” learning, and therefore their skills remain mediocre. skills remain mediocre.

Shaping the content of manualsShaping the content of manuals

• Minimal manuals encourage active Minimal manuals encourage active involvement with hands-on experiences involvement with hands-on experiences

• Carroll's Carroll's guided explorationguided exploration – choose an action-oriented approach choose an action-oriented approach – anchor the tool in the task domain anchor the tool in the task domain – support error recognition and recovery support error recognition and recovery – support reading to do, study, and locate support reading to do, study, and locate

• Show numerous well-chosen screen prints Show numerous well-chosen screen prints that demonstrate typical uses (that demonstrate typical uses (predictive predictive modelmodel) )

• Table of contents and index required Table of contents and index required • Glossaries for clarifying technical terms Glossaries for clarifying technical terms • Appendices for error messages Appendices for error messages

Use of the OAI model Use of the OAI model to design manualsto design manuals• Introductory tutorial Introductory tutorial

– task training first task training first – learn the hierarchy of objects, from high level down to the atomic learn the hierarchy of objects, from high level down to the atomic – recognize the range of high-level intentions down to specific action recognize the range of high-level intentions down to specific action

steps steps – learn about the interface representations learn about the interface representations

• start with familiar objects and actions start with familiar objects and actions • link these concepts to high-level interface objects and actions link these concepts to high-level interface objects and actions • show syntax needed to accomplish each task show syntax needed to accomplish each task

• Conversion manual Conversion manual – users knowledgeable about task domain, but unfamiliar with specific users knowledgeable about task domain, but unfamiliar with specific

software software – need presentation showing relationship between metaphors and need presentation showing relationship between metaphors and

already known plans and the new ones required by the new software already known plans and the new ones required by the new software • Quick reference Quick reference

– user knowledgeable about task and interface objects and actions user knowledgeable about task and interface objects and actions – needs details to convert their plans into detailed actions needs details to convert their plans into detailed actions

• Sample sessions extremely helpful in giving portrait of system Sample sessions extremely helpful in giving portrait of system features and interaction stylesfeatures and interaction styles

• Flow diagrams provide visual overviews that orients users to Flow diagrams provide visual overviews that orients users to transitions from one activity to anothertransitions from one activity to another

Organization and writing styleOrganization and writing style

• Precise statement of educational objectives Precise statement of educational objectives • Present concepts in a logical sequence with Present concepts in a logical sequence with

increasing order of difficulty increasing order of difficulty • Ensure that each concept is used in Ensure that each concept is used in

subsequent sections subsequent sections • Avoid forward references Avoid forward references • Construct sections with approximately equal Construct sections with approximately equal

amounts of new material amounts of new material • Need sufficient examples and complete Need sufficient examples and complete

sample sessions sample sessions • Choice of words and phrases important Choice of words and phrases important • Style guides for organizations attempt to Style guides for organizations attempt to

ensure consistency and high qualityensure consistency and high quality• Writing style should match users' reading Writing style should match users' reading

abilityability

Online manuals and helpOnline manuals and help

• Kearsley's guidelines for online help Kearsley's guidelines for online help systems: systems: – Make the help system easy to access and Make the help system easy to access and

easy to return from. easy to return from. – Make help as specific as possible. Make help as specific as possible. – Collect data to determine what help is Collect data to determine what help is

needed. needed. – Give users as much control as possible over Give users as much control as possible over

the help system. the help system. – Make help messages accurate and complete. Make help messages accurate and complete. – Do not use help to compensate for poor Do not use help to compensate for poor

interface design. interface design.

Online manuals and helpOnline manuals and help

• Online ManualsOnline Manuals– Reproduction of printed manuals online Reproduction of printed manuals online

• paper page layouts may not convert well paper page layouts may not convert well • dealing with figures problematic dealing with figures problematic • attractive if users have large enough display (full page) attractive if users have large enough display (full page) • close match between printed and online versions useful close match between printed and online versions useful

– Enhanced by special online features Enhanced by special online features • string search string search • multiple indices multiple indices • multiple tables of contents multiple tables of contents • tables of figures tables of figures • electronic bookmarks electronic bookmarks • electronic annotations electronic annotations • hypertext traversal hypertext traversal • automatic history keepingautomatic history keeping

Online manuals and helpOnline manuals and help

• Online Manuals (cont.)Online Manuals (cont.)– Most effective if manuals redesigned to fit Most effective if manuals redesigned to fit

electronic medium to take advantage of electronic medium to take advantage of • multiple windows multiple windows • text highlighting text highlighting • color color • sound sound • animation animation • string search with relevance feedback string search with relevance feedback

– Properly designed table of contents that can Properly designed table of contents that can remain visible to side of text page vital remain visible to side of text page vital

– Novices need tutorials Novices need tutorials – Intermittent knowledgeable users can handle Intermittent knowledgeable users can handle

concise descriptions of interface syntax and concise descriptions of interface syntax and semantics semantics

– Keyword lists improved by clustering into Keyword lists improved by clustering into meaningful categoriesmeaningful categories

Online manuals and helpOnline manuals and help

• Online HelpOnline Help– Traditionally, little information about how Traditionally, little information about how

to assemble actions to perform tasksto assemble actions to perform tasks– Users expect to be able to search the full Users expect to be able to search the full

text of online documentstext of online documents– Expanding and contracting table of Expanding and contracting table of

contents can be combined with searchcontents can be combined with search– The online help and support center for The online help and support center for

Microsoft Windows XP contains Microsoft Windows XP contains articles/topics and search optionsarticles/topics and search options

– An answer wizard can respond to natural An answer wizard can respond to natural language requestslanguage requests

Online manuals and helpOnline manuals and help

• Context-sensitive helpContext-sensitive help– User-controlled, interactive User-controlled, interactive

object helpobject help• Small pop-up boxSmall pop-up box• Dedicated portion of the displayDedicated portion of the display

– Intelligent help: users interaction history, a Intelligent help: users interaction history, a model of user population, and a model of user population, and a representation of their tasks to make representation of their tasks to make assumptions about what users wantassumptions about what users want• Development of intelligent help systems face Development of intelligent help systems face

serious usability challengesserious usability challenges• ClippitClippit

– Hybrid approachesHybrid approaches• Initiative is shared between the user and systemInitiative is shared between the user and system• Unobtrusive advice from system, but requires Unobtrusive advice from system, but requires

spacespace

Online tutorials, demonstrations, Online tutorials, demonstrations, and animationsand animations• Online tutorialsOnline tutorials

– Does not have to keep shifting Does not have to keep shifting attention between the terminal and attention between the terminal and the instructional material the instructional material

– Practices the skills needed to use Practices the skills needed to use the system the system

– Can work alone at an individual pace Can work alone at an individual pace and without the embarrassment of and without the embarrassment of mistakes made before a human mistakes made before a human instructor or fellow students instructor or fellow students

– Start-up tipsStart-up tips

Online tutorials, demonstrations, Online tutorials, demonstrations, and animationsand animations• Demonstration systemsDemonstration systems

– Distributed on disk, CD-ROM, or over Internet Distributed on disk, CD-ROM, or over Internet – Designed to attract potential users Designed to attract potential users – Typically show off system features using Typically show off system features using

animation, color graphics, sound, etc. animation, color graphics, sound, etc. – User-interface requirements are to User-interface requirements are to

• capture and maintain user interest capture and maintain user interest • convey information convey information • build positive product image build positive product image

– Typical controls Typical controls • automatic or manual pacing automatic or manual pacing • length of demonstration (short versus in-depth) length of demonstration (short versus in-depth) • stop, replay, skipstop, replay, skip

– A screen capture animation is easy to produce A screen capture animation is easy to produce with standard tools such as Camtasiawith standard tools such as Camtasia

– Games often have a 30 second demonstrationGames often have a 30 second demonstration

Online tutorials, demonstrations, Online tutorials, demonstrations, and animationsand animations• GuidesGuides

– Audio and video recording of human Audio and video recording of human guides or cartoon figures to lead guides or cartoon figures to lead users through informationusers through information

– GUIDES 3.0 projectGUIDES 3.0 project– Audio tours of art galleriesAudio tours of art galleries– Audio or video lectures may be Audio or video lectures may be

played on a computer or a separate played on a computer or a separate systemsystem

– Video ProfessorVideo Professor

Online communities for user Online communities for user assistanceassistance• Help networks using email Help networks using email

– sent to designated help desk or staff sent to designated help desk or staff person person

– sent to general list within organization sent to general list within organization – users must publicly expose their lack of users must publicly expose their lack of

knowledge knowledge – risk of getting incorrect advice risk of getting incorrect advice

• Communal approach means low cost Communal approach means low cost for software maintenancefor software maintenance

• Microsoft actively encourages itMicrosoft actively encourages it• Frequently asked questions (FAQ) Frequently asked questions (FAQ)

lists for newcomerslists for newcomers

Development processDevelopment process

• Allows adequate time for review, testing, and Allows adequate time for review, testing, and refinement refinement

• Manual can act as a more complete and Manual can act as a more complete and comprehensible alternative to formal comprehensible alternative to formal specifications specifications

• Manual writer becomes effective critic, Manual writer becomes effective critic, reviewer, or question asker reviewer, or question asker

• Enables pilot testing of software's Enables pilot testing of software's learnability learnability

• Allows for reviews and suggestions by Allows for reviews and suggestions by designers, etc. designers, etc.

• Informal walkthroughs with users possible Informal walkthroughs with users possible • Field trials with moderate numbers of users Field trials with moderate numbers of users

facilitatedfacilitated