[UI 디자인 숙련] UI 디자인 핵심 포인트

🔎 UI 디자인 핵심 원리

 

1️⃣ 사용자 이해하기

※ 디자인의 목적은 사용자 경험을 향상시키고 참여를 유도

• 사용자가 원하는 정보를 쉽게 탐색하고, 사용하게 만들어야 한다
• 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어진다

2️⃣직관적인 디자인

※ 사용자가 학습하지 않아도 쉽게 이해하고 사용하도록 만들어야 한다

 

1) 사용자의 행동 유도

• 버튼
  • 배경색 혹은 콘텐츠와 대비되는 컬러를 사용하여 버튼을 강조한다
  • 흐름에 맞게 필요한 위치에 배치하여 쉽게 사용하도록 한다
  
• 링크
  • 일반적으로 웹에서는 파란색이 링크를 나타낸다
  • 링크의 텍스트에 밑줄을 넣어 클릭이 가능함을 전달
   

 

2) 정보를 시각적으로 표현

• 픽토그램 
  • 사용자가 정보를 더 쉽고 빠르게 이해하기 위해 시각적으로 디자인할 수 있다
  • 텍스트로 되어있는 정보를 픽토그램이나 아이콘을 활용하여 사용자의 이해를 돕고 핵심 정보를 강조해서 빠르게 전달 가능하다
  • 아이콘을 활용한 정보전달

3) 직관적인 디자인 핵심 요소

• 대비 높은 색상 조합
  • 배경과 텍스트의 색상을 대비하여 강조
• 간단한 레이아웃
  • 정보 구성과 디자인 요소를 적절하게 배치하여 사용자가 이해하기 쉬운 레이아웃 구조를 만든다
• 유연한 인터페이스
  • 사용자가 원하는 요구사항을 편하게 설정하도록 기능을 제공
• 아이콘 및 픽토그램 이미지 사용
  • 누구나 이해하기 쉬운 아이콘과 이미지는 상호작용을 쉽게 도와준다

3️⃣일관된 디자인

※ 일관된 디자인은 제품을 사용할 때 예측 가능하고 신뢰도를 쌓으며 새로운 인터페이스의 적응을 빠르게 이해시킨다

 

1) 일관된 디자인 핵심 요소

• 디자인 시스템 구축
  • 컬러, 타이포 그래피, 아이콘, 버튼, 등 시각적인 요소와 레이아웃, 그리드, UX 라이팅, 인터랙션, 브랜드 메세지 등의 요소를 명확히 하여 일관된 디자인을 한다
• 사용자 피드백
  • 사용자로부터 지속적으로 피드백을 받아 분석하고 이를 디자인에 적용

 

4️⃣가독성을 고려한 디자인

※ 텍스트는 쉽게 읽을 수 있어야 하며, 정보는 명확하고 간결하게 전달해야 한다

※ 폰트의 크기, 간격, 대비 등을 고려

 

1) 여백 활용

• 여백을 적절히 활용하면 가독성을 높인다
• 깔끔하고 정돈된 느낌을 줄 수 있고 중요한 요소를 돋보이게 강조할 수 있다

2) 콘텐츠 그룹화

• 상대적으로 가까이 있는 요소들은 하나의 그룹으로 보이게 된다
• 비슷한 의미, 주제를 갖고 있는 콘텐츠를 그룹화하여 사용자의 편의성을 높일 수 있다

3) 크기와 비율

• 요소의 중요도에 따라 크기를 조절하여 배치하면 자연스럽게 시선을 끌 수 있다
• 중요도에 따라 요소의 크기와 비율을 조정하여 콘텐츠의 계층을 구성할 수 있다
• 모든 요소의 중요도는 같지 않다 더 중요한 요소는 강조해서 눈에 띄게 표시하여 중요도를 나타내야 한다

4) 계층 구조

• 사용자가 중요한 정보를 빠르고 쉽게 확인할 수 있도록 시각적 계층 구조를 설정해야 한다
• 이를 위해서는 텍스트의 크기, 컬러, 위치를 활용할 수 있다

5️⃣명확한 피드백 제공

※ 사용자가 인터페이스와 상호작용을 하면 그에 대한 적절한 피드백을 받기 원한다

 

1) 즉각적인 반응 제공

• 사용자의 행동에 따라 시각적 또는 청각적 반응을 피드백으로 제공하여 사용자가 다음 행동을 결정하도록 돕는다
• 파일을 업로드하고 난 후 진행사항을 즉시 전달하여 사용자의 불안을 줄이고 이해를 높인다
• 예) 안내문구, 진행상황 표시, 시작~완료를 아이콘 또는 효과음으로 피드백한다

2) 시각적 변화

• 입력 필드에 정보를 모두 입력하거나, 조건을 충족했을 때 시각적으로 변화를 준다
• 예) CTA버튼의 색상 변화

6️⃣접근성을 고려한 디자인

※ 모든 사용자가 신체적, 환경적 조건에 관계없이 동등하게 제품에 접근하도록 보장하는 시스템

 

1) 텍스트 + 아이콘

• 텍스트와 아이콘을 사용하면 명확한 정보 전달을 할 수 있다
• 예) 적록 색맹 시각자는 컬러의 사용만으로 구분하기에 불편함이 있을 수 있다

2) 입력필드

• 입력 필드에서 오류 상태를 표현할 때는 텍스트로 정보를 전달할 수 있다
• 예) 텍스트 필드의 헬퍼 텍스트의 사용, 플레이스홀더의 스트로크 색상 강조

3) 텍스트 콘텐츠

• 텍스트 콘텐츠 안에 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치 파악하기 쉬워진다
• 예) 텍스트 콘텐츠 안의 타이틀, 내용, 추가 구성의 UI의 차이를 둔다(스트로크)

4) 명도 대비

• 명도 대비는 색상과 색상 간의 차이를 나타내며 요소 사이의 대비가 충분해야 저시력자도 원활한 이용을 할 수 있다
• 저시력자, 고령자도 쉽게 인식할 수 있도록 텍스트와 배경의 명도 대비는 4.5:1 이상이어야한다
• 텍스트와 배경색의 명도 대비는 WCAG(Web Content Accessibility Guidelines)

5) 접근성을 위한 전략

• 명확한 텍스트와 디자인 요소 : 텍스트, 버튼, 링크는 명확하게 구분
• 명도 대비 : 텍스트와 배경 색상 간의 충분한 대비를 제공하여 시각적 접근성을 높여야 한다
• 키보드 내비게이션 : 사용자가 마우스 없이 모든 기능을 사용할 수 있어야 한다
• 스크린 리더 : 스크린 리더가 올바르게 읽힐 수 있도록 설계해야 한다

7️⃣사용자 경험을 향상 시키는 방법

 

1) 직관적인 네비게이션

• 명확한 메뉴 구조 
  • 사용자가 모든 페이지를 방문하지 않아도 해당 페이지의 정보를 예측 가능하도록 한다
  • 모든 페이지의 메뉴구조를 동일하게 유지하여 사용자의 방향성을 잡아 준다
  • 메뉴 depth 최소화하여 3번이상 클릭하지 않고 원하는 페이지에 도달하게 한다
•  비주얼 요소 활용
  • 픽토그램, 아이콘을 사용하여 빠르게 정보를 전달한다
  • 사용중인 메뉴를 강조하여 사용자에게 현재 위치를 알려준다

2) 다양한 디바이스 지원

• 반응형 디자인
  • desktop, tabler, mobile의 다양한 디바이스에 최적화된 디자인을 제공
  • 그리드 시스템을 적용하여 일관된 디자인을 제공한다
• 터치 스크린 최적화
  • 버튼, 아이콘 요소의 최소 사이즈를 적용한다
  • 버튼, 아이콘 : IOS_44, Android_48

3) 사용자 피드백 반영

• 사용자 VOC 분석
  • 사용자의 VOC를 통해 반복적으로 발생하는 문제를 발견하고 해결할 수 있다
• 사용자 설문 조사
  • 사용자의 만족도나 서비스에 대한 경험을 빠르게 수집하여 데이터화 한다
• 사용자 인터뷰
  • 사용자의 생각과 행동을 직접 확인하면서 사용자가 느끼는 불편함과 니즈가 무엇인지 파악한다