UI 컨트롤 (검색, 슬라이더, 드롭다운, 숫자 입력, 취소)

황희윤·2022년 11월 17일
0

새로운 컨트롤을 제멋대로 만들지 않는다

  • 자신만의 새로운 UI 컨트롤을 만들어서 사용자를 괴롭히지 않는다.

  • 필요한 UI 컨트롤은 이미 거의 다 존재한다.

검색은 입력 필드와 '검색'이라고 적힌 버튼으로 구성돼야 한다.

  • 검색 기능에서 검색 버튼과 입력 필드는 필수다.

  • 아이콘은 '돋보기' 아이콘을 사용한다.

  • 모바일 앱에서 검색 탭이 선택되면 포커스를 검색 필드로 이동시킨다.

슬라이더는 수량화할 수 없는 값에만 사용해야 한다.

  • 슬라이더 컨트롤은 구체적인 숫자 값을 설정하는 데 절대 사용해서는 안 된다.

  • 볼륨, 밝기와 같이 구체적인 숫자 값을 설정하기 힘들 때 슬라이더를 사용한다.

  • 슬라이더 컨트롤은 사용자의 포인팅 기기로 쉽게 잡을 수 있도록 적절한 크기로 만든다.

정확한 숫자를 위해서는 숫자 입력 필드를 사용한다.

  • 숫자 입력 필드에는 '숫자'만 입력할 수 있게 만든다(ex. 조금 or 많이 X).

  • 입력이 필요한 항목을 최소화한다(ex. kg, $, 원과 같은 숫자 뒤의 단위 X).

옵션이 많지 않다면 드롭다운 메뉴를 사용하지 않는다.

  • 드롭다운 메뉴는 국가 선택이나 주문 제작과 같이 옵션의 수가 매우 많은 경우에 적합하다.

  • 드롭다운을 클릭해서 열고, 정확한 항목을 찾고자 스크롤하고, 찾았으면 다시 선택하는 과정이 모바일에서는 더 불편하다.

  • 다른 종류의 컨트롤(라디오 버튼, 슬라이더)를 고민해본다.

  • 국가 선택도 단순한 드롭다운보다 검색과 섞어서 알파벳 U를 검색하면 Ukraine, USA, UK 등 리스트로 보여주는 것이 효과적일 수 있다.

  • 아주 긴 드롭다운에서는 검색 기능을 제공한다.

  • 모바일에서는 '피커'(picker) 컨트롤도 고려해본다.

사용자가 파괴적인 액션을 취소할 수 있게 한다.

  • 명령 취소(Undo) 컨트롤을 제공하거나 액션이 확정되기에 앞서 편집 가능하게 해줌으로써 사용자가 그러한 액션들을 되돌릴 수 있게 해준다.

  • 예를 들어 구글의 G메일은 발송 메세지를 보내면 20초 동안 임의적으로 버퍼링에 걸리게 해서 그 동안 사용자가 발송 취소 버튼을 누를 수 있도록 도와줬다.

  • 가장 바람직한 것은 액션이 이뤄진 뒤에 등장하는 배너(혹은 snackbar나 토스트)에 Undo 버튼이 있는 것이다.

  • 사용자가 자신의 실수를 만회할 수 있게 한다.

  • 결제 성공 뒤에 결제 취소 혹은 환불 버튼을 snackbar나 dialog에 만들까?

스크린에서 살짝 벗어난 것들을 고려한다.

  • 유튜브는 일시 정지되면 관련 비디오들의 가장자리를 보여준다.

  • 스크린에서 살짝 벗어난 항목들의 모서리를 보여 주는 것은 사용자에게 좋은 시각적 단서가 된다.

  • 이 방법은 내비게이션할 수 있는 유일한 방법이 돼서는 안 되며, 힌트로만 작동해야 한다.

  • 이 방법은 스크린 공간 활용 측면에서 매우 효율적이다.

출처 : UXer를 위한 101가지 원칙 (윌 그랜트)

profile
HeeYun's programming study

0개의 댓글