티스토리 뷰

 

사용성 구성요소 설계하기

• 사용자 환경에 적합하도록 시각적으로 구조화할 수 있다.
• 시각적 특성에 맞게 콘텐츠를 구성할 수 있다.
• 사용자 경험에 따른 데이터를 활용하여 시각적 변화를 예측할 수 있다.

 

1. 사용성(Usability)

사용성이란 사용자가 제품·시스템에 대한 사용 방법을 얼마나 빠르고 쉽게 배울 수 있는 지, 얼마나 편리하고 효율적으로 사용할 수 있는지 등과 같은 사용의 용이성을 의미한다. 사용성은 사용자 인터페이스를 설계할 때 가장 우선적으로 고려해야 할 뿐만 아니라 인터 페이스 디자인을 평가하는 핵심 요소가 된다. 따라서 사용성은 배우고 사용하고 기억하기 가 쉬워야 한다. 실수를 일으키지 않고, 원하는 목적을 효율적으로 달성하여 개인적 만족 감, 성취감이 높아야 하며 사용자의 경험과 직결해야 한다.

 

2. 유용성(Utility)

유용성이란 디자인의 기능을 말하며 사용자가 원하는 기능이나 필요한 요소를 제공하고 있는지에 관한 것이다. 사용성과 유용성을 둘 다 중요하며 디자인의 중요한 요소로 함께 평가하는 기준이다. 유용성에 의해 사용자가 원하는 기능을 구현할 수 있지만 사용자 인 터페이스에 의해 제품의 사용이나 시스템의 사용이 다르게 나타난다.

 

3.사용자 인터페이스(User Interface, UI)

인터페이스(interface)는 일반적으로 두 종류의 서로 다른 세계가 서로 만나서 의사소통을 하는 장소를 의미한다. 컴퓨터 분야에서의 인터페이스는 하나의 대상과 또 다른 대상과의 접점(接點)을 의미한다. UI(User Interface)는 인터넷 사이트, 휴대폰, 내비게이션 등의 화면에서 구현되는 사용자 환경을 뜻한다. 화면 구성 시 사용자가 쉽게 접근하여 접촉이 원활하게 조작할 수 있도록 디자인을 설계한다. 즉, 사용자의 편리성과 효율성을 고려한 디자인을 말한다.

 

3.1사용자 인터페이스의 종류

용자 인터페이스의 종류는 정보의 형태나 정보 전달 매체의 특성에 따라 그래픽 사용자 인터페이스 GUI (Graphic User Interface)와 터치 사용자 인터페이스(Touch User Interface), 음성 사용자 인터페이스(Voice User Interface), 제스처 사용자 인터페이스 (Gesture User Interface), 명령 줄 인터페이스(Command Line Interface) 등으로 구분된다. 대부분의 인터페이스들은 인간의 오감을 이용하여 사용하게 되는데, 특히 인간은 정보를 인식하거나 사고하고 행동하는데 있어서 시각에 대한 의존이 높을 뿐만 아니라 주변의 데 이터나 언어 등의 정보를 시각적 형태로 변환하여 생각하는 특징을 가지기 때문에 시각적 인터페이스의 중요성이 무엇보다 크다. GUI(Graphic User Interface)는 인간과 컴퓨터의 상 호작용에 있어 보다 쉽고 유용한 커뮤니케이션을 이루게 하기 위하여 인간의 입장에서 만 들어진 대화방법의 하나이다. 따라서 시각적 인터페이스의 심미적 요소에 대한 이해를 바 탕으로 디지털 제품·디지털 서비스의 콘셉트와 정보를 효과적으로 시각화하여 정보의 직 관성 및 심미성을 높이는 것은 매우 중요한 작업이라고 할 수 있다.

 

3.2 UI(User Interface, 사용자 인터페이스)의 구성 요건

사용성이 높은 사용자 인터페이스를 구성하기 위해서는 다음의 요건을 충족해야 한다.

3.2.1학습의 용이성

제품·시스템의 기능과 조작 방법에 대한 별도의 학습이 필요 없을 만큼 사용 방법이 직관적이며, 배우기 쉬워야 한다.

3.2.2 사용의 효율성

최소한의 노력과 시간으로 제품·시스템을 이용하여 원하는 결과를 얻을 수 있어야 하며, 원하는 결과를 얻기 위한 과정은 빠르고 단순해야 한다.

3.2.3 오류의 최소화

사용자가 저지를 가능성이 높은 오류의 조건을 미연에 차단하여 오류 발생 가능성을 최소화하고, 사용자가 오류를 저질렀을 때에는 오류가 발생했음을 바로 인지할 수 있 도록 하며, 이미 저지른 오류는 즉각 정정할 수 있는 기회를 제공해야 한다.

3.2.4 기억의 용이성

사용자가 조작 방법을 매번 배우지 않아도 될 만큼 제품·시스템의 사용 절차와 과정 이 친숙하고 논리적이며, 기억하기 쉬워야 한다.

3.2.4 사용자 만족

제품·시스템을 통해 전달되는 정보와 기능이 사용자의 기대에 부합되어야 할 뿐만 아니라 만족스러워야 한다. 사용자 만족은 사용자가 추구하는 가치나 요구에 좌우되기 때문에 다른 요건에 비하여 주관적 성격이 강하다.

3.2.5 UI 레이아웃

면에 로고, 텍스트, 사진이나 그림 등을 배치할 때 사용자가 일관성을 가지고 편리 하게 조작할 수 있도록 디자인 한다.

 

Jakob Nielsen의 UI 가이드라인 원칙
단어 설명
메타포 사용된 아이콘이 사용자들이 문화적, 언어적 장벽을 말보다 얼마나 더 잘 극복 하게 해주는가.
직접조작 사용자들이 컴퓨터에 의해 표현된 정보나 객체들을 직접조작하고 있다는 느낌을 가지도록 해야 한다는 것을 의미한다. 사용자에게 직접조작의 인터페이 스를 제공하면서 조작에 대한 피드백을 곧바로 해주야 한다.
보고 선택하기 사용자들은 스크린에 제공된 대안들을 선택함으로써 행동하게 되며 웹 사이트와 의 상호작용에서 자신이 무엇을 하고 있는지 직접 볼 수 있다.
반응과 대화 사용자에게 시스템 내에서 무슨 일이 일어나고 있는지, 계속 알려주고 있는가. 작업을 수행할 때 반응을 가능한 즉각적으로 제공하며, 시각적 혹은 청각적 신 호를 제공하는가.
관대함 사용자들이 편안하게 제품을 살펴볼 수 있는가. 사용자들이 어떤 일을 하던 그 일은 시스템을 손상시키지 않는가.
미적 완전함 정보가 잘 조작되어 시각디자인의 원칙에 일치하는가. 너무 많은 버튼이나 복잡한 아이콘으로 하여금 사용자에게 부담을 주지는 않는 가.
사용자에 대한 이해 대상으로 삼고 있는 사용자에 대한 특성을 이해하고 있는가.
접근 가능성 불특정 다수를 사용자로 선정하지 않더라도 대상으로 삼고 있는 사용자 외에 다 른 대상 층을 염두에 두고 있는가.
조직성 일관성: 일관성 있는 시각요소들로 구성되어있는가.
안정성: 일관성 있는 개념적 구조를 제공하는가.
경제성 간결성: 커뮤니케이션을 위해 꼭 필요할 요소만 디자인 하고 있는가.
명료성: 디자인된 모든 요소들의 의미가 애매하지 않는가.
의사 소통성 보여준 정보의 모습을 보여준 시각요소들을 사용하여 알기 쉽게 조절하고 있다.

 

4.사용자 경험 (User Experience, UX)

UX란 ISO(International Organization for Standardization)에 의하면 ‘사용하거나 사용하려는 제품, 시스템, 서비스에 대한 인식하고 반응 하는 것’ 이라고 정의하고 있다. UX단는 사전적으로는 ‘사용자의 경험’을 뜻하는 것으로 인간이 느끼는 감정이나 만족감 생각을 의미하는 것으로 인지 심리학이나 인체심리학 같은 다양한 학문으로 연결 될 수 있다. 사용자 경험은 HCI 연구에서 사용된 개념이며, 아직도 많은 사용자 경험의 원리가 컴퓨터 공학 분야의 소프트웨어 및 하드웨어 개발에서 적용되고 있다. 이 개념은 현재에 와서는 컴퓨터 제품뿐만 아니라 산업을 통해 제공되는 서비스, 상품, 프로세스, 사회와 문화에 이르기까지 널리 응용되고 있다. 사용자 경험을 개발, 창출하기 위해서 학술적, 실무적으로 이를 만들어내고자 하는 일을 사용자 경험 디자인(UX Design)이라고 한다. UX는 영역에 따라 제품 디자인, 상호작용 디자인, 사용자 인터페이스 디자인, 정보 아키텍 처, 사용성 등의 분야에서 연구 개발되고 있다.

UI/UX 디자인의 이해

UI(User Interface), 유저 인터페이스의 시작은 제록스 연구와 더글라스 엔겔버트의 연구 에서 기존의 명령어 라인으로 이루어진 인터페이스를 그래픽 위주의 인터페이스로 바꾸면 편리하리라 생각한 것이다. 이것을 애플이 매킨토시에 사용해 기존의 수준과 차별화되는 그래픽을 사용자들에게 선보였다. 이후 그래픽뿐 아니라 인터페이스 부분에서 아이콘이나 타입페이스는 GUI(Graphic User Interface)/UI의 중요한 기준이 되었다. GUI는 PC의 대중화와 더불어 사용자들이 마이크로소프트의 윈도우 OS에 익숙해졌고, PC 라는 디바이스뿐 아니라 스크린으로 표현되고 컨트롤되는 모든 디바이스에 그래픽 중심의 UI 으로 디자인 하였다. 컬러의 사용, 아이콘, 직관적인 형태, 메타포의 사용 등 그래픽 중심의 UI는 컴퓨팅 환경에서 점점 더 중요역할을 담당했다. 이런 UI의 역할 확대는 기존의 그래픽이라는 시각적 요소 이외에도 다양하게 확대. 발전 되어 버튼을 눌렀을 때의 피드백을 표현하기 위해 소 리를 내기도 하고, 원이 돌아가기도 하고, 라이팅이 깜박이기도 하는 등 기존 UI의 다양한 발전이 이루어졌다. 이와 더불어 기존의 인터랙션들이 디바이스에서 각각 분할되어 존재하던 것(스크린, 하드 버튼, LED 시그널 등등)에서 사용자 중심의 시각으로 통합되고 UX의 요소로 강조되었다. IT 제품의 경우 기존에 중요한 경쟁력의 요소였던 하드웨어의 디자인이나 스펙 등이 어느 정도 평준화/평균화됨에 따라 소프트웨어에 대한 경쟁력 강화로 사용자 경험의 중요성이 강화 되었다. 컬러의 사용, 아이콘, 직관적인 형태, 메타포의 사용 등 그래픽 중심의 UI는 컴퓨팅 환경 에서 점점 더 중요역할을 담당했다. 이런 UI의 역할 확대는 기존의 그래픽이라는 시각적 요소 이외에도 다양하게 확대. 발전 되어 버튼을 눌렀을 때의 피드백을 표현하기 위해 소 리를 내기도 하고, 원이 돌아가기도 하고, 라이팅이 깜박이기도 하는 등 기존 UI의 다양한 발전이 이루어졌다. 이와 더불어 기존의 인터랙션들이 디바이스에서 각각 분할되어 존재하던 것(스크린, 하드 버튼, LED 시그널 등등)에서 사용자 중심의 시각으로 통합되고 UX의 요소로 강조되었다. IT 제품의 경우 기존에 중요한 경쟁력의 요소였던 하드웨어의 디자인이나 스펙 등이 어느 정도 평준화/평균화됨에 따라 소프트웨어에 대한 경쟁력 강화로 사용자 경험의 중요성이 강화 되었다.

 

5. 콘텐츠 시각화

그림이나 도형, 사진 등과 같이 다양한 시각적 이미지를 이용하여 정보를 사용자에게 명 확하고 효과적으로 전달하는 것이다. 따라서 콘텐츠를 시각화 할 때에는 다양한 아이디어 미적 형태와 기능을 고려하여 직관적이고 효율적으로 표현한다.

5.1 콘텐츠 시각화를 위한 관련 분야
  • 인포그래픽(Infographic)
  • 정보 시각화(Information Visualization)
  • 과학적 가시화(Scientific Visualization)
  • 통계적 그래프(Statistical Graphics)
2. 콘텐츠 시각화
  • 콘텐츠의 기획 : 소재의 요구분석, 아이디어 회의, 마스터 플랜 등을 매체를 통하여 전달하는 것을 기 획한다
  • 데이터 수집:실제 콘텐츠 내에서 구성하는 다양한 데이터를 수집하여 종류별로 정리, 분석한다.
  • 연결고리의 구성: 나열되어 있는 다양한 정보들을 계층적으로 또는 평면적으로 구성하고 이를 기준으로 연결할 연결고리를 만든다.
  • 문제점 파악: 기술적 요소와 그래픽 적 요소의 문제점을 파악하고 이를 해결하기 위한 방안을 모색 한다.
  • 포맷의 선택: 콘텐츠에 따라 그래픽 소스 및 포맷으로 그래픽 요소를 이용하여 시각화 한다.
  • 시각적 접근 방법의 선택 :콘텐츠 구성요소를 시각화하는 방법은 크게 데이터를 차트나 그래프의 형태로 제작하 는 방법과 일러스트와 메타포를 이용하여 표현하는 방법으로 나뉜다.
  • 정제(Filtering)와 테스트(Test) : 작업 과정의 중복과 과잉 표현, 무거운 실행 파일 등 원래의 목적에 부합하지 않는 결 과물의 도출을 피하기 위해 정제 과정을 통해 정리하고, 이를 테스트하여 결과에 근접 하는 모형을 만든다. 이 과정을 지속적으로 반복하고 검증하여 완성도를 높인다.

'반응형 UIUX > 디자인 구성요소 제작' 카테고리의 다른 글

UI 구성 요소 제작  (0) 2020.06.17
심미적 요소 표현  (0) 2020.06.10
와이어 프레임 작성  (0) 2020.06.10
디자인 가이드 구성  (0) 2020.04.20
스토리보드 설계하기  (0) 2020.04.13
댓글
© 2018 webstoryboy