UI/UX 원칙

[UI/UX 원칙 #14] 라디오 버튼 설계 10가지 UX 원칙 가이드라인

전코치의 사용성/리서치/UX 방법론

2024.09.12 | 조회 685 |
0
|
from.
전민수

전코치의 사용성 리서치 UX 방법론

프로덕트 매니저/프로덕트 오너/프로덕트 디자이너를 위한 UI / UX / UX 방법론&프레임워크 소식

Nick Babich의 글 Radio Buttons UXDesign를 소개하고자 합니다.

라디오 버튼은 폼에서 필수적인 요소입니다. 이는 두 개 이상의 상호 배타적인 옵션이 있을 때 사용되며, 사용자가 정확히 하나의 선택지를 선택해야 한다는 점이 특징입니다. 선택되지 않은 라디오 버튼을 클릭하면, 이전에 선택된 다른 버튼이 자동으로 선택 해제됩니다.

일반 라디오 버튼 컨트롤
일반 라디오 버튼 컨트롤

라디오 버튼은 올바르게 활용될 때 매우 유용하며, 옵션 선택 과정을 간편하게 만들어 줍니다.

1. 라디오 버튼의 이름은 어떤 배경에서 비롯되었을까?

소프트웨어 라디오 버튼은 물리적 라디오 버튼을 모델로 하였습니다. 예를 들어, 오래된 자동차 라디오에는 주파수를 선택하는 데 사용되는 물리적 버튼이 있었습니다. 운전자가 특정 주파수를 선택하면 모든 버튼이 튀어나오고, 오직 하나의 버튼만 눌린 상태로 남게 됩니다.

(1) 직관적인 인터페이스

물리적 라디오 버튼은 사용자가 쉽게 이해하고 조작할 수 있는 직관적인 인터페이스를 제공합니다. 이러한 특성을 소프트웨어에서도 그대로 반영하여 사용자 친화적인 경험을 제공합니다.

(2) 명확한 선택

물리적 버튼의 동작 방식은 사용자가 한 번에 하나의 선택만 할 수 있도록 유도합니다. 이는 데이터의 일관성을 유지하고, 사용자가 무엇을 선택했는지 명확하게 인식할 수 있게 도와줍니다.

(3) 사용자 경험

물리적 버튼이 가진 '눌림'의 피드백은 사용자가 선택을 확실히 인식할 수 있도록 도와줍니다. 

(4) 기존의 사용 패턴

많은 사용자가 기존의 물리적 라디오 버튼에 익숙해져 있기 때문에, 이러한 형식을 소프트웨어에서도 사용하는 것은 자연스럽고 편리한 선택으로 여겨집니다.

이러한 이유들로 인해 소프트웨어 라디오 버튼은 물리적 라디오 버튼의 디자인과 동작 방식을 따르게 되었습니다.

2. 라디오 버튼 UX 설계 원칙 

1) 라디오 버튼은 동작을 수행하는 데 사용하지 않는다

(1) 사용자의 혼란 방지
라디오 버튼은 일반적으로 선택 옵션을 제공하는 데 사용됩니다. 만약 명령 수행에 활용된다면, 사용자는 혼란을 느낄 수 있으며 어떤 행동이 실행될지 예측하기 어려워질 수 있습니다.

(2) 직관적인 상호작용
사용자는 라디오 버튼을 선택할 때 주로 정보를 선택하는 방식으로 인식합니다. 이를 명령 수행에 사용하게 되면, 사용자의 기대와 실제 행동 사이에 불일치가 발생할 수 있습니다.

(3) 피드백 부족
라디오 버튼은 선택된 옵션을 표시하는 데 중점을 두고 있으며, 명령 수행 결과에 대한 즉각적인 피드백을 제공하지 않습니다. 

(4) 접근성 문제
모든 사용자가 라디오 버튼의 동작 방식을 동일하게 이해하지 않을 수 있습니다. 따라서 명령 수행을 위해서는 다른 UI 요소(예: 버튼)를 사용하는 것이 더 접근성과 명확성을 높이는 데 도움이 됩니다.

2) 옵션은 논리적 순서로 구성한다

옵션 목록은 논리적인 순서로 구성하는 것이 바람직하며, 가장 간단한 작업에서 가장 복잡한 작업으로, 또는 가장 낮은 위험에서 가장 높은 위험으로 정렬하는 것이 좋습니다. 

(1) 사용자 경험 향상

사용자가 옵션을 쉽게 이해하고 선택할 수 있도록 도와줍니다. 논리적인 순서는 사용자가 자연스럽게 선택할 수 있는 흐름을 제공합니다.

(2) 의사 결정 용이

가장 간단한 작업이나 낮은 위험부터 시작하면, 사용자는 점진적으로 더 복잡한 옵션이나 높은 위험을 고려할 수 있습니다. 이는 의사 결정을 더욱 수월하게 만듭니다.

(3) 혼란 감소

옵션이 무작위로 나열될 경우 사용자가 혼란을 느낄 수 있습니다. 논리적인 순서는 정보의 일관성을 높여 사용자가 더 쉽게 선택할 수 있도록 돕습니다.

(4) 효율성 증대

사용자는 필요한 옵션을 더 빠르게 찾을 수 있으며, 이는 전반적인 작업 효율성을 높이는 데 효과적입니다. 특히 시간이 중요한 상황에서는 더욱 유용합니다.

(5) 학습 효과

사용자들이 옵션을 선택하는 과정에서 점진적으로 난이도를 높이는 방식은 학습을 촉진합니다. 쉽게 이해할 수 있는 옵션부터 시작하게 되면, 더 복잡한 사항도 자연스럽게 받아들일 수 있습니다.

3) 옵션은 포괄적이고 명확하게 구별되어야 한다

다른 인터랙티브 요소와 마찬가지로, 라디오 버튼의 주요 사용성 문제는 레이블에서 발생합니다. 모호하거나 오해의 소지가 있는 레이블은 사용자가 그 의미를 이해하는 데 어려움을 겪게 하여 많은 혼란을 초래할 수 있습니다. 따라서 레이블의 명확성을 항상 점검하는 것이 중요합니다. 사용자의 어휘와 맥락이 모두 분명해야 합니다.

(1) 의미 전달
레이블이 명확하지 않으면 사용자가 옵션의 의미를 혼동할 수 있어, 잘못된 선택을 할 위험이 높아집니다.

(2) 사용성 향상
명확한 레이블은 사용자가 쉽게 이해하고 빠르게 선택할 수 있도록 도와줍니다.

(3) 혼란 방지
모호한 레이블은 사용자에게 불필요한 혼란을 초래할 수 있습니다.

(4) 효율적인 의사 결정
레이블이 명확하면 사용자는 빠르게 결정을 내릴 수 있어, 작업의 효율성을 높이는 데 효과적입니다.

4) 미리 선택된 옵션을 제공한다

제이콥닐슨의 10가지 휴리스틱 중 하나는 사용자가 자신의 행동을 실행 취소할 수 있어야 합니다. 이는 사용자가 UI 컨트롤을 원래 상태로 되돌릴 수 있도록 하는 것을 의미합니다.

(1) 미리 선택된 옵션라디오 버튼이 항상 정확히 하나의 옵션이 미리 선택되어 있어야 하는 이유는, 사용자가 선택을 강제로 하도록 만들기보다는 명확한 기본값을 제공하여 의사 결정을 쉽게 하기 위함입니다. 

(2) 건너뛰기 옵션
"없음(None)"이라는 선택지를 제공하는 것은 사용자가 필요에 따라 선택을 건너뛸 수 있도록 하여, 불필요한 선택을 강요하지 않습니다. 이는 사용자에게 더 많은 자율성을 부여하고, 각자의 상황에 맞는 선택을 할 수 있도록 지원합니다.

(3) 명시적 선택 제공
명확한 선택 옵션을 제공하는 것은 사용자가 자신의 의사를 표현할 수 있는 기회를 주며, 이는 사용자 경험을 개선하는 데 큰 도움이 됩니다. 강제로 선택하게 하는 것보다, 사용자에게 더 나은 경험을 제공합니다.

5) 목록을 세로로 배치한다

라디오 버튼이 가로로 배치되면, 사용자는 옵션을 스캔하는 데 어려움을 겪을 수 있습니다. 이는 버튼과 레이블 간의 연결이 불명확해져, 사용자가 어떤 버튼이 어떤 레이블에 해당하는지 헷갈릴 수 있기 때문입니다. 버튼 앞이나 뒤의 레이블이 혼동을 초래할 수 있습니다.

또한, 시각적 흐름 측면에서도 문제입니다. 사용자가 수평으로 시선을 이동할 때, 버튼과 레이블 간의 관계가 명확하지 않으면 선택지를 빠르게 인식하기 어려워지며, 이는 선택 과정에서 실수를 유발할 수 있습니다.

Bad Case 예: 가로로 배치된 라디오 버튼
Bad Case 예: 가로로 배치된 라디오 버튼

반면, 라디오 버튼을 세로로 배치하면 각 선택지가 독립적으로 구분되어 사용자가 옵션을 더 쉽게 인식하고 선택할 수 있습니다. 각 레이블이 바로 위에 위치해 관련성을 명확히 하여, 사용자에게 더 나은 경험을 제공하기 때문입니다.

추가적으로 하나 더 설명하면, 각 선택지는 한 줄에 하나씩 배치되어야 합니다. 이렇게 하면 해당 레이블과의 연결이 명확해져, 사용자가 어떤 옵션을 선택해야 하는지를 쉽게 이해할 수 있습니다.

 

다만, 여전히 여러 옵션을 한 줄에 가로로 배치해야 하는 경우, 버튼과 레이블 간의 간격을 충분히 두어 어떤 선택지가 어떤 레이블에 해당하는지 명확히 알 수 있도록 해야 합니다.

예를 들어 Duolingo 앱의 경우, 가로 라디오 버튼을 활용하면서도, 터치 지원 기기에서 쉽게 구별할 수 있도록 충분히 큰 타겟을 마련해 놓았습니다.

Good Case 예: 가로로 배치된 라디오 버튼 
Good Case 예: 가로로 배치된 라디오 버튼 

6) 라벨 태그를 클릭 가능한 타겟으로 활용한다

타겟의 크기는 매우 중요한 요소입니다. 라디오 버튼은 본래 작기 때문에 클릭이나 탭하기 어려울 수 있습니다. 따라서 옵션을 선택하기 쉽게 하려면 타겟 영역을 늘리는 것이 좋습니다. 사용자가 원을 클릭하는 것뿐만 아니라 레이블을 클릭하여 옵션을 선택할 수 있도록 해야 합니다.

(1) 사용자 편의성
작은 타겟은 사용자가 정확하게 클릭하기 어렵게 만들어 실수를 유발할 수 있습니다. 타겟 영역을 넓히면 클릭하기 쉬워져 사용자 편의성이 향상됩니다.

(2) 접근성 향상
다양한 사용자, 특히 손이나 시력이 불편한 분들을 고려할 때, 충분한 크기의 타겟은 접근성을 높이는 데 효과적입니다. 모든 사용자가 쉽게 상호작용할 수 있도록 도와줍니다.

(3) 혼동 방지
작은 라디오 버튼은 서로 가까이 배치될 경우 어떤 버튼을 클릭해야 할지 혼란을 초래할 수 있습니다. 타겟 영역을 넓히면 각 옵션을 명확하게 구분할 수 있어 선택의 정확성이 높아집니다.

왼쪽: 클릭할 수 있는 영역이 제한적입니다. 오른쪽: 클릭 가능한 영역이 적절합니다.
왼쪽: 클릭할 수 있는 영역이 제한적입니다. 오른쪽: 클릭 가능한 영역이 적절합니다.

7) 드롭다운 대신 라디오 버튼 사용한다

가능하다면 드롭다운 메뉴보다는 라디오 버튼을 사용하는 것이 좋습니다. 드롭다운 메뉴는 사용자가 옵션을 보기 위해 추가적인 동작, 즉 드롭다운 요소를 탭해야 하는 번거로움이 있습니다. 반면, 라디오 버튼은 모든 옵션을 한눈에 보여주어 사용자가 쉽게 비교할 수 있도록 도와줍니다.

(1) 즉각적인 가시성

라디오 버튼은 모든 옵션을 한눈에 보여주기 때문에 사용자가 선택할 수 있는 항목을 쉽게 확인할 수 있습니다. 즉, 라디오 버튼은 클릭 한 번으로 모든 옵션을 보여주므로 편리합니다. 반면에 드롭다운 메뉴는 사용자가 옵션을 보려면 추가적인 클릭이 필요합니다. 이 과정이 번거롭고 시간이 소요될 수 있어 사용자 경험이 저하될 수 있습니다.

(2) 비교 용이성

여러 옵션을 동시에 보여주는 라디오 버튼은 사용자가 각각의 선택지를 쉽게 비교할 수 있게 도와줍니다. 이는 더 나은 결정을 내리는 데 도움을 줍니다.

(3) 직관적 상호작용

라디오 버튼은 클릭을 통해 선택하는 방식이 직관적이어서 사용자에게 익숙합니다.

왼쪽: 드롭다운 메뉴로 선택하는 성별.  오른쪽: 라디오 버튼으로 선택하는 성별
왼쪽: 드롭다운 메뉴로 선택하는 성별.  오른쪽: 라디오 버튼으로 선택하는 성별

8) 옵션 내 또 다른 옵션을 만들지 않는다 

라디오 버튼을 다른 라디오 버튼이나 체크박스와 중첩하지 않도록 하는 것이 좋습니다. 혼란을 피하기 위해 모든 옵션을 동일한 수준에 두는 것이 중요합니다.

(1) 혼란 최소화
중첩된 옵션은 사용자가 선택할 항목을 명확히 구분하기 어렵게 만듭니다. 이는 사용자가 어떤 옵션이 어떤 그룹에 속하는지 이해하는 데 혼란을 초래할 수 있습니다.

(2) 명확한 선택
모든 옵션을 동일한 수준에 두면 사용자가 각 선택지를 쉽게 비교할 수 있습니다. 

중첩된 옵션은 불필요한 복잡성을 초래할 수 있습니다.
중첩된 옵션은 불필요한 복잡성을 초래할 수 있습니다.

9) 애니메이션과 시각적 피드백 적극적 활용한다

잘 설계된 애니메이션은 경험을 더욱 정교하게 만들어줍니다. 라디오 버튼과 같은 인터랙티브 요소는 실제로 만질 수 있는 것처럼 보여야 하며, 움직임의 신호는 입력을 즉시 인식하고 사용자 입력에 대한 시각적 반응을 통해 명확성을 더해줍니다.

(1) 사용자 경험 향상
라디오 버튼의 애니메이션은 인터페이스에 생동감을 불어넣고, 사용자가 시스템과 상호작용할 때 몰입감을 느끼게 합니다. 

(2) 즉각적인 피드백 제공
입력에 대한 애니메이션은 사용자가 자신의 행동이 시스템에 어떻게 반영되는지를 즉시 알 수 있게 해줍니다. 이를 통해 사용자는 올바른 선택을 했는지 확인할 수 있습니다.

(3) 명확한 정보 전달
시각적 반응은 사용자가 어떤 작업을 수행했는지, 그리고 그 결과가 무엇인지 명확히 이해할 수 있도록 돕습니다. 이러한 명확성은 혼란을 줄이고, 사용자가 더 자신 있게 인터페이스를 사용할 수 있게 합니다.

(4) 상호작용의 직관성
라디오 버튼의 애니메이션은 라디오 버튼과 같은 요소가 실제로 존재하는 것처럼 느끼게 하여, 사용자가 클릭하거나 선택할 때 더욱 자연스럽게 반응하게 만듭니다. 

Image credit: Dribbble
Image credit: Dribbble

10) 체크 박스를 대신 사용해야 할까요, 아니면 라디오 버튼을 사용해야 할까요?

사용자가 두 개의 상호 배타적인 옵션 중에서 선택해야 할 때(예: "우리 팀의 메시지를 수신하는 데 동의하십니까?"와 같은 질문) 단일 체크박스를 사용하는 것이 적합합니다. 체크박스는 단일 옵션을 켜거나 끄는 데만 알맞으며, 반면 라디오 버튼은 서로 다른 대안을 선택할 때 사용됩니다.

(1) 상호 배타적 선택
체크박스는 사용자가 특정 옵션을 켜거나 끌 수 있는 간단한 선택을 제공합니다. 예를 들어, "수신 동의"와 같은 질문에서는 체크박스를 통해 사용자가 동의 여부를 쉽게 결정할 수 있습니다.

(2) 명확한 선택 구조
라디오 버튼은 여러 옵션 중 하나를 선택해야 할 때 매우 유용합니다. 사용자가 서로 다른 대안들 중에서 하나를 선택해야 할 경우, 라디오 버튼은 명확한 선택 구조를 제시하여 혼란을 줄입니다.

(3) 사용자 혼란 최소화
체크박스를 사용하면 사용자가 단일 옵션에 대한 동의 여부를 쉽게 이해할 수 있습니다. 반면, 라디오 버튼은 여러 대안 중 하나를 선택해야 하므로 그 선택의 중요성을 강조합니다.

(4) 직관적인 인터페이스
체크박스는 ON/OFF 상태를 직관적으로 나타내어 사용자가 손쉽게 이해하고 사용할 수 있게 합니다. 라디오 버튼은 여러 옵션을 비교하고 선택할 수 있는 구조를 제공하여, 사용자가 선택의 필요성을 느끼게 합니다.

Checkbox control. Image credit: Material Design
Checkbox control. Image credit: Material Design

옵션에 두 가지 솔루션이 있다면, 다음 상황을 기억해야 합니다.

(1) 대체 선택지
체크박스의 뜻이 완전히 명확하진 않다면 라디오 버튼을 이용해야 합니다. 아래 사례를 보면 두 선택지가 정반대여서 이 경우에는 라디오 버튼을 선택하는 것이 더 낫습니다.

Select orientation for the document (Landscape or Portrait)
Select orientation for the document (Landscape or Portrait)

(2) 마법사
마법사 페이지에는 선택지를 분명하게 보여주기 위해 라디오 버튼을 사용해야 합니다. 물론 체크박스도 괜찮긴 하지만 말입니다. 디폴트로 특정 버튼이 선택된 상태로 디자인하면 유저에게 강력한 제안을 할 수 있습니다. 디폴트 선택은 유저가 더 나은 선택을 할 수 있게 해 주고, 확신을 가지고 진행할 수 있기 때문입니다. 

어떤 옵션을 강력히 추천한다면, “(추천)”이라는 문구를 레이블에 추가합니다. Image credit: Dropbox
어떤 옵션을 강력히 추천한다면, “(추천)”이라는 문구를 레이블에 추가합니다. Image credit: Dropbox

(3) 네 또는 아니오
사용자가 “네” 혹은 “아니오”로 유저가 단순하게 대답할 수 있는 하나의 질문이 있을 땐 체크박스를 쓰는 것이 맞습니다. 

결론 

라디오 버튼을 설계할 때 가장 중요한 점은 사용자가 이 UI 요소를 예측 가능하게 만드는 것입니다. 이는 사용자가 시스템을 보다 효과적으로 제어할 수 있도록 돕습니다.

(1) 사용자 신뢰 구축
예측 가능한 인터페이스는 사용자가 시스템에 대한 신뢰를 높이는 데 효과적입니다. 사용자가 선택한 결과가 어떻게 나타나는지 알 수 있다면, 더욱 편안하게 시스템을 사용할 수 있기 때문입니다. 

(2) 효율적인 결정
사용자가 라디오 버튼의 작동 방식을 명확히 이해하면, 빠르고 효율적으로 결정을 내릴 수 있습니다. 각 버튼을 클릭했을 때 어떤 변화가 있을지를 알면, 사용자는 더욱 신속하게 선택할 수 있습니다.

(3) 실수 감소
예측 가능한 UI 요소는 사용자의 실수를 줄이는 데 도움을 줍니다. 어떤 버튼을 클릭할지에 대한 혼란이 없으면, 잘못된 선택을 할 가능성이 줄어듭니다.

(4) 학습 곡선 완화
사용자가 새로운 시스템에 적응하는 데 필요한 시간이 단축됩니다. 예측 가능한 요소는 사용자 경험을 일관되게 만들어, 새로운 기능이나 시스템에 대한 학습을 쉽게 합니다.

(5) 전반적인 사용자 경험 향상
예측 가능한 UI는 사용자가 시스템과 상호작용할 때 더 나은 경험을 제공합니다. 이는 사용자 만족도를 높이고, 결과적으로 더 높은 사용자 유지율로 이어질 수 있습니다.

이처럼, 라디오 버튼을 예측 가능하게 설계하는 것은 사용자에게 더 나은 제어감을 제공하고, 전반적인 사용자 경험을 향상시키는 데 중요한 요소가 됩니다. 

==================================

[모집중] "UX 원칙 가이드라인" 강좌 소개합니다.

선착순 10명 !!! "4주 완성! UX 원칙 가이드라인" 🌟10월7일(월) 개강 !!!

아래 링크 클릭시, 강좌 소개 페이지로 이동됩니다.

https://ebprux.liveklass.com/cu/qzJvCEEK

 

실무에 필요한 모든 내용을 담았습니다 🗂️

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) 세부 커리큘럼에 대해 알아볼까요?

[1주차]

챌린지 플립드 러닝(Flipped Learning) VOD 수업:

"UX 디자인 가이드라인 개념"

1. PM에게 있어 UX 디자인 가이드 원칙이 중요한 이유는?

2. UI/UX 분석(UX 디자인 가이드 원칙) 대분류 모형에 대해 알아볼까요!

3. 단축성이란?

4. 반응성이란?

5. 사전방지성이란?

6. 오류발생감지성이란?

7. 오류회복성이란?

8. 가독성이란?

9. 논리성이란?

10. 이해성이란?

11. 기억성이란?

12. 변화제시성이란?

13. 사용자주도권이란?

14. 시스템주도권이란?

15. 대체성이란?

16. 다중성이란?

17. 친숙성이란?

18. 예측가능성이란?

19. 외부적일관성과 내부적 일관성이란?

[1주차] 챌린지 줌 Live 수업:

"UX 디자인 가이드라인 개념"

10월7일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 1주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 1주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[2주차] 챌린지 플립드 러닝(Flipped Learning) VOD 수업:

"단축성, 반응성"

1. [VOD] [단축성 > 검색절차 줄이기] 상세 검색

2. [VOD] [단축성 > 검색절차 줄이기] 인기검색

3. [VOD] [단축성 > 검색절차 줄이기] 자동완성 검색어

4. [VOD] [단축성 > 검색절차 줄이기] 초성 검색

5. [VOD] [단축성 > 검색절차 줄이기] 최근 검색

6. [VOD] [단축성 > 검색절차 줄이기] 통합 검색

7. [VOD] [단축성 > 검색절차 줄이기] 정렬 검색

8. [VOD] [단축성 > 검색절차 줄이기] 연관 검색

9. [VOD] [단축성 > 검색절차 줄이기] 기간 검색

10. [VOD] [단축성 > 선택 행위 최소화] 버튼

11. [VOD] [단축성 > 선택 행위 최소화] 긍정적 버튼

12. [VOD] [단축성 > 선택 행위 최소화] 주요 액션 버튼

13. [VOD] [단축성 > 선택 행위 최소화] 삭제 버튼

14. [VOD] [단축성 > 선택 행위 최소화] 드롭다운 메뉴

15. [VOD] [단축성 > Context 내비게이션] 링크

16. [VOD] [단축성 > Context 내비게이션] Top 버튼

17. [VOD] [단축성 > Context 내비게이션] 추천 정보

18. [VOD] [단축성 > 반복적 행위 최소화] 이전 입력 행위 최소화

19. [VOD] [단축성 > 반복적 행위 최소화] 공통적 입력 행위 추천

20. [VOD] [단축성 > 반복적 행위 최소화] 개별 입력 추천

21. [VOD] [단축성 > 반복적 행위 최소화] 필수 입력 사항 자동 저장

22. [VOD] [단축성 > 반복적 행위 최소화] 즐겨찾기

23. [VOD] [단축성 > 반복적 행위 최소화] 팝업

24. [VOD] [단축성 > 입력 행위 최소화] 입력 필드

25. [VOD] [단축성 > 뎁스 최소화] 주요 서비스

26. [VOD] [단축성 > 뎁스 최소화] 자주 이용하는 서비스

27. [VOD] [반응성 > 다음 선택 행위 유도] 행동유도 버튼 (CTA 버튼)

28. [VOD] [반응성 > 다음 선택 행위 유도] 시그니파이어

29. [VOD] [반응성 > 다음 선택 행위 유도] LNB 메뉴

30. [VOD] [반응성 > 다음 선택 행위 유도] 더보기 버튼

31. [VOD] [반응성 > 다음 선택 행위 유도] 재생 버튼

32. [VOD] [반응성 > 다음 선택 행위 유도] 옵션 버튼

33. [VOD] [반응성 > 다음 선택 행위 유도] 토글 버튼

34. [VOD] [반응성 > 다음 선택 행위 유도] 링크

34 [VOD] [반응성 > 다음 입력 행위 유도] 키패드 입력

35. [VOD] [반응성 > 다음 입력 행위 유도] 화면 인터랙션 전환

36. [VOD] [반응성 > 다음 입력 행위 유도] 리뷰

37. [VOD] [반응성 > 즉각적 선택 행위 인지] 아이콘

38. [VOD] [반응성 > 즉각적 선택 행위 인지] 재생 행위

39. [VOD] [반응성 > 즉각적 선택 행위 인지] 필드

40. [VOD] [반응성 > 즉각적 선택 행위 인지] 키패드

41. [VOD] [반응성 > 현재 위치 상태 인지] 페이지 이름

42. [VOD] [반응성 > 현재 위치 상태 인지] 단계(Step)

43. [VOD] [반응성 > 현재 위치 상태 인지] 로그인 전/후

44. [VOD] [반응성 > 현재 위치 상태 인지] 내비게이션 탭바

45. [VOD] [반응성 > 현재 위치 상태 인지] 탭

46. [VOD] [반응성 > 현재 위치 상태 인지] 새창

47. [VOD] [반응성 > 현재 위치 상태 인지] 시그니파이어

48. [VOD] [반응성 > 현재 위치 상태 인지] 구간 선택

49. [VOD] [반응성 > 현재 위치 상태 인지] 이미지 선택

[2주차]

챌린지 줌 Live 수업:

"단축성, 반응성"

10월14일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 2주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 2주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[3주차]

챌린지 플립드 러닝(Flipped Learning) VOD 수업: "사전방지성, 오류발생감지성, 오류회복성"

1. [VOD] [사전방지성 > 입력 실수 방지] 개념

2. [VOD] [사전방지성 > 입력 실수 방지] 주의사항

3. [VOD] [사전방지성 > 입력 실수 방지] 플레이스 홀더 텍스트

4. [VOD] [사전방지성 > 입력 실수 방지] 시각적 단서

5. [VOD] [사전방지성 > 입력 실수 방지] 필드

6. [VOD] [사전방지성 > 입력 실수 방지] 제한

7. [VOD] [사전방지성 > 잘못된 실수 방지] 비활성화 버튼

8. [VOD] [사전방지성 > 잘못된 실수 방지] 버튼

9. [VOD] [사전방지성 > 잘못된 실수 방지] 메뉴

10. [VOD] [사전방지성 > 잘못된 실수 방지] 페이지네이선

11. [VOD] [사전방지성 > 잘못된 실수 방지] 링크

12. [VOD] [사전방지성 > 잘못된 실수 방지] 필수, 선택 옵션

13. [VOD] [사전방지성 > 잘못된 실수 방지] 드롭다운 버튼

14. [VOD] [사전방지성 > 재확인] 입력

15. [VOD] [사전방지성 > 재확인] 전송 정보

16. [VOD] [사전방지성 > 재확인] 검색 조건

17. [VOD] [사전방지성 > 재확인] 개인정보 보호

18. [VOD] [사전방지성 > 재확인] 챗봇

19. [VOD] [사전방지성 > 지능형 실수 알림] 개념

20. [VOD] [오류발생감지성 > 실시간 알림] 개념

21. [VOD] [오류발생감지성 > 실시간 알림] 인라인

22. [VOD] [오류발생감지성 > 실시간 알림] 피드백 아이콘

23. [VOD] [오류발생감지성 > 실시간 알림] 대화창

24. [VOD] [오류발생감지성 > 메시지] 간결한 용어

25. [VOD] [오류발생감지성 > 메시지] 친절한 표현

26. [VOD] [오류회복성 ] 원상태 회복

27. [VOD] [오류회복성] 되돌아가기 (이전 행위 페이지)

28. [VOD] [오류회복성] 임시저장

29. [VOD] [오류회복성 > 취소] 전송

30. [VOD] [오류회복성 > 취소] 행위

31. [VOD] [오류회복성 > 취소] 클리어 아이콘

32. [VOD] [오류회복성 > 취소] 친절한 표현

33. [VOD] [오류회복성 > 취소] 새창 모달

34. [VOD] [오류회복성 > 취소] 키패드

35. [VOD] [오류회복성 > 초기화] 상세 검색

36. [VOD] [오류회복성 > 초기화] 전체 동의 해제

37. [VOD] [오류회복성 > 초기화] 홈으로 이동

38. [VOD] [오류회복성 > 문제 해결 대안 제시] 재시도

39. [VOD] [오류회복성 > 문제 해결 대안 제시] 사용자 대처 방안

40. [VOD] [오류회복성 > 문제 해결 대안 제시] 시스템 자동으로 오류 수정

41. [VOD] [오류회복성 > 문제 해결 대안 제시] 상세한 설명

42. [VOD] [오류회복성 > 문제 해결 대안 제시] 오프라인 지원 서비스 연계

[3주차] 챌린지 줌 Live 수업: 

"사전방지성, 오류발생 감지성, 오류회복성"

10월21일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 3주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 3주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[4주차] 챌린지 플립드 러닝(Flipped Learning) VOD 수업:"가독성, 논리성, 이해성, 기억성, 변화제시성, 사용자주도권, 시스템 주도권, 대체성, 다중성, 친숙성, 예측가능성, 일관성"

1. [VOD] [가독성 > 간결성] 레이아웃

2. [VOD] [가독성 > 간결성] 여백

3. [VOD] [가독성 > 간결성] GNB

4. [VOD] [가독성 > 간결성] 하단 내비게이션

5. [VOD] [가독성 > 간결성] 버튼 제공 최소화

6. [VOD] [가독성 > 간결성] 폼 필드 최소화

7. [VOD] [가독성 > 간결성] 최소한의 정보 제공

8. [VOD] [가독성 > 간결성] 메뉴 목록

9. [VOD] [가독성 > 간결성] 색상 적용 최소화

10. [VOD] [가독성 > 간결성] 옵션

11. [VOD] [가독성 > 간결성] 안내 문구 최소화

12. [VOD] [가독성 > 간결성] 메시지

13. [VOD] [가독성 > 간결성] 대화창

14. [VOD] [가독성 > 간결성] 썸네일 이미지

15. [VOD] [가독성 > 간결성] 아이콘

16. [VOD] [가독성 > 간결성] 검색창 영역 최소화

17. [VOD] [가독성 > 간결성] 검색 결과 목록 최소화

18. [VOD] [가독성 > 주목성] 정보의 강약

19. [VOD] [가독성 > 주목성] 버튼

20. [VOD] [가독성 > 인식성] 로고 영역

21. [VOD] [가독성 > 인식성] 브랜드 메시지

22. [VOD] [가독성 > 인식성] 상단 메뉴 영역

23. [VOD] [가독성 > 인식성] 하단 내비게이션

24. [VOD] [가독성 > 인식성] 탭

25. [VOD] [가독성 > 인식성] 유틸리티 영역

26. [VOD] [가독성 > 인식성] 검색창 영역

27. [VOD] [가독성 > 인식성] 레이아웃

28. [VOD] [가독성 > 인식성] 링크

29. [VOD] [가독성 > 인식성] 버튼

30. [VOD] [가독성 > 인식성] 폼

31. [VOD] [가독성 > 인식성] 텍스트

32. [VOD] [가독성 > 인식성] 옵션

33. [VOD] [가독성 > 인식성] 이미지

34. [VOD] [가독성 > 인식성] 캐러셀 디자인

35. [VOD] [가독성 > 인식성] 색상

36. [VOD] [가독성 > 인식성] 아이콘

37. [VOD] [가독성 > 인식성] 숫자

38. [VOD] [가독성 > 인식성] 날짜

39. [VOD] [가독성 > 인식성] 블릿

40. [VOD] [논리성 > 정보 제공의 우선 순위] 상단 메뉴, 유틸리티 메뉴

41. [VOD] [논리성 > 정보 제공의 우선 순위] 탭 메뉴

42. [VOD] [논리성 > 정보 제공의 우선 순위] 메뉴 목록

43. [VOD] [논리성 > 정보 제공의 우선 순위] 검색 결과

44. [VOD] [논리성 > 정보 제공의 우선 순위] 화면 영역

45. [VOD] [논리성 > 정보 제공의 우선 순위] 화면 위치

46. [VOD] [논리성 > 유사 속성 그룹핑] 메뉴

47. [VOD] [논리성 > 유사 속성 그룹핑] 폼

48. [VOD] [논리성 > 유사 속성 그룹핑] 화면 영역

49. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 자주 찾는 서비스

50. [VOD] [논리성 > 유사 속성 그룹핑] 기능

51. [VOD] [논리성 > 유사 속성 그룹핑] 부가 기능

52. [VOD] [논리성 > 유사 속성 그룹핑] 메시지

53. [VOD] [논리성 > 유사 속성 그룹핑] 타이틀

54. [VOD] [논리성 > 유사 속성 그룹핑] 날짜

55. [VOD] [논리성 > 유사 속성 그룹핑] 데이터

56. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 버튼 배치순

57. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 항목 및 옵션

58. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 문맥

59. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 아이콘 모양

60. [VOD] [이해성 > 직관성] 목적 지향성 안내

61. [VOD] [이해성 > 직관성] 하단 내비게이션

62. [VOD] [이해성 > 직관성] 메뉴

63. [VOD] [이해성 > 직관성] 메시지

64. [VOD] [이해성 > 직관성] 헤드 타이틀

65. [VOD] [이해성 > 직관성] 서브 타이틀

66. [VOD] [이해성 > 직관성] 검색어 타이틀

67. [VOD] [이해성 > 직관성] 버튼 레이블

68. [VOD] [이해성 > 직관성] 아이콘 레이블

69. [VOD] [이해성 > 직관성] 폼 레이블

70. [VOD] [이해성 > 직관성] 키패드

71. [VOD] [이해성 > 직관성] 로딩

72. [VOD] [이해성 > 직관성] 내용 전달

73. [VOD] [이해성 > 직관성] 전문적 의미 배제

74. [VOD] [이해성 > 직관성] 안내 레이블

75. [VOD] [이해성 > 직관성] 플레이스 홀더 텍스트

76. [VOD] [이해성 > 친절성] 내용 전달

77. [VOD] [이해성 > 친절성] 전문적 의미 배제

78. [VOD] [이해성 > 친절성] 안내 레이블

79. [VOD] [이해성 > 도움말] 플레이스 홀더 텍스트

80. [VOD] [기억성 > 나의 이전 행위 알려주기] 개념

81. [VOD] [기억성 > 입력 행위 부담 최소화] 개념

82. [VOD] [변화제시성 > 시스템 데이터 신뢰성] 개념

83. [VOD] [변화제시성 > 업데이트 시점] 개념

84. [VOD] [사용자 주도권 > 편집] 개념

85. [VOD] [사용자 주도권 > 조작] 개념

86. [VOD] [사용자 주도권 > 제어] 개념

87. [VOD] [사용자 주도권 > 개인화] 개념

88. [VOD] [시스템 주도권 > 행위 제한] 개념

89. [VOD] [대체성 > 다양한 유입 경로] 개념

90. [VOD] [대체성 > 다양한 조작 행위 방식] 개념

91. [VOD] [대체성 > 다양한 탐색 유형] 개념

92. [VOD] [다중성 > 다중 선택] 개념

93. [VOD] [다중성 > 동시 수행] 개념

94. [VOD] [친숙성 ] 개념

95. [VOD] [예측가능성 ] 개념

96. [VOD] [외부적 일관성 > 유사 패턴 ] 개념

97. [VOD] [외부적 일관성 > 제스처 행위] 개념

98. [VOD] [내부적 일관성] 개념

[4주차] 챌린지 줌 Live 수업:

"가독성, 논리성, 이해성, 기억성, 변화제시성, 사용자주도권, 시스템 주도권, 대체성, 다중성, 친숙성,예측가능성, 일관성"

10월28일(월) PM 21시 - PM 23시 30분 (3시간)

1부. 4주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 4주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

https://ebprux.liveklass.com/cu/qzJvCEEK

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

전코치의 사용성 리서치 UX 방법론 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !

© 2024 전코치의 사용성 리서치 UX 방법론

프로덕트 매니저/프로덕트 오너/프로덕트 디자이너를 위한 UI / UX / UX 방법론&프레임워크 소식

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관