More Related Content
What's hot (20)
Viewers also liked (20)
Similar to User interface design: 10 researchers' general UI/UX design principles (20)
![[襷 6蠍] 求＝求＝ ＝ ＝梶 求≡梶 梶＝氏.](https://cdn.slidesharecdn.com/ss_thumbnails/depromeet6th-190817100122-thumbnail.jpg?width=560&fit=bounds)
![[HCI2010]Web Application UI Pattern](https://cdn.slidesharecdn.com/ss_thumbnails/webapplicationuipattern20100129hci2010-1285740295-phpapp01-thumbnail.jpg?width=560&fit=bounds)
User interface design: 10 researchers' general UI/UX design principles
- 1. 10 researchers General UI/UX Design Principles 151104 襴(2)
- 3. Investigation process 1. 譯殊 郁規 襯 觜襦 覲 譴朱 UI/UX design 蟯 讌 2. 蠍一 general design principles 瑚 譟伎 蟆る 磯 10螳讌襯 襴螻 豺 豢豢 3. 螳 郁規 覲 豺 螳 螻牛給 蟆, 麹 蟆 襴 Introduction
- 4. 110 researchers General UI/UX Design Principles CHAPTER
- 5. 10 General UI/UX Design Principles 1. First Principles Basic Principles (2007) Johnson, J. (2007). GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann. る伎 Basic UI design principles 覦 豺 る First principles螻 GUI り る襯 詩 blooper襯 る 碁 伎 2. Eight Golden Rules of Interface Design (1992) Shneiderman, B. (1992). Designing the user interface: strategies for effective human-computer interaction (Vol. 3). Reading, MA: Addison-Wesley. 覈れ覿 螳 覈 interface design principles 譟一 譴 谿瑚 覿覿 襭 語螻
- 6. 10 General UI/UX Design Principles 3. Guide-lines for User-Interfaces (1993) Cox, K., & Walker, D. (1992). User-interface design. Prentice-Hall, Inc.. 覓誤 蟆 譟一 豺れ 蠍磯朱 れ螻 覿 豺 螻 4. 10 Usability Heuristics for User Interface Design (1994) Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 152-158). ACM. 螳 企Μろ(evaluation heuristic) 蟯 郁規 1987覿 谿襦 朱語 覦覃 design guidelines襯 螳煙
- 7. 10 General UI/UX Design Principles 5. Design Principles Cooper, A., Reimann, R., & Cronin, D. (2007). About face 3: the essentials of interaction design. John Wiley & Sons. る 蟲 譴 襦, 豈 覦 蟇語 principles襯 る螻 豈 結覿 螳 豈一 螳 譯殊ロ design principles襯 覈襭蟆 覈 襴 6. Principles to support usability (1992) Dix, A. (2009). Human-computer interaction (pp. 1327-1331). Springer US. Learnability, Flexibility, Robustness 螳讌 豸°伎朱 煙 讀讌り鍵 豺れ 豌願朱 る螻
- 8. 10 General UI/UX Design Principles 7. Human Interface Design Principles (2005) Apple Computer, Inc. (2005), Apple Human Interface Guidelines. れ 蠍郁鍵襯 覈 郁屋 IOS 覦 豺 襷れ 誤 覈 螳 る暑 1992覿 伎伎 MAC OS X 覲 豺 8. Windows User Experience Design Principles (2010) Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines. 伎豌伎 1 Microsoft Windows 蟲 覦 UX interaction design guidelines Windows 覯 豢 襷 伎 襷豢 螳企殊語 螳煙螻 朱, 螳企 碁慨る 誤讌
- 9. 10 General UI/UX Design Principles 9. UX Design Guidelines (2012) Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier. UI螳 UX 語 覦 螳企殊語 伎 UAF(User Action Framework) structure 磯 Planning, Translation, Physical actions, Outcomes, Assessment, Overall 碁 る螻 10. 3C framework (2014) Levin, M. (2014). Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.". 伎螳 覲旧 螳 蠍郁鍵襯 覃 覦伎 蟆(connected device) principles 炎 覦伎 語 蟲企も手 譯殊 手(Consistent), 一(Continuous), 碁慨(Complementary) 螳讌襯 豎 3C手 覈覈
- 11. Common principles: table D1 D2 D3 D4 D5 D6 D7 D8 D9 D10 螻 P1 o o o o o o o o o 9 P2 o o o o o o o o 8 P3 o o o o o o 6 P4 o o o o o o 6 P5 o o o o o o 6 P6 o o o o o 5 P7 o o o o 4 P8 o o o o 4 P9 o o o 3 P10 o o o 3 * D1~10: 螳 覓語 覯(豢豌), P1~10: 螳 豺 覯
- 12. 10 Common principles 1. 手煙 讌 (螻: 9) 2. 讀螳朱 . 朱覦煙 譯殊企 (螻: 8) 3. ろ 豬 ろ 所 (螻: 6) 4. 貉危郁 伎螳 旧蟠 螳蟆 螻 伎螳 企ゼ 語蟆 (螻: 6) 5. 麹 豌襴 覦 語 伎 讌 (螻: 6) 6. WYSIWYG: 蠍磯レ 螳朱 伎蟆 語 蟆 (螻: 5) 7. ろ螻 れ 襷れ広貅: れ 蟯 覦 蠏豺 磯 誤 (螻: 4) 8. 蠍郁鍵旧 覿襯 譴 (螻: 4) 9. 伎 覃 覈語 襷豢 誤 (螻: 3) 10. 螳 螻螳 譬襭螻 覿覈 (螻: 3)
- 13. Common principles: P1 手煙 讌 (螻: 9) 手煙 讌. 蠏碁 手蟆 (bad) 語 手煙 蟆覲企 譬讌 手煙 讌蠍 覯 覈轟伎(universal commands) 譟伎 ろ 伎 手炎骸 譴(standard) 讌貅 伎螳 朱る曙 蟆 螳 ろ 螳 手, 螳 ろ 企 手, 伎 覯螻殊 手煙 讌 伎螳 螳(concept) 螳讌 襦 螳襯 譴願 手煙 讌 蠍磯蓋 蟆渚 蠍郁鍵 覲旧 螻 貊豸 襴, 蟲譟, 旧 蠍磯レ 手蟆 讌襦
- 14. Common principles: P2 讀螳朱 . 朱覦煙 譯殊企 (螻: 8) 讀螳朱 語 (伎襯 蠍磯るΜ蟆 讌 襷) 誤磯 螻殊 伎蟆 (informative) 朱覦煙 螻牛 朱覦煙 . 朱覦煙 讌磯 蟆 朱覦煙 覿譟煙 企麹 ろ 覓伎 螻 讌 伎蟆 襴螻 朱覦煙 譯殊企 伎-ろ 螳 貉るる貅伎 觜襯 レ貅
- 15. Common principles: P3 ろ 豬 ろ 所 (螻: 6) 伎 旧 : れ襦 ろ貅一 豬 ろ 所 螳レ(Recoverability:): 螳 語 伎螳 覦襯 ろ 蟆
- 16. Common principles: P4 貉危郁 伎螳 旧蟠 螳蟆 螻 伎螳 企ゼ 語蟆 (螻: 6) ろ 旧 蟠 伎蟆 り 蟆 : 伎螳 旧螳 螳 ろ 企手 手 伎螳 貉危一蟆 讌 覈轟 企Μ螻 危 襦 伎螳 讌朱 譟一螻 り 手 貉危郁 伎螳 危襦
- 17. Common principles: P5 麹 豌襴 覦 語 伎 讌 (螻: 6) る 豌(error handling) 螻 螳蟆 讌 覩語願 (minimalistic) 語 語伎 覲旧′煙 譟一: 覲旧″襦 誤壱伎るゼ 蟆 讌 覦 煙 讌伎
- 18. Common principles: P6 WYSIWYG(What You See Is What You Get): 蠍磯レ 螳朱 伎蟆 語 蟆 (螻: 5) 蠍一牛 危蠍磯慨(remembering and typing), 覲伎企 蟆 企Ν 蟆(Seeing and pointing) 蠍磯レ 螳朱 伎蟆 語 襦 覲企 蟆(look)螻 蟆(do) 讌譴: 伎螳 覓伎 れ襦 讌, 蠏瑚 蠍磯 願讌 讌 蟆
- 19. Common principles: P7 れ 蟯 覦 蠏豺 磯 誤 (螻: 4) ろ螻 れ 襷れ広貅: れ 蟯 覦 蠏豺 磯 誤 覃襯 伎: 伎螳 れ瑚 螳螻 讌れ 覃(讌)襯 伎 語 蠏 讌 覦 螻螳 朱 豺(Familiarity): 伎 れ, 蠏碁Μ螻 貉危 覿殊 蟆渚螻 讌 譴 襷蟆 ろ 誤磯 企伎蟆
- 20. Common principles: P8 蠍郁鍵旧 覿襯 譴 (螻: 4) 蠍郁鍵旧 覿襯 譴: 覃伎 蟆 讌, 覃 讌 觜 豢 蠍郁鍵旧 覿襯 譴: 覲伎襷 危危 伎 recall覲企る recognition: 伎 蠍一 覿襯 豕螻 覲伎襷 襴襯 危危 蟆
- 21. Common principles: P9 伎 覃 覈語 襷豢 誤 (螻: 3) 伎 誤壱伎る 覈(implementation model) 伎 覃 覈語 蠍磯 伎 螳 覈(conceptual model) 襷豢 ろ 誤 覈讌レ 誤磯 伎 覃 覈語 覦
- 22. Common principles: P10 螳 螻螳 譬襭螻 覿覈 (螻: 3) 轟 誤磯 螻(group of actions) 譬襭襯 襴 谿曙 誤: 螳 螻螳 譬襭螻 覿覈蟆 Closure: 螳 誤磯 螻螳 譬襭螻 襦蟆 蟆 伎螳 豌願 蟆 螳 ろ 螻螳 襭螻 襦蟆 伎蟆 語貅
- 24. Unique principles: D6 豸♀レ(Predicability): 伎螳 螻手碓 誤磯 蠍磯 蠍磯 朱 覦 蟆郁骸 豸″ 襦 螳 (Synthesizability): 螳 螻 蟇 (operations) 蟆郁骸螳 企 讌襯 螳 蟆 Dix, A. (2009). Human-computer interaction (pp. 1327-1331). Springer US.
- 25. Unique principles: D7 伎螳 語 譴 螳 讌 覩語朱 覲願 譟一螻 modelessness: 螳ロ 伎螳 蠏碁れ 螻苦 蟆 襦 Apple Computer, Inc. (2005), Apple Human Interface Guidelines.
- 26. Unique principles: D8 蟆伎朱襦 譴: 蠍磯レ企 蟆渚れ 讌 襷螻 覯蠏碁ゼ Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines.
- 27. Unique principles: D9 伎ろ 襾碁ゼ 讌 襷 誤磯 語 誤, 1語広 譯殊, 豌危 襷襯 讌 襷 谿曙 蠍 襴 レ 譴 襷襯 讌. illegal, invalid 螳 企ゼ 讌 襷 襷 襷襦 伎 Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a qu ality user experience. Elsevier.
- 29. General principles of general principles Follow design principles that you can relate to supporting the users task or proces s. Follow principles that you can easily relate to meeting the users special needs. Follow principles that help you in meeting usability factors and that assist you in linking to knowledge about human resources and limitations. Adopt a set of principles that suits your personal approach to design. Newman, W. M., Lamming, M. G., & Lamming, M. (1995). Interactive system design (pp. I-XXXIV). Readi ng: Addison-Wesley.
- 30. UX design guideline Conclusion Be cautious using guidelines. Use careful thought and interpretation when using guidelines. In application, guidelines can conflict and overlap. Guidelines do not guarantee usability. Using guidelines does NOT eliminate need for usability testing. Design by guidelines, not by politics or personal opinion. Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experie nce. Elsevier.
- 31. Outro 覈 豺れ 蟆讀 蟇 覃 郁規れ 譯殊レ 訖企 襦語 襷蟆 蟆 UI襯 UX 手 讌襷 讌 伎 螳螻 豺 覈 蟲覿螻 讌 豺 讌貅 誤蠍郁 企旧襷 リ鍵朱 覲企 炎概 讌襴蠍語 ex)
- 32. Reference Apple Computer, Inc. (2005), Apple Human Interface Guidelines. Barfield, L. (1992). The user interface: concepts and design. Addison-Wesley Longman Publishing Co., Inc.. Cooper, A., Reimann, R., & Cronin, D. (2007). About face 3: the essentials of interaction design. John Wiley & Sons. Cox, K., & Walker, D. (1992). User-interface design. Prentice-Hall, Inc.. Dix, A. (2009). Human-computer interaction (pp. 1327-1331). Springer US. Galitz, W. O. (2007). The essential guide to user interface design: an introduction to GUI design principles and techniques. John Wiley & Sons. Garrett, J. J. (2010). Elements of user experience, the: user-centered design for the web and beyond. Pearson Education. Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier. Johnson, J. (2007). GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann. Kraft, C. (2012). User experience innovation: User centered design that works. Apress. Kraft, C., 1976-, 伎轟, 豕, & 豕蠏. (2014). 蟆渚 : 譴 . : 危. Levin, M. (2014). Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.". Levin, M., & 企碁. (2014). 覃 覦伎 Ux :覓殊誤磯 螻 蟆渚 讌覦壱 3螳讌 旧 襴. : 觜覩碁. Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines. Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 152-158). ACM. Shneiderman, B. (1992). Designing the user interface: strategies for effective human-computer interaction (Vol. 3). Reading, MA: Addison-Wesley.
- 33. Thank you
- 34. Appendix: The original text of 10 Researchers General UI/UX Design Principles D5(About face 3) 覓語 覓 襷 蠍一 襦讌 The original text
- 35. 1. First Principles Basic Principles (2007) Johnson, J. (2007). GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann. 1. Focus on the users and their tasks, not on the technology 2. Consider function first, presentation later 3. Conform to the users view of the task 4. Design for the common case 5. Dont distract users from their goals 6. Facilitate learning 7. Deliver information, not just data 8. Design for responsiveness 9. Try it out on users, then fix it The original text
- 36. 2. Eight Golden Rules of Interface Design (1992) Shneiderman, B. (1992). Designing the user interface: strategies for effective human-computer interaction (Vol. 3). Reading, MA: Addison-Wesley. 1. Strive for consistency. 2. Enable frequent users to use shortcuts. 3. Offer informative feedback. 4. Design dialog to yield closure. 5. Offer simple error handling. 6. Permit easy reversal of actions. 7. Support internal locus of control. 8. Reduce short-term memory load. The original text
- 37. 3. Guide-lines for User-Interfaces (1993) - Design systems to fit the user's conceptual model - Consistency - Universal commands for consistency - User control - Modeless interaction - User modifiable - Short-cuts for experts - Use the user's language - Motivation - Feedback - Seeing and pointing versus remembering and typing - What you see is what you get (WYSIWYG) - Simplicity - Closure - Easy reversal - Simple error handling - Prevent errors - Provide clear directions and messages - Easy to learn - Reduce short-term memory load Cox, K., & Walker, D. (1992). User-interface design. Prentice-Hall, Inc.. The original text
- 38. 4. 10 Usability Heuristics for User Interface Design (1994) Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 152-158). ACM. (http://www.nngroup.com/articles/ten-usability-heuristics/) - Visibility of system status - Match between system and the real world - User control and freedom - Consistency and standards - Error prevention - Recognition rather than recall - Flexibility and efficiency of use - Aesthetic and minimalist design - Help users recognize, diagnose, and recover from errors - Help and documentation The original text
- 39. 6. Principles to support usability: Learnability Dix, A. (2009). Human-computer interaction (pp. 1327-1331). Springer US. Learnability Predicability: Support for the user to determine the effect of future action based on past interaction history. Synthesizability: Support for the user to assess the effect of past operations on the current state. Familiarity: The extent to which a users knowledge and experience in other real-world or computer-based domains can be applied when interacting with a new system. Generalizability: Support for the user to extend knowledge of specific interaction within and across applications to other similar situations. Consistency: Likeness in input/output behavior arising from similar situations or similar task objectives. The original text
- 40. 6. Principles to support usability: Flexibility Flexibility Dialogue initiative: Allowing the user freedom from artificial constraints on the input dialogue imposed by the system. Multi-threading: Ability of the system to support user interaction pertaining to more than one task at a time. Task migratability: The ability to pass control for the execution of a given task so that it becomes either internalized by user or system or shared between them. Substitutivity: Allowing equivalent values of input and output to be arbitrarily substituted for each other. Customizability: Modifiability of the user interface by the user or the system. The original text
- 41. 6. Principles to support usability: Robustness Robustness Observability: Ability of the user to evaluate the internal state of the system from its perceivable representation. Recoverability: Ability of the user to take corrective action once an error has been recognized. Responsiveness: How the user perceives the rate of communication with the system. Task conformance: The degree to which the system services support all of the tasks the user wishes to perform and in the way that the user understands them. The original text
- 42. 7. Human Interface Design Principles - Metaphors - Reflect the Users Mental Model - Explicit and Implied Actions - Direct Manipulation - User Control - Feedback and Communication - Consistency - WYSIWYG (What You See Is What You Get) - Forgiveness - Perceived Stability - Aesthetic Integrity - Modelessness - Managing Complexity in Your Software Apple Computer, Inc. (2005), Apple Human Interface Guidelines. (http://www.multimedialab.be/doc/tech/doc_osx_hi_guidelines.pdf) The original text
- 43. 8. Windows User Experience Design Principles Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines. - Reduce concepts to increase confidence - Small things matter, good and bad - Be great at "look" and "do" - Solve distractions, not discoverability - UX before knobs and questions - Personalization, not customization - Value the life cycle of the experience - Time matters, so build for people on the go The original text
- 44. 9. UX Design Guidelines (2012): Planning Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier. Planning Clear system task model for user Planning for efficient task paths Progress indicators Avoiding transaction completion slips The original text
- 45. 9. UX Design Guidelines (2012): Translating, Physical actions Translation Existence of cognitive affordance Presentation of cognitive affordance Content and meaning of cognitive affordance Task structure Physical actions Sensing objects of physical actions Help users doing physical actions The original text
- 46. 9. UX Design Guidelines (2012): Outcomes, Assessment Outcomes System functionality System response time Automation issues Assessment Existence of feedback Feedback timing Content and meaning of feedback Assessment of information displays The original text
- 47. 9. UX Design Guidelines (2012): Overall Overall Overall simplicity Overall consistency Humor Anthropomorphism Tone and psychological impact Use of sound and color Gratuitous graphics Text legibility User preferences Accommodation of user differences Helpful help The original text
- 48. 10. 3C framework (2014) Levin, M. (2014). Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.". 3C framework: Consistent, Continuous, Complementary design Consistent design: The same basic experience is replicated between devices, keeping the content, flow, structure, and core feature set consistent across the ecosystem. Some adjustments are made to accommodate device-specific attributes, but the overall experience can be fully consumed on any device. Continuous design: It is that the experience is passed on from one device to another, either continuing the same activity or progressing through a sequence of different activities. Complementary design: It is that devices complement one another(with relevant info/functionality), creating a new experience as a connected group. This experience can encompass two forms of device relationship: collaboration and control. The original text