[UI 디자인의 모든 것] CH1: UI 디자인 핵심 원리, 사용자 경험을 향상시키는 방법

 

사용자 중심 디자인이란?

📌 사용자 중심 디자인(User-Centered Design, UCD)
제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식이다. 

• 가장 먼저 사용자 입장에서 깊이 있게 공감하기
• 사용자의 목적, 행동, 상황, 니즈를 지속적으로 파악하여 사용자가 구체적으로 어떤 문제를 겪고 있는지 파악하기
• 제품이나 서비스를 처음 사용하는 사용자도 쉽게 이해하고 사용할 수 있도록 직관적인 UI로 설계하기

 

UI 디자인 핵심 원리

📌 아래 UI 디자인 원리를 통해 제품이나 서비스가 제공하는 기능과 정보를 사용자에게 전달할 수 있다!

사용자 이해하기

• 가장 먼저 서비스를 사용하는 사용자 이해하기
• 디자인의 목적: 사용자 경험을 향상시키고, 참여를 유도하는 것
• 참여를 유도하려면? 지속적으로 제품에 대한 긍정적인 인상과 신뢰감을 줘야 함
• 사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하고, 제품이나 서비스 이용에 어려움이 없어야 함
• 긍정적인 경험이 쌓이면? ▶️ 사용자는 우리 서비스가 좋은 디자인이라고 생각함
• 모든 의사결정 ▶️ 사용자의 니즈와 기대를 중심으로 이뤄져야 함

 

직관적인 디자인

• 사용자는 제품이나 서비스의 인터페이스를 학습하지 않아도 쉽게 이해하고 사용할 수 있어야 함
• 사용자의 행동 유도

• 버튼: 사용자의 행동을 유도하는 중요한 인터페이스 요소
  - 배경색 or 콘텐츠와 대비되는 컬러 사용해서 버튼을 강조
  - 흐름에 맞게 필요한 위치에 배치해서 쉽게 사용할 수 있어야 함
• 링크: 자세한 정보를 확인할 수 있도록 연결하는 요소
  - 일반적으로 웹에서는 파란색이 링크를 나타냄- 링크된 텍스트에 밑줄을 넣어 클릭이 가능함을 전달

• 정보를 시각적으로 표현

• 픽토그램: 텍스트로 되어있는 정보를 픽토그램이나 아이콘을 활용해서 사용자의 이해를 돕고 핵심 정보를 강조해서 빠르게 전달 가능
• 아이콘: 사용자가 의미와 기능을 즉각적으로 이해할 수 있음

• 직관적인 디자인 핵심 요소

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

 

일관된 디자인

• 사용자가 환경이나 상황에 구애받지 않고 동일한 서비스 경험을 느낄 수 있어야 함
• 제품을 사용할 때 예측 가능하고 일관된 상호작용을 경험함으로써 사용자의 불확실성을 줄이고 신뢰감을 전달 가능
• 일관된 사용자 경험 ▶️ 신뢰성 향상, 업무 효율성 증대
• 일관된 디자인 핵심 요소 ▶️ 디자인 시스템 구축, 사용자 피드백 

 

가독성을 고려한 디자인

• 텍스트는 쉽게 읽을 수 있어야 하며, 정보는 명확하고 간결하게 전달되어야 함(적절한 폰트 크기, 간격, 대비 등 고려)
• 여백 활용: 여백을 적절히 활용하면 가독성을 높일 수 있고, 깔끔하고 정돈된 느낌을 줄 수 있음 + 중요한 요소 강조 가능
• 콘텐츠 그룹화: 비슷한 의미, 주제를 갖고 있는 콘텐츠를 그룹화하여 사용자의 편의성을 높일 수 있다. 
• 크기와 비율: 요소의 중요도에 따라 크기를 조절해 배치하면 시선을 끌 수 있고, 요소의 크기와 비율을 조정하여 콘텐츠의 계층을 구성할 수 있음
• 계층 구조: 사용자가 중요한 정보를 쉽게 확인할 수 있도록 시각적 계층 구조를 설정해야 함
  - 텍스트 크기, 컬러, 위치 활용 가능

 

명확한 피드백 제공

• 사용자가 인터페이스와 상호작용하면서 특정 작업을 수행했을 때, 이에 적절한 피드백을 받길 기대함
• 즉각적인 반응 제공: 
  - 사용자의 행동에 따라 시각적 or 청각적 반응을 피드백으로 제공하여 사용자가 다음 행동을 쉽게 결정할 수 있도록 함
  - e.g. 구글: 파일을 업로드하고 난 후 진행사항을 즉시 전달하여 사용자의 불안을 줄이고 이해를 높임
• 시각적 변화: 
  - 입력 필드에 정보를 모두 입력 or 필요한 조건이 충족되었을 때, 시각적으로 변화를 주어 사용자가 인지할 수 있도록 함

 

접근성을 고려한 디자인

• 모든 사용자가 신체적, 환경적 조건에 관계 없이 동등하게 웹에 접근해 사용할 수 있도록 보장하는 것
• 접근성을 고려한 디자인
  • 텍스트 + 아이콘: 명확한 정보 전달 가능
    

    

    출처: UI 디자인 원칙_챕터1-1

  • 입력 필드: 오류 상태 표현할 때 텍스트로 정보 전달 가능
    

    

    출처: UI 디자인 원칙_챕터1-1

  • 텍스트 콘텐츠: 텍스트 콘텐츠 안에 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치 파악 쉬움
    

    

    출처: UI 디자인 원칙_챕터1-1

  • 텍스트 + 라인(Bar): 테두리 or 라인을 활용해 형태적 차이 표현 가능
    

    

    출처: UI 디자인 원칙_챕터1-1

• 명도 대비
  • 색상과 색상 간의 차이를 나타낸다: 요소 사이의 색상 대비가 충분해야 저시력자도 원활하게 서비스 이용 가능
    
  • 저시력자, 고령자도 쉽게 인식할 수 있도록 텍스트와 배경의 명도 대비는 4.5:1 이상이어야해요. 텍스트와 배경색의 명도 대비는 WCAG(Web Content Accessibility Guidelines) 권장 사항에 따라야 함
    

출처: UI 디자인 원칙_챕터1-1

 

 

📌 접근성을 위한 디자인 전략

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

 

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

 

직관적인 네비게이션

• 사용자가 원하는 정보를 빠르고 쉽게 탐색할 수 있도록!
• 명확한 메뉴 구조
  • 예상 가능한 카테고리: 모든 페이지를 방문하지 않아도 어디에 어떤 정보가 있는지 예측할 수 있어야 함
  • 일관된 메뉴 구조: 모든 페이지에 동일한 메뉴 구조를 유지해야 사용자가 방향을 잃지 않고 쉽게 찾을 수 있음
  • 메뉴 depth 최소화: 사용자가 3번 이상 클릭하지 않고도 원하는 페이지에 도달할 수 있어야 함
• 비주얼 요소 활용
  • 픽토그램, 아이콘 사용
  • 활성화 효과: 사용 중인 메뉴를 강조해서 사용자에게 현재 위치를 알려줄 수 있음

 

다양한 디바이스 지원

• 다양한 디바이스와 브라우저를 통해 일관된 경험을 제공하도록!
• 반응형 디자인
  • 디바이스 최적화: 다양한 디바이스에 최적화된 디자인을 제공해야 함
  • 그리드 시스템: 다양한 해상도에 최적화된 레이아웃을 구현하기 위해 그리드 시스템을 적용해 일관된 디자인을 제공해야 함
• 터치 스크린 최적화
  • 손가락으로 쉽게 누를 수 있도록 터치 영역을 확보하고, 요소 간 적절한 간격을 유지하는 것이 중요함
  • 버튼, 아이콘, 요소의 최소 사이즈를 확인하고 적용해주는 것이 좋음
    

    

    출처: UI 디자인 원칙_챕터1-2

사용자 피드백 반영

• 사용자 피드백을 반영하여 지속적인 개선 과정을 거치도록!
• 피드백 수집 방법
  • 사용자 VOC(Voice Of Customer, 고객의 소리) 분석: 사용자의 VOC를 통해 반복적으로 발생하는 사용자의 문제를 발견하고 해결 할 수 있음
  • 사용자 설문 조사: 사용자의 만족도나 서비스에 대한 경험을 빠르게 수집해 데이터화할 수 있음
  • 사용자 인터뷰: 사용자의 생각과 행동을 직접 확인하면서 사용자가 느끼는 불편함과 니즈가 무엇인지 파악할 수 있음