by
May 06. 2019
[리뷰] 모바일 앱 디자인의 원리
Delight users and drive conversions
이 글은 모바일 앱 디자인에 대한 2016년 Google I/O 발표를 요약한 내용입니다. 또한 이 발표 역시 보고서를 요약한 것입니다. 안드로이드를 가진 구글이기 때문인지 모르겠으나, 2016년에 발표된 이 자료의 인사이트가 요즘 우리가 사용하는 UI에 많이 적용되었다는 느낌을 줍니다.
대부분의 모바일 앱들은 잘 사용되지 않고 있습니다. 25%는 한 번만 사용되고, 34%의 앱은 11번 이상 사용되지 않습니다. 이런 문제가 단순히 UI나 앱 디자인 때문이라고 보긴 어렵겠으나, 여러 원인 중 하나인 것은 분명하고 개선할 필요가 있습니다.
모바일 앱 디자인을 위해 구글에서는 25가지 원리를 발표했고, 6가지로 유형을 분류했습니다.
앱 탐색 및 탐사
앱 내 검색
거래와 전환
등록
디자인 폼
사용성과 이해
앱 탐색 및 탐사
사용자가 직접 위치를 바꾸는 것도 쉽게 (Make it easy to manually change location)
앱 제작자 입장에서 사용자를 배려하다 보면 과한 친절이 불편을 야기하는 경우가 종종 있습니다. 호텔을 선택할 때, 주변 호텔 정보를 바로 볼 수 있도록 주변에 있는 호텔 정보만 보여준다면 사용자는 불편할 수 있습니다.
미리 여행 전에 둘러볼 수도 있으니까요.
앱에서 웹으로의 전환이 필요하면, 자연스럽게
(Where app to web transitions are needed, make them frictionless)
요즘엔 이럴 일이 거의 없을 것 같지만 상황에 따라서는 웹 환경으로 이동시켜야 할 때가 있을 수도 있겠죠. 이런 때, 마찰 없이 / 자연스럽게 이동시키면서 이어지는 느낌을 주는 것이 좋습니다.
앱 내 검색
검색 칸을 확실히 보여줘라 (Prominently display the search field)
"검색 기능을 열어놨으니 이걸 누르고 검색해" 보다는 검색 칸이 보이는 것이 검색 기능이 있다는 것에 대한 정보 전달이 명확하고, 검색으로 연결되기 더 쉬울 것입니다.
필터 기능과 정렬 옵션을 제공해라 (Provide filter and sort options)
모바일은 화면이 작아 사람을 금방 피로하게 할 수 있습니다. 그런데 원하는 셔츠를 찾기 위해 모든 결과를 봐야 한다면 구매까지 가는 과정이 힘들겠죠. 필터와 정렬 같은 간단한 기능을 추가하는 것만으로 유저의 사용 만족을 높일 수 있습니다.
거래와 전환
상품 간 비교를 원활하게 (Enable comparison shopping features)
발표자도 어려운 작업일 수 있다고 언급했지만, 체크해놓고 후에 체크된 것끼리 비교하는 기능이 있다면 사용자는 더 합리적인 비교 후 선택할 수 있을 것입니다. 사람의 작업기억(working memory)에는 한계가 있기 때문에 좀 전에 스크롤 올려서 눈에 보이지 않는 것과 지금 보고 있는 것을 비교하기 쉽지 않을 것이고, 다양한 상품 비교는 더 힘들 것입니다. 모바일 환경에서 특히, 쉽게 담아놓고 후에 비교하는 기능이 유용할 수 있을 것 같습니다.
결제 수단을 추가하고 관리하는 일을 쉽게 (Make it easy to add and manage payment methods)
결제 관련 내용인만큼 당연한 얘기지만 기존에 배려가 없었던 것 같습니다.
등록
"sign in"을 "sign up"과 다르게 (Differentiate "sign in" from "sign up")
종종 sign in을 하고 싶은데 sign up을 눌러서 시간 낭비하는 경우가 있습니다. 차라리 log in과 sign up으로 이름을 지었다면 덜 헷갈릴 텐데 왜 이렇게 만들었을까 생각해본 적이 있는데 여기서는 register라는 단어로 대체했습니다.
비밀번호 인증을 자연스럽게 (Make password authentication a frictionless experience)
이제는 지문인증 방식이 너무 익숙해서 스마트폰으로 비밀번호를 입력하는 상황이 번거롭게 느껴집니다.
디자인 폼
유저 친화적 형태 (Build user-friendly forms)
컴퓨터로 회원가입을 하거나 핸드폰 번호를 입력하는 등의 상황에서 Tab 키를 많이 눌렀던 기억이 나는데, 최근 들어 번호를 끊김 없이 입력해도 알아서 010-xxxx-xxxx처럼 하이픈을 넣어주는 것을 종종 봤습니다. 상황에 맞게 자동 입력 기능을 끄는 것도 사용 가능한 공간을 넓혀주니 좋겠네요.
키보드는 필요한 텍스트에 맞게 (Match the keyboard with the required text inputs)
핸드폰 번호나 주민등록번호 같이 0~9의 숫자만 필요한 상황인데 qwerty 자판이 나오고 위에 조그만 숫자 키를 눌러 입력해야 하면 저 짧은 순간에 금방 피로해지죠. 상황에 맞게 자판이 나오면 유저의 만족도가 높아지겠네요.
사용성과 이해
비주얼 정보를 더 명확히 하기 위해 텍스트도 제공하자
(Provide text labels and visual keys to clarify visual information)
한자를 처음에 배우면 생각보다 쉽습니다. 어떻게 만들어졌는지 대강 이해가 되기 때문이죠. 그런데 한 글자로 표현하기 어려운 정보들이 생기면서 한자는 복잡해졌고, 저는 한자 공부가 재미없어졌죠. UI도 마찬가지입니다. 좋아요 버튼 같은 아이콘은 쉽지만 개인에 따라 이해가 다르거나 어려울 수 있는 것들은 점점 늘어납니다. 이럴 때 텍스트 라벨을 추가로 제공하는 것이 icon 유지를 고집하는 것보다 좋은 선택일 수 있습니다.
맥락에 맞춰 권한 허가를 받자 (Ask for permission in context)
뜬금없이 권한을 달라고 하면 의심부터 들게 됩니다. 그렇지만 지도 어플을 사용하는데 위치 정보 제공해달라고 하면 전혀 의심이 들지 않죠. 고객에게 그냥 전화번호 알려달라고 하면 의심부터 들지만, 당첨되면 연락받을 연락처 알려달라고 하면 거부감이 없습니다. 정보는 타이밍입니다.
