Please enable JavaScript.
Coggle requires JavaScript to display documents.
Revision HCI Part 1 (Chapter 1-6) - Coggle Diagram
Revision HCI Part 1 (Chapter 1-6)
Chapter 1: Introduction to HCI
HCI: Human Computer Interaction
A studies on how to design the interaction between user and computer so that the user can carry out the task productively, safely and effectively.
Human is the highly complex organism while the computer is a highly complex mechanism. Thus, HCI is a dynamic studies as human is dynamic not static. HCI is a wide studies area that we need to design the interaction for all range of people so that it is useful.
Chapter 2 : Human as users
Cognitive process is how we store the experience in cognitive drive.
Experiential cognition: About the experience we did daily and save in our long-term memory. Example: ride bicycle, drive car. Based on the experience we went through, we will save in our long-term memory and retrieve when needed.
Reflective cognition: About problem solving, decision making, any activity that related to our critical thinking.
As human have limited capacity for cognitive drive, so when designing user interface for users, we need to emphasize the recognize instead of recalling.
Cognition
Attention : Able to select a things to focus on when there are a lot of things going through in our surroundings.
-Perception and recognition: Able to recognize a things without thinking. For example, we click on trash icon to delete things as we know the trash icon must used for deletion.
Memory: About how we store and retrieve the information from our memory.
Short-term memory or known as working memory will store the information for awhile, and if not active process to long-term memory, will forget soon. For example, your teacher's phone number.
Long term memory is where we store the information and will not forget easily. For example, our birthday.
Human uses the capabilities which are cognition, memory and 5 senses and haptic skills to receive information. Vision, Hearing, Smell, Touch and Taste.
Vision: we can use colour to attract users' attention. Example, use same colour to group same items, use different colour to differentiate different items, use bright colour to attract user's attention for important information.
For vision, we need to avoid optical illusion that will cause the display unreliable. Gestalt theories that state human usually see the things as a whole instead of the secondary important items. Thus, we should not put important information smaller than the background. We can use colour to differentiate background and foreground.
We need to avoid red-green combination for important things such as charged (green) not charged (red) as we need to consider the colour-blindness user. This combination will make them confused and not tolerable.
Hearing can make as a locator as we cannot decide not to listen but we can decide not to look.
it can use when immediate response needed like a notification alarm for users.
use when the user moving from place to place such as WAZE.
use when the information is short such as correct message for kids game
use when the information will not refer later
use when the visual system is too much for users to absorb and receive
use when there is optical illusion on the display.
Touch will needed for novel devices or VR such as using joystick for game. Taste and smell is not widely used for now to interact with computer.
Chapter 3: Input and Output device
Human interact with computer is to pass and receive the information which known as information transfer.
Input device is to receive the information or request from user, then translate into machine language for software in the computer to understand and process so that the user can accomplish the task.
Input device such as text-entry device, pointing device, touchpad, stylus, graphic tablet, touch screen.
Keyboard (text-entry device): users can use keyboard to enter any input to the software in computer to do the task. Qwerty and Dvorak and Chord.
Qwerty: put frequently used letters far apart to prevent key jamming even though now using electronic signals not arm striking.
Dvorak: put frequently used letters at the middle row to reduce finger traveling distance so that users can type faster.
Chord: several keys need to press at the same time for one letters. Usually used for mail sorting and recording transcript for proceedings in law court.
Pointing devices (mouse, joystick and trackball) that have six task, which are select, position, orient, path, quantify and text.
Mouse: easy to point and even in long distance also can accurately. Before that we have mechanic ball under the mouse now we use light.
Joystick, usually use for computer interactive games such as PS5.
Trackball: can use finger, thumb or flat of the hand to turn the ball and once it position, press it to proceed the action.
Touchpad does not need any force and can easily move the arrow cursor and press to make action.
Touchscreen can easily cover the information on the screen with hand, not accurate touch, hand will feel tired as keep put down and up to make action on screen, as well as will have handprint on the screen after a long time usage.
Graphic tablet that users to stylus to draw something and appear on the computer screen that one-to-one correspondence with it.
Stylus, a pen to do action on the screen. Users need to pick up the pen in order to make action on the screen and sometimes the screen cannot detect the stylus will make users frustrated.
Output device is to display the output to users as a feedback. It can be the monitor of the screen. For blind, have Braille Display
Sound can be the input and output device as well but in limited situation and vocabulary. The 3 issues of sound is that the noise around us, the inaccurate pronunciation and accents.
Chapter 4: Interaction Styles
In order for user to interact with computer more effectively and increase user's productivity, we need to use appropriate interaction styles on the screen.
The interaction between user and computer should be naturalness which the user can understand the display shown on the screen by using human language. The user interface elements should always appear consistently so that user won't be confuse. Example: same button to submit in same colour and with the word "Submit".
The user interface should flexible so that user have stronger user control and not feel like the computer is control them and feel stress when doing an action on it. Thus, user interface should supportive as well. For example, giving solution or help to users when facing error.
To avoid error from users, we need to reduce the entry from users unless it require input from users. So we need to ask input and display output that is relevant to users.
Linguistic manipulation: similar to command line interface that user have strong user control, not supportive but very flexible. User need to know the command and the prompt to achieve the goal. Example, go to cmd to enter command nestat -a to check the port of computer.
Direct manipulation: allow users to interact with graphical user interface that include windows, icon, menu and pointer (WIMP). Emphasize the real-world metaphor so that user can relate the user interface with real-world and easy understand.
Icon can be the shortcut to achieve some task. For example, trash icon is to delete the items.
Windows are to display the content for users and allow users to scroll in order to see more in a limited content area.
Menus can help user to easily achieve the tasks. For example, pop up menu and toolbars menu that show the actions to the selected objects. Drop-down menu that can put several menu items in one menu that can save space of the display. Tree-structured menu that can arrange the menu items in a more tidy way. Fisheye menu that suitable for elders or kids as the menu items will become bigger when the cursor is near.
Pointer is used to point on the elements on the screen. It can be arrow, I-beam, wristwatch, cross-hair and plus sign as mouse cursor and text-cursor that tell the users where the text will be at ( in blinking mode)
Chapter 5: Design Process
3 user classification: novice user, knowledgeable intermittent user and expert users.
Novice user: need discover tour as they are new and not familiar with the application or task. To avoid anxiety from them, we need to help them with discover tour.
Knowledgeable intermittent user: Better than novice as they can recognize the interface, yet they also need help center or documentation such as FAQs to help them from errors.
Expert users: Can retrieve more information from long-term memory on how to use the system. Use shortcuts for fast achieving instead of step-by-step to complete the task.
Design Process: Task Analysis is to decompose the major task into components. HTA (Hierarchical Task Analysis) that help us to arrange the task into components so that we as a designer won't miss out or overlook the important steps to achieve the task.
Four pillars of design
User interface requirements: elicit the information from user about their requirements on user interface such as colour that can attract their attention, user interface elements such as button, menu and drop down list needed for the user interface.
Guidelines documents and process: Using design guideline as a checklist to ensure that the user interface fulfill the guidelines so that we can design a better UI. For example, we need to have shortcuts in the user interface and help section as well as discover tour for 3 user classification.
User-interface software tools: To avoid misunderstanding between users and designers, we can use prototype to show the overall user-interface to users and make changes after receive feedback from them.
Expert reviews and usability testing: Review by experts so that we as a designer did not overlook any important elements for the UI. From their feedback, we can make better decision and improvements.
Interaction of Design Basic
Navigation Design: The design about how user can from one page to another in one screen and the steps from one screen to another. The display should be clear and easy understand so that user won't confuse on where they are and where to go.
Screen Design: Interactive design is the meaningful arrangement of multimedia elements such as graphics, text, button and more. So that user can interact with the UI elements on screen with easy steps. Layout also very important as small layout should not have many text and the layout between one widgets to another should consistent.
Display Design: The colour, text and alignment for sentences should be consistent. Don't use too many fonts for one information as we caused jumbled effect and too much for users to absorb. The space between each letter should consistent and aligned properly so that the overall display look neat and clean.
Window Design: When user using window, we usually emphasize WIMP so that user can easily interact with the windows. When designing windows, we need to make sure that the size of the windows and the display for text, image and the steps to complete the task.
Web Page Design: The UI elements on the webpage should appear consistent and useful. Avoid too many information on a page as it may irrelevant and too much for users to receive. We can use menus so that the user can go to access the information needed.
Interactive control such as the multimedia elements: hyperlink, button and image maps that add advantages to the navigation. We need to avoid anthropomorphic design as users may feel dumb and angry due to the expression of like scolding users on making error or like ordering users to do some task. So to avoid this design, we can just state facts instead of saying the words like 'you' or 'i' that feel like ordering.
Chapter 6: Design Guidelines
Task Analysis --> Good Design ---> Better UI ----> Usable System
Three design guidelines: Nielsen's 10 Usability Heuristics, Shneiderman's 8 Golden Rules and Norman 7 Fundamentals Design Principles.
User interface design principles
Place users in control of the interface (Strong user control):
User can undo action anytime.
Easy navigation, easy steps to go from one screen to another or one page to another.
System will react to user's action. For example, will show the document is downloading after click on download.
Design for 3 user class: have discover tour or start up tips for novice, have FAQs and help section for knowledgeable user and shortcut for expert.
Progress and status are visible to user. User can easily know the progress of installing as shown on the screen and how many minutes left to complete.
Inform user the requirements for the input instead of telling users the input is wrong after given. For example, let user know the requirement for password is to include letters and numbers first before user given any characters for password.
Make it comfortable to interact with a product:
Never ask input that can get from previous input as we want to minimize the needed of input device from user to maximize user performance. For example, don't ask the age of user if you can get it from DOB.
use easy-to-understand human language or sentence. For example, use cart for shopping cart instead of using word 'trolley'.
button should big enough for user to click. The size of user interface elements should big enough for user to click on the screen and visible.
UI should design for all people, include ability and inability.
-Use real-world metaphors so that user can relate themselves with real-world environment with the user interface.
save the input of users in cloud or any database so that the information will not missing due to the battery or memory capabilities. For example, google form will keep our answer when we accidentally close the form.
Avoid user make error with confirmation and if the error happen, give solution within the error message.
Reduce cognitive load:
have input type or format or pattern to prevent user type error. For example, with the pattern 999-9999999 for phone number.
no more than 3 clicks from user's pointing device to complete an action. (Three-click rule)
use easy recognize icon for specific actions. For example, icon cancel is to cancel the program or tab.
group similar information together so that the user can easily find the information. UI should be simple and use correct colour combination.
Make user interface consistent:
colour/action for the same user interface elements should be the same or not the user will confuse different colour for the same button is it represent different action.
don't change the word or icon easily as the user may use different application for the similar task and use different word or icons may caused confusing from users that where should i press for the action.