《오래가는 UX 디자인》 Chapter 4~5 NOTE

 

《오래가는 UX 디자인》 반준철 저 (2013.2)

Chapter 4 NOTE

4장은 인터랙션 기반 설계에 관한 내용이다.

심성 모형과 개념 모형에 관한 내용, 스마트폰 OS별 개념 모형, 메타포 사용에 관한 것, 상황에 적합한 핵심 정보 노출에 관한 내용이 소개된다.
윈도우XP, 윈도우7, 안드로이드와 iOS의 볼륨조절 디자인에 관한 이야기, 복잡하고 혼란스러운 인터페이스가 얼마나 단순해질 수 있는지 보여주는 예로 인터넷 익스플로러 변천사가 소개된다.

 

 

01 · 개념 모형과 심성 모형

4장에서 기억에 남는 것은 재미있는 예제를 통해 개념 모형과 심성 모형에 대해 설명한 부분이다.
화장품에 대한 남자의 심성 모형, 자동차에 대한 여자의 심성 모형을 예로 들며 일반적으로 사람들은 자신이 평소 생활하는 데 필요한 수준에서 심성모형을 만들고 대략의 모형을 기준으로 제품을 이해한다고 한다. (193~194)
이러한 사용자 심성 모형의 특성을 반영시킨 사례로 네이버 ‘자동차 스마트파인더’를 소개한다.

디자이너의 개념 모형에 맞게 사용자 심성 모형의 구조를 만들 것을 강요하지 않고 사용자가 쉽게 이해할 수 있는 개념 모형을 제공하는 것이 배우기 쉽고 쓰기 편한 제품을 만드는 중요한 방법이다. _197

엠블럼과 외형을 기준으로 자동차를 검색하는 화면은 제조사와 차종을 기준으로 검색하는 일반 검색을 대략의 심성 모형을 가진 사용자가 쉽게 사용할 수 있게 확장한 것으로 볼 수 있다. _198

 

노먼 교수의 책에서 처음 접한 이 개념들은 나는 사실 간단하게 이해했었다. 노먼 교수의 책에서 더 복잡하게 설명하려고 하지도 않았던 것 같다. 내가 이해한 바로는 개념모형은 디자이너가 제품을 만들 때 설계한 모형이고, 심성모형은 사용자가 제품을 사용하면서 형성한 모형, 이것 이었다. 그런데 이 책에서 개념 모형과 심성 모형, 시스템 이미지를 함께 설명해서 좀 더 이해의 폭이 넓어졌다.

심성 모형은 사람이 자기 자신, 주변 사람, 환경, 사용하는 제품 등을 해석하려고 만드는 모형을 뜻하며, 단순히 사용자의 생각을 해석하는 관점을 넘어 사람이 생각하고 행동하는 구조를 설명하는 큰 의미의 용어다.

사람은 스스로 경험해서 심성 모형을 형성하기도 하지만, 교육 기관에서 배우거나 다른 사람, 시스템, 안내문 등의 지시로 심성 모형을 형성하기도 한다. 사람들은 제품을 이용할 때 겉으로 보이는 제품의 인터페이스와 인터페이스를 조작했을 때의 행위 결과를 지각하고 해석해서 적절한 심성 모형을 만든다.

개념 모형은 심성 모형의 한 부분으로 사람이 시스템과 제품 등의 개념을 이해하려고 머릿속에 만드는 모형이다.

개념 모형은 좀 더 명확하게 정리된 모형을 이야기하며, 사용자의 머릿속에 형성된 모호한 모형은 주로 심성 모형이라고 이야기한다.

디자이너의 개념 모형을 실제 시스템으로 표현한 결과물을 시스템 이미지라고 하는데, 사람들은 시스템 이미지를 통해서 심성 모형을 형성한다. _199

 

 

02 · 구현 모형

또한 이 책에서는 디자인 모형(디자이너의 개념 모형), 사용자 모형(사용자의 심성 모형), 시스템 이미지에 ‘구현 모형’ 이라는 개념을 덧붙여 소개한다.

시스템은 물리적인 부품, 장치, 소프트웨어 코드 등으로 이루어지는데 이렇게 개발자 관점에서 시스템의 기술적 구현 방식을 설명하는 모형을 구현 모형 이라고 한다. _205

 

디자인 모형이 구현 모형에 가까울수록 사용자는 제품을 사용할 때 시스템 구조를 더 정확하게 알아야 하며, 디자인 모형과 사용자 모형의 차이 때문에 적절한 심성 모형을 형성하기 어렵다.

디자이너가 복잡한 구현 모형을 사용자에게 친숙한 구조의 디자인 모형으로 제시하면, 사용자는 쉽게 심성 모형을 형성하고 시스템을 사용할 수 있을 것이다. (예, 자동차 스마트파인더) _206

 

네이버 자동차 스마트파인더 사례를 읽은 후 웹사이트를 찾아보았으나 현재는 서비스가 종료 되었다. 디자이너가 사용자의 심성 모형을 이해하려고 애쓴 정말 잘된 사례인 것 같은데 서비스가 종료되어 아쉽다. 

*3.8 내용 추가
자동차 스마트파인더 서비스는 종료되었지만 네이버 자동차 웹페이지에서 엠블럼 검색은 가능하다.

 

 

 

Chapter 5 NOTE

5장은 인터랙션 구조 설계에 관한 내용이다.

 

01 · 복잡한 구조를 단순화 하라

이 부분에서 휴대용 음악 재생기 시장의 소니와 애플 이야기가 흥미로웠다. 
여기서 말하는 ‘복잡한 구조를 단순화 하라’는 것의 의미는 경영진의 취향 또는 협력업체의 정책 등 제품 외적인 제약 사항과 정책으로 인해 작업 구조가 복잡해진다면 다른 일에 앞서 먼저 그것을 단순하게 하라는 뜻이다.

기기 제조사이면서 음반 배급사였던 소니는 음원 복제 방지를 위해 복잡한 디지털 음반 판매 정책과 제약을 가지고 서비스를 운영했었다. 그 때문에 기기 사용이 매우 복잡해 졌고, 그로 인해 애플에 밀렸다고 한다.

애플은 소니와 다르게 음악 판매 정책을 단순화하는데 엄청난 노력을 기울였다고 한다. 음원 복제 문제를 음원 파일 자체에 복제방지 장치를 적용하는 대신(이 장치 때문에 다운로드 및 재생이 불편했다고 한다) 대신에 파일 관리 프로세스를 이용해 다른 기기로 파일이 복사되는 작업 자체를 불가능하게 함으로써 복제 문제를 해결하고 다운로드 및 재생을 편리하게 만들었다. (234, 294)

애플도 처음에는 음원에 복제 방지 장치를 적용했었다. 그러나 문제점이 드러나자 복제 방지라는 목적을 달성하기 위한 방법을 다른 관점에서 찾아내 바꿨다. 음악을 다운로드 받고 듣는 일을 할 때 그 과정의 복잡함을 사용자가 온몸으로 겪어내게 한 것이 소니의 방식이라면 사용자는 복잡한 부분은 알 필요 없이 음악을 다운로드 받아 듣는 일을 최대한 간편하게 하는 것에 초점을 맞춘 것이 애플이 개선한 방식이다.

문제해결 과정에서 복제 문제를 주장하는 음반사를 설득하고, 단순한 가격 체계를 만드는 등 복잡한 제약과 정책을 단순하게 만드는 일을 한 것이다.

 

애플이 휴대용 음악 플레이어 시장의 승자가 될 수 있었던 이유는 복제 방지 장치 제거 사례처럼 복잡한 정책을 간단하게 만들려는 노력을 바탕으로 단순하면서 사용하기 쉬운 제품을 만들어 냈기 때문이다. _294

 

이런 노력이 애플 제품은 쉽다는 이미지와 편한 음악 감상의 사용자 경험을 만들어낸 것 아닐까?

 

 

02 · 복잡도를 유지하며 혼란스러움 통제하기

대부분의 제품에서 정말로 문제가 되는 것은 기능의 수가 아니고 인터페이스의 혼란스러움이다. 단순히 기능의 수를 줄이려는 관점에서 노력하기보다 혼란스러움을 통제하는 관점에서 기능을 생각하는 것이 좋다. _319

제품의 복잡도를 끝없이 낮출 수는 없다. 어느 선 이상으로 복잡도를 낮추면 복잡도는 더 이상 낮아지지 않는다. 그 다음에 할 수 있는 일은 그 정도 복잡도를 감수하면서 그것을 혼란스럽지 않게 제공하는 방법을 찾는 것이다. 마이크로소프트는 복잡한 툴바와 메뉴 때문에 생긴 혼란스러움을 리본 메뉴로 해결했고, (…) 애플은 기기 외부의 복잡한 인터페이스를 터치스크린 안으로 넣어 화면 안에서 최적화하면서 기존 제품의 혼란스러움을 해결했다. _320

복잡도를 유지하면서 제품을 사용하기 쉽게 만드는 한 가지 방법은 그 복잡도를 다른 곳으로 이동시키는 것이다. _320

오피스 2007은 필요할 때에만 필요한 것을 보여주는 방식으로 설계되어서 사람이 느끼는 인터페이스의 체감적인 복잡도가 상당히 줄어들었다. _324

 

단순화 하는 것의 진짜 의미를 조금은 이해하게 되었다.

 

복잡한 제품의 동작을 사람이 쉽게 이해해서 조작하게 하는 방법을 찾으면서 더 나은 인터페이스 요소가 만들어지고 그것이 널리 퍼져서 다시 관례가 되고 표준이 되는 것이다. 이런 과정이 반복되면서 점점 제품은 사용하기 쉬워지고 업계 전반의 인터페이스 디자인의 수준이 높아진다. _334

앞서 가는 제품에서 좋은 인터페이스 방식을 새로 도입하고 사람들이 거기에 익숙해지면 후발 제품들은 훨씬 적은 위험을 감수하면서 비슷한 인터페이스를 도입 할 수 있다. _335

기존에 잘 구성된 인터페이스 요소를 응용할 때 겉모습만 비슷하게 따라 해서는 안 된다. 그런 인터페이스가 왜 만들어졌으며, 인터페이스를 구현하는데 뒷받침되고 고려해야 할 점이 무엇인지 충분히 고민한 후에 해당 요소를 적용해야 한다. (예, 실패 사례 – 스프린트비트의 플레이리스트 매니저) _336

 

 

03 · 일관성과 신뢰성을 제공하라. 

일관성의 3가지 관점에 대해 설명하고, 모바일 기기가 일상화되면서 제품에 필요한 일관성에도 변화가 생기고 있다고 한다. (338)

 

기능적 일관성

동작 방식, 동작의 의미, 기호의 의미 등을 일관되게 사용하는 것을 말한다. _339

예를들어 마우스의 동작을 왼쪽 버튼은 선택, 오른쪽 버튼은 메뉴, 스크롤 휠은 스크롤로 정의 해서 사용하면 이는 일관성 있는 인터페이스다. 하지만 같은 프로그램의 일부 기능에 스크롤 휠을 확대 축소 등으로, 왼쪽 버튼을 다른 기능으로 동작하게 한다면 이는 일관성 없는 인터페이스라고 할 수 있다. _338

 

맥락적 일관성

주변 환경과 사용 맥락의 변화에 따라서 의도한 일정한 결과를 내는 것을 의미한다. 최근 모바일 환경에서는 주변 상황과 사용 맥락이 변화하는 경우가 많으므로 맥락적 일관성이 중요한 의미가 있다.

• 내가 이동하는 지역에 따라 달라지는 날씨 정보 : 시스템은 주기적으로 사용자의 위치를 파악해서 해당 지역의 도시 이름을 보여주고, 그 도시의 날씨를 알려준다. _341
• 보조 마이크 : 소음이 발생하는 주변 상황과 무관하게 적절한 통화품질을 유지하게 하는 맥락적 일관성을 보장한다. _342
• 조도 센서 : 주변의 밝기를 인식하고 그에 따라 화면 밝기를 자동으로 조정해주므로 사용자는 언제나 적당한 밝기의 화면을 볼 수 있다. _343

 

인지적 일관성

기술의 발전에 따라 일관성의 관점은 지금까지 중요하게 생각된 기능적 일관성을 넘어 맥락적 일관성을 생각하게 되었고, 최근에는 사람이 느끼는 서비스의 일관성이 유지되게 하는 인지적 일관성이 중요해지고 있다.

• 갤럭시 S3의 스마트 화면 유지 기능 _343
• iOS의 사운드 설정 _344
• 손실 압축 기술(MP3, JPG,MP4,MKV 등) _345

 

관련 포스팅

《오래가는 UX 디자인》 반준철 저 - Chapter 1 NOTE

《오래가는 UX 디자인》 Chapter 2~3 NOTE

《오래가는 UX 디자인》 Chapter 4~5 NOTE

《오래가는 UX 디자인》 Chapter 6 NOTE - END