brunch

매거진 디자인 탐구생활

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Potatohands Feb 06. 2023

5.날짜 인풋 폼 필드

[1]인풋컨트롤

날짜 입력 필드는 반드시 모호하면 안되고 작업을 올바른 디자인 패턴으로 완료 할 수 있도록 디자인 되어야한다. 잘못된 날짜 입력 디자인은 사용자들이 사용하면서 스트레스를 받거나 답답할 것이다. 더 최악인 것은 만약 사용자가 잘못된 날짜를 선택하게되면 이에 따라 출력해야하는 전체 값을 불러오는 데 실패 할 수 있다. 예를 들어 만약 당신이 새로운 쇼의 티켓을 확인하려고 하는데 당신이 샀던 다른 날짜의 티켓만 보인다면 기분이 어떨 것 같은가?

모바일 사용자들과 글로벌 유저들을 고려하여 작지만 근본적인 인풋 방법을 개선해야한다. 이 아티클에서는 인풋 패턴과 에러 핸들린 그리고 인터네셔널 날짜 인풋 필드에 대해서 이야기해보려고한다.

1.날짜 입력 패턴

캘린더 픽커들은 한달 날짜 전체를 보여주고 조작할 수 있다. 캘린더 UI 는 전형적으로 보통 요일을 의미하는 영문 또는 한글의 요일이 맨 위에 위치한다. 이것은 탁상 달력이나 벽걸이 달력과 비슷하다.

캘린더 픽커는 1년 이내의 오늘 날짜 근방의 이벤트를 선택하기 위해 사용되어야 한다. 그러나 사용자가 너무 먼 날짜를 캘린더뷰를 사용해서 선택하게 한다면 원하는 날짜를 선택하기에는 어려울 것이다. 이럴 경우 캘린더 뷰가 아닌 연도를 선택 할 수 있도록 한다.

캘린더 픽커는 특히 날짜 범위를 선택해야할 때 유용하다. 2달을 양옆으로 펼쳐 둘 수 있다.

- 스크롤 날짜 픽커는 모바일에서 자주 적용된다.

스크롤 픽커의 경우 날짜가 많은 경우 고를때 짜증이 날 수 있다. 스크롤을 좁은 뷰에서 조작 하다보니 선택하는데 느리고 효율적이지 않다. 날짜의 경우 직접적으로 사용자가 선택 할 수 있도록 하는게 낫다.

투두리스트 앱에서 사용자가 마감 날짜를 입력해야할대 끝이 없는 스크롤링리스트를 보여줘보자. 만약 마감이 월~일요일 그 주에 있다면 다행이지만 만약 몇 주 뒤라면 스크롤링 뷰는 날짜를 찾는데 시간이 많이 걸리게된다. 이런경우 사용자가 날짜를 타이핑할 수 있도록 하는 것이 더 쉽다.

- 날짜 필드에 드랍다운 버튼을 연도, 달, 일자를 구분하여 넣는 것은 불필요한 단계이다. 인터렉션 비용이 드는 과정으로 클릭도해야하고 스크롤도 해야한다. 이런 경우 타이핑을 할 수 있도록 안내해라.

- 날짜를 입력하는 것은 가장 기본적인 날짜 입력 방법이지만 아직까지는 거의 모든 케이스들에서 가장 효율적이다. 특히 한참 전( 예:생일) 또는 후의 날짜를 입력해야할때 유용하다. 사용자가 날짜를 타이핑 할 수 있도록 허용해라.

2.날짜 입력 디자인 가이드 라인

- 제한적인 날짜만 선택 할 수 있는 경우라면 선택가능한 날짜를 리스트로 제공한다.

간혹 사용자들이 몇개의 날짜만 고를 수 있는 경우들이 있다. 예를 들어 식료품 배송을 고르는 온라인 쇼핑 서비스의 경우 고객이 온라인으로 주문할때 배송 일정을 선택 할 수 있다. 비어 있는 날짜 필드 또는 캘린더 피커를 제한없이 보여주는 것보다 가능한 일정만 리스트로 날짜를 보여줘라. 어떤 날짜를 선택 할 수 없다면 그레이 박스 처리하고 선택할 수 없도록 한다. 또는 선택 불가 날짜는 보여주지 않을 수도 있다.

일반적으로 10개 이상의 날짜를 선택 할 수 있다면 이 방법을 추천하지 않는다.

10개 이상을 스크롤링하게하는 것은 지루하게 할 수 있다.

-사용자가 특별한 양식의 날짜를 입력하도록 요구하지 않는다.

어떤 포맷이든 사용자가 날짜를 입력하는 방식으로 선택할 수 있다. 대쉬, 스페이스, 슬래쉬, 점을 연도, 월, 날짜사이에 적용 할 수 있다. 어떤 방식으로 입력하던 날짜는 인식되어야한다. 또는 왼쪽에 0을 쓰는 경우 특별하게 입력방식에 대한 안내가 없이 인식을 못하는 경우들이 있다. 2022-9-7이라고 입력하면 인식이 안되고 2022-09-07로 입력해야 인식한다. 0을 붙이든 안붙이든 다 인식되도록 하는 것이 좋다.

-에러는 적절하게 알려준다.

만약 사용자가 날짜를 완전 잘못 입력했다면 예를 들어 11월 81일 2017년으로 입력했다면 이것은 분명한 실수이다. 이런 실수가 있을 경우 피드백과 제안을 함께 주어 문제를 해결 할 수 있도록 안내한다. 예 : 날짜는 31일까지 입력 할 수 있어요. 다시 한번 확인해주세요.

-아이러니한 날짜 옵션은 제거한다.

사용자가 아이러니한 날짜를 고르지 못하도록 방지한다. 예를 들어 150세 이상인 경우는 거의 없기 때문에 그 150세 이상의 연도가 입력되는 경우 잘못입력된 정보가 아닌지 한번 더 알려준다. 사용자는 출발일자를 도착일자보다 더 미래의 날짜로 선택 할 수 없다. 출발일을 미래 날짜로 선택하려고한다면 가능하지 않음을 알려주고 출발일과 도착일을 다시 선택 할 수 있도록 안내한다. 출발일자를 선택하고 나면 도착일자를 선택하게 할때 출발일자의 과거 일자는 선택 불가하도록 그레이박스 처리하는 방법이 있다.

-사용자가 조작한 내용을 보존한다.

만약 같은 날짜의 정보를 다른 부분에 입력해야하거나 나중에 입력해야한다면 여러번 입력하게하지 않는다.

-날짜 범위를 일관되게해라.

만약 11월과 12월이 출발 일정을 선택하는데 보여졌다면 도착일자를 선택 할때 12월에서 1월로 화면을 바꾸지 말아라. 사용자가 조작했을땐 바뀌어야하지만 알리지 않고 갑자기 바뀌게되면 바뀐 월을 인지하지 못한 사용자는 원래 선택하려던 날짜를 실수로 선택하게 할 수도 있다.

- 만약 당신의 사이트가 전세계의 사용자를 대상으로 제공되는 서비스라면 분명하고 이해할 수 있도록 날짜포맷이 제공되어야한다. 아시아 국가에서는 영문으로 표기되는 월을 이해하지 못한다. November -> 11 로 표기한다.

날짜 입력 필드는 문화에 따라 다를 수 있다. 같은 날짜여도 익숙한 표기 방식이 다르다. “10/11/2016” 날짜가 미국인에게는 11th of October 2016, 몇몇의 유럽인들에게는 November 10th로 받아들여질 수 있다. 그렇기 때문에 반드시 년, 월과 일을 구분하는 라벨을 표기한다.

날짜와 구분하기 위해 월은 스펠링을 반드시 적는다.

정확하게 월에 해당하는 영어 스펠링을 적는다. 한국의 경울 2022 1 이 아닌 1월로 '월'을 꼭 표기한다.

결론

날짜 입력 패턴은 다 똑같이 디자인되면 안된다. 디자인 패턴에 따라 적절한 양식이 적용되어야한다. 텍스트로 입력해야하는지 또는 전세계 사용자가 모두 이해 할만한 형식인지 고려해야한다. 애매모호한 날짜 입력 방식을 피하고 사람들이 서비스를 이용하는 동안 불편을 느끼지 않도록 디자인한다. 에러를 방지하기 위해서 위의 가이드 라인들을 따른다.

날짜 입력 포맷 필드는 별것 아닌 디테일로 보일 수 있다. 그러나 작은 인터렉션 작동 하나로 인해 잘못된 값을 적용하게 될 경우 더이상 진행이 되지 않는다.

[1] 인풋컨트롤

1.체크박스 vs 라디오버튼
2.토클스위치 가이드라인

3.폼에서 체크박스 vs 스위치

4. 스탭 UX UI 입력 디자인 가이드라인

5. 날짜 입력 폼의 UX 디자인 가이드라인

------아래는 앞으로 번역하며 공부할 내용------

6. 스플릿 버튼 (드랍다운 또는 다른 기능 선택버튼)정의

7. 슬라이더, 노브 (동그란 벨브모양 컨트롤러는 왼쪽 오른 쪽으로 돌릴 수 있는 것), 메트릭스 (x,y 도표 위에 있는 선을 컨트롤 하는 것)

8. 체크 리스트 모바일 입력 필드

9. 모바일 디바이스에서 쉽게 입력할 수 있는 방법

[2] 폼과 위자드