[UI/UX 원칙 #9] 폼(Forms) 디자인 14가지 UX 원칙 가이드라인

폼(Forms) 디자인 14가지 원칙

UX Planet에 게재된 Andrew Coyle의 글 Design Better Forms를 소개하고자 합니다.

회원가입 흐름, 멀티뷰 스테퍼, 또는 단순한 데이터 입력 인터페이스 등에서 폼(forms)은 디지털 제품 디자인의 핵심 요소 중 하나로 여겨집니다.

이 글에서는 폼 디자인 시 반드시 지켜야 할 사항과 피해야 할 사항을 중심으로 설명합니다. 이러한 지침은 일반적인 가이드라인이므로 예외가 있을 수 있음을 기억해야 합니다.

1) 폼은 한 열로 만들어야 합니다

여러 열을 사용하면 세로로 읽던 사용자에게 혼란을 줄 수 있습니다.

여러 열을 사용하면 정보의 흐름이 복잡해져 사용자가 각 열의 내용을 쉽게 이해하기 어려워질 수 있습니다. 특히 세로로 읽는 사용자에게는 시각적 혼란을 초래할 수 있으며, 필요한 정보를 찾는 데 더 많은 시간이 소요될 수 있습니다. 이는 사용자 경험을 저해하는 요소가 될 수 있습니다.

2)  폼 레이블은 상단에 정렬합니다

사용자는 레이블이 왼쪽에 정렬된 폼보다 상단에 정렬된 폼을 훨씬 더 선호하는 경향이 있습니다. 또한, 레이블이 상단에 정렬된 폼은 모바일 환경에서도 더 효과적으로 작동합니다. 그러나 다양한 옵션과 많은 데이터를 입력해야 하는 경우에는 왼쪽 정렬된 레이블을 고려하는 것이 좋습니다. 이러한 경우에는 왼쪽 정렬된 레이블이 상단 정렬보다 훑어보기가 더 용이하며, 필요한 길이를 줄이는 데 유리하기 때문입니다.

3) 입력란과 레이블을 함께 묶습니다

레이블과 입력란을 가까이 배치하면 사용자가 각 입력란의 용도를 쉽게 이해할 수 있습니다. 특히, 입력란 사이에 적절한 간격을 두는 것은 시각적 혼란을 줄이고, 사용자가 정보를 빠르게 인식하는 데 도움을 줍니다.

4) 모든 내용을 대문자로 표기하지 않습니다

레이블을 전부 대문자로 작성하면 읽거나 훑어보기가 어렵습니다.

레이블을 전부 대문자로 작성하면 글자의 형태가 단조로워져 시각적으로 구분하기 어려워집니다. 이로 인해 사용자가 정보를 빠르게 인식하거나 이해하는 데 방해가 될 수 있습니다. 대문자는 일반적으로 시각적 강조를 위해 사용되지만, 과도하게 사용하면 오히려 가독성이 떨어지는 결과를 초래할 수 있습니다.

5) 옵션 개수가 6개 이하일 경우, 모든 옵션을 표시합니다

드롭다운으로 옵션을 표시하면 사용자가 두 번 클릭해야 하므로, 선택 과정이 불편해질 수 있습니다. 또한, 옵션이 숨겨져 있어 사용자가 원하는 항목을 찾기 어려울 수 있습니다.

따라서 옵션이 5개를 초과할 경우 드롭다운을 사용하여 공간을 절약하고, 25개를 넘을 때는 검색 기능을 추가함으로써 사용자가 더 효율적으로 원하는 옵션을 찾을 수 있도록 돕는 것이 중요합니다.

6) 플레이스홀더 텍스트를 레이블로 사용해서는 안 됩니다

플레이스홀더 텍스트를 레이블로 사용하면 사용자가 입력 필드의 목적을 명확히 이해하기 어려워질 수 있습니다. 입력 필드가 비어 있을 때는 플레이스홀더가 보이지만, 사용자가 내용을 입력하면 사라지므로 사용자가 어떤 정보를 입력해야 하는지 혼란스러울 수 있습니다. 

7) 체크박스와 라디오 버튼은 스캔 가능성을 높이기 위해 세로로 배치합니다

체크박스를 세로로 배치하면 사용자가 시각적으로 항목을 빠르게 비교하고 선택할 수 있게 도와줍니다. 세로 배열은 눈의 이동이 수직으로 이루어져 훑어보기가 더 쉽고, 각 항목 간의 간격이 넓어져 선택할 때의 혼란을 최소화합니다. 따라서 사용자가 원하는 옵션을 빠르게 찾고 선택하는 데 유리합니다.

8) 행동을 유도하는 버튼에는 해당 행동을 명확히 나타내는 레이블을 사용해야 합니다

행동 유도 버튼이 그 목적을 명확하게 전달해야 하는 이유는 사용자가 버튼의 기능을 쉽게 이해하고 올바른 행동을 취할 수 있도록 하기 위해서 입니다. 명확한 레이블은 사용자가 혼란 없이 클릭할 수 있게 도와주며, 사용자 경험을 개선하고 실수를 줄이는 데 도움이 뒵니다. 또한, 사용자에게 신뢰감을 주고 인터페이스의 효율성을 높이는 데 중요한 역할을 합니다

9) 오류가 발생한 부분은 인라인으로 표시해야 합니다

사용자에게 오류가 발생한 위치를 보여주고 그 원인을 설명해야 하는 이유는, 사용자가 문제를 이해하고 해결할 수 있도록 돕기 위해서입니다. 명확한 피드백은 사용자 경험을 개선하고, 사용자가 실수를 수정하는 데 필요한 정보를 제공하여 전체적인 효율성을 높입니다. 또한, 이러한 접근은 사용자에게 신뢰감을 주고, 서비스에 대한 긍정적인 인식을 형성하는 데 도움이 됩니다.

10) 사용자가 입력란을 모두 채운 후에, 입력 내용의 유효성을 확인하기 위해 인라인 검사를 진행합니다

사용자가 입력하는 동안 유효성을 확인하는 인라인 검사를 사용하지 말아야 하는 이유는, 실시간으로 오류 메시지를 보여주면 사용자가 불필요한 스트레스를 느끼고 입력에 집중하기 어려워질 수 있기 때문입니다. 특히 비밀번호, 사용자 이름, 메시지와 같이 입력이 완료되기 전에는 사용자가 의도한 내용을 완전히 입력하지 않았기 때문에, 중간에 오류를 지적하는 것은 오히려 혼란을 초래할 수 있습니다. 따라서 입력이 완료된 후에 유효성 검사를 진행하는 것이 더 효과적입니다.

11) 기본적인 도움말은 숨기지 않아야 합니다

기본적인 도움말을 노출해야 하는 이유는 사용자가 입력할 때 필요한 정보를 즉시 제공함으로써 입력의 정확성을 높이고, 사용자의 혼란을 줄일 수 있기 때문입니다. 도움말이 입력 중에 나타나면 사용자가 올바른 형식이나 내용을 이해하는 데 도움을 주어, 실수를 예방하고 전반적인 사용자 경험을 개선하는 데 도움이 됩니다.

12) 주요 액션과 부가적인 액션을 구분합니다

주요 액션과 부가적인 액션을 구분하는 이유는 사용자가 중요한 작업에 집중할 수 있도록 돕기 위해서입니다. 주요 액션은 사용자가 수행해야 할 핵심 작업을 나타내며, 부가적인 액션은 선택 사항이나 보조적인 기능을 나타냅니다. 이러한 구분은 인터페이스를 명확하게 하고, 사용자가 어떤 작업을 우선적으로 수행해야 하는지를 쉽게 이해할 수 있도록 합니다. 

13) 입력란의 길이를 사용하여 입력 내용을 유도합니다

입력란의 길이가 입력해야 할 답변의 길이를 암시하는 이유는 사용자가 필요한 정보를 보다 쉽게 입력할 수 있도록 돕기 위해서입니다. 특히 전화번호나 우편번호와 같은 정해진 형식이 있는 경우, 입력란의 길이를 통해 사용자는 예상되는 글자 수를 인지하고 올바른 형식으로 입력하려는 경향이 생깁니다.

14) 관련된 정보를 그룹화합니다

사용자가 정보를 묶음으로 인식할 수 있는 이유는 인간의 인지 과정에서 관련된 정보들을 함께 처리하는 것이 더 효율적이기 때문입니다. 지나치게 긴 폼은 사용자가 필요한 정보를 찾는 데 어려움을 겪게 하고, 결과적으로 혼란을 초래할 수 있습니다. 따라서 논리적인 그룹을 만들어 정보를 체계적으로 배열하면 사용자가 폼을 더 쉽게 이해하고, 입력 과정을 원활하게 진행할 수 있도록 도와줍니다.

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

[모집중] "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 디자인 가이드라인 수강 신청 시 주의 사항

플립드 러닝(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