위대한 UI에 적용되는 과학적 원리 (Science of Great UI)


위대한 UI에 적용되는 과학적 원리 (Science of Great UI)를 바쁜 분들을 위해 요약했습니다.
(하지만, 비디오 시청을 권장합니다. 쉽고 명확한 예시를 통해 좋은 화면과 그렇지 않은 것의 차이를 눈으로 쉽게 확인할 수 있습니다.)
– 발표자(Mark Miller)는 16년간 훌륭한 UI를 연구해 오고 있습니다.


매우 유용하고 UI에 적용되는 과학적 원리와 응용된 팁을 배울 수 있습니다. 저는 개발 뿐만 아니라 문서 작성에도 이 원리를 적용하려고 합니다. 소개되는 팁들 역시 바로 사용할 것입니다.

과학적 원리

응용된 

중요도와 강조

화면의 모든 요소가 정보이다.

하지만 중요도는 다르다.
대비가 클수록 강조되고구분이 명확해진다.

해당 화면 요소의 중요도와 강조의 정도를 일치시키자.

전달하고자 하는 내용(주목적) 가장 중요하다형식(보조 수단) 강조하지 말자.

대비와 가독성

(색상이 아니라) 명도 대비가  수록 가독성이 높다.

화면에 흑백필터 적용해보면 (Brightness) 사용해보면 가독성을   있다.

글 상자의 여백

정답은 없지만 인간이 글을 인식하는 방식에 기반한 실험 결과에 따른 알맞은 수준이 있다.

단어 사이 간격의 1.5 여백으로 적당하다.

상자의 테두리

테두리 선을 얇게 하고 명도 대비를 낮추면안에 있는 글자 인식을  방해한다.

상자의 테두리 선은 명도 대비를 낮추고 얇은 선을 사용하자여백을 충분히  줄여도 된다.

모퉁이

뾰족한 모퉁이는 시선을 끈다.
(사람들은 뾰족한 곳이 중요한 곳이라고 생각한다.)

아이콘 등 작은 도형은 끝을 둥글게 만들자.

(이유같은 크기의 뾰족한 도형보다  많은 픽셀 들어가므로 멀리서도 더 잘 보이고 커보인다. 게다가 불필요한 강조(뾰족한 지점) 없어진다.

강조하고 싶은 곳만 뾰족한 모퉁이를 사용하자.

연필 모양  뾰족한 곳이 필요한 경우에도 연필 끝이 중요하지 않다면둥글게 처리하여 위와 같은 효과를 얻자.

도형 안쪽
비우기 vs  채우기

(아래 참조)*

버튼을 강조하려면 버튼 색상을 채우자

 

도형 안쪽 배우기와 채우기 비교 (사각형 버튼을 비교하기)

버튼 안쪽 비우기

버튼 안쪽 채우기

(글자를 제외하고)
표시되는 픽셀수

1,000 

10,000 

사용되는 사각형의 개

2 (테두리 바깥과 사각형

1 사각형

모퉁이의 개

8 (테두리 바깥과 )

4

선명하지 않을 때의 전달력

눈에 띄지 않는다

눈에 띈다

시각적 메시지

테두리가 중요하다.
(테두리에 뾰족한 모퉁이가 8개나 있다)

도형이 중요하다.

 

[UI 향상해보기]

6_improvement.png

  • 원에서 불필요한 뾰족한 모퉁이 제거
  • 그래프의 명도 대비를 확대
  • 불필요하게 대문자로만 된 글자를 소문자로 변경 (모든 글자가 강조되어 서로 자기가 중요하다고 하는 것은 좋지 않다. 중요한 것만 강조하자)
  • 불필요한 색상 제거하고 명도 변화만 살짝 적용(중요하지 않은 곳에 불필요하게 시선을 끌지 말자)

 

기타 참고 스크린샷 (원문 비디오에는 더 많은 예시가 있습니다)

1_tableborder.png

 

2_icon.png

 

3_shartp.png

 

4_fill.png

 

5_button.png