by
Jun 04. 2021
내 손 안의 작은 혁신, 삼성 One UI
'기분 좋은 사용자 경험' 연재를 통해 좋은 UX 디자인에 대해 이야기하고자 합니다. 이번 편은 삼성 One UI에 담긴 사용자를 배려하는 디자인을 소개합니다.
웹 UI 디자인을 지배하는 Fitt's Law
사용자는 디지털 시스템과 인터랙션을 통해 원하는 것을 얻는다. 예를 들어 크롬 브라우저에서 새 창을 열고 싶으면 사용자는 상단에 있는 '+' 아이콘을 클릭하는 action을 하고 시스템은 새창을 열어주는 reaction을 한다. 사용자가 이 action을 하기 위해서는 팔과 손을 쓰는 물리적인 움직임이 필요하다.
시스템과의 인터랙션은 매우 빈번하게 일어나기 때문에 작은 움직이라도 반복하게 되면 시스템을 사용하는 효율을 떨어지고 사용자는 피로가 쌓이게 된다. 어떻게 물리적인 움직임이 주는 스트레스를 줄이도록 UI를 디자인할 수 있을까?
Fitt's Law에 그 해답이 있다. Fitt's Law는 대상(Target)의 넓이가 넓어지고 시작점(Start)에서 대상까지 거리가 가까울수록 이동에 걸리는 시간이 줄어드는 것을 보여주는 법칙이다. 아래 그림의 오른쪽에 있는 예시를 보면 시작점에서 대상까지 거리가 가장 가깝고 대상의 넓이도 움직임의 방향 쪽으로 넓기 때문에 물리적인 움직임에 가장 적은 시간과 노력을 들이게 된다.
Fitt's Law. 대상의 넓이가 넓어지고 거리가 가까울수록 이동에 걸리는 시간이 줄어든다. (Source: particletree.com)Fitt's Law가 가장 적절하게 활용된 분야는 웹 UI 디자인이다. 모니터의 화면이 큰 만큼 마우스나 터치패드를 사용하는 물리적인 움직임이 많이 발생할 수밖에 없는데, 이 법칙이 어떻게 인터랙션 요소들을 배치하고 디자인해야 하는지 기준을 제공해 주었다.
모바일 UI 디자인을 지배하는 Thumb Zone
모바일은 웹과는 사용하는 방식이 다르다. 보통 한 손으로 스마트폰을 들고 엄지손가락으로 화면을 터치해 인터랙션을 한다. 이 때문에 위에서 설명한 Fitt's Law 보다는 엄지손가락이 닿는 영역인가 아닌가 가 더 중요하다. 이를 'Thumb Zone'이라고 한다. 아래 그림에서 Natural은 엄지손가락이 자연스럽게 닿는 영역을, Strectching은 엄지손가락을 뻗어야 닿는 영역을, Hard는 닿기 어려운 영역을 보여준다.
Thumb Zone. 한 손으로 스마트폰을 잡았을 때 인터랙션 하기 좋은 영역을 보여준다. (Source: practicalecommerce.com)실제로 스마트폰을 쓰는 상황을 떠올려 보자. 인터랙션 요소가 Stretching 영역에 있을 때 우리는 엄지손가락을 억지로 뻗어 화면을 터치해야 하고, Hard 영역에 있을 때는 결국 한 손으로 스마트폰을 잡고 다른 한 손으로 화면을 터치해야 하는 번거로움이 발생한다.
이렇게 보면 Thumb Zone에 인터랙션 요소를 배치해야 하는 것이 당연해 보인다. 그러나 거의 모든 모바일 앱의 UI 디자인이 Thumb Zone에서 벗어난 곳에 인터랙션 요소를 배치하고 있으며 사용자는 자신들이 불편한 사용자 경험을 하고 있는 것조차 모른 채 이 디자인들을 쓰고 있다. 식당에서 손님의 손이 닿지 않는 곳에 음식을 놓아줬다고 생각해보면 이것이 얼마나 사용자를 배려하지 않는 디자인인지 생각할 수 있을 것이다.
엄지손가락만으로 쉽게 인터랙션이 가능한 디자인
삼성 모바일은 이 Thumb Zone을 누구보다 철저하게 적용한 One UI를 2018년에 선보였다. 이는 작은 변화였지만 사용자 경험을 혁신적으로 향상시켰다. 뿐만 아니라 타사와는 전혀 다른 시각적인 정체성(Visual identity)까지 만들어냈다 (상단이 시원하게 비워져 있는 이 화면 디자인은 타사의 UI와 삼성 One UI를 구분하는 가장 큰 요소가 되었다).
삼성 One UI는 'Interact naturally'라는 원칙을 세우고 엄지손가락이 닿는 영역을 Interaction area, 엄지손가락이 닿지 않는 영역을 Viewing area(정보를 보여주는 영역)로 정의하고 자사의 모든 앱에 이를 적용했다. 아래 그림은 이 원칙이 적용된 메시지 앱의 실제 사례이다. 이전 UI에서는 가장 최근에 온 메시지가 화면의 가장 상단에 위치해 있었고, 이를 터치하기 위해서 두 손을 사용해야 했지만, One UI 적용 이후로는 엄지손가락으로 아주 편안하게 터치를 할 수 있게 되었다.
Samsung One UI. 엄지손가락으로 거의 모든 인터랙션이 가능하도록 디자인되었다. (Source: news.samsung.com)