디자인 카타

* 댓글 정렬 방법, 유저 경험에 어떤 차이가 있을까요?

https://designus.io/topic/220

• 왜 해당 UI가 더 좋은 지 작성합니다.
  A안인 칩 형태. 사용자가 한 눈에 선택지를 볼 수 있고 여러번 정렬 탭을 변경해도 즉각적으로 솔팅된 결과값을 볼 수 있음.
  

• 나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않은지 작성합니다.
  B안인 바텀시트. 한 번 더 탭을 해야 하고 정렬을 바꿀 때마다 다시 바텀시트를 열어야 하며, 그때마다 바텀시트가 콘텐츠를 가린다,

• 내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전
  A안이 더 좋다고 선택했지만 A안의 경우는 공간이 제한적이므로 선택지가 많지 않을 때 용이하다. 선택지가 많고 특정 정렬을 보는 것을 선호할 땐 B안이 더 좋을 것 같다.

* 튜터님 피드백

기식튜터님은 따봉쟁이... 내일은 짧게나마 의견 달아주셨으면 좋겠어요 🤣

---

하루 한 장 UX의 법칙 100

DAY 07. 시각적 메타포는 가장 빠른 커뮤니케이션 수단이다.

이미지는 텍스트보다 60,000배 빠르게 처리되며, 멘탈 모델, 즉 주변 세계에 대한 생각을 단순화한 체계를 통해 필터링된다. 좋은 시각적 메타포는 이러한 멘탈 모델을 통해 새로운 의미를 창조하고, 기존의 상징성을 활용해 대중과 공감대를 형성할 수 있도록 돕는다.

DAY 08. 매력적인 제품이 사용하기도 더 쉽다.

사람들은 아름다운 제품이 더 잘 작동한다고 믿는 편향이 있으며, 실제로 그렇지 않더라도 그렇게 믿는다. 그리고 만약 그 제품이 잘 작동하지 않더라도, 여전히 그 제품을 아름답다고 생각하고, 이후에 발생할 수 있는 사용성 문제에 대해 더 관대해진다. 이를 '미학-사용성 효과'라고 부른다.
이것이 단순히 아름다운 것을 만드는 데만 집중하고 그걸로 만족해야 한다는 의미는 아니다. 우리의 관대함에도 한계가 있다. 어떤 것이 전혀 작동하지 않거나, 사용자가 원하는 것을 찾을 수 없는 제품이라면 아무리 아름답더라도 구제할 수 없다. 여기서 진정 배울 수 있는 교훈은, 사용성을 무시한 채 단순히 아름답게 만드는 데만 집중해야 한다는 것이 아니라, 왜 아름다움과 사용성 모두에 집중해야 하는지를 이해하는 것이다.

---

식사 시간 팀 활동

* 제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?

https://toss.tech/article/toss-design-system-guide

토스의 디자인 시스템 팀은 300명 이상의 개발자와 디자이너를 지원하기 위해 4명의 디자이너로 구성되어 있으며, 컴포넌트의 우아함뿐만 아니라 가이드의 효율적인 제작에도 중점을 두고 있다. TDS 컴포넌트 가이드를 제작할 때 고려해야 할 사항들을 나열해 본다.

문제점

기존의 컴포넌트 가이드는 디자이너마다 작성 방식이 달라, 플랫폼 디자이너와 개발자 간의 소통에 어려움이 있다. 이로 인해 컴포넌트의 스펙을 온전히 파악하기 힘들었고, 개발자들이 필요한 정보를 찾기 어려웠다.

해결책

• 가이드의 읽는 방향성 정립: 가이드를 위에서 아래로 읽을 수 있도록 배치하여, 정보의 흐름을 명확하게 했다.

• 큰 구조에서 세부 요소로의 전개: 컴포넌트의 상위 옵션부터 하위 요소까지 단계별로 설명하여, 개발자가 구조를 쉽게 이해할 수 있도록 했다.

• 최악의 케이스 시나리오 제시: 모든 옵션을 최대한으로 사용한 사례를 가이드 상단에 배치하여, 전체적인 옵션의 지도를 한눈에 파악할 수 있게 했다.

• 접근성 영역 분리: 접근성 관련 스펙을 가이드의 하단에 별도로 구분하여, 디자이너들이 참고하기 쉽도록 했다.

• 컴포넌트 특성에 따른 가이드 구성: 컴포넌트의 복잡성에 따라 가이드의 구조를 조정하여, 불필요한 정보를 배제하고 필요한 정보만을 제공했다.

결과

이러한 개선을 통해 컴포넌트 가이드 작성 시간이 단축되었으며, 새로운 플랫폼 디자이너들이 시스템을 빠르게 이해하고 기여할 수 있게 되었다. 앞으로도 시스템의 규모가 성장함에 따라 가이드를 지속적으로 개선해 나갈 예정이다.

---

'UI 디자인의 모든 것' 1강 요약정리

사용자 중심 디자인이란?

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

UI 디자인 핵심 원리

* 가장 먼저, 사용자 이해하기

💡 UI 디자인에 앞서 가장 먼저 고려해야 하는 것은 우리 서비스를 사용하는 사용자를 이해하는 것이다.

• 디자인의 목적은 사용자 경험을 향상시키고 참여를 유도하는 것이다.
• 참여를 유도하기 위해서는 지속적으로 제품에 대한 긍적적인 인상과 신뢰감을 줄 수 있어야 한다.
• 사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하고 제품이나 서비스를 사용할 때 어려움이 없어야 한다.
• 이러한 긍정적인 경험들이 쌓여야 비로소 사용자는 우리 서비스가 좋은 디자인이라고 느끼기 시작한다.
• 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야 한다.

* 직관적인 디자인

💡 사용자는 제품이나 서비스의 인터페이스를 학습하지 않아도 쉽게 이해하고 사용할 수 있어야 한다.

• 사용자의 행동 유도 - 버튼, 링크
• 정보를 시각적으로 표현 - 픽토그램, 아이콘
• 직관적인 디자인 핵심 요소
  • 대비 높은 색상 조합
  • 간단한 레이아웃
  • 유연한 인터페이스
  • 아이콘 및 픽토그램 이미지 사용

* 일관된 디자인

💡 일관된 디자인은 신뢰감을 전달하는 중요한 역할을 한다.

• 일관된 디자인 왜 중요할까?
  • 사용자가 환경이나 상황에 구애받지 않고 동일한 서비스 경험을 느낄 수 있게 하는 것은 중요하다.
  • 제품을 사용할 때 예측 가능하고 일관된 상호작용을 경험함으로써 사용자의 불확실성을 줄이고 신뢰감을 전달할 수 있다.
  • 이러한 경험은 새로운 인터페이스를 사용할 때 빠르게 적응하고 이해할 수 있도록 도와준다.
• 일관된 사용자 경험
  • 신뢰성 향상
  • 업무 효율성 증대
• 일관된 디자인 핵심 요소
  • 디자인 시스템 구축
  • 사용자 피드백
• 대표적인 사례 - 애플, 네이버, 유튜브, 노션 슬랙 등

* 가독성을 고려한 디자인

💡 텍스트는 쉽게 읽을 수 있어야 하며, 정보는 명확하고 간결하게 전달되어야 합니다. 적절한 폰트 크기, 간격, 대비 등을 고려해야 한다.

• 여백 활용 - 화이트 스페이스
• 콘텐츠 그룹화
• 크기와 비율
• 계층 구조

* 명확한 피드백 제공

💡 사용자가 인터페이스와 상호작용하면서 특정 작업을 수행했을 때, 그에 대한 적잘한 피드백을 받기를 기대 한다.

• 즉각적인 반응 제공
• 시각적 변화

* 접근성을 고려한 디자인

💡 모든 사용자가 신체적, 환경적 조건에 관계없이 동등하게 웹에 접근하여 사용할 수 있도록 보장하는 것을 의미한다.

• 모든 사용자가 디자인에 접근할 수 있도록 하여 정보의 평등한 사용을 보장한다.
• 다양한 사용자층이 제품을 이용할 수 있게 되므로 비즈니스 기회가 확장된다.
• 접근성을 고려한 디자인
  • 텍스트 + 아이콘 - 텍스트와 아이콘을 함께 사용하면 명확한 정보 전달을 할 수 있다.
  • 입력필드 - 입력 필드에서 오류 상태를 표한할 때는 텍스트로 정보를 전달할 수 있다.
  • 텍스트 콘텐츠 - 텍스트 콘텐츠 안에 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치 파악하기가 쉬워진다.
  • 텍스트 + 라인(Bar) - 테두리 또는 라인을 활용하여 형태적 차이를 표현할 수 있다.
• 명도 대비 - 4.5:1 이상
• 접근성을 위한 디자인 전략
  • 명확한 텍스트와 디자인 요소 : 텍스트, 버튼, 링크는 명확하게 구분하기 쉬워야 한다.
  • 명도 대비 : 텍스트와 배경 색상 간의 충분한 대비를 제공하여 시각적인 접근성을 높여야 한다.
  • 키보드 내비게이션 : 사용자가 마우스 없이 키보드만으로 웹사이트의 모든 기능을 사용할 수 있게 설계해야 한다.
  • 스크린 리더 : 스크린 리더가 올바르게 읽힐 수 있도록 설계해야 한다.

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

* 직관적인 네이게이션

💡 사용자가 원하는 정보를 빠르고 쉽게 탐색할 수 있게 하는 것은 중요하다.

• 명확한 메뉴 구조 - 예상 가능한 카테고리, 일관된 메뉴 구조, 메뉴 depth 최소화
• 비주얼 요소 활용 - 픽토그램 및 아이콘 사용, 활성화 효과

* 다양한 디바이스 지원

💡 다양한 디바이스와 브라우저를 통해 일관된 경험을 하는 것은 중요하다.

• 반응형 디자인 - 디바이스 최적화, 그리드 시스템
• 터치 스크린 최적화
  • 손가락으로 쉽게 누를 수 있도록 터치 영역을 확보하고, 요소 간 적절한 간격을 유지하는 것이 중요하다.
  • 버튼, 아이콘 요소의 최소 사이즈를 확인하고 적응해 주는 것이 좋다.
    • 버튼 및 아이콘 - ios는 44 이상 androids는 48 이상

* 사용자의 피드백 반영

💡 사용자의 피드백을 반영하여 지속적인 개선 과정이 필요하다.

• 사용자의 피드백을 정기적으로 수집하고 검토하여 사용자 경험을 개선하기 위해 노력해야 한다.
• 피드백 수집 방법 - 사용자 VOC 분석, 사용자 설문 조사, 사용자 인터뷰

---

🥰 Blah Blah

새로운 강의인 'UI 디자인의 모든 것'을 듣고 있는데 강의 내용이 너무 지루하다 T.T 졸려서 죽을 뻔 했다.