elements of user experience
TRANSCRIPT
The Elements of User Experience : User-Centered Design for the Web and Beyond -Jesse James Garrett
/유현진 x 2015 Winter
The Elements of the User ExperienceUser-Centered Design for the Web and Beyond
UX디자인의 단계
구체적이고 명확하다
추상적이고 정형화되어 있지 않다STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
선택의 파급효과: 전략->범위->구조-> 윤곽-> 표면
사용자가 무엇을 원하고,
운영자는 서비스를 통해 무엇을 얻고자 하는가
기능 상세: 어떠한 기능이 필요한지 정의
콘텐츠 요구사항: 어떠한 콘텐츠들이 필요한지
인터랙션: 사용자-시스템 어떻게 반응할 것인가
정보구조 :정보를 이해할 수 있는 방식으로 구조화 시킴
인포메이션: 어떻게 이해시킬 것인가
인터페이스: 요소 배치
네비게이션: 요소를 통해 어떻게 이동하게 것인가최종물을 어떻게 느끼게 할 것인가
시각, 청각적으로 어떻게 등등 활용
+: content (valuable) , technology (adapt)
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
- business goal: 지나치게 구체적이지 않으면서 지나치게 일반적이지 않도록 균형 유지
- 브랜드 아이덴티티(brand identity): 사용자들의 first impression. 로고, 컬러 패턴,
타이포그래피 등의 요소를 포함
- 성공의 지표: 사용자 요구를 충족시키고 있는지 알아보기 위한 지표 (프로젝트 전 과정에 걸쳐
이루어지는 의사결정에 영향, 다음 프로젝트에도 영향, UX에 대한 구체적 근거 마련)
월간 사이트 방문 회수 측정을 통해 사이트가 얼마나 가치있는지 보여줌
Product Objectives
< User Segmentation >
- 구체적인 유저 니즈를 정의하기 위해서 우리는 유저가 누구인지 알아야 함
- 어떠한 특징을 가지는 유저들을 작은 그룹으로 분류
- 분류 방식:
• 인구학적 기준: 성별, 연령, 교육수준, 결혼여부, 소득 등
• Psychographic 프로파일 : 사용자의 태도나 인식
- user segmentation 해야하는 이유:
• 일반적으로 동일한 연령 집단, 동일한 거주지 등의 사람들은 유사한 태도를 보이는 경우가 많음
• 다른 특성을 나타내는 그룹은 다른 시각을 가지고 있음. 이에 따라 사용자 니즈도 달라짐.
User Needs > User Segmentation
- 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
- 퍼소나는 실제 사용자들의 니즈를 반영하기 위해 만들어진
허구적 인물로서, 사용자 경험 개발에 활용하기 위한 샘플로 활용됨
- 유저 리서치를 통해 퍼소나 도출할 수 있음
User Needs > Creating Personas
1. Functionality and Content
2. Defining Requirements
3. Functional Specifications
- Writing it down
4. Content Requirements
The Scope Plane
Step 2 z
아래 두가지 내용을 명시적으로 문서화할 것
(커뮤니케이션과 다음 목표 설정에 용이)
- 1) 무엇을 build 할 것인가
- 2) 무엇을 build 하지 않을 것인가
범위 정의를 위해 필요한 것
- 기능 세부 사양(functional specification) : 시스템이 수행해야하는 바를 설명
- 콘텐츠 요구사항(content requirements): 어떤 정보들이 포함되어야 할지
기능성과 콘텐츠
요구사항 수집하기
- 실제 사용자로부터 요구사항 수집 (survey, FGI, contextual Inquiry 등등)
- 조직 내부의 이해당사자들로부터 요구사항 수집
- 요구사항 만들어내기 (이해관계자들과의 브레인스토밍을 통한 발견, 시나리오를 통한 발견,
경쟁사들의 서비스로부터 발견)
프로젝트가 얼마나 크고 복잡하든 간에, 모든 종류의 요구사항을 작성하는데 적용되는 일반적 규칙 존재함
- 긍정적이어야 한다 (시스템은 ~할 수 있다 rather than 시스템은 ~할 수 없고, ~해서는 안 된다)
- 구체적이어야 한다 (미국 장애인 보호법 508조 준수 rather than 장애인 접근 가능해야 함)
- 주관적인 언어를 피해야 한다 (이 사이트는 트렌디하고 신선한 스타일 ?? 어떤 트렌드를 따랐는지,
어떤 객관적인 가이드라인를 준수하는지 설명해야함)
기능 세부 사양
콘텐츠 요구사항
- 콘텐츠의 특징 및 예상 규모
- 콘텐츠 요소에 대한 책임 및 역할 분담
- 콘텐츠 업데이트
- 위의 3가지를 수행하기 위해서 콘텐츠 목록(content inventory) 리스트 업 하는 것이 중요
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
인터랙션 디자인 정의: 사용자 행동을 어떻게 설명하고 시스템이 이를 어떻게 수용하고 반응할 것인가
개념모델
- 인터랙션 요소들이 작동하는 방식에 대한 사용자들의 인상을 conceptual model이라고 한다
- ex) 인터넷 쇼핑몰의 ‘장바구니’: 실생활에서의 ‘장바구니’ 물건들을 넣기도 하고 거기서 꺼내기도 함 -> 사용자
가 이를 통해 유추
- 실생활에서의 요소를 통해 사용자들이 작동원리 유추할 수 있게 하는 것도 중요하지만, 지나치면 안됨
인터랙션 디자인
산으로 간 Southwest Airlines 개념모델
(고객서비스 데스크/ 예약- 전화기 누름 / 예약시스템이 실제로 전화기 모양을 통해 표상되어야 하지 x)
인터랙션 디자인 프로젝트에서 “사용자 에러”를 어떻게 처리할 것인가?에 관한 문제 매우 중요
에러처리 방안
- 에러들이 아예 불가능하게 시스템 설계 but 매우 어려움
- 에러가 일어나는 것을 어렵게 만드는 것
- 사용자들이 에러를 쉽게 시정할 수 있도록 하는 것
(Microsoft Word는 에러를 시정하려는 의도에서 많은 기능들 제공 -> 그러나 사용자들은
그것들을 재설정하다가 오히려 에러를 더 만들게 됨)
대표적인 방식
- 사용자들이 에러를 잘 알아차리게 하는 것 ”경고 메시지”
- 다시 원래 상태로 복구“UNDO”
에러처리
인포메이션 아키텍처는 사용자들이 사이트 콘텐츠들 사이를
효율적으로 이동할 수 있게 해주는 구성 및 계획
Top-down Approach Bottom-up Approach
사이트 목표와 사용자 요구로부터
직접적으로 아키텍처 만들기
- Structure Plane으로부터 IA 구성
- 콘텐츠 자체의 중요한 세부 내용을 간과할 수 있음
콘텐츠 기능과 요구사항에 대한 분석을 토대로
상위 카테고리 묶음
- Scope plane으로부터 IA 구성
- 세부 내용에 집중하여 전체적인 변화 수용에 유연한 대처 x
Information Architecture
Information Architecture 구성 단위는 노드 (정보의 기본 단위)
1) 계층적 구조: 정보 노드들은 부모/자식 관계
2) 매트릭스 구조: 노드에서 노드로 “차원”을 따라 이동할 수 있음 (x,y,z축 기반 네비게이션에 유용,예- 색상, 크기별 브라우징)
3) 유기적 구조: 일관적인 패턴 없음. 노드들은 자유롭게 서로 연결되어 있음. 오락 또는 교육사이트에서 자유로운 형태의 탐색감 촉진
4) 순차적 구조: 노드의 흐름이 선형적 흐름을 가지고 있음. 서적, 글, 오디오, 비디오 등 순차적 양식으로 구성
Information Architecture
1) 2) 3) 4)
정보 구조 안에서 노드들은 구성 원리에 따라 배치됨 - 어떤 노드를 묶고 분리시킬지는 product에 따라 적용
• 노드 묶기- 소비자/ 생산자 등의 주체 중심, 객체 중심으로 묶을 수도 있음. 다양한 방식으로.
• 정렬 방식- 뉴스 콘텐츠- 선형적 구조, 시의성은 현재 사건 보여주는 게 중요하기 때문에
구성 원리
- 사용자들이 IA 구조를 완벽하게 이해해도 사이트 설명, 레이블, 기타 용어들을 이해할 수 없으면 안됨
- 서비스 생산자와 사용자들이 언어를 일관된 수준에서 사용할 수 있도록 통제된 어휘(controlled vocab)
정의 필요
- controlled vocab-> 용어집(thesaurus) 및 용어들 간의 관계도를 만들어 콘텐츠에서 정의된 개념들의
전체 그림을 그려볼 수 있음.
사용 언어
- IA, 인터랙션 디자인을 위한 주요 문서화 툴:
다이어그램, 갈래와 묶음들로 표현 -> 요소간 상호관계 소통에 유용
- 명시적인 구조나 계획: 검사/수리 유연하게 대처, 구체적인 결과 제공,
사용자의 요구 충족에 적합.
팀 역할과 과정
1. Interface Design
2. Navigation Design
3. Information Design
- wayfinding
4. Wireframes
The Skeleton Plane
Step 4 z
- 성공적인 인터페이스들은 사용자들이 중요한 부분 즉각적으로 알아차릴 수 있는 것
- 그렇지만 버튼을 크게 만들어서 사용자들이 잘 누를 수 있게 만드는 것이 해결책 x
- 성공적인 인터페이스 디자인을 하려면 인터페이스 디폴트 사항에 대해 주의깊게 생각할 것
ex) 체크박스, 라디오 버튼, 텍스트 필드, 드롭다운 리스트, 리스트 박스, 액션 버튼
어떤 요소들로 구성하여 디폴트 인터페이스를 구성할 것인가 -> 사용자들이 정보 인지/사용하는 방식 결정
인터페이스 디자인
체크박스
라디오버튼
텍스트 필드
드롭다운 리스트
리스트 박스
액션 버튼
사용자들이 옵션들을 서로 독립적으로 선택할 수 있도록
상호 배타적인 선택사항 집합에서 한 가지 선택사항을 택할 수 있게
텍스트를 입력하는 곳
라디오 버튼과 동일한 기능을 제공
작은 공간을 차지하여 많은 선택사항들을 효율적으로 보여줌
체크박스와 동일한 기능 제공. 공간을 덜 차지(스크롤 되기 때문)
시스템이 특정 액션을 취할 수 있게 명령하는 기능을 함
정보 공간의 입구와 출구, 복도, 계단 등을 그려볼 수 있도록 함
1. 사용자들에게 사이트의 한 지점에서 다른 지점으로 이동할 수 있는 수단을 제공해야 함
2. A-B페이지가 서로 어떻게 연결되어 있는지의 관계를 소통할 수 있어야 함
3. A-A’ 페이지와 콘텐츠들 사이의 관계를 소통시켜야 함.
네비게이션 디자인
-글로벌 네비게이션: 사이트 전체를 광범위하게 훑어볼 수 있게 해서 사이트 한쪽 끝에서 다른 끝으로 이동 쉽게 함
-로컬 네비게이션: 위계적인 아키텍쳐 내에서 부모 페이지, 형제 페이지, 자녀 페이지 접근
-보충적 네비게이션: 처음부터 다시 시작하지 않고 자신의 콘텐츠 탐색 초점을 변경할 수 있음
-맥락적 네비게이션: 텍스트 안에 하이퍼링크가 있는 경우
-친족관계 네비게이션: 사람들이 연관지어서 참고할 수 있는 서로 있는 다른 측면의 정보 제공
네비게이션 방식
- 정보 조각들을 엮거나 배열하여 사용자들의 사고를 더욱 명료하게
- wayfinding: 인포메이션 디자인 + 네비게이션 디자인
사용자들이 자신이 어디에 와 있고 어디로 갈 수 있으며, 어떤 선택을 해야
자신의 목표에 보다 가까이 이를 수 있는지에 대한 그림을 머리 속으로 신속하게 확보
인포메이션 디자인
- 인포메이션 디자인, 인터페이스 디자인, 네비게이션 디자인이 함께 하나의 통일되고 결속된 윤곽 형성
- 와이어프레임은 시각적 설계 작업과 사이트 구현을 위한 준거점으로서
기능하는 하나의 문서 속에 윤곽과 관련된 모든 의사 결정들을 담고 있다.
- 와이어프레임은 그 상세함에 있어 다양한 수준으로 제시될 수 있다. 친족관계네비
와이어프레임(Wireframe)
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
시선의 흐름을 따를 것
- 무엇이 중요하고 중요하지 않은지 구별하기 위해서 대비 활용
- 통일성: 디자인이 혼란 없이 사용자와 효과적으로 소통할 수 있도록
- 통일성을 위한 그리드 레이아웃 : 편집디자인에서 나온 한가지 기법, 모든 요소들 위치는 통일되고 일관되게
대비와 통일성
대비 통일성
내적 일관성: 사이트 여러 부분들 일관되게
외적 일관성: 다른 제품에서 활용된 것과 동일한 디자인 접근방식 반영하지 않는 경우 (브랜드 아이덴티티에 어긋남)
내적 일관성과 외적 일관성
컬러 팔레트와 타이포그래피
색상: 브랜드 아이덴티티와 긴밀하게 연결 (코카콜라 하면 떠오르는 색상)
타이그래피: 브랜드아이덴티티 표현할 수 있는 특정 타입페이스 사용 (애플, 폭스바겐, 런던 지하철등)
- 스타일 가이드: 모든 디자인 의사결정에 대한 명확한 문서화
사이트 모든 페이지에 영향을 주는 보편적인 기준, 가령 디자인 그리드, 컬러 팔레트,
타입페이스 기준, 로고 사용 지침 등…
- 문서화된 표준이 필요함 -> 미래의 디자인 의사결정에 도움
디자인 구성과 스타일 가이드
1)전략
2)범위
3)구조
4)윤곽
5)표면
명료하게 정리된 전략이 좋은 사용자 경험의 토대가 된다
- 사이트의 목적(운영자는 이 사이트를 통해 무엇을 얻고자 하는가?)과
- 사용자의 요구(사용자들은 이 사이트를 통해 무엇을 얻고자 하는가?)를 토대로 설계
사이트의 목적과 사용자의 요구를 위하여 어떤 콘텐츠와 어떤 기능으로 제공할 것인지에 대한
구체적인 요구사항을 정리(ex. 커머스 사이트에서 used shipping address 를 저장하는 feature를 포함할 것인가 말 것인가)
요구사항에 우선순위를 설정하고 결속력있는 하나의 그림으로 구조화 (인터랙션 디자인, IA설계)
인터페이스의 구조를 잡을 수 있는 전체적인 레이아웃. 버튼, 컨트롤, 사진, 텍스트 덩어리 위치 배치
- 인터페이스 디자인: 인터페이스 구성요소에 배치
- 네비게이션 디자인: 정보 공간 이동 방식
- 인포메이션 디자인: 정보 제시방법
레이아웃 구조 표면에서 드러나는 이미지, 텍스트 등 사용자가 직접적으로 감각하면서 인터랙션할 수 있는 요소들에 해당
* 요약
정보를 브라우징 하기 쉽게 펼쳐줌
생필품: 브랜드보다 어떤 상품이 있는지 파악하는지 더 중요
저관여:선택에 대한 비용 적음
이게 답인가? 정보를 작은 chunk로 나누어서 제공
Thank you!