콘텐츠
- 1. 필수 필드를 표시하지 마십시오
- 2. 스피너를 사용하지 마십시오
- 3. 한 가지 유형의 버튼 만 있거나 양식당 하나의 버튼 만있는 것이 좋습니다.
- 4. 청크 필드
- 5. 질문하는 이유와 사용자에게 어떤 느낌인지 생각해보세요.
- 6. 데이트는 별난 작은 친구들
- 7. 개발자 기술로서의 양식
- 8. 양식에 열을 사용하지 마십시오.
- 9. 두 개의 필드를 사용하지 마십시오.
- 10. 친절하세요
양식, 많은 디자이너가 양식보다 더 싫어하는 것은 없습니다. 그들은 반드시 창의력을 발휘하지 못합니까? 양식을 다시 살펴보고 가장 기본적인 양식이 사용자와 소프트웨어 간의 대화라는 것을 이해해야 할 때입니다.
포인트 앤 클릭은 잊어 버리세요. 양식은 디지털 디자이너가 직면하게 될 가장 풍부한 상호 작용을 나타냅니다. 다음 번에 양식이 나올 때는 멋진 CSS 효과를 적용하거나 멋진 jQuery를 추가하는 것이 문제라고 생각하지 마세요. 양식 디자인에는 훨씬 더 깊이가 있습니다.
저는 사용자가 수백 개의 양식을 테스트하고 보험 회사, 휴가 예약 상호 작용 등을위한 복잡한 양식을 설계했습니다. 지난 몇 달 동안 내 양식 중 하나를 사용했을 가능성이 있습니다.
다음은 양식을 디자인하기 전에 배웠 으면하는 교훈입니다.
1. 필수 필드를 표시하지 마십시오
필수 필드를 나타내는 작은 별표를 알고 있습니까? 사용자 테스트에서 여러 번 실패하는 것을 보았습니다. 개념 상 필수 필드는 의미가 없으며 오프라인에 해당하는 필드가 없습니다. 그들은 완성에 대한 좋은 흑백 접근 방식을 제공하기 때문에 개발자에게 좋습니다. 별표 및 필수 필드는 학습 된 동작이므로 실패합니다. 사용자 테스트에서 제가 본 전형적인 동작은 사용자가 상단에서 양식을 작성하고 중지 할 것이 있거나 버튼을 눌렀을 때 완료하는 것입니다.
해결책은 간단합니다. 선택적 필드를 표시하고, 좋은 사용자가 중지해야하는 위치를 표시하고 해당 필드를 완료해야하는지 생각해야합니다.
2. 스피너를 사용하지 마십시오
HTML5는 훌륭하지 않나요? 그것은 놀 수있는 흥미 진진하고 새롭고 반짝이는 도구를 제공합니다. 우리는 새 장난감의 적절성에 대해 생각할 필요가 있습니다. 이제 숫자 필드에는 사용자가 숫자를 순환 할 수 있도록 위쪽 및 아래쪽 화살표가 약간 포함됩니다.
여기에는 두 가지 문제가 있습니다. 첫째, 화살표의 기본 브라우저 표시는 화살표를 매우 작게 만듭니다. 클릭하기가 매우 어색하고 우리 사이에 손가락이있는 지방은 iPhone에서 어려움을 겪을 것입니다. 그것을 Fitt의 법칙이라고하는데, 작을수록 클릭하기가 더 어려워집니다.
하지만 외치는 소리가 들리면 번호 필드에 직접 번호를 입력하면됩니다. 예, 가능하지만 브라우저 디스플레이를 살펴 보겠습니다. 위 / 아래 스피너 화살표는 신뢰할 수있는 친구 선택 상자와 비슷합니다. 처음으로 스피너를받은 사용자는 선택 상자와 유사하므로 입력 할 수 없다고 가정합니다.
내 조언은 그들이 더 일반적인 장소가되거나 브라우저 개발자가 기본 디자인을 분류 할 때까지 명확하게하는 것입니다.
3. 한 가지 유형의 버튼 만 있거나 양식당 하나의 버튼 만있는 것이 좋습니다.
힉스 법칙이라는 약간 알려진 심리학 원리가 있습니다. 힉스의 법칙에 따르면 더 많은 옵션이 제공 될수록 선택하기가 더 어려워집니다. 내가 아는 로켓 과학은 아니지만 명심할 가치가있는 규칙입니다.
좋은 사용자가 선택하도록 도와줌으로써 도움을 줄 수 있습니다. 모든 기본 버튼을 하나의 색상으로 만들고 페이지 당 하나만 사용하면 선택이 더 쉬워집니다. 내가 눌러야하는 버튼은 무엇입니까? 오, 쉽 네요 큰 색깔 이네요
4. 청크 필드
전생에 신경 과학을 공부했고 기억의 심리학, 특히 단기 기억이나 작업 기억을 공부했습니다. 이제 당신이 그것을 말하기 전에; 아니요, 단기 기억력은 7 +/- 2, 4 +/- 1이 아니거나 인간이 3 ~ 5 개의 청크를 말합니다. 인간으로서 우리는 시각적 자극을 평가하는 데 능숙합니다. 제약은 숫자가 적을 때 더 낫다는 것입니다. 양식을 더 작은 그룹으로 묶으면 사용자가 양식에 입력해야하는 내용이 기억에서 나오는 경우가 많기 때문에 평가가 더 쉬워집니다.
필드 그룹의 길이가 약 4인지 확인하십시오.
5. 질문하는 이유와 사용자에게 어떤 느낌인지 생각해보세요.
이것은 아마도 제가 제공하는 가장 직접적인 조언이지만 종종 가장 적게 활용됩니다.
다음을 살펴 보겠습니다.
당신이 묻는 모든 질문에 질문하십시오. 그게 필요 할까? 이 질문을 받으면 기분이 어떻습니까?
종종 비즈니스에서 질문을 할 필요가 있으며 디자이너로서 우리는 얼굴이 파랗게 될 때까지 필요성에 대해 논쟁 할 수 있습니다. 질문을해야합니다. 이 데이터에 대한 비즈니스 요구를 이해하면 종종 타협 할 수 있습니다.
좋은 사용자에게 그 질문을해야하는 이유를 알려 주면 도움이 될 수 있습니다. 해당 데이터의 사용 및 공유에 대해 안심하고 일반적으로 친절합니다.
다시 예를 들면 :
여전히 어려운 질문이지만 우리가 약을 달게했기를 바랍니다.
6. 데이트는 별난 작은 친구들
날짜를 입력하는 것은 진정한 도전 일 수 있으며 피할 수있는 몇 가지 함정이 있습니다. 가장 큰 문제는 오류를 다루는 것입니다.
가장 쉬운 방법은 달력을 시작하는 것입니다. 주가 영국에서는 월요일에, 미국에서는 일요일에 시작된다는 점에 주목할 가치가 있습니다. 사용자가 집중하지 않는 경우 월요일을 의미하는 일요일을 선택하는 것이 좋습니다.
국제 날짜 형식도 언급 할 가치가 있습니다. 미국은 월을 먼저, 일본은 해가 먼저입니다. 따라서 4/5/12와 같은 날짜는 세 가지 방식으로 해석 될 수 있습니다.
그렇기 때문에 선택 상자를 사용하는 것이 가장 좋습니다.
7. 개발자 기술로서의 양식
양식은 개발자와 디자이너를위한 공예입니다. 데이터를 입력하고 대처할 백엔드 코드를 디자인 할 때 발생할 수있는 실수를 이해하는 것은 어려운 일입니다.
여기 간단한 것이 있습니다. 통화 값을 입력합니다. 사용자가 저지를 수있는 실수는 엄청납니다. 사용자가 충족해야하는 데이터 형식을 강제하는 것은 사용자에게 실망스럽고 개발자 측에서는 조금 게으른 일입니다.
방탄 양식을 만드는 것보다 개발자에게 더 나은 도전이 될 것입니다.
8. 양식에 열을 사용하지 마십시오.
양식에서 열을 사용할 때 가장 큰 문제는 흐름입니다. 우리는 상단에서 양식을 시작하고 하단에서 끝납니다. 기둥을 도입 할 때 양식의 흐름이 깨질 수 있습니다.
사용자가 양식을 탭하므로 포커스가 열에서 양식을 탐색하는 방법이라고 가정하지 마세요. 사용자 테스트에서 본 적은 드뭅니다. 대부분의 경우 세부 정보를 입력하고 마우스 / 트랙 패드 / 손가락으로 다음 필드를 클릭 한 다음 세부 정보 등을 입력합니다.
9. 두 개의 필드를 사용하지 마십시오.
대부분의 사람들은 타이피스트를 만지지 않습니다. 사용자 테스트에서 우리는 사람들이 입력하는 동안 키보드를 보는 것을 봅니다.
전화 번호를 입력 할 때 지역 번호와 번호를 추가하는 것과 같이 양식 필드를 분할하면 실제 문제가 발생합니다. 사용자가 필드가 두 개 있다는 것을 알지 못하거나 기억하지 못하므로 첫 번째 필드에 전체 숫자를 입력하십시오. 필드가 특정 문자 수로 제한되는 경우 더 나쁩니다.
전화 번호에 대해 하나의 필드 만 사용하십시오. 번지 / 도로도 마찬가지입니다. 텍스트 입력 상자를 하나만 사용하십시오.
10. 친절하세요
상당히 무례한 오류 메시지가 얼마나 많은지 놀랄 것입니다.
여기 제가 최근에 본 사례가 있습니다.
기꺼이 미래의 날짜를 입력하고 다소 우스꽝스러운 답변을하겠다고 제안하는 바로 그 사실은별로 좋지 않습니다.
다시 한 번 사용자의 입장에 서십시오.이 오류가 표시되는 느낌이 어떻습니까? 괴로운? 더 나쁠 수도 있습니다. 착하게되는 것은 쉽습니다.
더 나은 양식을 디자인 할 수 있도록 다운로드 가능한 유아용 침대 / 치트 시트를 제작했습니다. 더 나은 양식을 디자인하는 더 많은 모범 사례 방법이 포함되어 있습니다.
