10 researchers’General UI/UX Design Principles151104 홍수린 ( 석사 2)
2
Investigation processIntroduction
3
Investigation process1. 주요 연구자의 저서를 비롯하여 단행본 중심으로 UI/UX design 관련
저술을 수집
2. 여기에서 general design principles 에 대한 언급이 존재하는 것들만 따로 10 가지를 정리하고 원칙 추출
3. 각 연구자 별 디자인 원칙 간 공통되는 것 , 독특한 것을 정리
Introduction
110 researchers’ General UI/UX
Design Principles
CHAPTER
5
10 General UI/UX Design Principles1. 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 Principles3. 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 Principles5. Design PrinciplesCooper, 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 Principles7. 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 interac-
tion design guidelines• Windows 버전이 출시될 때마다 이에 맞춰 가이드라인이 갱신되고 있으며 , 애플의
가이드라인보다는 상세하지 않음
9
10 General UI/UX Design Principles9. 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 라고 명명
2Common Design
Principles
CHAPTER
11
Common principles: tableD1 D2 D3 D4 D5 D6 D7 D8 D9 D10 합계
P1 o o o o o o o o o 9P2 o o o o o o o o 8P3 o o o o o o 6P4 o o o o o o 6P5 o o o o o o 6P6 o o o o o 5P7 o o o o 4P8 o o o o 4P9 o o o 3
P10 o o o 3
* D1~10: 각 문서 번호 ( 출처 ), P1~10: 각 원칙 요소 번호
12
10 Common principles1. 일관성을 유지하라 ( 합계 : 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: P6WYSIWYG(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: 각 인터렉션 단계가 종료되고 새롭게 시작하는 것을 이용자가 체감할 수 있게 하라
• 각 시스템 동작 단계가 완료되었고 새롭게 시작함을 이용자에게 인지시켜라
3Unique Design
Principles
CHAPTER
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 guide-lines for ensuring a quality user experience. Elsevier.
4How to follow principles?
CHAPTER
29
‘General principles of general prin-ciples’• Follow design principles that you can relate to supporting the user’s task
or process.• Follow principles that you can easily relate to meeting the user’s special
needs.• Follow principles that help you in meeting usability factors and that as-
sist 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). Reading: 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 experience. Elsevier.
Outro• 모든 원칙들이 사실 검증된 건 아니며 연구자들의 주장일 뿐이니 자신의 프로젝트에 맞게 적용하는 것이 필요하다
• UI 를 넘어 UX 의 시대라고 하지만 아직 이에 대한 개념과 디자인 원칙은 명확히 구분되고 있지 않았다
• 현업에서는 원칙을 지켜 디자인하기가 어렵지만 장기적으로 보면 성공의 지름길이 될 수 있다 ex) 애플
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.
Thank you
Appendix: The original text of10 Researchers’ General UI/UX Design Principles• D5(“About face 3”) 의 원문은 너무 양이 많아 여기에 수록하지 않음
The original text
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 technology2. Consider function first, presentation later3. Conform to the users’ view of the task4. Design for the common case5. Don’t distract users from their goals6. Facilitate learning7. Deliver information, not just data8. Design for responsiveness9. Try it out on users, then fix it
The original text
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
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
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
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 user’s 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
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
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
7. Human Interface Design Principles
- Metaphors - Reflect the User’s 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
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
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
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
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
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
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
