오용되고 있는 모바일 UX 패턴

업무 경험이 많은 디자이너라면 아마 다른 디자인에서 아이디어를 얻는걸 훔쳤다고 보진 않을 겁니다. 그것은 최고의 리서치이며, 디자인 패턴을 사용하는 것이고, 가이드라인을 따르는 것입니다. 그리고 사용자에게 익숙한 인터페이스가 되도록 패턴을 사용해야 합니다. 

하지만 몇몇 이들은 가이드라인에만 집착하고 다른 사람의 디자인만 따라하다간 창의적이지 못하게 되고 결국엔 모든 앱이 다 비슷해 보일거라 말합니다. UX의 관점에서 보면 문제가 달라집니다. 최고의 사례들을 찾아 받아들이기만 한다면 구글, 페이스북, 인스타그램, 혹은 당신이 가장 좋아하는 기타 등등의 앱들이 항상 옳다고 믿게 되고, 그들이 추구하는 디자인의 목적은 곧 당신의 것이 되어 "왜?"라는 질문 없이 맹목적으로 받아들이기만 할 것입니다. 

최고의 사례로 생각되어온 것들이지만 이전에 생각했던 것만큼 옳지 않았음을 보여주는 패턴들을 이야기 해보고자 합니다.

1. 감춰진 내비게이션

최소 50만 정도의 글이 햄버거 메뉴에 관해 쓰여졌습니다. 대부분 햄버거 메뉴에 반대하는 글이었죠. 만약 지금까지 모르셨다면 이 글 (햄버거 메뉴를 피해야 하는 이유와 방법) 을 먼저 읽어보시길 추천합니다. 중요한건 햄버거 메뉴의 사용된 아이콘이 문제가 아닌, 아이콘 뒤에 '감춰진 내비게이션'이 문제였습니다.

햄버거 메뉴는 유연하고 사용하기 편리하다.

햄버거 메뉴는 사실 디자이너들에게 쉽고 편한 해결책입니다. 제한된 스크린 영역에 고민할 필요없이, 모든 내비게이션을 숨겨져 있는 스크롤 가능한 오버레이 구역에 전부 구겨넣으면 그만이거든요.  

하지만 실험을 통해 노출된 메뉴에서 사용률, 사용자 만족도, 수익률 모두가 더 높다는 결과를 얻은바 있습니다. 미디엄Medium, 아마존Amazon 같은 곳에서 햄버거 메뉴를 탈피해 항상 노출된 내비게이션으로 옮겨가는 이유가 바로 이 때문이기도 합니다.

유튜브Youtube 내비게이션의 변화 by Luke Wroblewski

만약 내비게이션이 복잡하다고 그것을 숨겨기는 것은 모바일 친화적이지 않습니다. 우선 순위를 매겨보고 가장 중요한 상위의 메뉴를 노출시키세요.

2. 도처에 널린 아이콘

이번에도 제한적인 스크린 크기 때문에 공간을 아끼려고 텍스트 레이블을 모두 아이콘으로 바꾸고 있습니다. 픽토그램은 공간도 적게 차지하고, 설명할 필요도 없고, 사용자에게 친숙하기까지하니 뭐든 괜찮겠죠? 그래서 너도나도 쓰고 있습니다.

위와 같은 생각을 가지고 앱 디자이너는 가끔 이해하기 어려운 아이콘에 기능을 숨겨버리곤 합니다. 예를 들어, 아래 인스타그램 앱을 보면 저 아이콘이 다이렉트 메시지 보내기 기능인 아이콘이라고 생각되나요?

혹은 구글 번역 앱을 사용해보지 않은 사람이라면, 아래 이미지에 픽토그램을 탭하면 어떻게 되는건지 예상이 되시나요?

사용자가 추상적인 픽토그램에 익숙해있거나 한번씩 눌러보고 알게 될거라고 생각하는 실수를 흔히들 범합니다. 

블룸닷에프엠Bloom.fm의 미스테리한 탭바 

아이콘에 힌트 레이블을 달아놓으면 사용하는데 불편함이 없을거라 생각한다면 그것도 잘못하고 있는 겁니다. 제아무리 견고하게 빈틈을 막으려해도 사용자는 아무튼 알아내야 합니다.

스왐Swarm 앱의 아이콘 힌트 

아이콘을 아예 사용하지 말라는 말은 아닙니다. 사용자들이 무슨 기능인지 알 수 있는 아이콘은 많습니다. 일반적인 기능을 주로 대표하는 검색, 동영상 플레이, 이메일, 관리 등이 있습니다. 하지만 이것도 여전히 확실하지 않을 수 있습니다. 예를 들어 하트 아이콘을 탭하면 어떤 일이 발생할지 잘 예측이 되지 않습니다.

복잡하고 추상적인 기능에는 항상 텍스트 레이블이 적절하게 들어가줘야 합니다. 아래 경우와 같이 아이콘이 재미있고 흥미를 끌기 때문에 적절한 텍스트와 함께라면 오히려 메뉴 아이템의 사용성을 증가시키고 앱의 전반적인 이미지도 향상시킬 수 있습니다.

픽셀메이터Pixelmator 내비게이션

기본적인 기능들은 아이콘만으로도 표현이 가능하겠지만, 복잡한 기능이라면 반드시 텍스트 레이블을 함께 써 줘야 합니다. 

3. 제스처 기반 내비게이션

애플이 2007년 아이폰을 처음 선보였을 때, 멀티-터치 기술이 주요 관심사로 자리잡게 되었고 사용자는 인터페이스에서 포인트와 탭 말고도 줌, 핀치, 스와이프할 수 있음을 배웠습니다.

제스처는 디자이너들 사이에서 인기를 얻게 됐고 제스처 기반의 실험적 디자인으로 무장한 앱들이 쏟아져 나왔습니다. 

스와이프해서 완료하기 / 핀치(두 손가락을 넓히거나 좁혀서) 리스트 바꾸기

클리어Clear 앱의 제스처 내비게이션

제스처도 내비게이션을 숨기거나 텍스트 레이블 대신에 아이콘을 사용하는 것과 마찬가지로 제한된 스크린 영역을 아끼려는 디자이너가 잘못 사용할 수 있습니다. 

제스처에 관해 우선 알아야 할 것은 그것이 항상 숨겨져 있다는 것입니다. 사용자는 이 사실을 기억하고 있어야 합니다. 햄버거 메뉴와 똑같은 상황인거죠: 만약 추가기능을 숨겼다면, 사용률은 당연히 떨어질 겁니다. 

그 다음으로는 아이콘이 가졌던 문제와 똑같은 문제를 제스처도 가지고 있습니다: 탭, 줌, 스크롤과 같이 대부분의 사용자가 이해하고 있는 공통의 기본 제스처가 있지만, 사용자가 발견하고 사용해봐야 아는 제스처도 있습니다. 

아쉽게도 대다수의 제스처가 표준이 아니며 지속적이지도 않습니다. 여전히 제스처는 터치 인터페이스 디자인의 새로운 영역입니다. 심지어 스와이프 같은 단순한 제스처도 이메일 앱마다 각기 다르게 작동하고 있습니다. 

애플 메일에서는 이메일을 오른쪽으로 스와이프하면 "읽지 않음" 버튼이 나옵니다.

메일박스 앱에서는 같은 제스처에 "보관하기" 버튼이 나옵니다.

스마트폰을 흔들면 iOS에서는 "실행 취소"가 나오고 구글맵에서는 "피드백 전송"이 나오는 것도 마찬가지 입니다.

제스처는 숨겨진 컨트롤이며 사용자가 노력해서 찾고 기억하면서 사용해야 함을 잊지 마세요. 

4. 화면 위를 덮고 나타나는 튜토리얼 온보딩

온보딩Onboarding은 사용자와 앱이 처음으로 마주하게 되는 순간 입니다. 많은 경우에 이것이 사용자에게 인터페이스를 설명하려고 사용화면 위를 덮고 나타나는 튜토리얼로 사용되고 있습니다.

디커버리dcovery 앱의 코치 마크Coach marks

왜 이것이 좋지 못한 해결책일까요? 왜냐하면 많은 사용자는 앱 인트로를 그냥 넘어갈 것이기 때문입니다. 그냥 앱을 빨리 실행하고 싶어합니다. 심지어 튜토리얼을 본다고 해도 금새 잊어버립니다. 마지막으로 중요한 점은 인터페이스 위에 코치 마크를 추가하는 것이 더는 직관적이지 않다는 것입니다. 

온보딩을 다른 방식으로 좀 더 효율적으로 디자인할 수 있을 겁니다. 슬랙Slack을 예로 들면, 첫 화면을 문맥있는 온보딩으로 만들어 사용하고 있습니다. 기능소개보다는 간단하게 앱 자체를 소개하며 사용자가 얻을 수 있는 이점에 중점을 두었습니다. 

좀 더 진보된 방식의 온보딩으로는 사용자와의 인터랙티브가 있습니다. 듀오링고Duolingo는 자신의 앱을 구구절절 설명하지 않습니다. 대신 사용자가 배우려고 선택한 언어로 퀵 테스트를 진행합니다.(심지어 회원가입도 안합니다.) 왜냐하면 사람들은 직접 해보면서 배울 때 가장 효과가 좋기 때문입니다. 또한 이 앱의 가치를 보여주기에도 아주 좋은 방식입니다. 

위에 스와이프 제스처 이야기에서 메일박스랑 애플메일이 서로 다른 버튼이 나왔던거 아직 기억하시죠? 온보딩은 바로 이런 점을 방지하기 위해 사용되어야 합니다. 사용자가 앱을 사용하기 전에 제스처 기능을 미리 온보딩에서 시도해볼 수 있다면 좋을 것 같습니다. 

화면을 덮는 코치 마크를 디자인하기 전에 사용자가 처음으로 무엇을 경험해야 하는지를 한번 더 생각해 보세요. 문맥에 더 집중하는게 사용자를 맞이하는 더 좋은 방식입니다. 

5. 창의적이지만 직관적이지 않은 공백 상태

페이지에 아무런 콘텐츠가 없을 때 나오는 공백 상태empty state는 경험이 부족한 디자이너라면 간과하기 쉽습니다. 하지만 앱의 전반적인 사용자 경험의 경우에는 공백 상태가 중요한 요인이 될 수 있습니다.

가끔 디자이너는 에러 메세지가 뜨거나 콘텐츠가 없어 텅 빈 상태의 페이지롤 보게 되면 무언가 해볼 좋은 기회라 생각합니다. 

구글 포토의 공백 상태 스크린

처음 봤을 땐 예쁘고 좋아 보이죠? 잘 정렬된 레이아웃에 안내글과 예쁜 그래픽 이미지까지. 그런데 나중에 다시 보니 뭔가 좀 이상한 것 같습니다. 

• 아무것도 없다면 우선순위가 가장 높은 검색버튼이 왜 있는거죠? 
• 두 번째로 우선순위가 높은 이미지는 분명 탭이 되질 않습니다. (여러번 탭 했습니다.)
• 안내글에서는 이상하게도 '+' 버튼을 찾도록 합니다. 왜 그냥 안내글 밑에 "추가하기" 버튼을 두지 않는걸까요? 이건 마치 "계속 진행하시려면 계속 진행하기 버튼을 누르세요"와 같은 말입니다. 

위의 공백 상태 스크린은 문맥을 이해하는데 전혀 도움이 되지 않습니다.

• '모음collections'은 대체 뭐지? 왜 저게 필요한거야?
• 왜 난 아무것도 가지고 있지 않은거지?
• 뭘 해야 하는거지?

창조적인 것인란 때때로 적은 것이 많은 것이기도 합니다. 아래 이미지가 사용성 측면에서는 최고의 예라 할 수 있겠습니다. (이미지 속 "아래 버튼을 지금 탭하세요.Now tap the button below"는 여기서는 잠시 잊읍시다.)

공백 상태는 시각적으로 좋아보이는것 뿐만 아니라 브랜드 정체성에 관한 것임을 잊지 마세요. 공백 상태 역시 사용성 측면에서 중요한 역할을 하고 있습니다. 직관적이도록 디자인 하세요.

마치며

디자인 패턴과 사례는 디자인할 때 여전히 많은 도움이 됩니다. 하지만 앱과 사용자는 다르다는걸 항상 염두해 두세요. 하나의 해결책이 모든 것을 다 커버할 수는 없습니다. 또한 앱을 위한 완벽하고 절대적인 디자인은 없습니다. 

스스로 생각하고, 디자인하고, 조사해 보세요.

원문: Misused mobile UX patterns

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.