content-to-chrome 비율 극대화 하기

---

수직 네비게이션에 대한 아티클을 읽다가 도무지 content-to-chrome 이라는 문구가 이해되지 않아 이 내용을 상세히 기술한 아티클에 도전한다.

들어가기 전, Chrome. 크롬이 도대체 무엇인가를 먼저 정의해야겠다.

Chrome is the visual design elements that give users information about or commands to operate on the screen's content (as opposed to being part of that content). These design elements are provided by the underlying system — whether it be an operating system, a website, or an application — and surround the user's data.

Nielsen Norman

즉, 여기서 말하는 ‘크롬’이라는것은 브라우저가 아니다. 사용자에게 화면 콘텐츠에 대한 정보나 명령을 제공하는 시각 디자인 요소다. 이러한 디자인 요소는 응용프로그램이나 사이트의 기본 시스템에 의해 제공되며 사용자의 데이터를 둘러싸고 있는것이라는 이야기!

An Event Apart: Content First 라는 아티클도 매우 훌륭하다고 하니 추후 읽어봐야쥥

다만 아래 아티클은 2014년에 작성되었다는것을 유의하는것이 좋다. 그러나 대부분의 UX 법칙들이 그러하듯 세월이 지나도 유의미해보인다.

---

TL;DR: 큰 화면에서 크롬을 숨기면 콘텐츠 대 크롬 비율이 거의 개선되지 않고 검색 가능성과 상호 작용 비용에 큰 영향을 미친다.

독자중 한 명이 최근의 트렌드를 “끔찍한 메뉴 없는 윈도우”라며, 자동차와 비교해 “대시보드의 기능이 모두 글로브박스 칸에 숨겨져 있다” 고 불평하는 메시지를 보냈다.

파이어폭스의 햄버거 메뉴는 일반 메뉴 옵션을 모두 숨기고 창 상단에 있는 기존 메뉴바를 대체한다.

햄버거 메뉴는 크롬(버튼, 메뉴, 기타 위젯과 같은 UI요소)을 바탕화면에 적게 표시하는 현재 트렌드로 발현됐다. 우리가 최근 홈페이지를 분석한 결과, 크롬과 내비게이션은 12년 전에 비해 홈페이지 점유율이 낮아진 것으로 나타났다.

이러한 안티크롬 운동 뒤에는 크롬보다 콘텐츠를 우선시해야 한다는 모바일에서 영감 받은 가정이 자리하고 있다. 물론, 사용자는 콘텐츠와 연관되어 웹사이트를 방문하며 영리한 UI에 감탄하지 않기 때문에 결국 중요한건 콘텐츠다. 그렇다면, 크롬을 숨기는건 나쁜가?

크롬을 숨기는 것의 비용

사실 크롬은 사용자들이 그 컨텐츠에 참여하는 방식을 지원하고 사이트가 유용한지 아닌지를 결정한다. 크롬을 숨기는건 상당한 비용이 발생한다.

1. 사용자는 크롬을 발견해야만 한다. 크롬이 일반 메뉴 버튼 아래에 숨겨져 있든, 아니면 제스쳐(터치스크린의 윈도우8에서 처럼)아래에 숨겨져 있던 사람들은 크롬을 찾기 위해 버튼 아래를 찾아보거나 제스처를 취해야한다고 생각한다.
2. 크롬을 발견한 후에도 사용자는 나중에 같은 세션 동안 크롬에 엑세스하는 방법을 기억해야한다. 내비게이션 옵션을 노출하는것은 기억을 상기시키는것 보다 인식에 유리하므로 10가지 사용적합성 휴리스틱 중 하나를 따르게된다.
3. Window8 테스트에서는 사용자가 크롬에 엑세스한느 방법을 발견했다가 나중에 잊어버리는 경우가 종종 발견되었다. 눈에서 멀어지면? 마음에서도 멀어진다!
4. 비록 그들이 크롬에 접근하는 방법을 발견하고 기억하더라도, 사용자들은 크롬이 제공하는 기능에 접근하기 위해 더 많은 상호작용 비용을 부담한다. 햄버거 메뉴의 경우 단순한 네비게이션 선택을 바로 클릭하는것이 아니라, 먼저 메뉴 아이콘을 클릭한 다음 필요한 옵션을 한번 더 선택해야 한다. 물론, 한번 더 클릭하면 어떻냐고 생각할 수도 있다. 그러나 대부분의 경우 그 자체는 그리 많지 않지만, 사용자가 이러한 숨겨진 옵션에 반복적으로 액세스해야하는 경우 빠르게 성가신것이 된다.

콘텐츠 대 크롬 비율과 화면 사이즈

크롬이 너무 많다면 나쁘지만, 너무 적은 크롬도 나쁘다. 우리가 극대화해야 하는 것은 화면에서 콘텐츠가 차지하는 양이 아니다. 우리는 콘텐츠 대 크롬 비율을 극대화 해야한다. 그리고 그 비율은 화면 크기에 따라 조절되어야 한다. 작은 스크린에서, 8개의 항목이 있는 네비게이션 바는 사용 가능한 화면 공간의 절반 이상을 차지해버리기 쉽다. 그것은 콘텐츠를 대체할수 있고 사용자가 페이지에 대해 파악하기 위해 스크롤 하게 만든다. 콘텐츠 대 크롬의 비율이 너무 작은 경우, 메뉴 버튼 아래로 기능적인 버튼을 숨겨서 그 비율을 증가시키게 될 수도 있다. (작은 화면이라도, 햄버거 메뉴 아래에 네비게이션을 숨기는 것은 이상적이지 않다: 보이지 않는 것은 마음에서 멀어지며 사람들은 그것을 발견하기 위해 조금 더 많은것을 수행해야 한다. 제스처 기반 인터페이스에 대한 우리의 연구는 또한 보이지 않는 크롬이 접근하기 어렵다는 것을 보여준다. 하지만 스마트워치와 같은 작은 화면에서는 제스쳐가 유일한 방법이다.

훨씬 더 큰 데스크톱 모니터에서는 8개의 네비게이션 바가 콘텐츠 대 크롬 비율에 영향을 최소화한다. 네비게이션이 숨겨져 있으면 비율이 좀더 낮겠지만 크롬을 숨겨두는 비용을 정당화할 만큼 좋지는 않다. 또한 작은 아이콘은 작은 화면보다 큰 화면에서 간과하기 수비다.

궁극적으로, 사람과 기기간 커뮤니케이션 채널 용량이 작다면 정보를 압축해 최대한 적은 픽셀로 많은 가치를 전송해야한다. 주로 콘텐츠에 의해 가치가 전달되기 때문에 크롬을 최소화하는 것이 타당하다. 그러나 그 주장은 더 큰 화면에는 해당되지 않는다.

Chrome을 최소화하되 콘텐츠 대 크롬 비율에는 영향을 미치지 않는 데스크톱 디자인 패턴

최근 기사 중 몇가지는 데스크톱의 콘텐츠 대 크롬 비율을 잘못 개선하려는 모바일 종속 디자인 트렌드에 초점을 맞추고 있다. 이 과정에서 콘텐츠 대 크롬 비율을 최소한으로 변경하지만 사용성이 희생된다.

1. 네비게이션의 햄버거 메뉴햄버거 메뉴는 모바일에서 더 쉽게 찾을 수 있다. 여전히 모바일에서 많은 사용자들이 메뉴 내부의 기능에 접근하지 않거나 단순히 확인하는것을 잊는다.
   데스크탑에서의 햄버거 아이콘의 인기는 모바일에서의 보편성과 모든 기기에서 단일 디자인을 시도하는 반응형 웹사이트의 확산에서 영감을 받았다. 불행히도 햄버거 메뉴의 작은 크기 (큰 바탕 화면에 비해)는 발견하기 어렵다.
2. 검색 박스 대신 돋보기 아이콘
   검색 박스를 제거하고 돋보기 아이콘으로 교체하는 것은 모바일에서 거의 표준이 되었다. 데스크톱에서는 공간이 너무 커서 사용자가 작은 검색 아이콘을 찾을 인내심이 없다. 데스크탑에서 이 방법을 적용할 경우, 공간을 절약 한것이 검색 도구를 발견해내기 위해 낭비되는 시간을 정당화할 수 없다는것을 명심해라.
3. 라벨이 없는 아이콘 (또는 썸네일)
   아이콘이나 이미지가 더 몰입감 있는 경험을 제공하고 스크린의 공간을 절약한다고 생각할수 있지만 사실 대부분은 말보다 훨씬 애매하다. 아이콘이나 그림이 텍스트 없이 스스로 네비게이션에 사용되는 경우, 절약된 공간은 정보 향기 (information scent)의 손실을 정당화하지 못한다.

결론

데스크톱 및 모바일 화면 크기는 제약 조건이 다르므로 각자 다른 사용성 규칙이 따른다. 디자이너가 모바일에서 해야하는 절충점은 데스크탑에 잘 일반화되지 않으며, 그 반대의 경우도 마찬가지이다. 크롬을 없애는 시류에 편승하기 전에 두번 생각해보자. 스스로에게 물어보자. 감소된 크롬 인터페이스는 콘텐츠대 크롬 비율을 크게 향상 시키는가? 아니라고 대답한다면 크롬을 노출시켜라. 또한 같은 디자인이어도 디바이스마다 다르게 작업될 수 있다는걸 기억해라.

다른 디바이스간 디자인에 대해 공부하고 싶다면 Scaling user Interfaces 수업을 확인하라!

 

 

• 참고 자료: What does "chrome" mean in Microsoft design guidelines?
• 원문 바로가기: Maximize the Content-to-Chrome Ratio, Not the Amount of Content on Screen