4원칙. 유인 요소를 제공하라
author - 우뚝솟은비니 | UX 디자이너
Previous Brunch.
『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례을 살펴보고 있습니다.
*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)
제4원칙
유인 요소를 제공하라
유인 요소를 제공하여 각 기능과 콘텐츠의 발견 가능성(Discoverability)를 높여야 한다는 원칙
유인 요소
상호작용 과정 내내 사용자를 이끄는 조언이며 단서이다. 유인 요소는 적시의 팁(Jus-in-time tips)과 시각적 유도성(visual affordances)를 담고 있는데, 인터페이스에서 다음에 어떤 일이 일어날지 알린다.
앞서 1,2,3원칙에서 살펴본 드래그 앤 드롭, 제스쳐 노출 도구, 2차 메뉴 등의 단점은 발견 가능성이 부족하다는 점인데요, 이 발견 가능성을 높여주는 역할을 하는 것이 유인 요소입니다.
'사용자에게 유인 요소를 제공하는 방식은 상호작용 인터페이스를 성공적으로 만드는 비결 중 하나'라고 책에서 이야기하고 있습니다.
행위 유인 요소
사용자를 다음 테스크로 유도한다.
❶다음 웹툰 '이어보기'
다음웹툰은 어플리케이션 진입 시 이전에 읽던 컨텐츠가 있으면 화면 하단에 '이어보기'레이어를 노출하여 사용자가 컨텐츠를 찾아다니지 않고도 자연스럽게 읽던 페이지로 돌아갈 수 있도록 유도하고 있습니다.
❷카카오톡 '이전으로 돌아가기'
카카오톡 어플리케이션 내에서 쇼핑이나 검색등 컨텐츠를 소비하던 중에 카톡 알람이 떠서 카톡방으로 진입하면 화면 상단에 '이전으로 돌아가기' 버튼을 띄워주어 대화가 끝난뒤 자연스럽게 읽던 컨텐츠로 돌아갈 수 있도록 유도하고 있습니다.
행위 유인 요소 디자인 시 고려해야 할 것은 시각적 잡음입니다.
행위 유인 요소는 페이지에 있는 모든 요소와 상충하기 때문에 시각적 잡음을 일으키기가 쉽습니다. 때문에 유인하고 싶은 행위가 무엇인지 충분히 고려하고 더욱 명료하게 디자인하기위해 노력해야합니다.
다음웹툰: 상→하 스와이프해서 웹툰 리스트를 보는 방식이기 때문에 이어보기 레이어가 컨텐츠를 가리는 것 처럼 보이지만, 일단 스크롤이 시작되고 나면 곧 레이어가 사라지는 방식으로 시각적 잡음을 줄였습니다.
카카오: 보통 최근에 온 메세지인 맨 하단의 메세지부터 눈이 가기때문에 가장 신경을 덜 쓰는 상단에 버튼을 위치시켜 시각적 잡음을 줄였습니다.
둘러보기 유인 요소
사용자가 새로운 기능을 탐색하도록 유도한다.
Vibe의 둘러보기 유인요소
음악 스트리밍 서비스들 중에 비교적 최근에 런칭한 Vibe에서는 플레이 화면 진입 시 최초 세 번에 걸쳐 이용 가이드를 주고 있습니다.
❶가장 중요한 반복, 셔플의 기능 안내는 레이어 팝업으로 띄워 확실하게 기능을 인지하게 합니다.
❷~❸부가적인 기능 안내는 2~3초 가량의 짧은 모션으로 안내해줍니다.
Ikea place의 둘러보기 유인요소
이케이 플레이스는 이케아의 가구를 실제 공간에 배치해 볼수 있는 AR앱입니다.
이케아 플레이스는 어플 최초 진입 시에 일반적으로 봐오던 튜토리얼 형식이 아닌, 챗봇(같지만 답정너인 채팅)의 형식으로 몰입감있는 이용 가이드를 제시합니다. 카메라 사용 허용과 개인정보 동의 등 번거롭게 느껴질 수 있는 절차들도 채팅 안에서 자연스럽게 받아냅니다.
둘러보기 유인요소 가이드라인
・새로 디자인한 사이트를 열거나 런칭 시 일련의 기능들을 보여줄 필요가 있을때 사용하라
・가능한 실제 서비스 되고 있는 사이트와 함께 제공하라
・간단하게, 시작하기 쉽게, 중단하기 쉽게 만들어라
・인터페이스 문제를 해결하는 데 둘러보기 기능에 의존하지말아라
추측 유인 요소
사용자의 다음 행위를 추측하여 필요할만한 기능을 제공해 준다.
보통 이런 메세지를 받으면 대부분의 사용자들은 같은 패턴의 행동을 취합니다.
메세지를 꾹 눌러서→클립보드에 복사하고→각자 사용하는 뱅킹 어플로 진입하죠.
이때, 각 송금 어플은 어떻게 반응할까요?
카카오뱅크
1.첫화면에 계좌 정보가 미리 입력된 '이체하기' 레이어 팝업 띄워주어 송금 절차를 획기적으로 줄였습니다.
2.’복사한 계좌로 이체하기’ 라는 레이블도 명확해서 사용자는 이 팝업을 탭했을때 일어날 다음 상황을 정확히 예측할 수 있습니다.
3.화면 아래로 스크롤 했을때 '이체하기'레이어가 통장 밑으로 척 붙는 움직임이 보이시나요? 광고를 가리지 않는 움직임으로 시각적 잡음을 줄였습니다. 이런 세심한 모션을 이용해 '사용성'과 '비즈니스' 라는 두마리 토끼 모두를 잡는 여유로움까지 갖추고있습니다.
토스
1.카카오뱅크와 마찬가지로 첫 화면에 송금을 유도하는 버튼을 인레이 형태로 노출하고있습니다.
2.그런데, 항상 떠있는 '사진 찍어 송금하기'말풍선에 송금 안내 영역이 살짝 가리네요. 아래 빈 영역도 많은데 굳이 입력필드 바로 밑에 배치해야 했을 이유가 있을까요?
3.'복사한 계좌 정보 바로 입력' 이라는 레이블도 카카오 뱅크에 비해서는 약간 모호합니다.
카카오페이
1.카카오페이를 자주 사용하는 해비유저들에게는 해당이 없겠지만 처음 사용하거나 익숙하지 않은 유저들에게는 일단 카카오톡 앱 내에서 '송금'기능이 있던 탭 위치를 기억해 내고 해당 기능을 찾아가는데에 시간이 걸립니다. 카카오톡이 단지 메신저 서비스만 하는 것이 아니라 쇼핑, 검색, 뉴스 등 다양한 서비스를 제공하고 있기 때문이죠.
2.송금 버튼을 찾아서 송금 플로우로 진입했을 때 먼저 뜨는 것은 계좌번호를 입력해 송금하려는 사용자의 다음 행동과는 관련없는 '친구'탭입니다.
3.계좌번호 탭으로 이동 한 후에야 화면 하단에 계좌번호 입력 단계를 뛰어넘을 수 있는 레이어를 띄워줍니다.
카카오톡 플랫폼의 제약상 송금 버튼까지 사용자가 직접 찾아가야하는 것은 어쩔 수 없다하더라도, 일단 '송금'버튼을 누르고 카카오페이에 진입 한 첫 화면에서부터 복사된 계좌 정보를 노출 시켰으면 어땟을까요? 카카오톡의 아이덴티티를 살려서 복사된 계좌정보와 친구목록을 매칭시켜 아예 친구 프로필을 띄워줄 수도 있겠네요.
마지막으로 제가 주로 거래하는 KB국민은행 어플을 알아보겠습니다.
..........다음에 알아보도록 하자Coming next.
5원칙. 전환 효과를 사용하라
6원칙. 즉각적으로 반응하라
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
