조화로운 인터랙션 디자인 -2-

사용자의 효율적인 사용을 위해 어떻게 도울 수 있을까? 이전 글에서 어떻게 사용자가 생산적으로 제품에 집중하며 여타 방해 요소를 피할 수 있는지 알아보았다. 오늘은 이전 글에 이어서 조화로운 인터랙션 디자인을 만드는 전략에 대해 이야기해 보겠다.

 

[디자인] - 조화로운 인터랙션 디자인

 

조화로운 인터랙션 디자인

조화로운 인터랙션의 하모니를 정의하는 규칙은 없다. 하지만 몇 가지 전략은 더 아름다운 인터랙션 하모니를 만드는 올바른 방향을 가르쳐줄 것이다.

• 사용자의 멘탈 모델을 따른다.
• 적을수록 많은 것이다.
• 단순하게 조작할 수 있어야 하며, 사용자가 많은 생각을 하지 않게 하라.
• 묻지 말고 선택하게 하라.
• 가까운 곳에 필요한 도구를 배치한다.
• 모드형 대화상자는 피한다.
• 사용자의 입장에서 중요한 디자인에 초점을 맞추고, 극도로 예외적인 경우에도 대처한다.
• 정황 정보를 제공한다.
• 직접적 조작법과 시각적 입력법을 가능하게 한다.
• 애플리케이션의 상태를 알려준다.
• 불필요한 보고는 생략한다.
• 백지장 상태는 피한다.
• 명령과 설정은 명확히 구분한다.
• 비상탈출 손잡이를 조심스럽게 배치한다.
• 빠른 응답을 위해 최적화하고, 늦어질 경우에는 적절히 조절한다.

 

단순하게 조작할 수 있어야 하며, 사용자가 많은 생각을 하지 않게 하라

많은 개발자가 생각하는 가장 이상적인 인터페이스로 사용자와 소프트웨어 간의 쌍방향 대화 방식을 뽑는다. 하지만 사용자는 소프트웨어를 차를 운전하는 방식으로 작동시키고 싶어 한다. 어딘가에 가고 싶을 때면 차 문을 열고 들어간다. 앞으로 전진하고 싶을 때는 가속 페달을 밟고, 멈춰야 할 때는 브레이크를 밟는다. 방향을 바꿀 때는 운전대를 돌린다.

 

가장 이상적인 인터랙션은 대화상자 없이 간단한 툴과 도구로 조정하는 것이다. 운전자는 운전 환경을 조정하려고 자동차의 도움을 받는다. 차의 상태와 주변환경에 대한 적절하고 직접적인 피드백을 받는 것이 큰 도움이 된다. 앞유리로 보이는 바깥의 환경, 계기판에 나오는 다양한 정보, 지나가는 공기가 만들어내는 소리, 타이어가 파인 흠을 지나며 내는 소리, 도로에서 느껴지는 측면의 관성력과 진동 등이 직접적인 피드백이다.

 

인터랙티브 제품이 사용자를 화나게 만드는 이유는 제품이 자동차처럼 행동하지 않는다는 점이다. 대화상자를 통해 전하고자 하는 메시지를 피력하고, 사용자의 잘못한 점을 지적한다. 사용자로부터 특정한 대답을 요구한다.

 

묻지 말고 선택하게 하라

대화상자, 특히 확인용 대화상자의 태도는 사용자에게 결정을 하라고 종용한다. 반면, 도구상자는 사용자의 결정을 도와주도록 가능한 옵션을 알려준다. 확인용 대화상자는 하고 있는 작업을 멈추고 대답을 재촉하며 원하는 바를 얻을 때까지 고집스럽게 사라지려 하지 않는다. 반면에 도구상자는 공손하게 항상 그 자리에 있다. 마치 잘 정리된 가게처럼 물건을 보여주고, 무엇을 고를지 생각할 여유마저 제공한다.

 

선택의 기회를 제공하는 일은 매우 중요하다. 하지만 주어진 정보 안에서 자유롭게 선택을 하는 것과 선택을 강요하는 것에는 큰 차이가 있다. 사용자는 자동차를 직접 운전하는 것처럼 소프트웨어를 직접적으로 본인의 의지에 따라 움직이고 싶어 한다. 자동차는 대화상자 하나 띄우지 않고 매우 세밀한 선택도 자유롭게 할 수 있도록 만들어져 있다.

 

직접적인 핸들 조정은 차와의 의사소통에 적합한 방법이다. 모드 없는 선택은 사용자에게 디지털 제품을 사용할 때 원하는 통제력과 완성감을 준다.

 

가까운 곳에 필요한 도구를 배치한다

하나의 입력 도구로 프로그램의 모든 기능을 다 수용할 수 없다. 오히려 인터페이스가 심하게 복잡해질 수 있다. 대부분의 프로그램은 다수의 도구 세트를 사용자에게 제공하고 있다. 도구 세트는 복잡해질 수 있는 인터페이스를 피하기 위한 타협점인 셈이다. 도구 세트는 복잡해질 수 있는 인터페이스를 피하기 위한 타협점인 셈이다. 게다가 도구 선택과 사용을 쉽게 만든다.

 

도구는 항상 필요한 곳에 가까이 있어야 한다. 초보자나 중급자에게는 팔레트, 툴바에서 원하는 도구를 선택한다. 전문가에게는 키보드 단축키로 접근할 수 있게 만든다. 이런 방식으로 모든 사용자가 쉽게 단일 클릭이나 키보드 조작으로 도구를 선택할 수 있다. 만약 사용자가 어떤 도구를 찾으려고 프로그램에서 헤매야 한다면 작업의 전체적인 집중도를 크게 떨어뜨릴 것이다.

 

어플 'Sketchbook' 인터페이스 화면

 

모드형 대화상자는 피한다

사용자가 인터랙티브 제품의 도구나 데이터를 조작할 때, 현재 상태와 조작 뒤의 결과를 효과적으로 알려줘야 한다. 이런 정보가 사용자 행동을 방해해서는 안 된다. 언제나 쉽게 볼 수 있고 이해할 수 있어야 한다.

 

정보나 피드백을 사용자에게 보여주는 방법은 몇 가지가 있다. 불행히도 가장 흔한 방법은 화면에 팝업 대화상자를 띄우는 것이다. 이때 정보는 꽉 막힌 대화상자 안에 갇혀 내용을 확인하는 일 외에는 아무것도 할 수 없다. 이런 대화상자를 '모드형(mordal) 대화상자'라고 부른다.  사용자에게 필요한 정보를 제공하는 더 나은 방법으로 비모드형 피드백이 있다.

 

필요한 정보가 인터페이스 구조에 직접 들어 있고 사용자 행동의 흐름을 방해하지 않아야 한다. 피드백은 모드형 대화상자 없이 자유로워진다. 마이크로소프트의 워드 프로그램을 예로 들어보자. 현재 사용자가 어떤 페이지를 보고 있는지, 현재 문서에 몇 장의 페이지가 존재하는지, 커서가 어떤 위치에 있는지 등의 정보는 화면 아래에 위치한 상태바에 모여 있다. 사용자는 필요한 정보를 찾으려고 일하고 있는 상태에서 벗어나지 않아도 된다. 그 정보를 물어보려 길을 벗어날 필요가 없다. 어도비 포토샵 같은 그래픽 프로그램에도 작업창의 주변에 줄자 간격, 축소 미리 보기 등 비모드형 피드백을 설치해 놓았다.

 

마이크로소프트 워드 프로그램

 

- about face 4 인터랙션 디자인의 본질, 에이콘