#건강검진팀

# UI Pattern

UI Design Pattern

Jan 21 / 16

서울대융합과학기술원 유혜수

1

2

UI Design Pattern

3

UI Design Pattern

Foundation of UI patterns

4

Different UI Pattern Categories

UI Design Pattern

5

Different Levels of UI Patterns

UI Design Pattern

http://www.awwwards.com/mastering-ui-patterns-for-smarter-design.html

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

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

Martijin van Welie

8

UI Design Pattern

9

Posture type Patterns

UI Design Pattern

commercial sites personal / social sites

Every site or app has a reason for existence

10

UI Design Pattern

Experience Patterns

11

UI Design Pattern

Shopping experience pattern

12

Task Levels

UI Design Pattern

Shopping

13

Action Levels

UI Design Pattern

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

• 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

Thank You!

16

패턴 분류체계

1. 사이트 유형 구역 (Posture Type Level) 2. 경험 구역 (Experience Level) 3. 테스크 구역 (Task Level) 4. 액션 구역 (Action Level)

: 패턴을 사이트 유형, 경험, 테스크, 액션으로 그루핑 점점 구체화하여 상호 연관성이 있는 패턴 분류 체계

1. 비즈니스에 따라 실질적으로 같은 목표를 갖고 구조적으로 유사한 사이트 컨셉을 갖는 많은 사이트들이 있는데, 이러한 사이트 유형을 분류함

2. 사용자가 사이트 컨셉하에서 사용자의 주요 목적에 달성하고 주요 테스크를 우행하여 만족을 얻는 방법과 과장에 대해 분류함

3. 경험 패턴에서 보다 구체화된 패턴으로서, 사용자가 테스크를 수행하는 데에 있어 발생하는 일련의 인터렉션을 분류함

4. 실제 태스크에 대해서 의미가 있는 세부적인 인터랙션을 분류함

17

UI Design Pattern

Review