경험디자인의 요소 - 제시 제임스 게러트

경험디자인의 요소 1장~2장(~50p)

 

[사용자의 경험이 왜 중요한가]

웹 시장이 커지면서 사용자 경험은 경쟁우위를 결정하는 요소가 됨. 양에서 질로 체계가 잡혀나감.

세련된 기술과 선전 메시지보다 중요한 것은 웹 사이트를 다시 찾도록 만드는 것 = 사용자 경험 > 전환율 지표 = 투자 수익.

 

[사용자 경험의 요소 살펴보기]

사용자 경험 문제를 해결하기 위한 5가지 단계 개념 틀. 전략, 범위, 구조, 윤곽, 표면의 중요도 순으로 사이트를 구축한다. 

표면 : 이미지와 텍스트

윤곽 : 버튼,탭,사진,텍스트 문단 등 요소 

구조 : 콘텐츠 요소들의 배치(어디에 있어야 하는가)

범위 : 내용과 기능, 특징 제공

전략 : 목표(제시하려고 하는 것. 사용자가 얻고자 하는 것)

5단계는 상호의존된다. 일관되게 정렬되지 않는다면 문제가 생길 수 있으므로 각 단계를 고려하며 작업해야 한다. 하지만 각 단계에서 취하는 선택이 그 아래 단계에 의해 제약이 되기 때문에 각 단계의 작업을 완벽히 끝내고 넘어가지 말고 (문제 발생) 각 단계별로 밸런스를 갖춰서 상호보완해 나가야 한다. 

 

 

 

내 생각(insignt)

웹 사이트를 디자인할 때 모두 고려했던 요소였지만 프로세스가 없었고 중요도에 따라 작업하지 못했다. 결과물의 완성도를 위해 안 것을 안 것에 그치지 말고 의견을 전달하고 적용할 필요성을 느꼈다. 

 

경험디자인의 요소 3장~4장(~96p)

 

웹의 발전 배경. 
웹의 시작은 하이퍼텍스트(hypertext)였다. 웹의 시초는 연구자들의 커뮤니티, 정보를 공유하기 위한 수단이었다. 이후 브라우저와 서버와 같은 진보된 기술과 특징들이 웹에 부가되며 보다 큰 규모의 공동체 안에서 자리매김하면서 정보 확산 뿐만 아니라 정보 수집, 조작 등 보다 복잡하고 뛰어난 특징들을 발전시켰다. 더욱 상호작용적으로 발전되면서 점점 사용자 입력에 반응해나갔다. 웹에 대한 상업적 관심의 대두로 어플리케이션(application)의 기능은 전자 상거래, 공동체 포럼, 온라인 뱅킹 등 광범위한 용도를 감당하게 되었다. 

최종적인 사용자 경험을 형성하는 두 가지 추가적인 요인. 
첫째는, 콘텐츠. 콘텐츠 관련 문제들은(구현 가능성) 사이트의 궁극적인 사용자 경험에 있어 본질적인 문제다.
둘째는, 기술. 많은 경우 사용자들에게 제공할 수 있는 경험의 성격은 대개 기술에 의해 결정된다. 기술이 발전하면서 점점 더 세련된 사용자 경험 접근 방법을 가능케 했다. (네비게이션 시스템). > 소프트웨어 인터페이스로서의 웹, 하이퍼텍스트 시스템으로서의 웹 > 웹의 성질, 이중성 > 조화를 이루어 전체로서의  사용자 경험을 형성한다.

3장과 4장은 사용자 경험 요소 중 가장 추상적이고 기초가 되는 단계, 전략 단계와 범위 단계에 대한 내용이다. 두 요소의 관점에서 어떤 요구사항과 문제가 있는지를 살펴본다.
전략 단계 - 사이트의 목적과 사용자의 요구
목적 : 우리는 이 사이트를 통해 무엇을 얻고자 하는가?
요구 : 우리의 사용자들은 이 사이트를 통해 무엇을 얻고자 하는가?
범위 단계 - 기능적 세부 사양과 콘텐츠 요구사항 > 소프트웨어 인터페이스로서의 웹과 하이퍼텍스트 시스템으로서의 웹을 나누는 구분 단계이다.

 

내 생각(insignt)

범위 단계에서의 콘텐츠와 기능은 정의하는 방식이 다를 뿐 의미에서 유사한 부분이 많아서 구별하기가 쉽지 않은 것 같다. 중요한 것은, 성공적인 사용자 경험을 만들어내려면 우연하게 결정되는 요소가 없도록 이해와 근거가 있어야 한다는 것이다. 추상적인 단계를 구체화해야하는 시점에서 무엇이 본질이고 사용자 중심 디자인을 위해 어떤 부분을 고려해야 하며 왜 그래야만 하는지 연결고리를 이해하는 과정이 필요하다.    

 

경험디자인의 요소 5장~6장(~153p)

5장과 6장은 비가시적인 요소를 구체적으로 다듬는 단계, 구조 단계와 윤곽 단계에 대한 내용이다.
 
[구조 단계(인터렉션 디자인과 인포메이션 아키텍처)]
>명확한 그림 그리기. 조금씩 구체화하며 세련되도록 다듬는 과정.
인터렉션 디자인과 인포메이션 아키텍처는 기술적인 것이 아닌 사람들이 생각하는 방식에 대한 이해에 관한 것. 
이해를 제품의 구조 안에 반영하여 성공적인 경험을 보장하는데 도움을 받을 수 있다.

- 인터렉션 디자인 : 있을 수 있는 사용자 행동을 설명하고 시스템이 그러한 태도를 어떻게 수용하고 반응할 것인가를 정하는 일에 관한 것.
- 인포메이션 아키텍처 : 사용자들이 사이트 콘텐츠들 사이를 효과적이고 효율적으로 이동할 수 있게 해주는 구성과 계획이다.

정보 구조의 기본 단위 = 노드(node). 
- 어떤 한 조각의 정보 또는 한 묶음의 정보에 해당될 수 있다. 
- 정보 구조 안에서의 노드들은 구성 원리에 따라 배치된다. 

규정되고 명시적인 구조 계획에 따라 구축된 사이트는 검사나 수리의 횟수를 덜 필요로 하고 그 소유자에게 구체적인 결과를 제공하며 사용자의 요구를 더 잘 충족시키는 경향이 있다. 

[윤곽 단계(인터페이스 디자인, 네비게이션 디자인, 인포메이션 디자인)]
윤곽단계에서는 비가시적인 구조를 구체적으로 만들어 줄 인터페이스, 네비게이션, 인포메이션 디자인 등의 구체적인 측면들을 밝힘으로써 그 구조를 더욱 세련되게 다듬는다.

사용자들이 무언가을 하는 능력을 제공하는 일에 관계된 것이라면 그것은 인터페이스 디자인이다.
사용자들에게 관념을 전달하는 일에 관계된 것이라면 그것은 인포메이션 디자인이다. 인포메이션 디자인은 태스크 지향적 소프트웨어 시스템과 정보 지향적 하이퍼텍스트 시스템 사이를 넘나드는데 인터페이스 디자인이나 네비게이션 디자인은 그것을 뒷받침해주는 좋은 인포메이션 디자인이 없다면 완전히 성공을 거둘 수 없기 때문이다.

웹에서의 인터페이스 디자인은 사용자들이 성취하고자 하는 태스크에 대해 올바른 인터페이스 요소들을 선택하는 작업이며, 그것들을 쉽게 이해하고 활용할 수 있게 페이지에 배치하는 작업이다. 

네비게이션 디자인은 다음과 같은 세 가지 목표를 달성해야 한다. 
1. 사용자들에게 사이트의 한 지점에서 다른 지점으로 이동할 수 있는 수단을 제공해야 한다.
2. 네비게이션 디자인은 그것이 담고 있는 요소들 사이의 관계를 소통해야 한다. 단지 링크 목록만을 제공하는 것만으로는 충분치 않다. 링크들은 서로 어떤 관계를 맺고 있는가? 어떤 것이 다른 것들보다 더 중요한가? 그것들 사이의 중요한 차이점은 무엇인가? 이러한 의사소통은 사용자가 어떤 선택을 내릴 수 있는지를 이해함에 있어 필수적인 것이다.
3. 네비게이션 디자인은 사용자가 현재 보고 있는 페이지와 그 콘텐츠들 사이의 관계를 소통시켜야 한다. 그것들 중 어떤 것이 내가 지금 보고 있는 것과 무슨 관계를 갖고 있는가? 이러한 점들을 일깨움으로써 사용자들이 어떤 가능한 선택이 자신이 추구하는 태스크나 목표를 가장 잘 지원할 수 있는지를 이해하는데 도움이 된다. 

물리적 공간에서는 사람들은 일정 정도 스스로 방향을 잡을 수 있는 내적인 감각에 의지한다. 우리 두뇌 속의 메커니즘은 우리가 물리적인 세계 안에서 길을 찾아 갈 수 있도록 도와준다. 그러나 정보 공간에서는 그러하지 못하다. 이 때문에 웹 사이트의 모든 페이지들이 사용자들에게 자신들이 사이트의 어디에 와있는지 그리고 그들이 어디로 갈 수 있는지를 명확하게 소통시키는 일이 중요하다. 

와이어프레임은 페이지의 모든 요소들에 대한 그리고 그것들이 결합되는 방식에 대한 뼈대이다. 와이어프레임은 시각적 설계 작업과 사이트 구현을 위한 준거점으로서 기능하는 하나의 문서 속에 윤곽과 관련된 모든 의사결정들을 담고 있다. 와이어프레임의 가치는 그것이 구조 단계에서의 세 가지 요소들, 즉 인터페이스 요소들의 선택과 배열을 통한 인터페이스 디자인핵심 네비게이션 시스템의 규명 및 확인을 통한 네비게이션 디자인, 정보 구성요소들의 우선순위 매김과 자리매김을 통한 인포메이션 디자인을 통합하는 방식이라는 점에 있다. 이 모든 세 가지 요소들을 하나의 문서로 합침으로써, 와이어프레임은 비주얼 디자인의 방향을 가리키는 기본 개념 구조를 토대로 하는 윤곽을 설정할수 있게 되는 것이다.

내 생각(insignt)
물리적 공간에서는 스스로 방향을 잡을 수 있는 감각이 어느 정도 있는 반면, 정보 공간에서는 그러하지 못한다는 사람의 특성을 고려하여 명확하게 소통시켜야 한다는 점, 구조의 본질은 기술적인 것이 아닌 사람들이 생각하는 방식에 대한 이해에 관한 것이라는 관점에서 바라보게 한다. 그들에게 어떻게 접근할 것인지 개념 모델에 대해 이론적인 부분들을 많이 다뤄놓았는데 이론만으로는 잘 와닿지 않는 내용들이 많아서 예시를 살피고 이해하는 과정이 더 필요할 것 같다.

 

경험디자인의 요소 7장~8장(~187p)

[표면 단계 : 비주얼 디자인]
콘텐츠, 기능, 미적 외관이 함께 어울려 나머지 네 단계의 그 모든 목표들을 충족시키는 최종 디자인. 윤곽이 배치의 문제를 다룬다면 표면 단계는 논리적인 배치 상태를 시각적으로 보여주는 문제를 다룬다. 배치가 어떻게 시각적으로 제시될 수 있는지 결정한다.
하위 단계들 각각에서 설정된 목표들을 이 디자인은 어떻게 효과적으로 뒷받침하는가? 
사이트의 외관이 아키텍처의 섹션들 사이의 구분을 불명료하거나 모호하게 만듦으로써 구조를 침해하고 있지는 않는가?
선택사항들을 명료하게 하는가?

구조를 강화시키는가?

브랜드 정체성을 소통시키는데 사용되는 수단 중 한 가지가 비주얼 디자인이다.

비주얼 디자인을 평가하는 방법
- 처음 눈길이 가는 곳은 어디인지
- 디자인의 어떤 요소들이 사용자의 첫 관심을 끄는지
- 사이트의 전략적 목표에 있어 중요한 것들로 눈길이 가는지
- 사용자들이 주의를 기울이게 되는 첫 번째 객체가 묵표로부터 다소 이탈된 것인지

대비와 통일성
비주얼 디자인에서 사용자의 관심을 끌기 위해 사용하는 주된 수단은 대비이다. 디자인 안의 요소들이 서로 다를 때 사용자들은 주의를 기울인다. 디자인에서 통일성을 유지하는 것은 디자인이 혼란 없이 또는 사용자가 매몰됨 없이 효과적으로 소통할 수 있도록 보장하는 중요한 부분이다. 통일성은 비주얼 디자인의 많은 측면에서 제 역할을 한다.

 

그리드 레이아웃
그리드 레이아웃은 웹에 나오는 내용을 효과적으로 수용하기 위한 편집디자인에서 나온 한 가지 기법이다. 레이아웃이 모든 부분에서 그리드를 사용하게 되지는 않지만 그리드 위에 놓여진 모든 요소들의 위치는 통일되고 일관되어야 한다. 하지만 췝 브라우저들이 텍스트 요소의 크기를 완벽하게 통제할 수 없기 때문에 그리드를 웹에 적용하는 것은 편집디자인에서처럼 간단하지는 않다.

내적 일관성과 외적 일관성
내적 일관성의 문제 - 사이트의 여러 부분들이 서로 다른 디자인 접근방법을 반영하는 경우
외적 일관성의 문제 - 사이트가 같은 조직 내의 다른 제품들에서 활용된 것과 동일한 디자인 접근방법을 반영하지 않는 경우
> 내적 일관성 문제에 대한 좋은 해결책은 사이트의 윤곽에 대한 이해에 기초를 두는 것.
인터페이스, 네비게이션, 인포메이션 디자인의 문제들을 통해 상이한 맥락에서 되풀이되어 발생하는 디자인 요소들을 판별해야 한다. 그럼으로써 맥락이 부여하는 큰 문제들에 의해 산만해지지 않고 우리가 해결하려는 작은 문제들을 더욱 명확하게 바라볼 수 있게 된다. 동일한 요소를 자꾸 반복해서 디자인하는 것이 아니라 그것을 따로 떼어내서 검토하고 한번만 디자인하며 사이트 전반에 걸쳐 그 디자인을 활용할 수 있게 된다. 그러한 접근방법으로 작업하려면 여전히 그 요소들이 나타나는 상이한 맥락들에 대한 우리의 작업을 점검해야 할 것이다. 둥근 모양의 중지 버튼은 결제 페이지에서는 잘 작동할 수 있지만 혼잡한 제품 선택 페이지에서는 그렇지 않을 수도 있다. 
**가장 좋은 접근방법은 각 요소들을 분리해내어 디자인하고 그것을 여러 맥락 속에서 시험해보고 그런 다음 필요한 대로 디자인 작업을 하는 것이다.
많은 디자인 요소들이 서로 별도로 만들어지겠지만 그것들은 여전히 함께 작동한다. 성공적인 디자인은 작고 잘 디자인된 객체들을 그저 단순히 모아놓은 것이 아니다. 오히려 그 객체들은 결속되고 일관적인 전체로서 작동하는 하나의 시스템을 형성해야 하는 것이다.
매체들 사이의 디자인에 일관성을 강화하는 것은 고객, 잠재 고객, 주주, 종업원, 우연한 관찰자 등과 같은 여러분의  대상계층에게 브랜드 아이덴티티에 대한 단일한 인상을 보여주는 일이다. 사람들은 명확하게 식별되는 정체성을 가진 회사에 긍정적으로 반응한다. 일관되지 못한 시각 스타일들은 기업 이미지의 명료성을 침해하고 사람들에게 아직은 제자리를 잡지 못한 회사라는 인상을 남길 뿐이다.

컬러 팔레트와 타이포그래피
색은 브랜드 정체성을 전달하는 가장 효과적인 방법들 중 하나이다. 어떤 브랜드들은 색상과 너무도 긴밀하게 연관되어 있어서 그 회사를 생각할 때마다 자동적으로 특정 색깔을 떠올리게 되어 있다. 그렇다고 해서 그 회사들이 다른 색상들은 배제시키고 그 색깔(특정 색깔)만 사용하는 것은 아니다. 핵심이 되는 브랜드 색깔은 통상 회사의 자료들 모두에게서 활용되는 보다 광범위한 컬러 팔레트에 속한 일부분이다. 회사의 표준적인 팔레트에 있는 색상들은 그것들이 서로 경합하지 않고 보완하면서 효과를 잘 발휘하기 때문에 특히 자주 선택된다.

대비와 통일성이 비주얼 디자인의 다른 영역에서 중요한 것처럼, 색상 팔레트를 만드는 일도 마찬가지로 결정적인 역할을 한다. 동일한 맥락에서 사용될 때 서로 밀접한 관계에 있지만 아주 같은 것은 아닌 색상들은 색상 팔레트의 효과성을 훼손한다. 
어떤 회사의 경우, 타이포그래피가 브랜드 아이덴티티에 있어 너무도 중요해 그들만의 독특한 타입페이스를 갖고 있기도 하다. 애플 컴퓨터 사에서부터 폭스바겐, 런던지하철에 이르는 많은 회사들이 자신의 홍보활동에 있어 더욱 강력한 정체성 감각을 연출하기 위해 독특한 타이포그래피를 활용해왔다. 그러나 이처럼 특이한 타입페이스를 갖지 않다 하더라도 글자의 형태는 여전히 정체성을 비주얼 디자인을 통해 전달하는 데 있어 효과적인 부분으로 기능한다. 

우리가 택하는 모든 디자인 의사결정에 대한 명확한 문서화는 스타일 가이드가 된다. 이것은 가장 큰 것에서부터 가장 작은 것에 이르기까지 비주얼 디자인의 모든 측면들을 규정한다. 스타일 가이드는 또한 사이트의 특정 부분이나 기능에 고유한 표준들을 포함할 수도 있다. 문서화는 많은 작업을 필요로 하지만 그렇게 해야하는 이유는 우리가 어떤 의사결정을 내린 이유는 시간이 지나면서 기억에서 사라져 버리기 때문이다. 문서화를 한다면 특정 환경에서 특정한 문제를 해결하기 위해 내려진 임기응변식의 의사결정도 미래의 디자인 작업을 위한 토대를 형성하기 위해 내려지는 의사결정으로 탈바꿈하게 되는 것이다. 디자인 시스템을 문서화해야 하는 또 다른 이유는 사람들은 결국 자신의 일을 그만둘 것이라는 점이다. 가장 최근의 표준들과 사례로 업데이트된 스타일 가이드가 없다면 그러한 지식을 상실하게 될 것이다. 사람들은 시간이 지나면서 입장을 바꾼다. 일이 이루어지는 방식과 그러한 의사결정의 이유들이 회사의 다른 부서들에서는 무시되거나 작업장에서 똑같은 문제가 반복적으로 대두될 때 조직 전체는 점점 더 일종의 기억상실증으로 고통을 겪게 된다. 스타일 가이드를 만드는 것은 또한 분권화된 조직 전체에 디자인 상의 일관성을 부여하는 데에도 도움이 된다. 프로젝트들의 요구사항을 고려하여 설계된 하나의 스타일 가이드는 일관된 전체로 보이도록 만드는 가장 효과적인 방법이기도 하다.

[요소들의 응용]
사용자 경혐 요소는 사이트가 크던 작던 관계없이 일정하게 유지된다. 5가지 요소들을 보았을 때 커다란 작업처럼 보이고 고도로 숙련된 전문가들이 필요할 것이라 생각들 수 있지만 꼭 그렇지는 않다. 소규모 팀에서도 더 좋은 결과를 만들어 낼 수 있다. 사용자 경험을 만들어 내는 과정에서 해결해야 할 작은 문제들이 얽히고 설킨 것을 보면 낙담할 수도 있다. 때로는 한 문제에 대한 한 가지 해결책이 이미 해결했다고 생각했던 다른 문제들을 재고하도록 만들기도 할 것이다. 많은 경우에 타협과 접근 방법들 사이에서 흥정이 필요할 수도 있다. 올바른 접근방법은 사용자 경험의 어떤 측면도 우연에 맡기지 않는다. 모든 의사결정을 의식적으로 신중하게 하며 현재 문제가 되고 있는 기초적인 이슈에 대한 여러분의 이해를 토대로 의사결정 해야 한다.
사용자 경험 요소를 지향하는 시각이 없는 상태에서 이루어지는 사용자 테스트는 잘못된 문제제기를 낳는 것으로 끝날 수도 있다. 잘못된 답을 초래할 수 있는 것이다. 문제가 무엇인지를 정확하게 아는 것이 중요한 문제를 놓치지 않게 하는데 결정적으로 중요하다.
사용자들의 요구를 드러내는데 있어 그저 단순하게 사용자들에게만 의존해서는 안 된다. 사용자 경험을 창출하는데 있어서 사용자들이 스스로 알고 있는 것보다 그들의 요구를 더욱 잘 이해하는 것이다. 테스트는 사용자의 요구를 이해하는 일을 도와줄 수 있지만 그러한 목적을 달성하는데 도움을 주는 많은 수단들 중 한 가지에 불과할 뿐이다.

사용자 경험을 염두에 두고 접근하는 것 = 하나의 자산이 되는 사이트를 갖게 되는 것

사이트에서 사용자가 경험하는 모든 것들을 의식적이고 명확한 의사결정의 결과로 만들면 전략적 목표와 사용자 요구 모두를 충족시킬 수 있게 된다.
사려깊고 신중한 디자인 의사결정은 단기적으로는 많은 시간을 필요로 하지만 장기적으로는 훨씬 더 많은 시간을 절약할 수 있게 해준다. 

내 생각(insignt)
비주얼 디자인이 평소 하는 업무다 보니 공감 가는 부분과 되새기고 싶은 부분들을 발췌해 보았다. 마지막 장이기도 하면서 어려운 이론에 복잡한 내 마음을 대변하는 것처럼 마지막 메시지는 너무 어렵게 생각하지 말고, '사용자 경험 요소를 지향하는 시각을 길러라'라고 접근법을 말해주었다. 평소에 자연스럽게 하는 과정 속에서 문제 제기를 해보며 그것을 하는 이유, 과정들을 이해하는 더 넓은 관점을 가지라는 의미인 것 같다. 소규모의 팀에서도 좋은 결과를 만드는 key는 의사결정을 의식적으로 분명하게 하는 것(의사결정력), 사용자의 요구사항을 잘 이해할 수 있는 시각적 능력을 앞으로도 꾸준히 학습과 실전을 통해 길러나가야겠다.