ITE 399 – Human Computer Interaction REVIEWER P1
MODULE 1
Human-computer interaction (HCI) – a multidisciplinary field of study focusing on the design of computer technology
- the interaction between humans (the users) and computers.
FIELDS OF HCI:
Computer Science
Cognitive Science
Human Factors Engineering
User - may mean an individual user, a group of users working together.
Computer - referring to any technology ranging from desktop computers, to large scale computer systems.
Interaction - attempts to ensure that they both get on with each other and interact successfully.
THE GOALS OF HCI:
understand the factors that determine how people use technology
develop tools and techniques to enable building suitable systems
achieve efficient, effective, and safe interaction
put people first
HCI EXAMPLES
THE GAMING JOYSTICK ( RALPH BAUERECKERT )
known as “control column”
used in gaming
QWERTY ( CHRISTOPHER LATHAM SHOLES )
also the creator of typewriter
organized the keys to avoid jams
QWERTY explains the order of the first six keys on the top left letter row of the keyboard
VIRTUAL REALITY ( IVAN SUTHERLAND )
SWORD OF DAMOCLES is widely recognized as the first virtual reality head-mounted display system
to present the user with a perspective image that changes as the person moves.
GOOGLE VOICE SEARCH APP (GOOGLE)
initially named “voice action”
allows user to interact with their phones by making Google queries.
ADVANTAGES OF HCI:
simplicity
ease of deployment & operations
cost savings
ROLE OF HCI:
increasing user effectiveness
improving user computer experience with organizational systems
enhancing the user interface
ITE 399 – Human Computer Interaction REVIEWER P1
MODULE 2
INTERACTION DESIGN
Goal-Driven Design
1. DESIGN FIRST; program second
2. Separate responsibility for design from responsibility for programming
3. Designers are responsible for product quality and user satisfaction
4. Personas
5. Work in teams of two
USABILITY
easy to learn
easy to remember how to use
effective to use
efficient to use
safe to use
enjoyable to use
THE FIVE DIMENSIONS
- 1D. words
- 2D. visual presentations
- 3D. physical objects or space
- 4D. time
- 5D. behavior
COGNITIVE PSYCHOLOGY - study of how the mind works, and what mental processes take place there.
Mental Models – the images in a user’s mind that inform their expectation of a certain interaction or system.
Interface Metaphors – make use of known actions to lead users to new actions.
Affordances – things that are not only designed to do something, but are designed to look like they are designed
to do something.
UI DESIGN (USER INTERFACE DESIGN) - is what process designers use to build interfaces in software or computerized
devices, focusing on looks or style.
1. Graphical user interfaces (GUIs)—Users interact with visual representations on digital control panels.
2. Voice-controlled interfaces (VUIs)—Users interact with these through their voices.
3. Gesture-based interfaces—Users engage with 3D design spaces through bodily motions.
TO DESIGN EFFECTIVE UI:
Users judge designs quickly and care about usability and likeability.
UIs should also be enjoyable (or at least satisfying and frustration-free).
UIs should communicate brand values and reinforce users’ trust.
UX DESIGN (USER EXPERIENCE DESIGN) - often used interchangeably with terms such as “User Interface Design” and
“Usability.”
The Why involves the users’ motivations for adopting a product.
The What addresses the things people can do with a product—its functionality.
The How relates to the design of functionality in an accessible and aesthetically pleasant way.
ITE 399 – Human Computer Interaction REVIEWER P1
MODULE 3
GOLDEN RULES OF USER INTERFACE DESIGN
1. Make user interfaces consistent (CONSISTENCY)
Using similar design patterns
Identical terminology in prompts
Homogenous menus and screens
Consistent commands
2. Allow users to navigate easily via shortcuts
3. Provide informative feedback
4. Design dialog to yield closure
5. Prevent errors as much as possible
6. Allows user to reverse their actions easily (REVERSIBILITY)
7. Support Internal locus of control
8. Minimize memory load
6 key UI design principles
Clarity
Familiarity
Increases user retention
Easier for UI designers
Reduces the learning curve
User Control
Hierarchy
1. Color
2. Size
3. Fonts
Negative Space
Flexibility
MODULE 4
THE ELEMENTS OF DESIGN
1. COLOR – helps establish a mood for your composition
2. LINE - refers to the way that two points in space are connected
3. VALUE - refers to the lightness or darkness of a color
4. SPACE - Making proper use of space can help others view your design as you intended.
white space or negative space is the space between or around the focal point of an image.
positive space is the space that your subject matter takes up in your composition.
5. SHAPE - a two-dimensional area that is surrounded by an outline.
Organic shapes – occur naturally in the world.
Geometric shapes – angular and mathematically consistent
Abstract shapes – that represent things in nature but aren’t perfectly representative
6. FORM - pertains to the way that a shape or physical configuration occupies space.
7. TEXTURE - used to represent how an object appears or feels.
SKETCHES – rapid, freehand drawing that we do with no retention of it’s becoming a finished product.
- sketching is a tool that supports the process of making, not the actual design itself.
ITE 399 – Human Computer Interaction REVIEWER P1
SKETCHES SHOULD BE.
Quick - Making them does not require long periods of time.
Timely – you can create sketches on demand
Inexpensive – creating them is cheap, using materials you have on hand
Disposable- you don’t care if sketches get thrown away
Plentiful – sketches don’t exist in isolation of one another
Clear and use a common vocabulary – sketches comprise simple symbol and lines
Fluid – they have a fluidity and flow that imply creativity
Minimally detailed – sketches are conceptual and suggest structure
Appropriately refined -they communicate just enough so others can understand your intent.
Suggestive and exploratory rather than confirming – when sketching, you haven’t yet made any
concrete decisions.
Ambiguous – you have yet to work out he details, then overlay your design on the foundation your
sketches provide.
WIREFRAMES - basic visual guide we use to suggest the structure of a Web site, as well as the relationships between its
pages.
- Purpose is to communicate and explore the concepts that come out of sketching.
- Lets us outline a web site’s basic, overall structure and helps us explore divergent ideas from our sketches
WIREFRAMES SHOULD BE.
Quick — Making them does not require long periods of time, but they do take longer than sketches.
Inexpensive — Creating them is cheap, using materials and tools you have on hand.
Viable—Wireframes are not as plentiful as sketches, so you should have narrowed your concepts down to viable
options.
clear and use a common vocabulary—Wireframes comprise simple symbols, lines, and indicators of
interactivity.
minimally detailed — They are conceptual and suggest structure.
appropriately refined—They communicate a sense of structure and layout.
confirmatory—Wireframes present concepts that need validation. When creating wireframes you still haven’t
made any concrete decisions.
ambiguous—You have yet to work out the finer points of interaction and content.
Creating Simple Wireframe for website:
1. Identify the goal of the website.
2. Understand the user flow
3. Determine your website wireframe size
4. Begin your wireframe design’
5. Determine conversion points
6. Remove redundant steps
7. Get feedback on the wireframe
ITE 399 – Human Computer Interaction REVIEWER P1
MODULE 5
Initial Stage: Ideation and Confirmation of requirement and users features
Wireframing can be extremely helpful in squaring that circle, as it can be served as a visual mock-up tool for
confirming system design ideas with customers. Wireframes are fast, cheap and easy to create, and quick to
be approved. You can therefore, properly plan the basics before moving forward, avoiding rework.
Detailed Design Stage: Screen Flow Design and Verification
Storyboard and / or Wireflow
o A storyboard approach is used for structural planning of a single, linear narrative movie-like
wireframes presentation. Wireflow is a design-specification format that combines wireframe-style
page layout designs with a simplified flowchart-like way of representing interactions.
Prototype Demonstration Stage: High-Fidelity GUI Design and product demonstration
High-fidelity GUI Design and / or Prototyping
o A high-fidelity GUI builder simplifies the creation of GUIs for applications or web pages by allowing
the designer to arrange graphical control elements using a drag-and-drop editor. A prototype is a
middle to high fidelity representation of the final product, which simulates user interface
interaction.
STORYBOARD - a visual depiction of the scenes, dialog, and action in a sequential order.
HOW TO STORYBOARD A WEBSITE DESIGN
Step 1 - Collect the information that you want to include on the Web site. This includes text as well as images.
Step 2 - Sort the information into topics. Topics should start at the broadest and work toward the narrowest.
Step 3 - For each page of the Web site, determine page title, headings, sub headings and content.
Step 4 - Plan the structure of the information and how the pages will link. This needs to be logical. It can be linear,
hierarchical or a branch design, in the form of a web.
Step 5 - Layout the menu structure.
Step 6 - Layout your template page. This should be the interior page of the Web site.
Step 7 - Test the layout.
MOCKUPS - A website mockup is a full-size model of a design that demonstrates what the website would look like.
How To Create A Website Mockup
1. Try implementing as many design ideas as possible – this phase is the best time to experiment with colors, fonts,
images, videos, copy, form, buttons and other UI elements
2. This is the best time to style UI elements such as navigation bars, buttons, links, sliders, forms and content containers
3. You start with a mobile-first design to put only necessary elements first and then scale up according to the website
dimensions
4. Avoid using Lorem Ipsum or any other dummy text at this stage – this might seem like saving time in the beginning but
neglecting to include a writer at the mockup stage of your project could actually prolong the workflow and produce
unsatisfying, incomplete layouts.
