HY 351: Ανάλυση αι Σχεδίαση Πληροφοριακών Συστηµάων CS 351: Information Systems Analysis and Design Outline • What is HCI ? – Why the User Interface is an important part of an IS? • General Principles of UI Design User Interface Design • Input / Output / Navigation mechanisms • The UI Design Process – How we evaluate a UI . • UI Design and UML (the UX modeling language) Yannis Tzitzikas Lecture : 17 Date : 1 -12-2005 University of Crete, Fall 2005 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 2 What is HCI? From Analysis Models to Design Models Why the UI is an important part of an Information System? Requirements High level HCI: The dialog between the user and the system determination Detailed list of more business requirements precise requirements described in the system request • System Interface: Analysis – defines how systems exchange information with other systems modeling • User interface: – defines how the system will interact with external entities Functional/Structural/Behavioral modeling of the system A “good” UI: Design • Can reduce training costs • Class and Method Design • Can increase the productivity of its users • Data Management Layer Design • Human Computer Interaction Design • Can prevent user errors Design Models • Physical Architecture Layer Design • Can satisfy the users U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 3 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 4 Why the UI is an important part of an IS? Why the UI is an important part of an IS? Can reduce training costs Can increase the productivity of its users •• 10 10 employeesemployees •• 10 10 employeesemployees •• 2 2 newnew applicationsapplications perper yearyear •• 230 230 workingworking daysdays perper yearyear •• 2 2 daysdays savedsaved fromfrom trainingtraining timetime •• 100 100 screensscreens perper dayday •• 10 10 secsec perper screenscreen (savings)(savings) == 1010 xx 22 xx 22 == 4040 daysdays savingssavings perper yearyear(2 (2 personperson months)months) == 1010 xx 230230 xx 100100 xx 1010 /3600/3600 == 638638 hourshours perper yearyear (savings)(savings) == 638638 // 88 == 7979 daysdays // 2020 ≈≈44 monthsmonths perper yearyear (savings)(savings) 2 months x 1500 = 3.000 Euros / year 4 months x 1500 = 6.000 Euros / year 126 SM U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 5 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 6 Why the UI is an important part of an IS? Why the UI is an important part of an IS? Can prevent user errors Can satisfy users ( and … sell the system! ) • 500 users • 500 users It is important to remember that to the end user • 20 errors per year • 20 errors per year “the user interface IS the system”, •• 15 15 minutesminutes perper errorerror == 500500 xx 2020 xx 1515 // 6060 == 25002500 hourshours == 25002500 hourshours // 88 (=312(=312 days)days) // 2020 ≈≈1515 monthsmonths lostlost perper yearyear • Users tend to reject (even sabotage) system with UI they don’t like • A good UI can sell the systems ! • A poor UI can ruin a system that is outstanding in all other aspects 15 months x 1500 = 22.500 Euros / year U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 7 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 8 Some statistics Consequences of poor UIs • UI is 47% - 60% of the total code Real cases: • The GUI is minimally 29% of the software development project budget •• A A $3$3 millionmillion applicationapplication forfor anan insuranceinsurance companycompany toto bebe usedused byby independentindependent agentsagents toto supportsupport themthem inin sellingselling theirtheir company’scompany’s products.products. • The GUI may take as much 40% of the development effort However,However, agentsagents refusedrefused toto useuse thethe applicationapplication becabecauseuse thethe systemsystem waswas ““un-learnable”un-learnable ” and and ““unusable”.unusable ”. •• In In aa customercustomer serviceservice organization,organization, trainingtraining onon ththee systemsystem tooktook 66 monthsmonths,, butbut employeesemployees typicallytypically stayedstayed onlyonly 1818 monthsmonths inin thatthat department.department. •• Extensive Extensive andand expensiveexpensive functionalityfunctionality inin aa HumanHuman RResourcesesources systemsystem waswas notnot usedused becausebecause usersusers forgotforgot howhow toto accessaccess ititone one weekweek afterafter training.training. U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 9 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 10 Why there are poor UIs? Multidisciplinary Nature of HCI • Examples of poor user interfaces in widely used mechanical system: – e.g. VCRs, Photocopies, Faxes, .. • Why they are poor ? Human side: Machine side: – Inadequate training of developers – cognitive psychology – computer science • diverse knowledge required to design interfaces – ergonomics and human factors – engineering – computer graphics • user interface specialists are rarely involved – sociology and anthropology – operating systems – Ignorance by software engineers of usability and how – linguistics to measure it – programming languages – communication theory – software engineering – The Multidisciplinary Nature of HCI – social and organizational psychology – development environments – graphic and industrial design – artificial intelligence U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 11 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 12 Human Characteristics Human Characteristics and .. their implications on UIs • Limited short-term memory Some human characteristics: – People can instantaneously remember about 7 items of information. If you • People don’t like reading manuals present more than this, they are more liable to make mistakes. • People use prior learning to support new learning • People make mistakes • People are always building models of their world – When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more Implications mistakes. • build interfaces that allow users to learn by using the interface • People are different • build interfaces that suggest correct models – People have a wide range of physical capabilities. Designers should not just design for their own capabilities. • build interfaces that rely on prior learning • People have different interaction preferences – Some like pictures, some like text. So we can safely assume that users already know the “semantics” of the icons used in MS Windows/Office, e.g.: U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 13 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 14 Design Principles User familiarity • The interface should be based on user-oriented terms and concepts rather than computer concepts. – E.g.: in an office system use concepts such as letters, documents, folders etc. rather than directories, file identifiers, etc. Consistency • The system should display an appropriate level of consistency. Commands and menus should have Principles of UI Design the same format, command punctuation should be similar, etc. Minimal surprise • If a command operates in a known way, the user should be able to predict the operation of comparable commands Recoverability • The system should provide some resilience to user errors and allow the user to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc. User guidance • Some user guidance such as help systems , on-line manuals, etc. should be supplied User diversity • Interaction facilities for different types of user should be supported . For example, some users have seeing difficulties and so larger text should be available U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 16 Features of a Good Design Principles for User Interface Design • Has affordances : makes each operation visible – e.g. buttons that indicate that they are to be pressed, scrollbars, glass is for looking through or • Layout for breaking, stairs are for climbing, ... • Content awareness • Offers obvious mappings : makes the relationship between the actual action of the device and the action of the user obvious • Aesthetics – good example : the presentation of the font to be selected in MSWord • User experience – bad example : function keys • Provides feedback on the user’s actions • Consistency – good example : WYSIWYG (What You See Is What You Get ) e.g. Word • Minimal user effort – bad example : latex • Provides a good mental model of the underlying behavior of the device • Provides forcing functions : prevents a user from making bad errors – good example : inactive menu items – bad example : command line interfaces (the user can issue any command) • Supports automatic learning : offers consistencies and practice that help the user acquire interface skills (based on repetitive patterns). – good example : a set of screens where the locations of the menu items are the same – bad example : a set of screens where the locations of the menu items are different U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 17 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas,