Skip to content

Latest commit

 

History

History
119 lines (68 loc) · 6.4 KB

UI UX 구현 방법론과 게슈탈트 이론.md

File metadata and controls

119 lines (68 loc) · 6.4 KB

UI/UX 구현 방법론

1. 사용자 분석

1.1 서비스의 이용자는 누구인가?

  • 서비스를 사용하게 될 이용자들의 나이와 성별 등을 조사한다.
  • 대상에 맞춰 UI의 크기나 색, 접근성을 고려한다

1.2 사용 환경은 어떻게 설정할 것인가

  • 모바일인가? 웹인가?
  • 웹이라면 어떤 브라우저인가?
  • 사용 환경에 맞게 최적화를 진행한다. → 모바일의 경우 솔루션이나 API 연동을 위한 OS 버전을 체크할 필요가 있다. 특히 보안 관련 솔루션이나 API의 경우 IOS에서 높은 버전을 요구한다. 알람 PUSH 솔루션 또한 OS별로 높은 버전을 요구할 수 있음에 주의
  • 사용자층 조사 결과를 이용해 타겟 디바이스를 설정한다.

1.3 현행 시스템 문제점 진단

현행 시스템이 있다면 문제점을 진단해본다

  • 기술 환경 관점 : 모바일 OS별로 잘 지원 되는가? 필수 설치되어야 하는 솔루션이 많은가? 등등..
  • 심미적 관점 : UI UX가 노후화 되지 않는가? 테블릿이나 다양한 모바일 환경에서도 잘 보이는가? 디자인 가이드는 잘 따랐는가?
  • 편의적 관점 : 정보 획득은 직관적인가? 사용이 쉬운가? 인증 수단은 어렵지 않은가? 업무 프로세스는 분산되어 있지 않은가?

3. 형태심리학 - 게슈탈트 이론

게슈탈트 이론이란 독일 베를린 대학을 중심으로 베르트하이머, 쾰러, 코프카, 레빈 등에 의해 전개된 형태심리학 이론.

게슈탈트란 “전체로서의 형태”라는 뜻을 가진 독일어이다. 게슈탈트 이론에 따르면, 사람은 전체 이미지를 각 부분들 사이의 상호관계와 맥락 속에서 지각한다. 부분이나 어떤 요소의 의미는 고정되어 있지 않고, 이들이 속한 “전체”에 따라 달라 진다는 것이다.

이러한 맥락에서 로라 버쉬는 “전체는 개별 요소의 집합이 아니다”라고 말했다. 조직적으로 만들어진 구조 전체는 개별 부분을 합쳐 놓은 여러 부품이 아니라, 더 커다란 무언가로 인식된다는 것이다.

이는 인간의 시지각을 설명하기 위해 만들어졌지만, 몇 가지 법칙들은 청각과 후각 등에도 적용될 수 있다.

3.1 게슈탈트 이론 기반 요소

1. Emergence - 구조를 연결시켜 바라보는 경향

인간의 뇌는 세부적인 것보다 커다란 윤곽으로 물체를 인식한다. 개별 요소 하나 하나에 집중하기 보다는 외곽선이나 윤각으로 보는 경향이 있다.

image

2. Reification - 관념을 기반으로 없는 부분을 채우는 경향

우리는 아래 사진에서 없는 삼각형을 그려볼 수 있다.

image

3. Multi-Stablity 대상을 여러 기준으로 해석하는 경향

애매모호한 물건을 여러 대안 중에서 고민한다. 하지만, 결국 한가지 대인이 지배적이게 된다고 한다. 아마 이 정육면체의 어디가 앞인지, 혹은 오른쪽으로 도는지 왼쪽으로 도는지 모르겠는 발레리나 짤을 아는가? 아마 그런 것을 두고 하는 이야기 같다 image

4. Invariance - 변형된 내용과 원형을 동일하게 인식하는 경향

우리는 사물이 회전하거나, 변형되어도 동일한 물체라고 인식할 수 있다. image

3.2 UI와 게슈탈트 이론

1. Proximity - 근접성의 원칙

근접한 객체들은 동일한 객체로 인식된다.

서로 연관된 정보들은 가까이 있고, 반대로 관련 없는 항목은 멀리 떨어져 있게 구성 image

2. Common Region - 공통영역의 원칙

공통영역 내에 배치된 요소들은 그룹으로 인식된다.

동일한 영역에 배치된 요소들은 서로 연관을 가진 그룹으로 인식 image

3. Simiarity - 유사성의 원칙

유사하게 생긴 요소들은 같은 요소로 보인다.

컬러, 스케일, 쉐입, 패턴, 사이즈 등이 유사하면 같은 속성으로 인지된다. image

4. Symmetry - 대칭의 원칙

대칭적 요소들은 서로 통일성을 가진다.

대칭적인 요소들은 사이트내에서 불안함을 없애주고, 안정성을 부여 image

5. Continuation - 연속성의 원칙

연속되는 요소는 하나의 흐름으로 인식된다.

통일성 있는 배열 구성은 사용자의 시선을 부드럽게 흘러가도록 함. image

6. Common fate - 동시 이동의 원칙

동시에 이동하는 요소들은 동일 속성으로 인식된다.

함꼐 움직이거나 동일하게 변형되는 요소는 서로 연관된 것으로 인식 image

7. Clousure - 관념속 원형 법칙

끊어지거나, 불완전한 원형을 발견하면 관념 속의 원형을 본다. image

4. 아이트래킹 논문 기반 웹 사이트 구현 지침

  1. 사용자는 위에서 아래로, 좌에서 우로, F자 형태로 웹 페이지를 탐색한다.
  2. 그래픽 보다 가독성이 높은 Primary 텍스트가 더 주목을 끈다.
  3. 페이지 상위세 흥미로운 요소가 있을 때에만 하위 컨텐츠를 이어서 본다.
  4. 이미지가 크면 클 수록 주목을 받는다. 이 때 시선 F 흐름을 꺨 수 있다.
  5. 여백은 내용에 집중에 좋다. 내용을 효과적으로 전달하는 데에 도움을 준다.