키오스크 UI 설계 시 고려할 것들

들어가며

최근 진행한 프로젝트에서 좌석 예약을 위한 키오스크 UI를 설계했습니다. 키오스크는 모바일, 웹 UI와 비슷하면서도 큰 화면크기, 입력방식, 사용환경에서 모바일, 웹과 다른 특징을 가지고 있었습니다. 프로젝트를 진행하면서 몇 가지 테스트와 리서치를 통해 알게 된 키오스크 UI 설계 시 고려할 점을 공유하고자 합니다.

시야각(인지 영역) 고려하기

시야각을 고려해야하는 이유

[그림 1] 주변시(Peripheral vision of the human eye)

한 번에 정보를 파악할 수 있는 시야각은 생각보다 넓지 않습니다. 큰 화면에 있는 많은 정보를 잘못 구성한다면 사용자는 필요한 정보를 찾는 데 어려움을 느끼게 됩니다.

시각 상태는 사물을 가장 또렷하게 구분할 수 있는 중심시, 황반 영역(그림 2의 ①영역)과 상대적으로 식별능력이 떨어지는 주변시로 구분됩니다. 일반적으로 30° 시야각 내의 근주변시(Near Peripheral Vision, 그림 2의 ②영역)까지는 어느 정도 인지가 가능하지만, 이 영역 밖의 주변시의 사물은 쉽게 인지하기 어렵습니다. 컴포넌트와 정보가 근주변시 영역 밖에 흩어져 있다면 사용자가 이리저리 고개를 돌리며 헤매는 불편함이 생길 수 있으므로 시야각을 고려하여 사용자가 응시하고 있는 곳을 중심으로 피드백이나 상태변화가 이루어지는 것이 좋습니다.

인지 영역 계산하기

[그림 2] 50인치 화면에서 인지 영역

프로젝트를 진행하며 실제 사용할 크기의 스크린에서 컴포넌트의 크기와 중심시 범위를 테스트하고 UI 설계를 마무리할 무렵 화면에서 시각영역별 넓이를 계산했습니다. 계산 결과를 바탕으로 컴포넌트가 적절하게 제공되었는지, 시각 영역을 잘 고려했는지 확인해봤습니다. 계산한 근주변시 영역은 지름 577px의 원(50인치 기준)으로 인지 영역이 생각보다 크지 않았음을 다시 확인할 수 있었습니다. 사용자가 응시하고 있는 곳 중심의 인지 영역 내에 다음 플로우와 연결되는 CTA 버튼, 과업 수행에 필수적인 정보가 제공될 수 있도록 설계했습니다.

[그림 3] 스크린 크기별 인지 영역

[그림 3]에서와 같이 화면 크기에 따라 한번에 인지할 수 있는 영역이 다릅니다. 웹, 모바일에서는 화면 전체가 인지 영역 안에 있어 화면 하단이나 코너에 버튼이나 정보를 배치해도 문제가 없을 수 있습니다. 하지만 큰 화면의 키오스크에서는 버튼을 찾기 어려운 사용성 문제나 중요 정보 전달이 이루어지지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 키오스크를 설계할 때는 다른 기기보다 더욱 세심한 인지 영역에 대한 고려가 필요합니다.

*[그림 2],[그림 3]에 표시된 인지 영역 기준: 시야각은 중심시 5°, 황반 영역 18°, 근주변시 30°로 계산했습니다. 50인치, 24인치 기기의 화면-사용자 간 거리는 50cm, 5.8인치 기기의 화면-사용자 간 거리는 30cm로 화면 내 크기를 계산했습니다.

입력 방식 고려하기

불편한 터치감

키오스크를 터치로 조작할 때 느린 반응 속도와 촉감 때문에 불편함을 느끼기 쉽습니다. 특히 핀치 줌 인-아웃, 드래그 등의 화면을 문지르는 입력 방식을 사용할 때 더 자주 불편함을 느낄 수 있습니다. (대부분의 키오스크에서 아래 이미지와 같이 느린 반응 속도를 보여줍니다.)

[그림4] 키오스크 조작 시 느린 반응 (손에 땀이 났을 땐 '삑!' 소리가 날 수도 있습니다.)

입력 방식에서 오는 불편함을 최소화하기 위해 탭(Tap)으로 조작할 방법을 함께 제공하거나 탭 버튼을 중심으로 조작할 수 있게 하는 것이 좋습니다. 예를 들어, 지도 화면에서 핀치 줌 인-아웃으로 제어할 수 있으면서 줌-아웃 버튼을 함께 제공하는 것, 버튼으로만 줌-아웃을 할 수 있도록 제한하는 것이 있습니다.

About face3에서 언급한 Drag&Drop에 관한 글, 2011

제한된 입력방식

키보드가 따로 연결된 키오스크도 있지만, 대부분의 키오스크는 터치 방식으로만 조작할 수 있습니다. 일반적인 탐색 과정에서는 터치 방식만으로도 문제가 없지만, 문자를 입력해야 할 경우 불편할 수 있습니다. 전체화면을 사용하는 OS 키보드는 화면이 50인치 정도로 커지면 눌러야 할 버튼과 버튼의 간격이 1ｍ 정도가 될 수도 있습니다. 이런 경우 크기가 작은 가상 키보드를 검색 필드 근처에 제공하거나 초성 검색 등의 방법을 통해 키보드 사용의 편의성을 고려할 필요가 있습니다.

사용 환경 고려하기

패스트푸드점이나 대중교통 예약 키오스크 앞에 길게 줄을 선 모습을 본 적이 있을 것입니다. 키오스크는 여러 사람이 공개적인 장소에서 함께 사용하는 기기입니다. 이 특성 때문에 키오스크는 모바일 설계 보다 더 고려해봐야 할 것들이 있습니다.

여러 사람이 사용하기 때문에 사용시간을 최대한 줄일 방법을 고려해야 합니다. 인지 부하를 줄이는 방법 외에도 매 순간마다 필요한 기능을 제공하는 것이 중요합니다. 이를 위해 사용 시나리오와 환경을 고려하여 설계해야 합니다. 시나리오에 없거나 사용 환경에 어울리지 않는 기능들을 제공한다면, 사용자가 처리해야 할 정보의 양이 많아져 혼란을 줄 수 있습니다. 또한, 불필요한 탐색을 유발하여 사용 시간이 길어질 수 있습니다.

공개적인 장소에서 개인정보를 보호할 방법, 다수의 이용자를 고려해야 합니다. 이를 위해 노출되는 개인정보를 최소화하는 것이 좋습니다. 또한, 로그아웃하지 않았거나 과업을 도중에 포기하고 키오스크를 떠났을 경우를 고려하여 특정 시간 후 초기화면으로 돌아가게 하여 다른 이용자들이 처음부터 사용할 수 있도록 해야 합니다.

마치며

키오스크를 사용하며 불편한 조작 방식 때문에 뒷사람의 눈치를 보며 사용했던 경험이 있습니다. 스크린의 크기에 따른 인지 영역, 입력 방식 그리고 사용 환경을 고려한다면 사용자가 빠르게 목적을 달성할 수 있는 키오스크를 디자인할 수 있을 것입니다. 사려 깊게 디자인된 키오스크가 늘어나 음식을 더 빠르게 주문하고 예약을 위해 줄 서는 시간이 줄어들기를 기대합니다.

참고

주변시 정보 및 이미지 - https://en.wikipedia.org/wiki/Peripheral_vision

삼각형 변의 길이 계산 - https://www.triangle-calculator.com/