[5분 UI/UX]
주시영역과 활동영역
앞서 배운 구텐베르크 법칙에 따르면 사용자의 시선은 왼쪽 위에서 시작한다. 그런데 스티븐 후버의 모바일 디바이스 파지 방법론에 따르면 사용자가 터치하기 편한 영역은 화면 아래쪽에 집중되어 있다. 사용자의 시선이 시작하는 곳과 터치하기 편한 지점이 다른데 어떻게 하면 서로 다른 2가지 요소를 융합해 레이아웃을 설계할 수 있을까?
답은 간단하다. 화면을 2개 영역으로 분할해 시선이 가장 먼저 가는 곳을 보는 영역, 터치하기 편한 영역을 인터렉션 영역으로 분할해 레이아웃을 설계하면 된다.
이른바 주시 영역, 활동 영역 이론이다.
삼성전자 One UI의 보는 영역과 인터렉션 영역에 대한 설명¹주시 영역, 활동 영역 구분에 따르면
사용자의 시선이 가장 먼저 향하는 상단 <주시 영역>은
타이틀과 비주얼 같이 액션이나 클릭 요소가 없는 콘텐츠를 배치하고
사용자가 터치하기 편한 <활동 영역>은
실제 터치가 이루어지는 기능 요소를 배치한다.
이렇게 사용환경과 레이아웃을 일치시키면 사용성 향상과 더불어 사용자는 편안함과 익숙함을 느끼게 된다. 보편적으로 통용되는 익숙한 레이아웃으로 화면을 구성해 탐색 과정이 줄어들었으니 눈과 뇌의 피로도 줄어들어 편안함을 느끼게 되는 것이다.
우리가 평소에 인지하지 못하고 있지만 실제로 많은 서비스들이 주시 영역과 활동 영역 이론에 기반해 레이아웃을 구성한다. 대표적으로 안드로이드와 아이폰의 초기화면이 그렇다.
상단 주시영역 (주황) 하단 활동영역 (초록)으로 구성된 iOS와 Android 초기화면안드로이드와 아이폰의 초기화면은
상단은 정보성 콘텐츠를 제공하는 주시 영역
하단은 실제 액션이 발생하는 활동 영역
으로 구분해 레이아웃이 구성되어 있다.
이런 레이아웃 배치는 사용자의 학습효과를 유발한다. 엄지가 자유롭게 활동할 수 있는 엄지 영역에 활동 영역을 두고 모든 터치요소를 엄지 영역에 집중시키면 사용자는 어떤 액션이나 기능이 필요할 때 학습효과로 자연스럽게 활동 영역을 먼저 주시하게 된다. 뭔가를 누를 때는 항상 활동 영역을 터치했으니 손이 자연스럽게 활동 영역으로 향하게 되는 것이다.
그렇다면 모든 페이지를 주시 영역과 활동 영역으로 구분해 UI를 설계하면 사용자에게 높은 사용성을 제공할 수 있지 않을까?
안타깝게도 현실적으로 불가능에 가까운 얘기다.
레이아웃을 주시 영역과 활동 영역으로 구분하면 기능 요소는 무조건 활동 영역에 배치해야 된다. 기능이 많은 서비스에는 이 레이아웃이 적합하지 않다. 콘텐츠가 많아 세로 스크롤이 생기는 경우도 마찬가지인데 상단 주시 영역을 스크롤로 흘려보내면 영역을 나누는 의미가 퇴색되고 스티키로 고정하면 스크롤에 쓰이는 영역이 주시 영역만큼 줄어들어 사용성이 저하된다.
주시 영역, 활동 영역 2분할 레이아웃은 사용성 측면에서 강점이 있지만 범용성은 상대적으로 떨어진다. 이 레이아웃은 서비스의 초기화면이나 일부 페이지에서만 제한적으로 사용하거나 기능이 적고 콘텐츠와 기능이 명확히 구분되어 있는 서비스에서만 사용하는 것이 좋다. 상·하단이 명확히 구분되어 있는 음악 플레이어 같은 서비스가 적용하기 좋은 유형이다.
레이아웃은 서비스의 특징과 성격에 따라 구성이 판이하게 달라진다. 무분별하게 유명 서비스나 대형 글로벌 서비스의 UI를 벤치마킹하기보다는 우리 서비스에 적합한 형태와 구조는 어떤 것 인지를 먼저 고민해 보는 자세가 필요하다.
✔️ 핵심 3줄 요약
1️⃣ 상단은 정보성 콘텐츠를 제공하는 주시 영역, 하단은 실제 액션이 발생하는 활동 영역으로 레이아웃을 설계하면 사용환경과 레이아웃을 일치시킬 수 있다.
2️⃣ 아이폰과 안드로이드 초기화면이 주시 영역과 활동 영역을 구분해 설계되어 있다.
3️⃣ 주시 영역, 활동 영역은 사용성 측면에서 강점이 있지만 범용성은 떨어진다.
각주1)
https://www.design.samsung.com/kr/contents/one-ui/download/oneui_design_guide_kor.pdf
