2024. 12. 30. 11:21ㆍ홈페이지 제작 팁과 정보
날짜 선택기는 사용자가 빠르고 직관적으로 날짜를 선택할 수 있어야 합니다. 이 구성 요소는 입력 필드와 달력으로 구성됩니다.
먼저 입력 필드에 대한 디자인 권장 사항부터 살펴보겠습니다.
1. 입력 유연성 제공
사용자가 달력을 사용하는 것 외에 날짜를 수동으로 입력할 수 있도록 하세요. 사용자가 입력을 시작하면 사용자의 노력 없이 자동으로 일, 월, 연도 간 전환이 이루어져야 합니다. 따라서 월, 일, 연도를 별도의 입력 필드로 분리하는 것은 권장하지 않습니다.
2. 날짜 선택용임을 명확히 하기
필드 레이블과 함께 달력 후행 아이콘을 사용하여 날짜 선택용임을 표시합니다.
3. 기존 형식 사용
직관적이고 익숙한 날짜 형식을 사용하세요. 디자인하는 지역의 규범을 고려하세요. 예를 들어, 미국에서는 MM/DD/YYYY 형식이지만 유럽에서는 DD/MM/YYYY 형식입니다. 인라인 플레이스홀더를 사용하여 사용자에게 형식을 알려주세요.
4. 사용자 입력을 즉시 유효성 검사하여 오류 방지
인라인 오류 유효성 검사 기능을 제공하여 사용자가 2월 31일과 같이 불가능한 날짜를 입력하면 이를 알려주세요. “잘못된 날짜"와 같은 일반적인 오류 메시지를 사용하지 말고 문제를 명확하게 설명하는 오류 메시지를 작성하세요.
5. 접근성 표준 준수
키보드 입력 및 탐색을 지원합니다. 화살표 키를 사용하여 날짜를 변경할 수 있도록 허용합니다. 사용자가 데이터 입력 시 데이터를 복사하여 붙여넣을 수 있도록 허용합니다.
6. 현재 날짜 미리 선택
예약 서비스를 디자인하는 경우 기본 날짜를 현재 날짜로 설정하여 사용자의 시간을 절약하세요.
이제 캘린더 위젯에 대해 이야기해 보겠습니다.
7. 선택한 날짜에 대한 명확한 시각적 피드백 제공
날짜 선택기가 화면에서 쉽게 보이도록 하고 사용자가 선택한 날짜(또는 날짜)를 쉽게 식별할 수 있도록 하세요. 대비되는 색상을 사용하여 선택한 날짜가 눈에 띄도록 하세요.
캘린더 컨텍스트에서 선택한 날짜를 인용하여 사용자가 올바른 날짜를 선택했는지 확인할 수 있도록 하는 것이 좋습니다.
8. 사용자가 월과 연도를 쉽게 탐색할 수 있어야 합니다.
사용자가 정확한 월과 연도를 빠르게 선택할 수 있어야 합니다.
UI 컨트롤을 통해 사용자는 다음/이전 달 사이를 이동할 수 있을 뿐만 아니라 다른 범위에서 월/연도를 선택할 수 있어야 합니다.
9. 불가능한 날짜 비활성화
날짜 범위에 제약 조건이 있는 경우 해당 범위를 벗어난 날짜를 비활성화합니다. 예를 들어 호텔 예약 서비스를 디자인하는 경우 과거 날짜를 활성 상태로 둘 필요가 없습니다.
10. 반응형 디자인
날짜 선택기는 모바일과 데스크톱 사용자에게 동일하게 잘 작동해야 합니다. 날짜 선택기가 반응형이고 다양한 화면 크기와 해상도에서 잘 작동하는지 확인하세요. 아래 그림과 같은 간단한 UI 구성 요소를 사용하여 이 목표를 달성할 수 있습니다.
출처:
https://uxplanet.org/design-perfect-date-picker-55f66f13a5f2
'홈페이지 제작 팁과 정보' 카테고리의 다른 글
| 결제 버튼 디자인 고려사항 (0) | 2025.01.03 |
|---|---|
| UX전략 정의 (0) | 2025.01.02 |
| 2024년 UX/UI 디자인 방향 (4) | 2024.12.27 |
| UI의 탭디자인 방법 (0) | 2024.12.26 |
| UI 디자인의 그림자 표현 방법 (0) | 2024.12.24 |