유저인터페이스 디자인팁 및 테크닉

1. Consistency, Consistency, Consistency

인터페이스 디자인과정에서 가장 중요하다고 강조할 수 있는 부분
어떤 리스트에 있는 버튼을 더블 클릭해서 생기는 이벤트는 다른 버튼을 눌렀을 때도 비슷한 종류의 이벤트가 생겨야 한다.
버튼들을 일관된 위치에 둔다. 비슷한 종류의 단어와 문장을 사용한다. 전체적으로 비슷한 컬러스킴을 사용한다.
정확한 유저 인터페이스 디자인은 사용자로 하여금 정확한 멘탈모델을 형성하도록 하며 낮은 훈련시간을 통해 비용절감 효과를 가져올 수 있게 한다.

 

 

2. Set standards and stick to them

Consistency를 보장하는 가장 확실한 방법은 디자인 표준을 정하고 최대한 여기에서 어긋나지 않도록 노력하는 방법이다.
IBM(1993), Microsoft(1995)에 정의된 업계 표준은 인터페이스 디자인 표준의 95-99%를 포함한다고 봐도 좋을 것이다. 이런 업계 표준을 수용함으로써 여러분 작업의 효율성을 높일 수도 있으며 사용자로 하여금 이들 대형 소프트웨어와 비슷한 사용감각을 느낄 수 있도록 할 수 있다.

 

 

3. Explain the Rules

소프트웨어가 일관적으로 작동하도록 디자인되었다면 사용자에게 가장 기본이 되는 규칙만을 알려주면 된다. 이 경우 훨씬 빠르고 정확하게 소프트웨어의 기능을 설명해 줄 수 있다.

 

 

4. Support both novices and experts

검색 엔진의 경우 초보자들을 위한 검색기능도 있어야 하겠지만 훨씬 더 복잡하고 고도의 기능을 요구하는 전문가들의 고유한 검색방법을 지원하는 화면과 기능도 포함되어야 할 것이다.

 

 

5. Navigation between screens is important

만약 사용자가 어디에서 왔고, 어디에 있으며, 어디로 가야할 지 모른다면 사용자는 금새 망막함을 느끼고 포기하게 될 것이다. 화면의 진행과정이 작업의 진행과정과 일치하지 않는다면 응용소프트웨어의 논리상에 문제가 있는 것이다.
다양한 사용자들은 그들만의 다양한 방법으로 소프트웨어를 작동하기 때문에 다양한 접근법을 지원할 수 있는 네비게이션 구조를 만드는 것이 중요하다.

 

 

6. Navigation within a screen is important

서구문화권에서 사람들은 좌측에서 우측으로, 상단에서 하단으로 책을 읽는다. 이런 이유로 인해 메뉴나 제목들은 항상 좌측 또는/ 그리고 상단에 위치한다. 이와 같이 사용자가 편리하도록 화면을 구성하는 것이 중요하다.

 

 

7. Word your messages and labels appropriately

텍스트는 웹 페이지상에서 가장 많은 것을 전달하는 중요한 매체이다. 약어보다는 full sentence를 사용함으로써 정확하고도 이해하기 쉽게한다. 긍정적인 문체를 사용하고 사용자 자신이 컨트롤 할 수 있다는 자신감을 갖도록 문장을 작성해야 한다.
예를 들어 “비밀번호를 잘못 입력했습니다.”와 “비밀번호는 최소 8자리 이상이어야 합니다.” 가운데 어느 것에 더 친숙하게 느끼게 되는가?

 

 

8. Understand your widgets

메뉴, 버튼, 스크롤 바 등과 같이 어느 소프트웨어에나 공통적으로 사용되는 기능들을 모아 놓은 것을 widget이라고 한다. 이들 기능들은 적절한 목적에 따라 적합한 위치에 사용하는 것이 좋다.

 

 

9. Look at other applications with a grain of salt

다른 종류의 응용소프트웨어가 업계 표준의 디자인 가이드를 따르고 있다는 확신이 서지 않는 한 그 응용소프트웨어가 올바른 인터페이스 디자인을 구현하고 있다고 가정해서는 안된다. 하지만 다른 응용소프트웨어를 사용함으로써 느끼는 편리함이나 불편함을 개선, 발전시켜 여러분이 개발하는 소프트웨어에 응용하는 것은 좋은 노력이다.

 

 

10. User color appropriately

색상을 통일감있게 사용함으로써 공통적인 모양과 느낌을 줄 수 있도록 노력하라. 각기 다른 시스템에서 원하는 컬러가 꼭 같이 표현될 것이라고는 기대하지 않는 것이 좋다. 경우에 따라서는 사용자 가운데 색맹이 있을 수 있다는 점도 감안하는 것이 좋다.

 

 

11. Follow the contrast rule

텍스트의 색상과 배경색상은 항상 contrast를 이루도록 한다. 흰색 배경에 파란색 글씨는 잘 보일 수 있지만, 빨간색 배경에 파란색 글씨는 가독성이 떨어진다. 이유는 파란색과 흰색은 contrast이지만, 빨간색과 파란색은 contrast가 아니기 때문이다.

 

 

12. User fonts appropriately

읽기 쉬운 서체를 사용하라. Times Roman과 같은 serif폰트를 사용하는 것도 좋은 방법이다. 일관된 서체를 사용하며 지나치게 많은 종류의 폰트를 섞어 사용하는 것은 좋은 방법이 아니다. 한 페이지에 보통 3-4개 이상의 다른 서체를 동시에 사용하는 것은 좋은 방법이 아니다.

 

 

13. Gray things out, do not remove them

사용자들에게 항상 모든 기능을 보여줄 필요는 없다. 파일을 삭제하는 경우 객체를 선택하고 삭제 명령(버튼)을 내리게 되는데 객체를 선택하면서 다음의 명령이 해당 파일을 지울 수 있다는 것을 머리 속에 새기는 역할을 하게 된다.
당장 불필요하더라도 버튼을 지우기 보다는 gray out하는 것이 더 좋은 방법이다.

 

 

14. Use non destructive default buttons

키보드 상의 Enter/Return 키를 누름으로써 기본적으로 작동하는 default 기능들이 있다. 이런 기능들은 사용자 환경을 간편하게 한다는 점에서는 환영할 만하나 자칫 실수로 눌린 버튼에 의해 원하지 않는 사건이 발생하는 경우도 있다.
따라서 default button에는 destructive한 기능을 두지 않는 것이 바람직하다.

 

 

15. Alignment of fields

2개 이상의 필드를 가지고 있는 경우 필드는 좌측에 맞추어 정렬하고 해당하는 레이블은 우측에 맞추어 정렬하는 것이 좋은 방법이다.

 

 

16. Justify data appropriately

아래로 정렬된 데이터들의 경우 숫자는 우측정렬에 맞추고, 소수점이 있는 경우는 소수점에, 그리고 문자열은 좌측정렬하는 것을 원칙으로 한다.

 

 

17. Do not create busy screens

지나치게 혼잡한 화면은 이해하기 난해하여 사용하기도 어렵게 된다. 실험결과에 따르면 화면의 밀도는 전체의 40%이상을 넘지 않아야 하고 그룹들 안의 지역 밀도는 62%를 넘지 않아야 한다.

 

 

18. Group things on the screen effectively

논리적 연관성을 가지고 있는 아이템들을 화면상에서 함께 그룹지어 놓는 것은 좋은 방법이다. 전혀 무관한 것들은 별개의 것들로 처리되어야 하며 이들 간에는 일정 간격을 두어 개별적인 것임을 나타내 주어야 한다.

 

 

19. Open windows in the center of the action

사용자가 어떤 버튼을 더블 클릭했을 때 사용자의 집중력은 그 클릭한 부분에 있다. 따라서 새롭게 열리게 되는 창의 위치 역시 클릭한 부분에서 열리는 것이 바람직하다.

 

 

20. Pop-up menus should not be the only source of functionality

사용자가 알아야 하는 기능들을 모두 팝-업 메뉴 속에 숨겨 둔다면 사용자는 응용소프트웨어를 배우기 위해 훨씬 더 많은 시간을 투자해야 할 것이다. 따라서 메타포 아이콘을 이용한 버튼을 내세워 주요한 기능들에 쉽게 접근할 수 있도록 해 주는 것이 중요하다. 

[출처] 유저인터페이스 디자인팁 및 테크닉 ([웹기획]WWW를 만드는 사람들) |작성자 파랑도적