사용자의 맥락을 반영하는 유저 시나리오와 저니맵
사용자 시나리오는 페르소나를 주인공으로 삼아 제품, 서비스의 디자인을 이끌어내는 방법이다. 사용자가 제품을 사용하거나 불편을 겪는 상황을 그림으로 그린것을 스토리보드라고 하는데 사용자 시나리오는 스토리보드를 글로 표현했다고 보면 된다.
사용자 시나리오의 주체는 우리가 앞에서 작성한 페르소나이다. 그렇기 때문에 시나리오를 작성할 때는 사용자의 유저 시나리오가 사용자의 목표를 중심으로 작성되었는가를 반복적으로 확인해야한다. 잘 작성된 사용자 시나리오는 사용성 테스트에도 활용가능하다.
User Journey는 사용자들이 서비스, 제품을 이용하는 전체적인 순서를 표현하는 기법이다. 사용자 저니를 구성하는 데는 각 단계별 사용자의 만족도와 페인 포인트, 니즈에 따라 필요한 기능 등으로 구성된다.
User Journey는 문제를 단편적으로 보지 않고, 전체적인 흐름과 전후 사정을 감안해서 풍부하게 사용자가 겪는 문제점들을 이해할 수 있다. 그래서 실무에서도 리뉴얼이나 큰 피쳐 업데이트에 들어가기 전에 전체적인 방향성을 확인하고 로드맵을 짜기 위한 용도로 사용한다.
< 강의 미션 >
사용자 시나리오와 저니를 작성
Feature를 구체화하고 팀을 Align하는 유저 스토리
유저스토리(User Story)는 아주 짧고 간결한 형태의 문장으로 하나의 기능단위나 피쳐에 대해서 설명하는 것을 말한다. 유저 스토리가 어떻게 구현되어야하는지에 대해 내부인원들간의 합의를 이루기 위한 커뮤니케이션 도구로서 사용된다.
유저스토리는 크게 3가지의 요소로 구성된다.
- 'As' 사용자의 역할
- 'I want' 사용자의 목표
- 'so that' 그것을 함으로써 얻어지는 이득
각 유저스토리는 한 스프린트 내에서 사진과 같이 To Do, In Progress, Done의 순서로 왼쪽에서 오른쪽으로 이동하면서 개발되고 테스트 가능 단계에 이르러 실제 배포까지 진행된다.
유저 스토리를 잘 작성해 놓으면 구현이 되었다는 것에 대한 정의를 명확히 한 것이기 때문에 테스트 단계에서 테스트 케이스에 활용될 수 있다.
< 강의 미션 >
AS IS -> TO BE에서 도출된 핵심 피쳐들을 유저스토리로 작성
논리적인 흐름을 그리는 유저 플로우와 와이어프레임
테스크 플로우는 단순하고 하이레벨에서의 단계들만 순차적으로 나열한다. 이때는 여러 가지 발생가능한 분기나 에러케이스에 대해서는 고려하지 않고 큰 그림에서 순서를 확인하는 정도이다.
유저 플로우는 테스크 플로우보다 더 자세하고 분기나 에러케이스 등 구현에 필요한 조건들이 들어가 있다.
유저 플로우의 기본적인 요소로는 먼저 시작과 끝을 나타내는 모서리가 둥근 사각형, 그리고 동작과 프로세스를 나타내는 직사각형, 분기나 조건을 표현하는 다이아몬드 형태의 도형이 있다.
물론 더 많은 경우의 수 표현이 가능한 구성요소가 있다.
사용자가 진입한 페이지의 경우는 파란색으로 표시, 팝업이 나오는 경우는 초록색으로 Modal, 클릭을 하거나 입력을 하는 등의 사용자 액션은 user action, 시스템이 자동으로 이메일을 전송하는 등 프로그래밍적으로 처리되는 시스템 액션은 system action으로 표기한다.
비밀번호 재설정을 user flow로 표시하면 다음과 같다.
와이어프레임은 유저 스토리와 플로우를 시작적으로 표현할 수 있는 도구이다. 와이어프레임, 유저 플롱, 유저 스토리 모두 우리가 정의한 페르소나를 기준으로 작성되어야 방향을 잃지 않고 사용자에게 필요한 피쳐들이 구체화 될 수 있다.
와이어프레임의 경우 로우 피델리티이기 때문에 구성요소에 대한 러프한 내용이 들어간다.
예시 화면과 같이 와이어프레임에서 구조가 잘 잡혀 있어야 실제 디자인으로 변환하는 과정도 효율적이다.
< 강의 미션 >
유저 플로우와 와이어프레임 작성
운영까지 고려하는 백오피스 기획
백 오피스(Back Office)는 관리자 페이지라고도 하며 제품/서비스가 사용자에게 잘 보여질 수 있도록 운영관리를 목적으로 개발된다.
아래는 크라우드 펀딩의 백 오피스 예시이다.
펀딩 프로젝트 화면을 보면 프로젝트의 타이틀과 영상, 가격, 기간 달성률 등 을 볼 수 있다. 그리고 가격별로 구분된 리워드의 종류와 구성에 따라 사용자는 리워드를 선택하고 후원할 수 있다.
왼쪽 화면과 같이 프로젝트를 등록하기 위해서 오른쪽과 같이 펀딩 프로젝트를 생성하고 관리할 수 있는 피쳐가 필요하다. 프로젝트를 생성하기 위해서는 기본적으로 프로젝트 타이틀, 목표금액, 모금 기간, 영상링크, 프로젝트 상세 설명을 위한 에디터, 대표 이미지 등을 설정하고 프로젝트를 등록할 수 있어야 한다.
프로젝트에는 하나 이상의 리워드를 등록할 수 있어야 한다. 리워드에는 명과 가격, 배송비 등을 설정하고 각 리워드에 포함되는 구성품을 등록할 수 있어야 한다.
여기서 리워드와 프로젝트는 종속적인 관계로 각 리워드는 프로젝트 id를 통해 해당 프로젝트에 종속된다. 이 id들의 연결 관계를 이용하면 특정 리워드를 산 유저들의 연령 등 다양한 데이터 분석이 가능하다.
생산자가 판매현황을 확인할 수 있도록 대시보드와 정산에 대한 부분도 매우 중요한 백오피스의 기능 중 하나이다. 기본적으로 결제 내역이 나열되고 각 결제의 정보도 확인할 수 있어야 한다.
사용자가 길을 잃지 않도록 정보구조 잡기
Information Architecture는 줄여서 IA라고 부른다. IA는 지난 강의들에서 학습했던 유저 플로우, 페르소나, 와이어프레임 등 정보를 구조화하고 그루핑하는 모든 것을 의미할 수 있다.
메뉴나 카테고리를 구조화할 때 상위 정보구조에서 하위 정보구조로 분류를 하는 것이 기초적인 단계에서의 IA라고 할 수 있다. 이때 상위 개념과 하위 정보들이 사용자들의 멘탈모델에 맞게 그루핑되는 것이 필요하다.
사용자들이 생각하는 정보의 중요도와 설계자가 생각하는 정보의 중요도는 다를 수 있다. 이때 사용할 수 있는 것이 카드 소팅(Card Soring)이라는 정성적 사용자 리서치 방법이다. 리서치 참가자는 자신이 생각하는 기준으로 메뉴에 우선 순위를 세우고 그루핑 하는 과정을 갖는다. 한명의 의견이 아니라 여러 명을 대상으로 카드 소팅을 수행하고 공통적으로 보여지는 패턴을 기준으로 우선순위를 재조정하게 된다.
잘 설계된 내비게이션은 사용자들이 서비스 내에서 길을 잃지 않고 원하는 테스크를 수행할 수 있도록 도와준다. 우리가 흔히 접하는 서비스들에서 자주 발견되는 내비게이션 정보구조 세 가지를 소개하겠다.
첫 번째는 Hierarchical Navigation(하이라키컬 내비게이션)이다.
우선 순위가 있는 내비게이션으로, 홈에서 시작하여 한 뎁스씩 아래로 내려가는 방식으로 다른 페이지로 이동하기 위해서는 처음 시작한 페이지로 되돌아와야 한다.
두 번째로 Flat navigation(플랫 내비게이션)이다.
여러 카테고리의 콘텐츠 간 이동이 가능한 정보구조이다. 주로 하단 탭이 있는 모바일 앱에서 보여진다.
마지막으로 Content-Driven Navigation(콘텐츠 드리븐 내비게이션)이다.
콘텐츠의 이동이 자유로운 구조이며 콘텐츠 자체가 내비게이션을 결정하게 된다. 콘텐츠에서 콘텐츠오 이동이 가능한, 다른 정보구조보다는 이동의 유연성이 높은 정보 구조이다.
테스트 케이스 작성과 QA
프로덕트 조직에서 테스트 진행 프로세스는 보통 2주에서 4주간에 진행되는 스프린트를 기준으로 진행된다.
개발이 완료되면 QA를 위해 빌드된 버전에서 테스트를 진행하게 된다.
모든 케이스가 완료되면 QA가 테스트를 종료하고 스테이징(Staging) 버전으로 배포한다. 스테이징은 프로덕션과 동일한 환경을 갖추고 있는 것이 보통이다.
스테이징에서도 동일한 과정을 거쳐 문제가 없을경우 실제 사용자가 사용하는 프로덕션에 배포한다.
프로덕션 배포 후 회원가입이나 결제 등 중요한 피쳐의 경우 다시 한번 확인하는 스모크 테스트를 진행하는 경우도 많이 있다.
'7. 웹 디자인 > 7-1. UX 디자인' 카테고리의 다른 글
| UX 디자인 개론 - Chapter 7 (0) | 2021.07.21 |
|---|---|
| UX 디자인 개론 - Chatper 5 (0) | 2021.07.18 |
| UX 디자인 개론 - Chapter 4 (0) | 2021.07.17 |
| UX 디자인 개론 - Chapter 3 (0) | 2021.07.16 |
| UX 디자인 개론 - Chapter 2 (0) | 2021.07.14 |