User Experience (UX) Design

2022/03/29 (增加連結)
2022/05/11 (增加連結)
2022/05/16 (增加連結)
2022/05/17 (增加連結)
2022/06/21 (增加連結)

定義

廣義的說，UX Design其實就是UX的實踐，所以，會包括UX Strategy及UX Research。狹義的說，UX Design是整個流程的第三階段。UX Design除了跟UX相關之外，還涉及了一些一般的設計概念(如: Design Thinking、Design Principles)，也就是把設計應用在UX上。一般而言，狹義的UX Design包括內容及資訊呈現的設計以及使用者介面的設計(互動與視覺)。

• What Is UX Design? (5:06)

• What is User Experience (UX) Design?

  • User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

• UX Design: UX in one sentence **

  • The higher you exceed your user’s expectations in terms of emotional, utility, and convenience values, the greater their overall experience will be, and the higher lasting conversions your offer will net.

• UX Design is Psychology with a Sketchbook

  • Self-Determination Theory

  • The 3 B’s

    • behavior, barriers, benefits

  • BJ Fogg’s Behavior Model

• The Quadrants of UX Design, Explained by a UX Intern

  • Experience Strategy (ExS)

    • Information、User needs、Business goals

  • User Research (UR)

  • Information Architecture (IA)

    • Users、Content、Context

  • Interaction Design (IxD)

    • A part of UX design

• UX Design for Complex Systems

• Why you’ve got UX and UI all mixed up

  • The Dual Perspective of UX and UI

  • The many facets of UX Design

    • User Research & Analysis

    • Content Strategy

      • 8 steps to content-first design

    • Information Architecture

    • Interaction Design (UI Design)

    • Visual Design (UI Design)

• What’s the difference between UX and UI design?

• What is UI design? What is UX design? UI vs UX: What’s the difference

• 15 Principles of UX Design That Everyone Should Know

• The business value of UX : What is the ROI of UX design? How to explain the business value of UX design to the client? How to measure the impact of UX design?

流程

廣義的UX Design包括了解使用者及UX Research，當然，一個好的UX Design是不能缺少這幾個部分，只是，這兩個部分的細節可參考UX Strategy及UX Research，不在這裡重複。所以，狹義的UX Design是強調並專注在如何產生符合顧客需求的設計，畢竟，不是了解顧客就可以容易的就產生出符合顧客需求的設計。另外，有些會把測試另外獨立，因為測試包括評估型研究(Evaluative Research)，以及完成UX設計後的測試及系統開發後上線前的測試，各種測試的作法有相同也有不同之處，所以，我們先將測試的細節都列在UX Research中。

• The UX Design Process (Explained By Experts) (6:14)

• The Elements of Successful UX Design : UX design is all about understanding your users and giving them what they need.

• The essentials of user experience design

  • The Stages of UX Design

    • Understand the product

    • Understand the user

      • User Personas

      • User Flow Diagram

    • Research

    • Structure Structure Structure!

      • Information architecture

      • Wireframes

    • Design

      • Typography

      • Brand colours and elements

      • Design system

      • Additional design elements (Photos, icons, illustrations)

    • Prototyping

    • Test your product

      • A/B Testing

      • User testing

      • Internal testing

    • Design Handoff

• The UX design process in 6 stages

  • Understand

  • Research

    • 1:1 interviews

    • User/Focus groups

    • Surveys

    • Usability testing

  • Analyze

    • User personas

    • User journey maps

  • Design

    • One of the most important things you can create at this stage is the wireframe.

  • Launch

  • Analyze (again)

• 5 key phases to the user experience design process

  • Define

    • Kick-off meeting

    • Concept sketching

  • Research

  • Analysis

    • User Personas

    • Experience maps

  • Design

    • Hand-drawn sketches

    • Wireframes

    • Prototypes

    • Design specification

  • Test

    • A/B Tests

    • User testing

    • Data analysis

    • Internal testing

• UX Design Process: Choosing and Scaling Methods

  • Current Process Trends

    • Ask questions, do research, and develop a theory (you may know this as Discover or Inspiration). Oh and maybe do a little planning.

    • Try some things out (Define or Ideation).

      • Show some people.

    • Pick one or two and flesh them out (Develop).

      • Show some people.

    • Hand it off to development (Deliver or Implement).

      • Show lots of people and start all over again.

  • Diverging and Converging

    • Double Diamond

      • Discovery (Diverging)

      • Define (Converging)

      • Develop (Diverging)

      • Delivery (Converging)

    • IDEO

      • Inspiration (Diverging)

      • Ideation (Converging+Diverging)

      • Implementation (Converging)

  • Scale for Minimum Viable Product (MVP)

  • Discovery

  • Define / Ideation

  • Develop / Implementation

  • Deliver

• Why the Double Diamond is the Most Precious Diagram in UX Design … - 1

  • Step 1: What Are the Principles of the Double Diamond?

  • Step 2: How Are Phase 1 and Phase 2 Initiated?

  • Step 3: Research that Leads from Discovery to Synthesis

  • Step 4: From Revised Problem Statement to Entering the Design Phase

• Team-less user friendly designing : a micro framework for effective UX design

  • Understanding the users

  • Constructing the pages components

  • Research the components

  • Wireframing

  • Validation

    • Stage 1 — Answer own questions

    • Stage 2 — User testing

    • Stage 3 — Client validation

• Process: industrial design vs. UX design

  • Research

    • Competitive Research

    • Market Research

    • User Research

  • Sketching

  • Prototyping

  • Development

• 5 Practices to Enhance your UX Design Process

  • Don’t Overlook Fresh Eyes

  • Give Ideas a Chance to Thrive

  • Launch Something

  • Include a Variety of Data into Decision-Making

  • Make Time for UX Debt

    • Step 1: Create an inventory of the areas where your team may have taken design shortcuts due to business/time constraints or other factors.

    • Step 2: Prioritize by impact

• UX vs Service Design: What’s The Difference?

  • While UX designers mostly focus on end users ‘outside’ the business, Service Designers focus on improving the experience for both internal staff and end customers.

• Eight tips for service design with expert users (who don’t exist)

• The 12-step UX designer’s journey

• How to design with intention

  • Define — Describe the Goal and its challenges

  • Simplify — Take the challenge and break into pieces

  • Minimise — Throw away all the unnecessary stuff

  • Focus — Pay attention to who you are designing for

  • Learn — Search the hell out of the industry and competition

  • Get inspired — Keep an open eye, mouth and mind

  • Evaluate — Do a regular reality check.

好的UX Design / UX Design Principles

• How great UX design starts and ends with the user

  • Context of a product is established first

  • User requirements are then created and agreed by stakeholders for clear definition to design teams

  • ​Design can now actively begin and will be continuous throughout the product development lifecycle

  • Evaluation follows the design phase and a number of iterative design / evaluation cycles may be needed to improve the product, pending feedback

• How to Create a Good UX Design

  • Be Formless

  • Allow Room for Criticism

  • Be Consistent

  • And Lastly, Make It Simple

• UI/UX First Principles: Reasoning

  • A great product isn’t just “user-centric,” it requires:

    • First admitting that you don’t know,

    • Finding out,

    • Analyzing your data,

    • Arriving at a testable hypothesis,

    • Working from general to specific to flesh out your ideas,

    • All while making sure your users’ why is front and center.

• How Dieter Rams’ 10 Principles of Good Design can impact UX

  • Good Design Is Innovative

  • Good Design Makes a Product Useful

  • Good Design Is Aesthetic

  • Good Design Makes A Product Understandable

  • Good Design Is Unobtrusive

  • Good Design Is Honest

  • Good Design Is Long-lasting

  • Good Design Is Thorough Down to the Last Detail

  • Good Design Is Environmentally Friendly

  • Good Design Is as Little Design as Possible

• Is ‘Delight’ the Best UX Design Intention?

  • Delightful = Exceeded Expectations

• The different delights of UX

• The demise of traditional UX design

  • Some Key Challenges

    • Good UX is no longer a differentiator

    • UX is becoming easier to do

    • Traditional education is not always setting students up for success

  • How to prepare

    • The rise of strategic UX design

    • The rise of specialist UX design

• The Evolution Of User Experience Design

  • A Human-Centred Approach

  • Building A UX Primer

  • The Ever-Shifting Context

• Universal Principles Of User Experience Design

  • Visual Grammar

  • Language And Typography

  • Narrative Design

• A comprehensive list of UX design methods & deliverables

• A Comprehensive Guide To User Experience Design

  • Getting A Skeleton In Place

    • User stories & users' goals

    • Using scenarios to inform your design

    • Mapping your design flow (user story mapping)

  • A Spot Of Science: UX Laws

    • Hicks's law

    • Fitt's law

    • Miller's law

  • Look And Feel: Communicating Visual Design

    • Moodboarding

    • Element Collages

• 5 Principles for Minimalism in UX/UI

  • Principle #1 Do not fear empty space! (Negative space)

  • Principle #2 Typography is like fine art

  • Principle #3 Choose images wisely

  • Principle #4 Choose colours correctly

  • Principle #5 Consistency through Structure

• 5 things you should never assume as a UX designer

  • Never assume that your users know what they want

  • Never assume that your product will always remain on the top or have a demand in the market

  • Never assume that the business knows what they want

  • Never assume that the market will remain the same even five years from now

  • Never assume that the users understand or know how to use a product

• 8 Things UX/UI Designers Can Learn From Steve Jobs

  • Simplicity is key

  • Think outside the box

  • If you want to sell an idea, product or service, put yourself in the other person’s shoes

  • You don’t beat the competition at their game. You redefine the game

  • Never rest on your laurels

  • Attention to detail

  • It’s not just the package but also the presentation

  • Love what you do and never lose your passion

• UI/UX Design: The 3 Golden Principles

• Laws of UX (20 laws)

  • Aesthetic Usability Effect

    • How Tinder makes you forgive its bad design

  • Doherty Threshold

  • Fitts’s Law

    • Want to become a better UX designer? — implement Fitts’ Law

  • Hick’s Law

    • UX Inspiration #4: Hick’s Law

    • How to create simple and clear user experiences with Hick’s Law

    • Hick’s Law — Do you know the law that makes or breaks a UX designer?

  • Jakob’s Law

    • UX Laws 101: Jakob’s Law of familiarity

    • Jakob’s Law: how did Facebook upset its users? : Are you being too creative for your users? — Jakob’s Law

    • The Second Law of UX : Nielsen’s law from 2000 stands as the first law of online UX. We should now acknowledge a second equally impactful truth about users: Most of your users would rather be doing something else.

  • Law of Common Region

  • Law of Prägnanz

  • Law of Proximity

  • Law of Similarity

  • Law of Uniform Connectedness

  • Miller’s Law

    • Good design rules in UX design: Miller’s Law

    • UX Inspiration #7 - Miller’s Law

      • Chunking

    • The Most Important Rule in UX Design that Everyone Breaks

      • Miller’s Law · The Magic Number

      • Always organize elements of information in categories no larger than 9, but preferably ~5 chunks.

    • Miller’s Law: a UX rule to create better user experiences: Let’s see how to help reduce users cognitive load.

      • How does it relate to UX and UI Design?

        • Chunking

          • Example 1: Phone numbers

          • Example 2: Text formatting

          • Example 3: Form

    • The principle of chunking: what Airbnb taught me about good design

    • Miller’s Law — Is there a magical number in UX design?

  • Occam’s Razor

    • Occam’s Razor: How did Steve Jobs follow the law of parsimony at Apple?

  • Pareto Principle

    • UX fundamentals: Pareto principle, the 80/20 rule that every designer should know

      • How to identify the 20%?

        • Use Analytics

        • Conduct user research

        • Usability testing

    • 80/20 rule — how the Pareto Principle is helping designers in 2020?

  • Parkinson’s Law

  • Peak-End Rule

  • Postel’s Law

  • Serial Position Effect

  • Tesler’s Law

    • Tesler’s Law. This is why you cannot make UX any simpler.

  • Von Restorff Effect

    • UX Inspiration #3: the Von Restorff effect

    • Memorable UI elements are those that stand-out from the rest.

      • The Von Restorff effect (also known as the isolation effect) states that visually contrasting items are more likely to be seen and recalled.

  • Zeigarnik Effect

    • Zeigarnik Effect. Is LinkedIn using a Dark design pattern?

• The Tried and True Laws of UX [with Infographic]

  • Fitts’ Law

  • Hick’s Law

  • Jacob's Law

  • Miller’s Law

  • Occam’s Razor

  • The Pareto Principle

  • Tesler’s Law

  • The Isolation Effect (Von Restorff Effect)

  • Pricing Pages

  • Product Listing

  • Zeigarnik Effect

  • Doherty Thredhold

  • Serial Position Effect.

• 7 laws of UX design (with illustrations)

  • Von Restorff Effect

  • Hick’s Law

  • Fitts’s Law

  • Zeigarnik Effect

  • Serial Position Effect

  • Law of Common Region

  • Law of Proximity

• Laws of UX and examples

  • Fitts’s law

  • Jakob’s law

  • Hick’s Law

  • Miller’s Law

  • Tesler’s Law

• 20 Laws of UX Design that Each of Us Faces Every Day. Part 1

• 20 Laws of UX Design that Each of Us Faces Every Day. Part 2

• Laws of UX, Every Designer Should Know About.

• Laws of UX, Every Designer Should Know About (Part II)

• User experience and cognitive load: when less is more

  • How to reduce cognitive load

    • Chunking (Categorization)

    • Progressive disclosure

    • Eliminate non-essential details

• 6 Ways to Reduce Cognitive Demand When Designing UX

  • Reduce the number of choices users have to make

  • Make it easy to get back on track if you make a mistake

  • Use visual cues for navigation

  • Reduce cognitive load by using familiar patterns and conventions

  • Design with your users in mind, not yourself or your company

  • Keep it simple — don’t overwhelm users with too many options or features at once

• Aesthetic vs. Function: nailing the balance in UX design

• UX inspiration #1: Grammarly’s demo document

• UX inspiration #2: delete models

  • Authentication Required

  • “Delete” to Delete

  • Double, Triple Confirm

• UX Inspiration #3: the Von Restorff effect

  • Pricing Pages

  • Product Listing

• UX Inspiration #4: Hick’s Law

  • Airbnb (Filter Options)

  • Invision (Progressive On-Boarding)

  • ASOS (Categorizing Choices)

• Diamonds in the Rough: The Way to Brilliant UX

  • The Way to Brilliant UX

    • Craftsmanship

      • We also achieve craftsmanship in the user experience by diligently applying principles of visual grammar in the software UI — unity and harmony, balance, hierarchy, scale and proportion, dominance and emphasis, similarity and contrast.

    • Simplicity

    • Trust

  • Below are examples of how we, the UX Design Team at Juniper Networks, uphold these values:

    • UX Design Guidelines

    • UX Component Toolkit

    • Zeplin Visual Specs

• Good Design Vs. Good UX Design

• What is good UX design, really?: What really makes a great user experience and why.

  • Key Concepts

    • What is the real purpose of the product?

    • Understand the demographic using your product.

    • Research the subject matter and requirements thoroughly.

    • Use screen real estate wisely and keep interactions to a minimum.

    • When in doubt, keep it out.

    • Not every product needs a heavy and cumbersome framework or SDK.

    • Make use of geometric principles such as rule-of-thirds and golden ratio whenever possible.

• The fine art of UX design: solving problems AND making things pretty

• 6 visual design principles that UX designers should be aware of

  • Gravity

  • Reading Direction

  • Reading Priority

  • Visual Tension

  • Dynamic vs Static

  • Activating Negative Space

• UI & UX micro-tips: Volume one

• UI & UX micro-tips: Volume two

• UI & UX micro-tips: Volume three

• Simple UX design tips for better focus states

• 7 Magic “Mores” to Improve UX/UI

• Performance

  • Designing for the impatient user

    • Equip with all possible information

    • Never lengthen a straight-forward flow

    • Avoid heavy-duty components

  • Performance Design: Designing for the illusion of speed

    • Improving perceived performance

      • Skeleton screens

      • Smooth animations

      • Benevolent deception and the illusion of labor

      • Pacing tricks

  • How to design for slow networks and offline

    • Offer key content and functionally for offline usage

    • Inform users of their current state and change of state

    • Save user’s in-app progress

    • Use a skeleton screen to create an impression of fast loading

    • Design empty state for offline usage

• Deadly biases every designer needs to live with

• Design for the real people, not for the users : How to create better realistic use case scenarios by asking the question of “how” instead of “why”

• Good design is science, not art

  • Good Design solves problems. Art doesn’t (at least not inherently).

  • Good UI/UX design begins with empathy. Art doesn’t necessarily (although it really should).

  • Good design follows the scientific method.

  • Good design is not subjective.

  • Good design can be taught.

• In design, small things can make a big difference

  • Well Structured UI

  • Mastering Scannability

  • What do you want users to read first?

  • A user should see what the designer wants them to see

  • Aesthetic Usability Effect

• Zen and the Art of UX Design: How a Japanese aesthetic can help you create better work

  • The shibumi seven

    • Koko (Austerity) (考古)

    • Kanso (Simplicity) (簡素)

    • Shizen (Naturalness) (自然)

    • Yugen (Subtlety) (幽玄)

    • Fukinsei (Imperfection, asymmetry) (不均整)

    • Seijaku (Stillness, solitude) (静寂)

    • Datsuzoku (Break from routine) (脱俗)

  • 7 Japanese aesthetic principles to change your thinking

    • Kanso (簡素)

    • Fukinsei (不均整)

    • Shibui/Shibumi (渋味)

    • Shizen (自然)

    • Yugen (幽玄)

    • Datsuzoku (脱俗)

    • Seijaku (静寂)

  • 7 Japanese Aesthetic Principles to Change your Thinking

    • Simplicity or elimination of clutter - Kanso (簡素)

    • Asymmetry or Irregularity - Fukinsei (不均整)

    • Naturalness - Shizen (自然)

    • Subtlety - Yugen (幽玄)

    • Break from routine - Datsuzoku (脱俗)

    • Stillness, Tranquility - Seijaku (静寂)

    • Austerity - Shibui/Shibumi (渋味) / Koko

  • 日本美學

    • 在禪宗哲學中，實現侘寂有七個美學原則：

      • 不均齊（Fukinsei)：不對稱、不規律。

      • 簡素（Kanso)：簡單。

      • 考古（Koko)：原始的，經過風化的。

      • 自然（Shizen)：不經偽裝粉飾、天然的。

      • 幽玄（Yugen)：隱晦而深沉的優雅、不顯著的。

      • 脫俗（Datsuzoku)：不被世俗所拘、自由的。

      • 靜寂（Seijaku)：平和、寧靜。

• 10 Behavior Patterns for UX Design

  • Safe Exploration

  • Instant Gratification

  • Satisficing

  • Deferred Choices

  • Habituation

  • Spacial Memory

  • Social Proof

  • Streamlined Repetition

  • Prospective Memory

  • Microbreaks

• 10 Common Mistakes in UX Design and How You Can Fix Them

  • Unnecessary Pop-Ups

  • Poor Color Contrast

  • Superfluous Carousels

  • Long Web Forms (Instead of Short Ones)

  • Sacrificing Usability for Design Trends

  • Designing Without the Content in Mind

  • No Fixed Menu During Scrolling

  • Ineffective Content Placement

  • Scrolljacking

  • Using the Wrong UX Design Testers

• 12 UX principles for digital Commerzbank products

• Better Design with UX Rules, and Psychological Research You Need to Know

• UI/UX Design: Managing Optionality

趨勢

• A guide of UI design trends for 2021

  • 3D Illustrations (yeah, still!)

  • Glassmorphism

  • Real-life pictures

  • Vivid colors

  • Blurred, colorful backgrounds

  • Aesthetic minimalism

  • Geometric structure

  • Big, sophisticated typography

  • Brutalism

    • How brutalist design is taking over the internet

  • Simplification of the UX/UI processes

• 2021 UI/UX Design Trends and How To Make Them Work For You

  • All things remote and virtual

  • AI and other tools to the rescue

  • Advanced personalization

  • Touchless interactions

  • (Even more of) 3D and immersive experiences

  • Motion that users love

  • Physicality and realistic textures

  • From perfection to uniqueness

  • Super tech landing pages

  • Unusual illustrations and SVGs

  • Further UX simplification

  • The era of super apps

  • Advanced onboardings

  • Always trending: Critical thinking and design relevance

• 8 UI design trends for 2020

  • Animated Illustrations

  • Microinteractions

  • 3D Graphic in web and mobile UI

  • Virtual Reality

  • Augmented Reality

  • Neumorphism

  • Asymmetrical Layouts

  • Storytelling

    • The best UX designers know how to tell a story

• 2020: The State of UX/UI Design

  • Voice User Interface a.k.a. VUI

  • AR/VR Design

  • Emotion Perception in Design

  • A Good Design Tells a Story

  • The new age of navigational elements

• UI/UX design guide with terms, explanations, tips and trends

• 2019 UI/UX Design Trends You Should Know

  • Trends in UI design

    • Colorful and custom made illustrations

    • Liquid graphics

    • Brazen, large typography. Creative and bold

    • Dark themes

    • Creative loaders

    • Custom 3d graphic: animated and static

    • Bright, bold colors and gradients

    • Minimalism

  • Trends in UX design

    • Voice in interfaces

    • Micro-interactions

    • Skeleton screens

    • Gesture-control

    • Thumb-friendly experience

  • Trends that are gone

    • Videos everywhere

    • Geometric shapes, patterns, lines and circles

  • Design System is a new black

• 2019 UI and UX Design Trends

  • Mighty browsers

  • Purposeful animation

  • 3D in interfaces and deep flat

  • Surreal design

  • Gradient 2.0, blazing colors, and darkness

  • Variable fonts

  • Figma

  • Voice UIs

  • UX Writing & UX Editing

    • The difference between UX writing and UX editing is the bandwidth. UX writers produce user-facing text. UX editors analyze, morph, bend, and twist any copy to turn it into a simple humane text. There is no crash course for UX editing. It is experience, observation, and kindness.

  • Product designer as a job title

UX desinger

• 10 Essential Skills for the Modern UI & UX Designer

• My aha moment as a UX designer

• Understanding what it is to become a UX designer

• Where have all the designers gone?

• Mindsets that make for a better UX Designer

  • Open mindedness

  • Curiosity & a desire to learn

  • Empathy

  • Humility

• Vital UX skills that few designers have, and how to develop them

  • Creative Maturity

    • Explore at least 3 solutions to any problem.

    • Fall in love with the problem, NOT any particular solution.

    • Present in-progress work.

    • Practice creativity in a context outside your day-to-day work.

      • Creative Pitch Exercise

      • Whiteboard Design Exercise

      • Experience great design together

  • Knowledge of Business

  • Facilitation Skills

  • Ability to Balance Innovation with Practicality

  • Empathy for Stakeholders

  • Curiosity and Drive to Constantly Learn

  • Mature User Research Skills

    • Decide on the main goal or objective of the research

    • Explore questions & assumptions (what is it you want to find out)

    • Choose a method (see above)

    • Identify participants (employees and clients)

    • Script or tasks

    • Identify schedule & budget (time, recruiting, & equipment)

    • Outline responsibilities

    • Nail the schedule down

• 5 Powerful Habits of Successful Designers.

  • They go beyond the 3-click rule.

  • They seek inspiration every day.

  • They design for emotional connections

  • They empathize with others.

  • Lastly, they are always in the learning mode.

• 12 traits of a great UX designer

  • Continuous learner

  • Humble

  • Great at collaboration

  • Problem solver

  • Less ego

  • Do-er mentality

  • Eager to experiment

  • Curious observer

  • Empathetic

  • Good listener

  • Understand how UX impacts business

  • Good storyteller

• The Intuitive and the Unlearnable

• UX vs Graphic vs UI Design — What’s The Difference?

  • How is a UX Designer’s approach different from a Graphic or User Interface Designer?

  • Some example activities that a UX Designer does

  • So how much do UX Designers earn?

  • What experience do you need to get started as a UX Designer?

• 4 Roadblocks UX Designers Will Encounter: How to survive as a designer in a non-design-driven company

  • Design as a matter of personal preference

  • No design standards

  • Poorly articulated requirements

  • Little to no access to users

    • Tag along on a site visit

    • Consult your technical support team

    • Do some QA testing

    • Guerrilla testing

• The 5 Skills UI Designers Need to Become UXers

  • Understand Usability

  • Develop Empathy for Users

  • Practice User Research and Testing

  • Evolve Your Analytical and Critical Thinking

  • Gather Domain Knowledge

• with Developer

  • Finding the Middle Ground Between Developers and UX Designers

    • Language

    • Communication

    • Technology

  • What designers actually need to know about coding

    • What goes on behind the screen

    • Different kinds of developers

    • What should designers care about?

    • What do I need to know?

      • Be empathetic towards developers

      • Try out some different tools

  • 5 steps to maintain strong design-dev bonds

  • What designers do when designing is done

  • How to Execute the Perfect Design-to-Development Handoff

• Get Professional. Useful Habits for UX Designers.

  • They listen to users

  • They conduct usability testing

  • They pay attention to the information architecture

  • They strive for clarity

  • They consider real-life context

  • They are open to new tools

  • They never stop learning

  • They stay up to date

  • They don’t forget to get inspired

• 6 months as a UX designer

  • Research

  • User journeys

  • Wireframing

  • Prototyping

  • User testing

  • Iterating designs

• How to become UX Designer

  • Learn New Skills

    • Empathy

    • Design Thinking

    • Presentation skills

  • Use Your Skills in a New Way

  • Learn the Rules of UX Design

  • Become Familiar with Tools

  • Practice, Practice, Practice

  • Find a Mentor

  • Find Inspiration

  • Join the Community

  • Create Portfolio

  • Get Hired

• Three ways learning UX helped me level up as a designer

  • I must remember that I am designing for another human

  • A lesson in being humble

  • Detachment is necessary

    • Empathy is necessary for design, yet so too is detachment.

• How to land a career in UX design with zero qualifications

  • What do I need to know?

    • It’s useful to frame these key skills and tasks into a design process such as this:

      • Empathise

      • Define

      • Ideate

      • Design and prototype

      • Validate

  • What do I need to do?

    • Exposure

    • Experience

    • Credibility

  • What should I keep in mind?

    • Focus on developing your skills, not your job title

    • Don’t stick to a plan; stick to a goal

    • If you don’t like where you are, then do something about it

    • Don’t give up! Learning takes time

• A matrix to help you self-evaluate on 18 different skills a UX designer needs

  • UX Skills

    • UX strategy and planning

    • UX writing

    • Information architecture

    • User flows

    • Communication and presenting

    • Wireframing and prototyping

    • Branding

    • User interface design

    • Interaction design

    • Workshop facilitation

    • Design thinking

    • Agile

    • Empathy

    • Qualitative research

    • Quantitative research

    • Analysis

    • UX audits

    • UX leadership

• I’ve tried Tinder — here’s what I think about it as a UX designer

• The Designer Therapist

  • Be challenging and direct, but not judgmental

  • Be open minded, explore a variety of directions, and don’t rush to a solution

  • Be mindful of the intricacies of problems

    • Business goals and objectives

    • Development time and effort

    • Feasibility of a solution

    • User needs

    • Market trends

    • Competitor products

• The biggest mistakes I made as a new UX designer

  • Mistake 1: Validation = asking people what they want

    • Takeaway: Remember to look toward behavior and underlying needs rather than what people say they want.

  • Mistake 2: Prioritizing polished deliverables

    • Takeaway: Your deliverables are not the same as the end experience but it’s easy to mistake them as the same thing. Communication and execution matters.

  • Mistake 3: Analysis paralysis

    • Takeaway: You have time for what you make time for. Don’t get stuck waiting for perfect conditions.

• Essentials for designing sustainable digital experiences : How can UX Designers prioritize people and the planet in their work?

• Empathy

  • How to improve your empathy to be a good UX designer

    • Contextual Inquiry

    • Focus Groups

    • Individual Interviews

    • Card Sorting

    • Task Analysis

    • Create an Empathy map using the data

      • User Says

      • User Thinks

      • User Does

      • User Feels

  • What just happened to — empathising as UX Designers?

  • Creating Empathy in Design

    • Start with Objectives

    • Identify Constraints

    • Focus on Actionable

  • How Lack of Empathy Impacts Conversion

  • Developing empathic thinking within the product team

  • How To Empathise With End-Users: It’s not about sympathy, it’s about doing the research.

• So you want to hire a UX Designer.

  • What if you only had 10 skills blocks?

    • 1) UX Designer aka the UX Team of One

    • 2) UX Designer aka Researcher

    • 3) UX Designer aka Strategist

    • 4) UX Designer aka Architect

    • 5) UX Designer aka Product Designer

    • 6) UI(!) Designer aka Art Director

    • 7) UX Designer aka Concept Developer

    • 8) UX Designer aka Production Designer

• Mistakes new and junior UX designers make

  • Being afraid of contradicting a senior UX designer.

  • Losing connection with your school network.

  • Overlooking specs.

  • Designing only the “Happy Path” and underestimating error handling.

• The Definitive List of the Top 10 Best Books for UX Designers

• 26 questions UX designers need to ask during a kick-off meeting

Information Architecture

UX Writing

• Why good UX writing is essential

• UX Writing: the key to a better User Experience

  • key principles of UX Writing

    • Clarity

    • Context

    • Concise

    • Consistent

    • Conversational

• The vague role of a “UX Writer”

  • UX Writers ≠ Copywriters

  • The importance of UX writers

  • The benefits of microcopy

• Designing Meaning Through Writing

• UX writing as a growth-engine

• UX Writing Lessons You Can Learn From Animal Crossing

• UX Writing: The Art of Designing Conversations

• A UX writing crash course

• How to write digital products with personality : The right words will shape the entire experience.

• How to write inclusive, accessible digital products : Good UX writing invites everyone to use the interface.

• How to build better digital experiences with UX writing principles

  • Keep it conversational

  • Use plain English

  • Keep language consistent throughout interactions

  • Be concise

  • Make every header descriptive

  • Address your users clearly

  • Write in present tense and with an active voice

  • Lead with the most important words

  • Reveal detail in stages

• Traits of a terrible UX writer

• UX writing: Using voice principles and a tone map to write consistently

• 10 simple tips to improve your UX writing

• The problem with “click here” and “learn more” links : 3 great ways to write helpful hyperlink text.

  • Be descriptive

  • Write unique text for each hyperlink

  • Place keywords upfront

• Why UX Writers Have to Learn to Be Less Polite : Because you don’t want anything distracting from your message

Microcopy

• A brief guide to UX microcopy

• Microcopy: an essential guide to becoming a more literate designer

• How to optimize button microcopy

Interaction Design

User Scenarios / User Stories

• How To Create User Scenarios

• How To Write User Stories

• How to launch your digital product with story mapping

User flows

• The Difference Between User Journeys and User Flows (7:35)

• Why user flows are important?

• The How (and Why) of User Flows

• User flow is the new wireframe

  • A user flow is a series of steps a user takes to achieve a meaningful goal.

  • What are the different ‘resolutions’ for user flows?

    • User goal

    • Task flow

    • Wireflow

    • User flow

• What Are User Flows In User Experience (UX) Design?

  • Types of user flow charts

    • Task flow

    • Wireflow

    • User flow

• 8 Tips for Creating Super Smooth User Flows for UX

  • Consider the questions that your diagram will answer.

  • Create user personas.

  • Build a user journey map.

  • Understand the entry points.

  • Start with a written outline.

  • Try out multiple diagrams.

  • Use shapes, graphics, images, and labels when necessary.

  • Prototype your user flow diagram.

• Top 25 User Flow Tools & Templates for Smooth UX

• User Flows- Why should you care?

  • In designing a user flow you’d want to consider:

    • Who is the user of this product?

    • What is their goal?

    • What are the steps the user needs to take to achieve their goal?

• Storyboading

  • Choosing a Winner User Flow for Your Storyboard

  • The What, Why, & When of Storyboarding in UX Design

  • Storyboarding: Storytelling visualised in UX

• UX task flows vs. user flows, as demonstrated by pancakes

  • task flows focus on single tasks, whereas user flows tend to focus on a specific user

• A UX designer’s guide to user flows (with Miro)

  • What’s the difference between user flows and user journeys?

  • High-level user flows

  • Detailed user flows

  • Wireflows

  • Page screenshots

• Creating Excellent UX Flow Charts

• Is the business process not capturing what users do? Create a UX flowchart

  • Business flowcharts: Current / Future

  • UX flowcharts: Current / Future

• UI/UX Design: Mapping Complex Problems

  • Success States: The Declarative

  • Journey of Success: The Imperative

  • Failure States: Recovery, Rectification, or Retreat

  • Building in Operational Boundaries

• Designing for unhappy paths : How the design process can reduce development risk

Conversion Rate Optimization

• Top 3 App CRO Onboarding Practices (Conversion Rate Optimization, CRO)

  • Practice 1: Give a warm welcome

  • Practice 2: Get to know them

  • Practice 3: Show them around

• 5 foolproof conversion rate optimizations for your e-commerce business

  • Optimize the hell out of your checkout

  • Get rid of shipping costs (if you’re a retail business, that is)

  • Focus on usability

  • Get rid of dark patterns

  • The key to it all: Deeply understand your customers

• 如何用CTA的14大關鍵-悄悄影響消費者，提升電商平台轉換率

  • CTA按鈕 要出現在任何載具的第一個網頁畫面中

  • CTA按鈕周圍要有選擇產品規格選項

  • 標準簡潔的CTA按鈕

  • 盡量以單一顏色背景呈現CTA按鈕

  • 避免邊框太花俏的CTA按鈕

  • CTA按鈕顏色要和網站設計調性相同

  • 不要將CTA按鈕置於網頁內文、產品介紹之前

  • 行動裝置的CTA按鈕必須與PC相同

  • 主次要CTA按鈕

  • 產品/服務/文章等，相互連結相當重要

  • 帳戶/結帳頁面的CTA按鈕可使用自稱方式增加親密感

  • 關鍵字搜尋欄分類CTA按鈕

  • 顏色/形狀CTA按鈕分類

  • 互動式板塊CTA

• It’s time to kill off outdated CTA’s (Call-To-Action/CTA)

  • Click Here

  • Next

  • Buy Now

  • Read More/Learn More

  • Cancel

  • “Yes”

• 7 CTA button design guidelines

  • Be Concise

  • Be Clear

  • Be Focused

  • Use Contrasting Colors

  • Utilize Smart Placements

  • Implement Visual Hierarchy

  • Test, Test, and Test

• 6 Ways to Improve Checkout Optimisation

  • Reduce the number of form fields

  • Helping online shoppers move through the forms more efficiently

  • Ease the shoppers concerns over the security of their payment information

  • Ease the shoppers concerns over the privacy of their data

  • Allow the shopper to checkout as a guest

  • Provide the shopper with at least one 3rd-party payment option

Tools

• 5 Places To Find Web Design Inspiration

  • Awwwards

  • Dribbble

  • Lapa Ninja

  • Httpster

  • SiteInspire

• Top 5 free design tools for non-designers in 2019

  • Pinterest

  • Coolors

  • Google Fonts

  • Pixlr

  • Vectr

• UX Design Tools for 2019 (Mac & Windows)

  • Concept & Inception

    • Pen & Paper

    • Whimsical

    • Checklist Design, Daily UI, and Dribbble

  • Wireframes & Early Design

    • Whimsical

    • Miro

    • Figma

  • Collaboration & Version Control

    • Zeplin

    • Miro

    • Notion

  • Prototyping

    • Figma

    • Invision

    • Protopie

  • High Fidelity Design

    • Sketch

    • Adobe Xd

    • Figma

  • Presentation & Documentation

    • Beautiful.ai

    • Artboard Studio

    • Notion

  • Developer Handoff

    • Zeplin

    • Invision

  • The full list

    • Figma (Screen Design — Windows, Mac, Web)

    • Whimsical (Flowcharts & Wireframes — Web)

    • Notion (Documentation — Windows, Mac, Web)

    • Protopie (Prototyping — Windows, Mac, Web)

    • Artboard Studio (Mockups — Web)

    • Beautiful.ai (Slide Presentations — Web)

    • Miro (Whiteboarding — Web)

    • Zeplin (Collaboration — Windows, Mac)

    • Sketch (Screen Design — Mac)

    • Adobe XD (Screen Design— Windows, Mac)

    • InVision (Prototyping — Web)

    • Dribbble (Inspiration — Web)

      • In defence of Dribbble and artsy UI’s

      • Drawing UX inspiration from UI-focused websites like Dribbble

    • DailyUI (Inspiration — Web)

    • Checklist Design (Inspiration — Web)

• UX Design Tools for 2018 (For Mac AND PC)

  • Concept & Inception

    • Pen & Paper

    • Whimsical

    • Dribble

    • Muzli

  • Collaboration & Version Control

    • Trunk

    • Zeplin

  • Wireframes & Early Design

    • Whimsical

    • Sketch

    • Figma

  • Prototyping

    • Atomic

    • Flinto

    • Figma

    • Invision

  • High Fidelity

    • Sketch

    • Figma

  • Presentation & Documentation

    • Keynote

    • Confluence

  • Developer Handoff

    • Zeplin

    • Invision

• 10 time-savers that I use daily as a UI designer

  • Use the scale tool in Sketch to avoid distortion

  • Autofill dummy content using Craft

  • Instantly generate the perfect color palette in Illustrator

  • Tidy up & Smart alignment

  • Avoid ruining the layout of designs with ellipses

  • Instantly identify any font with WhatFont

  • The dimension and position inputs act like calculators

  • Change the opacity of an object by pressing a number

  • Smart layout in Sketch

  • Iconjar for icon organization

• Product review of Wondershare Mockitt — the new design tool in town : and how it compares to Adobe XD and Figma while designing Lyrics by Spotify

Object-oriented UX (OOUX)

• Object-Oriented UX

• An introduction to object-oriented UX and how to do it

  • OOUX is a method for structuring a problem space that emphasizes the objects, the things people interact with.

    • DISCOVERY: Explore and select possibilities.

    • REQUIREMENTS: Nitty. Gritty. Defining.

    • PRIORITIZATION: Cut the fluff and rank.

    • SKETCHING AND PROTOTYPING

• Using object-oriented user experience for software development

• Stop thinking about flows, start thinking about objects : Why an object-oriented UX approach helps build scalable and consistent systems

• UX design is becoming a commodity — here’s how we can break the mold : How an object-oriented UX approach helps to differentiate the UI and create memorable experiences

Documentation

• Object Modeling for Designers: An Introduction

• Documenting is designing: How documentation drives better design outcomes

  • Types of Design Documentation

    • Task perspective documentation includes:

      • User Stories

      • Use Cases

      • Scenario Narratives

      • Screen Flow Diagrams

      • Page-Level Documentation

    • Structural perspective documentation includes:

      • Object Model

      • System Vocabulary

      • Architecture Map

      • Navigational Framework

      • Page Archetypes

      • Standardized Components

• Creating the perfect design handover

  • Start with a style guide

  • Visual Specs

  • Behavioural Specs

  • Organisation

• Documenting design decisions is important for product designers

參考資料

• UX Design Essentials

  • Why the Double Diamond is the Most Precious Diagram in UX Design … - 1

    • Step 1: What Are the Principles of the Double Diamond?

    • Step 2: How Are Phase 1 and Phase 2 Initiated?

    • Step 3: Research that Leads from Discovery to Synthesis

    • Step 4: From Revised Problem Statement to Entering the Design Phase

  • What Exactly is Atomic Design, and How Does It Apply to UX? - 2

  • The essentials of building a user persona - 3

  • The principle of proximity in UX Design - 5

  • You are ready to become a UX designer, but don’t know where to start - 6

  • Make A Mood Board Your Conversation Starter With Your Client - 7

  • Journey-mapping pain points & success moments - 8

• Flight Booking Concept Design

• Better Questions for Better Design Feedback

• Defending UX design decisions — 8 essential techniques

• 5 ways to increase Design’s influence in your company

  • Start from the beginning

  • Spend less time with designers

  • Research as a team

  • Show your work

  • Outcomes over outputs

• 5 Things I Learned Teaching UX Design to Non-Designers

  • Designers get it, so there is strength in numbers.

  • Design exercises are time-consuming for beginners.

  • Design thinking can seem obvious to those who use it already.

  • Some areas of design are far more nebulous than others, but that’s okay.

  • Teaching among peers is valuable and rewarding.

• Using the 30–60–90 Framework for Design Critique

  • 30% — A rough idea

  • 60% — A first draft of a set concept

  • 90% — A last check before development

• How to run a UX design workshop

• Web UX Design with the Golden Ratio

• Exploring Multimodal Design — An Adobe XD Tutorial

• A Retrospective On My First Project In UX Design

• In defence of boring UX: Why users prefer basic design over shiny fluff

Case studies

• Duolingo’s economy is broken: This article is the first in a series highlighting existing UX Designs, both the good and the not-so-good.