좋은 인터페이스는 정보가 적어서 단순한 것이 아니다. 사용자가 지금 필요한 정보와 다음에 필요한 정보를 구분할 수 있어서 단순하게 느껴진다. 밀도는 화면에 놓인 요소의 수가 아니라, 요소 사이의 관계를 얼마나 빠르게 이해할 수 있는가로 결정된다.
먼저 위계를 설계한다
모든 정보가 같은 크기와 대비를 가지면 사용자는 매번 화면 전체를 해석해야 한다. 반대로 제목, 설명, 상태, 행동의 위계가 분명하면 복잡한 화면도 빠르게 읽힌다.
설계할 때는 다음 순서로 질문한다.
- 사용자가 가장 먼저 알아야 하는 것은 무엇인가.
- 결정을 내리기 위해 필요한 맥락은 무엇인가.
- 지금 보이지 않아도 되는 정보는 무엇인가.
- 다음 행동은 어디에서 시작되는가.
간격은 장식이 아니라 문법이다
간격은 요소를 예쁘게 떨어뜨리는 수단이 아니다. 같은 간격은 같은 관계를, 더 큰 간격은 새로운 그룹의 시작을 의미한다. 8px 단위처럼 일관된 기준을 사용하면 화면 전체에 보이지 않는 리듬이 생긴다.
여백은 비어 있는 공간이 아니라 정보의 관계를 설명하는 가장 조용한 인터페이스다.
너무 큰 여백은 콘텐츠를 단절시키고, 너무 작은 여백은 서로 다른 정보를 한 덩어리로 만든다. 좋은 간격은 화면 크기가 달라져도 관계가 유지되도록 유연해야 한다.
점진적으로 공개한다
처음부터 모든 기능과 설명을 보여주면 사용자는 제품의 가능성을 많이 보는 대신 어디서 시작해야 할지 잃는다. 기본 상태에서는 가장 흔한 행동을 선명하게 보여주고, 세부 기능은 사용자의 의도에 따라 나타나게 한다.
| 정보 유형 | 기본 노출 | 필요할 때 공개 |
|---|---|---|
| 핵심 상태 | 항상 표시 | 세부 기록 |
| 주요 행동 | 한두 개만 강조 | 보조 행동 |
| 설명 | 짧은 문장 | 도움말과 예시 |
| 설정 | 현재 선택 표시 | 전체 옵션 |
모션은 상태 변화를 설명한다
애니메이션은 인터페이스를 화려하게 만드는 장식이 아니라 변화의 원인과 결과를 연결하는 도구다. 요소가 어디에서 나타났고 어디로 이동했는지 이해할 수 있을 만큼만 사용한다. 짧고 자연스러운 감속은 반응을 부드럽게 만들지만, 긴 전환은 사용자의 속도를 빼앗는다.
마지막에는 덜어낸다
완성 직전의 가장 중요한 작업은 추가가 아니라 편집이다. 중복된 레이블, 의미 없는 선, 설명하지 못하는 아이콘, 습관적으로 넣은 그림자를 하나씩 제거한다. 남은 모든 요소가 분명한 역할을 가질 때 인터페이스는 비로소 조용해진다.
