정보 위계를 통해 탐색 편의를 높여 봅시다
크기, 색, 움직임으로 사용자의 시선 유도하기
저는 디자인의 원칙은 어디서나 동일하다고 생각합니다.
그렇기에 여러 기업들이 UX 디자이너를 전공 무관으로 뽑더라도 여러분은 여전히 우위에 설 수 있는 영역은 있다고도 생각해요(물론 열위 요소도 있지만...) 물론 그리는 대상이 책이냐, 포스터냐, 웹이냐, 모바일 미디어냐 따라서 조금씩 특수성이 생기지만요.
앞선 글에서 사람은 직관적으로 정보를 판단해서 자신에게 필요/불필요를 짐작한 뒤 선택적으로 탐색 심화를 한다고 말씀드렸습니다. 그리고 아이콘 같은 메타포는 이를 더 강화해주는 도구로 좋은 보조장치가 된다고도 말이죠.
그러나 아이콘이 구시대적 스큐어모피즘의 부산물로 메타포 학습의 연장선에서 불리하다는 점과, 그리고 모던/플랫 스타일의 UI에서는 그런 장식적인 장치보다 텍스트 중심으로 단순하게 하는 걸 선호하시는 반항아 분들을 위해 이번 글을 준비했습니다.
본 주제의 목표는 일단 이전 글과 동일합니다. 사용자에게 정보를 일일이 판독하게 만드는 스트레스는 주지 말아야 합니다. 어떤 게 의미 있는 정보인지, 사용자 스스로에서 유용함을 직관적으로 판단할 수 있는 정보의 위계를 만들어 줘야만 합니다. 사용자가 그걸 원하니까요.
자, 우리는 과거 대학시절 편집디자인(Editorial Design)을 배우면서 잡지 또는 브로슈어와 같은 지면 디자인을 해본 경험이 있을 겁니다. 바로 이런 거요.
BMW Winter Catalogue위는 BMW에서 겨울용 차량 패키지 상품과 타이어 액세서리를 판매하기 위한 홍보용 브로슈어입니다. 이걸 펼쳐보는 사람은 저처럼 겨울에 차가 미끄러져본 경험이 있거나 미리 대비하기 위해 내 차에 맞는 윈터 패키지는 뭐가 있나 알아보기 위해 이 책자를 뒤적여 볼 겁니다.
그럼 거기서 고객의 목적(Goal)은 대체 뭘까요? 아주 당연하게도 '내차에 뭐가 맞아? 어떻게 안전해지는 거야?'가 아닐까요? 그러기 위해 여기 수많은 정보들을 다 읽어보고 나서야 무언가를 판단할 수 있다면 얼마나 시간 낭비겠어요?
저는 여기서 글자의 크기들로 정보의 위계를 보고 제가 원하는 정보를 빠르게 취사선택해서 원하는 목표에 도달할 수 있습니다.
BMW를 모는 사람들의 특징은 하나같이 운전을 거지같이 합니다... 가 아니라 주행감을 즐기는 편이죠. 그래서 저도 윈터 타이어를 끼면서 늘 안전과 주행감을 교환해야 하지 않나 하는 걱정이 앞섭니다. 그래서 이런 카탈로그를 보면서도 주행할 때 고속 주행 시의 안정성 Stable 여부를 우선 살피곤 하는데요, 위 문서는 친절하게도 우측에 Stable 문단 제목으로 제가 원하는 목적을 빠르게 도달할 수 있게 안내해 줍니다.
하지만 이 모든 지면에 나온 텍스트 크기가 동일하다면 어떻게 제가 Stable 항목에 도달할 수 있을까요? 모두 천천히 읽어 가장 우측까지 도달하기 전까지는 아마도 해당 정보를 발견할 수 없을 겁니다.
여기서 그럼 온라인 서비스의 비교 예시로 다시 보여드릴게요.
일단 대학 선배가 대표로 있는 디자인 전문 취업 학원인데 저도 가끔 강사로 도움도 드리고 있고, 의리 삼아 홍보는 해줘야 할거 같아서 굳이 저 홈페이지를 긁어다가 사례를 재구성해봤습니다.
먼저 좌측은 모든 타이포가 동일한 레벨로 구성된 화면이고, 우측은 항목별 타이틀에 사이즈와 볼드, 그리고 수강자가 해야 할 과제만 하이라이트 컬러를 넣어준 버전입니다. 제 기준에는 이것도 대비가 약하다 생각은 들지만 제가 만든 건 아니니까 비판은 자제하도록 하겠습니다.
가만히 좌측 이미지만 띄워놓고 여러분이 수강생이 되었다 상상하고 정보를 탐색을 시도해 보세요. 뭐가 보이나요? 아마도 내가 뭘 배울 수 있고 뭘 해야 하는지 쉽게 이해가 되지 않을 겁니다. 그리고 다시 우측 이미지만 띄워놓고 똑같은 상상을 해보세요. 굵은 항목 타이틀로 내가 배울 것들이 뭔지를 먼저 이해하고, 그다음에는 색이 들어간 내가 수행할 과제가 뭔지를 알게 될 겁니다. 확실히 정보를 취득하기가 훨씬 쉬워지죠?
이건 굵기와 색을 통해서 다른 항목들보다 시각적인 강도를 높여주어 정보의 위계(우선순위)를 인위적으로 조작한 겁니다. 그리고 그 대부분의 사용자는 그런 사려 깊은 시각 동선 유도에 편안하게 정보를 탐색할 수 있게 되는거죠.
좌측은? 그냥 뭐 없어요, 사용자 네가 알아서 보든 말든 마음대로 해라 이겁니다.
이렇게 큰 웹 화면뿐만 아니라 모바일 환경에서도 이미지나 아이콘 같은 다른 장식 요소가 없이도 타이포의 크기(굵기)와 색상만으로도 충분히 정보 위계가 설계될 수 있으며 사용자의 동선 유도가 가능합니다. 그게 우리의 비즈니스를 위해 강제로 사용자의 동선을 끌고 가는 것이든 사용자가 기대하는 목표를 달성하게 해주는 형태든 뭐든 간에요.
Google Material Design 3 Snackbar그리고 요즘엔 움직임을 통해서도 사용자의 시선을 유도하는 아주 세련된 방법들도 있으니 이런 예시도 참고해 두면 좋습니다.
추가로, 화면 안에 크기, 색상, 움직임으로 위계를 만들 때의 이점은 단연 정보 탐색의 용이성만 존재하는 게 아닙니다. 정보 항목들 간의 대비를 응용한 조형요소로 화면 안에 리듬이 생기고 시각적인 완성도 또한 높아집니다.
우리가 연극을 볼 때 모든 배우가 똑같은 어조와 톤으로 연기를 한다고 생각해 보세요, 얼마나 지겹고 재미없겠어요? 하지만 배우의 감정이 담긴 음성의 강약과 템포의 다양함으로 연기에는 리듬이 생기고 활기가 살아납니다.
화면 또한 마찬가지예요.
큰 타이틀로 어딘가에서 '우왁!'하고 소리쳐 주고 나서 보조 문구들로 '재잘재잘' 속삭이고, 그리고 다시 섹션 타이틀로 '우와...' 감탄사를 뱉어주는 것처럼, 화면 안에서도 강약과 색상의 대비를 통해 리듬이 생기고 생동감이 살아나게 됩니다.
단, 모든 것은 과유불급.
우리가 편집 디자인할 때 이런 것도 배우죠?
한 지면 안에 3개 이상의
타입 셋팅을 넣는 건 신중하세요.
자칫 난잡해 보이기 쉬워집니다.
