Winter'16

1. #건강검진팀
# UI Pattern
UI Design Pattern
Jan 21 / 16
서울대융합과학기술원
유혜수
1

2. 2
UI Design Pattern

3. 3
UI Design Pattern
Foundation of UI patterns

4. 4
Different UI Pattern Categories
UI Design Pattern

5. 5
Different Levels of UI Patterns
UI Design Pattern
http://www.awwwards.com/mastering-ui-patterns-for-smarter-design.html

6. UI Pattern
UI Design Pattern
UI Design Pattern 정의
UX
brand’s strengths
& visual asset
visual guidance
for the user
co-ooperation
connecting
developers and code
6
- a way to describe solution to common
usability or accessibility in a specific context
- making easier for users to understand an interface
and accomplish their tasks

7. Significance of UI patterns
Reasons to use design patterns
Advantages over design guidelines
7
UI Design Pattern
• Capturing collective wisdom of designers across many uses and scenarios
• Giving teams a common language, reducing misunderstanding that arise from
different vocabulary
• Reducing time & costs in the design and development lifecycle
• Ensuring users have a consistent and predictable experience within an application
or service
• Abstract guidelines • Concrete guidelines

8. Martijin van Welie
8
UI Design Pattern

9. 9
Posture type Patterns
UI Design Pattern
commercial sites personal / social sites
Every site or app has a reason for existence

10. 10
UI Design Pattern
Experience Patterns

11. 11
UI Design Pattern
Shopping experience pattern

12. 12
Task Levels
UI Design Pattern
Shopping

13. 13
Action Levels
UI Design Pattern

14. UI Design Pattern
References
• welie.com
• Van Welie, Martijn, and Gerrit C. Van der Veer. "Pattern languages in interaction design: Structure and
organization." Proceedings of interact. Vol. 3. 2003.

15. 15
• http://ui-patterns.com/patterns
Libraries
• https://developer.yahoo.com/ypatterns/
• welie.com
UI Design Pattern
• http://zurb.com/patterntap
Pattern Tap
UI Patterns
Welie
Yahoo Design Pattern Library
Dark Patterns
• http://darkpatterns.org

16. Thank You!
16

17. 패턴 분류체계
1. 사이트 유형 구역 (Posture Type Level)
2. 경험 구역 (Experience Level)
3. 테스크 구역 (Task Level)
4. 액션 구역 (Action Level)
: 패턴을 사이트 유형, 경험, 테스크, 액션으로 그루핑
점점 구체화하여 상호 연관성이 있는 패턴 분류 체계
1. 비즈니스에 따라 실질적으로 같은 목표를 갖고
구조적으로 유사한 사이트 컨셉을
갖는 많은 사이트들이 있는데, 이러한 사이트 유형을 분류함
2. 사용자가 사이트 컨셉하에서 사용자의 주요 목적에 달성하고
주요 테스크를 우행하여 만족을 얻는 방법과 과장에 대해 분류함
3. 경험 패턴에서 보다 구체화된 패턴으로서,
사용자가 테스크를 수행하는 데에 있어
발생하는 일련의 인터렉션을 분류함
4. 실제 태스크에 대해서 의미가 있는 세부적인 인터랙션을 분류함
17
UI Design Pattern
Review