체크박스가 너무 많을때!
기획상 체크박스가 너무 많아 디자인이 지저분할때 어떻게 해야할까?
한윤석 (두블링 DOBLING, UI/UX 디자이너)
2년차 주니어 디자이너에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 제가 경험한 디자인 인사이트를 업로드 합니다.
오늘은 기획상 체크박스가 정말 많이 필요하여 디자인상 체크박스가 많아 지저분해 보일때 어떻게 디자인을 가져가는게 좋을지에 대하여 알아보시죠!
체크박스가 너무 많을때!
체크박스 디자인 레이아웃
문제점
모달에서 다양한 체크박스를 중복 선택해야하는 기획상 어쩔 수 없는 상황이 생겼을 경우 어떻게 하면 좋을까요?
체크박스를 그대로 써야할지 다른 ui를 사용해야할지 고민이 많았습니다. 레이아웃도 어색하고 사용성이 떨어지죠.
항상 디자인을 할때 느끼는 거지만 사용성을 극대화하면 심미성또한 좋아지는 것 같습니다. 현재 모달에서는 사용자가 사용하려고하는 체크박스를 체크했을때 정보 나열이 많아 선택하려고하는 정보를 체크하기 어렵고 몇개가 있는지 선택지의 개수를 바로 가늠하기가 어렵다는 점이 있습니다.
7개 정도의 선택지를 넘어섰다면 다른 ui를 가져와서 디자인하는게 좋을 것 같습니다.
해결
체크 박스 대신 칩 형태의 디자인을 사용하였습니다.
또한 상하 정렬이 아닌 좌우 정렬을 두어 스크롤을 길게 가져가지 않도록 사용성을 높였습니다.
체크박스가 아닌 칩 ui를 사용하였을때 장점
개수 인지, 시각적 부담 감소
체크박스 보다 칩형태로 디자인을 할 경우 몇개 정도인지 개수를 미리 인지하고 가늠할 수 있습니다.
또한 체크박스에 비해 칩 형태는 시각적 부담이 감소하여 사용자에게 부담을 덜 주는 효과가 있습니다.
그래서 원하는 테스크를 하는데 속도가 더 빠르고 사용성이 올라갑니다.
공간 확보
칩 형태는 체크박스 보다 공간 확보를 더 쉽게 할 수 있습니다.
위 이미지를 보면 체크박스를 두는 것 보다 가로 확보가 잘 되어 있다면 칩을 쓰는게 눈에 더 쉽게 들어고 공간 확보가 더 잘 되는 것을 알 수 있습니다.
