UX에서 확인해야 할 5가지 단계

사용자들은 앱이나 앱, 또는 스마트 기기를 사용하면서 원하는 목적과 바라는 보상이 있기 때문에 사용하는것이 일반적인 편이다. 허나 예상하지 못한 화면이나 목적과 부합하지 않는 등의 액션이나 결과물이 등장 하게 되면 흥미가 반감되거나 다른 선택사항을 찾게 되지만 예상외로 목적보다 어려운내용이 단순하게 풀리거나 시간을 단축시켜주는 실질적인 보상이 커진다면 찾는 빈도와 호감도가 높아지는 긍정적인 효과로 이어질 수 있다. 이에 관련한 단순하지만 명확한 5가지 명제를 정리해본다.

 

 

 

1. 목적의 오류

"동기부여... 내가 왜 이것을 해야하는지 확실한 목적을 잃어버리게 만든다."

쇼핑,모빌리티,금융등의 대 카테고리에서 가령 '여행을 하기 위한 환전'의 목적을 가지고 찾아보는 한 고객이 있다고 예시를 들어보자. 일반적으로 오프라인의 경우에서는 대면으로 직접 방문하기 때문에 

1. 은행에 간다
2. 번호표를 뽑는다.
3. 환전을 한다.

라는 단순하지만 명쾌하게 해결되는 사항에서 '시간'을 별도로 소비해야 하는 단점이 존재한다. 그렇다면 온라인으로 해결한다는 상황을 두고봤을 때 익숙한 디바이스인 모바일 앱에서 환전시스템을 이용한다고 생각해보자.

 

목적을 자세하게 1:1 대면으로 이야기 할 수 있는 오프라인 상황과는 반대로 온라인에서는 소비자가 메뉴를 찾아서 직접 해결해야 한다는 과제가 주어진다. 대신 '시간'을 보상받을 수 있다.

1. 은행 앱을 켠다.
2. 환전 메뉴를 찾는다.
3. 환전을 한다.

 

오프라인과는 순서는 똑같지만 2번 환전 메뉴를 찾는 쪽에서 어려움이 있을 수 있다. 왜냐면 환전이라는 사항은 입출금과 반대로 자주 쓰는 메뉴가 아니기 때문. 이 상황에서 은행에서 취급하고 있는 수많은 메뉴 및 광고들과 맞닥들일 때 목적을 잃어버리고 이곳저곳을 누르는등 방황하며 헤매는 경우를 방지하기 위해 개개인이 커스텀을 할 수 있게 하거나 검색기능을 장려해 주면 좋다.

1. 메뉴위치를 개인의 취향대로 바꿀 수 있게 만들어 준다.
2. 즐겨찾기 메뉴를 제공한다. 
3. 검색을 메인버튼으로 통일해 통합검색으로 도와준다.

더 나아가 오픈 뱅킹의 데이터 베이스를 수집해 개인 맞춤으로 사용한다면 큰 금액이 결제되거나 항공과 비슷한 결제 내역이 나오면 환전메뉴를 추천해 주는 추천방식으로도 사용해 볼 수 있다. 예상하지 못한 곳에서 자동으로 해결되는 문제에 대해 소비자는 대부분 긍정적인 반응을 보이고 호감도를 높여준다.

 

 

 

2. 인지의 오류

"표시가 되어야 할 것 이 되어있지않다."

위의 은행에서 환전을 처리할 때의 기능을 이어서 설명해 보자. 수 많은 UI의 집합체인 모바일 앱은 버튼을 누르거나 이동하는등의 패턴에 따라서 화면이 전개되는 방식을 가지고 있다. 팝업창이 떴는데 닫기 버튼이 없거나 해당하는 프로세스를 완료했음에도 메인화면으로 돌아가는 기능을 제공해 주지않는다면??

 

마치 오프라인에서 1:1창구를 이용해 환전을 마쳤음에도 미로를 통과해야만 나갈 수 있다고하면 어떨까?? 매우 짜증나는 경험을 겪을것이다. 온라인 환경의 특성상 목적을 마치면 완료된 화면을 제공해 주는 것은 당연하다. 완료 화면은 완료화면으로 끝나야 하는것을 잊지말자. 모바일앱을 이용하는 사람들의 목적은 '시간'을 절약하는 것이다. 

 

반응형

 

3. 행동의 오류

"행동에 따른 액션이 반응이 없거나 다르다."

행동은 목적을 가지고 움직이는것. UI의 집합인 온라인의 디바이스 성격상 보편적으로 가지고 있는 개개인의 경험등을 토대로 아이콘,심볼,의미등에 대해 행동이 결정될 수 밖에 없다. +는 더하기 -는 빼기. 공식적으로 사용되었을때에 널리 알려진 알기 쉬운 그림과 이용하는 대상. 디바이스의 성격을 고려하여 컨셉을 정하고 페이지를 정의하며, 기획 및 디자인을 작업해야 한다. 

 

폰트만 사용해서는 메뉴인지 모를 땐 아이콘을 앞에 붙여 메뉴로 인식하게 끔 만들어주고, 스크롤이 있는 페이지 일 경우 스크롤을 만들어 이동이 가능한 페이지라는것을 인식하게 해주며, 특히 중요한 부분은 내비게이션(사용자가 크게 이동할 수 있는 depth의 단계)을 단순하지만 명확하게 설계해 빠르게 목적으로 도달할 수 있도록 도와주어야 하는것에 유의하자.

 

다시 한 번 강조하지만 사용자에게 '시간'을 벌어주어야 함을 잊지말 것. 길게 보이는 문구도 정리하여 간결하게 표현되어야 행동에 인식이 확실해져 상황에 대한 오류가 줄어든다. 

 

 

 

4. 방향의 오류

"내가 있는 곳에 대한 명확한 위치를 확인하기 힘들다."

주로 이동을 해서 중분류, 소분류의 페이지를 확인 할 때 겪는 애로사항이다. 내가 목적을 가지고 들어왔지만 맞는 구역에 들어왔는지를 확인하기 힘들 때 벌어지는 상황으로 타이틀과 페이지를 명확하게 구분하고 분류해 중분류에 소분류가 들어가 있는 형태로 구현되어야 한다. 설명과 함께 포함되는 메뉴라던지 소분류에만 적용되는 페이지를 중분류나 대분류에 표현한다던지의 설정은 목적지를 찾는 소비자에게 있어 고난과 같다. 

 

광고는 광고답게, 랜딩페이지는 랜딩페이지답게, 목적성을 확실하게 드러낸 일관성있는 페이지의 구성의 컨셉을 미리 잡아 기획과 논의하고 정리하며 가이드화 해나가는것이 좋다. 이 과정자체가 UI,UX디자인을 넘어 전체적인 숲을 볼 수 있는 프로덕트 디자인의 첫걸음을 뗄 수 있음에 유의하자.

 

 

 

5. 연결의 오류

"연결이 자연스럽지 않다. A = A 가 아닌 A = B 짝 맞춤이 아닌듯 한 느낌이 든다."

화투를 예로 들 수 있다. 그림은 다르지만 짝 맞춤이 같은 개념인데, 각기 다른 성격의 페이지의 집합체와 컴포넌트가 모여 디바이스를 움직이는 용도로 사용되듯 내가 모바일 앱을 사용하면서 공통되는 앱을 사용하는 느낌을 주는것이 중요하다.

 

은행을 방문하거나 브랜드 음식점에 방문했을 때를 떠올려보자. 내가 오프라인으로 방문했을 때 은행을 방문했지만 음식점에 들어온 느낌을 받지는 않을 것이다. 

 

UI가 컨셉으로 정리되어 있어도 화면이 공통되지 않고 의도와는 상관없는 위치에 붙어버리게 되는것이 오류이다. 이는 전체적인 프로덕트 디자인의 개념으로 바라보아야 하는데 공통적으로 사용되는 레이아웃, 통일된 팝업의 위치와 설명글의 위치 컨셉에 맞는 아이콘 모든게 일맥 상통한다면 한 방향으로 흐르는 느낌을 받는다. 중간에 특수 페이지 때문에 이탈되는 현상이 발생해도 비중이 크지 않다면 특별한 페이지라고 생각하고 넘어갈 테지만 

대부분 인지에 중요한 요소로 정의되어 공통적으로 바라보는 시선은

1. 컬러가 차지하는 비중,
2. 폰트의 유형과 제목, 중간제목, 내용의 사이즈.
3. 페이지에 몇%의 비중으로 컨텐츠가 차지하고 있는지가 대표적이다.

UI도 좀 더 돋보이기 위한 별도의 효과등은 지양한다. 전체적인 페이지를 모았을 때 따로 떨어지는 느낌을 받는 페이지 위주로 공통사항을 적용해 나가는게 좋다.

 

 

마치며

특별한 광고페이지의 개념으로 접근한 후 별도로 끼워넣는 방식은 유지보수를 위해서라도 권장되지 않으며, 외부페이지의 연결등은 미리 선제적으로 알려줄 수 있어야한다. (특히 하이브리드 앱의 경우 필수로 요구되는 사항이다.) 광고가 들어가기 위한 공통적인 페이지를 따로 디자이너에게 요구하는 것이 좋다.