오의택님의 아티클 더 보기

UI/UX 뉴스

바쁜 일상 속 능률을 올려주는 UX 비법

서비스 사용의 효율성 향상을 위한 UX 원칙

우리 일상은 디지털 기술의 발전으로 편리해지고 있습니다. 이로 인해 우리는 이전보다 더 많은 일을 하게 됐습니다. 정보의 홍수 속에서 의미 있는 데이터를 탐색하고, 여러 앱을 넘나들며 실행하죠. 심지어 다수의 디지털 디바이스를 이용해 여러 일을 한 번에 처리하기도 합니다.

이미지 1. 디지털 기술의 발전으로 더 바빠진 우리의 일상(출처. clockwise)

그렇다면 우리는 디지털 기술의 집약체인 스마트폰으로 얼마나 많은 일을 하고 있을까요? 뉴스 읽기‧메일 회신하기‧송금하기‧장보기와 같은 간단한 업무뿐 아니라 소셜미디어‧게임‧영상 콘텐츠 감상 등 여가 활동을 하기도 합니다. 스마트폰으로 하루를 시작해 스마트폰으로 하루를 마무리한다고 해도 과언이 아니죠.

특히 디지털 네이티브(Digital Native)라고 불리는 Z세대는 디지털을 이용해 더 많은 일을 처리합니다. 그들은 5개의 화면을 사용해 한 번에 여러 일을 처리하는 멀티태스킹(Multitasking)에 능숙합니다. 반면, 그들의 집중력은 8초입니다. 디지털화된 복잡한 환경에서 빠르게 정보와 일을 처리하는 진화된 신인류라고도 할 수 있죠.

이러한 단서들은 무엇을 의미할까요? 그들은 할 일을 효율적이면서도 효과적으로 처리한다는 것입니다. 이는 목적 중심의 B2B 서비스뿐만 아니라, 여가‧소통 등 다양한 목적을 지닌 B2C 서비스에서도 중요합니다. 특히 디지털 네이티브인 Z세대를 대상으로 한 서비스에서는 그들이 원하는 다양한 목적을 빠르게 처리할 수 있도록 효율적으로 디자인하는 것이 더욱 중요합니다. 그렇다면 서비스 사용의 효율성을 높여주기 위해 어떻게 디자인해야 할까요? 효율성 향상으로 이어지는 3가지 비법에 대해 살펴보겠습니다.

비법 1. 사용빈도가 높거나 중요한 기능은 바로 접근할 수 있어야 합니다.

사용자 행동과 사용 맥락에 대한 이해를 바탕으로 사용자가 자주 쓰거나 중요한 기능 및 정보에 대해 즉시 접근할 수 있도록 디자인해야 합니다. 대표적인 예시는 단축 실행 방법인 숏컷(Shortcut)과 단축키입니다.

[이미지 2]는 아이폰의 잠금 화면인데요. 화면 하단을 보면, 순간 포착이 중요한 카메라 앱과 함께 어두운 환경에서 즉시 실행이 필요한 손전등 기능이 숏컷으로 제공됩니다. 잠금 화면에서 개인 인증을 풀고 홈 화면에서 카메라 앱이나 제어 센터로 진입해 기능을 실행하지 않아도 됩니다. 사용자는 제스처를 통해 바로 해당 기능에 접근할 수 있습니다. 뿐만 아니라 잠금화면에서 제스처를 통해 사용자가 자주 사용하는 이전 알림 정보를 확인할 수도 있습니다.

이미지 2. 아이폰 잠금화면에서 제스처로 기능 바로 접근하기

사용빈도가 높은 기능이나 정보를 상위 항목에서 제공하면, 탐색을 줄여 효율적인 접근이 가능해집니다. [이미지 3]은 대표적인 지도 앱인 ‘TMap’과 ‘네이버지도’의 메인 화면인데요. 화면 하단에는 사용자가 자주 검색한 목적지 리스트를 사용 빈도 및 최신성에 기반해 우선순위로 추천합니다. 여행이나 출장과 같이 특별한 이벤트에는 새로운 장소를 검색하기도 하지만, 주로 사용자는 자주 검색했던 장소로 다시 이동하는 경우가 많습니다. 그렇기 때문에 사용자는 검색창에 목적지 검색을 위한 문자 입력 없이 추천 리스트를 터치하는 것만으로 빠른 길안내 기능을 실행할 수 있습니다.

이미지 3. TMap 앱과 네이버지도 앱의 메인 화면

하지만 서비스 앱의 첫 화면은 한정적인 노른자위 땅과 같은데요. 그렇다면 이러한 제약사항을 바탕으로 어떻게 디자인해야 할까요? 이에 대한 힌트는 파레토 원칙(Pareto Principle)으로 알려진 80/20 법칙을 참고할 수 있습니다. [이미지 4]와 같이 80/20 원칙에 따르면 제품 전체 사용의 80%는 20%의 기능이 차지합니다. 서비스 사용 로그 데이터를 분석하거나 사용자 조사를 통해 사용자가 자주 쓰는 기능이나 정보가 무엇인지 파악할 수 있습니다. 이렇게 20%에 해당하는 기능들을 파악한 후, 첫 화면에 배치한다면 이 기능에 대한 접근성은 높아질 테죠.

이미지 4. Pareto Principle: The 80/20 Rule(출처. Interaction Design Foundation)

비법 2. 과업을 실행하기 위한 단계를 최소화해야 합니다.

두 번째 비법은 주로 UI의 정보 구조(Information Architecture, IA)와 연관됩니다. UI의 IA를 디자인할 때, 메뉴의 폭(Breadth)과 깊이(Depth)의 적정성을 고려해야 하는데요. 이와 관련된 연구를 살펴보면, 사용자는 메뉴의 경로를 탐색할 때 3단계 이상 들어가면 인지적으로 길을 잃어버린다고 합니다(Norman et al, 2001). 다른 연구결과(이미지 5)를 통해 PC 및 모바일 환경에서 Broad IA가 Deep IA보다 수행 시간이 적게 소요되는 것을 확인할 수 있습니다. 그렇기에 서비스 IA를 효율적으로 디자인하려면 실행 단계를 최소화해야 합니다.

이미지 5. 정보 구조에 따른 평균 탐색 시간 비교(출처. 사이언스다이렉트)

그렇지만 메뉴의 폭과 깊이는 상충 관계가 있어, IA 디자인에는 답이 정해져 있지 않습니다. 다만 효율성보다 디자인적 제약사항(화면 크기에 따른 적정 표시 정보량)을 고려해 메뉴의 폭과 깊이를 디자인해야 합니다. 효율적 과업 실행을 위해 하위 Depth로 이동하지 않아도 사용자가 원하는 기능을 바로 실행할 수 있도록 디자인하는 방법도 있습니다. [이미지 6]과 같이 메시지 알림에서 바로 답장하는 것입니다. 이를 통해 사용자는 메시지 앱 화면으로 진입 없이도 바로 답장할 수 있어 효율적으로 과업을 수행할 수 있습니다.

이미지 6. 알림으로 메시지 확인하고 바로 답장하기(출처. LiVE LG)

다른 예는 ‘콘텐츠 리스트에서 스와이프를 통해 바로 삭제하기’입니다. 지메일(Gmail)의 경우 사용자는 메일 리스트에서 대략적으로 내용을 파악할 수 있기 때문에 굳이 읽을 필요가 없는 스팸성의 메일을 구분할 수 있습니다. 그래서 사용자는 메일의 상세 화면으로 이동하지 않고도 사용자는 스와이프로 바로 메일을 삭제할 수 있어 불필요한 시간을 아낄 수 있습니다.

이미지 7. Gmail 앱과 FLO 앱(출처. Geek)

비법 3. 시선과 물리적 동선을 최소화해야 합니다.

화면의 레이아웃을 디자인할 때, 정보 파악을 위한 시선과 조작을 위한 물리적 동선을 최적화해 사용자에게 요구되는 불필요한 행동을 줄여야 합니다. 쿠텐베르크 법칙(이미지 8)에 따르면, 사용자의 시선은 좌측 상단에서 시작해 우측 하단으로 이동합니다. 이러한 지각적 특성을 고려해, 상단에 정보를 배치하면 사용자는 자연스럽게 파악할 수 있습니다. 또한 하단에 최종적인 선택을 할 수 있는 버튼을 배치하면 효율적으로 과업을 수행할 수 있죠.

이미지 8. 쿠텐베르크 법칙(출처. uxdesign.cc)

이러한 개념이 잘 적용된 사례는 커머스 앱에서 자주 살펴볼 수 있습니다. [이미지 9]와 같이 상단에는 상품 정보를 중심으로 제공하되, 하단에는 [구매하기] 버튼을 배치해 구매 결정 시 바로 버튼을 누를 수 있도록 디자인됐습니다.

이미지 9. 모바일 환경에서의 쿠텐베르크 법칙과 쿠팡 및 무신사 앱 화면(출처. uxmovement)

기능 실행을 위해 여러 단계를 거쳐야 하는 과업을 디자인할 때, 사용자의 조작 동선을 배려해 버튼 배치를 최적화해야 합니다. 이와 관련된 피츠의 법칙(Fitts’ Law)에 따르면, [이미지 10]의 공식과 같이 타깃과의 거리(D)가 멀어지거나 타깃의 크기(W)가 작으면 동작 시간(T)이 늘어나게 됩니다. 예를 들면 [이미지 10]의 Target A는 Target B와 크기는 같지만, Target A가 Target B보다 커서가 위치한 시작점과의 거리가 가깝기 때문에 사용자는 더 빨리 누를 수 있습니다.

이미지 10. Fitts’ Law(출처. Nielsen Norman Group)

가정에서 많이 사용하는 가전의 버튼 배치를 한 번 살펴보겠습니다. 세탁기와 같은 가전은 기능을 실행하기 위해서는 ‘전원 켜기-옵션 선택-동작 실행’과 같은 순차적인 단계를 거칩니다. [이미지 11]과 같이 세탁기 조작부의 버튼은 좌측에서부터 [전원 버튼] [옵션 선택 휠] [실행 버튼] 순서로 배치됐습니다. 버튼 간의 이동거리가 최적화돼 사용자가 효율적인 동작으로 기능을 빠르게 실행할 수 있죠.

또 다른 예로 [이미지 12]는 순간 포착이 중요한 스마트폰 카메라 화면입니다. 한 손으로 사진을 촬영할 때 엄지가 위치하는 하단 영역(조작이 쉽고 빠른 그린 영역)에 촬영 버튼이 있기 때문에, 사용자가 원하는 타이밍에 엄지로 버튼을 눌러 빠르게 촬영할 수 있습니다.

이미지 12. 엄지의 운지 범위와 카메라 앱 촬영 화면(출처. SwifeFox)

과업에 맞는 디자인하기

디지털 서비스에서 사용자가 해야 하는 과업을 모두 효율적으로 디자인하는 것이 능사일까요? 반드시 그렇진 않습니다. 과업에 따라 적합한 UX 원칙을 우선순위로 둬 디자인해야 합니다. 가끔은 효율적으로만 디자인된 UX가 사용자에게 치명적인 손실을 줄 수도 있습니다. 바로 사용자의 의도치 않은 실수로 인해 데이터 손실이나 금융 사고와 같은 리스크가 있는 과업에서는 안전성의 원칙에 더욱 우선시해야 합니다.

왜냐하면 인간은 더 많이 더 빠르게 일을 처리하다 보면 어쩔 수 없이 부주의와 같은 실수를 하기도 합니다. 그렇기 때문에 사용자의 실수가 치명적인 손실로 이어질 수 있는 과업에서는 [이미지 13]과 같이 최종 결정 전에 다시 한번 의사를 물어, 사용 절차를 늘려주는 것이 필요합니다.

이미지 13. 사기의심 사이렌(출처. 토스피드)

디지털 기술의 발전으로 사용자는 역설적으로 이전보다 더 많은 일을 하고 있습니다. 바쁜 일상 속에 해야 할 반복적이고 귀찮은 많은 일을 효율적으로 디자인해, 사용자가 더욱 삶의 본질에 집중하고 여유를 되찾길 기대합니다.