경험디자인의 요소 : 성공하는 웹사이트를 위한 사용자 중심 디자인
볼만한 것들/책 2008/07/17 18:07 경험디자인의 요소
: 성공하는 웹사이트를 위한 사용자 중심 디자인
- 제시 제임스 게러트 지음 (한솜미디어)
The Elements of User Experience
: User-Centered Design for the Web
- Jesse James Garrett (published by Pearson Education)
사용자 경험 디자인 프로세스는 전략-범위-구조-윤곽-표면 5단계로 이루어져 있다. 각 단계는 task 를 중심으로 하는 S/W 인터페이스로서의 웹과 information 을 중심으로 하는 하이퍼텍스트 정보 공간으로서의 웹이라는 두 가지 성질에 따라 나뉘게 되고 각 단계의 두 가지 성질이 조화를 이루면서 사용자 경험을 형성한다. 사용자 경험을 디자인하면서 가장 중요한 것은 각 단계에서 내리는 선택은 모두 명시적인 이해를 가져야 한다는 것이고 이를 위해서 각 단계에서는 필요한 문서를 산출하여 프로젝트 팀원끼리 공유하는 것이 필요하다.
1. 전략 (strategy)
: 사이트가 제시하고 싶어하는 전략적 목표에 대한 명시적인(explicit) 이해가 필요하다.
* 문서 : 전망, 전략 문서
- 사용자의 요구 (User needs)
: 사용자 세분화 (User Segmentation), 사용자 조사연구 (User Research) 등을 통하여 분석
- 사이트의 목적 (Site Objectives)
: Brand Identity, Success Metrics 등이 필요
2. 범위 (scope)
: 사용자의 요구와 사이트의 목적을 어떤 컨텐츠와 기능으로 제공할 것인지를 정의한다.
범위를 정의하기 위해서는 문서화된 요구사항으로 프로젝트의 목표가 모든 사람에게 공유되어야 한다.
문서화된 요구사항을 관리함으로써 일정에 따라 진행될 요구사항이 명확해진다.
그리고 목표와 요구 사항 사이에는 일대 다 관계가 대부분이므로 요구사항의 범위를 결정하려면 기술이나 시간과 같은 제약 유형을 고려해야만 한다.
* 문서 : 콘텐츠 목록
- 기능적 세부사항 (Functional Specification)
: 구체적이고 주관성을 배제해야한다.
- 콘텐츠 요구사항 (Content Requirements)
: 목적을 분명히 인지하고 규모를 정해야 하며, 각 요소들의 책임자를 분명히 하고 계속적인 업데이트를 지원해야 한다. 콘텐츠 목록 (Content Inventory) 필요
3. 구조 (structure)
: 페이지의 흐름. 인터페이스 요소가 아닌 실제 목록들의 위치 정의. 사이트의 목적과 사용자의 의도에 적합한 구조를 만드는 것이 중요하다.
세부 명칭과 메타데이터 정의를 통해 아키텍쳐를 문서화할 수 있고 효과적인 툴이 바로 다이어그램(visual vocabulary).
* 문서 : 다이어그램 아키텍쳐 (Visual Vocabulary)
- 인터렉션 디자인
: 시스템을 사용자가 배우고 이해하는 관계에서 어떤 사용자도 시스템을 이용할 수 있는 디자인으로 바뀜.
- 인포메이션 아키텍쳐
: 정보에 접근하는 방식에 따라서 정보의 최소단위 노드로 구조를 정의한다. (순차적, 계층적, 유기적, 메트릭스)
4. 윤곽 (skeleton)
: 인포메이션 디자인, 인터페이스 디자인, 네비게이션 디자인이 통일되고 결속된 윤곽을 형성하여 페이지 레이아웃을 만들게 된다. 페이지 레이아웃은 요소들의 배치를 통해 이뤄진다.
* 문서 : 와이어프레임
- 인터페이스 디자인
: 인터페이스 요소들의 위치 정의. 사용자들이 무언가 하는 능력 제공.
사용자들이 성취하고자 하는 태스크에 대해 올바른 인터페이스 요소를 선택하도록 각 페이지를 구현.
어떤 기능들이 어떤 페이지에 있을지는 구조 단계에서 인터렉션 디자인으로 결정할 문제
- 네비게이션 디자인
: 정보 공간을 보여주는 방식에 따른 인터페이스 디자인. 사용자들이 어떤 장소로 가는 능력 제공
- 인포메이션 디자인
: 인터페이스와 네비게이션을 가로지르는 정보 제시방법. 사용자들에게 관념을 전달
인터페이스가 사용자로부터 정보 수집, 정보를 사용자에게 소통시켜야 하는 역할.
전통적으로 에러메시지가 그 예.
5. 표면 (surface)
: 윤곽에서 정해진 논리적 배치 상태를 시각적으로 보여준다.
* 문서 : 스타일 가이드
- 비쥬얼 디자인
: 인터페이스, 네비게이션, 인포메이션 문제들을 통해서 윤곽을 확실히 이해함으로써 디자인에 내적 일관성을 부여하고 온오프라인 스타일을 조화시킴으로써 외적 일관성을 부여한다. 색깔, 타이포 등으로 브랜드 아이덴티티를 나타낼 수 있다. 와이어프레임과 디자인구성 (design comp) 은 일대일 대응이 되어야 한다.
각 단계별 연관관계에 의해 다음 단계의 선택 범위가 정해진다.
다음 단계의 선택으로 하위 단계에 대한 재평가도 이루어지므로 양방향소통이 가능하다.
사용자 경험 창출을 위해 이해해야할 질문
1. 해결하려는 문제를 이해하라.
: 표면, 윤곽, 구조....어떤 것이 문제인가?
2. 문제 해결책이 가져다줄 결과를 이해하라.
: 어떤 파급 효과가 있을 것인가?
자세히 정리해 놓은 이유는...
바로바로 내가 책을 빌려서 읽은지라..
나쁜 기억력에 까먹어 버릴까봐....- _-;
전체적으로 프로세스에 대한 구분 및 정의도 실제로 적용해보고 싶지만 전체적으로 계속 강조하고 있던 부분은 앞서도 강조한 것처럼 명시적인 이해의 공유가 아닐까 한다.
팀원들끼리 해야할 일에 대해 문서를 만드는 작업도 그런 차원에서이다.
다음 프로젝트에서는 이런 부분에서 적극 적용해보고 싶은 마음이다.
같은 페이지에 있던 문구를 인용하며 마무리~
: 성공하는 웹사이트를 위한 사용자 중심 디자인
- 제시 제임스 게러트 지음 (한솜미디어)
The Elements of User Experience
: User-Centered Design for the Web
- Jesse James Garrett (published by Pearson Education)
정보를 그저 그곳에 놓아두는 것만으로는 충분하지 않다.사용자가 원하는 좋은 정보를 모두 모아서 차려놓아도 사용자가 이해하려면 분명 정보를 보여주는 세련된 방법이 필요하다. 그 방법 중 가장 사용자가 이해하기 편한 방법이 사용자 경험이라는 말로 표현될 수 있고 이런 사용자 경험을 정의하기 위해서 이 책에서는 단계별로 사용자 경험을 형성하는 프로세스를 소개한다.
정보는 사람들이 그것을 흡수하고 이해하는 것이 쉽도록 제시되어야 한다.
사용자 경험 디자인 프로세스는 전략-범위-구조-윤곽-표면 5단계로 이루어져 있다. 각 단계는 task 를 중심으로 하는 S/W 인터페이스로서의 웹과 information 을 중심으로 하는 하이퍼텍스트 정보 공간으로서의 웹이라는 두 가지 성질에 따라 나뉘게 되고 각 단계의 두 가지 성질이 조화를 이루면서 사용자 경험을 형성한다. 사용자 경험을 디자인하면서 가장 중요한 것은 각 단계에서 내리는 선택은 모두 명시적인 이해를 가져야 한다는 것이고 이를 위해서 각 단계에서는 필요한 문서를 산출하여 프로젝트 팀원끼리 공유하는 것이 필요하다.
1. 전략 (strategy)
: 사이트가 제시하고 싶어하는 전략적 목표에 대한 명시적인(explicit) 이해가 필요하다.
* 문서 : 전망, 전략 문서
- 사용자의 요구 (User needs)
: 사용자 세분화 (User Segmentation), 사용자 조사연구 (User Research) 등을 통하여 분석
- 사이트의 목적 (Site Objectives)
: Brand Identity, Success Metrics 등이 필요
2. 범위 (scope)
: 사용자의 요구와 사이트의 목적을 어떤 컨텐츠와 기능으로 제공할 것인지를 정의한다.
범위를 정의하기 위해서는 문서화된 요구사항으로 프로젝트의 목표가 모든 사람에게 공유되어야 한다.
문서화된 요구사항을 관리함으로써 일정에 따라 진행될 요구사항이 명확해진다.
그리고 목표와 요구 사항 사이에는 일대 다 관계가 대부분이므로 요구사항의 범위를 결정하려면 기술이나 시간과 같은 제약 유형을 고려해야만 한다.
* 문서 : 콘텐츠 목록
- 기능적 세부사항 (Functional Specification)
: 구체적이고 주관성을 배제해야한다.
- 콘텐츠 요구사항 (Content Requirements)
: 목적을 분명히 인지하고 규모를 정해야 하며, 각 요소들의 책임자를 분명히 하고 계속적인 업데이트를 지원해야 한다. 콘텐츠 목록 (Content Inventory) 필요
3. 구조 (structure)
: 페이지의 흐름. 인터페이스 요소가 아닌 실제 목록들의 위치 정의. 사이트의 목적과 사용자의 의도에 적합한 구조를 만드는 것이 중요하다.
세부 명칭과 메타데이터 정의를 통해 아키텍쳐를 문서화할 수 있고 효과적인 툴이 바로 다이어그램(visual vocabulary).
* 문서 : 다이어그램 아키텍쳐 (Visual Vocabulary)
- 인터렉션 디자인
: 시스템을 사용자가 배우고 이해하는 관계에서 어떤 사용자도 시스템을 이용할 수 있는 디자인으로 바뀜.
- 인포메이션 아키텍쳐
: 정보에 접근하는 방식에 따라서 정보의 최소단위 노드로 구조를 정의한다. (순차적, 계층적, 유기적, 메트릭스)
4. 윤곽 (skeleton)
: 인포메이션 디자인, 인터페이스 디자인, 네비게이션 디자인이 통일되고 결속된 윤곽을 형성하여 페이지 레이아웃을 만들게 된다. 페이지 레이아웃은 요소들의 배치를 통해 이뤄진다.
* 문서 : 와이어프레임
- 인터페이스 디자인
: 인터페이스 요소들의 위치 정의. 사용자들이 무언가 하는 능력 제공.
사용자들이 성취하고자 하는 태스크에 대해 올바른 인터페이스 요소를 선택하도록 각 페이지를 구현.
어떤 기능들이 어떤 페이지에 있을지는 구조 단계에서 인터렉션 디자인으로 결정할 문제
- 네비게이션 디자인
: 정보 공간을 보여주는 방식에 따른 인터페이스 디자인. 사용자들이 어떤 장소로 가는 능력 제공
- 인포메이션 디자인
: 인터페이스와 네비게이션을 가로지르는 정보 제시방법. 사용자들에게 관념을 전달
인터페이스가 사용자로부터 정보 수집, 정보를 사용자에게 소통시켜야 하는 역할.
전통적으로 에러메시지가 그 예.
5. 표면 (surface)
: 윤곽에서 정해진 논리적 배치 상태를 시각적으로 보여준다.
* 문서 : 스타일 가이드
- 비쥬얼 디자인
: 인터페이스, 네비게이션, 인포메이션 문제들을 통해서 윤곽을 확실히 이해함으로써 디자인에 내적 일관성을 부여하고 온오프라인 스타일을 조화시킴으로써 외적 일관성을 부여한다. 색깔, 타이포 등으로 브랜드 아이덴티티를 나타낼 수 있다. 와이어프레임과 디자인구성 (design comp) 은 일대일 대응이 되어야 한다.
각 단계별 연관관계에 의해 다음 단계의 선택 범위가 정해진다.
다음 단계의 선택으로 하위 단계에 대한 재평가도 이루어지므로 양방향소통이 가능하다.
사용자 경험 창출을 위해 이해해야할 질문
1. 해결하려는 문제를 이해하라.
: 표면, 윤곽, 구조....어떤 것이 문제인가?
2. 문제 해결책이 가져다줄 결과를 이해하라.
: 어떤 파급 효과가 있을 것인가?
자세히 정리해 놓은 이유는...
바로바로 내가 책을 빌려서 읽은지라..
나쁜 기억력에 까먹어 버릴까봐....- _-;
전체적으로 프로세스에 대한 구분 및 정의도 실제로 적용해보고 싶지만 전체적으로 계속 강조하고 있던 부분은 앞서도 강조한 것처럼 명시적인 이해의 공유가 아닐까 한다.
팀원들끼리 해야할 일에 대해 문서를 만드는 작업도 그런 차원에서이다.
다음 프로젝트에서는 이런 부분에서 적극 적용해보고 싶은 마음이다.
>> 쓸데없는거보기
같은 페이지에 있던 문구를 인용하며 마무리~
성공적인 사용자 경험을 만들어내는 일은, 여러분이 내리는 모든 선택에 대해 명시적으로 정의된 이유를 갖출 것을 요구한다.* 책 빌려주신 ontestone 님 의 책 리뷰 (실버라이트 쪽으로 훈스닷넷에서 활발히 활동중이신 분입니다.)
이올린에 북마크하기
이올린에 추천하기