Defining an Interaction Model: The Cornerstone of Application Design

Jim Nieters라는 UX Designer가 HP에서 여행 관련 프로덕트의 UX를 설계한 경험을 바탕으로 Interaction Model이 무엇이고, 그것을 어떻게 수립하고, 인터액션 모델이 결정된 후 세부 작업을 위한 프레임워크에 무엇이 있어야 하는지를 정리한 글입니다 (※ Source : Defining an Interaction Model , 2012년 1월 23일, UXmatters).

제가 보기에 이 글에서 저자가 말하는 Interaction Model이란 “만약에 웹에 의해 매개되지 않고 실제세계에서 직접 일을 한다면 어떤 Task를 수행함에 있어서 User가 어떤 Object에 대해  어떤 Action을 하고, 이것을 누구와 주고받는지”에 관한 개념적 모델을 의미하는 것 같습니다. 예를 들어, 백화점에 가서 쇼핑을 한다고 가정한다면, 매장에 진열된 제품(Object) 중 사고자 하는 제품을 선택하고,  이리 저리 훓어보고, 카운터에 가서 현금카드로 제품 구입의 대가를 지불합니다. 실제 온라인 쇼핑몰 역시 “오프라인의 상거래”에 관한 이와같은 인터액션 모델에 기초하여 구축된다는 것입니다.

누군가 어떤 회사에 입사 지원을 한다면, 이 유저는 “입사지원서”라는 정형화된 형식의 다큐먼트 (Object)에 정보를 채워 넣는 Action을 수행한 후 이것을 그 회사의 인사담당자에게 우편이나 도보로 직접 전달하게 됩니다. 그러면 인사담당자 입장에서 접수된 “입사지원서”들을 책상위에 쌓아 놓고 , 일차적으로 “합격 도장”을 찍은 것 – 즉 이때 합격 도장은 접수된 Object들에 대한 검토결과 처리하기  일종의 UI라고 할 수 있음 – 만 간추려서 사업담당자들에게 넘기는 등 다음 절차를 수행하게 됩니다.  협의의 관점에서 볼 때 User Interface는 온라인 상에서 User의 목표 대상인 “입사지원서”가 제시되는 양식과 이것을 다루는데 필요한 User의 Action을 지원하는 툴로 구성된다고 할 수 있겠습니다.

그리고 이러한 Interaction Model이 충분히 사전에 정의되지 않는다면  어떤 Task를 단계적으로 수행함에 있어서 필요한 Obejct들이나 이것을 다루는 반복적인 UI 패턴에 관한 스타일 가이드, User Experience에 적용되는 메타포나 형식 (웹이냐 전용이냐, 이메일 형식이냐 게시판 형식이냐, 플립보드와 같은 잡지 형식이냐 아웃룩과 같은 3단 Layout이냐 등), 페이지들간 관계에 관한 IA와 Navigation 구조 등도 설계하기가 어려울 것입니다. 저자는 이것이 잘 정의되어 있다면 User 입장에서 너무나 간단하고 자연스럽기 때문에 이것을 만드는데 왜 이렇게 오랜 시간이 걸렸나 의아해 할 것이라고 지적합니다. 매일 공기 자체를 인지하지 않고도 숨을 쉬듯이 일종의 자연법칙처럼 역시 잘 만들어진 UI는  UI가 없는 것처럼 느껴진다 것입니다.

더 자세한 내용은 아래 글을 참고하시길…

1. Interaction Model Definition

인터액션 모델은 타겟 유저의 개념적인 모델을 지원하는 방식으로 어플리케이션을 묶어 주는 디자인 모델이다. 그것은 어플리케이션을 하나로 엮어 내는 접착제이다. 그것은 실제 세계에서 유저의 인터액션을 반영하고 지원하는 방식으로 어플리케이션을 구성하는 모든 오브젝트들과 액션들이 어떻게 상호 연결되는지를 정의한다. 그것을 통해 유저들은 어떤 지향성을 유지하고 어떻게 플레이스를 이동하면서 정보를 찾거나 태스크를 수행하는지를 이해하게 된다.

그것은 어플리케이션의 비전을 담고 있다. 인터액션 모델을 통해 디자이너와 개발자들, 프로젝트 관련자들은 유저들이 시스템내에 있는 오브젝트들로부터 어떻게 액션하지를 이해하고 설명할 수 있게 된다. 일단 인터액션 모델을 이해하면, 패턴이 보이고, 모든 것이 명쾌해 진다.

예를 들어, Microsoft Word는 유저가 타자기에 종이를 끼우고 타이핑을 하는 개념적 모델을 지원하고 있다. Excel은 항목별로 숫자를 칼럼에 기입하는 회계담당자의 개념적 모델을 지원하고 있다. 파워포인트는 오버헤드 포로젝터로 투명 플라스틱 문서를 스크린에 쏘는 발표자의 개념적 모델을 지원하고 있다. 이 3가지 어플리케이션은 많은 추가 기능들과 풍부한 경험을 제공하고 있지만 그것의 핵심에는 모든 유저들이 쉽게 내면화할 수 있는 인터액션 모델이 있다.

인터액션 모델이 잘 정의되면, 시스템내에서 발생하는 대부분의 액션들은 예측가능하게 된다. The Invisible Computer라는 책에 쓰여진 바와 같이 프로덕트나 인터액션이 효과적으로 동작한다면 우리는 그것을 인지하지 못한다.

단순한 웹 포탈이라면 Global Product나 Information Architecture만 있어도 디자인이 가능하겠지만, 복잡한 인터액션을 지원하고 10여개 이상의 페이지로 구성된다면 인터액션 모델을 먼저 정의해야 한다.

• 스타일가이드와 차이점 : 모든 요소들이 전체 페이지와 스크린에 동일하게 적용되어야만 하는 디자인 스카일 가이드와 달리 인터액션 모델은 오브젝트들이 상호연결되는 방식을 묘사하는 근본적인 디자인 패턴 (Foundational Design Pattern)으로서 합해져서 전체 모델이 묘사되는 많은 서브패턴들을 가지게 된다. 디자이너들이 유저의 실제 문제를 해결할 여지를 제공한다는 점에서 인터액션 모델은 스타일가이드와 다르다.
• 어플리케이션의 제시방식 : PC기반의 Non-Mobile Application이 웹 포탈의 형식을 사용할 것인지 또는 데스크탑 어플리케이션의 형식을 사용할 것인지 ? 우리의 경우 웹 어플리케이션을 개발하지만 링크 대신 버튼을 더 많이 사용하고 Minimize/Maximize 버튼을 통해 브라우저 크롬을 완전히 감추고 스크린 전체 공간을 Application 영역으로 활용하는 등 데스크탑과 동일하게 동작하도록 설계했다. 우리는 퍼포먼스가 매우 좋은 어플리케이션 기술을 설계했지만, 웹 포탈의 메타포 대신 데스크탑 어플리케이션 메타포를 선택했다 (chosen a desktop application metaphor over a Web portal metaphor for the application). 
• Information Architecture와의 차이점 : IA는 페이지들간의 관계를 매핑하는 것으로서 복잡한 시스템인 경우 IA를 통한 정보의 구조(Structuring Information)뿐만 아니라 많은 복잡한 요소들로 구성되는 시스템을 통해 유저들이 움직이는 방식, 그들이 복잡한 트랜잭션을 수행하기 위해 그것을 어떻게 사용하고, 원래 위치로 돌아오는 방식 등에 대해서도 정의해야 한다.
• Navigation Model과의 차이점 : 어플리케이션의 어떤 페이지나 섹션에서 다른 곳으로 유저들이 어떻게 이동하는지를 묘사하는 Navigation Model과 달리 인터액션 모델은  유저들이 자신의 목표(objectives)에 도달하기 위한 개념적 접근방식, 즉 실제 생활에서 태스크를 수행하는 방식 – 을 설정할 수 있도록 지원해야 한다.

결과적으로 인터액션 모델에는 유저들이 페이지를 어떻게 내비게이션하는지, 그들이 예약, 패신저, Expense 등 페이지에서 관심있는 Object를 어떻게 선택하는지, 구매하기, 여행코스 스케쥴링하기, 추가하기 등 선택한 대상에 대해 어떤 액션을 수행하는지 등에 대한 정의가 포함된다. 또한 우리는 디자인 패턴을 사용하여 인터액션 모델을 묘사한다. 우리의 뇌는 연결된 신경세포를 통해 패턴을 인지하게 되어 있다. 인터액션 모델은 식별가능한 패턴으로서 유저들의 사고방식과 실제 생활의 활동에 대한 접근방식을 지지하고 간단히 이해할 수 있는 서브패턴들도 보여준다 (discernible pattern that supports the way users think about and approach real-life activities, which also reveals subpatterns in easily discernible ways).

2. User Scenario For Specification of Interaction Model

당신이 몇날 몇주 몇달간 에 거쳐 열심히 노력해서 인터액션 모델을 이해하고 문제 해결을 위한 솔루션을 마침내 찾아냈다면, 당신은 그것이 너무나 단순해서 이것을 이해하는데 왜 이렇게 오랜 시간이 걸렸는지 의아해 하게 될 것이다.

유저의 목표가 무엇이고 그것을 달성하기 위해 어떤 Object들을 사용하며, 그리고 유저가 실제 생활에서 이 Object들에 대해 행하는 어떤 Action을 하는지의 관계를 파악하고, 그것을 반영하는 Interaction Model의 시안들을 수립하고 각 모델별 장단점을 검토하여 최종 모델을 결정해야 한다.

예를 들어, 예약 담당자는 출발지로 향하는 비행기의 예약을 성공적으로 대행해 주는 것이 목표이고, 이를 위해 고객과 계속해서 통화를 하는데 여기에서 가장 중요한 Object는 고객이다. 그는 항공기를 예약하거나 프로필을 변경하는 등의 Action을 수행한다.

이와 달리 Gate Agent는 정시에 고객들을 탑승시키고 항공기를 이륙시키는데 초점을 맞춘다. 그들의 능력은 이것을 기준으로 평가받는다. Gate Agent는 항공기의 정시 이륙을 위해 고객들이 모두 탑승했는지, 좌석을 업그레이드한 사람이 있는지, 대기자 리스트에 있는 고객이 지금 비행기에 탑승했는지 등 다양한 활동을 수행한다. Gate Agent의 Object는 Flight이다.

또한 Baggage Handler의 1차적 Object는 짐꾸러미이다.

우리는 이 3가지 유형의 서로 다른 유저들이 일차적으로 초점을 맞추는 Object를 전면에 부각시키고 그것을 중심으로 짜여진 인터액션 모델을 만들어냈다. 우리는 또한 에이전트들에게 Object에 관한 핵심정보를 요약해서 제공함으로써 그 Object에 대한 액션을 효과적으로 수행할 수 있도록 했다.

Once we understood the object-action relationships for these users, we spent a couple of months brainstorming various ways in which we could structure the overall product to permit these object-action relationships to take place in the most efficient, delightful way. During the brainstorming process, the team explored options, produced a set of screens for each user scenario, and looked at how well the model held together across scenarios. We did not just create simple screens. Rather, we crafted some of the most complex scenarios, with some of the most complex screens, to ensure that the interaction model supported big challenges. Sometimes, we recognized early that a model didn’t work. At other times, a model looked pretty good at first, but then we found that it wasn’t scalable.

If we can show how an interaction model can result in breakthrough solutions, we can build the right level of support for having User Experience at the center of the strategic dialogue.

3. Interaction Model을 수립하기 위한 원칙

프로덕트에 대한 User Experience의 목표(대상)를 먼저 이해하지 않는다면 Interaction Model을 만들어 낼 수 없다. 이것을 알아야 이 모델의 성공여부, 그리고 이 모델의 한계 내에서 당신이 내린 디자인에 대한 개별적인 결정들이 얼마나 성공적인지를 측정할 수 있다. 여행 프로덕트를 디자인하면서 우리는 다음과 같은 목표를 설정했다.

• Discoverability – 유저들이 이 모델의 일차적 목표(primary object)를 얼마나 신속하게 알아내고 어떻게 액션을 수행해야 하는지를 이해할 수 있는지 ? 유저들이 처음부터 이 시스템을 성공적으로 사용할 수 있는지 ?
• Learnability : 시스템을 완벽하게 사용하는 방법을 유저들이 내면화하는데 얼마나 시간이 걸리는지 ? 간단한 컨수머 프로덕트조차도 약간의 학습시간이 필요하다 (Slight Learning Curve). 예를 들어 나는 우리 회사가 나에게 지급한 새로운 스마트폰의 멋진 기능들 모두를 어떻게 사용하는지 이해하기 위해 이것 저것 써봐야 했다.
• User Efficiency and Productivity : 일단 유저가 이 시스템을 자신있게 사용할 수 있게 된다면, 평범하거나 반복적인 태스크를 얼마나 쉽게 사용할 수 있는가 ? 그들이 한방에 벌크 액션을 수행해야 하는지 또는 10여가지 태스크를 해야 하는지 또는 독립된 액션을 수백번 별도로 수행해야 하는지 ?
• System Response Time : 일단 유저가 액션을 취했을 때 시스템이 응답을 주는데 얼마나 걸리는지 ? 프로덕트를 사용 도중 어떤 태스크를 수행함에 있어서 걸리는 전체 시간은 유저가 이것을 얼마나 능숙하게 사용하는지(User Efficiecny)와 시스템이 응답을 얼마나 빨리 주는지(System Response Time)가 합해져서 결정된다. 디자이너들은 시스테 리스판스 타임에 대한 고객의 기대치와 한계치를 이해할 책임이 있으며 이러한 기대치를 최대한 충족시킬 수 있도록 프로덕트를 디자인해야만 한다.
• Delight : 프로덕트가 유저들에게 얼마나 쿨하게 느껴질까 ? 유저들이 그것을 사용하고 싶어할까 ? 그들이 다른 프로덕트와 비교하여 얼마나 그것을 좋아할까 ? 나는 Customer Listening 조직을 만들어  Net Promoter Score data를 비롯한 이런 유형의 데이타를 체계적으로 수집, 분기별로 상위 5가지에서 7가지를 개선했다.

4. Framework

일단 디자인 팀이 인터액션 모델을 정의했다면 구체적인 디자인을 지원할 수 있는 Framework를 만들어내야만 한다. 프레임워크에 따라 재사용 가능한 디자인 패턴을 정의하고, 이 패턴을 디자인과 개발 컴포넌트에서 어떻게 재사용할 수 있는지 예시함으로써 디자인의 추가적인 파트들을 신속하게 디자인하고 개발할 수 있게 된다. 나의 경우 우리 팀은 몇명의 디자이너와 프런트엔드 개발자들이 한팀을 이루어 Framework를 관련자들에게 릴리스했다. 이 프레임워크에는 타이틀 바, 아코디언 위젯, 테이블 포맷, Date Pickers, 그리고 수백가지 U/I 요소들을 포함하여 많은 팀들이 필요로 하는 모든 디자인 패턴이 들어있다.

5. 결론

인터액션 모델을 정의하는 것은 디지털 시스템을 디자인하기 위해 근본적으로 필요하다. 프로덕트의 인터액션 모델을 정의하면 프로덕트의 비전을 팀원들과 공유하고 단합할 수 있게 된다. 지난 11월달에 인터액션 모델과 어플리케이션 시뮬레이션을 고객에게 보여주자, 그들은 프로덕트가 언제 출시될지 바로 물어 보기 시작했다.