UI/UX 원칙

[UI/UX 원칙 #16] 드롭다운 메뉴 UX 원칙 가이드라인

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

2024.09.19 | 조회 888 |
0
|
from.
전민수

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

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

Nick Babich의 글 UX Design: Drop-Downs in Forms을 소개하고자 합니다.

 

셀렉트 메뉴(select menu) 또는 드롭다운 메뉴(drop-down menu)는 적절히 활용하면 매우 유용한 도구입니다. 이 메뉴는 허용된 선택지만을 표시하여 화면 공간을 절약하고, 사용자가 데이터를 잘못 입력하는 것을 방지하는 데 도움을 줍니다.

드롭다운 메뉴는 그룹핑 옵션, 키보드 내비게이션, 플랫폼 간 안정적인 렌더링 등 다양한 멋진 기능을 제공합니다. 디자이너는 여러 목적에 맞춰 드롭다운을 활용해야 합니다. 예를 들어 폼(form) 작성 시 사용자가 입력란에 원하는 옵션을 쉽게 선택할 수 있도록 합니다. 

Select (drop-down) menu
Select (drop-down) menu

사람들이 폼을 작성하는 것을 꺼리는 것은 잘 알려진 사실입니다. 특히 그 과정이 길거나 복잡하게 보일수록, 사용자는 더욱 작성하지 않으려는 경향이 있습니다. 작은 스크린에서 부정확한 입력이 발생할 가능성이 높아지는 상황에서는 더욱 그러합니다. 이러한 문제를 악화시키는 요소 중 하나가 바로 ‘셀렉트 메뉴’입니다.

1. 셀렉트 메뉴와 옵션의 개수

때때로 옵션이 두 개뿐인 셀렉트 메뉴를 만나기도 하고, 또 어떤 경우에는 20개가 넘는 옵션이 있는 셀렉트 메뉴를 볼 때도 있습니다. 두 경우 모두 셀렉트 메뉴가 적절하게 활용되지 않은 사례라고 할 수 있습니다.

1) 옵션이 너무 많은 경우

셀렉트 메뉴의 옵션이 15개 이상으로 증가하면, 사용자가 이를 훑어보거나 원하는 항목을 찾기가 어려워집니다. 긴 드롭다운 리스트는 사용자에게 정말로 불편한 경험이 될 수 있습니다. 옵션을 리스트에 넣어 스크린에서 숨김으로써, 사용자는 리스트 내에서 스크롤을 내려야 하며, 이로 인해 고통스러운 사용자 경험이 발생하고 전반적인 프로세스가 느려지게 됩니다.

여기에 적합한 사례로는 100개 이상의 옵션이 포함된 국가 선택 메뉴를 들 수 있습니다. 사용자가 이러한 메뉴를 전반적으로 파악하는 것은 거의 불가능하며, 원하는 옵션을 쉽고 빠르게 찾는 방법이 없습니다. 보통 미국(United States)을 선택할 때 어려움을 겪곤 하는데, ‘인기 순’으로 정렬되어 있을 때는 미국이 리스트의 상단에 위치하지만, 알파벳 순서로 정렬되면 아프가니스탄이 가장 먼저 나오고 미국은 한참 아래, 아랍에미리트 연합국(United Arab Emirates) 바로 뒤에 위치하게 되기 때문입니다. 그래서 가장 먼저 해야 할 일은 어떤 기준으로 순서가 정해졌는지를 파악하는 것입니다.

사용자가 원하는 항목을 이미 알고 있는 경우, 셀렉트 메뉴 대신 자동 완성 기능이 있는 텍스트 필드를 사용하는 것을 권장합니다. 국가 선택 메뉴의 경우, 이는 효과적인 해결책이 될 수 있습니다. 또한, 프로그램 측면에서 자동으로 위치를 인식할 수 있는지 확인하고, 이를 바탕으로 최대한 정확하게 예측하는 노력이 필요합니다. 정리하자면, 옵션이 15개를 초과하는 경우에는 텍스트 입력란(일반형 또는 자동 완성형)을 고려하는 것이 좋습니다.

“United”를 국가 이름 자동 완성 입력란에 넣으면 다음과 같은 리스트를 보여줍니다
“United”를 국가 이름 자동 완성 입력란에 넣으면 다음과 같은 리스트를 보여줍니다

(1) 효율성 향상
사용자가 원하는 항목을 이미 알고 있을 때, 자동 완성 기능이 있는 텍스트 필드를 사용하면 원하는 옵션을 빠르게 찾을 수 있어 시간과 노력을 절약할 수 있습니다.

(2) 사용자 경험 개선
긴 리스트에서 스크롤하며 찾는 것보다, 텍스트 입력란에 직접 입력하여 결과를 즉시 확인하는 것이 사용자에게 더 직관적이고 편리한 경험을 제공합니다.

(3) 정확성 증가
자동 완성 기능은 사용자가 입력하는 내용을 기반으로 관련 옵션을 제시하므로, 사용자가 실수로 잘못된 항목을 선택할 가능성을 줄입니다.

(4) 유연성 제공
텍스트 입력란은 사용자에게 더 많은 유연성을 제공하여, 특정한 요구 사항이나 선호도에 따라 원하는 옵션을 쉽게 찾을 수 있도록 합니다.

(5) 접근성 향상
특히 모바일 기기와 같은 작은 스크린에서는 긴 드롭다운 메뉴보다 텍스트 필드가 더 접근하기 쉬운 인터페이스를 제공합니다.

2) 옵션이 너무 적은 경우

셀렉트 메뉴의 옵션이 7개 이하인 경우, 표시되는 정보가 너무 적어 문제가 발생할 수 있습니다. 사용자는 적절한 옵션을 보기 위해 먼저 메뉴를 클릭해야 하므로, 이로 인해 불편함을 겪게 됩니다.

이와 같은 경우에는 라디오 버튼을 사용하는 것이 적합합니다. 사용자는 클릭(혹은 타이핑) 없이도 옵션의 개수와 각 옵션의 내용을 즉시 파악할 수 있어야 합니다. 정리하자면, 리스트에 옵션이 7개 이하일 경우에는 라디오 버튼을 고려하는 것이 좋습니다.

(1) 정보의 가시성
라디오 버튼은 모든 옵션을 한눈에 볼 수 있도록 하여, 사용자가 클릭이나 타이핑 없이도 옵션의 개수와 내용을 즉시 확인할 수 있습니다. 이는 사용자가 선택을 더 쉽게 할 수 있게 돕습니다.

(2) 사용자 편의성
사용자가 여러 옵션 중에서 선택할 때, 라디오 버튼은 빠르고 직관적인 방식으로 선택을 가능하게 합니다. 클릭을 통해 메뉴를 열고 다시 선택하는 번거로움을 줄일 수 있습니다.

(3) 정확한 선택
모든 옵션이 명확하게 표시되므로, 사용자는 실수로 잘못된 옵션을 선택할 가능성이 줄어듭니다. 

(4) 간결한 인터페이스
옵션이 적은 경우 라디오 버튼은 화면 공간을 효율적으로 사용할 수 있어, 복잡하지 않고 깔끔한 인터페이스를 유지할 수 있습니다.

2. 셀렉트 메뉴와 레이블

다른 폼 인풋과 마찬가지로, 셀렉트 메뉴에도 항상 입력란 옆에 레이블을 붙여야 합니다(이는 W3C 표준에 따릅니다). 그러나 셀렉트 메뉴 안에 사용자가 ‘정확히 무엇을 선택하는 것인지’ 알려주는 의미 있는 레이블(예: “None”이나 “Please Select”와 같은 포괄적인 표현이 아닌)을 사용하는 것도 중요합니다. 레이블은 옵션 그룹을 완전히 설명할 수 있도록 명확하고 뚜렷해야 합니다.

레이블을 셀렉트 메뉴 안과 밖에 추가하면 사용자가 혼란 없이 액션을 취할 수 있습니다
레이블을 셀렉트 메뉴 안과 밖에 추가하면 사용자가 혼란 없이 액션을 취할 수 있습니다

(1) 접근성 향상
레이블을 통해 사용자는 폼 요소의 목적을 쉽게 이해할 수 있습니다. 이는 특히 시각적으로 제한된 사용자나 스크린 리더를 사용하는 사용자에게 중요합니다.

(2) 사용자 경험 개선
명확한 레이블은 사용자가 선택해야 할 내용에 대해 혼란을 줄여줍니다. 사용자는 어떤 옵션이 필요한지 즉각적으로 인식할 수 있어, 보다 효율적으로 입력할 수 있습니다.

(3) 정확한 선택 유도
의미 있는 레이블은 사용자가 선택해야 할 내용을 구체적으로 안내하므로, 잘못된 선택을 방지하는 데 도움이 됩니다. 일반적인 표현보다는 구체적인 레이블이 더 유용합니다.

(4) 정보의 일관성
셀렉트 메뉴 안과 밖에 레이블을 모두 추가함으로써, 사용자에게 일관된 정보를 제공할 수 있습니다. 이는 전체적인 폼 디자인의 통일성을 높이고, 사용자가 각 요소의 관계를 이해하는 데 도움을 줍니다.

(5) 혼란 방지
레이블이 명확하게 제공되면, 사용자는 어떤 액션을 취해야 할지 혼란 없이 인식할 수 있습니다. 이로 인해 입력 과정이 원활해집니다.

3. 셀렉트 메뉴와 디폴트 옵션

디폴트 값을 설정하는 것은 특정 값을 선택할 것이라고 믿는 비율(90%)이 상당히 높지 않다면 피하는 것이 좋습니다. 

(1) 빠른 입력 경향
많은 사용자들이 폼을 신속하게 입력하려는 경향이 있습니다. 이 경우 디폴트 값이 설정되어 있으면 사용자가 이를 확인하지 않고 넘어갈 가능성이 높아집니다.

(2) 검토 생략 가능성
사용자가 모든 선택지를 차근차근 검토할 것이라고 가정하기 어렵습니다. 특히 바쁜 상황에서는 여러 옵션을 확인하지 않고 빠르게 제출할 수 있습니다.

(3) 실수로 인한 오류
이미 값이 입력된 경우, 사용자는 이를 실수로 지나칠 수 있습니다. 이는 잘못된 옵션을 선택하게 만들고, 결과적으로 의도하지 않은 정보로 폼이 제출될 수 있습니다.

(4) 오류 메시지의 중요성
잘못된 옵션을 선택하여 폼을 제출하는 것보다, 입력하지 않은 란에 대한 오류 메시지를 보여주는 것이 사용자에게 더 안전한 접근법입니다. 이는 사용자가 필요한 정보를 다시 확인하고 수정할 수 있는 기회를 제공합니다.

4. 셀렉트 메뉴와 모바일 기기

셀렉트 메뉴는 데스크탑 브라우저에서는 반드시 나쁜 요소는 아니지만, 모바일 환경에서는 사용자에게 더 많은 불편함을 초래할 수 있으며, 맥락과 관련된 관계가 더욱 희미해질 수 있습니다.

모바일 디바이스는 제한된 스크린 공간을 가지고 있어, 이는 사용자에게 스크롤링할 수 있는 공간이 줄어들고 원하는 옵션을 찾는 데 더 오랜 시간이 걸린다는 의미입니다. 그럼에도 불구하고, 많은 디자이너들은 모바일에서 폼 입력을 위해 더 간단하고 적절한 컨트롤을 사용할 수 있음에도 불구하고 여전히 셀렉트 메뉴를 자주 활용하고 있습니다.

1) 문제 #1. 액션의 수

모바일과 데스크탑에서 셀렉트 메뉴와 상호작용하는 것은 여러 단계를 거치는 과정으로, 일반적으로 필요 이상의 노력을 요구합니다. 다음은 앞서 살펴본 드롭다운 메뉴를 이용한 폼에서 폼을 완성하는 데 필요한 액션의 수입니다.

먼저 컨트롤을 탭 하고, 스크롤을 내려서(보통 한 번 이상), 타깃을 찾고 선택한다. Imagecredits: lukew
먼저 컨트롤을 탭 하고, 스크롤을 내려서(보통 한 번 이상), 타깃을 찾고 선택한다. Imagecredits: lukew

2) 문제 #2. 스크린 공간 활용

셀렉트 메뉴의 UI 인터랙션은 모바일 기기의 스크린을 효과적으로 활용하지 못합니다. 예를 들어, 아이폰에서는 셀렉트 메뉴가 거의 스크린 공간의 50%를 차지하게 되며, 이는 동시에 제스처를 사용할 수 있는 공간도 50%로 제한된다는 것을 의미합니다.

거의 7개의 선택 옵션을 보여주어 전체 스크린의 절반 가까이 차지하고 있습니다
거의 7개의 선택 옵션을 보여주어 전체 스크린의 절반 가까이 차지하고 있습니다

3) 해결책

모든 정보가 첫 번째 섹션에 포함되어 있을 경우, 드롭다운 메뉴보다 더 직관적이고 효율적인 대안적인 컨트롤을 활용하는 것이 사용자 경험을 개선하는 데 도움이 됩니다.

(1) 사용자 편의성
모든 정보가 첫 번째 섹션에 위치할 경우, 사용자는 추가적인 클릭이나 스크롤 없이 필요한 정보를 즉시 확인할 수 있습니다. 이는 입력 과정을 더 간편하게 만들어 줍니다.

(2) 시각적 명확성
드롭다운 메뉴는 선택지를 펼쳐야만 내용을 볼 수 있으므로, 정보가 한눈에 들어오지 않습니다. 대안적인 컨트롤을 사용하면 사용자가 필요한 정보를 더 쉽게 인식할 수 있습니다.

(3) 효율적인 공간 활용
드롭다운 메뉴는 열고 닫는 과정에서 화면 공간을 차지하게 됩니다. 대신 다른 컨트롤을 사용하면 화면 공간을 더 효율적으로 활용할 수 있습니다.

(4) 빠른 액세스
드롭다운 메뉴는 여러 단계를 거쳐야 하므로 시간이 더 걸릴 수 있습니다. 다른 형태의 컨트롤을 사용하면 사용자가 원하는 정보를 빠르게 찾고 선택할 수 있습니다.

해결책 1. 라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)

라디오 그룹(radiogroup)또는 세그먼티드 컨트롤(segmented control)은 상호 배타적이지만 밀접한 관련이 있는 선택지 세트(예: 지역 선택)입니다.

세그먼티드 컨트롤(segmented control)
세그먼티드 컨트롤(segmented control)

(1) 상호 배타적 선택
라디오 그룹이나 세그먼티드 컨트롤은 사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 설계되어 있습니다. 이는 선택지를 명확히 구분하여 사용자가 직관적으로 이해할 수 있게 합니다.

(2) 밀접한 관련성
라디오 그룹이나 세그먼티드 컨트롤은 관련된 옵션들을 그룹화하여 제공하므로, 사용자가 특정 맥락에서 선택할 수 있는 적절한 선택지를 쉽게 찾을 수 있습니다. 예를 들어, 지역 선택과 같은 경우, 서로 연관된 옵션을 제공하여 사용자가 보다 자연스럽게 선택할 수 있도록 돕습니다.

(3) 직관적인 사용자 경험
라디오 그룹과 세그먼티드 컨트롤은 사용자가 선택할 수 있는 옵션을 시각적으로 명확하게 보여줍니다. 이는 사용자가 원하는 옵션을 쉽게 찾고 선택할 수 있도록 도와줍니다.

(4) 빠른 선택 가능: 라디오 그룹이나 세그먼티드 컨트롤은 드롭다운 메뉴보다 사용자가 선택하는 데 필요한 클릭 수를 줄여주며, 즉각적으로 선택지를 보여주기 때문에 빠른 의사결정을 지원합니다.

해결책 2. 스테퍼(steppers)

스테퍼(steppers)는 정수 값을 올리거나 내리는 방식으로 사용되며, 조정해야 하는 양이 적은 경우(예: 승객 수)에 적합합니다.

스테퍼
스테퍼

(1) 정수 값 조정
스테퍼는 주로 정수 값을 증가시키거나 감소시키는 데 사용됩니다. 예를 들어, 승객 수와 같이 자연수로 표현되는 경우에 적합합니다.

(2) 간편한 사용자 인터페이스
스테퍼는 버튼 클릭을 통해 값을 쉽게 조정할 수 있도록 하여, 사용자가 원하는 값을 빠르게 선택할 수 있게 돕습니다. 이는 직관적이고 간편한 사용자 경험을 제공합니다.

(3) 작은 범위의 조정에 적합
조정해야 하는 양이 적은 경우, 예를 들어 승객 수가 1명에서 10명 사이일 때, 스테퍼를 사용하면 사용자가 쉽게 원하는 값을 선택할 수 있습니다. 많은 수치를 입력할 필요가 없기 때문에 스테퍼가 효율적입니다.

(4) 오류 감소
스테퍼를 사용함으로써 사용자는 실수로 잘못된 값을 입력할 가능성이 줄어듭니다. 버튼 클릭으로 값을 조정하므로, 입력 오류를 최소화할 수 있습니다.

해결책 3. 스위치(switch)

스위치(switch)는 간단하게 180도 다른 두 개의 선택지를 제공하는 데 사용됩니다.

스위치
스위치

(1) 명확한 선택
스위치는 두 가지 상반된 상태(예: 켜기와 끄기, 활성화와 비활성화)를 명확하게 나타냅니다. 사용자는 한 번의 클릭으로 즉각적으로 상태를 변경할 수 있습니다.

(2) 직관적인 인터페이스
스위치는 사용자가 이해하기 쉽고 직관적으로 사용할 수 있는 요소입니다. 시각적으로도 두 상태를 쉽게 구분할 수 있어 사용자 경험을 향상시킵니다.

(3) 간편한 조작
스위치를 조작하는 것은 간단하고 빠르며, 추가적인 입력 없이 즉시 결과를 반영할 수 있습니다. 이로 인해 사용자는 필요한 변경을 손쉽게 수행할 수 있습니다.

(4) 효율적인 공간 활용
스위치는 두 가지 선택지를 하나의 간결한 요소로 표현할 수 있어 화면 공간을 효율적으로 사용할 수 있습니다. 이는 특히 모바일 기기와 같은 제한된 공간에서 유용합니다.

해결책 4. 슬라이더(slider)

슬라이더(slider)는 주어진 범위 내에서 값을 세밀하게 조절할 수 있도록 해줍니다.

(1) 정밀한 조정
슬라이더는 사용자가 원하는 값을 세밀하게 조정할 수 있도록 설계되어 있습니다. 이는 사용자가 특정 범위 내에서 원하는 정확한 값을 쉽게 선택할 수 있게 해줍니다.

(2) 직관적인 인터페이스
슬라이더는 시각적으로 사용자가 위치를 쉽게 확인할 수 있도록 하며, 이를 통해 사용자는 실시간으로 값을 조정하는 과정을 직관적으로 이해할 수 있습니다.

(3) 즉각적인 피드백
슬라이더를 조작할 때, 사용자는 값이 변경되는 것을 즉시 확인할 수 있어, 조정 결과를 바로 반영할 수 있습니다. 

(4) 유연한 범위 설정
슬라이더는 최소값과 최대값을 설정할 수 있어, 다양한 상황에서 유연하게 사용할 수 있습니다. 예를 들어, 볼륨 조절이나 밝기 조절 등 다양한 애플리케이션에서 유용합니다.

5. 결론

셀렉트 메뉴는 여러 가지 문제점을 가지고 있습니다. 원하는 항목을 찾기 어렵고, 자연스럽게 옵션을 숨기기도 어렵고, 선택한 값을 편집할 수 없습니다. 그러나 이는 유저 인터페이스 디자인에서 셀렉트 메뉴를 절대 사용하지 말라는 의미는 아닙니다. 보통 프로덕트 매니저나 디자이너가 이를 언제 어떻게 사용해야 할지 모를 때, 나쁜 사용자 경험이 발생하게 됩니다.

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

[모집중] "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호

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