elements of user experience

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!