UX 기본지식 3가지; UX흐름 – PART4 주활동
UX 기본지식 3가지; UX흐름 – PART4 주활동
* UX 기본지식 시리즈는 라이트브레인 조성봉 이사의 출간 예정인 ‘This is UX UI Design’ 중 일부 내용을 발췌해 UX 실무자와 UX에 관심 있어 하는 여러분들의 이해를 돕고자 Rightbrain Lab을 통해 공개해 드립니다.
3.3.5. 주활동
주 활동이란 탐색, 조회 단계를 거친 다음 구매나 예약, 거래와 같이 사용자가 서비스의 핵심 기능을 실행하는 단계를 말한다. 주 활동은 보통 하나 이상의 화면으로 이뤄지며 정보 입력, 동의, 확인, 인증 등이 이용흐름 상에서 하나의 과정으로 포함된다.
* 네이버쇼핑에서의 구매
(조회 -> 쿠폰 -> 옵션,배송방법 선택-> 결제(배송지 > 할인/포인트 > 결제정보 > 동의) -> 인증 -> 완료)
주 활동은 복잡한 과정을 거치는 일이 많으므로 관련된 경험요소들이 복잡하게 느껴지지 않도록 해야 한다.
주 활동 단계에서 복잡함을 최소화시키기 위한 UX Tip
- 사용자가 예상하는 활동 순서를 그대로 따른다
- 이용흐름 상에서 맥락을 벗어나게 만드는 일을 최소화한다
- 불가피하게 맥락을 벗어나야 하는 일이 생기면 이용흐름의 앞이나 뒤에 배치하여 진행과정 중에는 주의가 산만해지지 않도록 한다
- 서로 다른 정보들은 시각적으로 영역을 구분하여 직관적으로 다르다는 점을 인지시킨다.
- 이용흐름이 뒤로 갈수록 선택지를 제한시켜서 목적에 집중하게 만든다.
- 선택, 입력, 확인, 동의와 같은 인터렉션을 할 때마다 관련된 UI가 매끄럽게 맞물리도록 한다.
주 활동은 서비스 분야마다 UX/UI가 어느 정도 평준화되어 있어서 탐색이나 조회에 비해서 문제가 적은 편이다. 그러나 아주 작은 사소한 것이라도 주 활동에서의 고충은 서비스의 이탈을 초래할 수 있다.
주 활동에서 사용자 고충의 대다수는 UI나 기능보다는 이용흐름 영역에서 존재한다.
* 위메프
상품 구매를 위해서 로그인 이후 비밀번호 변경 화면을 거치자 (상품 구매가 아닌) 홈화면으로 이동한다. 사용자의 이용 맥락이 완전히 끊겨버린 것이다.
* 롯데시네마
특정 영화를 예매하려는 목적으로 영화관까지 선택했으나, (예매가 아닌) 다시 영화를 선택하라는 화면으로 이동했다.
이처럼 주 활동 단계의 문제는 이용흐름이 사용자의 실제 경험과 달라서 발생하는 게 가장 많다. 위 영화 예매 사례는 번거롭긴 해도 다시 영화를 선택하면 되지만, 첫번째 사례는 아예 선택한 상품 정보를 벗어나 버리기 때문에 사용자의 고충이 심각해질 수 있다.
사용자들의 정보를 입력 받기 위한 양식(Form) 디자인도 주 활동 단계에서 큰 비중을 차지하다. 입력 양식에는 직접 입력, 옵션 선택, 동의, 불러오기, 확인 등 다양한 행위들이 반영된다.
* (좌측 위로부터) SRT 예매, 우리은행 상품가입, Kkday 여행상품 구매, SK 렌터카 예약
위 예시는 다양한 입력 양식들을 보여주고 있다. 직접 입력이 필요한 경우(SRT 예매)와 입력없이 옵션 선택만 하는 경우(우리은행 상품가입), 여러 유형의 정보를 한 화면에서 받는 경우(Kkday 여행상품 구매)와 단일 유형 정보만 입력받는 경우(SK 렌터카 예약)를 보여준다.
애초에 필요 이상의 많은 정보를 사용자에게 요구해서는 안되겠지만 꼭 입력이 필요하다면 최대한 그것을 간편하게 하면서 사용자의 실수에 관대하게 대응하고, 중요한 경험요소는 강조하면서 정보 영역간 구분을 명확하게 하는 것이 좋다.
입력 양식(Form) 디자인에서 지켜야 할 원칙
- 현재 적용 가능한 가장 간편한 방식을 제시한다. (예: 공인인증서를 대신하는 생체인증)
- 기본값을 제시하되 사용자가 다른 대안도 선택할 수 있도록 한다.
- 각 입력영역을 구분하고 짧고 명확한 레이블(Labe)과 입력 예시를 보여준다.
- 입력시 사용자의 실수가 있었다면 정확한 위치와 원인을 알려준다.
- 반드시 해야 하는 것과 그렇지 않아도 되는 것을 구분한다.
* 현대카드 카드 신청, 티월드
위에서 좌측 2개의 이미지는 대다수 사용자들의 휴대폰 번호 국번인 010을 기본값으로 제시한 사례와 사용자가 직접 선택해야 하는 사례이며, 우측 이미지는 카메라 촬영을 통해서 카드를 자동으로 인식하는 것을 보여주고 있다.
인터렉션과 UI가 매끄럽게 맞물리는 것도 중요하다. 인터렉션은 사용자가 뭔가를 수행하고자 하는 구체적인 행위를 나타낸다. 각 시점별로 사용자가 하는 구체적인 행위들이 UI 상에서 적절하게 맞물려서 나타나게 될 경우, 사용자는 더 쉽고 편리하다고 생각하는 경향이 있다.
* 카카오뱅크 이체하기
위 사례는 카카오뱅크를 통해서 누군가에게 이체하는 흐름을 보여주고 있다. 받는사람을 선택하면 바로 보낼금액을 입력하라고 뜬다. 보낼금액을 확인하고 다음 버튼을 누르면 다음 단계인 이체 확인은 부분 팝업으로 뜬다. 여기서 이체하기를 누르면 인증을 거쳐서 최종적으로 이체가 완료된다. 카카오뱅크는 군더더기 없는 행위와 필요한 정보들만 보여지는 UI 흐름이 매끄럽게 잘 맞물려 있다.
주 활동 중에는 사용자의 실수 또는 서비스의 문제로 인해 여러 가지 에러나 변수가 발생한다. 이러한 예외처리 상황에서는 사용자들이 상황을 빠르게 파악하고 적절하게 대처할 수 있는 방법을 알려주는 게 중요하다.
* 좌측 위로부터 MS 파워포인트, 구글지도, 아시아나항공
위 예시들은 이해하기 어려운 메시지로 인해서 상황 파악도 어렵고 대처방법도 알려주지 못하는 잘못된 예외처리 UX들을 보여준다.
– UX 컨설팅 그룹 조성봉
