HCI Reviewer.pdf

HCI Reviewer WEEK 1-2 PERCEPTION -how users interpret visual & info presented in system or interface -how we recognized patterns, colors, shapes, & sounds Gestalt Laws of Perception -rooted in psychology -naturally organize & interpret visual elements into groups...

HCI Reviewer WEEK 1-2 PERCEPTION -how users interpret visual & info presented in system or interface -how we recognized patterns, colors, shapes, & sounds Gestalt Laws of Perception -rooted in psychology -naturally organize & interpret visual elements into groups -see patterns & structures in what we perceive Law of Proximity -elements are close to each other are perceived as a group Law Similarity - (shapes, color, size, etc.) perceived as part of the same group Law of Closure -perceive a complete image even when some parts are missing Law of Continuity -eyes are drawn along paths, lines, or curves -leading to see elements that follow continuous line as connected Law of Figure/Ground -how we distinguish an object (the figure) from its background (the ground) Law of Common Region -group related to elements visually -enclosing them within border, background color, or shading TYPOGRAPHY -art & technique of arranging text that makes it readable but also visually appealing Fonts & Typefaces Font -specific style and size of text Typeface -design of text itself, like Arial, Times New Roman, or Helvetica Font Size -size of the text Spacing 1. Affordances -Line Spacing -refers to the vertical space between lines of text 2. Letter Spacing -Adjusting the space between characters Text Alignment -aligned left, right, centered, or justified Hierarchy & Emphasis -typography help establish visual hierarchy by differentiating headings, subheadings Text through font size, weight (boldness), style (italic) Contrast - typography help establish visual hierarchy by differentiating headings, subheadings Text through font size, weight (boldness), style (italic) COLORS -help us interpret what we perceive Rods -rods detect light levels but not colors Cones -detect colors 3 Types of Cones 1. Low frequency -sensitive to light, entire range of visible light 2. Medium frequency -colors in middle of the spectrum, red, yellow, & greens 3. High frequency – perceive color blue Factors affect our ability to distinguish colors from each other 1. Paleness -the paler two colors are, harder it is to tell them apart 2. Color patch size -smaller or thinner, harder it is to distinguish colors 3. Separation -separated color patches, difficult to distinguish their colors COLOR PSYCHOLOGY -colors have unique power -warm colors -stimulate -cool colors -relax Psychological Primary Colors 1. Red 2. Blue 3. Yellow 4. Green GRAPHIC DESIGN -methods used to create & combine symbols, images, words to create visual representations -art with purpose Graphic Design Tools Adobe Photoshop Illustrator InDesign Canva Adobe Express More Graphic Design Building Blocks Point -fundamental particle of Graphic Design Lines -mark connecting to points Shapes -has width & height is a shape Pattern -make meaning an order will find a pattern thing Texture -look or feel of a surface Space -distance or area between things Size -large or small something is Typography -most important tools for graphic designer Color -convey moods, create images, attract attention & identify objects Image -part of graphic design, can be photographs, illustrations, paintings Displays -role of display is how users interact with technology Different types of display technologies: 1. Display Bitmap Screens (CRT & LCD) -composed of pixels arranged in a grid or matrix CRT - Cathode Ray Tube LCD -Liquid Crystal Display Resolution and color depth Resolution -number of pixels on the screen Aspect ratio -ratio between width & height Color depth -different colors for each pixel Jaggies -diagonal lines that have discontinuities due to horizontal Scan Anti-Aliasing -soften edges by using shades of line color  2. Large & Situated Displays -screens that are larger than standard desktop monitor Large displays -used for meetings, lectures Technologies: 1. Plasma -usually widescreen 2. Video Walls -lots of small screens together 3. Projected -RGB lights or lcd projector 4. Back - Projected -frosted glasses + projector behind Situated Displays -digital screens in places to support activities and interact With environment 3. Digital Paper -designed to mimic the look & feel of paper Prints -process of producing physical, tangible copy of digital info such as text, images Information Visualization -making data easier to understand using direct sensory experiences WEEK 3 Input Device -piece of computer hardware used to provide data and control signals -device used to send data to a computer Examples of Input Devices: 1. Keyboard -typing & commands 2. Mouse -pointing device 3. Touchscreen 4. Trackpad -found on laptops 5. Microphone -converts sounds into digital input 6. Stylus -pen-like device, often in design or note-talking 7. Joystick -gaming & control device 8. Scanner 9. Camera 10. Gesture-based controller -capture hand or body movements Virtual Reality -1950’s Morton Heilig built a single user console called Sensorama Types of Virtual Reality Non-Immersive VR -through screen & monitor Semi-Immersive VR -using large screens, head tracking/basic motion controls Fully Immersive VR -VR headsets, hand controllers, haptic feedback devices Augmented Reality (AR) and Mixed Reality (MR) -blend virtual elements with real world Use of VR in various industries or activities: 1. Virtual Reality in the Military 2. Virtual Reality in Healthcare 3. Virtual Reality and Education 4. Virtual Reality and Scientific Visualization 5. Virtual Reality in Entertainment