3강 인터페이스(Interface)

인터페이스(Interface)

인터페이스(Interface) 디자인은 시각적인 그래픽 디자인하고는 다릅니다. 앞서 배운 템플릿 디자인
이 시각적인 디자인이라면 인터페이 디자인은 그와 상반된 디자인이라고 할 수 있습니다. 즉, 유저의
눈에 보이지 않는 디자인이다.

예를 들어, 야후나 네이버와 같이 우리가 자주 찾아가는 검색 사이트를 보면 그래픽 디자인이 무척 단
순합니다. 디자인이 단순해도 검색엔진을 찾는 사람들은 다른 어떤 사이트에 비해 상당히 많습니다.
왜 그렇까요? 답은 간단합니다. 검색 사이트를 찾는 유저들은 사이트의 시각적인 디자인을 보기 위
해 사이트에 접속하기보다 정보를 찾기 위해 사이트를 접속하기 때문입니다.

바로 여기에 인터페이스 디자인의 정의가 담겨져 있습니다. 인터페이스 디자인은 유저가 정보를 보
다 쉽고 빠르게 찾을 수 있는 일종의 수단 또는 도구와 같은 것입니다. 마치 문에 손잡이가 없다면 문
을 열수 없는 것처럼 웹에 인터페이스가 없다면 유저는 정보를 찾을 수 없을 것입니다.

 

다음의 세 검색 사이트를 보면 우리는 쉽게 몇 가지의 공통점을 찾아 낼 수 있습니다. 그것은 바로 검색 입력란의 위치입니다. 세 사이트 모두 웹페이지 윗부분에 위치하고 있고 페이지 내의 다른 컨텐츠에 비해 자사의 로고와의 거리가 가장 가깝다는 것을 알 수 있습니다.

 

 

 

 

 

페이지의 사용성

가장 크게 차이가 나는 것은 페이지의 크기 입니다. 동아일보는 기사의 내용이 많아지면 페이지가 길어집니다. 유저는 길어진 페이지를 보기 위해 스크롤을 해야 합니다. 반면에 중앙일보는 한 화면에 표시도도록 페이지 길이에 제한을 두었고 그 크기를 넘어서면 다음 페이지로 넘어가도록 Next 버튼을 삽입해 놓았습니다. 기사의 내용을 한 눈에 볼 수 있도록 만든 가시성의 예라 할 수 있겠습니다.

또한 동아일보는 한 줄의 폭이 너무 넓습니다. 일반 종이 신문에 익숙해져 있는 사람은 인터넷으로 신문을 볼 경우 자신의 습관에 혼동을 일으킬 수도 있습니다. 하지만 중앙일보는 종이 신문과 비슷한 폭을 지니면서 일반 신문에서 느낄 수 있는 단의 구성까지 갖추고 있습니다. 신문 기사의 폭은 가독성 고려해 눈동자를 움직이지 않고 신문기사를 위아래로 훑어 읽도록 15-20자의 글자 수로 되어 있습니다. 만약 이 폭이 넓으면 눈동자를 좌우로 움직여야하기 때문에 가독성이 떨어지고 눈의 피로도가 증가하게 됩니다.

 

 

사용성에 대해 조금 이해가 가나요? 이번에는 메뉴의 간결성에 대해서 알아보겠습니다. 메뉴의 간결성은 불필요한 메뉴를 최대한 억제하면서 메뉴의 수를 최소로 하는 것입니다. 메뉴가 많으면 유저들은 메뉴 속에 혼란에 빠질 것이고 정보를 찾는데 그만큼의 시간을 소비하게 됩니다.

 

 

메뉴의 간결성

먼저 동아일보의 경우는 기사에 대한 카테고리 목록이 너무 많이 표시되어 있고 상단의 가로에 있는 메뉴는 주 메뉴라기보다는 부 메뉴에 가까운 내용들로 구성되어 있습니다. 상단 가로로 위치하는 메뉴의 역할은 홈 버튼과 같은 사이트 운영에 필수적인 메뉴로 구성되어 있어야 합니다. 이에 중앙일보는 전체 메뉴 카테고리를 다섯 개(종합, 경제, 스포츠, 연예/오락, 정보과학)로 분류에 해 해당 메뉴를 클릭하면 부 메뉴가 표시되는 형식을 취하고 있습니다. 메뉴의 체계와 조직이 잘 되었다고 할 수 있습니다. 그렇다고 동아일보의 메뉴 구성이 사용성을 배제한 것은 아닙니다. 신문 기사에 관련된 메뉴는 모두 열 다섯 개입니다. 신문 기사 메뉴만 좌측에 표시되어 있다면 사용자는 단 한번 클릭으로 원하는 섹션 페이지로 이동할 수 있을 것입니다. 하지만 중앙일보는 섹션 페이지로 이동하기 위해서
는 두 번을 클릭해야하는 번거로움이 있을 수 있습니다.

여기서 한 가지 알 수 있는 것은 사이트의 구조입니다. 메뉴 시스템을 만들 때에는 먼저 컨텐츠를 체계화하여 카테고리별로 조직화해 내는 것입니다. 이렇게 구성된 메뉴는 동아일보와 중앙일보처럼 수평적 사이트 구조와 수직적 사이트 구조로 나뉩니다. 다음 그림은 사이트의 수평적인 메뉴 구조와 수직적인 메뉴 구조를 보여주고 있습니다.

 

 

출처 : Tong - coolzinn님의 Na.3D웹디자인..통