UX 디자인 프로세스의 이용흐름을 알아보자.

UX 기획 사용자 흐름 설계

UX 기획 이용 흐름 설계

이용 흐름 설계란 사용자가 목표하는 작업을 끝내기 위하여 서비스 내에서 움직이는 흐름을 정리한 것이다. 사용자 시나리오보다 더욱 명확하고 구체적이며, 실제 개발할 때 참고 자료가 된다. 그렇다면 이용 흐름의 구성요소는 무엇이 있을까? 이용 흐름의 구성요소는 목표, 작업, UI, 행동, 판단이다. 목표는 사용자가 이용하고 있는 서비스를 통해서 얻고자 하는 최종값이며, 작업은 목표를 달성하기 위해서 실제 사용자가 취한 방법이다. UI는 서비스가 사용자에게 정보를 제시하는 구체적인 가이드라인이 된다. 행동은 사용자가 작업을 완료하기 위해 화면에서 보이는 주 활동과 보조 활동이 포함된다. 판단은 사용자가 행동 후 결과가 구분될 경우 그 분기점을 표시한 것이다. 이용 흐름은 작업흐름과 화면 흐름으로 구분되며, 최종적인 이용 흐름은 UI 설계 과정에서 구체화 된다. 작업흐름은 사용자가 행동을 취하는 단위를 표시하고, 화면 흐름은 화면 단위에서 화면이 전환될 때의 단계를 표시한다. 인터랙션 설계는 최근에 중요성을 인정받게 시작했다. 그 사유는 구글의 Material design이 보편화되었기 때문이며, 인터랙션 구성요소에는 제스처, 선택과 실행, 상태, 상태변화가 있다. 제스처는 화면의 특정 부분을 눌렀다가 떼는 동작인 탭, 화면의 한 지점을 누른 상태에서 사용자가 원하는 대로 움직이는 동작을 구현하는 패닝이 있다. 또한 떨어진 두 손가락을 누르면서 반대 방향으로 벌리는 동작은 핀치인, 동일한 방향으로 모으는 동작은 핀치 아웃이 있다.

 

UX 기획 선택과 실행, 상태 변화

선택과 실행은 화면과 화면을 이어주거나, 화면 내에 숨겨진 기능을 불러오고 사용자가 원하는 대로 화면의 상태를 변화시키는 것과 관계가 깊다. 선택한 항목을 제어할 수 있는 기능들이 나타나는 것은 맥락 도구이다. 해동 목록에 따라 기능이 나타나거나 제스처에 따라서 기능이 표시된다면 목록 내 활동이다. 화면 위나 하단에서 화면 내 정보를 조작할 수 있는 기능은 툴바이다. 하나의 버튼이 사용자의 조작이나 상황에 따라 상태가 변화된다면 상태변화 버튼이 있다. 목록에서는 작은 스와이프 기능으로 숨겨진 기능을 표시할 수 있다. 툴바는 보통 하단에 바 형태로 있거나 화면에 아이콘 형태로 둥둥 떠 있기도 하다. 진행 상태를 표시할 때는 예상 대기 시간에 따라서 화면에 표시하는 방식이 다르다. 4초 이하는 스피너로 4~30초는 진행 상태 바, 1분 이내는 퍼센트, 1분 이상은 남은 시간을 표시하는 것이 보통이다. 만약 남은 시간이 1분 이상이라면, 운영 중인 서비스와 관련된 콘텐츠를 제공하면 사용자의 무료함이 줄어든다.

UX 기획 게슈탈트 원리

UI 프로토타이핑 및 지켜야 할 원칙

레이아웃을 설계할 때는 보통 6가지를 고려해서 구성해야 한다. 메뉴바, 탭, 필터나 태그는 상/하단 내비게이션을 먼저 설계하고, 이미지와 동영상 영역인 미디어를 고려한다. 화면 설명문이나 상품에 대한 설명인 콘텐츠 영역도 참고하여 구성해야 한다. 버튼, 툴바, 도구는 실행 버튼과 고객 리뷰와 같은 결과 피드백을 확인할 수 있는 공지 사항 영역도 레이아웃 설계할 때 반드시 참고해야 한다. 레이아웃 설계는 와이어 프레임이라고 불리며, 서비스의 주요 화면을 대략 설계하기 위해 필요한 작업이다. GUI 디자인을 할 때 함께 작업하는 것은 그래픽 요소, 로고, 메타포가 있다. 그래픽을 통해 이용자에게 서비스의 인지도를 높이는 것이다. 단순한 화면 전환보다 사용자의 집중을 끌 모션 그래픽이 추가되면 우리의 서비스를 더 잘 이용할 동기를 제공하는 것이다. UI 프로토타이핑의 구성 요소는 레이아웃, UI 기본요소, 내비게이션, 화면 구성, 이용 흐름 구성 전체를 포함하며 해당 작업을 효율적으로 진행하기 위하여 어도비 스케치를 활용한다. 요즘에는 피그마를 활용하여 프로토타이핑을 설계하기도 한다. 좋은 프로토타이핑은 처음 보는 사용자라도 단시간에 빠르게 이해해야 하고, 어떤 형태라도 쉽게 인터랙션 되는 것이 좋다. 처음 이용하는 사용자를 위하여 튜토리얼 영상을 제공하고, 다른 툴들과 쉽게 연동되는 것이 좋다.

GUI 프로토타이핑 설계의 게슈탈트 원리

독일어로 인지를 뜻하는 게슈탈트 원리는 독일의 심리학자들에 의해 창시되었다. 인간이 사물이나 환경을 인지할 때 몇 가지 패턴이 있으며, 그것이 게슈탈트 원리다. 게슈탈트 원리를 잘 이해하면 GUI 프로토타이핑 작업에 많은 도움이 된다. 근접성의 원리는 거리상으로 가까운 요소가 서로 연관이 있다고 판단하는 것이다. 유사성의 원리는 색깔, 모양, 크기가 동일하다면 하나로 지각하는 경향이다. 색이 대비될수록 더 중요도가 높다고 판단하는 원리와 개별 요소가 동일한 방향으로 움직이면 하나로 인식하는 공동 운명의 원리도 있다. 

그렇다면 현업에서 심리학 게슈탈트 원리를 적용해서 설계를 진행하나요?라고 묻는다면 빠르게 적용해야 하는 현업에서는 시간 관계상 게슈탈트 원리를 이용해서 진행하기는 힘들다. 그럼에도 전문가로 발전하기 위해서는 GUI 영역도 반드시 고려해서 작업해야 한다. GUI 프로토타이핑 시 참고 사항은 사용자들이 명확하게 이해해야 하고, 사용자가 현재 화면에서 무엇을 하려고 하는지, 어떤 결과를 원하는지 알아야 한다. 시각적인 화려함보다는 정보의 명확성을 잘 드러낼 수 있도록 중요한 숫자, 아이콘, 그래프 등을 디자인하는 것이 좋다. 최대한 단시간에 간결하게 콘텐츠를 드러내는 것이 좋다.