Downloaded 100 times
Uploaded byRuby Kuan 關芸如
UI UX 概論
This document provides an introduction and overview of UI (user interface) and UX (user experience). It defines UI as the medium for interaction and information exchange between a system and user, focusing on usability. It defines UX as involving a person's behaviors, attitudes, and emotions when using a product or service, including the actual experience, usability, and meaningfulness of human-computer interaction. The document then discusses some UX design trends and methods, positioning UX as focusing on the needs of people and coming before UI in the design process.
More Related Content
![How Big Brands are Taking Your Traffic in Alberta [Data Inside].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/howbigbrandsaretakingyourtrafficinalbertadatainside-260123180142-42d276f3-thumbnail.jpg?width=640&height=640&fit=bounds)
UI UX 概論
- 1. UI UX 概論 WHAT’SUI UX? RUBY KUAN 1
- 2. Ruby Kuan 關芸如 台灣赫斯特媒體Digital Director 數位總監 ELLE / 柯夢波丹丹 / Harper’s Bazaar Linkedin Proficient in: User Research, User Experience, Persona & Scenarios, Products Development, Project Management, Internet Marketing, Community Marketing, 2004 匯通數位/無名⼩小站 > 2007 痞客邦 > 2009 李奧⾙貝納 > 2010 創業 > 2012 痞客邦 >2016 赫斯特 資歷14年，著重在網路服務開發、User research、社群⾏銷操作，開發過無數 網路服務 無名小站網誌地圖、音樂、投票、照片上傳、投稿系統以及娛樂名人堂等， 以及痞客邦使用者後台、新手上路、註冊流程、全站管理系統、三大首頁、 電影、娛樂、美妝頻道、7Headlines 等
- 3. UX UI WHAT’S UIUX? 對UI(使用者介面)與UX(使用者經驗)有初步的了解 認識使用者經驗之設計原則與常用方法論
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 17.
- 18.
- 19.
- 20. Navigation bar mailbox Profile thumbnail Content image/video Clickable text Button Tab bar UI IS WHAT
- 21. Why is thispage the homepage Why are we displaying user faces Why is the content this size/long Why those name need to be clickable Why are we allowing to do those Why 5 tabs UX IS WHY
- 22.
- 23. UX researcher UI designer User Experience Research UsabilityExpert Analytics Visual Design *視覺化過程，透過互動設計後所做出的最後結果 Interaction Design *針對 usefulness, usability, emotional 做設計，比較 像是⽅方法，⽽而非結果 找出病灶、確診-⾨門診醫師 Patient doctor UX designer 決定治療⽅方法-主任醫師 Chief Physician 進⾏行行治療-外科醫師 Surgeons Strategy Product Design Information Design
- 24.
- 25. User Experience Research “whenmarketing research is needed, and user experience research is needed!” 讓產品設計決策更更具備共識 減少規格的變動 ⾏行行銷了了解切入⾓角度 有可以依據的⽅方向加速產品的開發
- 26.
- 27. Experience Designer Information Architecture User research practices Visual design Interaction design Editing & curatingCopywriting Design process management Information design Agile methods Analytics User cases Domain knowledge ROI Business knowledge Technology Marketing Social Networks Ethnography Storytelling Sketching Presenting Facilitating Critiquing *直接關聯聯性：紅⾊色>藍藍⾊色>⿊黑⾊色
- 28. User Experience Research使⽤用者體驗研究 Marketing Research 市場研究 Interaction Design 互動設計 Visual Design 視覺設計 Product Design 產品設計 Usability Expert 易易⽤用性研究 Anthropology Research ⼈人類學研究 Web Develop 網⾴頁開發 Front to End Engineer 前端⼯工程 UX
- 29.
- 30. Service Blueprint Consumer JourneyMap Personas Ecosystem Map Competitive Audit Value Proposition Stakeholders Interviews Key Performance Indicators Brainstorming Moodboards Storyboards User Flow Task Analysis Taxonomies Content Audit Heuristic Analysis Sitemap Use Cases and Scenarios Metrics Analysis User Interview / Focus Group Quantitative Survey Usability Testing Card Sorting A/B Test Eyetracking Accessibility Analysis Sketches Wireframe METHODS AND TOOLSUX
- 31. Service Blueprint Consumer JourneyMap Personas Ecosystem Map Competitive Audit Value Proposition Stakeholders Interviews Key Performance Indicators Brainstorming Moodboards Storyboards User Flow Task Analysis Taxonomies Content Audit Heuristic Analysis Sitemap Use Cases and Scenarios Metrics Analysis User Interview Focus Group Quantitative Survey Usability Testing Card Sorting A/B Test Eyetracking Accessibility Analysis Sketches Wireframe METHODS AND TOOLSUX questionnaire survey
- 32. Who are the Users? What are users tryingto do? What will the interface look like How will it be organized ? What problems are users having Deploym ent and Release Project start Concept design Detailed design Product launch USER CENTERED DESIGN user centered design is a process
- 33. Who are the Users? What are userstrying to do? What will the interface look like How will it be organized? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch • Persona / Market Segmentation • Competitive Analysis • Contextual Inquiry • Stakeholder Interviews • Quality Function Deployment User Interview Focus Group
- 34. Who are the Users? What are users trying to do? What will the interface looklike How will it be organized? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch • Journey Map • Use Cases and Scenarios • Task Analysis User Interview Focus Group questionnaire survey
- 35. Who are the Users? How will it be organized? What problems areusers having Deployme nt and Release Project start Concept design Detailed design Product launch • Sketches • Wireframing • Prototyping • Lean UX What are users trying to do? What will the interface look like
- 36. Who are the Users? What problems are users having Deployme nt and Release Project start Concept design Detailed design Product launch Whatare users trying to do? How will it be organized ? What will the interface look like • Card Sorting • Tree Testing • First Click Testing • Keystroke Level Modeling • Heuristic Evaluations
- 37. Who are the Users? Deployme nt and Release Project start Concept design Detailed design Product launch What are userstrying to do? What will the interface look like How will it be organized? What problems are users having • Unmoderated Remote Usability Testing
- 38. Who are the Users? Project start Concept design Detailed design Product launch What are users trying todo? What will the interface look like How will it be organized? What problems are users having Deploym ent and Release •Usability Testing •Comparative Benchmark Study •A/B Testing
- 39. https://www.youtube.com/watch?v=Ovj4hFxko7c What the #$%@is UX Design? via:UX Mastery
- 40. Do the designbehind the visual UX
- 41.