brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Aug 27. 2020

사용자가 읽는 워크쓰루 디자인

How to Design a Walkthrough That Users Will Read


앱이 제품이라면, 워크쓰루(walkthrough)는 사용자 매뉴얼이라고 할 수 있다. 워크쓰루는 제품을 처음 사용하는 온보딩(Onboarding) 과정에서 나타난다. 사용자가 앱을 사용하기 전에 앱의 주요 기능을 전반적으로 보여주며 새로운 사용자를 환영한다. 새로운 사용자가 앱을 혼란스럽지 않게 사용을 할 수 있도록 도와주는 역할을 하기도 한다.

워크쓰루가 없다면 사용자를 혼란스러운 상태로 방치할 수 있다. 그러나 워크쓰루를 읽기 힘들게 만들거나 내비게이션 하기 어렵게 만드는 것 역시 사용자를 혼란스럽게 만든다. 사용자는 혼란스러움을 피하기 위해 워크쓰루를 그냥 넘겨버릴 것이다.

워크쓰루는 사용자가 읽도록 만들어서 앱을 어떻게 사용하는지 알 수 있게 만들어야 한다. 이를 위해서는 내비게이션을 명확하게 하고 텍스트를 읽기 쉽게 만들어야 한다. 사용자는 또한 워크쓰루를 다시 참고하고 싶을 때 다시 불러들일 수 있어야 한다. 이 모든 것이 사용자 친화적인 워크쓰루를 위해서 필요하다.



읽기 쉬운 텍스트(Scannable Text)

읽기 쉬운 텍스트는 포인트를 간결하게 표현한다. 말하고 싶은 것을 말하되 가능한 한 적은 단어로 말하라. 포인트를 요약하는 몇 개의 단어로 요약된 제목을 사용하라. 제목 아래에 본문을 적용할 수 있지만 역시 짧게 만들어라.

텍스트를 내비게이션 근처에 배치하여 사용자의 눈이 너무 많이 움직이게 하지 말아라. 텍스트와 내비게이션의 거리가 짧아지면 시선의 이동도 짧아진다. 사용자는 적은 노력으로 텍스트를 읽고 내비게이션 할 수 있을 것이다.



명확한 내비게이션 버튼(Clear Navigation Cues)

어떤 디자이너는 워크쓰루에 내비게이션 버튼을 없애고 페이지내이션을 나타내는 점들만 보여주고 사용자가 스와이프 하기를 기대한다. 사용자는 그 작은 점들을 보지 못하고 놓치기 쉬울 뿐만 아니라, 그 점들이 스와이프를 의미하는 것인지 직관적으로 알기도 어렵다.

사용자가 내비게이션 하는 방법을 알아내도록 강제하지 말아라. '다음' 레이블이 붙은 버튼과 같은 명확한 시각적 단서를 사용해서 사용자가 어떻게 내비게이션 하는지 묻게 만들지 말아라. 버튼은 모든 사용자가 누르는 것으로 직관적으로 알아차릴 수 있다. 사용자가 스와이프로 내비게이션 할 수 있도록 하더라도, 버튼도 같이 배열하도록 해라.




CTA버튼으로 끝내라(End with Call-to-Action Button).

워크쓰루의 첫 화면에 CTA버튼을 배치하는 것은 좋은 생각이 아니다. 그렇게 하면 사용자는 워크쓰루를 생략하고 싶은 유혹을 받는다. 대부분의 사용자는 워크쓰루가 필요 없다고 느끼기 때문에 워크쓰루를 생략할 것이다.

그러나 워크쓰루를 생략한다면 사용자는 혼란스러워질 것이고 도움말 페이지를 다시 찾게 될 것이다.

CTA버튼을 마지막에 배치하고, 워크쓰루를 생략할 수 있는 옵션을 주지 말아라. 이 방법이 사용자에게 장기적으로 도움을 줄 수 있는 플로우이다.




이미지는 앱을 사용하는 방법에 대해서 보여주어야 한다(Images Should Show How to Use App).

어떤 디자이너는 워크쓰루에 주요 기능들을 홍보하면서 사용자에게 제품을 팔려고 한다. 사용자가 앱을 한번 다운로드했다면 더 이상 앱을 다시 팔 이유는 없다. 대신, 사용자는 앱을 어떻게 사용하는지 알고 싶어 할 것이다. 워크쓰루의 이미지는 유저 인터페이스를 보여주면서 주요 기능들을 사용하려면 무엇을 탭 하고 스와이프 해야 하는지 쉽게 이해할 수 있도록 짚어주어야 한다.




다시 볼 수 있게 만들어라(Retrievable Walkthrough).

사용자가 워크쓰루를 다 본 후에도 참고하기 위해 다시 보고 싶을 수가 있다. 내비게이션에 워크쓰루로 갈 수 있는 링크를 적용해서 사용자가 워크쓰루를 다시 보기 쉽게 만들어야 한다. 링크에는 tour, tutorial 또는  how to 같은 이름을 붙일 수 있다.




워크쓰루를 공원을 걷는 것처럼 만들어라(Make Walkthough Walk in the Park).

워크쓰루가 읽기 힘들고 내비게이션이 어렵다면 사용자들이 보는 것을 생략하고 싶을 것이다. 그러나 짧고 유용하게 만든다면 사용자들이 보는데 아무 문제가 없을 것이다.

워크쓰루는 도움말이나 고객지원 페이지가 아니다. 사용자가 쉽게 제품 사용을 시작할 수 있도록 도와주는 빠른 오버뷰(quick overview)이다. 앱을 사용하는 방법에 대한 자세한 내용은 도움말이나 고객지원 페이지에서 제공하면 된다.

사용자가 사용 설명서를 보지 않고 생략하는 이유는 너무 길어서 계속 읽기가 어렵기 때문이다. 워크쓰루가 사용자에게 사용 방법을 알려주더라도, 사용 설명서처럼 보이면 안 된다. 대신 스티키 노트처럼 읽기 쉽게 느껴져야 한다.




원문 출처: https://uxmovement.com/mobile/how-to-design-a-walkthrough-that-users-will-read/


작가의 이전글 웹디자인을 위한 컬러 선택
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari