19. 모바일 앱에서 학습을 위한 오버레이와 코치 마크
[3. 툴팁, 다이어로그, 학습을 위한 오버레이]
요즘 출시된 앱에서 투명한 오버레이 힌트가 있는 코치마크 같은 것들 또는 튜토리얼이 처음에 앱을 설치하게 되면 보여주고 있다. 이런 학습을 위한 스크린들이 불필요한 경우가 많지만 사용자를 올바른 방향으로 슬쩍 이끄는데 도움이 되기도 한다. 만약 당신이 코치마크 또는 몇몇의 다른 폼힌트 그리고 당신의 독특한 기능을 설명하기 위한 팁을 포함하기로 결심했다면 아래의 가이드라인을 따라 당신의 팁이 넘어야 하는 허들이 아닌 더 도움이 되게 만들어라.
짧고 집중되는 팁들
사용자이 당신의 앱을 사용하기 전에 매뉴얼을 읽을 것이라고 기대하지 말아라. 사람들은 어떻게 인터페이스를 사용해야 하는지 배우는 시간을 갖은 뒤 앱을 설치하지 않는다. 사용자들은 가능한 노력의 최소한만 사용해서 작업을 완료하려고 한다. 장기적으로 볼 때 복잡한 기능을 어떻게 사용하는지 배우는 것이 더 효과적이지만 사용자들은 그 시간을 투자하기 꺼려하는 모순이 있다. 웹 사용자들은 읽지 않는 악명이 자자한 사람(notorious를 어떻게 해석하누..?)들이고 모바일 사용자들은 제한적인 시간과 분산된 주의 때문에 더 읽지 않는다.
사람들이 지시내용을 읽는다 할지라도 한 번에 너무 많은 것을 보여주는 것은 사용자의 인자 과부하를 불러일으킨다. 사용자가 오버레이 힌트를 읽으면서 앱을 동시에 사용할 수 없기 때문에 그들은 지시내용을 외운 뒤 앱에 적용해야 한다. 안타깝게도 우리의 짧은 기억력은 많은 정보를 담아둘 수가 없고 20초 안에 정보가 사라져 간다. 그래서 한 개의 지시내용에 집중하는 것이 사용자 인터페이스의 설명할 수 있는 모든 부분을 설명하는 것보다 훨씬 효과적이다.
사용자가 집중해야 하는 지시내용의 양을 최소화하여 가장 중요한 행동하나에 집중하도록 한다. 전체적으로 글을 줄여 사용자가 그것을 읽도록 하고 지시사항을 따르도록 한다. 이 부가적인 콘텐츠를 보여주지 않는 아이디어는 코치마크에만 적용되는 것이 아니라 힌트에도 같이 적용되어 특정 기능을 사람들이 사용하도록 이끄는데 매우 설득되는 요소가 될 수 있다. 사용자들은 자주 그들이 올바로 이해했는지 확실하게 하기 위해 행동을 모방하기 때문이다.
유튜브 안드로이드 앱은 익숙하게 않은 상호작용에 대해서 한 개의 페이지에 한 개의 코치 마크를 보여주는 것에 집중하고 있다. 이런 힌트는 앱을 처음 설치한 새로운 사용자들에게 나타나고 사용자들은 관련 있는 앱의 부분에 한 번에 도달할 수 있게 된다.
한 개씩 적절한 시점에 힌트를 보여주는 것은 사용자가 지시사항을 이해하고 학습하는데 훨씬 쉬워지게 된다. 이 상호작용 패턴은 사용자가 이런 상호작용과 기능을 실제 작업하는 흐름 안에서 적용할 수 있도록 가르치는 데 있어서 추가적인 이점을 갖는다.
팁의 고리를 피해라
몇몇의 앱에서는 한 개의 같은 화면에서 한 개 이상의 기능에 대해서 설명하는 내용들이 노출된다. 힌트가 자주 나타나는 스크린에 노출된 유저는 힌트들이 얼마나 도움이 되는지에 따라 상관없이 힌트를 더 빠르게 닫으려고 하게 된다. 이것은 마치 각각의 사용자가 매우 작은 그릇(샷글라스 정도되는 크기이고 맥주잔 같이 큰 것이 아니다)을 갖고 있는데 당신이 너무 많은 것을 빠르게 부어버린다면 그것은 넘쳐버릴 것이다.
여러 개의 코치마크 또는 팁들을 연달아 보여주는 것은 사용자의 단기 기억력에 문제를 일으킬 뿐 아니라 당신의 앱을 사용하는 새로운 사용자들은 지나치게 복잡하고 버겁게 느껴질 것이다. 이런 문제는 사용자가 사용하길 포기하는데 충분한 요인이 될 수 있으며 사용자들은 간편한 대체 서비스들을 사용할 수 있도록 내보내는 것과 마찬가지이다.
Makr iPad 앱은 사용자가 앱의 새로운 섹션에 닿을 때마다 팁시리즈들을 보여주고 있다. 안타깝게도 이런 팁들은 너무 글자가 많고 사용자 작업을 수행하기 전에 여러 스태프의 과정을 보여주고 있다. 적어도 작업창 안에서 그 툴팁들은 해당하는 툴을 말풍선 화살표로 가리키지만 말풍선 안의 문장들이 다른 UI 요소들에 대해 설명을 하고 있어서 시각적으로 표시된 것과 다르기 때문에 혼란스럽다.
가능하다면 비주얼요소를 사용해라
비주얼요소와 함께 지시사항을 써준 내용은 사용자가 읽어야 하는 것들을 많이 읽지 않아도 기본적으로 무엇을 해야 하는지 알 수 있도록 돕는다. 추가적으로 엄청 짧은 텍스트는 긴 문단의 글보다 더 쉽고 빠르게 인지할 수 있게 된다. 간략하게 소개하는 것은 팁들을 단순히 없애버리는 것보다 우리는 도움이 되고 유익한 내용을 시리즈로 묶어서 하나의 비주얼이 포함된 힌트 모달로 띄워줄 수 있고 이런 팁들은 화면의 목적을 설명함으로 사용성을 증대시킬 수 있다.
Makr app을 새롭게 디자인한 목적에 따르면 사용자가 취해야 하는 가장 우선되는 액션을
사용자가 소화가능한 포맷의 이미지와 아주 짧은 텍스트와 함께 간략하게 보여줘야 한다.
사람들은 즉시 각자 만들고자 하는 템플릿을 고를 수 있고 원하는 목표를 완수할 수 있음을 이해시킬 수 있다. 이번 리디자인은 완벽한 해결책은 아니어서 여전히 사용자가 단계를 기억해서 작업을 해야 하지만 이전 버전의 다자인보다는 덜 어렵게 느껴진다. 특히 단순히 한 개의 화면을 편집하고 아이템 추가작업을 하는 것보다 더 복잡한 작업의 경우, 이와 유사한 간단한 단일 화면 소개가 더 긴 인트로나 여러 개로 나타는 팝업보다 더 좋은 방법이다.
UI와 똑같이 만들지 말아라
사람들은 즉시 스크린에 나타나는 힌트와 진짜 인터페이스의 요소를 구분할 수 있어야 한다. 만약 팁들이 단순하게 인터페이스와 비슷하여 완전히 분간이 되지 않으면
사람들은 헷갈릴 수 있다 그리고 팁을 보고 있는 줄 모르고 인터페이스로 오인지하여 팁에 있는 것들과 상호작용하려고 노력할 것이다.
우리의 최근 태블릿 사용성 연구 리포트에 따르면 사용자들은 윔블던 앱의 튜토리얼 안에 보이는 아이콘들을 선택하여 화면을 이동할 수 있을 것이라고 기대하였다는 결과를 알 수 있었다. 이 오버레이 설명 문구들이 적인 화면이 너무 잘 정돈되어 있어 사람들이 이것이 인터렉션 하지 않는 버튼인 것을 알아채지 못한 것이다.
힌트와 실제 인터렉션 요소를 확실하게 분별하기 위한 한 가지 쉬운 방법은 UI에서 사용되는 메인 폰트들과 달리 다른 폰트를 코치마크로 사용하는 것이다. 폰트와 일러스트레이션을 통해 코치마크인 것을 느끼도록 하기 위해서 핸드라이팅 폰트를 적용할 수 있다. 이렇게 핸드라이팅 폰트를 사용하면 이것은 사용자에게 인터페이스내용에 대한 팁이라는 점을 강조할 수 있게 된다.
Ness 아이폰 앱에 나타는 코치마크들을 살펴보면 파워유저들을 위한 오버레이 코치마크들로 히든 제스처 드을 알려주는 내용이 있다. 이런 유사성은 혼란을 야기시킬 수 있는데 사용자가 도움을 주는 팁의 내용인지 아니면 인터렉션 할 수 있는 위젯인지 구분하기 어려울 수도 있기 때문이다. (왼쪽은 단순 도움말이고 / 오른쪽은 인터렉션 할 수 있는 버튼인데 오버레이 디자인 상태가 너무 비슷하다.)
팁의 내용을 인지할 수 있도록 그리고 되도록 적게 적용해라
팁과 코치마크들, 그리고 다른 타입의 힌트들을 모바일앱에서 디자인할 때 주된 가이드라인은 가능한 한 짧게 만들어야 하는 것이다. 우선순위가 높은 사용자 작업에 집중하거나 일반적이지 않은 상호작용을 위해 디자인할 때 최대한 비주얼 요소와 간결한 문구를 사용하여 인지할 수 있도록 한다. 추가적으로 당신의 코치마크 디자인이 실제 인터페이스 요소와 구별되어 코치마크 힌트들은 상호작용하지 않음을 분명히 하라.
https://www.nngroup.com/articles/mobile-instructional-overlay/
