✅ 오늘의 파쓰 지식 : 지난 시간에 이어 UX 편의성에 관한 3가지 법칙을 파쓰와 함께 알아보아요!

✅ 파쓰가 전하는 테크 샤라웃 : 카카오페이, 스퀘어랩, 무신사의 테크 블로그 소식을 소개합니다!

요즘은 많은 플랫폼들이 사용성을 고민하면서 높은 수준의 사용성을 갖춘 서비스를 제공하고 있는데요. 사용자로서 플랫폼을 사용할 때에는 보통 불편함을 느낄 때가 아니고서야 사용성에 대해 깊은 생각을 하지 않지요. 하지만, 오늘 UX 편의성의 법칙들을 배우고 난다면 우수한 사용 경험을 제공하는 플랫폼들을 사용할 때에도 그 경험을 그냥 흘려버리지 않고 내 것으로 만들어볼 수 있어요!

지난 파쓰 지식 코너에서는 UX 편의성 법칙 중 사용자에게는 관대하고, 플랫폼 시스템은 좀 더 엄격하게 준비해야 한다는 포스텔의 법칙, 테슬러의 법칙, 파킨슨의 법칙을 알아보았는데요. 이러한 법칙들이 플랫폼 서비스를 만들 때 우리가 가져야 할 철학적 법칙과 관점들이라면, 오늘은 실제로 화면과 상호작용 설계에 적용할 수 있는 법칙들을 알아보려고 해요.

실제 사용자가 편하다고 느끼는 경험은 플랫폼의 다양한 측면과 연관이 되어 있는데요. 제품을 조작하기 쉬운 지, 작동하는 속도는 빠른 지, 화면이 복잡하지는 않은 지 등의 다양한 측면에 의해 사용자들은 특정한 제품을 ‘편하다’ 혹은 ‘불편하다’를 판단하지요. 오늘은 그런 여러 측면 중에 접근성과 속도, 복잡성에 관한 UX 편의성 법칙들을 각각 살펴볼게요!

피츠의 법칙(Fitts’s Law)의 역사는 세계 2차 대전으로 거슬러 올라갑니다. 2차 대전 이후 전쟁 중에 많은 장비와 무기가 복잡하고 사용하기 어려웠기 때문에 인간과 기계의 상호작용을 최적화하는 연구가 많이 필요했는데요. 이 시기에 피츠를 비롯한 많은 학자들이 인간의 심리적, 물리적 능력을 이해하고 이를 기계 설계에 반영하려는 노력들이 활발하게 이루어졌지요.

피츠는 심리학자로서 인간의 행동을 이해하고 이를 정량화하는 데에 관심이 많았는데요. 특히 인간이 시각적 자극에 어떻게 반응하는지, 그리고 이 반응을 어떻게 정량적으로 측정할 수 있는지에 대해 연구했어요. 피츠는 인간이 목표를 얼마나 빠르고 정확하게 도달하는지를 측정하기 위해 일련의 실험을 설계했습니다. 이 실험에서는 참가자들이 다양한 크기와 거리에 있는 목표를 손으로 가리키거나 터치해야 했는데요. 피츠는 이러한 데이터를 분석하여 목표의 크기와 거리, 그리고 목표에 도달하는 시간 사이의 수학적인 관계를 발견했어요.

T=a+b⋅log2(WD+1)

• T = 목표에 도달하는데 걸리는 시간
  a, b = 실험을 통해 얻은 상수
  D = 시작점에서 목표까지의 거리
  W = 목표의 폭

보기만 해도 복잡해 보이는 이 공식을 한마디로 정리해 보면, 목표가 더 작고 더 멀리 있을수록 그 목표에 도달하는 데 더 많은 시간이 걸린다는 것입니다. 사실은 이미 우리 머릿속에는 당연하고 상식적인 이야기죠? 가까이 있는 축구 골대에 공을 넣는 것과 멀리 있는 농구 골대에 공을 넣는 것 중 어떤 것이 더 어려울지만 생각해 봐도 답이 나오니깐요.

이런 피츠의 법칙에 따라 우리는 모바일 플랫폼 환경에서 좀 더 사용성 높은 제품을 만들 수 있습니다. 바로 버튼 등의 요소를 모바일 화면의 어디에 위치시킬 때에 사용자들이 더 편하게 사용을 할 수 있을지를 결정할 수 있는 것이지요. 일명, 엄지 영역(Thumb Zone)이라고 해서, 한 손으로 스마트폰을 사용할 때 엄지손가락을 편안하게 뻗을 수 있는 영역을 의미합니다. 아래 보시는 사진처럼 왼손 사용자와 오른손 사용자가 각각 엄지 영역이 다른데, 이들 모두에게 자연스러운 영역이 사용자를 위한 최적의 영역이라고 할 수 있겠지요.  

모바일 화면뿐만이 아니라, PC에서도 피츠의 법칙은 적용된다고 합니다. PC 화면에서 가장 사용자들이 움직이기 쉬운 위치는 의외로 ‘가장자리’라고 합니다. 마우스를 이동하여 화면 가장 자리에 도달하면, 아무리 빠르게 움직여도 가장자리에서 더 이상 이동할 수없이 멈추게 되지요. 그래서 멈춘 가장자리 부근에서 클릭을 하는 것이 가장 편하기 때문에 윈도우나 맥OS 모두 메뉴바가 가장자리에 위치한다고 해요.

피츠의 법칙에서 ‘위치’요소 외에 또 중요한 것이 바로 ‘크기’입니다. 행동 유도가 필요한 버튼은 충분히 크고 다른 요소들과의 거리가 충분해야 합니다. 그래서 주로 액션이 필요한 ‘구매하기’ 등의 버튼은 크고 눈에 잘 띄게 배치하지요. 아래에 보시는 모든 패션 커머스 플랫폼들처럼요.

2️⃣ 속도의 문제: 도허티 임계

다음으로는 플랫폼의 속도에 관한 기준을 제공해 주는 도허티 임계에 대해 살펴보아요. 도허티 임계는 1982년 IBM의 월터 도허티(Walter Doherty)와 아빈드 타다니(Arvind Thadani)가 발표한 논문에서 처음 제시되었어요. 이 임계는 인간-컴퓨터 상호작용(HCI, Human-Computer Interaction)에서 중요한 개념으로 사용자가 시스템과 원활하게 상호작용하기 위해 응답해야 하는 최대 시간을 의미하죠. 이 연구에서는 시스템의 응답시간이 400밀리초, 즉 0.4초 이내일 때 사용자가 지속적으로 작업을 수행하며, 만족스러운 경험을 한다는 것을 발견할 수 있었어요. 반면, 이 시간 이내로 응답이 오지 않으면 사용자는 지루함과 좌절감 등 부정적인 감정을 겪게 되었지요.

이러한 도허티 임계의 0.4초 규칙은 시간이 지나면서 여러 연구와 경험을 통해서 더 정교해졌어요. 오늘날 UX 디자인에서는 다양한 맥락과 상황에 맞추어 이 원칙을 적용하는데요. 몇 가지 주요 변형과 적용의 방법을 소개하면 다음과 같아요.

• 즉각적인 반응(100밀리초 이내): 사용자가 시스템에 입력(예: 버튼 클릭)을 할 때, 즉각적인 피드백을 받는 것이 중요해요. 100밀리초 이내에 반응이 있으면 사용자는 시스템이 실시간으로 반응한다고 느끼기 때문이지요.
• 지연 인지 임계(1초 이내): 1초 이내에 시스템이 반응하면 사용자는 자신의 작업이 중단되지 않고 지속된다고 느껴요. 이 범위에서는 사용자가 시스템의 반응 속도에 대해 특별히 이식하지 않고 자연스럽게 작업을 계속할 수 있어요.
• 중단 없는 작업(10초 이내): 10초 이내에 반응이 있으면 사용자는 작업이 지연되었다고 느끼기는 하지만 여전히 주의를 집중할 수 있어요. 그렇지만 10초 이상 지연이 발생하면 사용자는 다른 작업으로 주의를 돌리게 되어요.

플랫폼 UX 디자인에서는 이런 도허티 임계를 사용자가 어떤 행동을 할 때 가장 적절한 응답 시간을 보장하기 위한 가이드라인으로 사용해요. 예를 들어, 웹 페이지 로딩 시간은 2초 이내로 유지하는 것이 좋아요. 2초 이내에 로드가 완료되면 사용자는 빠르고 원활한 경험을 하게 되어요. 또, 모바일 환경에서는 즉각적인 반응이 더욱 중요해요. 버튼 클릭, 화면 전환 등 주요 상호작용에 대해서 100밀리초 이내의 반응 시간이 이상적으로 보아요. 파일 업로드, 데이터베이스 쿼리와 같은 비동기 작업은 진행 상태를 사용자에게 알림으로써 지연에 대한 인식을 줄이고 10초 이내에 완료할 수 있도록 설계해요.

도허티 임계 기준을 따를 때에 빠른 속도를 통해 사용자에게 즉각적인 반응을 제공하여 만족스러운 사용 경험을 제공할 수 있는데요. 만약에 기술적으로 제품의 반응 속도를 높이는 데에 한계점이 존재한다면, 우리는 디자인을 통해 사용자 경험을 개선할 수 있어요. 실제로 많은 플랫폼들에서 디자인 요소를 적극적으로 활용하여, 작업을 처리하는 동안 시각적으로 진행 상황을 알리는 등의 애니메이션과 문구를 통해 사용자의 체감 성능을 높이고 있어요. 함께 세 가지 플랫폼 사례를 보시지요.

스켈레톤 UI(Skeleton UI)란 실제 데이터가 렌더링 되기 전에 보이게 될 콘텐츠 영역에 임시로 자리 표시자(Placeholder) 블록을 표시하는 방법이에요. 유튜브나 페이스북 등의 플랫폼에서 볼 수 있는 방식인데요. 모든 데이터가 뜨기 전에 먼저 스켈레톤 UI를 보여줌으로써 사용자는 시스템이 지금 데이터를 불러오고 반응하고 있다는 것을 인지하고 기다릴 수 있어요.

블러업 효과(Blur-up effect)란 이미지 공간에 저해상도의 이미지를 보여주고, 실제 이미지가 로딩이 완료되면 고해상도로 보여주는 방식이에요. 스켈레톤 UI와 마찬가지로 모든 데이터가 완벽하게 불러와지기 전에 화면의 윤곽을 미리 보여주어 서비스가 원활하게 작동 중이라는 것을 인지시키고, 사용자의 이탈을 방지하기 위한 목적으로 활용되어요.

사용자가 요청한 작업을 처리하는 동안에 애니메이션을 통해 볼거리를 제공하고, 요청이 처리 완료될 때까지 남은 시간을 보여주어 대기시간을 지루하지 않게 하는 방식입니다. 이러한 방식을 잘 사용하면 사용자는 불편함보다는 오히려 플랫폼에 대한 신뢰를 가질 수 있는데요. 토스가 이를 잘 활용한 방식으로 볼 수 있습니다. 토스는 대출 금리와 한도를 확인해 주는 서비스에서 데이터를 확인하고 불러오는 과정을 다음과 같이 프로그래스 바와 에니메이션으로 보여주고 있어요. 특히 몇 개의 금융사를 다녀왔다는 UX 라이팅으로 인해 사용자는 현재 토스에서 제공하는 정보에 대해 더욱 신뢰를 갖게 될 수 있어요.

3️⃣ 복잡성의 문제: 인지의 법칙

마지막으로 살펴볼 법칙은 ‘인지의 법칙’이에요. 사용자에게 어떤 것을 기억하게 시키는 것이 아니라 바로 인지할 수 있도록 제공해야 한다는 것인데요. 사실 이 법칙은 누군가 오래전에 어떤 연구를 통해서 정립한 개념이라기보다는 수많은 플랫폼들이 탄생하고 사용되면서 발전해 온 개념으로 볼 수 있어요. 인지의 법칙에서는 어떤 정보들 내가 직접 기억하지 않고도 업무를 처리할 수 있게 해주는 것이 중요해요.

가장 대표적인 사례가 Google 검색 엔진인데요. 사용자가 검색어를 입력하는 동안 자동 완성 기능을 사용해 검색하려고 하는 내용을 예측하고, 검색이 가능한 검색어를 보여줘요. 이를 통해 사용자가 원하는 정보를 더 쉽게 찾을 수 있고, 사용자는 검색어를 기억할 필요 없이 입력 중에 직접적으로 인지해서 원하는 검색 결과를 얻을 수 있지요.

쿠팡이나 배달의 민족 등에서 물건을 주문할 때에도 마찬가지예요. 한번 배달을 시켰던 주소를 기억해서 다음번에 주문을 할 때에는 배송 주소를 다시 적을 필요 없이 터치만으로 주문을 할 수 있는데요. 같은 맥락에서 결제 정보를 등록해둔다거나, 내가 늘 마시는 음료 메뉴를 등록해두는 것들이 모두 정보를 시스템이 대신 기억해 주고 사용자에게는 그런 옵션을 노출하는 방식으로 서비스를 제공해 주는 것으로 볼 수 있지요.

작업을 기억해 주는 것은 사용자가 어떤 행동을 하다가 중단하더라도 언제든 다시 행동을 이어나갈 수 있도록 도와주는 것이에요. 가장 대표적인 사례가 카카오톡에서 지인에게 카톡을 보내려다가 다른 작업을 위해 나가게 되었을 때에요. 그럴 때에 카카오톡에서는 보내려던 채팅의 내용을 기억해서 돌아오면 쓰고 있던 채팅의 내용이 보여지게 되지요.

많은 플랫폼에서 이와 같이 작업을 기억해 주는 기능을 제공하고 있어요. 자소설닷컴에서는 기존에 작성하던 자기소개서가 있을 경우, 마지막으로 저장한 시점까지의 기록을 가져오지요. 당근마켓의 경우 작성 중인 글이 있을 경우 ‘이어서 쓰기’가 가능하고요. 티빙을 비롯한 OTT 플랫폼에서는 시청이 중단되었던 시점부터 영상 재상이 가능해요.

작업을 기억해주는 인지의 법칙은 시스템이 오류가 나거나 사용자의 상황으로 인해 급하게 사용자의 행동을 중단해야 할 때에 크게 도움이 되어요. 특히 사용자가 완성해야 하는 행동이 길고 복잡할수록 빛을 발하지요. 예를 들어, 과거에는 플랫폼에서 물건을 주문할 때에도 굉장히 길고 복잡한 과정을 수행해야 했는데, 이 과정에서 오류가 나서 중단이 되면 사용자는 처음부터 다시 그 과정을 수행해야 하기 때문에 큰 좌절감을 느끼고 플랫폼을 이탈하게 될 가능성이 컸어요. 그러나, 작업을 기억해 줄 때에 다시 로그인하면 내가 완성했던 데이터까지는 남아 있어서 큰 불편함 없이 작업을 이어갈 수 있지요.