The Elements of User Experience : User-Centered Design for the Web and Beyond

1. The Elements of User
Experience
: User-Centered Design
for the Web and Beyond
-Jesse James Garrett
/유현진
x 2015 Winter

2. The Elements of the User Experience
User-Centered Design for the Web and Beyond

3. UX디자인의 단계
구체적이고 명확하다
추상적이고 정형화되어 있지 않다STEP 1
STEP 2
STEP 3
STEP 4
STEP 5

4. 선택의 파급효과: 전략->범위->구조-> 윤곽-> 표면

5. 사용자가 무엇을 원하고,
운영자는 서비스를 통해 무엇을 얻고자 하는가
기능 상세: 어떠한 기능이 필요한지 정의
콘텐츠 요구사항: 어떠한 콘텐츠들이 필요한지
인터랙션: 사용자-시스템 어떻게 반응할 것인가
정보구조 :정보를 이해할 수 있는 방식으로 구조화 시킴
인포메이션: 어떻게 이해시킬 것인가
인터페이스: 요소 배치
네비게이션: 요소를 통해 어떻게 이동하게 것인가최종물을 어떻게 느끼게 할 것인가
시각, 청각적으로 어떻게 등등 활용
+: content (valuable) , technology (adapt)

6. 1. Product Objectives
- business goal
- brand identity
- success metrics
2.User Needs
- User Segmentation
- Usability and User Research
- Creating Personas
The Strategy Plane
Step 1 z

7. - business goal: 지나치게 구체적이지 않으면서 지나치게 일반적이지 않도록 균형 유지
- 브랜드 아이덴티티(brand identity): 사용자들의 first impression. 로고, 컬러 패턴,
타이포그래피 등의 요소를 포함
- 성공의 지표: 사용자 요구를 충족시키고 있는지 알아보기 위한 지표 (프로젝트 전 과정에 걸쳐
이루어지는 의사결정에 영향, 다음 프로젝트에도 영향, UX에 대한 구체적 근거 마련)
월간 사이트 방문 회수 측정을 통해 사이트가 얼마나 가치있는지 보여줌
Product Objectives

8. < User Segmentation >
- 구체적인 유저 니즈를 정의하기 위해서 우리는 유저가 누구인지 알아야 함
- 어떠한 특징을 가지는 유저들을 작은 그룹으로 분류
- 분류 방식:
• 인구학적 기준: 성별, 연령, 교육수준, 결혼여부, 소득 등
• Psychographic 프로파일 : 사용자의 태도나 인식
- user segmentation 해야하는 이유:
• 일반적으로 동일한 연령 집단, 동일한 거주지 등의 사람들은 유사한 태도를 보이는 경우가 많음
• 다른 특성을 나타내는 그룹은 다른 시각을 가지고 있음. 이에 따라 사용자 니즈도 달라짐.
User Needs > User Segmentation

9. - user needs 발견을 위해 user research
- research tools: surveys, interviews, or FGI 등등
• market research methods (surverys, focus groups 등)
• contextual inquiry (사용 맥락 이해에 효과적으로 활용될 수 있음, 비슷한 개념으로 task anaylsis)
• user testing : 출시 전에 문제가 없는지 usability test ( prototypes 활용, 실질적인 product 대신에
사용자가 정보를 어떻게 그룹핑하는지 알기 위해서 card sorting 기법을 활용하기도 함
User Needs > Usability and User Research

10. - 퍼소나는 실제 사용자들의 니즈를 반영하기 위해 만들어진
허구적 인물로서, 사용자 경험 개발에 활용하기 위한 샘플로 활용됨
- 유저 리서치를 통해 퍼소나 도출할 수 있음
User Needs > Creating Personas

11. 1. Functionality and Content
2. Defining Requirements
3. Functional Specifications
- Writing it down
4. Content Requirements
The Scope Plane
Step 2 z

12. 아래 두가지 내용을 명시적으로 문서화할 것
(커뮤니케이션과 다음 목표 설정에 용이)
- 1) 무엇을 build 할 것인가
- 2) 무엇을 build 하지 않을 것인가
범위 정의를 위해 필요한 것

13. - 기능 세부 사양(functional specification) : 시스템이 수행해야하는 바를 설명
- 콘텐츠 요구사항(content requirements): 어떤 정보들이 포함되어야 할지
기능성과 콘텐츠
요구사항 수집하기
- 실제 사용자로부터 요구사항 수집 (survey, FGI, contextual Inquiry 등등)
- 조직 내부의 이해당사자들로부터 요구사항 수집
- 요구사항 만들어내기 (이해관계자들과의 브레인스토밍을 통한 발견, 시나리오를 통한 발견,
경쟁사들의 서비스로부터 발견)

14. 프로젝트가 얼마나 크고 복잡하든 간에, 모든 종류의 요구사항을 작성하는데 적용되는 일반적 규칙 존재함
- 긍정적이어야 한다 (시스템은 ~할 수 있다 rather than 시스템은 ~할 수 없고, ~해서는 안 된다)
- 구체적이어야 한다 (미국 장애인 보호법 508조 준수 rather than 장애인 접근 가능해야 함)
- 주관적인 언어를 피해야 한다 (이 사이트는 트렌디하고 신선한 스타일 ?? 어떤 트렌드를 따랐는지,
어떤 객관적인 가이드라인를 준수하는지 설명해야함)
기능 세부 사양
콘텐츠 요구사항
- 콘텐츠의 특징 및 예상 규모
- 콘텐츠 요소에 대한 책임 및 역할 분담
- 콘텐츠 업데이트
- 위의 3가지를 수행하기 위해서 콘텐츠 목록(content inventory) 리스트 업 하는 것이 중요

15. 1. Interaction Design
-Conceptual Models
-Error Handling
2. Information Architecture
- Structuring Content
- Architectural Approaches
- Organizing Principles
- Language and Metadata
3. Team Roles and Process
The Structure Plane
Step 3 z

16. 인터랙션 디자인 정의: 사용자 행동을 어떻게 설명하고 시스템이 이를 어떻게 수용하고 반응할 것인가
개념모델
- 인터랙션 요소들이 작동하는 방식에 대한 사용자들의 인상을 conceptual model이라고 한다
- ex) 인터넷 쇼핑몰의 ‘장바구니’: 실생활에서의 ‘장바구니’ 물건들을 넣기도 하고 거기서 꺼내기도 함 -> 사용자
가 이를 통해 유추
- 실생활에서의 요소를 통해 사용자들이 작동원리 유추할 수 있게 하는 것도 중요하지만, 지나치면 안됨
인터랙션 디자인
산으로 간 Southwest Airlines 개념모델
(고객서비스 데스크/ 예약- 전화기 누름 / 예약시스템이 실제로 전화기 모양을 통해 표상되어야 하지 x)

17. 인터랙션 디자인 프로젝트에서 “사용자 에러”를 어떻게 처리할 것인가?에 관한 문제 매우 중요
에러처리 방안
- 에러들이 아예 불가능하게 시스템 설계 but 매우 어려움
- 에러가 일어나는 것을 어렵게 만드는 것
- 사용자들이 에러를 쉽게 시정할 수 있도록 하는 것
(Microsoft Word는 에러를 시정하려는 의도에서 많은 기능들 제공 -> 그러나 사용자들은
그것들을 재설정하다가 오히려 에러를 더 만들게 됨)
대표적인 방식
- 사용자들이 에러를 잘 알아차리게 하는 것 ”경고 메시지”
- 다시 원래 상태로 복구“UNDO”
에러처리

18. 인포메이션 아키텍처는 사용자들이 사이트 콘텐츠들 사이를
효율적으로 이동할 수 있게 해주는 구성 및 계획
Top-down Approach Bottom-up Approach
사이트 목표와 사용자 요구로부터
직접적으로 아키텍처 만들기
- Structure Plane으로부터 IA 구성
- 콘텐츠 자체의 중요한 세부 내용을 간과할 수 있음
콘텐츠 기능과 요구사항에 대한 분석을 토대로
상위 카테고리 묶음
- Scope plane으로부터 IA 구성
- 세부 내용에 집중하여 전체적인 변화 수용에 유연한 대처 x
Information Architecture

19. Information Architecture 구성 단위는 노드 (정보의 기본 단위)
1) 계층적 구조: 정보 노드들은 부모/자식 관계
2) 매트릭스 구조: 노드에서 노드로 “차원”을 따라 이동할 수 있음 (x,y,z축 기반 네비게이션에 유용,예- 색상, 크기별 브라우징)
3) 유기적 구조: 일관적인 패턴 없음. 노드들은 자유롭게 서로 연결되어 있음. 오락 또는 교육사이트에서 자유로운 형태의 탐색감 촉진
4) 순차적 구조: 노드의 흐름이 선형적 흐름을 가지고 있음. 서적, 글, 오디오, 비디오 등 순차적 양식으로 구성
Information Architecture
1) 2) 3) 4)

20. 정보 구조 안에서 노드들은 구성 원리에 따라 배치됨 - 어떤 노드를 묶고 분리시킬지는 product에 따라 적용
• 노드 묶기- 소비자/ 생산자 등의 주체 중심, 객체 중심으로 묶을 수도 있음. 다양한 방식으로.
• 정렬 방식- 뉴스 콘텐츠- 선형적 구조, 시의성은 현재 사건 보여주는 게 중요하기 때문에
구성 원리
- 사용자들이 IA 구조를 완벽하게 이해해도 사이트 설명, 레이블, 기타 용어들을 이해할 수 없으면 안됨
- 서비스 생산자와 사용자들이 언어를 일관된 수준에서 사용할 수 있도록 통제된 어휘(controlled vocab)
정의 필요
- controlled vocab-> 용어집(thesaurus) 및 용어들 간의 관계도를 만들어 콘텐츠에서 정의된 개념들의
전체 그림을 그려볼 수 있음.
사용 언어

21. - IA, 인터랙션 디자인을 위한 주요 문서화 툴:
다이어그램, 갈래와 묶음들로 표현 -> 요소간 상호관계 소통에 유용
- 명시적인 구조나 계획: 검사/수리 유연하게 대처, 구체적인 결과 제공,
사용자의 요구 충족에 적합.
팀 역할과 과정

22. 1. Interface Design
2. Navigation Design
3. Information Design
- wayfinding
4. Wireframes
The Skeleton Plane
Step 4 z

23. - 성공적인 인터페이스들은 사용자들이 중요한 부분 즉각적으로 알아차릴 수 있는 것
- 그렇지만 버튼을 크게 만들어서 사용자들이 잘 누를 수 있게 만드는 것이 해결책 x
- 성공적인 인터페이스 디자인을 하려면 인터페이스 디폴트 사항에 대해 주의깊게 생각할 것
ex) 체크박스, 라디오 버튼, 텍스트 필드, 드롭다운 리스트, 리스트 박스, 액션 버튼
어떤 요소들로 구성하여 디폴트 인터페이스를 구성할 것인가 -> 사용자들이 정보 인지/사용하는 방식 결정
인터페이스 디자인

24. 체크박스
라디오버튼
텍스트 필드
드롭다운 리스트
리스트 박스
액션 버튼
사용자들이 옵션들을 서로 독립적으로 선택할 수 있도록
상호 배타적인 선택사항 집합에서 한 가지 선택사항을 택할 수 있게
텍스트를 입력하는 곳
라디오 버튼과 동일한 기능을 제공
작은 공간을 차지하여 많은 선택사항들을 효율적으로 보여줌
체크박스와 동일한 기능 제공. 공간을 덜 차지(스크롤 되기 때문)
시스템이 특정 액션을 취할 수 있게 명령하는 기능을 함

25. 정보 공간의 입구와 출구, 복도, 계단 등을 그려볼 수 있도록 함
1. 사용자들에게 사이트의 한 지점에서 다른 지점으로 이동할 수 있는 수단을 제공해야 함
2. A-B페이지가 서로 어떻게 연결되어 있는지의 관계를 소통할 수 있어야 함
3. A-A’ 페이지와 콘텐츠들 사이의 관계를 소통시켜야 함.
네비게이션 디자인
-글로벌 네비게이션: 사이트 전체를 광범위하게 훑어볼 수 있게 해서 사이트 한쪽 끝에서 다른 끝으로 이동 쉽게 함
-로컬 네비게이션: 위계적인 아키텍쳐 내에서 부모 페이지, 형제 페이지, 자녀 페이지 접근
-보충적 네비게이션: 처음부터 다시 시작하지 않고 자신의 콘텐츠 탐색 초점을 변경할 수 있음
-맥락적 네비게이션: 텍스트 안에 하이퍼링크가 있는 경우
-친족관계 네비게이션: 사람들이 연관지어서 참고할 수 있는 서로 있는 다른 측면의 정보 제공
네비게이션 방식

27. - 정보 조각들을 엮거나 배열하여 사용자들의 사고를 더욱 명료하게
- wayfinding: 인포메이션 디자인 + 네비게이션 디자인
사용자들이 자신이 어디에 와 있고 어디로 갈 수 있으며, 어떤 선택을 해야
자신의 목표에 보다 가까이 이를 수 있는지에 대한 그림을 머리 속으로 신속하게 확보
인포메이션 디자인

28. - 인포메이션 디자인, 인터페이스 디자인, 네비게이션 디자인이 함께 하나의 통일되고 결속된 윤곽 형성
- 와이어프레임은 시각적 설계 작업과 사이트 구현을 위한 준거점으로서
기능하는 하나의 문서 속에 윤곽과 관련된 모든 의사 결정들을 담고 있다.
- 와이어프레임은 그 상세함에 있어 다양한 수준으로 제시될 수 있다. 친족관계네비
와이어프레임(Wireframe)

29. 1. Follow the Eye
2. Contrast and Uniformity
3. Internal and External Consistency
4. Color Palettes and Typography
5. Design Comps and Style Guides
The Surface Plane
Step 5 z

30. 시선의 흐름을 따를 것

31. - 무엇이 중요하고 중요하지 않은지 구별하기 위해서 대비 활용
- 통일성: 디자인이 혼란 없이 사용자와 효과적으로 소통할 수 있도록
- 통일성을 위한 그리드 레이아웃 : 편집디자인에서 나온 한가지 기법, 모든 요소들 위치는 통일되고 일관되게
대비와 통일성
대비 통일성

32. 내적 일관성: 사이트 여러 부분들 일관되게
외적 일관성: 다른 제품에서 활용된 것과 동일한 디자인 접근방식 반영하지 않는 경우 (브랜드 아이덴티티에 어긋남)
내적 일관성과 외적 일관성
컬러 팔레트와 타이포그래피
색상: 브랜드 아이덴티티와 긴밀하게 연결 (코카콜라 하면 떠오르는 색상)
타이그래피: 브랜드아이덴티티 표현할 수 있는 특정 타입페이스 사용 (애플, 폭스바겐, 런던 지하철등)

33. - 스타일 가이드: 모든 디자인 의사결정에 대한 명확한 문서화
사이트 모든 페이지에 영향을 주는 보편적인 기준, 가령 디자인 그리드, 컬러 팔레트,
타입페이스 기준, 로고 사용 지침 등…
- 문서화된 표준이 필요함 -> 미래의 디자인 의사결정에 도움
디자인 구성과 스타일 가이드

34. 1)전략
2)범위
3)구조
4)윤곽
5)표면
명료하게 정리된 전략이 좋은 사용자 경험의 토대가 된다
- 사이트의 목적(운영자는 이 사이트를 통해 무엇을 얻고자 하는가?)과
- 사용자의 요구(사용자들은 이 사이트를 통해 무엇을 얻고자 하는가?)를 토대로 설계
사이트의 목적과 사용자의 요구를 위하여 어떤 콘텐츠와 어떤 기능으로 제공할 것인지에 대한
구체적인 요구사항을 정리(ex. 커머스 사이트에서 used shipping address 를 저장하는 feature를 포함할 것인가 말 것인가)
요구사항에 우선순위를 설정하고 결속력있는 하나의 그림으로 구조화 (인터랙션 디자인, IA설계)
인터페이스의 구조를 잡을 수 있는 전체적인 레이아웃. 버튼, 컨트롤, 사진, 텍스트 덩어리 위치 배치
- 인터페이스 디자인: 인터페이스 구성요소에 배치
- 네비게이션 디자인: 정보 공간 이동 방식
- 인포메이션 디자인: 정보 제시방법
레이아웃 구조 표면에서 드러나는 이미지, 텍스트 등 사용자가 직접적으로 감각하면서 인터랙션할 수 있는 요소들에 해당
* 요약

35. 정보를 브라우징 하기 쉽게 펼쳐줌
생필품: 브랜드보다 어떤 상품이 있는지 파악하는지 더 중요
저관여:선택에 대한 비용 적음
이게 답인가? 정보를 작은 chunk로 나누어서 제공

36. Thank you!