상호작용 비용을 최소화하여 UI 디자인을 2배로 개선하기

 

 

'상호작용 비용'이란?

사용자가 의도한 목표를 달성하기 위해 사용자 인터페이스(UI)와 상호작용하기 위해 투자해야 하는 정신적, 신체적, 시간적 노력의 양을 의미합니다.

 

 

이 '비용'은 세 가지 요소로 분류할 수 있습니다.

 

1. 인지적 노력

이는 UI를 탐색하는 데 필요한 정신적 처리 능력과 관련이 있습니다. 복잡하거나 직관적이지 않은 UI는 높은 인지적 부하를 유발하고 결과적으로 높은 상호작용 비용을 초래합니다. 반대로 단순하고 직관적인 UI는 인지 부하와 상호 작용 비용을 줄여줍니다.

2. 육체적 노력

여기에는 작업을 완료하는 데 필요한 클릭 또는 키 입력 횟수, 스크롤 횟수 등 사용자가 UI와 상호 작용하기 위해 수행해야 하는 물리적 노력이 포함됩니다.

3. 시간 노력

사용자가 UI와 상호 작용하는 동안 목표를 달성하는 데 걸리는 시간을 의미합니다. 느린 로딩 시간, 복잡한 탐색, 작업의 복잡성, 지침 부족 또는 기타 요인으로 인해 상호 작용 비용이 증가할 수 있습니다.

이상적인 세계에서는 사용자가 사이트나 앱을 방문하자마자 원하는 것을 바로 찾을 수 있어 상호작용 비용이 전혀 발생하지 않습니다. 이것이 사용 편의성의 궁극적인 목표입니다. 그러나 대부분의 사이트와 앱이 제공하는 다양한 기능으로 인해 상호작용 비용 제로를 달성하는 것은 종종 불가능합니다.

 

 

 

잘 설계된 사이트나 앱의 목표는 사용자가 목표를 달성하는 데 드는 상호 작용 비용을 줄이는 것입니다.

 

 

여기에는 다음을 최소화하는 것이 포함될 수 있습니다.

읽기, 스크롤, 유용한 정보 검색, 제시된 정보 이해, 클릭 또는 터치(오류 없이), 입력, 페이지 로딩 대기, 작업 간 주의 전환, 작업 완료를 위한 정보 기억하기 등을 최소화하는 것입니다.

 

 

그렇다면 디자인에서 인터랙션 비용을 최소화하려면 어떻게 해야 할까요? 
다음은 몇 가지 효과적인 전략입니다.

 

1. 관련 작업을 가까이 배치하세요.

피츠의 법칙에 따르면, 더 가깝고 큰 타깃은 더 빨리 클릭할 수 있습니다. 따라서 액션은 관련 요소 근처에 배치하고 클릭 가능한 영역을 충분히 확보해야 합니다.

 

실제 예시: Spotify와 같은 음악 스트리밍 앱에서는 일반적으로 재생 컨트롤(재생, 일시 정지, 건너뛰기)을 화면 하단이나 고정된 위치에 배치하여 사용자가 별도의 화면이나 메뉴로 이동하지 않고도 음악 재생을 쉽게 제어할 수 있도록 합니다.

 

 

2. 선택의 폭을 최소화합니다.

힉의 법칙에 따르면 선택의 수와 복잡성에 따라 의사 결정에 걸리는 시간이 증가합니다. 선택의 폭을 줄이면 의사 결정의 속도를 높일 수 있습니다. 추천 항목이나 인기 있는 항목의 수를 줄여 강조 표시하는 것도 빠른 의사 결정에 도움이 될 수 있습니다.

실제 사례: Uber Eats나 Grubhub와 같은 음식 배달 앱을 통해 음식을 주문할 때, 수백 개의 레스토랑과 메뉴 항목의 압도적인 목록을 제시하는 대신 사용자의 위치와 선호도에 따라 '인기' 또는 '추천' 레스토랑을 선별하여 제공할 수 있습니다.

 

 

3. 작업 기억을 더 잘 활용하세요.

인지 심리학자 조지 밀러는 사람이 작업 기억에 대략 7개의 항목을 저장할 수 있다는 이론을 세웠습니다. 정보를 의미 있고 관리하기 쉬운 덩어리로 정리하면 메모리를 더 효율적으로 사용할 수 있습니다.

실제 사례: 에어비앤비는 숙소 목록 페이지에 이 원칙을 효과적으로 적용하고 있습니다. 임대 숙소에 대한 텍스트가 가득 찬 페이지로 사용자를 압도하는 대신, “이 공간 정보”, “편의시설”, “예약 가능 여부”와 같은 명확한 제목을 사용하여 정보를 관리하기 쉬운 덩어리로 나눕니다. 이렇게 하면 인지 부하가 완화될 뿐만 아니라 사용자가 필요한 정보를 빠르게 검색하고 찾을 수 있어 사용자 경험이 향상됩니다.

 

 

4. 방해 요소를 줄이세요.

애니메이션 배너, 팝업, 불필요한 시각적 요소와 같이 주의를 분산시키는 요소는 사용자가 작업을 완료하는 데 방해가 될 수 있습니다.

실제 사례: Medium 플랫폼은 방해 요소를 최소화하여 사용자의 집중력을 향상시킨 좋은 예입니다. 사용자는 Medium에서 기사를 읽을 때 주로 텍스트와 필수 탐색 요소만 포함된 깔끔하고 미니멀한 인터페이스를 보게 됩니다. 독자가 콘텐츠에 집중할 수 있도록 팝업이나 광고와 같은 불필요한 기능을 배제하여 상호 작용 비용을 효과적으로 줄였습니다.

 

 

5. 인식 촉진

필드 레이블이나 메뉴 항목은 쉽게 보이거나 필요할 때 쉽게 검색할 수 있어야 합니다. 사용자에게 긴 튜토리얼 문서를 읽게 하는 대신 상황에 맞는 단계별 튜토리얼을 제공해야 합니다. 또한 긴 양식은 단일 디스플레이에 맞도록 압축해야 합니다.

실제 사례: 예를 들어, Google의 검색 엔진 인터페이스는 페이지 중앙에 크고 명확하게 표시된 검색창과 자동 완성 제안을 통해 사용자가 검색어를 공식화할 수 있도록 단계별 가이드를 제공합니다.

 

 

6. 작업 간소화

프로세스에 관련된 총 작업 수를 시각화하면 작업을 간소화하고 능률화할 수 있는 기회를 파악할 수 있습니다. 결과에 영향을 주지 않고 제거하거나 결합할 수 있는 단계를 고려해야 합니다. 이렇게 하면 물리적 상호 작용 비용을 낮추고 제품의 효율성을 높일 수 있습니다.

실제 사례: 현재 많은 온라인 양식에서 주소나 신용카드 정보를 이전에 입력한 적이 있는 경우 자동으로 채워주므로 프로세스에 관련된 단계가 줄어들고 효율성이 향상되며 물리적 상호 작용 비용이 절감됩니다.

 

 

 

7. 반복 작업 줄이기

특정 작업이 반복적인 경우, 이를 자동화하거나 더 쉽게 수행할 수 있도록 하여 물리적 및 인지적 상호 작용 비용을 모두 줄이세요.

실생활의 예: 예를 들어 Excel이나 Google 스프레드시트와 같은 스프레드시트 소프트웨어에는 하나의 함수나 수식을 여러 셀에 동시에 적용할 수 있는 기능이 있어 반복적인 작업을 수행할 필요성을 줄여줍니다.

 

 

인터랙션 비용 최소화 예시

 

 

제품 페이지에서 의자를 두 개를 장바구니에 추가하고 싶지만 색상을 잘 모르는 사용자를 생각해 보세요. 이 사용자는 두 번의 클릭과 스크롤을 통해 드롭다운 메뉴에서 색상을 선택해야 합니다. 하지만 어떤 색상 옵션을 사용할 수 있는지 알지 못합니다. 선택 항목이 드롭다운이나 중첩된 메뉴에 숨겨져 있으면 사용자가 해당 메뉴가 있는지 모를 수 있습니다. 이로 인해 원하는 것을 찾기가 어렵고 기회를 놓치거나 좌절감을 느낄 수 있습니다.

수량을 선택하려면 사용자는 두 번 더 클릭하고 스크롤해야 합니다. 그런 다음 마우스를 '장바구니에 추가' 버튼으로 이동하여 클릭해야 합니다. 이 경우 빨간색 의자 두 개를 장바구니에 추가하려면 다섯 번의 클릭과 한 번의 스크롤, 짧은 마우스 이동이 필요합니다.

 

 

 

개선된 예시에서는 색상 옵션에 가시성 원칙을 적용합니다. 이를 통해 사용자는 선택 사항을 바로 확인할 수 있으므로 정신적 노력과 클릭 횟수를 줄일 수 있습니다. 색상을 변경하려면 사용자는 마우스를 조금만 움직여 한 번만 클릭하면 됩니다. 모든 색상을 미리 보여줌으로써 사용자는 최종 선택을 하기 전에 다양한 색상을 시도해 볼 수 있어 상호작용 비용을 더욱 줄일 수 있습니다. 또한 시각적 차별화의 원칙을 활용하여 텍스트를 실제 색상 샘플로 대체하여 사용 가능한 색상 옵션을 표시합니다. 이러한 방식으로 색상을 사용하면 사용자가 빠르게 이해할 수 있는 강력한 시각적 단서가 됩니다.

수량의 경우 사용자가 의자 두 개를 쉽게 선택할 수 있는 선택기를 사용합니다. 더하기 기호를 클릭하거나 직접 숫자를 입력할 수 있습니다. 이 도구를 사용하면 작은 변경을 더 빠르고 쉽게 할 수 있습니다. 마지막으로 '장바구니에 추가' 버튼을 수량 선택기에 더 가깝게 이동하여 상호작용 비용을 더욱 줄였습니다.

이러한 간단한 변경을 통해 더욱 사용자 친화적인 인터페이스를 만들었습니다. 이제 총 상호작용 비용은 세 번의 클릭과 아주 작은 마우스 움직임에 불과합니다.

이전 예시를 통해 상호작용 비용을 최소화하는 방법을 더 자세히 살펴보겠습니다. 원클릭 주문이라는 기능을 구현할 수 있습니다.

 

 

 

 

일반적으로 온라인 쇼핑은 장바구니에 상품을 추가하고, 결제하고, 배송 및 결제 세부 정보를 입력하고, 마지막으로 구매를 확인하는 등 여러 단계를 거쳐야 합니다. 이 과정은 시간이 오래 걸리고 수많은 상호 작용이 필요하기 때문에 상호 작용 비용이 상승할 수 있습니다.

하지만 원클릭 주문은 전체 프로세스를 간소화합니다. 사용자는 일반적인 결제 과정을 생략하고 단 한 번의 클릭으로 구매를 완료할 수 있습니다. 이 기능은 배송 및 결제 정보와 같이 이전에 저장된 사용자 데이터를 활용하여 구매 프로세스를 신속하게 처리합니다.

디자인에는 기본 '지금 구매' 버튼이 도입되었습니다. 기본 버튼으로 '지금 구매'를 강조할지, '장바구니에 추가'를 강조할지는 비즈니스 모델과 사용자 인터페이스의 특정 목표에 따라 크게 달라집니다. 이 버튼을 추가하면 사용자가 단 한 번의 클릭으로 주문할 수 있으므로 필요한 인지적, 물리적, 시간적 노력을 크게 줄일 수 있습니다.

인터랙션 비용을 줄이는 또 다른 방법은 작업 메모리를 더 잘 활용하는 것입니다. 큰 텍스트 블록이 있는 시나리오를 생각해 봅시다. 특히 블로그가 아니라 제품 설명인 경우 이를 읽는 것이 부담스러울 수 있습니다.

 

 

 

 

개선된 버전에서는 텍스트를 더 쉽게 관리할 수 있도록 간단한 전략을 적용했습니다. 문단 간 간격을 충분히 두고 텍스트를 더 작고 이해하기 쉬운 부분으로 세분화했습니다. 또한 각 단락에 부제목을 도입했습니다. 또한 줄 높이를 120%에서 160%로 높여 텍스트를 더 쉽게 읽을 수 있도록 했습니다.

 

 

 

 

그렇다면 상호작용 비용을 최소화하기 위해 최선을 다하는 것이 왜 중요할까요?

1. 사용자 만족도

인터랙션 비용을 줄이면 사용자 경험이 향상되어 제품 만족도가 높아집니다.

2. 사용자 리텐션

인터랙션 비용이 낮으면 사용자가 제품을 이탈할 가능성이 줄어듭니다.

3. 효율성

사용자는 전문적인 환경에서 필수적인 작업을 더 빠르게 완료할 수 있습니다.

4. 접근성

간소화된 인터페이스는 다양한 능력을 가진 사용자의 제품 접근성을 높일 수 있습니다.

5. 전환율

상호 작용 비용이 낮아지면 판매 또는 가입 중심의 웹사이트와 앱에서 전환율이 향상될 수 있습니다.

6. 평판

상호 작용 비용이 낮은 제품은 사용자 친화적이고 고품질로 인식되어 브랜드 평판이 높아지는 경우가 많습니다.

 

 

요약하자면, 인터랙션 비용을 최소화하는 것은 단순히 우수한 제품을 만드는 것뿐만 아니라 사용자의 요구와 기대에 부응하여 더 나은 비즈니스 성과를 창출하는 것입니다.

 

 

출처:

https://medium.com/@uxpeak.com/improve-your-ui-designs-strategies-for-minimizing-interaction-cost-in-ux-ui-design-b5f20de4322a