Anthony의 Making Selected Button States Clear for Color Blind Users 소개하고자 합니다.
버튼을 선택하면 그 상태가 명확하게 나타나야 한다
컬러는 사용자 인터페이스에서 많은 정보를 전달하지만, 색맹 사용자에게는 그 정보가 제한적입니다. 색맹 사용자는 특정 색상을 구분하는 데 어려움을 겪기 때문에, 색상만으로는 상태나 기능을 명확히 인식하기 어렵습니다.
예를 들어, 버튼이 색상으로만 선택된 상태를 나타내면, 색맹 사용자는 그 버튼이 활성화되었는지 비활성화되었는지를 판단하기 힘들 수 있습니다. 따라서 버튼의 시각적 단서를 컬러에만 의존하는 것은 효과적이지 않습니다.
대신, 버튼의 모양이나 디자인 요소를 함께 활용하는 것이 중요합니다. 예를 들어, 버튼의 모양을 변화시키거나, 테두리, 그림자, 또는 아이콘을 추가하는 등의 방법을 통해 사용자가 버튼의 상태를 쉽게 인식할 수 있도록 해야 합니다. 이러한 접근은 모든 사용자가 버튼의 기능을 명확히 이해하고 사용할 수 있도록 도와주어, 접근성을 향상시키는 데 효과적 입니다.
첫째. 네비게이션 바
네비게이션 바에는 여러 버튼이 존재하지만, 색상만으로 현재 선택된 상태를 인식하기는 어렵습니다. 많은 웹사이트가 버튼 레이블에 대비되는 색상을 적용하여 선택된 상태를 강조하지만, 색맹 사용자에게는 이러한 색상 차이가 인식되지 않을 수 있습니다.
색맹 사용자는 특정 색상을 구별하는 데 어려움을 겪기 때문에, 색상만으로는 버튼의 활성화 여부를 판단하기 힘듭니다. 이로 인해 네비게이션 바에서 어떤 버튼이 선택되었는지를 알기 어려워지며, 이는 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
따라서 색상 외에도 다른 시각적 요소, 예를 들어 버튼의 모양 변화, 아이콘 추가, 또는 텍스트 스타일을 통해 선택된 버튼을 명확히 구분할 수 있도록 디자인하는 것이 중요합니다. 이렇게 하면 모든 사용자가 네비게이션 바의 버튼 상태를 쉽게 인식할 수 있어, 접근성을 높이고 원활한 탐색 경험을 제공할 수 있습니다.
컬러만 사용하는 대신, 버튼 레이블에 밑줄을 추가하면 색맹 사용자도 선택된 버튼을 혼동하지 않고 명확하게 인식할 수 있습니다. 이 방법을 통해 사용자들은 한 번에 선택된 상태를 확인할 수 있습니다.
따라서 색상 외에도 버튼의 모양 변화, 아이콘 추가, 또는 텍스트 스타일과 같은 다양한 시각적 요소를 활용하여 선택된 버튼을 명확히 구분할 수 있도록 디자인하는 것이 중요합니다. 이러한 접근은 모든 사용자가 네비게이션 바의 버튼 상태를 쉽게 인식하게 하여, 접근성을 높이고 원활한 탐색 경험을 제공하는 데 효과적입니다.
둘째. 세그먼티드 버튼(Segmented Buttons)
색맹 사용자에게 시각적인 단서가 필요한 또 다른 영역은 '세그먼티드 버튼'입니다. 많은 웹사이트에서는 버튼의 상태를 구분하기 위해 배경색을 변경하는 방법을 주로 사용하고 있습니다. 이러한 색상 변화는 일반 사용자에게는 명확하게 인식되지만, 색맹 사용자에게는 색상의 차이를 구분하는 데 어려움이 있습니다.
색맹 사용자는 특정 색상을 인식하지 못하거나 색상 간의 미세한 차이를 구분하기 힘들기 때문에, 배경색만으로 버튼의 상태를 판단하기 어렵습니다. 예를 들어, 활성화된 버튼과 비활성화된 버튼이 서로 다른 색상을 가지고 있더라도, 색맹 사용자는 이 두 버튼의 차이를 인식하지 못할 수 있습니다.
이러한 문제를 해결하기 위해서는 색상 외에도 다양한 시각적 요소를 활용해야 합니다. 버튼의 모양을 변화시키거나 테두리의 두께를 다르게 하거나, 아이콘을 추가하는 등의 방법을 통해 버튼의 상태를 명확히 구분할 수 있습니다. 이러한 접근 방식은 색맹 사용자뿐만 아니라 모든 사용자가 버튼의 상태를 쉽게 인식할 수 있도록 도와줍니다. 결과적으로 이는 웹사이트의 접근성을 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다.
특히 색맹 사용자는 밝은색과 어두운 색의 배경을 구분할 수 있지만, 이러한 색상 변화가 어떤 버튼이 선택되었는지를 명확히 인식하기는 어렵습니다. 색맹 사용자는 활성화된 버튼과 비활성화된 버튼의 색상이 다르다는 사실은 알 수 있지만, 그 차이가 어떤 상태를 의미하는지 이해하는 데 한계가 있습니다.
이런 상황에서 체크마크 아이콘을 선택된 버튼 레이블 옆에 추가하는 것은 매우 효과적인 방법입니다. 체크마크는 일반적으로 '선택됨' 또는 '활성화됨'을 나타내는 시각적 신호로 널리 인식되고 있습니다. 따라서 색상 변화에 의존하지 않고도 사용자에게 버튼의 선택 상태를 명확히 전달할 수 있습니다.
이와 같은 추가적인 시각적 단서는 색맹 사용자뿐만 아니라 모든 사용자에게 혼란을 줄여줍니다. 버튼의 상태를 빠르게 인식할 수 있도록 도와주어, 사용자 경험을 개선하고 웹사이트의 접근성을 높이는 데 효과적 입니다.
셋째. 토글 스위치(Toggle Switches)
토글 스위치에서 색맹 사용자가 겪는 시각적 단서와 관련한 문제는 매우 중요합니다. 대부분의 토글 스위치는 On과 Off 상태를 색상으로 구분하여 표시하지만, 색맹 사용자는 이러한 색상 차이를 인식하는 데 어려움을 겪습니다. 예를 들어, 활성화된 상태를 초록색으로, 비활성화된 상태를 빨간색으로 표시하는 경우가 많습니다. 그러나 색맹 사용자는 이 두 색상을 구별하지 못할 수 있으며, 이는 현재 스위치의 상태를 명확히 인식하기 어렵게 만듭니다.
색상만으로 상태를 전달하는 경우, 사용자는 스위치의 기능이나 상태를 판단하는 데 혼란을 느낄 수 있습니다. 이러한 혼란은 잘못된 클릭이나 기능 사용의 오류로 이어질 수 있으며, 결과적으로 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 따라서 토글 스위치의 상태를 명확히 전달하기 위해서는 색상 외에 다른 시각적 요소를 활용하는 것이 필수적입니다.
예를 들어, 토글 스위치의 상태를 보다 명확하게 만들기 위해 “on”과 “off” 레이블을 추가하는 것은 매우 효과적인 방법입니다. 이러한 텍스트 레이블은 사용자가 현재 스위치의 상태를 즉시 이해하는 데 도움을 줍니다. 색맹 사용자에게는 색상만으로 상태를 구분하기 어려운 경우가 많기 때문에, 이러한 레이블은 중요한 시각적 단서 역할을 합니다. "on"과 "off"라는 명확한 레이블이 존재하면 사용자는 스위치의 기능을 쉽게 인식하고, 잘못된 클릭을 방지할 수 있습니다.
또한, "on" 상태에 체크마크를 추가하는 것도 유용한 방법입니다. 체크마크는 일반적으로 '활성화됨' 또는 '선택됨'을 나타내는 기호로 널리 인식되고 있습니다. 체크마크가 추가됨으로써 사용자는 색상에 의존하지 않고도 스위치가 활성화된 상태임을 즉각적으로 이해할 수 있습니다.
이처럼 레이블과 체크마크를 추가하면, 모든 사용자가 스위치의 상태를 명확하게 인식할 수 있게 되어 접근성이 크게 향상됩니다. 결과적으로, 이러한 접근 방식은 모든 사용자가 편리하게 이용할 수 있는 환경을 조성하는 데 중요한 역할을 하게 됩니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요