Interaction Design

2022/04/01 (新增投影片)
2022/04/03 (新增連結)
2022/04/13 (新增連結)
2022/06/14 (新增連結)
2023/05/06 (新增連結)
2024/05/25 (更新投影片)
2024/10/28 (更新投影片)

簡介

系統與使用者的互動，首先要去思考使用者的使用動機，不同的使用動機下，互動的方式是不一樣的。

• 互動設計概論

• 大學生的 UI 設計選修課（8）UI Flow 介面流程

• 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

• An Introduction to Interaction Design (IxD) (3:03)

  • [IxD Series] Activating Compositional Space (1:44)

  • [IxD Series] What Are Affordances? (2:52)

  • [IxD Series] Branching and Nodes (2:24)

  • [IxD Series] When To Use Breadcrumb Trails (3:04)

  • [IxD Series] Button Interaction States (3:54)

• Interaction Design is like …

• Touchpoints: Industrial design-Interaction design and UX

• 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)

• UX cheat sheet: searching vs browsing

• Browsing vs. Searching vs. Discovery 

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

      • Design Guide: 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

• The Fastest Navigation Layout for a Three-Level Menu 

• 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

• Design Guide: Top App Bar

• Re-Imagining The Bottom Navigation Bar

• 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

• The perfect search does not exist — but it does 

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

• First Time User Experience (FTUE) For SaaS Products: How to Design a Great Onboarding Experience For Your Users 

• 4 best practices for designing the user onboarding experience

  • Progressive Onboarding

  • Empty States

  • Guided Tour

  • Hands-On

• How Disney+ onboards new users — a UX analysis

• UX Inspiration #6: Grammarly’s demo onboarding

• The art of onboarding : Studying onboarding strategies from the biggest consumer apps.

• How to create a good onboarding and engage users from the start 

• The UX of Mobile App Onboarding: Rosetta Stone vs. Duolingo 

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

• Good CTAs, Bad CTAs

Offboading

• Offboarding: Saying goodbye with grace 

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!

• Error prevention in UX: how Facebook and Gmail get it right

• 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

• How bad error messages are harming your users 

• Seven steps to design error messages 

• How to Write and Design User-Friendly Error Messages 

Micro Interactions

• Why Microinteractions are Important for UX (2:49)

• Best UI UX Micro Interactions 2020 (3:11)

• Micro-Interactions: a designer’s superpower

• Improve your UX with 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 

• Principles for Micro-Interactions 

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.

• From Graphical Interface to the Conversational Interface 

• Eight Principles of Conversational Design

  • Cooperative

  • Goal-oriented

  • Context-aware

  • Quick and clear

  • Turn-based

  • Truthful

  • Polite

  • Error-tolerant

• The process to design a conversational interface 

• Design for conversations. Not screens. 

  • A Cheatsheet of the Most Common Interaction Patterns — CREATE