이 글의 목차
인터페이스를 평가할 때 “깔끔하다”는 말은 자주 쓰이지만, 실제 결정을 돕기에는 조금 모호하다. 여백이 넓고 색이 적어도 사용자가 다음 행동 앞에서 멈춘다면 좋은 인터페이스라고 부르기 어렵다.
내가 더 자주 확인하는 기준은 망설임의 크기다. 지금 어디에 있는지, 무엇을 누를 수 있는지, 누르면 어떤 일이 일어나는지를 사용자가 추측해야 할수록 망설임은 커진다.
시각적 위계는 순서를 알려준다
한 화면에 있는 모든 요소가 같은 목소리로 말하면 사용자는 중요도를 직접 계산해야 한다. 제목, 설명, 보조 정보의 크기와 대비를 다르게 두는 이유는 단순히 화면을 풍성하게 만들기 위해서가 아니다. 읽는 순서를 미리 안내하기 위해서다.
글 목록을 예로 들면 다음 순서가 자연스럽다.
- 제목으로 읽을 글인지 판단한다.
- 설명으로 기대하는 내용을 확인한다.
- 날짜와 읽는 시간으로 지금 읽을지 결정한다.
이때 날짜가 제목보다 눈에 띄거나 모든 글이 커다란 카드로 강조되면 순서가 흐려진다. 중요하지 않은 것을 작게 만드는 일도 중요한 것을 크게 만드는 일만큼 필요하다.
포인트 색에는 역할이 필요하다
색은 적을수록 무조건 좋은 것이 아니다. 어떤 색을 왜 반복하는지가 분명해야 한다. 이 블로그의 코발트 색은 링크, 키보드 포커스, 현재 목차, 읽기 진행률에만 나타난다.
사용자는 몇 번의 경험만으로 “이 색은 현재 위치나 행동 가능성을 뜻한다”고 학습할 수 있다. 같은 색을 제목 장식이나 배경 무늬에도 사용하면 그 약속은 약해진다.
상태는 행동 가까이에 보여준다
버튼을 눌렀는데 결과가 멀리 떨어진 알림으로만 나타나면 사용자는 자신의 행동과 결과를 다시 연결해야 한다. 코드 복사 버튼이 잠시 완료로 바뀌는 것은 작은 변화지만, 피드백이 행동한 위치에서 즉시 일어난다는 점이 중요하다.
좋은 상태 표현은 세 가지 질문에 답한다.
- 입력이 전달되었는가?
- 지금 어떤 상태인가?
- 다음에 무엇을 할 수 있는가?
색상 하나만으로 상태를 구분하지 않는 것도 같은 이유다. 완료라는 문구, 현재 메뉴의 위치, 버튼의 접근성 이름이 함께 변해야 화면을 보지 못하는 사용자도 같은 결과를 이해할 수 있다.
반응형은 줄이는 일이 아니다
데스크톱 화면을 그대로 축소해 모바일에 넣으면 정보는 남아 있어도 관계가 무너진다. 반응형 디자인은 공간이 달라졌을 때 무엇을 가까이 두고 무엇을 뒤로 보낼지 다시 판단하는 일이다.
예를 들어 긴 글의 목차는 넓은 화면에서 본문 옆에 계속 보이면 유용하다. 모바일에서 같은 목차가 본문 폭을 차지하면 오히려 읽기를 방해한다. 그래서 작은 화면에서는 접을 수 있는 블록으로 바뀌고, 필요할 때만 열린다. 기능을 삭제한 것이 아니라 상황에 맞는 형태로 옮긴 것이다.
터치 영역은 보이는 크기보다 커야 한다
짧은 메뉴 글자는 시각적으로 작아도 괜찮지만, 손가락으로 누르는 영역까지 작아서는 안 된다. 링크 주변에 최소한의 높이를 확보하면 화면의 밀도는 유지하면서 실수는 줄일 수 있다.
이 원칙은 데스크톱에서도 도움이 된다. 넉넉한 클릭 영역은 마우스를 정밀하게 움직이기 어려운 상황과 키보드 포커스 표시를 모두 개선한다.
일관성은 반복되는 약속이다
일관적인 디자인은 모든 페이지가 똑같아 보이는 상태가 아니다. 같은 의미가 같은 방식으로 표현되는 상태다. 링크 색, 날짜 형식, 제목 간격, 테마 전환 위치가 페이지마다 달라지지 않으면 사용자는 새 화면에서도 이미 배운 규칙을 활용할 수 있다.
사용자가 인터페이스를 해석하는 데 쓸 에너지를 콘텐츠에 돌려주는 것. 그것이 일관성이 만드는 가장 큰 이득이다.
세련된 화면은 잠깐의 인상을 남긴다. 망설임이 적은 화면은 사용자가 하려던 일을 끝내게 한다. 둘 중 하나만 선택해야 하는 것은 아니지만, 디자인 판단이 어려울 때는 후자를 먼저 지키는 편이 오래 유효하다.