[번역]앱 사용 유도를 위한 첫 화면의 중요성
The Role Of Empty States In User Onboard
이 글에서는 앱을 처음 설치하여 사용하는 경우 컨텐츠가 없는 빈 화면에서 사용자에게 좋은 첫인상을 주고 사용 유도를 하는 방법에 대해 소개하고 있습니다. 첫 화면의 가치는 사용자가 앱을 처음 사용하는 상황에서 사용법을 가르치고, 앱이 추구하는 액션을 유도하면서 감성적으로도 즐거운 경험을 할 수 있도록 해주는 데 있다고 합니다. 그런 경험을 제공할 수 있는 방법에 대해 여러 가지 예시를 들어 잘 설명해주고 있습니다. 첫 화면이 비어있는 빈 화면일 경우 디자인할 요소가 없기 때문에 간과할 수도 있지만, 앱의 첫인상과 사용법 유도라는 매우 중요한 역할을 하므로, 전체 디자인에서 반드시 중요하게 고려하여 제작을 해야 한다고 하네요. 이 외에도 첫 번째 화면을 디자인하는 방법과 예시에 대한 다른 다양한 아티클들도 소개하고 있으니 첫 화면 디자인에 대해서 고민하고 있다면 한번 읽어보시길 바랍니다.
*이 글은 Smashing Magazine에 Nick Babich가 기고한 The Role Of Empty States In User Onboarding을 번역한 글입니다.
The Role Of Empty States In User Onboarding
사용자가 접하는 첫 번째 화면에서, 사용자가 앱에서 기대하는 것을 보여주어야 한다. 사용자가 당신의 앱을 처음 사용 후 지우는 일이 없도록 하려면, 사용자에게 주요 테스크를 어떻게 완수하는지 알려주고, 다음에 다시 방문하고 싶은 마음이 들도록 만들어야 한다. 다시 말해서, 사용자가 성공적으로 앱 사용을 시작하고, 처음 사용하는 동안 앱에 집중할 수 있도록 해야 한다는 것이다.
처음 시작하는 과정(onboarding process)은 사용자가 당신의 앱을 성공적으로 사용할 수 있도록 하기 위해 매우 중요한 단계이다. 첫인상을 줄 수 있는 기회는 단 한 번밖에 없다. 이 글에서, "빈 화면(empty states)"이라 불리는 간단한 패턴을 이용해서 앱을 처음 시작하는 과정에 어떻게 접근할 것인지 몇 가지 팁을 알려주려고 한다.
What Is An Empty State?
대부분의 앱은 콘텐츠라는 가치를 제공한다. news feed, to dp app, system dashboard이건 사용자가 앱을 사용하는 이유는 콘텐츠를 보기 위해서이다. 그래서 빈 화면(아직 사용자에게 보여줄 컨텐츠가 없는 상태의 화면)을 어떻게 디자인할지 깊이 고민해볼 필요성이 있다.
기본 상태가 빈 화면인 앱의 스크린은 사용자가 데이터를 입력하기 위해 한두 단계를 더 거치는 것을 필요로 한다. 사용자에게 페이지에 어떤 컨텐츠가 나올지 알려주는 것 외에도, 빈 화면은 사용자에게 앱을 사용하는 방법을 가르쳐주어야 한다. 사용하는 방법이 한 단계로만 이루어져 있어도, 가이드는 사용자가 앱을 올바로 사용할 수 있도록 다시 확신을 줄 수 있어야 한다.
Expensify의 빈 화면은 사용자가 어떻게 시작해야할지 알려주고 있다.The Value Of An Empty State During Onboarding
사용자가 앱을 지속적으로 사용할 수 있게 해주는 경험의 관점에서 첫 번째로 사용하는 빈 화면을 생각해 보자. 빈 화면을 사용자를 교육하고 앱에 잡아둘 수 있는 도구로 사용해야 한다. 이 화면을 nothing에서 something으로 바꿀 수 있는 기회로 활용하여라.
EDUCATE USERS
첫 번째로, 빈 화면은 사용자가 맥락을 이해하도록 도와주어야 한다. 무엇이 일어날지 예측을 할 수 있게 해주는 것은 사용자를 편안하게 해준다. 이런 정보를 담는 가장 좋은 방법은 show-or-tell 형식이다 : 사용자에게 화면에 컨텐츠가 채워졌을 때 어떻게 보일지 보여주거나, 컨텐츠를 채울 수 있는 명확한 방법을 말해주어야 한다.
PROMPT TO ACTION
대부분의 빈 화면은 그 화면이 무엇인지, 그리고 왜 보이는지에 대해 말해줄 것이다. 그러나 효과적인 빈 화면은 더 깊이 들어가서 당신이 다음에 무엇을 할 수 있는지 알려주기도 한다. 사용자를 교육하는 것도 중요하지만, 진정으로 첫 빈 화면이 성공하려면 사용자의 액션을 유도해야 한다.
CREATE PLEASURABLE USER EXPERIENCE
앱은 기능적(functional)이고(사용자의 문제를 해결해주고), 사용성이 좋아야(usable) 하는(사용법을 배우기 쉽고, 사용하기에 쉬운) 동시에, 사용하기 즐거워야(pleasurable) 한다. 빈 화면은 사용자와 인간적인 관계를 만들고, 앱에 개성을 가져다줄 수 있는 훌륭한 역할을 할 수 있다.
How To Design An Ideal Blank State
빈 화면이 사용자의 관심을 끌 수 있음에도 불구하고, 디자인과 개발을 하면서 간과되는 경향이 있다. 왜냐하면 보통 레이아웃의 모든 요소들이 꽉 차서 잘 정리된 상태를 가정하고 디자인을 하기 때문이다. 그러나 컨텐츠가 사용자의 행동을 이끌어내지 못할 때 페이지 디자인을 어떻게 해야 할까? 빈 화면 디자인은 크리에이티브와 사용성을 위한 놀라운 기회가 될 수도 있다.
AVOID DEAD-ENDS(막다른 길을 만들지 말라)
가장 최악의 빈 화면은 사용자를 막다른 길에 떨어뜨려 놓는 화면이다. 막다른 길은 사용자를 혼란에 빠트리고, 불필요한 동작을 시도하게 만든다. 아래 Modspots의 두 가지 post화면을 비교해보자 : 유용하고 스마트하게 만든 빈 화면은 사용자가 앱 사용을 시작할 수 있도록 가이드를 함으로써 사용상의 마찰을 줄여준다.
Modspot의 화면은 사용자를 안내하기 위해 빈 화면을 효과적으로 이용하였다.두 번째 화면은 가이드를 제공하지 않는 빈 화면을 보여주기 위해 수정을 한 화면이다. 막다른 길 외에 어떤 예시도 없다.
같은 화면의 막다른 길 버전은 빈 화면이 중요한 이유에 대해 잘 보여주고 있다.KEEP EMPTY STATES VISUALLY SIMPLE
훌륭한 빈 화면의 아름다움은 단순함에 있다. 가장 중요한 컨텐츠를 맨 앞에 가져오고, 방해 요소를 최소화하기 위해 미니멀한 디자인으로 접근을 해야 한다. 잘 쓰이고 쉽게 읽히는 카피(명확하고 간결한 설명이나 따라 하기 쉬운 안내)를 좋은 비주얼로 포장해라.
Dropbox for iOSMAKE EMPTY STATES INTUITIVE
빈 화면이 단순히 심미적 아름다움에 관한 것만은 아니다. 사용자가 맥락을 이해할 수 있도록 도와주는 기능을 한다. 앱을 사용하기 위해 임시로 보이는 화면이기는 하지만, 사용자와 커뮤니케이션을 극대화하면서 어떻게 빈 화면을 사용할 수 있는 화면으로 만들 수 있는지 방법을 알려주어야 한다.
Google Photo의 빈 화면을 예를 들어보자. 시각적으로 훌륭해 보인다. 아름다운 그래픽으로 잘 만들어진 화면이다. 그러나 이 빈 화면은 사용자가 맥락을 이해하는 데는 도움을 주지 못하고 있다. 그리고 아래의 질문에 대한 대답을 하지 못하고 있다.
Collection이 무엇인가?
Collection을 어떻게 만드는가?
Google Photos for iOS.LET PERSONALITY SHINE
좋은 첫인상은 단지 사용성에 관한 것만은 아니다. 그것은 personality에 관한 것이다. Personality는 당신의 앱을 기억에 남게 해 주고, 사용하면서 즐거움을 느끼게 해준다. 당신 앱의 첫 번째 빈 화면이 유사한 제품들과 다소 다르게 보인다면, 사용자는 그것을 알아차리고 제품 전체의 경험 역시 다소 다를 것이라는 기대를 하게 될 것이다. 아래의 Khaylo Workout은 빈 화면에서 peronality와 tone을 보여주고 있다.
Khaylo Workout for iOS.ENCOURAGE USERS TO ACT
당신의 우선적인 목표는 사용자가 가능하면 빨리 어떤 동작을 취해서 화면이 비어있지 않게 만드는 것이다. 빈 화면에서 액션을 유도하려면, 사용자가 앱에 동작을 취하면 얻게 될 이득을 보여주는 것뿐만 아니라, 바람직한 동작 또한 유도해야 한다.
Facebook Messenger의 설치 화면을 살펴보자. 사용자가 이 화면을 마주치면, 사용을 장려하는 화면을 보게 된다. 화면은 사용자에게 제품의 장점(메신저를 사용하면서 사진이나 비디오를 찍을 수 있다는 것)을 알게 해준다. 'Install'버튼은 빈 화면을 제거하는데 필요한 다음 단계로 안내를 하고 있다. 사용자는 install버튼을 누르는 것 외에는 다른 방법이 없다.
Facebook for iOSIF POSSIBLE, PROVIDE CONTENT THAT'S PERSONALIZED
당신의 앱을 사용자에게 개인화할 때, 사용자에게 제품의 가치를 빨리 보여주어야 한다. 개인화의 주요 목적은 사용자가 별도의 노력을 하지 않아도 사용자의 특정한 필요와 관심에 따라 컨텐츠를 제공해주는 것이다. 앱은 사용자를 profile 해서 인터페이스를 맞춰주어야 한다. 사용자의 profile에 따라 빈 화면을 채워라.
사용자가 당신의 앱을 바로 사용할 수 있도록 첫 화면을 제공하여라. 예를 들면, 독서에 관한 앱은 사용자의 정보를 참고하여 관련된 몇 권의 책을 추천해줄 수 있다.
Image credits: Material DesignBAKE EMOTION INTO UI
빈 화면은 당신의 비즈니스나 제품의 인간적인 면을 보여줄 수 있다. 긍정적인 감성을 자극함으로써 사용자에게 친근감을 만들어줄 수 있다. 빈 화면에서 어떤 감성을 보여줄 것인지는, 앱의 목적에 따라 달라진다. 아래의 구글 행아웃의 감성적인 빈 화면은 사용자에게 초대를 유도하기 위해 어떻게 사용자의 관심을 유도하는지 보여주고 있다.
Google Hangouts for Android.물론, 위와 같이 감성적인 디자인을 보여주는 것은 위험하기도 하다. - 어떤 사용자는 무슨 의미인지 모를 수도 있고, 싫어하는 사람도 있을 수 있다. 그러나 어찌 되었든 감성적인 반응을 자극하는 것이 무관심하게 두는 것보다는 훨씬 낫다.
INTRODUCE SUCCESS STATES
앱을 처음 사용하는 사용자가 중요한 task를 수행하는 순간은 사용자와 제품 사이에 긍정적인 감정을 생기게 하는데 매우 중요한 순간이다. 사용자가 사용법을 알아차리는 훌륭한 작업을 수행했다는 것을 축하해주도록 하자.
성공 화면(Success state)은 사용자가 수행한 작업에 대해 축하해 주고 다른 인터렉션으로 유도하기 위한 좋은 기회가 되는 시점이다. 예를 들면, task 리스트를 완료하는 것은 사용자에게 성취의 순간과 같은 느낌을 줄 수 있다. 이때, 그런 느낌을 북돋아주기 위해 "Well done!"과 같은 축하의 메시지를 던져줘야 한다. 이러한 성공 화면은 사용자의 기분을 좋게 하고, 다음 단계로 넘어갈 수 있는 동기를 제공한다.
WriteUpp for iOSDig in Deeper
아래의 관련 자료들에서 사용자가 앱을 처음 사용하는데 도움이 되는 것들(user onboarding)에 대해 참고할 수 있다.
Useronboard는 현재 사용되는 onboarding 사례와 분석에 대해 좋은 자료들을 제공하고 있다.
Credits: UseronboardUXarchive에서는 유명한 앱에서 onboard를 어떻게 사용하고 있는지에 대한 좋은 자료를 볼 수 있다.
UI-patterns는 onboarding에 대한 많은 사례를 제공하고 있다.
Credits: Ui-patternsEmptystat.es는 2013년부터 적용되었던 빈 화면에 대한 방대한 스크린샷을 담고 있다. 이 아티클의 대부분의 화면은 여기서 참고하였다.
Conclusion
빈 화면은 절대 빈 공간으로 느껴져서는 안 된다. 사용자가 앱을 열자마자 빈 화면을 보게 만들지 말라. 빈 화면은 사용자 경험에서 일시적이거나 사소한 부분이 아니기 때문에 많은 노력을 기울여서 만들어야 한다. 실제로는 다른 디자인 요소들과 똑같이 중요한 화면이다. 그리고 사용자가 앱을 처음 사용할 때, 관심을 가지게 해 주고 기쁘게 해 줄 수 있는 무한한 기회가 있는 화면이다.
