인지적 부담을 줄여주는 UX 원칙

 

 

디지털 전환(Digital Transformation)으로 우리의 일상 생활은 점점 더 편리해지고 있습니다.

은행이나 매장, 식당에 직접 찾아 가지 않아도 터치 몇 번만으로도 손쉽게 원하는 것을 해결할 수 있습니다. 가상의 메타버스 공간에서는 사람들을 만나 소통하며, 미팅을 하고 업무를 보기도 할 뿐만 아니라, 심지어 경제 활동을 이어가기도 합니다.

그렇지만 사용이 어려운 서비스를 만나게 되면 사용자는 좌절하며 심지어 그 서비스를 다시는 찾지 않게 되기도 합니다. 거대한 세상을 작은 디지털 화면 안에 옮겨 놓다 보면, 그 복잡성이 증폭될 수 밖에 없는데요, 특히 하나의 앱에 여러 서비스들이 통합되어 다양한 기능들이 제공된다면 더욱 복잡해지기 때문에 그 사용의 어려움은 가중될 수 있습니다.

 

 

은행을 하나의 앱으로 옮겨놓은 뱅킹 서비스

 

 

그렇다면 어떤 UI가 사용자의 서비스 사용을 어렵게 만들까요?

사용자의 기대와 일치하지 않는 사용 방법, 복잡한 화면 구성과 정보 구조, 부적절하게 배치되어 찾기 어려운 정보들, 이해가 어려운 레이블이나 아이콘 등이 서비스 사용을 어렵게 만듭니다. 결국 이는 아래 그림과 같이 사용자의 정보처리 과정에서 많은 주의 자원을 요구하게 되며, 이는 인지적 부담(Cognitive load)을 유발하게 됩니다.

 

인간의 정보처리 모형 (출처: Wickens, 1984)

 

 

그렇다면 어떻게 서비스 사용을 쉽게 만들어 줄 수 있을까요?

UI가 유발하는 인지적 부담을 줄여주어, 사용자가 서비스를 쉽게 사용할 수 있도록 해주어야 합니다. 이러한 인지적 부담을 최소화해 줄 수 있는 사용 용이성(Ease of use)에 대한 4가지 비법에 대해 살펴보겠습니다.

 

 

비법 1. 사용 방법을 쉽게 예측할 수 있게 해주어야 합니다.

 

서비스에서 제공되는 정보나 사용 방법을 디자인할 때에는, 사용자의 멘탈 모델(Mental Model)에 부합되어야 합니다. 여기서 멘탈 모델은 사용자가 유사한 디지털 서비스나 실제 물리적 환경에서의 경험을 통해 형성된 정신적인 모델로, 사용자는 이를 통해 서비스의 작동 원리나 상호작용하는 방법을 예측하게 됩니다. 만약 사용자의 멘탈 모델에 부합되는 UI를 사용한다면, 사용자는 초기 학습 없이도 쉽게 사용할 수 있을 뿐만 아니라, 예기치 않은 실수도 줄어듭니다.

그렇기 때문에 새로운 서비스를 디자인할 때에는 현실 세계에서 동작하는 방식이나 사용자가 익숙한 스테레오타입을 잘 파악해 상호작용을 디자인해 주는 것이 중요합니다. 예를 들면, 애플의 스큐어모피즘(Skeuomorphism)은 물리적 행위와 더불어 외향적 디자인까지 아날로그적 경험을 디지털에 충실히 반영하여 사용자에게 친근하면서도 쉬운 사용 경험을 제공합니다.

 

 

스큐어모피즘을 반영한 앱 (이미지 출처: Zeple)

 

 

멘탈 모델과 유사한 개념으로 양립성(Compatibility)을 들 수 있는데요, 양립성은 자극과 반응 간의 관계가 인간의 기대와 일치되는 정도를 말합니다. 양립성에는 운동, 공간 및 개념적 양립성으로 구성되어 있는데, 이러한 양립성이 높을수록 사용자가 처리할 정보의 양이 줄어들게 되어 더욱 쉽게 사용할 수 있습니다.

여기서 운동 양립성은 표시 장치와 조작 장치, 그리고 이 둘간의 반응의 운동 방향 간의 관계를 다루는데요, 아래 그림과 같이 사용자가 조작 장치를 움직이는 방향에 따라 표시장치가 사용자의 기대하는 방향으로 움직인다면, 이는 운동 양립성이 높다고 볼 수 있습니다.

 

 

운동 양립성 예 (출처: Kompatibilität et al., 2021)

 

 

공간 양립성은 표시 장치나 조작 장치의 공간적 배치 간의 관계를 주로 다루는데요, 아래 그림의 우측의 가스 버너와 같이 여러 표시 장치들과 함께 여러 조작 장치들이 배치된 경우, 공간적 배치가 사용자의 기대와 일치할 경우 공간 양립성이 높다고 볼 수 있습니다.

 

 

공간 양립성 예 (출처: https://dls.tepapa.govt.nz/)

 

 

개념 양립성은 사용자들이 가지고 있는 개념적인 연상과 관련되는데요, 예를 들면 정수기의 냉수는 파란색, 온수는 빨간색으로 구분하는 것을 들 수 있습니다. 또한 아래 그림과 같이 공기청정기의 청정 표시등을 통해 공기 상태가 안전하면 녹색, 경고이면 노란색, 위험하면 빨간색으로 표시되는 것도 개념 양립성이 잘 반영된 예입니다.

 

 

개념 양립성 예 (이미지 출처: www.lge.co.kr)

 

 

그렇지만 이러한 멘탈 모델과 양립성은 본능적으로 습득되는 부분도 있겠지만, 주로 학습에 의해 형성되기 때문에 문화나 국가에 따른 차이가 있을 수 있습니다. 그러므로 글로벌 향의 서비스를 기획하는 경우에는 사전에 해당 국가의 문화적 차이에 대해 파악하는 것이 필요합니다.

 

 

비법 2. 전달되는 정보량을 최소화해 주어야 합니다.

 

서비스의 쉬운 사용을 위해서는 화면에서 전달되는 정보량을 최소화해 사용자의 인지적 부담을 줄여주어야 합니다. 이와 관련하여 Hick’s law(1952)에 따르면, 화면 내 메뉴의 수(Number of alternative stimuli)가 많아지면 사용자가 처리해야 할 정보량이 늘어나기 때문에 이로 인해 반응 시간(Time taken to respond)이 늘어나게 됩니다. 그러므로 한 화면에 보여지는 메뉴를 설계할 경우에는 사용자의 인지적 부담의 최소화를 위해 핵심 메뉴 위주로 제공해 주는 것이 필요합니다.

 

 

Hick’s law (1952)

 

 

예를 들면 앱의 첫 화면에는 최소한의 메뉴만 제공하고, 더 필요하면 상세 메뉴에서 확인할 수 있도록 디자인하는 방법을 고려해 볼 수 있습니다. 파레토 법칙(Pareto’s law)에 따라 사용 비중의 80%를 차지하는 주 사용 기능인 20%를 첫 화면에 배치하는 것은 사용자의 인지적 부담도 줄여주면서 효율성도 향상시킬 수 있는 효과적인 방법이 될 수 있습니다. 아래 그림과 같이 스마트폰 앱의 첫 화면에는 꼭 필요한 기능만 간결하게 제공해 사용을 쉽게 하고, 나머지 기능은 더보기 메뉴를 통해 확인할 수 있도록 디자인하는 것은 이에 대한 좋은 예입니다.

 

 

스마트폰 앱 첫 화면 예 (출처: Samsung Design)

 

 

사용자에게 전달되는 정보량을 줄여주는 또 다른 방법으로 청킹(Chunking)을 들 수 있습니다. 청킹은 관련성이 높은 정보들끼리 그룹핑해주는 방법으로, 유사한 정보를 근접하게 배치하거나 한데 묶어서 제공해 주면 사용자는 한 눈에 정보를 처리할 수 있기 때문에 인지적 부담을 줄여 줄 수 있습니다. 아래의 Focus Block과 같이 관련 정보를 묶어서 제공해주면 사용자는 한눈에 관련 정보들을 손쉽게 파악할 수 있습니다.

 

 

Focus Block (출처: Samsung Design)

 

 

비법 3. 현재 상태를 가시적으로 보여 주어야 합니다.

 

서비스의 현재 상태나 진행하고 있는 일을 사용자에게 가시적으로 보여주는 것은 중요합니다. 즉, 가시성(Visibility)을 유지해야 합니다. 왜냐하면 사용자는 다음 실행을 위해 이전에 실행한 행위를 기억해야만 하는데요, 만약 현재 상태가 표시된다면 사용자는 이전 행위를 기억해 내지 않아도 쉽게 사용할 수 있습니다.

대표적인 예로 아래의 그림의 Progress bar를 들 수 있습니다. 이를 통해 사용자는 이전에 어떤 단계까지 진행하였고 현재에는 어떤 단계에 있는지 알 수 있으며, 현재 진행하고 있는 일이 얼마나 진행되고 있는지를 손쉽게 알 수 있습니다.

 

 

다양한 형태의 Progress bar (이미지 출처: istock)

 

 

또한 제품이나 서비스의 변화나 이상이 있을 때, 적절한 피드백(Feedback)을 통해 사용자에게 즉각적으로 알려주는 것이 중요합니다. 사용자는 피드백을 통해 무슨 일이 일어나고 있는지 이해할 수 있을 뿐만 아니라, 그 정보를 바탕으로 적절한 의사결정을 할 수 있습니다.

대표적으로 아래와 그림과 같이 공기청정기에 이상 상황이 있을 경우 적절한 시점에 공기청정기 디스플레이나 연동된 스마트폰에 알림을 제공해 줄 수 있는데요, 사용자는 알림만 확인하면 되기 때문에, 주기적으로 필터를 교체해야 하는 시점을 기억할 필요가 없습니다.

 

 

가전 연동 앱의 알림 (이미지 출처: www.lge.co.kr)

 

 

비법 4. 문구와 설명이 쉽고 친절하게 제공되어야 합니다.

 

제품과 서비스에 문구와 설명을 사용할 때에, 사용자에게 친근하고 쉽게 이해할 수 있는 적절한 단어와 정확한 표현을 사용하여야 합니다. 특히 설정의 화면이나 사용법을 설명해 주어야 하는 것과 같이 어려운 과업에서는 많은 문구와 설명들이 사용되게 되는데요, 그로 인해 사용자의 인지적 부담을 가장 많이 유발하는 영역 중에 하나로 Label이 꼽히곤 합니다. 그러므로 명확하면서 간결하고 이해하기 쉽게 UX Writing하는 것은 사용자의 인지적 부담을 줄여주는 데에 아주 중요합니다.

 

 

설정의 화면과 사용법을 설명해주는 화면

 

 

사용 용이성 vs. 효율성

 

이러한 사용자의 인지적 부담을 줄여주는 사용 용이성(Easy of use)의 원칙은 빠른 과업 수행을 지원해주는 효율성(Efficiency)의 원칙과 교환 관계(trade-off)가 발생하는 경우가 있습니다. 예를 들면, 효율성을 위해서는 첫 화면에 많은 기능을 배치하여 빠른 접근성을 제공하는 것이 효과적일 순 있습니다. 그렇지만 이는 복잡성을 높이기 때문에 사용 용이성을 떨어뜨릴 수 있습니다. 반면에 사용 용이성을 높이기 위해 첫 화면에 최소한의 기능만 배치하면 인지적 부담을 줄일 수 있지만, 사용자가 원하는 기능이 첫 화면에 없다면 더 많은 단계로 이동해 기능을 찾아 사용하여야 하기 때문에 효율성을 떨어트릴 수도 있습니다.

단순히 UX 원칙만으로 여러 디자인 제약 사항이 있는 조건에서 좋은 경험을 디자인하는 것은 한계가 있을 수 있습니다. 사용자들에게 좋은 경험을 제공하기 위해서는 좀 더 심도 있는 깊은 고민과 검토가 요구됩니다.

예를 들면 어떤 가치에 우선순위가 있는지 검토해 볼 수 있습니다. Weinschenk(2011)에 따르면, 인지적 부담이 운동 부담보다 더 큰 부담을 사용자에게 부여한다고 합니다. 그러므로 터치 횟수가 늘어나더라도 복잡성을 낮추어 주는 것이 사용자의 전반적인 부담 최소화 측면에서 더 효과적일 수 있을 것입니다.

서비스의 목적이나 정의된 사용자가 누구인지에 따라서도 우선순위를 선택할 수도 있을 것입니다. 예를 들면 누구나 접근해서 쓸 수 있는 서비스(Focus on novice user)의 경우 범용성이 더욱 중요하기 때문에 복잡성을 낮추어 주는 것이 중요할 것입니다. 반면 빠른 과업 실행이 중요하다거나 일부 사용자가 지속적으로 사용하는 서비스(Focus on expert user)의 경우 효율성이 더욱 중요할 것입니다. 왜냐하면 다소 복잡성이 높더라도 몇 번의 사용을 하면 학습 곡선(Learning curve)에 따라 익숙해지기 때문에, 사용 용이성보다는 효율성에 우선순위를 두어 디자인한 서비스가 해당 사용자에게는 더욱 효과적일 수 있기 때문입니다.

 

 

Learning curve (Nielsen, 1993)

 

 

다행히도 대부분은 2가지 원칙이 잘 디자인되었다면 서로 긍정적인 영향을 주는 시너지 효과를 기대할 수 있습니다. 왜냐하면 서비스가 사용하기 쉽다면 사용자가 고민 없이 빠른 정보처리를 할 수 있어서 더 빠르게 사용할 수 있기 때문입니다. 뿐만 아니라 앞서 예로 들었던 교환 관계가 있었던 정보량에 대해서도 파레토 법칙(80/20 법칙)에 따라 균형적으로 잘 디자인된다면, 인지적 부담을 낮으면서도 기능에 빠르게 접근할 수 있는 시너지 효과를 기대할 수 있습니다.

 

 

오의택 님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.