Coach Mark 코치마크 가이드 번역

jaeyoung kang
10 min readJun 24, 2018

--

이 페이지는 구글 검색하면 상위에 나오는 페이지이고 닐슨앤노먼 그룹이라고 나와있다. 닐슨과 노만은 UX계의 권위자로 신뢰할만하고 판단해서 번역함. 닐슨과 노만의 이름없이도 충분히 도움이 되는 글이 였다. 내 번역글은 원문과 많이 다르다. 내가 이해한대로 상당수의 문장을 재구성했다.

모바일 앱을 위한 설명/교육/ 안내 오버레이(Instructional Overlays) 와 코치마크(Coach Marks)

요약 : 모바일앱에서 설명은 반드시 눈에 잘 들어오는 것( scannability)을 최우선으로 설계되야만 한다. 사용자들은 코차마크 설명을 중요하게 여기지 않아서 완전히 다 읽지 않고, 무시하는 경향이 있다.

오늘날 마켓에 있는 대부분의 앱은 코치마크를 가지고 있다. 또는 첫 실행때 튜토리얼을 보여준다. 그 설명화면이 불필요할때도 있지만 사용자를 올바른 방향으로 넛지하기게 도움이 될때도 있다. 다른앱에는 없는 고유한 특징을 설명하려고 코치마크 등의 힌트를 포함하기로 결정했다면, 이 지침을 따르라. 제시된 팁이 사용에 장애물로 느껴지는것이 아니라 도움이 되도록 하려면

짧게 만들고, 팁에 집중

유저들은 앱을 사용하기전에는 설명서를 못읽는다. 사람들은 인터페이스 사용법을 배우는데 시간을 쓰려고 앱을 실행하지 않는다. 오히려 가능한한 짧은시간과 노력을 들여서 작업을 완료하려고한다. 이것이 액티브유저 파라독스이다. 고급기능을 효과적으로 사용하게 하는 방법을 배우면 길게 봤을때 결국 실질적으로 시간을 아낄 수 있는데 배우려고 하지는 않는다. 웹 사용자는 내용을 안읽기로 악명이 높고 모바일 사용자들은 제한된 시간과 단편적인 관심으로 인해 상황이 더 않좋은 편이다.

사람들이 설명을 읽기를 결정했다 하더라도, 한번에 설명이 너무 많이 보이면 인지부하가 늘어난다. 사용자들은 힌트 읽기와 앱 사용을 동시에 못한다. 결국 그들은 힌트를 암기해서 적용 할 수 밖에 없다. 불행하게도, 우리의 단기 기억은 많은 정보를 유지못한다. 단기기억 정보는 약20초안에 사라진다. 따라서 모든 가능한 UI 영역을 설명하려고 시도하는것보다, 한가지에 집중하는것이 더 효과적이다.

모닝스타 아이패드 앱 : 단일 기능에 초점을 맞추기보다는 사용자가 화면에서 수행 할 수있는 모든작업을 설명한다. 그리고 대부분은 설명이 더 필요하다.

설명의 최소화는 사용자의 주의를 하나의 주요한 액션에 집중시킨다. 텍스트가 적을수록 전반적으로 사용자가 팁을 읽고 실제로 따를 가능성이 커진다.

유튜브 안드로이드 앱: 사람들이 읽는 데 필요한 텍스트의 양을 최소화하고 UI의 단일 요소와 인터렉션하는 방법에 중점을 두어 사용자가 이를 시도하도록 유도한다.

YouTube Android 앱은 각 코치 마크를 하나의 익숙하지 않은 인터렉션에 집중한다. 이 힌트는, 새 유저의 첫실행시, 한번에 하나씩, 사용자가 앱의 해당영역에 다가갈때 나타난다.

힌트를 하나씩, 적절한 순간에 표시하는 것은 사용자가 설명을 더 쉽게 이해하게 만든다. 추가로 사용자가 어느시점에서 이 인터랙션을 써야할지 타이밍도 알려준다.

연쇄 팁을 피하라

일부 앱에서는 한 화면에 설명 할 기능이 둘 이상일 수 있다. 빈번한 힌트 표시는 힌트가 얼마나 도움이 되는지에 관계없이 힌트를 더 빨리 무시하게 만든다. 이는 아주 작은 그릇에 설명을 담는것과 같다. 너무 많이 따르거나 빨리 따르면 넘칠 것이다.

한줄에 여러개의 코치마크 또는 팁들 보이는것은 사용자의 단기기억에 문제를 만드는것 뿐만아니라, 앱을 지나치게 복잡하게 보이게해서 새로운 사용자가 사용하는데 겁먹을 수 있다. 이것 하나만으로도 해당앱을 쓰지 않고 다른앱을 쓰게하는 이유가 된다.

The Makr iPad 앱은 사용자가 앱의 새로운 영역에 도달했을때 연쇄적으로 팁들을 보여준다. 이들은 글이 너무 많다. 그리고 사용자가 어떤것을 할 수 있게되기 전에 여러 단계를 제시한다. 사용자들은 도움말이 표시되는 동안에는 유아이를 사용 할 수 없다. 결국 모든 단계를 외워둬야만한다. 또 얼마나 많은 팁이 있을지 알려주지 않고, 모든 팁을 기억하게 하는것은 사용자에게 매우 위협적 일 수 있다.

Makr iPad app: 연쇄적으로 팁을 보여주는것은 도구와 상호작용하기전에 모든 팁들은 읽고 외워야만 하므로 불필요한 사용자 작업기억부하의 원인이 된다.

Makr’s 팁은 시각적 인 것이 아니라 텍스트 기반이여서 사용자가 빠르게 탭해버리면 정보를 제데로 흡수하지 않을 가능성이 높다. 그리고 자신의 어떻게 작업하는것이 좋은지 모르는 상태로 작업을 하게 된다.

가능하면 Visuals(시각적 표현) 사용

설명옆에 Visuals를 포함하면 글을 많이 읽지 않고도, 무엇을 해야하는지에 대한 기본적인 아이디어를 얻을 수 있다. 추가로, 매우 짧은 텍스트는 Makr에서 사용되었던 긴글의팁보다 더 빠르고 쉽게 스캔 할 수 있다. 어플리케이션의 새로운 영역에 간단한 소개를 넣어서 목적을 설명하면 그 기능의 사용성을 늘릴 수 있다. 그래서 원래의 긴글의 팁들을 Visuals와 짧은 텍스트로 조합해서하나의 모달에 모아 넣으면 유저에게 훨씬 더 도움될 수 있다.

다음의 Makr 앱의 개선안은, 사용자가 취해야할 주요 행동들이 아주 짧은 텍스트와 이해하기 쉬운 포멧의 이미지들로 간단 명료하게 설명한다. 사람들은 그들의 목표가 선택한 템플릿을 개인에 맞춰서 변경하는것이라고 바로 이해할 수 있다. 그리고 그들이 목표를 완수하기 위해서 무엇을 할 수 있는지도 즉시 이해 할 수 있다. 이 개선안은 완전한 해결책은 아니다. 여전히 사용자들이 스탭들을 기억하기를 요구한다. 하지만 최소한 이전버전보다 사용자를 겁줘서 엄두를 못내게 하는 것은 줄인다. 특히 단순히 항목을 편집하고 추가하는 것보다 더 복잡한 작업의 경우, 이런식의 간단 소개 화면은 장황한 인트로나 연속되는 팝업 팁들의 좋은 대안이다.

Makr iPad app에 제안된 개선안 : 큰 블록의 텍스트 설명을 읽고 암기하 지 않고, 간단한 텍스트와 그림이 있는 모달로 해당 페이지의 주된 목표를 이해 할 수 있다.

UI랑 비슷하게 만들지 마라

사람들은 힌트화면과 실제 유아이 요소를 즉시 구별 할 수 있어야 한다. 팁이 인터페이스를 설명하고 있다는 것이분명하지 않으면, 사용자에게 혼란을 준다. 사람들은 튜토리얼을 보고 있다는것도 모르고 그 팁들을 조작하려고 시도 할 것이다.

Tablet Website 및 Application UX 연구 보고서에서, 사용자들은 Wimbledon 튜토리얼에서 표시된 아이콘이 네비게이션 될거라고 오해하더라. 설명 오버레이가 너무 깔끔해서 사람들은 이게 인터렉션 안된다는걸 몰랐다.

Wimbledon iPad app : 어떤 사용자들은 이것이 힌트 오버레이라는것을 모르고 눌러본다.

힌트와 실제 유아이 사이에서 분명한 차이를 만드는 쉬운방법은 메인 유아이와 다른 폰트를 쓰는것이다. 손으로 쓴 느낌의 폰트나 일러스트레이션 같은 것들이 괜찮다. 기능의 일부가 아니라 UI에 대한 설명이라는 것이 분명하기 때문이다.

Ness iPhone App: 오른쪽 그림은 사용자가 스와이프 업하면 나오는 앱의 부가 가능이다. 이 기능의 디자인에 사용된 글꼴과 스타일은 왼쪽 그림의 코치마크와 동일하다.

팁이 눈에 잘 들어오게하고 서로 떨어진 상태를 유지

모바일 앱용 팁, 코치마크 등 힌트를 주기위한 형식을 디자인할때, 기억 할 중요 지침은 가능한한 짧게 유지하라이다. 짧게 유지하려면 힌트를 보여줄 기능들을 선별해야하는데 앱의 핵심작업이나 다른 앱에서 볼수 없는 이례적인 인터렉션에 힌트를 집중해야한다. Visuals 및 간결한 텍스트를 사용하여 최대한 눈에 잘 들어오게 디자인해야한다. 추가로 코치마크 디자인은 실제 UI와 분명히 구분되게해서 사용자에게 이 힌트는 인터렉션이 안된다는 것을 알게해야한다.

사례 연구

위문서에서 코치마크에 대한 기본적인 지식은 얻었고 이것을 기준으로 이미 만들어진 코치마크들을 평가해보자.

구글에서 코치마크를 검색하면 최상단 링크에서 나오는 이미지들

좋은것

안좋은것

글이 많다.
필기체는 좋은데 많은 기능을 설명한다 .
이게 도움말인지 구분이 안간다.
너무 설명이 많다.

애매한것

좋은데 설명이 길다.
좋은데 설명이 길다.
좋은데 폰트와 색상이 좀 달랐으면 더 좋았겠다.
단순하고 깔끔한데 뭐하는건지 모르겠고 원래 유아이와 분리되어 보이지 않는다.
단순하고 깔끔한데 눈에 잘 안들어온다. 글씨체도 다르게 하고 동그라미 색도 다르게 했으면 좋았겠다 .

소감

코치마크에 대한 기본지식모델이 생겨서 좋았고 현재 작업에 도움이 많이 될것 같다. 코치마크에 대해서 한글로 된 정보가 별로 없었는데 다른 사람들에게 도움이 되었으면 좋겠다. 내 영어능력이 생각보다 더 미천하다는 것을 깨닳았고 이 기회에 연습이 많이 되었다. 읽었을때는 무슨말인지 알것같았는데 한글로 쓰려고 하니 못쓰겠더라. 역시 안다고 생각한것이 진짜로 아는것이 아니다라는것을 다시금 깨닳는다. 또 원작자의 글솜씨도 그다지 좋은편은 아닌 것 같다.ㅎㅎ 구글번역기의 도움을 많이 받았다; 웹상의 글과 이미지를 그대로 사용했는데 괜찮은지 모르겟다;;

--

--