NUR - Introduction to HCI Big picture, design process, UCD, UI issues
Contacts Zdeněk Míkovec xmikovec@fel.cvut.cz K321 Jan Balata balatjan@fel.cvut.cz K411 Miroslav Macík macikmir@fel.cvut.cz K411 consultation hours: at practices course web page: http://nur.felk.cvut.cz 2
Classification Credits max. 2 missed practices min. 40 points submitted semester project D1-D4 min. 5 points per deliverable Exam mandatory entry test min. 10 points Points D1-D4 70 points exam 30 points extra points: 3 points Digitální design: Pohled za pixely (October 2015, http://www.czechdesign.cz/) World Usability Day (12.11. 2015, http://www.asociaceux.cz/) D1: Semester project understanding and analysis 15 points D2: Sketches, storyboards, HTA, paper mockup 15 points D3: Electronic prototype 15 points D4: Hi-Fi prototype + documentation + presentation 20 points D4 5 points presentation max. delay 24 hours any troubles: 4 days before 3
NUR lectures Lectures theoretical and practical Theoretical lectures formalisms used for UI design Practical lectures goal: to acquire knowledge necessary for successful completion of semester projects experience with industrial or EC funded projects experts from industry User research Prototyping 4
HCI definition Design, Implementation, and Evaluation of the interactive systems from the perspective of use by the human. Humans Design Tasks Technology 5
Human-Computer Interaction (HCI) Human End-user of an application Collaborative environment Computer The device running the application Execution often distributed among client and server machines Interaction two-way communication User tells the Computer what to do (commands) Computer tells the User what happened (results) 6
Why study the HCI? User interface takes majority of the source code Over 50% (Some authors report as much as 80%) More than 50% of the implementation efforts go to the UI Risks of the bad UI Financial (your product won t sell) Lives (air or factory disasters, ) Successful UI requires Good knowledge of the human s abilities Good knowledge of the principles of the UI design Meaningful use case 7
Idea of HCI The old computing is about what computer can do, the new computing is about what people can do. (Ben Scheniderman) 8
Example question for examination What is UCD good for? What techniques prevent errors in UI design? How many visual object can human brain process in parallel? What color combinations are not suitable? What is it pop-out effect and how it works? Describe KLM model. Explain Hicks law and it consequences for UI design. 9
User Interface (UI) The part of the technology, allowing people to: Perform their own tasks Interact with the technology Both are indivisible Hydroelectric power station Orlik 10
UI of pure physical nature Hydroelectric power station Orlik Hydroelectric power station Orlik 11
UI mimics real world Hydroelectric power station Orlik 12
UI of complex systems Hydroelectric power station Orlik 13
Blending physical and electronic world GraFooSha 14
UI design User Centered Design (UCD) Find what are user needs and take them into account You should be in permanent contact with potential users during the whole design process testing of UI prototypes Requirements ISO 9241-210 Evaluation Design Implementation 15
What kind of users do we have in mind? People are different The particular design is always a compromise we do not consider rare extremes (illiterate user) Usually 5% outlier cases are eliminated the result of this strategy is that some potential users can be discriminated Examples car: height, weight computer: font size, use of colors (colorblind)... 16
Classes of users Novices very limited set of functions available Casual users standard set of functions Advanced users advanced functionality Experts sophisticated functionality Consequence: necessity to split functions into individual categories How can influence particular class of users implementation of functions? 17
Examples of improper UI design 18
Examples of improper UI design Hydroelectric power station Orlik 19
Interaction 20
Feedback, Where am I? 21
Functionality is not reachable 22
Standards 23
Usability Simplicity of learning to use the system System can be learned easily and fast Memorability = Recall (Easy to remember) Whether the user is able to use the system after a longer time Efficiency Once the user learned how to use the system, the system will be fast to use To carry out the task quickly and efficiently 24
Usability Minimum amount of errors Preventing users from making errors If encountered, inform the users on the cause and give an advice Satisfaction of the user Subjectively pleasing The users is convinced that the task has been successfully achieved 25
Design heuristics by Nielsen 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation 26
Systematic approach to the UI design 27
User interface design - big picture Application Domain step 0 User Research user needs and requirements Problem Description sources: marketing research step 1 User Modeling personas profiles mental models System Modeling scenarios storyboards HTA, CTT step 2 UI Design app. models (GOMS, KLM, etc.) prototypes final design 3 parts visual design interaction design UX design UI Testing KLM CW EE user testing (UX) step 3 Documentation visual design interaction design UX design step 4 Implementation step 5 28
Analysis of the problem to be solved by IS Identification of activities which will be supported by IS Identification of the users those, who will perform the activities Definition the level of support (usability) support the IS will provide Selection of the form of solution of the problem User Research user needs and requirements Problem Description sources: marketing research step 1 User Modeling personas profiles mental models System Modeling scenarios storyboards HTA, CTT step 2 29
Users User requirements general user requirements physical, cognitive, social specific user requirements (related to the problem solved) User models KLM, personas User Research user needs and requirements Problem Description sources: marketing research step 1 User Modeling personas profiles mental models System Modeling scenarios storyboards HTA, CTT step 2 30
Level of support Designed solution must fulfill the user requirements Usability - see TUR course User Research user needs and requirements User Modeling personas profiles mental models Problem Description sources: marketing research step 1 System Modeling scenarios storyboards HTA, CTT step 2 31
Form of solution Influenced by technology and resources form of user interface application SW supporting the UI operating system system resources (memory, network bandwidth, etc.) hardware UI Design app. models (GOMS, KLM, etc.) prototypes final design 3 parts visual design interaction design UX design UI Testing KLM CW EE user testing (UX) step 3 32
IS design process 1. Problem description 2. UI design 3. UI testing 4. Documentation for further implementation UI Design app. models (GOMS, KLM, etc.) prototypes final design 3 parts visual design interaction design UX design UI Testing KLM CW EE user testing (UX) Documentation visual design interaction design UX design step 4 step 3 33
PSYCHOLOGICAL ASPECTS 34
Moore s Law Memory Speed Portability Affordability Computers Human Abilities 1950 1990 2014 35
Example of application design process Application domain: Personal Weather Forecast Design process phases user research (ethnography study) user modeling (persona) prototyping (low-fid, high-fid) testing (qualitative/quantitative; with/without users; expert evaluation, cognitive walkthrough; lab/field study) evaluation (summative/formative) 36
Weather forecast - Nokia 37
Weather forecast - iphone 38
Weather forecast: What is the main difference? Number of "clicks"? NOT necessarily User's mental model? Nokia iphone application browser weather forecast weather forecast bookmark web address place place Is there anything wrong? complexity of mental model - NO unknown terms and relations (coming from system mental model) What is the weather in Prague for tomorrow? What are the consequences? 39
Different mental models 40
What was underestimated in the design process? Application Domain step 0 User Research user needs and requirements Problem Description sources: marketing research step 1 User Modeling personas profiles mental models System Modeling scenarios storyboards HTA, CTT step 2 UI Design app. models (GOMS, KLM, etc.) prototypes final design 3 parts visual design interaction design UX design UI Testing KLM CW EE user testing (UX) step 3 Documentation visual design interaction design UX design Implementation step 4 step 5 41
INTERDISCIPLINARITY OF HCI 42
UI design is more and more complex Increasing number of devices we can control radio set in a car: AM, FM1, FM2, 5 pre-sets, station selection, balance, fader, bass, treble, distance, mono/stereo, Dolby, CD changer What about driving in the dark? Feedback is more and more fine, more and more complex and it is getting more and more unnatural e.g. setting digital alarm clock The impact of wrongly designed UI is more and more serious medical applications, airplane disasters 43
Conceptual model of UI affordances (dostupnost) causality (návaznost) constraints (omezení) mapping (individual steps of our problem solution onto individual functions available) behavioral patterns of target users 44
Who are the stakeholders? Users Engineers and designers Sales and marketing personnel Managers 45
What users expect? Support from the system Easy available functions Manageable cognitive load Pleasant experience 46
What Engineers and Designers expect? They would like to finish the product ASAP They do not want to explain to users how the product (or its part) works 47
What Sales and Marketing People expect? They would like to have financially successful product They should take into account many external and internal factors E.g. database of current customers, public media and related PR, competing companies with similar product, product maintenance expenses etc. 48
What Managers expect? They are interested in expenses spent on product development E.g. how much design and testing will cost, what will be tested (just the product or support web page or both), how many resources will be needed (time, money, number of people involved ) 49
Aren t you missing someone? User experience designer user is number one tries to really and deeply understand the user ensures that final design is that what user wants 50
Recommended readings Alan Cooper: About Face The Essentials of Interaction Design Bill Buxton: Sketching User Experience Colin Ware: Visual Thinking for Design 51
Recommended readings Steve Krug: Don t make me think Don Norman: The Design of Everyday Things Jakob Nielsen: Designing Web Usability 52
Thank you for attention