ZEN of UX. 09 - Tab에 대한 단상 (4)

* UX의 ZEN이라는 이름으로 올리는 포스트는, UX의 절대적인 답이라기보다는, 그동안의 경험과 이해를 바탕으로 내가 주장하고자 하는 내용이야. 즉, 절대적인 것도 아니고 잘못되었을 수도 있지만, 나로서는 거의 확신에 가까운 내용이지. 이 시리즈를 볼 때는 이런 관점으로 이해해 주길 바라. 

---

이전 포스팅 (링크1, 링크2, 링크3)에서 탭의 4가지 속성 중 세 가지를 두서 없이 적었어. 사실 내용이 다 섞여있고, 나름 오랫동안 찌들은 불평이다보니 주제도 안맞고 난감하기는 해. 그래도 개인 블로그니까^^ 그냥 쭉쭉 진행하려고.

① 탭 간의 연결성 
② 영역의 제한성 (지배적 성질) 
③ 탭의 지시성 (앵커와 기능이 겹침) 
④ 탭 간의 배타성 

탭 간의 배타성에 대해서 쓰려 했는데, 마침 친정(?) 회사에서 스타벅스 국내 앱을 런칭했음을 알게 됐어. 그리고... 공교롭게도 '탭의 배타성'에 대한 반면교사로 적절해서 간단히 인용할까 해. 탭의 오용을 여실히 보여주는 사례. ㅠㅠ;

© starbucks

미국 앱을 먼저 보자. (파란색)

이름은 Order지만, 사실은 Menu가 유일한 기능이고, 다른 탭은 메뉴를 보완하는 장치야. 오늘 주제인 '탭 간의 배타성'을 제대로 어기는 앱이지. 메뉴 외의 다른 탭은 메뉴와 중복되지 않고서는 존재할 수 없어. 그 중에 previous는 구매할 수 없는 죽은 공간이고, Favorite는 유저의 손길 없이는 그냥 빈 장소야. Featured는 그나마 의미가 있지만, 홈 등 '더 많이 노출되는 곳'에 갖다 두는 게 효율적일 거야. 마케팅과 컨슈밍을 다르게 몰아가는 게 더 세련된 방향이니까.

분류를 해야 하는 탭이 중첩 기능으로 소진되다 보니, 리스트 영역이 분류 기능을 수행하고 있어. 각 분류의 의미를 이해해야 하는 것도 스트레스지만, 'See all 196'을 눌러서 탐색하는 것도 헬이지. 

그런데 한국 앱에서는 여기서 한 발 더 헬로 들어가고 있어. (빨간색)

미국 앱에서의 탭은 (분류가 아닌) 관리 기능만을 순수하게 수행한다지만, 한국의 탭은 관리와 분류 기능이 섞여 있어. 이중 탭도 등장해. 특히 저  'New', '추천' 항목은 정말 끔찍해. 아이템의 속성을 단계별로 쪼개면서 분류해도 성가신 구조인데, 여기에 "New", "추천"같은 중복 분류를 넣는 게 무슨 의미일까? 이게 한국적인 형태라고 생각한 걸까? 

한국이든 미국이든, 최상단 탭에 대해서 다시 생각해봐야 해.

리스트에 트리 구조를 꾸깃꾸깃 집어넣을 거면, 상단 탭을 Drinks / Food / At Home Coffee로 하는 게 맞을 거 같지 않아? '홀케이크 예약'은 대체 왜 저기 있는 거야?

Featured, Favorite가 꼭 이 페이지에 있어야만 해? 다른 곳에 두면 큰일나는 거야? 아이템이 400개 이상이어서 정리가 어렵다면, 애초에 Order 페이지의 정의에 대해서 다시 생각해봐야 하는 것 아냐? 가뜩이나 복잡한데, 여기에 꼭 탭을 두어야 해?

잠깐 생각해 본 대안이 오른쪽 두 장이야. 윗부분만 급하게 만졌어.

위에 featured 혹은 favorite를 다른 형태로 구성하는 것 (회색). 혹은 리스트 항목 안에 페이버릿 버튼을 두는 것. 검색은 인풋필드 형태로 강조하고. (노란색) * 모르는 내막이 있을까봐 order 밖으로 몰아내는 버전은 생략했어. 이 플젝을 내가 맡았다면 Order를 다시 정의했을 거야. 그리고 order와 pay 페이지를 유기적으로 엮었겠지. 이걸 재구성하는 게 난이도가 높다고? 천만에!

작업한 전-동료들에겐 미안하지만, 전개된 결과물로만 유추해 보면 '전형적인 기획의 기만'이라는 확신이 들어. 이게 탭의 위험성이야. 생각없이 대충 정리하기에 너무 좋은 도구라서, 이런 형상을 만들어도 얼레벌레 돌아가니까 문제인 거야. *심지어 '추천'은 홈 화면에도 리스트가 있어. 게다가 각 메뉴 텍스트 옆에 있는 녹색 점은 new를 상징하는 거더라구. 이 정도면 관리 개념도, 유저 설정도 없었지 싶어. 다나와에 쓰면 딱 맞을 리스트야. 좀 더 비아냥거리자면... 가격 비교도 넣지 그랬어^^ 

(십분 양보해서) 유저 입장에선 정리되지 않은 hierarchy가 중요하지 않을 수도 있어.

New로 들어가서 고르던, 추천으로 들어가서 고르던, 리저브 드립으로 들어가서 고르던 간에... 똑같은 메뉴를 고를지언정, 유저 입장에서는 한 경로만 타고 들어간 거니까 문제는 없는 거잖아. 그치? 슈뢰딩거의 고양이? 어쨌든 탐색은 일회적이고, 어차피 유저는 하나의 경로만 경험하니까. 좋아. 근데 그럴 거면, 상단에 탭은 왜 탭이고, 리스트의 '추천'은 왜 탭이 아닌 거지? 다 풀어놓으면 되는 거 아냐? ^^

하필이면 친정 회사의 작업물이 "탭의 좋지 않은 사례로 찰떡"이라니, 좀 많이 씁쓸하네. 여전히 애정이 많은데 말이지. ㅠㅠ

물론, 이 플젝을 한 게 누군지도 대충 알고, 다들 애정을 가진 전 동료이긴 해서 쓴소리를 하기는 싫어. 클라이언트의 비합리적인 요청을 받다 보니 자체적인 개선의 니즈 없이 수동적으로 일을 했을 개연성도 충분히 있다고 봐. 하지만 이건... 좀 너무하잖아!

---

명색이 탭에 대한 4부작인데, 마지막 포스팅이 그라데이션 분노라서 민망하네. 하지만, 내용을 보면, 왜 '탭이 서로 배타적이어야 하는지' 알 수 있는 좋은 사례라고 생각해.

유저가 여러 군데에서 동일한 내용을 만나는 건 사실 큰 문제가 아닐 수 있어. 하지만, 구성이 논리적이지 않거나 위계를 명확하게 설정하지 않아서 생기는 중복이라면, 이건 변명의 여지없이 잘못 그린 구조야. 대부분의 모바일은 유저와의 접점이든, 뎁스든 - 가용할 수 있는 페이지 수가 제한적이야. 컨텐츠의 양을 제어하는 게 제일 좋겠지만, 그럴 수 없는 환경이라면 최적의 루트를 찾아야 해. (그게 funnel 설계의 8할은 된다고 봐) 최적의 루트를 짜면, 중복되는 경로는 최소화 되겠지.

* 게임 좋아하는 UX 디자이너들 중에서는, 게임처럼 '자율도'가 높은 앱이 좋은 거라고 우기는 친구들이 있어. 유저 각자가 원하는대로 쓸 수 있어야 좋다는 거지. 앱스토어 리뷰를 통해 요청하는 모든 기능을 다 넣겠다는 부류. UX 디자이너라면 그런 기능을 요청하게 만든 위크포인트가 어디인지를 점검해야 하지, 그 기능을 더 넣는 건 답이 아니야. 최후의 수단이야. 

© Pixar, 'Soul'

4부에 걸쳐 계속 얘기하는 거지만, 탭은 단순한 분류 도구이고, 원초적인 형태의 탐색일 뿐이야. 연속적인 버튼의 집합일 뿐이고. 쉽게 문제를 무마할 수 있다고 해서 남용하지 않았으면 좋겠고, 또 위와 같은 와이어프레임을 그냥 그래픽화 하는 디자이너들도 정신 차리길 바라. 

탭에 관한 4부작. 끝.