버튼을 만들 때 지켜야 할 세가지 원칙

좀 지난 페이지지만 저번에 스크린샷 찍어놨던걸 올려본다.

위 그림을 클릭해서 새 창으로 띄워서 확인해보라. 테스트 환경은 파이어폭스3에서 연다음 파이어버그로 소스 조회를 해봤다. (약도보기) 부분에 마우스를 올리면 응당 피드백이 있어야하는데, 내부 소스를 잘못 넣어둔 탓에 피드백이 없다.

사용 패턴상 이용자는 본문을 쭉 읽다가 (약도보기) 부분에 링크가 있음을 예상하고 마우스로 더듬게 된다. 그때 커서 모양이 손가락 모양으로 변한다던가 하는 식으로 피드백이 있으면 그것이 링크임을 확신하고 클릭하게된다. 근데 위 예제에서는 마우스를 올려도 전혀 반응이 없다.

버튼을 만들때는 아래 세가지 원칙을 지켜야한다.

버튼을 만들 때 지켜야 할 세가지 원칙

첫째 : 디자인상 버튼을 버튼답게 만들라.

둘째 : 이용자의 액션에 충분한 피드백을 주라.

셋째 : 클릭 한 이후 결과물을 예측할 수 있게 하라.

1. 디자인상 버튼을 버튼답게 만들라

말은 간단하다. 버튼을 버튼스럽게 디자인하라는 말인데,

이렇게 딱 봐도 버튼처럼 보이는 디자인이 제일 적극적인 방식이고, 소극적으로는 텍스트에 밑줄 긋는 정도로만 버튼(혹은 링크)스럽게 디자인할 수 있다. 버튼 처럼 생겼으니 버튼이라 짐작하고 이용자가 클릭하게 된다.

2. 이용자의 액션에 충분한 피드백을 주라.

마우스를 올렸을 경우(이용자 액션), 글씨색이 변한다거나, 글씨에 밑줄이 그어지거나, 마우스 포인터가 손가락 모양으로 변하는 등의 피드백이 있어야한다. 이런게 없으면 위 예제처럼 화면을 더듬으며 긴가민가하게된다. 삼성 휴대폰 햅틱에서 터치를 할 때 진동을 주어 피드백을 주는게 이런 부류다.

3. 클릭 한 이후 결과물을 예측할 수 있게 하라.

텍스트나 이미지, 상징물 등을 통해 버튼의 기능을 보여주는것은 버튼 디자인의 가장 기본적인 요소중 하나다. 하지만 의외로 많은 부분에서 그렇지 않은 모습을 발견하곤 한다. 대게는 디자인상 임의로 무시해버린 경우, 혹은 만든 양반이 자기는 안다고 남도 알거라고 착각하는 경우다. 위 예제의 경우 (약도보기)라고 써놨으니 클릭하면 약도가 뜰거라는걸 짐작할 수 있다.(문제는 저게 버튼인지 알 수 없다는거지만..)

이 글이 도움이 되었다면 RSS로 구독하세요.

http://blog.daum.net/xml/rss/miriya

이 블로그의 모든 글은 자유롭게 링크할 수 있으며, 오픈캐스트 발행을 허용합니다.

다음 블로그로 스크랩하거나, 출처와 함께 퍼가도 뭐라 안합니다.(출처 없으면 뭐라 할겁니다.)