웹기획,홈페이지

UI(User Interface) 디자인이란

SNS마스터 0 121

 

사전적인 의미로 먼저 살펴보면…

사용자 인터페이스는 사람과 시스템간의 접점, 또는 사용자와 각각의 시스템사이의 정보채널이라고도 표현하며 그 개념은 보다 사용하기 편한 시스템을 만들기 위해 사용자의 인지적 측면에서 디자인하고 사용 편리성을 평가하는 것이라고 할 수 있다.

사용자 인터페이스 디자인이란 사용자와 컴퓨터사이의 상호 정보 교환의 문제점을 지각적, 인지적 특질로부터 밝혀 내고 이를 체계화 시켜서 사용자가 쉽게 대할 수 있는 인터페이스를 만들어 가는 디자인 접근법이라 정의 할 수 있다.

일반적으로 인터페이스란 서로의 관계에 있어서의 공유영역 혹은 커뮤니케이션 통로로써 우주와 우주인과의 관계에서의 우주복, 인간과 문의 관계에서의 손잡이, 또한 운전자와 자동차사이의 인터페이스는 차의 계기판과 변속기 등으로 흔히 정의할 수 있는 것이다.

우리는 생활 속에서의 원활한 의사 소통을 위해 수많은 관계와의 좋은 인터페이스를 여러 각도로 요구하며 살고 있다. 특히 컴퓨터가 직접 또는 간접적으로 우리 생활을 점령하고 있는 상황에서 컴퓨터와 인간의 인터페이스가 무엇보다도 중요한 문제로 대두되었고 관계에 대한 개선은 필수적인 과제가 되어 여러 산업 분야에서도 지속적인 연구가 계속되고 있는 것이다. 이를 위한 한 연구 영역으로 인간-컴퓨터 상호작용(Human-Computer Interaction) 분야가 탄생하게 되었다.

인간-컴퓨터 시스템에서 인간과 컴퓨터는 독립된 객체를 형성하나 이 두가지를 하나의 통합된 시스템으로 구축하기 위해서는 적절한 인터페이스가 필요하게 되었고 이를 바탕으로 사용자 인터페이스(User Interface)란 용어가 파생되었다.

인간-컴퓨터 상호작용(Interaction)이 디자인 분야로 그 영역을 확대한 것은 모글리지(Bill Morgridge)가 “인터랙션 디자인”이라는 용어를 사용하여 ‘컴퓨터 소프트웨어의 사용성에 대한 연구’라는 새로운 디자인 영역을 낳으면서부터이며 이는 시간과 조작의 흐름을 고려한 사용의 용이성을 연구하는 것으로 알기 쉽고, 보기 쉽고, 생각하기 쉬운 소프트웨어 개발을 목적으로 하고 있다.
 

  

  

UI를 고려한 디자인이 왜 필요한가? 

  

1.개발자 중심에서 사용자 중심으로의 변화 

2.고성능 PC의 보급 

3.개발 생산성 향상 

4.비용절감에 대한 압력 증가 

5.User Interface Design적인 해결의 필요성 

  

개발자 중심에서 사용자 중심으로의 변화 

Client/Server 시스템의 등장에 따른 개발 환경의 변화와 메시지의 전달 방법이 Text에서 Graphic의 상징적인 방법으로 전환하였다. 예전에는 개발자가 시스템 개발에 모든 영역을 차지하였지만 이제 개발자는 수 많은 신기술의 출현으로 이제 더 이상 UI에 신경 쓸 틈이 없어졌고 이를 회피하고 있다. 또한 개발자적 접근이 아니라 이를 사용하고 평가하게 될 사용자의 입장에 대한 논리적 적용이 필요하게 되었고 Web의 확장에 따라 시스템이 오픈 되면서 고객 수준이 많이 향상되어 차별화 방안이 필수적인 사항으로 대두 되었다. 그에 따라 사용자가 쉽게 배우고 빨리 인식 할 수 있도록 개발하는 전문 영역이 필요하게 되었다.  

  

고성능 PC의 보급 및 인터넷 확산 

PC의 가격대비 성능의 향상으로 컴퓨터의 보급율이 증가하였고 개발 툴(4GL)의 Graphic Interface 기능 지원이 확대되었다. 또한 인터넷 사용의 확산이 기업의 그룹웨어를 인트라넷, 익스트라넷으로의 고객 요구사항이 점차 늘어나고 있는 실정이며 이에 대해 고객은 소프트웨어 품질 향상을 요구하고 있다. 시스템의 거의 전부가 이제는 더 이상 폐쇄적인 애플리케이션이 아니라 웹의 특성에 따라 오픈 되고 정보를 공유하게 되면서 고객의 요구사항은 더욱 복잡 다양해 지고 있으며 이에 따라 제품이나 사이트의 경쟁이 심화되어 차별화 정책이 필요하게 되었다. 

 
개발 생산성 향상

개발 방법론이 수행되고 있지만 생산성 향상에 있어 만족스럽지 못한 결과를 표명하고 있다. 또한 개발 방법론이 분업화 및 전문화 되어 화면 표준화 작업의 필요성을 인식하게 되었고 End-user인 현업과 개발팀간의 업무 협의에서의 논리적인 사용자 인터페이스 디자인 분야가 사용자 요구사항과 개발 효율성을 극대화 시킬 수 있다는 점이 부각되었다. 또한 개발 일정 단축과 System Interface의 일관성을 유지 시키고 타 System과의 제품차별화 및 고부가가치 창출의 필요가 절실한 실정이다. 

  

비용 절감에 대한 압력 증가 

시스템 개발에 있어서 전체 개발 비용 중에 유지보수에 관계된 비용은 80%가 UI와 관련이 있다는 통계가 있다. 또한 제이콥 닐슨은 만약 더 나은 네비게이션 시스템이 만들어지지 않고 더 엄격한 내부 디자인 표준이 강요되지 않는다면 전세계적으로 나쁜 인트라넷 사용성으로 인한 비용이 2001년까지 약 1000억불로 늘어날 것이라고 예견한다. 오늘날과 같이 웹이 상업적인 목적을 가지게 되면서는 기업의 이익을 극대화해야 한다. Zona Research 는 이 커머스 회사들이 웹 페이지 때문에 좌절한 고객들로부터 한달에 5천 8백만불 이상을 잃고 있다고 산정했다. 시스템 개발의 처음부터 UI프로세스가 적용되어야 하며 개발 기간을 단축하고 사용자의 요구사항과 사용성을 높이는 시스템이 더 큰 기업의 이익을 창출한다는 생각이 확산되고 있다. 

  

User Interface Design 적인 해결의 필요성 

시스템과 사람의 관계에 있어서 HCI의 중요성이 더욱 부각 되었고 시각적 커뮤니케이션의 주요 요소를 이용하여 이를 표현하고 사용자를 직접 참여 시켜 여러 번의 사용성 테스트를 거쳐 사용성 향상의 문제 해결과 그에 따른 인간 공학 및 심리학에 바탕을 둔 감성공학적 연구와 시스템과의 상호관계를 해결하는 유저 인터페이스 디자인적인 접근이 필요하게 되었다. 

  

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 디자인을 원한다면? 

 
성공적인 UI 디자인
= Web상에서의 사용성은 User가 얻고자 하는 것에 의해 좌우됩니다
 
-User가 원하는 것이 무엇인지 정확하게 정의합니다.
-System의 목적이 무엇인지 정의합니다.
-어떤 목적이든 중요한 중심 테마는 정보입니다.
-Intranet인 경우 정보자체가 테마가 됩니다.
-성공적인 System은 User가 쉽고 편리하게 원하는 정보를 얻도록 설계되어야 합니다.
-실제로 User가 경험하는 것을 테스트하고, 여러번 반복되는 테스트 후 적용합니다.
 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기
  • 네이버밴드로 보내기
  • 네이버로 보내기
  • 텀블러로 보내기
  • 핀터레스트로 보내기

Comments

HTML 편집기 아크로 에디트(AcroEdit)란 프로그램 설치 및 사용

댓글 0 | 조회 50
오늘은 HTML 편집기로 유용하게 PC에서 사용할수 있는 아크로 에디트(AcroEdit)란 프로그램에 대해서 알아볼까 합니다. 보통 블로그를 운영하시면 보통 HTML 이나 포토샵 … 더보기

[영상] 왕초보도 하루만에 가능한 워드프레스 홈페이지 만들기

댓글 0 | 조회 99
왕초보도 하루만에 가능한 워드프레스 홈페이지 만들기
Hot

인기 소셜 미디어 뉴스룸(Social Media News Room) 사례

댓글 0 | 조회 134
” 국내 대부분의 기업들은 웹사이트에 뉴스룸을 가지고 있습니다. 다만 아직은 매체 보도자료를 모아두는 정도 혹은 공지사항을 올리는 정도로 활용하고 있습니다. 이 뉴스룸을 소셜 미디… 더보기
Hot

인기 소셜 웹 시대의 기업의 웹사이트

댓글 0 | 조회 100
스마트폰과 SNS가 화두인 요즘은, 기업의 홍보 담당자나 마케터 대상의 소셜미디어 컨퍼런스의 열기가 뜨겁다. 트위터나 미투데이 등의 SNS를 기업의 PR/마케팅 채널로 고려하고 있… 더보기

소셜미디어 시대에 홈페이지가 변해야 할 방향 4가지

댓글 0 | 조회 85
소셜미디어 시대에 홈페이지가 변해야 할 방향 4가지 ” 지난번 <소셜시대, 홈페이지는 브로셔다> 라는 글을 올린 이후, 많은 이야기를 들었습니다. 그중 가장 많았던 이야… 더보기

온라인 인맥관리 홈페이지를 만들어라

댓글 0 | 조회 95
온라인 인맥관리인터넷과 전자통신을 이용한 생활이 보편화 된 지금 블로그, 커뮤니티, 이메일 등 온라인을 통한 인맥관리 또한 유행을 넘어 일상생활이 되었습니다. 하나의 패러다임으로 … 더보기
Hot

인기 UI 디자인 프로세스

댓글 0 | 조회 239
UI 디자인 프로세스 (팀인터페이스 UI디자인 방법론 TeamProcess®) 기존 시스템 분석 (01)사용자 테스트(Usability Test), 기존 마케팅 자료 분석 User… 더보기
Now

현재 UI(User Interface) 디자인이란

댓글 0 | 조회 122
사전적인 의미로 먼저 살펴보면… 사용자 인터페이스는 사람과 시스템간의 접점, 또는 사용자와 각각의 시스템사이의 정보채널이라고도 표현하며 그 개념은 보다 사용하기 편한 시스템을 만들… 더보기