vA eee jp TUITIONS For Full Course www.Lastmomenttuitions.comINDEX Introduction 1.1) Introduction to HMI 1,2) Different styles of interaction in HMI 1.3) Human Centric Design 1.4) Conceptual Model 1.5) Normans Fundamental Aspects about Conceptual Model 1.6) Normans Fundamental Principle of Interaction 1.7) Norman's 7 Principles and 7 stages of action 1.8) Three Levels of Processing 1.9) Human Errors in HMI Understanding Goal Directed Design 2.1) Introduction to Persona 2.2) Qualitative and Quantitative Research 2.3)Difference Qualitative and Quantitative Research 2.4) Goal Directed Design 2.5) Introduction to Mental Model 2.6) Categories of users 2.7) Branding Identity and Logo 10 12 12 13 15 17 20 21 23 25 26 28 30 32Human Machine Interaction QI What is Human machine Interaction ? © It is the Study of interaction between humans and Machine It is the study of how people interact with computers ¢ It isa multidisciplinary field of study focusing on the design of computer technology and, in particular, the interaction between humans (the users) and computers ¢ All means the Same Some Examples could be 1) Gesture Recognition (VR based games) 2) Biometric Recognition (Fingerprint scanner on phones) 3) Voice Recognition (Siri for iphone, Alexa for Amazon) 4) Augmented Reality (AR based games) © Let me Give you small description of HMI for Better Understanding If Someone purchases a device (mobile , laptop , camera ,ete ) What would the customer expect from that product ? © It must be easy to use © We must not require any book/manual to learn how to use it (means if someone builds a webpage, it should be so easy to navigate/reach to the correct page that the person doesn’t get confused) So the main motive of HMI is to create something which is easy to use GOOD Design : Let me give you some example on Good Design 1) Simple Design Now looking at this image anyone can easily understand what the icons ‘mean, the design must be less complex and must be very easily understandable it should be designed in such a way that no one should refer to a manual to see that Green stands for picking up the call and Red stands for rejecting the call This is just a simple example Note : If design is complicated nobody will use it Serato s00 more options2) Use smart defaults Phone Ifyou're asking questions like phone number or country, you should suggest a default phone extension or country = based on the user's IP address. ara © Like in example below they have recognised that IPisof oo. me United States of America so by default they have ae este selected that country without having user to manually posted select = rect 0 3) Choose input types that reduce the number of clicks required to complete When Microsoft changed their shutdown prompt from a clickable shutdown icon to a dropdown box, they found that fewer people were shutting their computers down — just because of an additional two clicks. One click to shutdown Three clicks to shutdown Me nc ‘When choosing which question field type to use, try to optimise the process for getting fewer clicks as possible.4) Use placeholders correctly Google © Aplaceholder is the light text that appears within a form One account. Al of Google field © In example above it should be noted that the placeholder says “enter your email” which will prompt the user to understand that they have to enter their email there only and not other things like phone-number and name Z| # Placcholders should be used to guide users on how to fll out the field ifthere’s any confusion Gmaesere BAD Design Let us give you some examples of Bad Design Unwanted Information Overload: ion for a website is self-evident. When a user logs onto The biggest feature of navig your website, he/she should understand what they can do next and what actions to take to reach their destination. The navigation must be eye-catching and should often be at the top of the page. Do not try to design a navigation like this site below. It only makes the user more confused. People think that adding more information can help but sometimes that is not the case idenval, Industral, Swing, Rempremg, SU08 Rack & Pinion, Barrer | rameter pn tra2) Lumia Phones (Windows OS) : We all know one of the reasons why this range of phone failed and that is because of its unconventional design, Your design must be unique but not so unique that people are not familiar with how to operate it FIGA FIGB © Above we can see how conventional (easy to recognise the icons are both Android and iOS have a similar pattern of icon design simple easy and very understandable accepted by most users) © But on the other hand windows OS looks very alien/different(something out of this world but very hard to use and stupid to look at for most users) DVD remotes : hard to understand those buttons Now let come back to the Question What is Human Machine Interaction ? It is Study in Computer Science _on how to create a good design of Any device ( or software ) with the help of which user can easily interact with that device. Note :This is a basic Definition we will learn more as we go forwardQ2 What are different styles of interaction in human computing interaction ? TICKET Think of gandhiji three monkeys (see no evil - Visual), (hear no evil - Audio) and (do no evil - Sensor) Ans- The different styles of Human Computing Interaction would be 1. Visual-Based HCI 2. Audio-Based HCI 3. Sensor-Based HCI 1)Visual-Based HCI: a) Tracking the body movements and gestures of a person is one of the main focus in this area b). Gaze Detectiontin eyes) is used for understanding how attentive or interested a user is (it isa well known fact that people who are interested in a certain thing have expansion in pupil of eye ) ©) Lip reading is know to be used in order to aid speech recognition error correction 2)Audio-Based H Speech recognition is very important in Audio-Based HCI it can help us in analysing the emotion of a person in the given audio signal We can analyse various factors in a speech let’s say ‘A. The tone of the person that can tell us how angry the person is or how polite he is for example B. Human auditory signs (HAS) such as sigh , gasps, stuttering can reveal more about the emotion of the person C. The semantic of words used means the meaning of words that has been spoken can derive the psychology of a person (matlab jo words banda use kar raha usse pata chalega ki ‘mann mei kya chal raha hai is he a arrogant person, person with a lot of attitude) Music generation based applications can also be developed Entertainment and work productivity based applications if you see iOS has Siri and ‘Amazon has Alexa they can both be used to play Music for entertainment and also set alarms reminders and meetings for work productivity moVoice recognition eee = codon» = HE ~ f 3)Sensor-Based HCI: In Sensor-Based HC! there will be a physical sensor present between user and machine to provide interaction ‘What are the various sensors ? We noted down a few ‘¢ Temperature Sensor © Proximity Sensor. © Haptic Sensor. ¢ Motion Tracking Sensor. 1)Temperature Sensor:- a) Most commonly, temperature sensors are used to measure temperature in circuits which control many equipments b)_ Some famous temperature based sensors:~ resistance temperature detectors (RTDs), thermocouples, thermistors, infrared sensor , and semiconductor sensors 2) Proximity Sensor: a) A proximity sensor is a sensor which can detect the presence of nearby objects without touching itb) A proximity sensor often emits an electromagnetic field or a beam of electromagnetic radiation, and looks for changes in the field or return signal Eg:- mobile phones use IR-based proximity sensors to detect the presence of a human ear. (matlab na apne notice kia hoga ki when u pick a call and put it next to your ear the screen blanks out this is done iske do faide hai ek power consumption mein help karta hai aur dusra so u your ear or face doesn’t touch and unwanted button while on call) 3) Haptic Sensor: a) Haptie devices can measure reaetive forces and bulk forces applied by a user. By using special input/output devices (joysticks, data gloves or other devices), users can receive feedback from computer applications in the form of felt sensations in the hand or other parts of the body. (matlab na yeh apne force ko analyse karta hai ki hum kitna pressure dal rahe hai kisi object pe for example) It has a variety of use in Robotics and in Medical surgery 4) Motion tracking Sensor: a) Motion tracking is ean be used in video tracking for locating a moving object using a camera, Video tracking can be used in surveillance applications to track anonymous user movement It can also be used in video games to make the experience for fun for example Playstation VR and Xbox Kinect.Q3 What is Human centered Design (HCD) give an example? Human Centered Design is an approach that considers all the 1, Aspeets 2. Needs 3. Requirements © Of a targeted user which depends on their interests, behaviour, skill set, experience, challenges ete. (matlab na customer ke interest,bartav ko sab maine me rakhe ek product, banana) It should make the usage of the produet very simple. We know that every human being is different and every different human being would have interacted with some other real life application (for eg facebook, whatsapp) but not everyone's experience would be the same some would like feature A more and some would like feature B more © The goal is to study the human characteristics their behaviour their psychology to enhance the product design and user satisfaction to understand what the majority likes. Would people adapt to easily? what would be user friendly ‘The main goal of the designer or creator is to understand these characteristics and based on this the designer must design the interface.(simple principle keep user satisfaction and usability above all) For Eg:- a) When we look at a smartphone design let’s take for example iPhone 5 and iPhone 8% now not everyone would be comfortable fitting and iPhone 8+ in their hand and fitting it around let’s say this is group A now group B may not be comfortable using a smaller screen like iPhone 5 and would prefer it. In both eases the group A and B for looking for ‘© Their own preference in terms of size,comfort and usability it doesn’t mean that if you have a big phone it’s going to be easy to use for all and similarly if you have a small phone it may not be big enough to fit your workspace (please note this is very subjective and im not considering the camera quality ete this is just for example purpose) (TICKET TO REMEMBER OUTSIDE CIRCLE [I R U PV] I Researched Using Private videos [INSIDE WILL BE USER CENTERED DESIGN] )Human involvement typically takes place in Develop, << ©) Prototype’ Evaluate Understand User Detine interaction 1) Observing the problem within context 2) Brainstorming 3) Conceptualizing 4) Developing and implementing the solution Advantages:- 1) improves overall user experience 2) Helps in eliminating poor design of products Disadvantages:- 1) Software complexity still remains 2) takes more timeQ4 ) What is a Conceptual Model? 1, Conceptual Model is a mental image basically and image what a human has in his mind about a system (let’s say if i tell u about watch as a product in 2007 you would have a conceptual model ki haa it will tel me the time and date, but now in today’s age of smartwatches if i tell u about it your mental image or conceptual model will be ki haa it should show notifications, should answer calls for my phone which is synced to it ete) 2. A conceptual model is the mental model that people carry of how something should be done.(like we said if we give them a normal watch they won’t expect much but a smart watch their mental model changes and they expect more features) 3. A good example is www.google.com is the mental model of a search engine (see this is not true there are many other search engines like bing , yahoo search duckduckgo but today people have that mental image ki haa kuch dhundana hai to google karo they won't say search this on the search engine) 4, Conceptual Models designer a good design as interaction between designer and the user 5. The design alone must be able to explain the entire product just by one look. (for example in smartphone the design of homepage must be in such a way that user just looking at it can use it easily) Aspect to design a Conceptual Model (Norman’s fundamental Aspects about Conceptual Model) (TICKET TO REMEMBER FCAP => Friends Can Afford Parties) 1) Feedback A. Every action will give some feedback to the user B. If we tum on the Tv using the remote and it’s not working we must assume that the system is faulty (but again giving the right feedback is important weather there is a problem with the TV or the remote. These distinction help the service provider enhance their service even better) CC. Basically User’s actions must be acknowledged 2) Constraints A. This aspect will prevent our user from making mistakes that is it will restrict their scope of going into an unwanted area B. It will never allow the user to perform an action if going to be a wrong application For eg(Your booking flight tickets, the app won't let you book on a date that has passed, jt won’t have provision for you to do that so it constraints you from doing such things), C. It Eliminates the possibility of syntax mismatches3) Affordances a) The digital system will tell us the rules by leaving some visual hints b) It makes sure that appropriate actions are only designed for some users and won't not visible for other (for example screen settings for visually impaired) ©) Just by looking at the interface, the functionality the flow of the application must be clear to the user. 4) Power of Observation a) The observation of rivals can help us avoid making the same mistakes b) It’s like learning from mistakes done by others ©) If someone makes a mistake in their system we must observe the system well and make sure that learning from their experience we must not repeat the same in our implementation (for eg:- if your making a mobile phone u will never make a phone with a keypad like blackberry whose design it stayed loyal to or else you will have to face same consequences) Q5 ) Normans Fundamental Principle of Interaction? (TICKET VF A MCC. very fun A mobile computing and communication subject) 1) Visibility: 1) Visibility - Cam i see it? 2) Feedback - What is it doing now ? 3) Affordance - How do i use it? 4) Mapping - Where am I and Where ean I go? 5) Constraint - Why can’t i do that? 6) Consistency - I think i have seen this before? - The more visible the functions of the user interface are the more likely users will able to use it more effectively Users need to know what all the options are, and know straight away how to access them.2) Feedback:- a) Feedback is mainly used for acknowledging the user action, Every action needs a reaction. b). There needs to be some indication, like a sound, a moving dial, a spinning rainbow wheel, that the user’s action caused something, 3) Constraints a) Constraints are the limits as to how much we ean interact with an interface It will not let the user perform some illegal operation. b)_ [twill not allow the user to perform some action if it’s going to expose some vulnerability for both the client as well as the vendor (for eg like the flight example we used above.) 4) Mappin; 8) Mapping is the relationship between control and effect. b). The idea is that with good design, the controls to something will closely resemble what they affect ©) A great example of mapping is the vertical scroll bar. Ittells you where you are in a page, and as you drag it down, the page moves down at the same rate; control and effect are closely mapped. 5) Consistene: a) The same action has to cause the same reaction, every time. The product interface must have similar elements and design all over the system in order to achieve similar tasks. b) A consistent interface is a one that follows all rules (example on a webpage for every page the navigation bar has to be the same on page | it can’t look different from page 2) 6)Affordance: a) Affordance is the relationship between what something looks like and how it's used b) Afford means to give us a ‘clue’ ©) When the affordances i.e clue of a physical object are easy then it will be easy to interact withNorman’s Seven Stages of Actions *Norman’s 7 Principles* 1. Use both knowledge in the world and knowledge in the brain 2. Simplify the structure of tasks 3. Make things visible: bridge the gulf of Execution and Evaluation 4, Get the mappings right 5. Exploit the power of constraints, both natural and artificial 6. Design for error. 7. When all else fails, standardize SEVEN STAGES OF ACTION: Norman proposed the seven stages of Action As per Norman, Human actions will have two basic aspects: TOT Execution Evaluation 1) Execution means a task which is performed by humans 2) Evaluation means after a Task is performed we have to analyze/evaluate it for improvement.Every action is perform in 7 stages 1)Form the Goal Execution : 2)Form Intention ( plan) 3)Specify action (Specify) 4) Execute the action (perform) Evaluation: Coad 5)Perceive state of the world (Perceive) 6) Interpret state of the world (Reflect) el z 2 = 5 8 a x i uo S 8 4 o 7)Evaluate outcomes ( Compare ) Example © Let imagine you are alone at home & bored .so you go & watch a movie ‘© Though this looks simple, our human brain executed it in the following way 1) I want to kill my boredom (goal) Execution 2) Movie seems to be a good idea ( plan ) 3) You check for the nearest theater and show time ( specify) 4) Purchase ticket and sit in the movie hall (Perform) Evaluation 5) Watch audio , videos effects of the movie ( perceive) 6) Interpret effects to your understanding (reflect) 7) After movie it was a good time pass (compare ) etd Taal PERCEIVE NolLvmvAa 40 a9aI4aQ6 ) What are 3 levels of proce: ing? Explain TICKET (Deko yeh answer aya na matlab apko dyan mein rakna hai ki apko users ke emotions ke bare me likna hai) ‘The three levels of processing discussed by Norman in his book “Emotional Design” are 1)Visceral, 2)Behavioral 3)Reflective This results from three different levels of the brain. ‘The basic approach of this processing is that we have to think from users point of view (matlab apko na user ke point of view se sochna hai) 1. Usability Design makes use of Three levels of processing 2. What is Usability design ? It measures how easy or how interactive a particular user interface is 3. We know by now that processing is done in three steps, Design here is nothing but a way to develop a user interface such that the human using it can interact with it in an efficient manner(For example DOS abh DOS mai apko commands likna hoga similarly Windows dekoge toh it has A GUI jisse hum log asani se interact kar sakte hai) 4. Now the end-user that is client ean share their feedback/experience with the app/software etc which will help the developer to understand what is missing, what needs to be added, this can also help the developer in prototyping for the future because we have to remember that we are building a product for the customers, and their feedback is most importantLevel 1 :- Visceral level 1) This is the first/nitial level of processing information that is available to us 2) In Visceral Level, The client reacts to audio visual actions and other aspects of a product (Matlab for eg:- yaar message ka notificiation ka sound ayega toh client kaisa react karega) 3) How the product looks how the product feels will dominate the user at this visceral level. 4) A human needs to decide things are good, bad, safe or dangerous. Human brains is trained to like or dislike things based on their own thinking level.(matlab kuch logo ko dogs pasand hai and kuch logo ko nahi iska yeh matlab nahi hai ki it is justified that dogs are good or bad sabka choice alag hota hai) * Eg Girls like pink Kids like Red or dark colors © Indians like spicy food, etc. ‘© Visceral design in this means creating best user interface and graphical appearance.(that is why when new edition of windows comes they keep making changes to graphics and other UI this is based on feedback from users mostly) ‘© The developer can have creative skills of a visual and graphical designs, it creates lot of impact to users. Once this level is approved, we proceed towards actual work IF this level is not designed properly, other levels will need more effort for product acceptance,(Matlab apka Design hi ganda hai toh matlab app hi socho user kaisa interact karega, apko zyada mehnant karna padega dusre level pe to sell the product) ‘© The user of a product is the final judge he will decide how good or bad the product is for his needs 000 Level 2 : - Behavioral Level 1) Itis the Middle level of processing © The emotional brain is important while making decision, Itis used to manage simple, everyday behaviours * Ittells us how to “behave” or “respond” or “react” to messages that are gives by the product. It tells us more about the product as compared to visceral Semanties and usability practices are addressed in this level.(rules basically) It decides the behaviour and feedback given by the product.For example ,(In TV remotes when putting battery a small diagram is made in battery compartment to show what kind of battery we have to put weather AA or AAA for eg. and which position to put it in) Another example could be diagrammatic representation on mobile phones on how to insert sim-card/memory card. Level 3 : - Reflective Level This is the final level of processing, Analysis and reflection of all experiences is done in reflective level.(Matlab jo feedback mila hai na usko analysis karenge aur uss basis pe ek result derive karenge ki kuch add kama hai ya nikalna hai) All experience and its meaning is stored in human brain, This level mainly deals with analyzing past user experience and what he might expect in future. Then based on these user preferences, we choose a methods to execute plan. Three Level overview Human emotions can affect decisions. These levels can be affected by human being.(means if u show a cricket lover a football theme based app he will not like it even if the app is the best in market because why ? it depends on emotions ) At the visceral level we perform the method. Physical aspects of performing the task can be considered Human senses of vision, hearing, smell, touch and taste are used to perceive human actionsQ7) What are the errors in HMI? 1) Human error means that something was done that was “Not supposed to be done by actor” This is not desired by the set of rules that are set by a particular system (For example:- User clicks on back instead of next while submitting form) 2) It can be an action that violates the system 3) Human error is not done only by System user alone other factors can be present that can use a human error. 4) Due to Human Errors the Human Machine Interaction can be unsuccessful (TICKET:- Every Indian Earns Some Thing) Human Errors can be 1) Error of Exclusion 2) Error of Instruction 3) Extraneous Act 4) Sequential Act 5) Time Error Error of Exelusion:- The action performed is not required to perform Error of Instruction:- The action that should not be performed is actually performed (The faulty product is passed by quality management team whereas it should not be rejected by them) Extraneous Act:-The action performed is to prevent the system goals. Sequential Act:- The action performed is not done in a proper sequence. (Example, First put car in first gear and then start the car.) ‘Time Error:- The action performed is too much early then the permitted time of aetion Parking a car after the parking time limit exceedsCHAPTER 2 Understanding Goal Directed Design QI )What do you mean by persona? Mention steps in constructing a persona? 1) Persona means User Experience 2) It is a User centric based Design 3) There can be many different personas like User Persona, Customer Persona or Buyer Persona 4) Persona is a way to model, summarize and communicate research about people who have been researched on in a particular way 5) Persona is used to understand the needs and problems of users or group of users 6) Persona helps the developer such that it provides the developer with useful information such as how the user thinks so the user can develop the system according to the needs of the user 7) Persona is a widely used term in Technology as well as Advertisement Uses of Persona 1) To gain perspective of what's going on in the clients head Steps In Constructing a Persona a, Personas can be adopted by various techniques. b. Steps : 1. Identify user behavioural patterns: a)This is initial step in constructing persona The users behavioural based patterns are identified and analyzed 2. Arrange interview as per user behaviour.a) b) °) d) a)Depending on no of users to represent personas, we have to decide the number of interviews or survey responses that we will conduct so that our survey is valid (matlab apko itna public chahiye taki jo apka survey ho vo valid ho jae) Recognise user behavioural patterns. User behavioural patterns can be recognized using: Open-ended responses to questions Utilize surveys Virtual/in-person group discussions Reverse Q&A sessions Generate various user characteristics and relevant goals. a) Based on recognized user behavioural pattern, user characteristics and relevant goals are generated b) These goals will help in building persona Check for completeness of goals. ‘Timely Schedule must be made to check the completeness of goals Explain all attributes and behaviour of user. In this step, attributes such as name, purpose and objectives is explained and behaviour of user is considered Design various persona, This is the final step. Based on all above steps, a final persona is designed, Persona can Include ROLE,GOAL CHALLENGES Q2 Qualitative and Quantitative Research?Explain different techniques ? Ans: Qualitative Research (think about quality) yy 2 3) 4) 5) 6) yn Qualitative Research is primarily exploratory research It is a very important part of any marketing or business strategy. It helps a lot in developing ideas It is used to gain an understanding of underlying reasons, opinions, and motivations. It provides a view into the problem or helps to develop ideas for potential quantitative research, Qualitative Research is also used to tell us about trends in thought and opinions, and dive deeper into the problem. (matlab in 90’s it certain fashion was cool but not in 2010) Qualitative data collection methods vary it depends weather to use unstructured or semi-structured techniques Some common methods include focus groups (group discussions), individual interviews, and participation/observations. The sample size is typically small, and respondents are selected to fulfil a given quota Quantitative Research: (think about quantity numbers ete) » 2) 3) 4) 5) Quantitative research measures the number of occurrences. It is used to quantify (measure) attitudes, opinions, behaviors, and other defined variables — and generate results about them from a larger sample population Quantitative Research uses measurable data to formulate facts and uncover patterns in research Quantitative data collection methods are much more structured than Qualitative data collection methods. Quantitative data collection methods include various forms of surveys — online surveys, paper surveys, mobile surveys ,face-to-face interviews, telephone interviews, longitudinal studies, website interceptors, online polls, and systematic observations ‘They may ask what are these interview techniques?Structured Interviews 1) A structured interview is a type of interview in which the interviewer ask a particular set of predetermined questions 2) In structured interviews, questions are planned and created in advance, which means that all candidates are asked the same questions in the same order. 3) A structured interview is a type of interview in which the interviewer asks a particular set of predetermined questions 4) In structured interviews, questions are planned and created in advance, which means that all candidates are asked the same questions in the same order. Structured interviews are also known as: Standardized interviews Patterned interviews Planned interviews eee Formal interviews UnStructured Interviews 1) An unstructured interview is a type of interview in which the interviewer asks question which are not prepared in advance 2) In unstructured interviews, questions arise on the spot, every candidate will get different questions. Unstructured interviews are also knowns as: Informal interviews a) Casual Interviews b)_Free-flowing interviewsDifference between Qualitative and Quantitative Research Meaning Nature Approach Research type Reasoning Sampling Data Inquiry Qualitative research is a method of inquiry that develops understanding on human and social sciences, to find the way people think and feel Holistic Subjective Exploratory Inductive Purposive Verbal Process-oriented Quantitative research is a research method that is used to generate numerical data and hard facts, by employing statistical, logical and Particularistic Objective Conclusive Deductive Random Measurable Result-orientedHypothesis Generated Tested Elements of Words, pictures and objects Numerical data Objective To explore and discover ideas used To examine cause and effect relationship in the ongoing processes. between variables. Methods Non-structured techniques like Structured techniques such as surveys, In-depth interviews, group questionnaires and observations discussions ete. Result Develops initial understanding Recommends final course of action Q3)Explain Goal Directed Design in Brief ? OR What is Goal Directed Design? Goal directed design is basically a user-centered methodology. To create interface pertaining ( Related ) to user and Specific to Goal, it is necessary to bridge the gap between user and developer © This is possible only by having the proper nature of research ‘© Goal directed design is a process with various phases along with the market research that provide the solution which meets the requirement and goal of end users Ticket- (Rahul Makes Racing Feel Really Smart pls remember this ticket very important answer) Goal Directed Design Process1. Research In this stage we collect qualitative data about the users or potential users through field studies and interviews. We carry out a competitor analysis and interview key stakeholders to gather their requirements. This phase generates the actual information about the user. 2. Modelling The modelling stage can be broken down into two parts. a) Define domain model b) Define user model In part one we define the domain model by building the workflow patterns from the research stage of a particular product In part two we define the user model through the use of personas which represent a certain groups of users 3, Requirements Definition Stage three is critical for providing that link between the user model and other models. This phase is used for requirement collection This phase helps provide the connectivi between user, models and product framework 4, Framework Definition During the framework definition stage we create the overall product concept and we define the how the product must behave and how must it look visually We mostly create prototypes during this stage 5. Refinement In the refinement stage you focus more on detail and refinement of the system and product implementation. 6. Support No matter how clear the vision is for the product things can and do change during development, budget and timeline concerns can affect some features they can be taken away or new ones get added and it’s essential that the producer is ever ready to offer advice and to make sure the overall design quality or system quality doesn’t get compromised (matlab product banane ke bad support bhi dena taki agar kuch bug aye to use solve kaise kare)Q4) What is a Mental Model? (Remember:- Mental models answer the question “How do users think this works?”) Ans: Defini -A mental model is an explanation of someone's thought process about how something works in the real world It’s person’s thought process of how they understand the world It represents how the surrounding world is to be imagined © When I say write something : I need pen and paper ¢ Write in Pe: notepad or Microsoft word © Write is Ubuntu : Text editor © Where to study at last moment of exams : Last moment tuitions :) A good designer should be able to use mental model of the user as well as should be able to create a mental model for the user (Kisi bhi startup me users ka mental model pata hona aur hum apna product ko mental model kis tarah user ke mind me fit kare yeh 2 cheeze jaroor honi cahiye toh ehalo sikhte hai) ieee System Interface User Mental Model ae [atheNorman 4 aspects to use or create Mental Model 1)Feedback 2)Constraints 3)Affordance 4)Power of observation Feedback © Every action of the user has to be acknowledge immediately (example : button dabaya machine chalu , mouse move kiya screen pe cursor move ho raha hai this is how user get immediate feedback ) Constraints ‘© Prevent the user from making mistakes Affordance © Convey the rules by leaving visual clues © By just appearance of the object, its functionality must be clear to the user (Product dekhke voh kaise kam Karta hai pata chalna cahiye jaise cup me handle bata raha hai cup yeh se pakdo) Power of observation ‘¢ Learn from mistake of others as a normal person we do not have a keen eye to observe ‘© Infect when someone is making a mistake or struggling with the system we tend to make fun of them or judge them to be incapable © Asa HMI student you must consider every such aspeets and ensure that He/she gets a good experience (hahaha voh gutter me gir gaya hum aise hai par mai agli bar waha na giru voh sikhna hai kisi ka product market me aya aur nahi chala toh usne kya mistake ki jo mai na karu )Q5) What are the three categories of users? ‘© The main goal of a designer/developer is to identify whether user is expert or a beginner © This understanding may help designer/developer to design system as per user requirements, ‘© The users who use the system do not belong to similar group of expertise as they are mixed bunch of people. ‘© These categories can be decided from their age ,1Q level, skills they have and experience. a) Beginner User: i) Every user is beginner user in the starting phase of their life (samjo app kisi cheez ko first time kar rahe toh app beginner hi hoge ) ii) To make beginner user to intermediate designers we must ensure that the things they see and use UI to remain in their mental models. iii) The main usability of beginning users is their main focus area is on, © Menus: © Messages iv) They often use above options hierarchical system architectures, reading all the labels and understanding of location where specific options and features are placed, vv) The beginner user may require lot of help from system to understand process.(pehli baar app/system use kar rahe hoo to help to lena hi padega) vi) Question of Beginning User Which program should I use What will this program do From where should I start What is the way to do it Am I doing right things viii) Example: Incase of Microsoft office Word ‘© The beginner user will take help for office assistant to understand few functions of system ‘© User majority times refer menu given at the header in systemb) Intermediate User: i) Intermediate user is always looking for desired features and a way to easily access them. (abhi hume toda sa experience hai basics ke sath abh aur explore karna hai system ke advanced features ko) ii) Intermediate level users will have some different requirements, ‘The basic skill to operate the system is already known to them iv) As they are familiar with basics they will now find out new techniques to operate system very effectively Vv) Majority numbers of users are intermediates. c) Expert User: i) The number of expert users is always smaller than other type of users as they become expert by longer experience and excellent skill set. ii) This group of user becomes very important group of users as they become expert by longer experience and excellent skill set iii) This group of user becomes very important group of users although there number is very small but their effectiveness is very high. iv) As always company trust on expert people and ask them for advice as well as design help. v) Experts may know additional functionalities and abilities of system to perform all tasks vi) If'some interface is not accepted by these users it can be even rejected on these grounds, vii) As it is excepted that interface must help these users to be more productive. viii) Interface should be optimized for intermediates and helps beginners to understand application but also be more productive for experts. ix) Experts may be using some features of system which is used very rarely x) Experts always look for customization or automation in available system.Q6) What is a Logo Design? Ans 1) At the very basic level, logos are symbols made up of text and images that help us identify brands we like. (example pepsi,nike) 2)But they can be so much more! A good logo is the heart of your brand, It helps customers understand what you do, who you are and what you value. That's a lot of responsibility on a tiny image. Types of Logos:- 1) Iconic/Symbolic i)Logo is designed using an Icon or Symbol ii) Ieons and symbols are simple images that represent what we are trying to portray Example of Symbolic (nike logo tick mark) wo Trivia(The logo is also said to symbolize the wing of the famous Greek Goddess of Victory, Nike.) 2) Logotype/Wordmark i) Logo is design using letters ii) It is used to show the name or the initials of an organization in a memorable way Example of Wordmark3) Combination Marks i) Combination Marks are graphics with both text and symbol or icon that signifies the brand im: ii)Short text can complement an icon or symbol while providing additional charity as to what business is all about Example Combination Marks SUSTDOIT.Chapter 3 : Graphical User Interface GUI (Graphical User Interface) © A GUL is a human - computer interface that uses windows , icons and menus and which can be manipulated by a mouse ( and often to a limited extent by akeyboard ) GUIs stand in sharp contrast to command line interfaces (CLIs) which use only text and are accessed solely by a keyboard. © Example : MS DOS (yeh Command line interface ka example hai ) Most of the modern application in electronic gadgets interact with user through graphical user interface =GUI’s are combination of graphical and textual interaction that uses buttons , Menus ,message boxes ,etc. © The interaction is mainly done by using a pointing device like a mouse @ The collection of element with which the user interact is called as object © Objects are used by the user to do some tasks and the operation performed by the user on objects is called as actions © The action may result in modification of the object by selecting and manipulating it The Popularity of Graphics © User Interface has become more interactive due to use of graphics * Text based interaction were too boring and monotonous(dull) e Icons replace text to represent objects or actions ,making interaction much simpler and easier © Graphics Permit Selection of screen objects and action through pointing device , such as mouse , joystick instead of just keyboardBenefits of Good UI A good design leads to increase productivity and gain Information extraction can be done in a faster and better way Training cost and training time is lowered Support line costs are also reduced since only few assist calls are necessary to support the user Increased user satisfaction since frustration are reduced Advantages and Disadvantages of GUI Advantages Symbol recognized faster than text Fast Learning: Graphics aids fast learning since pictures and symbols are easily learned Remembering is Easier : since it is simple to use and there is no command to rote it is easier to remember Usage and problem solving faster: It is well known fact that anything represented visually is easy to recall and manipulate which leads to faster solving of problem Error are minimized : Better thinking and easier usage decreases error rate More natural: human brain can recall or retain images far better than the text , graphical representation becomes more intimate way to exploit user capabilities© Actions are easily reversible e Low typing requirement : Use of devices like the mouse Joysticks ,etc. for pointing and selection controls eradicate the need for typing. e Less anxiety concerning use : Users who are new to the systems are not so anxious since the system are very easy to understand and predictable , and also action can be undone e Replace national language: Any language cannot be universal . icon replace that barrier by translating language into way that is universal understood. Advantages ticket to remember (rum for Sale) R:remembering is easier R:replaced National Language U:Usage and Problem solving faster M:more natural F: fast learning S: symbol recognized A: action are easily reversible L:low tying require L: less anxiety E:errors are minimizedDisadvantages Greater Design complexity : There are innumerable techniques available for the designer to choose which weren't available in text based design it would be really confusing to choose from so many option Skill of designer is always under constant challenge because poor design may leads to unacceptance Learning still necessary ; All the icons might not be known to the user for the first time and there is requirement that user must learn the meaning of many words and icons Not always familiar :All symbols are not known to user but they might know all the words and numbers with which they have worked for a long time Not always fastest style of interaction : sometimes it is obvious that the graphic instruction are not as effective as text instructions for eg: instruction on ATM machine Not always preferred Style of interaction: when interface is purely iconic it might not be preferred by all the user some might prefer the one with text Production limitation ; There is a restriction on the number of symbol that can be produced. symbols must be distinct which is very difficult today Inefficient for the touch typist: keyboards are efficient fast and powerful device for touch typist ; use of pointing devices like mouse would be difficult and reduce their speed Windows are needed to be manipulated : windows need to be handled and manipulated which poses a lost of wastage of time and also disrupting the concentration of the user while performing the task May Consume more screen space : sometimes text take less space then icons or symbols Increased Requirement of Processing and memory: graphical system need a lot of memory and powerful processor for smooth rendering of graphical component on the screen (iski ticket app log banao aur meko bhi email karo [email protected] )Direct manipulation © Direct manipulation involves continuous representation of objects of interest. (jo bhi action le rahe hai samne output dikhta hai onspot ) © This is a term used by Schneiderman to describe Graphical systems with the style of interaction. Suggesting that they have the following characteristics:~ © System is portrayed as an extension to real world © Objects and actions are continuously visible © Actions are rapid and incremental with visible display of results Incremental actions are easily reversible System is portrayed as an extension to real world © Users are assumed to be familiar with Objects and Actions present in the environment. Here the objects can be accessed and modified as per user's wish. User is allowed to work in the familiar environment , so that he can focus on the important information, © Unfamiliar environment is hidden from the user, Objects and actions are continuously visible © Objects are continuously visible on screen which gives direct resemblance of work table of user. © Buttons with text inscribed in them (represent the action) is better to use rather than complex commands which perform the same action © The action performed by mouse pointer are obvious and predictable in natural wayActions are rapid and incremental with visible display of results @ Result of action can be immediately displayed on screen for user so that user can understand the current status of output visually @ Feedback through sound can also be provided. Incremental actions are easily reversible ¢ Actions if found incorrect it can be undone easily Indirect Manipulation In practice, direct manipulation of all screen objects and actions may not be feasible because of the following: 1. The operation may be difficult to conceptualize in graphical system. 2. The graphics capability of the system may be limited. 3. The amount of space available for placing manipulation controls in the window border may be limited. 4. It may be difficult for people to learn and remember all the necessary operations and actions e When this occurs, indirect manipulation is provided. ¢ Indirect manipulation substitutes words and text, such as pull-down or pop-up menus, for symbols and substitutes typing for pointing. © Most window systems are a combination of both direct manipulation and indirect manipulation. A menu may be accessed by pointing at a menu icon and then selecting it (direct manipulation) or the menu itself is a textual list of operations (indirect manipulation)Difference Between GUI and Webpage Points GUI Webpages Definition GUL is a type of interface which allow user to interact with electronic devices through graphical icons and visual indicators Web page designing is a process of creating a plan and originating the development of a specific web page. Response Time Quick and Instantaneous Depends on the speed of internet , downloadable items, page , content and therefore highly variable. Navigation users navigate through structured, menus, lists,trees,dialogs and wizards. users navigate through links, bookmarks and typed URLS. User's Conceptual Space user's conceptual space is controlled by the program and application. user's space is infinite and generally unorganized. User Focus normally well defined applications and the data about transactions and processes. It is all about information and navigation. Data and Information Data is created and used by known and trusted sources. Data is full of unknown content and web content is highly variable in organizations.User Tasks install,configure,personal ize,start use and upgrade the programs linking to sites,browsing or reading the pages,filling out forms,register for services Presentation element Windows, menu ,control , data , toolbar ,etc Two component browser and pages Task Efficiency Targeted to a specific audience performing specific task,efficiency of performing task is only limited. Tasks limited by the browser and the network. Websites are intended for everyone. Security Security and data access | Web is renowned for can be tightly controlled _ | security in proportion to the exposures, browser-provi willingness to invest ded security options have resources and effort, not been well understood by the average web users. System capability Unlimited capabilities | Limited to support depending on the provided by the browser complexity of the client and the software hardware and software used Devices characteristics of the user devices may range interface devices such as monitors and modem are well defined and screens appear exactly as specified from handheld mechanism to the high end workstations, it will be generated by both the hardware and the software.Strongly suggest to see Sandeep maheshwari —— Hideos