[ITOnAir] 데브멘토 동영상, 정선경 아주대교육연구소 연구위원 2/2부_성공하는 모바일 서비스를 위한 실전 강연 UX 패턴의 구성요소와 영역모바일 App의 Task & FlowUI Design 구성 요소UI & UX Map본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.

1. UX Pattern Design의 정의
“UX Pattern Design” : 사용자의 인식과 행동에 영향을 주는
요소(?)를 파악하고 사용자의 경험에 긍정적인 작용을 할 수
있도록 제반 요소(?)들을 창조하거나 일체화 하는 것
Dr. 도널드 노먼 (Donald A. Norman)
 제품의 기능성 + 사용성 + 즐거움(Pleasure) => Value
1

2. Persona?
“페르소나(Persona)” : 사용자들이 어떤 목적, 유형의 이용
형태를 보이는가를 기반으로 사용자의 역할, 사용자의 사용
정보, 목표 사용자 선언
페르소나의 페르소나의 구성요소 페르소나의
목적 설계 기반
End Goals Behavior Knowledge
Experience Goals Activity Interests
Life Goals Contextual Influence
Specific Pain points
Stakeholder 페르소나 설계 참여자 Web analyst
2

3. UX Pattern의 구성 요소
Blank Zone Click Through
Title Option Key ?
Pattern Layout Button
Layer Component
3

4. UX Pattern의 영역
iPhone4 iPad iPhone3G(S)
해상도 : 960*640 해상도 : 1024*768 해상도 : 480*320
입력해상도 : 1280*720 입력해상도 : 1280*720 입력해상도 : 640*480
출력해상도 : 1024*768 출력해상도 : 1024*768
Size : 3.5 Inch Size : 9.7 Inch Size : 3.5 Inch
4

5. UX Pattern의 영역
Status Bar 20 pixels
Navigation Bar 44 pixels
Custom View 367 pixels
Tab Bar 49 pixels
320 pixels
20 pixels
32 pixels
44 pixels
192 pixels
32 pixels
5

6. 모바일 App의 Task & Flow
Page Page
App 접속
 Page
승차권 예매
 Layer
 Menu 조건 선택 Condition
 Path(Arrow) 조건 입력
Decision Point 결과 내 선택
 Decision Point
로그인
 Condition(조건) 예약하기
예약완료
Layer
6

7. UI Design 구성 요소
Layout
 Fact
 구성 요소들에 대한 화면상 배열
 Navigator Tools Bar  정보의 양 [기준 Size] : 사이즈와 해상도
 Poll  정보의 그룹 : 유사 정보의 근접 배치
 정보의 정렬 : DOM tree설계
 Search
 Login
동적 Contents
 Contents
 변동 기준의 존재 여부
 Promotion  배열하는 변동기준에 의한 자료 분류
 File download  임의 기준에 의한 자료 분류
 LBS
 Footer 정적 Contents
 etc  Push형 Contents
7

8. UI & UX Map
8

9. Summary. UI&UX map
9