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 beca becauseuse 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, Fall 2005 18 Principles> Layout Concepts Principles> Content Awareness
• “Similar” areas should be grouped together (the user movement should be • All interfaces should have titles minimized) • Menus should show • Areas and information should minimize user movement from one to another – where you are – where you came from to get there • Ideally, areas will remain consistent in • It should be clear what information is within each area – Size • Fields and field labels should be selected carefully – Shape • Use dates and version numbers to aid system users – Placement for entering data – Reports presenting retrieved data
• The screen is often divided into three boxes – Navigation area (top) – Status area (bottom) – Work area (middle) • Information can be presented in multiple areas
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 19 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 20
Principles>Aesthetics Principles> User Experience
• Interfaces need to be functional and inviting to use • How easy is the program to learn? • Avoid squeezing in too much, particularly for novice users • How easy is the program to use for the expert? • Design text carefully • Consider adding shortcuts for the expert – Be aware of font and size • Where there is low employee turnover, some training can lessen the impact of – Avoid using all capital letters less precise interfaces
• Colors and patterns should be used carefully – Test quality of colors by trying the interface on a black/white monitor – Use colors to separate or categorize items
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 21 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 22
Principles> Consistency Principles>Minimize Effort
• Enables users to predict what will happen The “3 clicks rule”: • Reduces learning curve Users should be able to go from the start or main menu of a system to the information or • Considers items within an application and across applications action they want in no more than three mouse clicks or three keystrokes • Pertains to many different levels – Navigation controls – Terminology – Report and form design
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 23 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 24 The 3 fundamental parts of a UI: Input Mechanism
Input mechanism : defines the way the system captures information Output mechanism : defines the way the system provides information to users or other systems Navigation mechanism : provides the way for users to tell the system what to do
Input mechanism Input Design
Input mechanisms allow the entry of data in the system. Input design means designing the screens used to enter the information as well as any forms on which users write or type information. • Data capture – involves the identification of new data to be inserted in an information system The goal is to simply and easily capture accurate information for the system • e.g. a photo, a bar code • Data entry Principles – the process of translating the source document into a machine readable format • Capture Data at the source • e.g. digitazing the photo – Reduces duplicate work and processing time • Data input – Decreases cost and probability of error – the actual entry of data (already in machine-readable from) in the computer • Minimize keystrokes – Never ask for information that can be obtained in another way Online versus Batch Processing – List selection is more efficient than entering information • Online processing immediately records the transaction in the appropriate database – Use default values where possible • Batch processing collects inputs over time and enters them into the system at one time • Validate input in a batch – Check the completeness, format, range, consistency of data entry – Batch processing simplifies data communications and other processes, but means that inventory and other reports are not accurate in real time – Data errors can be reduced dramatically because of data validation processes
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 27 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 28
Input Devices Types of Input Boxes
• Input devices: – keyboards, mouse – bar code readers – optical character recognition – magnetic stripe readers – smart cards – scanners – cameras + software
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 29 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 30 Output Design
Types of Outputs Basic Principles • External outputs • Understand report usage – leave the system permanently – Frequency? • airline tickets, boarding passes, bank transaction receipt – Real-time or batch reports? Output Design • Turnaround outputs • Manage information load – leave and later reenter the system – All needed information, no more • invoices, purchase orders • Minimize bias • Internal outputs – e.g. scales in bar charts should be – never leave the system (useful for monitoring and management defined carefully purposes, e.g. internal reports, summary reports, etc).
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 32
Advanced Visualisation Techniques Output Design>More advanced building blocks Overviews: Hyperbolic Trees
The structure of a Web site Advanced visualization techniques are useful for providing overview data which are very important for taking strategic decisions.
Examples: • Bar charts (histograms) and pie charts • Maps (with clickable spots) • Three/Graph-based layouts
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 33 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 34
Advanced Visualisation Techniques Advanced Visualisation Techniques Rings Fisheye views
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 35 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 36 Advanced Visualisation Techniques Advanced Visualisation Techniques For clustered data
Three-dimensional overview based on clustering ( Themescape)
Kohonen’s feature map
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 37 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 38
Advanced Visualisation Techniques ...
Navigation Mechanism
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 39
Navigation mechanism Navigation mechanism: Menus and Messages
Menus Messages • Hardware Principles Types of Menus Types of Messages – Keyboard, mouse, • Assume that users have not read the manual, • Menu bar, Drop-down menu, Pop-up • Error messages touch screen, have not attended training and do not have any menu, Tab menu,Toolbar, Image map • Confirmation messages – Voice recognition external help Principles • Acknowledgement messages systems, cameras, • All controls should be clear and understandable • Avoid having more than 8 items per menu. eye movement and placed in an intuitive location on the • Delay messages • If more then group the items of the menu. tracking, … screen. • Help messages • Group on the basis of objects (e.g. File, Table, • Software • Prevent mistakes Window in MS Office appls) Principles – Command line – Never display a command that cannot be used • Group on the basis of task (e.g. Edit, Insert, • Should be clear, concise, and (inactive commands) complete – Menus Format) – Ask for confirmation for functions that are difficult – Note: the menus of MS Office appls follow a • Should be grammatically correct – Direct manipulation or impossible to undo mixed approach and free of jargon and (e.g. resize the • Simplify recovery from mistakes • Support shortcut keys (or hot keys) for common abbreviations window, … right click • Avoid negatives and humor • Use consistent grammar order (e.g. object- actions (e.g. Alt-F for search) action order) • The user should be able to reach (from the start menu) the desired action with no more than 3 mouse clicks. U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 41 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 42 Designing User Interfaces A Seven Step Process
DecideDecide UI UI medium medium
Designing User Interfaces DecideDecide user user groups groups
11 Decide Decide UI UI medium medium UseUse scenarios scenarios 2. Decide user groups 2. Decide user groups developmentdevelopment 3.3. Use Use scenario scenario development development 4 Interface structure design Interface 4 Interface structure design Interface Interface Interface structure 55 interface interface standards standards design design Evaluation structure Evaluation design 66 Interface Interface design design prototyping prototyping design 77 Interface Interface Evaluation Evaluation InterfaceInterface InterfaceInterface designdesign standardsstandards prototypingprototyping designdesign
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 44
Design Process 1. Decide UI medium (hardware )
• Monitors – display area – character-based • old terminals, old mobile phones UI Design Process • gadgets (e.g. an mp3 player) 1. Decide UI medium – bitmap-based (analysis, bit, …) – touch screen monitors • Hardware for virtual reality, … • ...
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 46
The basic building blocks of a GUI
• Buttons (text labelled or with icons) • Labels • text boxes UI Design Process • composite boxes • scroll bars 2. Decide User Groups • lists • radio boxes • check boxes • menus • pop-up windows • status bars • ...
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 47 Design Process For each actor/user group 2. Decide User Groups
• We may have different groups of users • Describe user’s average level of domain knowledge • Each one may require it’s own interface • General level of computer experience – e.g. from web sites • Approximate number of users represented by an actor. • for users • How frequently they will use the system? • for visitors • for authors – e.g. the users of one department of an organization document
• See Actors from the Use Cases and the Use Case Diagrams ActorActor CharacteristicsCharacteristics • Sometimes we may have to define more than one user group for each actor ….…. – E.g. novice users vs experienced users – Characteristics / knowledge of users
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 49 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 50
Design Process 3. Use Scenario Development
• A use scenario is an outline of the steps that the users perform to accomplish a task • A use scenario is one path through an essential use case UI Design Process 3. Use scenario development • We describe use scenarios by a simple narrative tied to the related use case. • We usually document the 2 to 3 most common use scenarios per use case just to enable UI design. – Documenting every possible use scenario would be very time consuming
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 52
Design Process 4. Interface Structure Design
Use cases and use scenarios do not specify any user interface details.
Here we have to specify the basic components of the interface and how they will work together to provide the desired functionality to users. UI Design Process 4. Interface Structure Design Window navigation diagram (WND ) • Shows how all screens , forms , and reports are related • Shows how user moves from one to another • Like a state diagram for the user interface – Boxes represent components – Arrows represent transitions – Stereotypes show interface type • Differences between State diagrams and WNDs – State diagrams describe the states of an object – WNDs describe the states of the UI U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 54 Design Process Example of a WND
UI Design Process 5. Interface Standards Design
Single-headed arrow: a return to the calling state is not required Double-headed arrow: return is required
We will also discuss UX Modeling (next tutorial)
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 55
Design Process 5. Interface Standards Design
• Interface standards are the basic elements that are common across individual screens, forms, and reports within the application • There may be more than one interface standard in a system. – E.g. one for Web screens, one for Reports and one for input forms UI Design Process 6. Interface Prototyping • Interface templates – An interface template defines the general appearance of all screens, e.g. the basic layout, the color scheme, windows “replacing” policy (replace/cascade), etc. • Interface metaphor – The fundamental interface metaphor should be defined. – The metaphor (which originates from the real world) helps users to understand the system and predict its behavior – Different parts of the system may follow different metaphors • Interface objects – Buttons, icons, button labels form, …
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 57
Design Process Interface Prototyping Types of prototypes
• Plan the prototyping process • On paper – what needs to be learned? – A mock-up or simulation of screen, form, or report – Identify the highest risk items. – Storyboarding – Prototype: intended to minimize effort (to build it) and maximize feedback • On computer – Build a “quick-and-dirty” implementation of the interface in a very high level language or GUI tool to show the user how the UI will look like • Evaluate the prototype – Examples – gather data of how effective the prototype is • HTML prototyping – evaluate the data to identify areas that need further elaboration – The user can click – look for false, missing, useful affordances • PL-based prototyping – check for overhead in learning – E.g. in Visual Basic
• Prototypes offer only approximate look-and-feel, can’t be used to assess response times
Mock-up: φυσικού µεγέθους µοντέλο µηχανής προς διδασκαλία U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 59 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 60 Design Process Design Process Storyboard Example An alternative …. “storyboard”
Client
Find Name: Add Delete
Fistname ______Lastname ______City ____ Street _____ No __ Country ____ Zip code ___
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 61 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 62
Design Process 7. Interface Evaluation
• Ideally the UI should be evaluated at design time – (and not at the end of the project ) • The objective is to understand how to improve the UI before implementing it • As UI design is quite subjective, it is important to have many (at least 10) UI Design Process potential users to evaluate it. 7. Interface Evaluation
• Evaluate the prototype – gather data of how effective the prototype is – evaluate the data to identify are as that need further elaboration – look for false, missing, useful affordances – check for overhead in learning
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 64
Design Process An Indicative Usability Checklist (1/2) Interface Evaluation Methods
• Heuristic evaluation HeuristicHeuristic evaluation evaluation is is conducted conducted by by using using these these heuristi heuristicscs to to find find usability usability errors. errors. • Visibility of system status – Evaluate the UI by comparing it to a set of heuristics or principles for UI design. • Visibility of system status UserUser should should always always know know what what is is going going on on and and the the feedbac feedbackk time time of of the the system system should should – These heuristics/principles usually have the form of a checklist bebe reasonable. reasonable. – At least 3 persons from the team individually examine the UI and check whether •• Match Match between between system system and and the the real real world world is conforms to the checklist. TheThe language language of of the the system system should should meet meet users users language language rather rather than than system system depended depended language.language. When When designing designing the the system system from from the the user user poin point tof of view, view, the the users users must must be be identifiedidentified and and also also the the language language they they will will use use in in th thee system system must must be be found. found. Language Language • Walkthrough evaluation shouldshould also also follow follow real real world world conventions conventions and and phrases. phrases. •• User User control control and and freedom freedom – A meeting with the users of the system is scheduled where the team simulates UsersUsers make make mistakes mistakes and and system system must must offer offer "emergency "emergency exits" exits" to to get get out out of of unwanted unwanted the functionality of the UI (with the aid of the storyboard or the prototype). Users statestate as as easy easy as as possible. possible. Also Also undo undo and and redo redo should should be be sup supported.ported. identify problems and suggest improvements. •• Consistency Consistency and and standards standards UseUse same same words words and and phrases phrases for for same same things things through through the the syst system.em. For For same same action action there there shouldshould not not be be two two or or more more different different words. words. User User interf interfaceace should should follow follow normal normal platform platform • Interactive evaluation basedbased conventions. conventions. – The users themselves try out the UI . A prototype is needed for this case. Users •• Error Error prevention prevention To design the system error resilience and prevent problems from occurring in the first identify problems and suggest improvements. To design the system error resilience and prevent problems from occurring in the first placeplace is is more more important important than than good good error error messages. messages.
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 65 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 66 Interface Evaluation Methods An Indicative Usability Checklist (2/2) Formal Usability Testing
•• Recognition Recognition rather rather than than recall recall • It is a formal procedure that requires having a prototype. Keep things visible. The user should never need to remember information from the other Keep things visible. The user should never need to remember information from the other • It requires a lot of preparation and it is a very expensive procedure (if done viewview to to be be able able to to execute execute other other view’s view’s operation. operation. The The important important information information should should be be retrievableretrievable when when ever ever needed. needed. very formally). •• Flexibility Flexibility and and efficiency efficiency of of use use • Users individually try out the system. They are given specific tasks (e.g. use Accelerations. In some cases the system automatically allows users to use some Accelerations. In some cases the system automatically allows users to use some scenarios) to accomplish. At the beginning, they are given specific accelerationacceleration to to speed speed up up the the interaction interaction and and these these acceler accelerationsations should should never never been been disabled.disabled. Also Also the the system system should should allow allow the the user user to to tailo tailor raccelerations. accelerations. The The accelerations accelerations instructions (amongst others, this allow estimating how much training will be allowallow more more experienced experienced users users to to be be more more efficient efficient and and the the system system still still can can support support novice novice required for the new system). users to execute required tasks. users to execute required tasks. • The time the user spent to accomplish his/her tasks, and the “quality” •• Aesthetic Aesthetic and and minimalist minimalist design design ViewView should should contain contain only only relevant relevant and and usable usable informati information.on. (correctness or …) of the outcome is measured. User can also fill some •• Help Help users users recognise, recognise, diagnose, diagnose, and and recover recover from from error errors s questionnaires at the end of the evaluation. ErrorError messages messages should should contain contain plain plain language, language, not not error error codes, codes, to to indicate indicate the the error. error. Also Also suggestion on how to proceed should be provided. • Sometimes the testing takes place in a lab equipped with video cameras suggestion on how to proceed should be provided. and/or with software that records each and every keystroke and mouse •• Help Help and and documentation documentation TheThe user user should should have have easy easy access access to to the the help help (online) (online) and and to to the the documentation. documentation. This This operation of the user. heuristicheuristic is is left left out out or or used used very very lightly lightly in in this this project project. .The The main main reason reason is is that that evaluation evaluation • Formal usability testing is expensive and time consuming therefore it is will be done lightly and the evaluations will happen in the part of the project where help will be done lightly and the evaluations will happen in the part of the project where help usually done only with commercial (generic) software products. andand documentation documentation is is not not available available or or has has just just started. started.
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 67 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 68
Rating the (usability) problems
All the founded problems can be rated to indicate problem severity. The rating can be designed purely for the project point of view or can adopt some used practice. • Rating the severity of problems using a single scale – 0: Not a usability problem Designing User Interfaces with UML – 1: Cosmetic problem. Will be fixed only if there is extra time. – 2: Minor problem. Fixing this is low priority. – 3: Major problem. High priority and very important to fix. (The User-Experience (UX) Modeling Language) – 4: Critical. Prevent using the system. Must be fixed before version release. • Rating the severity of problems using a three scales: – Frequency . How often the problem occurs – Impact . How easy it is for user to overcome the problem. – Persistence . Can user overcome the problem when he knows about it or does it occur repeatedly
U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 69
Designing User Interfaces with UML The User-Experience (UX) Modeling Language
Structural and Behavioral modeling can be applied for • It captures concepts used for representing the engineering aspects modeling and designing a User Interface of screen-based UIs concerned with: – The screens the user sees – The actions the user can perform on these screens • Structural elements – They dynamic data the system must display on screens – screens, forms, … – The data the user puts on the screen – The decomposition of screens into smaller areas that should be managed • Behavioral elements separately from other areas – states – Screen transitions caused by user’s actions and application’s reactions – actions • The engineering aspects of UIs are not concerned with colors, • user actions fonts, layout, etc. • environmental actions • It is defined as a UML Profile. A UML profile is a collection of metamodel elements, which have been customized for a specific domain. • UML metamodel elements can have their semantics customized using stereotypes , tagged value definitions and constraints U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 71 U. of Crete, Information Systems Analysis and Design Yannis Tzitzikas, Fall 2005 72 UX: Stereotypes UX: Tagged Value Sets
Name Extends Description Attached to the metamodel element Transition Name Type Default Value Description screen class Represents the final visualized UI presented to the user of System action String One or more names of the “application domain” the sytem components of the system that will participate in handling the transition compartment class Represents a well-defined region of a screen that is reused by multiple screens. Attached to the metamodel element <