당신이 잘못 사용하고 있는 모바일 UX 패턴 5가지
* 아래 글은 Zoltan Kollin의 글을 옮긴 것입니다. 원본을 보시려면 아래 링크를 클릭하시면 됩니다.
https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570#.asdh30jkr
당신이 경험이 많은 디자이너라면, 영감을 받는 것은 베끼는 것이 아니라 Best practice를 찾는 것이라는데 동의할 겁니다. 다수가 익숙하게 사용할 수 있도록 이미 알려지고 통용된 디자인 패턴을 사용하고 가이드라인을 따르는 것이죠.
어떤 이들은 가이드라인을 고수하고 벤치마킹하는 것이 창의성을 죽이고, 종래에는 모든 앱들이 판박이가 될 것이라고 걱정합니다. 하지만 저는 UX적인 관점에서 그보다는 다른 문제점이 있다고 생각합니다. Best practice를 적용하는데 익숙해진 사람은 아마 Google, Facebook, Instagram에서 제시하는 가이드라인이 항상 옳다고 생각하고 그에 대한 의문은 제기하지 않게 될 겁니다.
지금부터 Best Practice로 알려져있지만 다시 보면 처음만큼 좋아 보이지 않을 UI 패턴 5가지를 소개하려고 합니다.
바쁜 이를 위한 요약;
1. 보이지 않으면 사용하지 않는다. 메뉴가 복잡하다면, 숨길 것이 아니라 중요도를 다시 생각한다.
2. 명확하지 않으면 사용하지 않는다. 복잡한 아이콘이라면 텍스트와 함께 표시하는 것이 좋다.
3. 보이지도 않고 명확하지도 않으면 사용하겠는가? 제스처는 그런 존재이다.
4. UI는 농담과 같아서, 설명을 해야 한다면 이미 좋은 UI가 아니다.
5. '예쁜' 디자인보다 직관적이고 의미 있는 디자인을 해야 한다.
6. 스스로 생각한다. One-size-fits-all 인 가이드라인은 없다.
1. 숨겨진 네비게이션
많은 사람들이 햄버거 메뉴(Drawer Button)에 대한 의견을 제시해왔습니다. (* 실제로 미디엄을 비롯한 여러 UX 커뮤니티에서는 햄버거 메뉴에 대한 논쟁이 뜨거웠던 적이 있었습니다. pxd에서 햄버거 메뉴에 대한 논쟁의 찬/반을 정리한 이 글(링크)을 참고하세요.) 하지만 본질적으로 이 논쟁의 핵심은 햄버거 아이콘 자체가 아니라 주요 메뉴를 아이콘 뒤로 숨기는 데에 있습니다. Out of Sight, Out of Mind. 사이드바 메뉴를 사용자가 사용하기 위해서는 우선 사이드바 메뉴 버튼이 작동하는 것이라는 점을 인지해야 합니다. 인지하기 전까지는 그 존재 자체를 알 수 없게 돼버리죠.
이미 여러 곳에서 이루어진 A/B 테스팅 결과(링크)를 요약하자면, 메뉴를 명시적으로 표기하는 것이 유저 참여도, 만족도, 심지어는 수익까지도 증가시킵니다.
메뉴 형식을 바꾸자 유저 참여도가 떨어지는 것을 확인 할 수 있습니다.핵심은 '사용자는 보이지 않으면 사용하지 않는다'입니다. (* 특히나 안드로이드 폰 사용자는 아이폰 사용자보다 햄버거 메뉴를 클릭할 확률이 1/3 정도라고 합니다.) Big player 앱들이 햄버거 메뉴에서 탭 등 보이는 메뉴로 바뀌는 현상도 이와 같은 이유 때문입니다.
Youtube 앱도 이제 햄버거 메뉴대신 탭 메뉴를 사용하고 있습니다.2. 여기도 저기도 아이콘!
모바일은 화면이 좁기 때문에 디자이너들은 기나긴 텍스트 라벨 대신에 아이콘 사용으로 공간을 절약하려고 합니다. 픽토그램은 공간도 적게 차지하고, 번역할 필요도 없으며, 많은 사람들이 이미 이에 익숙하기 때문이죠.
이런 가정 하에, 앱 디자이너들은 종종 알 수 없는 아이콘 뒤로 기능성을 숨깁니다. 예를 들어, 인스타그램에서 저 아이콘이 다이렉트 메시지라는 것을 바로 알 수 있나요?
제 눈에는 서랍으로 보입니다만 아직도 저 아이콘이 왜 메세지를 뜻하는지 모르겠네요.또는 당신이 구글 번역 앱을 한 번도 사용해보지 않았다면, 하단 픽토그램을 누르면 어떤 기능이 있는지 어떻게 알까요?
유저들도 당신과 마찬가지로 추상적인 픽토그램에 익숙하다고 가정하거나, 유저들이 기꺼이 시간을 투자해 결국에는 배우길 바라는 것은 흔한 착각입니다.
Bloom.fm의 알 수 없는 탭바만약 당신이 아이콘을 만들고 나서 팝업 라벨이 필요하다고 느낀다면, 잘못하고 있는 겁니다. 설사 당신의 앱이 Foursquare이고 유저들이 결국에는 배우게 될 거라고 해도요.
다지이너 스스로 해당 아이콘이 명확하다고 느끼지 못했으니 중복 표현한게 아닐까요아이콘을 사용해서는 안된다는 게 아닙니다. 햄버거 이슈와 같이 명확하고 직관적이지 않다면 다시 생각해봐야 한다는 거죠. 검색, 통화, 재생, 메일, 설정 등과 같이 이미 유저들에게 충분히 인지되어 있는 아이콘들을 적재적소에 사용하는 것도 필요합니다.
복잡하고 명확하지 않은 아이콘들은 텍스트 설명과 함께 표기되는 것이 좋습니다. 아이콘을 사용한다면 항상 사용성 테스트를 해보세요.
Pixelmator 의 네비게이션, 텍스트가 없었다면... 상상해보세요
해당 글을 작성하면서 느낀 점은 브런치 에디터 아이콘도 최선의 선택은 아닌 것 같습니다.3. 제스처 네비게이션
애플이 2007년에 아이폰을 소개했을 때, 유저들은 화면을 단순히 tap 하는 것뿐만 아니라 zoom, pinch, 그리고 swipe 할 수 있다는 것을 배웠습니다. 이후 제스처 기능은 디자이너들 사이에서 인기를 끌며 많은 앱들이 제스처 컨트롤 기반으로 디자인되었습니다.
모바일 공간을 절약하고 싶은 디자이너들에게 제스처는 마치 숨겨진 햄버거 메뉴나 긴 텍스트 대신에 작은 아이콘을 사용하는 것과 같은 유혹적인 기능입니다. "삭제 버튼은 없어요. 왼쪽이나 오른쪽으로 스와이프 하면 돼요. 유저들이 알아서 쓰겠죠."
우선 알아야 하는 사실은 제스처는 언제나 숨겨져 있습니다. 사람들이 기억해야 하죠. 숨길수록, 쓰기도 힘듭니다.
게다가 제스처는 아이콘이 가지는 문제점도 함께 가지고 있습니다. 탭, 확대, 스크롤과 같이 이미 익숙한 제스처가 아니라 해당 앱을 위한 제스처를 유저가 발견하고 학습해야 합니다. 간단한 예로 iOS에서 디바이스를 흔들면 '취소'이지만 Google Maps에서는 '의견 보내기'입니다.
Apple mail 에서는 왼쪽으로 밀 경우 'Mark as Unread' 
Mailbox 에서는 왼쪽으로 밀 경우 'Archive'제스처는 숨겨진 기능으로, 유저가 학습해야 한다는 것을 기억하세요. 만약 당신 앱이 Tinder라면 전 세계에 'siwpe right'을 학습시킬 수 있겠죠 - 하지만 이 역시도 제스처가 서비스 콘셉트에 필수적인 기능일 때의 이야기입니다.
4. 시작화면에서 설명하기
Onboarding은, 최근 인기 있는 UX 주제로, 사용자가 처음 앱을 사용하는 순간, 보통은 시작화면에서 사용 방법을 설명하는 'Tutor overlay' 디자인을 가리킵니다.
Tutor Overlay의 예시입니다왜 이런 시작 화면 튜터리얼은 좋은 방식이 아닐까요? 유저들은 어서 빨리 앱을 사용하고 싶기 때문입니다. 많은 유저들이 인트로를 스킵하고 (보더라도 대충 보거나) 튜터리얼 화면을 끈 순간 모두 잊어버립니다. (특히나 화면에 내용이 많을 때는 더더욱) 마지막으로, 화면에 사용법을 설명하는 것이 인터페이스를 더 직관적으로 만드는 것이 아닙니다. 명심하세요.
UI는 농담과 같아서, 설명을 해야 한다면 이미 좋은 UI가 아니다시작화면은 유저에게 유용한 방식으로 얼마든지 다르게 디자인될 수 있습니다. Slack을 예로 들자면, 유저가 서비스를 사용하면서 얻게 될 장점에 대해 소개하죠.
어떻게 검색하는지 돋보기를 보여주기보다는 감성적인 장점을 설명합니다.시작화면에서 더 적극적으로 유저의 참여도를 높이는 방법도 있습니다. Duolingo는 앱이 어떻게 동작되는지 설명하기보다는 (아직 회원가입 조차 하지 않은) 유저가 간단한 테스트를 진행하도록 만듭니다. 이는 사람이 직접 행동할 때 더 잘 배우기 때문이기도 하지만, 무엇보다도 앱의 가치를 적극적으로 보여 줄 수 있는 방법이기 때문입니다.
초보자인 경우와 아닌 경우 모두가 참여할 수 있는 Duolingo의 시작화면Mailbox와 Apple Mail의 Swipe 제스처가 다르다는 사실, 기억하시나요? 아래는 Mailbox의 시작화면입니다. 유저는 앱을 직접 사용하기 전에 Mailbox에서 정의한 제스처를 따라 하며 학습할 수 있습니다.
모든 제스쳐를 한 페이지에 표기하지 않고 단계별로 소개하고 있습니다.(특히나 모든 기능을 한 화면에 설명한) 반투명한 설명서를 화면 위에 덮기 전에 먼저 생각해보세요. 사용자들이 처음에 어떤 경험을 해야 할까요. 맥락에 집중하세요. 대부분의 경우에 사용 설명서보다, 사용자들을 환영할 더 나은 방법이 존재합니다.
5. 직관적이지 않은 창조력
경험이 부족한 디자이너들이 쉽게 간과하는 것이 빈 화면입니다. 하지만, 앱의 전체적인 사용자 경험을 생각한다면 빈 화면은 매우 중요한 요소일 수 있습니다.
어떤 디자이너들은 빈 화면이나 에러 메시지를 창조력을 발휘할 수 있는 백지와 같이 생각합니다. 아래는 Google Photo 앱의 빈 화면입니다.
처음 볼 때는 멋져 보입니다. 그렇죠? 가이드라인을 따른 레이아웃과, 멋진 그래픽 아이콘이 있습니다. 하지만 다시 보면 이상한 점들이 있습니다.
1. Collection 이 없는데 왜 저렇게 눈에 잘 띄는 검색 버튼이 있을까요. 누가 아무것도 없는 화면에서 검색을 하려고 할까요.
2. 두 번째로 눈에 띄는, 아이콘은 (많은 이들이 시도해보았겠지만) 누를 수 없습니다.
3. 왜 + 버튼을 위에서 다시 찾아야 할까요. 왜 힌트 문구 자체에 버튼이 없을까요. '계속하기 위해서는 계속하기 버튼을 누르세요'라고 말하는 것 같습니다.
상단 화면은 유저들이 아래와 같은 맥락을 이해하는데 전혀 도움이 되고 있지 않습니다.
1. Collection은 무엇일까? 왜 유용한 걸까?
2. 왜 나는 Collection 이 없지?
3. 나는 무엇을 할 수 있을까(만약 무엇인가 할 수 있다면)?
아래의 빈 화면은 창의적이진 않겠지만 사용성 측면에서는 훨씬 더 나은 역할을 하고 있습니다.
팔로잉 기능이 무엇인지 설명하며 유저가 바로 액션을 취할 수 있도록 한 Flipboard빈 화면을 더 적극적으로 사용하는 방법도 있습니다. '좋아요'한 상품이 없는 유저에게는 빈 화면 대신에 '당신이 좋아할 만한 상품'을 표시하는 쇼핑몰 앱도 있습니다.
빈 화면은 (마치 웹사이트의 404 페이지처럼) 비주얼적인 아름다움이나 브랜드 특성만을 나타내는 화면이 아닙니다. 사용성에도 큰 역할을 합니다. 빈 화면을 직관적으로 디자인하여 사용자가 참여할 수 있도록 유도하세요.
Question everything
오해하지 마세요. 디자인 패턴이나 Best practice는 여전히 우리의 친구입니다. 하지만 명심하세요. 모든 앱과 유저가 같다고 생각해서는 안됩니다. 모두들 각자의 디자인 목표가 있습니다. 다른 곳의 해결책이 반드시 내 디자인에도 적용될 것이라는 보장은 없습니다.
스스로 생각하세요. 스스로 디자인하세요. 스스로 리서치 하세요.
측정하고, 실험하고, 검증하세요. 그리고 - 디자인 목표에 맞지 않을 경우 - 가이드라인을 따르지 않는 것을 두려워하지 마세요.
