brunch

매거진 넥스트 모바일 이야기

라이킷 34 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Mobiinside Feb 21. 2023

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

사용자 경험 파헤치기

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

디지털 기술의 눈부신 발전은 우리 일상의 일들을 더욱 편리하게 처리할 수 있게 해 주었습니다.

그렇지만 역설적으로 우리는 이전보다 더 많은 일들을 하게 되었는데요. 넘쳐나는 정보의 홍수 속을 탐색해 나가고, 여러 앱들을 넘나들며 기능을 실행하죠. 심지어 다수의 디지털 디바이스를 이용해 여러 일들을 한번에 처리하기도 합니다.

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

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

이러한 단서들은 무엇을 의미할까요? 사용자들이 해야 할 많은 일들을 서비스를 통해 효율적으로 처리할 수 있도록 해 주어야 한다는 것을 의미합니다. 이는 사무적인 목적 중심의 B2B 서비스뿐만 아니라, 여가나 소통과 같은 다양한 목적을 지닌 B2C 서비스에서도 중요할 텐데요. 특히 디지털 네이티브인 Z세대를 대상으로 한 서비스에서는 그들이 원하는 다양한 목적들을 빠르게 처리해 줄 수 있도록 효율적으로 디자인하는 것이 더욱 중요합니다.

그렇다면 서비스 사용의 효율성을 높여주기 위해서는 어떻게 디자인해야 할까요? 이번 글에서는 효율성을 향상시켜 줄 수 있는 3가지 비법에 대해 소개해 드리도록 하겠습니다.

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

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

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

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

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

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

그렇지만 서비스 앱 화면에서의 첫 화면은 한정적인 노른자위 땅과 같은데요. 그렇다면 이러한 제약사항을 고려해 어떻게 디자인해야 할까요? 이에 대한 힌트는 파레토 원칙(Pareto Principle)으로 알려져 있는 80/20 법칙을 참고할 수 있습니다.

아래 이미지와 같이 80/20 원칙에 따르면 제품 전체 사용의 80%를 기능의 20%가 차지하기 때문에, 전체 사용의 80%를 차지하는 20%의 기능을 파악해 이에 대한 접근성이 좋도록 첫 화면에 배치하는 것이 효과적입니다. 이를 위해서 서비스 사용 로그 데이터를 분석한다거나 사용자 조사를 통해 사용자들이 자주 쓰는 기능이나 정보가 무엇인지 파악할 수 있습니다.

Pareto Principle: The 80/20 Rule (출처: Interaction design foundation)

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

두 번째 비법은 주로 UI(User Interface)의 정보 구조(Information Architecture, IA)와 연관됩니다.

UI의 IA를 디자인할 때에는 메뉴의 폭(Breadth)과 깊이(Depth)의 적정성을 고려해야 하는데요. 이와 관련된 연구들을 살펴보면, 사용자들은 메뉴의 경로를 탐색할 때 3단계 이상 깊숙이 들어가면 인지적으로 길을 잃어버린다고 합니다(Norman et al., 2001). 다른 연구결과를 살펴보면, 아래 이미지와 같이 PC 및 Mobile 환경에서 Broad IA가 Deep IA 보다 수행 시간이 적게 소요되는 것을 볼 수 있습니다(Parush & Yuviler-Gavish, 2004). 그렇기 때문에 효율적인 서비스 IA를 디자인하려면 Depth를 줄여 과업을 실행하기 위한 단계를 최소화해주는 것이 필요합니다.

정보 구조에 따른 평균 탐색 시간 비교 (출처. Web navigation structures in cellular phones)

그렇지만 메뉴의 폭과 깊이는 상충 관계(trade-off)가 있어, IA를 디자인하는 데에 답이 정해져 있는 것은 아닙니다. 다만 효율성을 고려해 IA를 깊이 디자인하지는 않되, 디자인적 제약사항(화면의 크기에 따른 적정 표시 정보량)을 고려해 메뉴의 폭과 깊이를 밸런스 있게 디자인하는 것이 필요합니다.

과업을 효율적으로 실행하기 위해 단계를 줄여주기 위해서는 하위 Depth로 이동하지 않아도 사용자가 원하는 기능을 바로 실행할 수 있도록 디자인할 수 있습니다 아래 이미지와 같이 메시지 알림에서 바로 답장해 주는 것을 예로 들 수 있습니다. 이를 통해 사용자는 메시지 앱 화면으로 진입 없이도 바로 답장하기를 할 수 있어 효율적으로 과업을 수행할 수 있습니다.

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

다른 예로 다음 이미지와 같이 콘텐츠 리스트에서 스와이프를 통해 바로 삭제하는 것을 들 수 있습니다. Gmail의 경우 사용자는 메일 리스트에서 대략적으로 메일의 내용을 파악할 수 있기 때문에 굳이 읽을 필요가 없는 스팸성의 메일은 메일의 상세 화면으로 이동해서 삭제할 필요가 없는데요. 사용자는 스와이프로 바로 메일을 삭제할 수 있어 불필요한 시간을 아낄 수 있습니다.

Gmail 앱과 FLO 앱의 스와이프로 리스트 삭제하기 (이미지 출처: Geek)

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

화면의 레이아웃을 디자인할 때, 정보 파악을 위한 시선과 조작을 위한 물리적 동선을 최적화해 사용자에게 요구되는 불필요한 행동을 줄여주어야 합니다.

쿠텐베르크 법칙(Gutenberg Rule)에 따르면, 아래 이미지와 같이 사용자는 정보를 스캔할 때 좌측 상단에서 시작해서 우측 하단으로 시선이 이동하게 되는데요. 이러한 사용자의 지각적 특성을 배려하여 상단에는 정보를 배치해 자연스럽게 파악하게 하고, 하단 쪽에 최종적인 선택을 할 수 있는 버튼을 배치하는 것이 과업을 수행하는 데에 효율적일 수 있습니다.

Gutenberg Rule (출처: uxdesign.cc)

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

좌: 모바일 환경에서의 쿠텐베르크 법칙 적용 (출처. uxmovement), 우: 쿠팡 및 무신사 앱 화면

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

Fitts’ Law (출처: Nielsen Norman Group)

가정에서 많이 사용하는 가전의 버튼 배치를 한 번 살펴보겠습니다. 세탁기와 같은 가전은 기능을 실행하기 위해서는 전원을 켜고 옵션을 선택한 후 마지막에 동작 실행하기와 같은 순차적인 단계를 거치게 되는데요. 아래 이미지와 같이 세탁기 조작부의 버튼 배치는 좌측에서부터 전원 버튼, 옵션 선택 휠, 그리고 실행 버튼의 순서로 배치되어 있어, 각 버튼 간의 이동거리가 최적화되어 있습니다. 그렇기 때문에 사용자가 효율적인 동작으로 기능을 빠르게 실행할 수 있습니다.

세탁기 조작부 (출처: LGE.com)

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

좌: 엄지의 운지 범위 (출처. SwifeFox), 우: 카메라 앱 촬영 화면

과업에 맞는 디자인하기

그렇다면 디지털 서비스에서 사용자가 해야 하는 과업들을 모두 효율적으로 디자인하는 것이 능사일까요? 반드시 그렇지는 않을 수 있습니다.

과업에 따라 적합한 UX 원칙을 우선순위로 두어 디자인하여야 합니다. 가끔은 효율적으로만 디자인된 UX가 사용자에게 치명적인 손실을 줄 수도 있습니다. 바로 사용자의 의도치 않은 실수로 인해 데이터 손실이나 금융 사고와 같은 리스크가 있는 과업에서는 안전성의 원칙에 더 우선순위를 두어야 합니다.

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