2015-02 User interface design class, Yonsei Univ. Lynn Hong

1. 10 researchers’
General UI/UX Design Principles
151104 홍수린(석사2)

2. Investigation process
Introduction

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라고 명명

10. 2Common
Design Principles
CHAPTER

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: 각 인터렉션 단계가 종료되고 새롭게 시작하는 것을 이용자가 체감할 수
있게 하라
• 각 시스템 동작 단계가 완료되었고 새롭게 시작함을 이용자에게 인지시켜라

23. 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 guidelines for ensuring a qu
ality user experience. Elsevier.

28. 4How to follow
principles?
CHAPTER

29. ‘General principles of general principles’
• Follow design principles that you can relate to supporting the user’s task or proces
s.
• 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 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. Don’t 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 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

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 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

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