카테고리 없음

UI 스터디 - 책 내용 중 실무적인 디테일 꿀팁 모음!(1)

준형이의 일상 2022. 11. 1. 17:38

<UI의 요소>

 

1) 사용자의 '선택' UI 요소( 체크박스~ 드롭다운)

체크박스: 다중 선택이 가능할 때

라디오 버튼: 한 가지 선택만 골라야 할 때 

토글: ON/OFF가 확실한 '동작'과 관련된 상황

드롭다운: 선택지(옵션)가 너~~무 많은 경우

 

체크 박스 vs 토글 

이 상황에서 굳이 토글을 사용할 필요가 있나?!?

 

선택지가 '동작' 과 관련이 없다면, 토글을 사용하지 말자

 

모바일에서는 토글이 오히려 더 편한 상황이 존재한다

 

모바일 화면은 길고 좁기 때문에 세로 공간을 많이 잡아 먹는 체크박스는 오히려 독이 된다

이때는 토글을 사용하자

세로 공간을 너무 많이 잡아 먹는 체크박스

 

드롭다운 방식 결정 시 고려할 점
(알파벳 순 정렬의 불편함)

 

 

사진처럼 옵션이 많을 때는 드롭다운 방식을 선택하는 게 일반적이다.

하지만 이 때 알파벳 순으로 정렬이 필수라서, United States 혹은 Korea를 찾기 위해 스크롤을 많이 해야한다.

이럴 때는 '자동 완성 기능'이 도움을 준다. 아래를 보자

 

 

문제 화면: 너무 많은 드롭박스(세로로 긴 화면도 덤)

 

해결책 2번

 

해결책 3번

 

 

문제 화면 vs 수정 후 화면

 

추가 의문 사항
(날짜 피커도 문제인가...?)

 

<이미지 및 정보 출처>

https://lucy-the-marketer.kr/ko/growth/when-to-use-checkbox-and-toggle-switch/

 

체크박스 VS 토글 스위치, UX 디자인 팁 3가지

체크박스(Checkbox)는 1개 이상의 옵션을 선택할 때 사용한다. 토글 스위치(Toggle Switch) 어떠한 동작을 표현할 때 사용한다. 이번 글에서는 체크박스와 토글 스위치에 대해 알아보고, 언제 각 요소를

lucy-the-marketer.kr

https://brunch.co.kr/@ebprux/113

 

드롭다운 메뉴 사용 UX 원칙

UX 디자인 배우기 #46 | Today UX 아티클UX Planet에 올라온 Nick Babich의 글 UX Design:Drop-Downs in Forms을 전문 번역한 글입니다. 셀렉트 메뉴(select menu) 혹은 드롭다운 메뉴(drop-down menu)는 제대로만 이용하면

brunch.co.kr