UI(User Interface) 디자인 원리

 

인터페이스란 인간과 컴퓨터간에 커뮤니케이션 하는 모든 것을 말한다.

 

웹에서의 인터페이스는 고객(방문자), 사이트 운영자(개발자), 제공하는 정보(가치)와 커뮤니케이션 하는 모든 것을 말한다.

사용자는 웹에서 네비게이션, 아이콘, 텍스트, 이미지, 링크, 이동버튼 등으로 보고, 듣고, 접촉하게 되며 좋은 인터페이스는 이러한 요소들로 인해 사용자가 원하는 정보를 좀 더 쉽고 빠르고 편리하게 얻을 수 있도록 도와줘야 한다.

 

이러한 좋은 인터페이스는 사용자들이 웹 사이트를 재방문하도록 유도하는 좋은 방법 중 하나이다.

 

사용자들은 유저 인터페이스란 것이 잘 되어 있는 쉽고 편리한 사이트들을 선호한다. 제아무리 화려하고 멋진 이미지와 칼라등으로 첫눈을 멀어버리게 한 사이트라 할지라도 사이트에서 길을 읽어 헤멘다던지, 로딩 속도가 너무 느려 원하는 페이지를 위해 많은 인내심을 가져야 한다면 외면당하기 쉽상이다. 외면당하지 않는 사용자가 선호하고 좋아하는 사이트를 제작하는 것은 웹 사이트 서비스의 기본 정신일 테니 좀 더 좋은 유저 인터페이스를 위해 고민해보자.

 

 

 

좋은 UI 디자인을 위한 요소

 

네비게이션

 

좋은 네비게이션 요소는 정보의 카테고리별로 메뉴를 구분하여, 정보의 체계를 나눈다. 그리고 일관성있는 네비게이션은 사용자들의 예측을 유도하여 원하는 정보의 접근을 도와준다. 성공적인 네비게이션을 위한 10가지 조건은 다음과 같다.

 

- 쉽게 익힐 수 있어야 한다.

- 일관성이 있어야 한다.

- 피드백을 제공해야 한다.

- 문맥으로 표시되어야 한다.

- 대안을 제시해야 한다.

- 행동과 시간을 절약할 수 있어야 한다.

- 명확한 시각적 메시지를 제공해야 한다.

- 명확하고 이해할 수 있는 레이블을 제공해야 한다.

- 사이트의 목적에 적합해야 한다.

- 사용자의 목적과 행동을 지원해야 한다.

 

 

메타포(Metaphor)

 

적절한 정신모형의 형성을 도울 수 있는 해결책 중 하나는 시각적이고 역동적인 사용자 인터페이스 은유(user interface metaphor)의 이용이다. 은유(metaphor)는 사용자 인터페이스에서 사용자가 시스템이 어떻게 작용하는지에 대한 적절한 정신모형을 재빨리 채택하도록 하여 사용자가 해야하는 시스템-특정적인 학습의 양을 최소화 시키는데 유추적 모형이다.

 

 

가독성

 

타이포그래피의 기능적 측면의 하나로, 문자가 잘 읽혀지는 정도 혹은 문장의 내용이 쉽게 전달되는 정도를 말한다.

 

여기에는 두 가지 요소가 작용한다. 즉 리더빌리티(readability)는 전달하는 내용을 쉽게 이해할 수 있느냐 하는 문제로 적절한 단어의 선택, 자간, 행간의 조절 들에 의해 좌우되고, 레저빌리티(legibility)는 개별적인 글자 형태를 쉽게 판독 할 수 있느냐의 문제로, 글자의 디자인, 크기, 조합 등에 의해 좌우된다.

 

이러한 요소는 광고, 편집 디자인 등 타이포그래피를 이용하는 시각 디자인 분야에서 독자의 시선을 원하는 정보에 머물도록 유도하는 데 활용된다.

 

 

일관성

 

일관성이란 사이트 내에서 약속된 요소들의 규칙이라고 할 수 있다.

 

즉 그래픽이나 텍슽, 레이아웃 등의 규칙에 따라 페이지가 이루어진다면 사용자는 쉽게 사이트에 익술해질 것이고 보다 빠르고 쉽게 사이트를 학습할 수 있게 된다. 예를 들어 메뉴 버튼이 같은 모양과 같은 위치에 있다면 사용자는 쉽게 네비게이션 할 수 있다. 이처럼 일관성이 없는 웹사이트는 사용자가 혼란에 빠지기 쉬워 길을 잃게 된다.

 

일관성을 지켜야 할 몇 가지 요소들은 다음과 같다.

 

버튼 및 이미지 등의 그래픽적인 요소

  - 버튼의 형태 및 위치

  - 사진 및 관련 이미지 등의 화질 및 크기

 

텍스트

  - 글꼴 형태

  - 글꼴의 크기 및 칼라

  - 한 페이지 내에 보여지는 문단의 길이

 

칼라

  - 레이아웃에 따른 그래픽적인 요소와 텍스트 등의 요소들의 칼라 조화

  - 칼라의 종류의 수(칼라의 수가 많으면 일관성 유지가 어려움)

 

 

출처) http://www.suwoncity.net/www2/bbs/board.php?bo_table=study_01&wr_id=20&page=1