使用者經驗及界面設計
User Experience and Interface Design
| 節 | 週三 |
|---|---|
3 10:10–11:00 | 使用者經驗及界面設計 YR103 2 節連堂 |
4 11:10–12:00 |
* 根據陽明交大上課時間表所列
User Experience (UX) has become the most critical threshold for people to step into the digital world, and a quality User Interface (UI) can help users to get better User Experience (UX). It is composed of interaction design, visual design and information architecture. This course will focus on the learning and training of first two components which the ICT students usually fail to master well. The interaction design emphasizes on how we well program input controls, such as buttons and dropdown lists, navigational controls, such as tags and icons, and informational controls, notifications and messages boxes into a successful engagement mechanism so users could satisfactorily easily understand, communicate and interact with our applications to usefully accomplish their goals. The visual design focuses on the aesthetics of the applications with images, colors, fonts and shapes. This course will help students to master key related elements on these two designs heavily relied on reading and criticizing inspirational examples and designing a pseudo project on his/her own with app development tools.
none
Class Attendance and Participation: 30%; Personal Term Report: 70%
| 週次 | 主題 |
|---|---|
| 第 1 週 | Introduction to UI/UX Understand the difference and relationship between UI and UX; introduction to User-Centered Design (UCD). Case analysis of good vs. bad user experiences. |
| 第 2 週 | Basics of Design Psychology How human cognition and biases influence interface design. Check usability checklist focusing on cognitive load issues. |
| 第 3 週 | User Research Methods Conduct user interviews, surveys, create Personas and Scenarios. Make persona sketches & scenario description |
| 第 4 週 | Customer Journey Mapping Map user journeys to identify touchpoints, pain points, and opportunities. Make a journey map for a sample use case (e.g., booking a train ticket). |
| 第 5 週 | Information Architecture (IA) Create sitemaps and task flows; design effective navigation. Make feature categorization & sitemap draft |
| 第 6 週 | Interaction Design Understand interaction models, system states, and feedback design. Make a form submission flow (with error & success states) |
| 第 7 週 | Visual Design Basics Master typography, color, contrast, hierarchy; learn design systems. Redesign news webpage prototype in Figma |
| 第 8 週 | Responsive & Accessible Design Apply responsive web design (RWD) principles and accessibility standards. Do an accessibility evaluation of an existing website |
| 第 9 週 | Prototyping & Tools Build low- and high-fidelity prototypes with modern tools. Draw a wireframe for an app flow (using Figma/Sketch) |
| 第 10 週 | Usability Testing Plan and conduct usability testing; understand key evaluation metrics (SUS, NPS, conversion rate). Do an usability test & propose improvement suggestions |
| 第 11 週 | Design Trends & Best Practices Learn Google Material Design and Apple Human Interface Guidelines; analyze modern design trends. Make a design guideline analysis of a popular app |
| 第 12 週 | UI Animation & Emotional Design Explore how micro-interactions and motion design shape user experience. Create a prototype with animated “like” button or micro-interaction |
| 第 13 週 | Data-Driven Design Use analytics (heatmaps, conversion data) to improve UX. Create a data analysis → UX improvement proposal |
| 第 14 週 | Cross-Cultural & Localization Design Understand how culture and localization impact UI/UX. Do a comparative analysis of Uber’s UI in different regions |
| 第 15 週 | Capstone Workshop I Apply all skills in a full design cycle (research → IA → wireframe → prototype). Plan a project proposal & initial wireframes. |
| 第 16 週 | Capstone Workshop II Conduct usability testing, finalize project, and present results. Make a project demo & final presentation |
一、經典書籍 《Don’t Make Me Think》 – Steve Krug 可用性設計的經典入門,強調「簡單、直覺」。 《The Design of Everyday Things》 – Don Norman UX 設計必讀,探討設計心理學與使用者行為。 《About Face: The Essentials of Interaction Design》 – Alan Cooper 互動設計完整理論,對進階學習者非常實用。 《Hooked: How to Build Habit-Forming Products》 – Nir Eyal 了解如何設計讓人養成使用習慣的產品。 《Lean UX》 – Jeff Gothelf 教你如何在敏捷開發中實踐 UX 思維。 二、網站與文章 Nielsen Norman Group (NN/g) 👉 https://www.nngroup.com UX 領域最權威的研究與文章資源。 Smashing Magazine – UX 設計專區 👉 https://www.smashingmagazine.com/category/uxdesign 高品質的設計與前端文章。 UX Collective (Medium) 👉 https://uxdesign.cc 設計師社群最活躍的 UX 專欄。 Material Design Guidelines 👉 https://material.io/design Google 的設計規範,設計師必讀。 Apple Human Interface Guidelines (HIG) 👉 https://developer.apple.com/design/human-interface-guidelines/ iOS/macOS 介面設計標準。 三、工具與資源 Figma – UI/UX 設計與協作工具 Sketch – Mac 上的 UI 設計軟體 Miro – 線上白板,用於腦力激盪與流程設計 Whimsical – 繪製流程圖與 Wireframe 的快速工具 Hotjar / Crazy Egg – 使用者行為追蹤 (點擊圖、熱區分析)
- 地點
- Rm 304, Shou-Ren Bldg.
- 時間
- Drop in on Tuesday or appointment made by email/cell.
- 聯絡方式
- 28267238/0975158982/polunchang@nycu.edu.tw