UI 디자인의 기본 이론

UI 디자인의 기본 이론

목록 UI/UX/디자인 by 필승 0 down 2008.05.08 17:46 3,072 Hit 0 review 스크랩 신고

■ UI 디자인의 기본 이론

UI 디자인을 위한 일반
- UI 디자인을 위한 일반
- 커뮤니케이션 이론
- 시각 디자인적 이론 (조직성, 경제성, 의사 소통성)
- 커뮤니케이션 요인으로서의 색채 활용
- 인간 공학적 요인 (반응시간, 시계, 표시, 착시)
- 심리학적인 요인 (게슈탈트이론, 유사성, 근접성, 연속성, 폐쇄성)
UI 디자인을 위한 원칙 및 기법
원칙
1.메타포
메 타포를 사용함으로써 주변 세상에 대한 사람들의 지식을 이용해, 제품의 특징과 개념을 전달할 수 있도록 만들 수 있다. 예를들어 사람들은 사무실에서 종이서류를 보관하기 위해 파일 폴더를 사용하며 따라서 파일 폴더처럼 보이는 컴퓨터용 폴더에 컴퓨터 문서들을 저장하는 것이 사용자들에게는 자연스럽게 느껴진다. 이와 같이 실생활의 대상물들을 컴퓨터 화면으로 옮긴 아이콘들은 실세계의 메타포로서 인터페이스에 효과적으로 작용하며 문화적, 언어적, 장벽들을 말보다 더 잘 극복할 수 있게 해준다.

2.직접조작(Direct Manipulation)
직 접조작은 사용자로 하여금 컴퓨터에 의해 묘사된 객체를 직접 제어하고 있다는 느낌을 가지도록 한다. 사용자는 자신의 행동으로부터 물리적인 결과를 기대할 뿐만 아니라 반응이 나타나기를 바란다. 화면 전환시 로드될 때 적절한 애니메이션은 요구된 행동이 실행되고 있음을 알려주는 방법중의 하나이다.

3.보고 선택하기(See-and Point)
사용자들은 스크린에 제공된 대안들을 선택함으로써 행동하게 되며 시스템과 상호작용하게 되는데 이와 같은 상호작용에서 사용자는 자신이 무엇을 하고 있는지를 스크린 상에서 볼 수 있으며 사용자는 자신이 보고있는 것을 지정할 수 있다.

4.반응과 대화(Feedback and Dialog)
사용자에게 시스템이 무슨 일이 일어나고 있는지를 계속 알려 주어야 한다.
작업을 수행할 때 반응을 가능한 한 즉각적으로 제공하여 시각적 혹은 청각적 신호를 제공한다.

5.관대함(Forgiveness)
관대함을 기본으로 제작해 사용자들이 편안하게 제품을 살펴 볼 수 있도록 해야한다.
시스템에 손상을 주지 않으면서 모든 일을 사용자가 갖도록 하는 것이 필요하다.

6.미적 완전함(Aesthetic integrity)
미 적 완전함이란 정보가 잘 조직되어 시각 디자인의 원칙에 일치한다는 것을 뜻한다. 이 말은 모든 것이 스크린 상에서 훌륭하게 보이고 디스플레이 기술 수준이 높다는 의미이다. 너무 많은 버튼이 디스플레이 되거나 너무 복잡한 아이콘은 사용자에게 부담감을 줄 수 있으므로 인터페이스의 유용성을 보강하기 위한 그래픽 요소들을 사용해야 한다. 또한 개념을 나타내는데 있어 임의적 그래픽 이미지의 사용을 피하도록 한다. 일반적으로 사용자가 기대하는 행동에 그래픽 요소를 맞추도록 하며 버튼은 옆으로 살짝 사라지는 것이 아니라 눌려지는 것처럼 보여야 한다.

7.사용자에 대한 이해
대 상으로 삼고 있는 사용자를 확인 하고 이해하는 것은 중요한 단계이며 대상 사용자로 하여금 프로토타입과 개발 제품들을 테스트 하도록 한다. 사용자의 반응에 귀기울여 그들의 요구를 반영하며 컴퓨터와 컴퓨터의 능력이 아닌 사용자와 사용자의 능력을 염두에 두고 개발해야 한다.

8.접근 가능성(Accessibility)
불 특정 다수를 사용자로 선정하지 않더라도 모든 사람들이 컴퓨터에 접근할 수 있도록 개발자가 상상한 평균 사용자와는 다른 대상층을 염두에 두어야 하며 제품개발 과정의 시작부터 대상 사용자의 문화적, 언어적 요구와 기대사항을 유의해야 한다.

9.조직성
조직성이란 사용자에게 일관성 있는 개념적 구조를 제공하도록 하는 것이다.
즉, 조직성이란, 무질서와 혼란에 반대되는 개념으로 조직성을 이루기 위해서는 일관성, 스크린 레이아웃, 항해성(Navigability)등의 하부 원칙들로 강화될 수 있다.
-일관성(Consistency)
내부적인 일관성 : 시스템 내에서 일관성 있는 시각요소 들의 구성을 통해 이루어질 수 있다.
실 세계와의 일관성 : 실세계에 근거한 은유적(Metaphors from the real world) 요소들을 사용함으로서 이루어진다. 즉, 실세계와의 일관성을 유지하므로서 사용자가 예측할 수 있도록 의미를 전달하고 경험에서 오는 지식으로 시스템 사용을 용이하게 한다.
-안정성(Perceived Stability) : 일관성 있는 개념적 구조를 제공
-Navigability : 제일 처음 제공해야할 정보에 사용자의 시선이 머물도록 시각 언어들을 사용하므로서 달성될 수 있다.

10.경제성
경제성이란 최소한의 실마리로 효율을 극대화하는 것이다. 경제성의 개념은 '간결성','명료성'의 하부원칙과 함께 중요한 정보를 다른 정보와 차별화 시키고 강조함으로써 달성될 수 있다.
-간결성(Simplicity)
디자이너가 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인하는 것을 의미하며 사용자에게 한 번에 너무 많은 기능을 제공하는 것은 바람직하지 못하다.
-명료성(Clarity)
디자인된 모든 요소들의 의미가 애매하지 않음을 말한다.

11.의사소통성
의 사소통성이란 보여줄 정보의 모습을 시각요소들을 사용하여 알기 쉽게 조절하고 의사소통의 효율을 높이는 것이다. 의사소통성은 가독성, 타이포그래피, 컬러, 텍스춰, 심벌 등 요소의 사용으로 강화될 수 있으며 인간과 컴퓨터간의 필요한 규칙을 단순화할 필요성이 있다.

12.장애인을 위한 디자인 원칙
줌(Zoom)의 기능이나 경보음의 기능을 줌으로써 시각 장애자나 청각 장애자를 위한 고려도 요구되어 진다.
기법
- 보여줄 정보의 양을 결정하는 기법 : 생략의 기법, 친숙한 정보 표현양식을 사용하는 기법, 도표양식을 사용
- 정보의 그룹핑성 : 색채를 사용하는 기법, 외곽선을 사용하는 기법
- 정보의 위치와 순서를 결정하는 기법 : 사용순서에 의한 기법, 관습적인 순서를 존중하는 기법, 중요성과 사용빈도에 따른 기법, 일반성, 특수성, 철자순, 시간순
- 문자정보를 보여주는 기법 : 서체선택의 기법, 대소문자의 사용기법, 정렬과 단어간격 조절의 기법, 글줄 사이를 조절하는 기법
- 색채 사용의 기법 : 경제성 원칙에 근거한 기법, 의사소통성의 원칙에 근거한 기법, 일관성에 원칙한 기법, 인간공학 요인에 근거한 기법
- 그래픽 사용의 기법 : 실생활의 이미지를 보여주는 경우, 색채나 패턴의 표현, 공간의 절약, 전형적인 직접조작의 경우, 수치정보의 표현, 포인터
- 정보의 돋보임 : 반전의 기법, 색채 사용의 기법, 밝거나 굵기의 차이를 이용한 기법, 밑줄을 사용하는 기법, 깜박임을 사용하는 기법
- 구성요소간의 연관성을 표현하는 기법 : 들여 쓰기, 데이터의 연관에 이름을 붙이는 기법

[출처] [본문스크랩] UI 디자인의 기본 이론|작성자 센티

다운로드
  좋아요   페이스북에 공유하기 트위터에 공유하기
의견 0 신규등록      목록

NEWSLETTER SIGN UP

Would you like to be one of the first to receive exclusive information about the latest collections, offers and events from this online shop? Then just subscribe to our free newsletter now.