Interaction Design
Interaction Design
2022/04/01 (新增投影片)
2022/04/03 (新增連結)
2022/04/13 (新增連結)
2022/06/14 (新增連結)
2023/05/06 (新增連結)
2024/05/25 (更新投影片)
![](https://www.google.com/images/icons/product/drive-32.png)
2022/04/01
2024/05/25 (更新投影片)
互動設計
概念模型
錯誤處理
Designing for Conversion
我們來分析一下TronClass
如何發現這些問題?
簡介
系統與使用者的互動,首先要去思考使用者的使用動機,不同的使用動機下,互動的方式是不一樣的。
Basics of Interaction Design (8:16)
5 dimensions of interaction design
word
visual representation
physical objects or space
time
behavior
two tasks for interaction designers
design strategy
wireframe & prototyping
Interaction Design: Big Things Have Small Beginnings
The dimensions of interaction design
1D: Words
2D: Visual representations
3D: Physical objects or space
4D: Time
5D: Behaviour
6D: Accessible
Principles of Interaction Design: What It Takes to Create Positive Human-Computer Interactions
Fitts’ Law
Hick’s Law
Tesler’s Law
Five Languages (Dimensions) of Interaction Design
1D: Words
2D: Visual representations
3D: Physical objects or space
4D: Time
5D: Behavior
The Poka-Yoke principle
Norman’s Seven Stages of Action
The Magical Number Seven
The Future of Interaction Design
10 interaction design rules you must never break
Visibility of System Status
Match between System and Real World
Consistency and Standards
User Control & Freedom
Error Prevention
Recognition rather than Recall
Flexibility & Efficiency of Use
Minimalist Design & Aesthetic
Help Users Recognize, Diagnose, & Recover from errors
Help & Documentation
Feedback
How to design intuitive interfaces using feedback mechanisms and states
Feedback classification
Acknowledgement of input
Format validation
Progress indicator (current system status)
Success and error
Interaction design is more than just user flows and clicks : How to evaluate interaction costs and improve UX.
Interaction Design as a Skill-set
Defining Interaction Cost
Physical and Mental Interaction Costs
Find the Critical User Flows First
Tesler’s Law
Mental Interaction Costs (MIC)
Attention and Memory
Evaluating Attention
Working memory
Physical Interaction Costs (PIC)
Common Pitfalls to Avoid
Situational Interaction Costs
Interaction Paths and Motivation
5 Types of E-commerce Shoppers (3:37) NN group
Product Focused
Browsers
Researchers
Bargain Hunters
One Time
Changes in Important Information-Seeking Behavior on the Internet Over 22 Years (3:50) NN group
Compare/Choose
Understand
Acquire
Findability vs. Discoverability (2:38) NN group
Stop Counting Clicks: The 3 Click Rule is Nonsense (3:12) NN group
Mask Interaction Delays with Progress Indicators (3:36) NN group
UX strategies to guide users through a complicated journey
Product Level: Simplify User Journey
Feature Level: Streamline Task Flow
Interaction Level: Promote User Actions
Navigation / Search / Filtering
Search Box vs. Navigation (2:45) NN group
Mobile UX Marathon: Mobile UX Best Practices - Navigation, Search and Filters - Anna Potanina (25:39)
Navigation / Menu
Navigation design: almost everything you need to know
What is navigation design?
Why navigation design is so important
Common navigation design patterns in UX design
Hamburger menu
Hamburger Menus — A Challenge to Accessibility and UX Design Principles?
Cons
They keep important information hidden from the user.
Their position is less reachable on touch screens
Pros
Their popularity outweighs all concerns.
The versatility is endless.
Alternatives of hamburger menu
Bottom navigation for mobile
Tabs
Navigation with vertical lettering
Progressively collapsing menu
Menu scattered around the perimeter of the fold
Labeled Menu Button
Tabs
Vertical navigation
Call-to-action button
Breadcrumbs
Breadcrumb width should not exceed half of the page
Collapse breadcrumbs by default if they have 4+ items
Items with long name should leverage ellipses
Separator icon should mimic movement
Last Item should not be clickable
What makes successful navigation design?
Create and maintain clarity
Use meaningful labels, not formats
Use mega menus not dropdown menus
Align navigation design with user goals
Navigation design is more than just a back button
Prototyping (and testing!) your navigation design
Why You Need a Home Link (2:49) NN group
Navigation Menus - 5 Tips to Make Them Visible (3:07) NN group
How Many Items in a Navigation Menu? (2:50) NN group
Hick's Law: Designing Long Menu Lists (2:48) NN group
Web
The Power of Good Website Navigation, and How to Harness It for More Conversions
Use Clear-Cut Categories For Your Navigation
Search
Breadcrumbs
Product page
Conventional patterns
Mobile
Introducing the Flo menu: A scalable thumb-friendly navigation for mobile
Some common mobile nav patterns & when to use them
Explicit: Navigation Bars (Top / Bottom Nav)
Hidden: Navigation Menus (Hamburger Menu & Side Drawer)
Search
The Pinball Pattern of Scanning Search Results Pages (2:22) NN group
Designing Search Suggestions (3:31) NN group
How to Design a Good Search UI (2:12) NN group
Mobile
8 mobile search design guidelines
Use a full-length search bar
Provide default searches
Remember past searches
Use auto-suggestions
Simplify data input with technology
Voice
Camera
Organize your search results
Avoid showing no results
Offer alternative view options
Filter
5 things to be mindful of when you design filters
No filter state
Define your filter logic and be clear about it
What are the users’ next steps after filtering
Always try to test out your filter design
Let users share their filter result by URL
Form
Better Forms Through Visual Organization (2:34) NN group
Login Walls (3:21) NN group
User experience tutorial: Making forms as painless as possible | lynda.com (3:07)
mobile
UI/UX | Design Better Forms - 5 Tips For Designing Mobile Forms (3:39)
Mobile UX Marathon: Mobile UX Best Practices - Checkout and Forms - Anna Potanina (26:23)
8 mobile form design guidelines
Limit the number of form fields
Avoid splitting data fields
Provide matching keyboard
Autofill when possible
Simplify data input with technology
Geolocation
Biometric
Card scanning
Use chunking for long forms
Design finger-friendly components
Providing feedback
其他議題
Preview/Full display
UX cheat sheet: Preview and full display
Preview
Cards
List
Full display
Modal
Full page
Side drawer or pane
Accordion
Truncate (show)
Preview + Full display
Card + Full page
Card + Modal
List + Full page
List + Multi (Full page+Side drawer or pane)
Onboarding
How to Design Better Onboard Screens?
Show onboarding to first-time users
Use Illustrations
Show progress indicator
Don’t use many screens
Use good copy
Allow users to skip the process
4 best practices for designing the user onboarding experience
Progressive Onboarding
Empty States
Guided Tour
Hands-On
The art of onboarding : Studying onboarding strategies from the biggest consumer apps.
How to create a good onboarding and engage users from the start
Call to Action Buttons
The Optimal Placement for Mobile Call to Action Buttons
Gutenberg Principle
Top Vs. Bottom Button
Item Selection
The only time a top button makes sense is when users select an item on the screen.
Horizontal Buttons
This arrangement is ideal when you want to emphasize the relationship between two different actions.
Right Vs. Left Primary Action
Vertical Buttons
This arrangement is ideal if you want users to focus on each action separately.
Top Vs. Bottom Primary Action
Hybrid Buttons
Primary Action at the Bottom
Sticky Buttons
Offboading
Error handling
How to prevent your users from making mistakes: Through reading minds and greeting the error like an old friend
Smart confirmations
Preemptive warnings / signals
Adding constraints
Undo last actions
Show the result before the action
Everything you need to know: human error in UX design
The Step Zero
User testing
Rasmussen’s Taxonomies
Skill-based
Rule-based
Knowledge-based
Phases of Elaboration
Mistakes:planning
Lapses: between planning and acting
Slips: acting
Generic Error Modeling System
Handling Errors
The A to Z of UX — E is for Errors: 14 tips for how to handle the inevitable mistake
Prevention
Provide constraint
Display system status
Build on familiarity
Use affordances
Apply consistency
Use onboarding
Provide guidance, before the error can be made
Remove ambiguity
Test, Test, Test
Cure
Provide corrective action
Eliminate unnecessary system errors and notifications
Design good error messages
Confirm once, and once only
Be useful!
How to design a 404 error page that keeps users on your site
Error Messages
Best practices when writing error messages
Tell the user what happened
Tell the user how to resolve it
Micro Interactions
7 tips for better micro-interactions
Use familiar triggering actions that fit the context of the device
Differentiate between animations and flat interactions
Choose the right speed
Be tasteful with how many animations you use
Give feedback as soon as possible
Make transitions between interactions be seamless but noticeable enough
Once the micro-interactions are ready, test and iterate until they feel right
How to Design In-App Micro-Interactions That Drive Macro-Results: 6 Tips and Types
6 Examples of Micro-Interactions In Mobile App Design
Search app micro-interaction
Rule #1: Be short and sweet.
Preloading micro-interaction
Rule #2. People hate waiting.
Pull-to-fresh micro-interaction
Rule #3. Keep in mind that each motion should be a small part of a big UX puzzle when you develop a mobile app.
Animated event micro-interaction
Rule #4. Let the micro-interaction be tangible feedback to a user’s action.
Navigation micro-interaction
Rule #5. Help a user navigate in the app using micro-interactions.
Tab micro-interaction
Rule #6. Emphasis the essential things with the help of a micro-interaction.
Putting things in motion, micro-interactions as a powerful tool
Conversational UX / design
Conversation Design Principles - Lightning Talk with Peter Hodgson (8:01)
The UX of Conversational AI / Chatbot Design ft. Cheenu Chari (17:12)
It’s Obvious —Why Conversational UX is becoming a trend?
What is a Conversational UX (Trend 1)?
Conversational UX is a user experience that combines chat, voice or any other natural language-based technology to mimic a human conversation.
Eight Principles of Conversational Design
Cooperative
Goal-oriented
Context-aware
Quick and clear
Turn-based
Truthful
Polite
Error-tolerant