XD 필수 항목: 앱을 처음 실행 시 표시할 도움말의 내용, 시기 및 방법

디자인

2016년 7월 업데이트

“앱을 디자인한 후 도움말을 넣어야 할까요?” 많은 분들이 이 질문을 받으셨을 것입니다. 어떤 사람들은 앱에 도움말을 포함하는 것은 마치 사용 설명서가 들어있는 제품을 판매하는 것과 같다고 말하기도 하고, 또 어떤 사람들은 사용자가 보는 것만으로도 작동법을 이해할 수 있도록 앱이 직관적이어야 한다고 말하기도 합니다. 어쨌든 한 가지는 확실합니다. 사용자가 앱을 열면 앱의 사용 방법을 알 수 있어야 한다는 것입니다.

이 기사에서는 널리 사용되는 앱 도움말과 함께 이러한 도움말을 활용하여 앱의 수준을 한 차원 높이는 방법에 대한 유용한 팁을 살펴봅니다.

도움말의 정의와 필요성

도움말은 사용자에게 의도적으로 기능을 알리는 과정이라고 할 수 있습니다. 이 과정의 목적은 앱으로 무엇을 할 수 있는지 이해하기 위함입니다. 도움말은 사람들이 앱을 사용할 때 진입로 역할을 하므로 내용이 포괄적이거나 혼선을 주어서는 안 되며 사용자에게 유익해야 합니다.

도움말에는 사용자가 처음으로 실행할 때 앱을 설명할 다양한 기법이 포함될 수 있지만 정말로 극히 중요한 경우에만 사용되어야 합니다. 앱이 간단하거나 따로 설명이 필요 없을 정도로 명백한 경우라면 도움말은 필요하지 않습니다. 앱 안에 복잡한 기능(예: 인앱 제스처)이나 숨겨진 기능이 있다면 사용자가 놓치지 않도록 설명하는 데 도움말을 유용하게 활용할 수 있습니다.

도움말은 어떻게 디자인 할 것인가?

도움말은 세심하게 디자인할수록 매우 효과적일 수 있습니다. 또한 도움말이 제대로 설계된 경우 전혀 도움말처럼 느껴지지 않고 핵심적인 사용자 경험의 일부로 느껴질 수 있습니다. 디자인과 관련된 많은 것이 그렇듯이 도움말 디자인도 말처럼 쉽지가 않습니다. 유익한 도움말 디자인을 만들 수 있는 다섯 가지 방법을 소개합니다.

1. 앱에 통합

도움말이 앱에 통합되어 있을수록 더 효과적입니다. 훌륭한 도움말이라면 사용자의 여정을 안내하는 보이지 않는 손처럼 느껴져야 합니다. 사용자가 앱을 시작하기 전에 슬라이드 쇼나 정적인 설명을 제공하기보다는 앱에 통합되어 상황에 맞는 경험(예: 힌트, 표시, 인앱 메시지 등)을 통해 앱의 기능을 단계별로 보여주는 것이 가장 효과적입니다.

포토샵 자르기 팁_facebook

포스퀘어(Foursquare)는 상황에 맞는 힌트 기능을 이용해 가장 흔히 사용되는 앱의 기능을 표시하고 있습니다

2. 가볍고 간단하게

노벨 경제학상 수상자 허버트 사이먼(Herbert Simon)이 “정보가 풍부해지면 관심은 가난해질 것이다”라고 말했듯이 도움말에 관한 또 다른 중요한 원칙은 바로 더도 말고 덜도 말고 사용자가 앱을 시작할 때 필요한 것만 표시하라는 것입니다. 정보 과다는 해로운 결과를 초래하므로 처음부터 무수한 페이지에 걸쳐 기능을 모두 소개하는 것은 금물입니다. 도움말은 사용자가 처음 사용하는 동안 가장 높은 우선순위 항목으로만 표시되어야 합니다. 사용자에게 부담을 주거나 혼란을 가중하는 방식으로 구현해서는 안 됩니다.

우버(Uber)는 “적을수록 좋다”라는 오래된 격언의 의미를 잘 알고 있습니다. 간단한 구절로 앱의 작동 방식을 설명하면 사용자는 1분도 지나지 않아 앱을 사용할 수 있어야 합니다.

walkthrough-3

우버는 자사 서비스의 핵심을 몇 가지 포인트로 요약하고 첫 번째 화면에서 기능이 아니라 혜택을 집중적으로 강조하고 있습니다.

앱 탐색에 제스처를 많이 사용하는 등 덜 직관적인 디자인을 사용한 앱은 보통 도움말을 통해 새로운 사용자에게 제스처 기반 인터페이스를 설명해야 합니다. 이러한 앱의 도움말은 시각적으로 매력적이어야 할 뿐만 아니라 지나칠 정도로 단순하고 직관적이어야 합니다.

walkthrough

메일박스(Mailbox)의 시작 화면은 매우 우수한 사례입니다. 밀어 넘기며 정적으로 설명하는 대신 사용자가 마치 개인적인 이메일을 확인하는 것처럼 각 페이지와 상호 작용하도록 디자인되었습니다.

3. 그래픽과 애니메이션 활용

첫인상이 당락을 좌우합니다. 보기 좋은 도움말은 사용자가 맨 처음 보는 것이기도 하고 참여를 유도하는 기회로 사용할 수 있기 때문에 매우 중요합니다. 도움말은 일러스트레이션을 활용할 때 훨씬 더 매력적입니다. 도움말이 애니메이션으로 되어 있다면 사용자의 시선을 단숨에 사로잡는 데 훨씬 좋습니다.

walkthrough

드롭박스(Dropbox) 페이지 도움말처럼 애니메이션을 채워 넣은 도움말은 사용자의 눈길을 끄는 데 효과적입니다. 이미지 출처: vektordigital

4. 인터랙티브하게

앱 둘러보기를 제공하는 것보다는 앱의 워크플로우를 노출하는 것이 훨씬 더 효과적입니다. 도움말은 앱의 작동 방식을 교육하기 위한 것이므로 사용자에게 앱의 기능을 가장 효과적으로 알려줄 방법은 직접 기능을 사용해 보도록 만드는 것입니다. 인터랙티브한 도움말은 제대로 구현하기만 한다면 사용자에게 엄청난 가치를 제공할 수 있습니다.

듀오링고(Duolingo)는 워크플로우를 통해 앱의 기능을 단계별로 알려주는 훌륭한 도움말의 사례입니다. 사용자가 회원 가입 없이도 앱을 시작할 수 있고 선택한 언어로 빠르게 테스트할 수 있습니다. 이 테스트는 사용자가 듣게 될 외국어 학습과 동일한 형식으로 디자인되어 사용자가 앱의 작동 방식을 정확하게 이해할 수 있도록 합니다.

walkthrough-3

다양한 앱 기능을 단순하게 보여주기보다는 앱의 기능을 하나씩 보여주는 것이 더욱 중요합니다.

5. 손쉽게 단계를 건너뛸 수 있도록 만들기

도움말의 시각적 요소가 얼마나 뛰어나건, 얼마나 유용한 정보를 제공하건 상관없이 도움말에 관심 없는 사용자는 항상 있습니다. 이들은 도움말 학습을 원하지 않고 곧바로 사용하고 싶어 합니다. 이를 위해 도움말을 선택 사항으로 만들어 사용자가 바로 앱을 시작할 수 있도록 하는 것이 좋습니다. 화면 오른쪽 상단에 “건너뛰기” 또는 “X”와 같은 간단한 건너뛰기 버튼을 추가하면 쉽게 해결할 수 있습니다.

walkthrough

슬랙(Slack)은 도움말을 선택 사항으로 만들어 사용자가 앱을 바로 사용할 수 있도록 합니다.

결론

제대로 만들어진 도움말은 사용자에게 매우 유용하고 강력한 툴이 될 수 있습니다. 훌륭한 도움말이라면 사용자의 요구 사항을 해결할 수 있도록 완벽하게 이해 가능한 설명을 제공해야 합니다. 사용자가 성공적으로 앱을 활용할 기초를 마련하는 사람은 여러분이라는 점을 명심하고 기억에 남을 만한 특별한 도움말을 제작하십시오.

 

Project Comet is now Adobe XD. A new experience in user experience.

프로젝트 코멧이라 불리던 새로운 UX 디자인 및 프로토타입 솔루션인 어도비 XD의 프리뷰 버전이 공개되었습니다. 현재 어도비 XD는 맥 OS에서 사용이 가능하며 어도비 ID만 있으면 무료로 다운로드 받을 수 있습니다.

DOWNLOAD

 

60e4bf5cdc458c49be1174619cf89ccb

 

저자 : 닉 배비치

닉 배비치(Nick Babich)는 개발자이면서 기술과 UX에 많은 관심을 가지고 있습니다. 그는 지난 10년 동안 소프트웨어 업계에서 개발을 전문으로 다루고 있으며 다양한 관심 분야 중에서 광고, 심리학, 영화에 특히 열정을 품고 있습니다.

 

 


디자인

Posted on 08-22-2016


토론에 참여