해결책
2017년까지 플랫 디자인이 웹을 지배했고, 그와 함께 무엇이 클릭 가능한지 알려주는 단서가 제거된 인터페이스가 따라왔다. 파란 밑줄 링크, 입체감 있는 버튼, 드롭 섀도는 고스트 버튼과 본문 텍스트와 구별할 수 없는 텍스트로 대체되었다. 업계는 그 절충을 취향으로 논쟁했다. 디자이너들은 깔끔한 외관을 옹호했고, 사용성 전문가들은 사용자들이 길을 잃고 있다고 일화적으로 경고했으며, 어느 쪽도 데이터를 갖지 못했다.
닐슨 노먼 그룹은 의견을 측정으로 대체하기 위해 통제된 아이트래킹 실험을 진행했다. 전자상거래, 비영리, 호텔, 여행, 기술, 금융 등 6개 도메인의 실제 라이브 페이지 9개를 가져와, 표시자(signifier) 강도만 다른 두 가지 버전을 만들었다. 일반 웹 사용자 71명을 각각 한 버전에 배정하고, 어디를 클릭할지 찾도록 요청하는 동안 아이트래킹 장비가 그들의 고정(fixation)과 시간을 기록했다.
약한 표시자 페이지는 실제 노력을 더 요구했다. 사용자들은 목표를 찾기까지 22% 더 많은 시간을 쓰고 25% 더 많은 고정을 했으며, 9개 페이지 쌍 중 6개에서 서로 다른 시선 패턴이 나타났다. 아무것도 자신 있게 클릭 가능해 보이지 않아 주의가 페이지 전체로 흩어진 것이다. 파인 주얼리 페이지에서는 강한 버전 사용자의 86%가 섹션 제목에서 "Shop Pearl" 링크로 시선을 옮긴 반면, 약한 버전에서는 50%에 그쳤고 24명 중 9명이 제목 자체를 클릭하려 했다.
플랫 디자인이 통한 경우도 그만큼 가치 있었다. 세 페이지 쌍은 차이를 보이지 않았고, 이들은 낮은 정보 밀도, 전통적 레이아웃, 높은 대비의 목표물이라는 공통점을 가졌다. 이 연구는 플랫 디자인을 비난한 것이 아니라, 언제 안전한지를 규정했다. 논문 발표는 충분한 논쟁을 불러일으켜 NN/g가 비판에 대한 반론을 발표하게 했고, 그 결과는 이후 수년간 회사의 플랫 디자인 지침에 반영되었다.
성과
클릭 가능성 단서만 다른 짝지은 페이지 쌍을 버튼 찾기 과제에서 아이트래킹하여 취향 논쟁을 측정으로 매듭지었다
짝지은 쌍은 표시자 강도를 제외한 모든 디자인 변수를 일정하게 유지했기에, 라이브 페이지 연구가 상관관계가 아닌 인과관계를 주장할 수 있었다.
고정과 과제 시간은 미학적 논쟁을 이해관계자 누구나 비교할 수 있는 노력 비용으로 번역했다.
71명의 무작위 배정 사용자를 둔 피험자 간 설계는 차이에 통계적 유의성(p < 0.05)을 부여했다.
플랫 페이지가 해를 끼치지 않은 조건을 발표함으로써, 이 연구는 디자이너들에게 무시할 판결이 아닌 실행 가능한 답을 주었다.
공개된 히트맵은 효과를 한눈에 보이게 했다. 약한 표시자는 주의를 페이지 전체로 흩뜨렸는데, 이는 사용자가 버튼을 찾아 헤매는 특징이다.
업계가 취향으로 논쟁할 때는 논쟁 중인 변수를 짝지은 쌍으로 분리하고 수치를 발표하라. 그러면 논쟁은 조건이 명시된 해결 가능한 문제가 된다.
후속 영향
이 연구는 NN/g의 가장 논쟁적인 글 중 하나가 되었다. 발표 다음 날 해커 뉴스에서 354점과 171개 댓글을 얻었고, NN/g 자체 설명에 따르면 이 글은 "플랫 디자인에 관한 상당한 논쟁"을 불러일으켰으며, 회사는 비판에 대한 공개 반론으로 응답했다. 그 결과는 더 넓은 연구 프로그램으로 이어졌다. 플랫 디자인이 통할 수 있는 경우, 장기적 노출이 사용자 효율성을 서서히 떨어뜨리는 방식, 교정된 플랫 미학에 필요한 것에 관한 후속 글들이 나왔고, 이는 하나의 실험을 시각 스타일을 선택하는 디자이너들에게 오래가는 참조점으로 만들었다.
근거 확인하기
출처
- Flat UI Elements Attract Less Attention and Cause Uncertainty Nielsen Norman Group · nngroup.com ·
- Flat UI Elements Attract Less Attention and Cause Uncertainty — Hacker News discussion Hacker News · news.ycombinator.com ·