사용자로부터 숫자를 얻는 가장 좋은 방법은 무엇입니까?

Question

나는 작은 숫자 목록 [1..20], 어떤 종류의 제어를 사용자에게 그의 선택을 신뢰하는 것을 조언 할 것인지 궁금했다.

NumericUpdown 컨트롤을 생각하고 있었지만 WebForm에는 존재하지 않으며 문제를 악화시키기 위해 Pylons 응용 프로그램 (Python Framework)에 배포하고 있습니다.

드롭 다운 컨트롤이 충분하다고 생각하십니까? 나는 여전히 숫자 커피 컨트롤이 훨씬 직관적이고 사용자의 관점에서 사용하기 쉽다고 생각합니다.

SO 커뮤니티의 의견을 좋아하고 모범 사례에 대해 조언 할 것입니다.

정말 고마워!

편집 : Yui 라이브러리와 Webhelpers 라이브러리를 사용하고 있으며 가장 빈약 한 지식을 사용하고 있다고 언급하는 것을 잊어 버렸습니다.

Answer 1

사용자가 주로 키보드와 상호 작용하는 경우 한도에 대한 테스트가있는 정기 편집 상자 만 고려하십시오. 아래쪽 화살표를 두드리는 것보다 다른 숫자를 선택하는 것이 훨씬 쉽습니다.

마우스 기반이고 공간이있는 경우 버튼 또는 라디오 세트의 그리드가 빠릅니다.

키보드 기반이라면 Jakob Nielsen은 Alertbox 기사에 썼습니다. 드롭 다운 메뉴 : 드물게 사용하십시오,이주의 사항 :

피하기위한 디자인

드롭 다운 메뉴에는 장점이 있습니다. 첫째, 화면 공간을 보존합니다. 또한 법적 선택 만 표시하기 때문에 사용자가 잘못된 데이터를 입력하는 것을 방지합니다. 마지막으로, 표준 위젯이기 때문에 (불쾌한 위젯이라도) 사용자는 드롭 다운 메뉴를 처리하는 방법을 알고 있습니다.

이러한 장점에도 불구하고 디자이너가 드롭 다운을 자주 사용하면 웹 유용성이 증가 할 것입니다. 이를 위해 다음은 피해야 할 디자인의 몇 가지 예입니다.

• 국가 약어 메뉴, 미국 우편 주소와 같은. 스크롤 드롭 다운 메뉴에서 상태를 선택하는 것보다 사용자가 "NY"를 입력하는 것이 훨씬 빠릅니다. 제한된 옵션이있는 필드에 대한 자유 형식 입력은 백엔드에서 데이터 검증이 필요하지만 유용성 관점에서 볼 때 종종 가장 좋은 방법입니다. (이것은 가이드 라인 #178입니다 전자 상거래 유용성 우리가 상태 드롭 다운이있는 체크 아웃 양식에서 관찰 한 많은 오류 때문에.)

• 사용자에게 잘 알려진 데이터 메뉴, 출생의 달 및 연도와 같은. 이러한 정보는 종종 사용자의 손가락에 연결되어 있으며 메뉴에서 이러한 옵션을 선택 해야하는 것은 정보를 입력하기위한 표준 패러다임을 중단하고 다음 예제에서 볼 수 있듯이 사용자를 위해 더 많은 작업을 만들 수도 있습니다.

Answer 2

드롭 다운은 정상적이고 작은 숫자 범위이며 범위의 양쪽 끝에있는 숫자에 빠르게 액세스 할 수 있습니다. 사용자는 Firebug 또는 무언가를 사용하여 드롭 다운의 선택한 값을 변경할 수 있으므로 제공된 숫자가 범위에 있는지 확인하십시오.

Answer 3

친절한 대답에 감사드립니다.

유용성 테스트에서 나는 그것을 알 수 있습니다

1. NumerIcupdown 컨트롤 AKA NumbersPinner는 작은 범위 내에서 숫자를 선택하는 데 가장 적합합니다.

2. 검증 된 텍스트 상자는 다수로 들어가는 데 효과적입니다.

3. 드롭 다운 메뉴는 드롭 다운 길이 (넷북 사용자? 휴대 전화 사용자)로 인해 1-10 예를 들어 더 적은 숫자 범위에만 적합 할 수 있습니다.

4. 라디오 버튼의 그리드는 사용자가 전체 화면 길이를 스캔하여 번호를 선택해야하므로 드롭 다운 메뉴만큼 좋지 않습니다.

Firebug를 사용한 숫자 변경을 방지하기 위해 검증에 관해 Damien에게 자신의 팁을 얻습니다.

Answer 4

NumericUpdown 스타일을 선호하는 경우 JavaScript를 사용하여 간단한 버전을 쉽게 만들 수 있습니다. 나는 jQuery로 그것을 해냈으므로 Yui와 함께하는 것에 대한 구체적인 내용을 제공 할 수는 없지만 일반적으로 내가 구현 한 내용은 다음과 같습니다. 기본값이 사전 설정된 표준 텍스트 상자를 작성하면 ReadOnly로 설정됩니다. 버튼을 가중 및 아래로 추가하고 원하는 방식으로 스타일을 지정합니다 (나는 상자 왼쪽에있는 Divs를 오른쪽 위로 올렸습니다). 각 버튼 세트에 클릭 이벤트를 추가하여 텍스트 상자의 값을 늘리거나 줄입니다. 스크립트에서 값의 범위를 제한하고 입력을 유효성을 확인하여 이전에 조언 한대로 변경되지 않도록 확인하십시오. 나는 이것에 대해 전문가가 없기 때문에 더 쉬운 방법이있을 수 있습니다.