Interaction Design_v2 - Greenhorn's Guide

Prévia do material em texto

Interaction - The Dawn Which is NOT TRUE? “Alternative text” (for images) should
Interaction is the heart and soul of all user experiences.
Just imagine a conversation between your user and your product to be an interaction. If the conversation appears to be boring, the user will cut the discussion and speak to someone more exciting.
Interactions make the experience refreshing.
Interaction Design - The Backdrop
In the age of touch-based mobile apps and infinite-scrolling websites, it is necessary to know how Interaction Design (IxD) allows building lifelike, fluid and exceptional user experiences.
It is not easy to create text and objects that are helpful, learnable, and user-friendly. To create usable objects, you need an understanding of several User Experience (UX) disciplines.
Course Overview
Now you have seen the backdrop of interaction design, so let's gaze at what you can expect to learn in this course.
· This course is a beginner's guide to the fundamental usability concepts and methods for visual design and interaction.
· This course will equip you with a holistic, user-centered mindset, and teaches you to learn agile processes.
Topics to Expect
· User-Centered Design (UCD)
· Visual Design for Usability
· Navigation and Menu Design
· Designing for SEO and Accessibility
· Human Error, Messages, and Feedback
· Usability Evaluation
· User-Centered IA with Card Sorting
· Dynamic Web Pages: Using AJAX
· Writing Effective Content for Intranet, Web
· Designing for Efficiency
· Persuasion, Trust, and Seduction
· User-Centered Design in Agile
· Integrating UCD/UX and Agile
· Agile UX: Users, Personas, Design Maps
· Agile UX: Use Cases, Stories, Scenarios
· Agile UX: Conceptual Models
Defining Interaction Design
We have imbibed interactions in our daily lives. Simple tasks such as responding to chat conversations, and checking news updates are just a part of it. We provide our requirements to the digital device, and the device then responds to our requirements.
Interaction design connects the gaps between the interface, the device and the jobs we want to complete.
Art and Skill of IxD
· IxD needs art and skill to go past human-to-computer interfaces and adopt human-to-human design.
· IxD's skill is to consider the human aspect of our lives and build that human connectioncreated from human-to-computer interaction (HCI).
Non-Identical Twins: IxD and UI
· UI: It is something that the user sees.
· IxD: It involves the engagement of users with the UI. This in return involves how the UI responds so that users are aware of how to complete their tasks.
Consequently, the user’s satisfaction with the interface becomes the overall user experience, where, the interface forms the larger product enjoyment.
Design - an Extension of a Brand
Your design can be regarded as an extension of your brand.
Let's take an example to elucidate this statement.
· UI = The “digital associates” who help interactions between your “store” and your “users”
· Interaction Design = How the digital associates engage with users to fulfill their requirements
· You will expect your associates to be friendly and cooperative, which will make the users enjoy their purchase at the store.
· A badly designed interface = A rude, unhelpful and disobedient associate
· In UI design, making the right choices = hiring the right staff
· In Interaction design, making the right choices = training the staff to work efficiently and politely
Why IxD Matters?
There is more to the importance of Interaction Design...
· See this article to know more about why is IxD important?
10 of 10
Humans and Technology
People, generally, never behave the way we think they do.
The main reason for this is with visual perception and human physiology. But it is related to visual perception and technology.
Human Performance
Let's discuss the factors that affect human performance in interaction design.
· Perception isn’t all that it seems (silencing)
· Many processes are subconscious
· Effects of age and infirmity
· Interacting with technology
In the upcoming cards, you will get to see the factors in detail.
Perception - Silencing
Silencing is known to be a new illusion. When moving objects change, it is difficult to notice by human eyes.
Note: Read this article for gathering more information on visual silencing.
Subconscious Processing
The brain subconsciously filters out banners – Benway & Lane, 1988.
Note: Now, you have to read this article before you proceed with the next paragraph.
Hoping that you have gone through the article provided above, you are ready to go further in the course.
The banner blindness is a major problem in interaction design. This is the reason for this course.
People should know about the issues.
Effects of Aging
· Age changes our ability to perceive things. Vision reduces as we age.
· User Population is not only aging but becoming more diverse in its use of technology.
In the above image, older users find it difficult to view and read the graph and text.
Note: See Web Accessibility for Older Users and Perception Lecture Notes.
Interacting with Technology
The above image shows an Action Cycle adapted from Norman’s Design of Everyday Things.
Note: Source
Goal Mapping
Users must be conveyed clearly about their goals concerning a product through the product's design. But how will the interaction designers convey these goals to the users?
These are the goal mapping questions that will help you in this process.
1. How do users know their goal is attainable?
2. How do users know what to do?
3. How will users know they’ve done the right thing?
4. How will users know they’ve attained their goal?
What Is Empathy Exactly?
In Design Thinking, as described in the Human-Centred Design Toolkit of IDEO, empathy is defined as an in-depth understanding of the realities and issues of the users you are designing for.
· Empathy involves studying the issues people face and revealing their latent requirements and wishes to describe their behaviors. We require a knowledge of the people’s environment and their interactions and roles with their environment to do so.
· It allows us to gather more understanding and recognition of people's physical and emotional requirements, and the way people perceive, interpret and interact with the environment around them.
· Also, it allows us to know how all the above aspects have an effect on their lives, particularly within the contexts being examined.
Empathize
Empathy vs Sympathy
Sympathy is often mistaken for empathy.
· In Interaction Design and Design Thinking, we are focused on understanding the users for whom we are designing the products/solutions - for performing something that can aid them.
· When visiting the users/people in their natural environments to discover how they function, or when conducting interviews with users, we do not look for possibilities to respond to the users. Instead, we intend to gather what the users are experiencing and feel what the users are feeling.
“People ignore design that ignores people.” – Frank Chimero
Designing Without Empathy
Google Glass was a commercial failure. It was because Google didn't show empathy towards people/users.
· Google Glass never solved any particular user requirements.
· The camera gave rise to a privacy problem for people surrounding the Google Glass user.
· Voice-activated actions are regarded as socially awkward.
Visual Design in Interactive Systems
We are going to see how to effectively employ a visual design in getting people to the task they wish to complete, or the information they wish to locate.
Visual Design vs Usability
· Visual design is critical from a usability perspective. Here, we are focusing on the visual aspects of the website or application that we are looking at. It is because there is a lot of effort goes into making a website look attractive. Interactive solutions look attractive, and that is also called as Visual design.
· But when we come to look at the utility of the designs, different things happen. Let's startby understanding a bit more about what makes a visual design more important in the overall process.
Usable Visual Design
Here’s an Action Cycle, which is adapted from Don Norman’s Design Cycle of Everyday Things. The action cycle is explained in the next card.
Note: See also www.lightingtheroadahead.com
Usable Visual Design
User Goal
In this stage, we have something we want to achieve. In many interactive systems, this would be some information that you want to find or some process you want to undertake. E.g., Like buying something or changing a magazine subscription. These are the goals that users have.
The visual design makes it clear where people are, where they need to go, what’s possible on a website. All these actions fit into the User Goal.
Action
We have these goals, and we need to map that into some actions. If you can’t see on the screen in front of you, something relevant to your goal, then you are already in a very sad state. You might fall back to googling it, typing it in the search engine, saying what you want to do and finally hitting find. You hope that you might find something.
If you are lucky, then you will have found something that looks promising. Then you will be able to decide on what actions to take.
Usable Visual Design
System Task
You find some actions that you can take in the user interface and those get mapped onto System Tasks.
System Feedback
With some luck, something happens, and the system provides feedback.
Perception
You can now see the altered state of the system in front of you. This is the perception stage.
Evaluation
We need to evaluate what just happened. It is not easy either. You might get a check mark next to the thing you had just done on a good day.
On a bad day, you might end up back at the same page you started on with the old state of the system being shown. The reason behind this old state is that you have not refreshed your page.
This is where the evaluation step comes in.
Goal Mapping
You need to think about visual design. You need to make pages, user interfaces for desktop and mobile apps clear.
You need to group things in a way people are expecting. You need to make sure that people can see what they want to do and have some good idea about how they can do it.
There are four goal-mapping questions to get this done.
1. How do users know their goal is attainable?
2. How do users know what to do?
3. How will users know they’ve done the right thing?
4. How will users know they’ve attained their goal?
Visual Design Benchmark Metrics
Benchmarking empowers organizations to measure the performance relative to their peers and against a theoretical ideal.
The following metrics are considered for benchmarking visual design.
· Layout
· Legibility
· Color
· Graphics, images, and animations
· Consistency
Note: See this URL for a full report on Visual design benchmark metrics.
Principles of Visual Perception
Let’s see the basic principles of visual perception in this section. These principles will provide a better understanding of how the brain tries so hard to make sense of the visual images. These are based on the Gestalt Principles of Perception.
Non-Web Platforms
Consistent layout across pages on websites or applications is of paramount importance.
Design guidelines vary according to the platforms.
· Phones and tablets
· Linux
· iPad and iPhone
· Mac OS X
· Windows Metro/Universal
· Windows Desktop
Layout – Typical Web Page
Header
· Logo, tagline, search facility.
· Be conservative with vertical space as it affects all pages in the site,
Top Navigation
· Usually the main navigation for the site.
Left Navigation
· Try to ensure that menu items do not break across lines.
· Allow space for on-page links; preferably at the top.
Layout – Typical Web Page
Right Navigation
· Usually for low-importance items unless the visual design is used to give prominence
· Make it optional for pages that need extra content width: tables for example
Footer
· Copyright and contact info
· Terms and conditions
· Accessibility
· Marks the end of each page
Note: In the above image, limited space makes this left menu barely legible.
Alignment Points
· Every visual element on the screen creates horizontal and vertical alignment points.
· The more alignments that are present, the more complex the layout will appear.
Grids
· Grids are an important element in graphics design.
· They provide:
· Consistency
· Visual structure
· Meaning
· Stylesheets define typography, justification, and color.
· Grids + Stylesheet = Template
· Fewer templates make the user experience more consistent.
· Consider creating a corporate style guide.
Grids - Example
Image Description: The first image shows a poor page layout with no visual hierarchy. The second image shows a better layout with predictable, modular, clear visual structure.
· See more on grids at this link.
· Refer the book Ordering Disorder: Grid Principles for Web Design written by Khoi Vinh.
Color
Uses of Color
· Background and foreground
· Grouping
· Association
Background and Foreground
· Must provide good contrast
· Background preferably should not be patterned
Grouping
· Background color over a limited area
· Usually much less cluttered than separating lines
For more info, refer Effective Color Contrast - 1 and Effective Color Contrast - 2.
Good Use of Colors for Grouping
The above website made good use of color for grouping.
Association of Colors
· Color is very effective in visual search tasks, so can be very helpful for highlighting links.
· Color must not be used on its own to convey meaning.
· Beware that colors have culture-dependent meanings.
Note: Refer the article - colors in culture for more info.
Choosing Colors for Your Brand
This is a must-read guide for choosing the right colors for your brand.
Color Blindness
Color blindness affects around 8% of men but only 0.5% of women. Blindness involving green is most common.
Contrast
· Adequate contrast is an important issue both for accessibility and for older users in general.
· Newspapers offer a contrast ratio of around 10:1.
· WCAG 2.0 guidelines are5:1 minimum (AA) and 7:1 enhanced (AAA).
· Various tools exist for testing contrast:
· Color Contrast
· Contrast Analyser
Image description: Notice the distinction between small and large text sizes.
Combining Typefaces
· Generally, choose a serif and sans-serif (for most digital displays, serif typefaces will be better for larger headings).
· Microsoft's Cambria (serif) and Calibri (sans-serif) are almost identical, making them concordant.
· Contrasting is more interesting.
Images
Images are useful for
· Visual engagement and explanation
· Users with visual-spatial preference
· Mouse/tapping targets
Images need to be
· Appropriate to the context (don’t use the same image for all news items, for example,)
· Described meaningfully (what happens if you click on this picture, rather than ‘boy riding a bicycle’)
Image description: The descriptive (alt) text for the above image reads ‘Boy riding a bicycle’ but the content linked to was news of a pen manufacturer.
Image vs Text
Fitts' law says that the large photo will be much quicker and easier to click in the vertical direction than the relatively small text link below it.
Designing for User’s Goal
We have talked about Action Cycle at the beginning of the course. Now let's learn about conceptual models.
Conceptual Models
Conceptual models aren’t the things we expect people to reproduce. It’s not the job of good design to leave people with a clear understanding of how a website or an application is reviewed. It is just to give them enough feeling of familiarity that they know what they are doing.
You will get to see an example, in the upcoming cards, of how the conceptual model of a company's website changed over the years.
A Company Website in 2002
The Same Company's Website in 2018
Conceptual Model for Website
Quick Fact
Using more imagery adds more emphasis to a conceptual model.
Information Scent
In 1989, Marcia Batesproposed a berrypicking model for information retrieval.
Information Scent
Scent of Information popularized by Jared Spool, Christine Perfetti and David Brittan (2004).
· Communicate information scent through links.
· Trigger words cause users to click; users expect these words on the destination page (PPC landing pages for example).
· Link text must be between 7 to 12 words long (use key phrases for scent and SEO; not click here).
· Links must lead to information that is more precise.
· Links should accurately describe what the next page contains.
· Avoid jargon and cute marketing terms (use short words in plain language).
Information Scent
More recently (in 2009), Jakob Nielsen found that the first two words (11 characters) were the most important for information scent and provided the following guidelines.
· Use plain language
· Use specific terminology
· Follow conventions for naming common features
· Front-load user- and action-oriented terms.
Note: Additional Reading: First 2 Words: A Signal for the Scanning Eye
Menu Terminology
· Menu items should imply action
· Noun frequently implied: "Open", "Cut"
· Use titles to make phrases
· "Insert | Break..."
· Use common words
· Prefer "note" to "notation"
· Terms should be...
· Familiar
· Appropriate
· Discriminable
· Unambiguous
· Avoid negatives
· Especially for check-marked items
Menu Terminology
· Put keyword first
· "Show Ruler" not "Turn Ruler On"
· Avoid abbreviations
· Use adjectives for settings
· "Italic" not "Italicize"
· Headline capitalization (usually)
· "Paste Special"
· Allow for localization
· Avoid colloquialisms
· Follow conventions
· Standard layout and terminology
Image description: How many home users are familiar with the terms raster and vector?
Organization
Convention
· Platform guidelines (Windows, macOS): Every organization will have their own guidelines for their desired platforms.
· Microsoft Office is often used as a template for other desktop applications.
· Most organizations will have
· Their common corporate conventions
· Common convention (days of the week, for an example)
Organization
· Importance and frequency of use
· Use analytics or user research
· Combined with categorical
· Categorical (logical)
· Most effective for implicit matches
· Use card sorting to investigate
· Avoid overlap of categories
· Alphabetic
· Long lists
· User where categories are not helpful
· Groups
· Avoid single-item groups
· Maximum group size of about 7±2
Image description: Alphabetic order would have been more helpful
Menu Styles - Applications
Drop down
· Application menu bar
· Titles always visible, never greyed
· Nested menus automatically cascade
· Form the basic core of an application
Popup (context)
· Context sensitive, object related
· Item order: primary, transfer, properties
· Default menu item in bold (double-click action)
Menu Styles – Websites and Intranets
· Drop down/fly out
· Mega menus (large drop down)
A large fly-out panel appears as a user moves the mouse over the menu at left
Tree Menus
Trees are often used for extensive menus, but they raise many usability issues:
· Small elements make them difficult for some users
· May not work with some assistive technology (not accessible)
· The sense of locality is often lost
Image description: An example for a tree menu
Menu Layout – Websites and Intranets
Mega Menus
*A mega menu is known as a drop-down interface that is triggered when a user hovers over a particular area or link.
The drop-down displays all options in a main, mega-panel. Also, it groups associated topics into categories.*
· It is well organized and easy to read.
· It saves a lot of progressive navigation through different pages.
Good Mega Menu
Bad Mega Menu
Mega Footer
Mega footers or fat footers are widely used these days. Previously, footers were slim and included a minimal number of links to a page like terms of use, sitemap, and privacy policy.
Of late, mega footers
· are well organized
· occupy a large space compared to a traditional footer
· include more items like contact forms and images.
Cons:
· Mega menus can cause problems on mobile devices as
· the menu is too big to fit
· or, the text is too small to tap.
Mega Footer - Example
Faceted Search
Background
· Conceptually a cross between browsing and searching.
· Facets are not categories, but the attributes of the items in question (for example, the screen sizes of smartphones)
· In fast-moving domains, facets need to be revisited regularly
· Make sure choices within facets are helpful to users
Advantages
· Dynamic and reactive
· Superior feedback
· Good for large datasets
· Implements progressive disclosure
· Non-hierarchical in use (users can add constraints in any order)
Faceted Search
Disadvantages
· Can be challenging to implement
· Complex user interface
· Facets must be dynamically adjusted to content to be effective: consider prices, for example.
· Facets must be updated to reflect new or obsolete attributes.
Faceted Search - Example
Image Description: The entries inside the parentheses are the number of items for each value.
Faceted Search - Example
Menu Design for Accessibility
· Try to keep basic navigation simple
· Static menus with popups/drop-downs are only for more advanced use (it must be possible to navigate a site using only the keyboard).
· Use local (secondary) navigation.
· Provide hidden links or access keys to skip to content.
· Make link text meaningful (not just 'click here').
· Drop-down menus cannot be navigated without a mouse.
Accessibility - Example
The image shows a website, which has its section menus on the left. It works well for accessibility.
· The content is arranged at the center in the middle of the display.
· There is also a secondary (loco) navigation.
Display Pixel Ratio
On many high-resolution devices, what you see is not what you get.
· The display pixel ratio determines how many CSS pixels are available.
· For example, the iPhone 7 has 750 x 1334 physical pixels, but only 375 x 667 x CSS pixels.
· When the display pixel ratio is > 1, the extra pixels are used to provide smoother rendering.
Image Description: This site does not attempt to display the mega-menu on mobile devices!
Menu Design for Mobile Devices
· Mouse-over is not available.
· Mega menus and other popups may not fit or may appear in the wrong place.
· Scrolling menus are possible but they need to be obvious.
Mobile Context Menus
Mobile context menus are similar to desktop context menus.
Image Description:
· Image 1 shows a floating context menu on Android (before v3.0).
· Image 2 shows a contextual action bar from V3.0 and later.
Mobile Context Menus
Context menus are also used on iOS.
Image Description: The iOS edit menu is a context menu.
Mobile Menus
Menus can be more elaborate on most platforms.
Hybrid Mobile Apps
Various frameworks exist to package HTML/CSS/JavaScript solutions for mobile:
· Apache Cordova/PhoneGap, for example.
· They are treated as full-fledged apps but can use standard JavaScript libraries.
· The apps run within a WebView on each mobile platform.
· Companies like Amazon use this approach to make their app consistent across Android and iOS.
· For example, see www.wordeke.com which runs on four platforms (Android, iOS, Windows Phone and Amazon Fire) with a single source, jQuery.
Cross-Platform Consistency
An app displaying consistency on Android, iOS, and Windows Phone
Universal Website Design and Accessibility
Building an accessible website is also an essential part of SEO. Here, this video will discuss the best practices used for creating a universal website design, which includes topics like closed captioning, alt and accessibility tags, and site navigation.
Designing for Accessibility
Let's see the different ways how you can aid users with disabilities to access online content.
Web Accessibility and W3C Standards
Let's check the video to learn the Web Accessibility and W3C Standards
Here's a short video that tells you what is SEO.
Feedback, Notifications,and Flow
There's more to read about the following topics:
· Feedback and Notifications in Mobile Design
· Flow Design Processes - Focusing on the Users' Needs
First Level Assessment
A common problem in design and development processes is _________.
Lack of direct access to users
Which of the following IS NOT a useful characteristic of menu terms?
Ambiguous
Empathetic design ______________.
Tries to make users seem more real to the team
Color is _________.
Cultural: your background decides what colors will mean to you
If you want to improve product quality and only adjust the testing process. Then _________.
You waste development effort
Visual design benchmark metrics include ___________.
Both the options
In layout grids, what is the best approach to alignment points?
The fewer the better
Which of the following IS NOT a Gestalt principle of visual perception?
Affinity
Which of the following IS NOT a good forms design guideline?
Maximize the movement between mouse and keyboard
In fast-moving domains, the facets of faceted search are _____________.
Attributes
PROVA FINAL
Which of the following IS NOT a readability metric?
Laurel-Hardy
Interaction design is traditionally ____________.
Both the options
Ajax relies on DHTML and what other web technology?
XMLHttpRequest
A "slip" is an error of ________________.
Execution
Electronic accessibility to websites is provided using ____________.
All the options
How should we treat user input?
Be flexible; allow users to make common mistakes and report errors only when necessary
Benchmark metrics tend to be ___________.
Project-specific
Goal-oriented ??
What is a superficial match?
One based on terminology
Well-formed pages and content are important for _____________.
Both the options
Paper prototyping _______________.
Can be produced at a very early stage.
What is ARIA in web technology?
An accessibility standard
Inverted pyramid approach implies that you should __________.
Increase detail down the page
What are the three characteristics of feedback?
Timing, location and meaning
What distinguishes readability from legibility?
Readability is about the choice of words, legibility is about their appearance
Which of the following terms DOES NOT APPLY to cluster analysis?
Factorization
Which of the following IS NOT a feature of findable content?
Appropriate terminology OU Large headings
Course Final Assessment
Which of the following is not a shortcut goal?
Engaging
One of the most important success factors in Agile UX is ___________.
Engaging the team in UX
Which of the following is not a card sorting approach?
Social
Doing user research gives us data for ___________.
Both the options
Which is not a component of reciprocation?
Ask for full contact details in advance
Which is not true? For error messages, pop-up message boxes are _______________.
Ideal and should be used wherever possible
Which of the following is not a common usability testing metric?
Conversion rate
Emotional journey mapping bridges the gap between ___________.
User's perception and actual experience
Cognitive walkthroughs are good for testing ___________.
Concepts and terminology
What characteristic of two targets is not a factor in Fitts' Law?
Color of targets
How does Ajax reduce the effects of change blindness?
Both the options- errada
Which of the following is not true of high fidelity prototyping?
Avoids superficial distraction
Which of the following is not relevant to Agile UCD?
Neuro-linguistic programming
For open sort card sorting, participants will use group names that are ________________.
Similar but not identical
Newspapers offer a contrast ratio of around __________.
10:1
The halo effect is most relevant to which of the following option?
Seductive design
Trust benchmarks include ___________.
Both the options
Which is the best match when you map goals?
Class-inclusion match- errada
The empathy gap arises because of ___________.
A combination of low empathy and high systemizing skills
All web crawlers and assistive technology will process _____
HTML
In the Keystroke Level Model, which action is given the longest duration?
H (home on a keyboard, mouse or other device)
Which of the following is not true of progress enhancement?
Avoids the Document Object Model
Which part of a link or menu item is the most important for information scent?
The first 2 words
Which is not true? “Alternative text” (for images) should ___________
Describe the contents of every image
Showing that only a few items or seats are available builds on what principle of persuasion?
Scarcity
What is a common reading pattern for web pages?
F' pattern
Interaction 
-
 
The Dawn
 
Interaction
 
is the heart and soul of all user experiences.
 
Just imagine a conversation between your user and your product to be 
an
 
interaction
. If the conversation appears to be boring, the user will cut the 
discussion and 
speak to someone more exciting.
 
Interactions make the experience refreshing.
 
 
Interaction Design 
-
 
The Backdrop
 
 
Interaction - The Dawn 
Interaction is the heart and soul of all user experiences. 
Just imagine a conversation between your user and your product to be 
an interaction. If the conversation appears to be boring, the user will cut the 
discussion and speak to someone more exciting. 
Interactions make the experience refreshing. 
 
Interaction Design - The Backdrop