01. 누구나 UX 전문가가 될 수 있다.
- UX 전문가가 되기 위해서 갖춰야 할 두가지 핵심적 특성은 객관성과 공감이다.
02. 두 가지 이상의 서체를 사용하지 마라
서체(typeface)와 폰트(font)는 다르다.
흔히들 폰트를 서체의 의미로 사용하고 있는데 폰트의 정확한 의미는 소프트웨어에서 서체를 렌더링하고자 사용하는 파일을 말한다.
폰트가 팔레트에 있는 페인트라면, 서체는 캔버스 위에 그려진 명작에 해당한다.
- 최대 2개의 서체를 사용하라
- 하나는 타이틀에 사용하고 회사의 브랜드를 표현하기 위해서 사용하라
- 하나는 본문에 사용하고 가독성을 위해 사용하라
03. 사용자의 컴퓨터에 설치된 폰트를 사용하라
본문에 사용되는 폰트는 가급적 기본 폰트를 사용하라.
맞춤형 폰트를 사용하기 위해서는 페이지 로드 속도가 지연된다.
아래는 시스템 폰트 모음(system font stack)이다.
font-family: apple-system BlinkMacSystemFont Segoe UI Roboto Oxygen-Sans Ubuntu Cantarell Helvetica Neue sans-serif
04. 글자 크기를 사용해서 정보 체계를 표현하라
사용자에게 먼저 보여 주길 원하거나 사용자에게 가장 유용하다고 생각되는 정보의 크기를 키워라.
단, 균형을 찾고 이를 과용하지 마라. 페이지의 너무 많은 요소가 크게 표시된다면 체계와 강조의 의미를 상실하게 된다.
- 사용자에게 어떤 정보가 중요할 지 생각하라
- 크기를 과용하지 마라(저자는 3개 정도 사용을 추천)
05. 본문에는 합리적인 기본 크기를 사용하라
고정된 크기의 글자를 사용하던 시기는 이미 지났다.
데스크톱과 모바일 브라우저 대다수에서는 사용자가 글자 크기를 키우거나 줄일 수 있고, '읽기 모드'로 전환해서 큰 글자 크기 및 고대비(high-contrast)색상과 같은 시스템 접근성 설정을 적용할 수 있다.
읽기 쉬울 정도로 글자가 커야 한다. 하지만 사용자에게 부담을 주거나 공간을 지나치게 많이 차지해서 빡빡하게 보이면 안 된다.
font-size :16px; line-height: 1.5; letter-spacing: 'auto' | 'default'
위의 내용이 안전한 선택이며, 사용자의 대다수에게 적절한 기본값이다.
본문에서 자신만의 독특한 간격을 설정하려는 노력은 대체로 불필요하다. 왜냐하면 브라우저가 당신이 할 수 있는 것보다 글자 렌더링을 더 잘하기 때문이다.
- 기기의 크기 조정 기능을 절대로 비활성화시키지 마라
06. 줄임표를 사용해서 다음 단계가 있다는 것을 알려라
버튼의 텍스트에 줄임표를 추가하여 또 다른 단계가 존재한다는 것을 사용자가 알아챌 수 있도록 하라.
액션을 수행하기 위한 추가 단계가 필요하다면, 컨트롤에 줄임표(...)를 포함시켜라.
추가 단계가 있는 경우 줄임표(...)를 사용하고 있다.
이 작은 점들은 보이지 않는 디자인의 훌륭한 예제이다.
대다수의 사용자는 이를 인식조차 하지 못하겠지만, 그 점들은 사용자 경험이 지속적으로 형성되는 것처럼 미묘한 메시지를 전달한다.
참고 문헌 : 윌 그랜트. UX 원칙 (Uxer를 위한 101가지 원칙). 에이콘출판주식회사. 2019