웹 디자인: 더 효율적으로 작성 하는 양식

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

인터넷 양식을 작성 사용자 등록 및 로그인, 쇼핑, 등 거의 모든 사용자의 일일 체험 이며, 모든 형태의 다양 한 작성 해야. 사용자가 위해, 양식을 요구 및 웹 사이트 시스템에 필요한 데이터를 완료 하는 사용자 간의 대화형 양식이 된다. 양식 디자인의 기본 목표는 또한 명확 하 게: 신속 하 게 사용자를 확인 하 고 효율적이 고 쉽게 완료.

디자인 목표는 명확 하 고, 다음 다음 내용, 조직, 프로세스, 양식 요소 제어 및 상호 작용, 자세히 등의 양식에서 양식을 디자인 하는 방법.

폼의 요소

전에 우리 테이블 가용성을 개선 하는 방법을 보면, 일반적인 형태의 요소에 간단히 살펴보겠습니다 그리고 여기 우리가 요약 거 야:

태그: 게 사용자 폼에 대 한 문제는 무엇입니까?

입력된 상자: 대답 정보; 사용자 작성 제공

작업: 사용자가 폼, 즉 사용자가 클릭 한 단추 또는 링크를 수행 하는 작업;

도움말 텍스트: 양식; 작성에 도움이

입력 피드백: 사용자 입력에 피드백을 주고, 올바른 또는 잘못;

폼의 가용성을 향상 시키기 위한 팁

합리적인 조직 정보 콘텐츠

어떤 형태의 필요 작성, 불필요 한 양식 항목을 제거 하 고 폼의 내용을 결정 양식을 작성 하는 사용자의 목적을 고려 하십시오. 어떻게 구성 합니까? 테이블 항목은 위쪽에서 아래쪽, 나열 아니지만 조직 통해 특정 한 논리에 따라 폼의 내용에 따라 다른 콘텐츠 그룹으로 나누어 다른 주제. 동시에 각 논리 그룹과 같은 주제는 논리적 순서 또는 사용자-친숙 한 패턴 뿐만 아니라 테이블 항목의 주문, 사용자가 탐색 하 고 자유롭게 작성. 테이블 슬립, 또한 다른 웹 페이지, 비슷한 철거 작업으로 분해 될 수 있는 경우 사용자가 단계적으로 입력 하자.

새로운 질서를 만들 때 1.0 시스템, 브랜드, 폼의 내용을 논리적으로 두 개의 콘텐츠 그룹으로 나뉩니다: 기본 정보 (중요/필수) 및 추가 정보 (보조/옵션), 라인, 나누어 콘텐츠 그룹을 분리 구조와 쉬운 검색 취소. 고려 하면 콘텐츠 그룹을 구별, 당신은 적은 시각적 정보를 사용 하 여 고려해 야 하 고 너무 많은 시각적 정보 산만, 양식에 시각적 소음을 많이 발생 될 수 있습니다.

새로운 바이 통장, 양식 콘텐츠, 여러 테마는 동시에, 웹 페이지 정보를 너무 크면, 그래서 명확한 경로 단계를 제공 하는 사용자에 게 단계별 형태를 구성 하는 여러 웹 페이지를 사용 하 여 명확 하 고 간단. 채울 때 사용자는 긴장과 혼란을 피하기 위해 프로세스 지침을 제공 합니다.

두 가지 간단한 형태 강조 하이라이트

데이터의 사용자의 사용, 따라 하지 자주 사용 하거나 전문 사용자에 게 제공 하는 고급 양식 항목을 숨기려면 적절 한입니다. 예를 들어 브랜드 1.0 새로운 창조적인 양식, 사람들의 90% 노출 링크 채우기, 다음 기본 모니터링 실행 하지 않는 단순 형태의 그래서 유지 대부분의 사용자가 신속 하 게 완료, 소수 사용자의 요구를 충족 시킬 뿐만 아니라 많은 양식 사용자의 불안을 피하기 위해.

3 명확한 탐색 라인

기본 원리를 해야 양식 구조와 경로 설계 하는 방법에 대 한 생각: 처음부터 끝까지 명확한 탐색 라인을 제공. 사용자의 검색 라인 눈 움직이는 악기 실험에 의해 검사 될 수 있습니다. 레이블 맞춤 같은 사용자의 브라우징 라인이 입력된 상자 등의 레이아웃에 영향을 줍니다. 세로 단일 경로 제공 사용자 주의 줄일 수 있도록 있습니다 수 있습니다 빨리 질문에 대답을 여는 작업을 완료 하는 데 최소 시간.

다음과 같은 이유 (www.etre.com)에서 제공 하는 데이터 그래프 추적 눈 운동 같은 양식을 각 요소 수직 축 구성, 단일 경로 제공 합니다 사용자가 분명 검색 라인, 신속 하 게 질문에 응답 수 있습니다. 다른 그림, 곡선된 눈 운동으로 프로세스의 완료 양식 문제를 다루는 쉽게 단일 경로 사용 합니다.

4 주요 흐름을 원활 하 게 되도록 사용자 장면 고려

우리가 양식을 디자인, 우리는 분명 선형 단계를 정의 하지만 우리가 거의 실제로 구현. 주요 프로세스 중단 되지 않으면, 해결 하기 위해 요소를 포기 하는 사람들이 하면 되도록 사용자 시나리오를 고려 하십시오. 예를 들어 중국 가맹점 은행 카드 번호 비밀 번호 결제 과정, 3 양식 단계 나누어: 작성 은행 카드 번호에서 입력 다른 확인 정보, 결제 성공. 하지만 사용자 채우고 카드 번호와 다른 인증 정보, 일일 한도 초과 하는 지불, 이전 과정은, 발견은 종종 중단 사용자 지불 과정 후 새 웹 페이지, 중국 은행 가맹점 홈 → 온라인 개인 뱅킹 로그인 했다 → 선택 카드 (카드 번호, 암호를 쿼리, 추가 코드) 로그인 → 온라인 결제 → 온라인 결제 금액 관리 금액 조정, 다시 다시 지불, 두 작업 흐름에서 전환할 사용자 수, 사용자가 다양 한 토스 수 있습니다. 디자인의 디자인은 매우 친밀 한, 후 정보 팁을 주고, 동시에 사용자가 현재 프로세스의 운영 비용의 크게 사용자를 저장 하는 동안 지불 프로세스 중단을 피하기 위해에 제한을 설정할 수 있습니다.

새 광고를 만들 때 선택 자신의 채널, 채널, 그리고 사용자의 현장, 옆에 있는 드롭다운 선택 상자를 고려 하는 디자인 타임에 "새로운 채널"을 추가, 새로운 채널을 만들, 추가 페이지에 새로운 추가를 해야 원하는 채널 없는 경우 버튼, 사용자에 게 편리를 제공, 새로운 광고를 줄이고 조금 흐름을 중단.

5 적절 한 레이블 정렬 선택

"입력된 상자 레이블 해야 위쪽, 오른쪽, 왼쪽, 또는 입력된 상자에서"? 폼을 디자인할 때 가장 일반적인 문제가입니다. 많은 실험과 (Matteo Penzo의 안구 운동 실험, 루크 Wroblewski 루크 Wroblewski의 결과, 비탈리 프리드먼의 웹 폼 디자인 등록 양식)이이 주제에 대 한 연구 모두는 각 메서드에 서로 다른 장단점, 구체적인 목표와 다른 요인 고려 되는 것을 나타냅니다.

마테오 Penzo의 안구 운동 실험 상위 태그 레이블 입력 상자 이동 50 밀리초 걸립니다, 발견 10 배 배 왼쪽 맞춤 탭 (500 밀리초), 그리고 오른쪽 맞춤 탭 (240 밀리초) 보다 약 5 배 시간 보다 더 빨리.

요컨대, 라벨, 상단의 양식을 채우기 위해 짧은 시간. 그러나 수직 영역을 최소화 하는 경우 오른쪽 맞춤을 고려 하십시오. 사용자는 양식을 채울 때 신중 하 게 레이블을 통해 탐색 하 고 싶다면, 신중 하 게 고려 하면 각 입력된 상자 폼에 대 한 왼쪽된 맞춤을 사용할 수 있습니다.

Vi입니다. 지원

사용자가 신속 하 게 양식을 작성, 일반적으로 도움말 정보에 단일 증가의 형태를 이해 하기 어려운에 가이드는 양식을 작성할 사용자. 도움말 정보를 묻는 메시지를 작성 하는 방법, 일반적으로 레이블 또는 입력 상자에 다음 도움말 텍스트, 대화형 모드를 제공 일반적인 도움말 표시 되었습니다 (즉, 항상 표시 또는 아래 입력된 상자에 입력 상자의 오른쪽에), 인스턴트 도움 (즉, 입력된 상자는 활성화 되 면, 도움말 텍스트 자동으로 표시), 사용자 활성화 인스턴트 도움 ( 즉, 도움말 정보가 기본적으로 표시 되지 않습니다, 그리고 사용자 마우스 호버 트리거 도움, 및 사용자 활성화 영역 도움말 (모든 폼의 도움말 정보를 한 곳에서 통합 하는) 표시 하는 아이콘. 사실, 더 나은 사용자를 위해 더 많은 방법을 고려할 수 있습니다, 같은 자주 보면 신용 카드의 만료 사용자 활성화 입력된 상자, visual 도움말 정보를 더 간결의 직관적인, 더 나은 이해.

7 스마트 기본값

네트워크 형식 선택의 수를 줄이기 위해 입력 양식 완료 과정을 빠르게 하는 데 필요한 시간을 스마트 기본값을 사용할 수 있는 많은 장소가 있다. 기본 선택 하 고 값을 설정 하 여 대부분의 사람들의 요구를 충족, 기본값 모두 밀어 동일. 폼 개체에 관련 있는 개인 설정 기본 이기도 합니다. Jingdong 주문서 같은 지능형 기본 정보와 관련, 개인 형성 하지 않습니다 필요 입력, 주소 정보, 지불 배포 방법, 송장 정보를 수신 하기 전에 기본 그리고 사용자의 라인에, 습관, 반복된 입력의 비용을 피하고 있는 동안 합니다. 브랜드 1.0 새로운 광고 설정, 사용자 할인율의 96%는 순서의 할인율 광고 할인율을 수정 하려면 카 사용자에 맞게도 필요 하지만, 입력된 상자 순서 할인율에 대 한 기본 사전 설정, 그래서 가속 양식을 작성 하는 사용자의 대부분.

8 개의 즉각적인 피드백 확인

비록 있는 양식을 디자인 하는 양식의 콘텐츠는 명확 하 게 구조화 하 고 의미 있는 입력된 도움말 제공 보장, 거기는 항상 몇 가지 답변. 이 시점에서, 직접 피드백 사람들의 답변을 효과적인 다시 인스턴트 체크섬을 제공 하는 데 도움이 됩니다. 즉시 유효성 검사 피드백의 여러 종류로 나누어져: 적절 한 입력 확인, 효과적인 응답을 제안, 필요한 한도 내에서 사용자가 제어할 수 있도록 실시간 업데이트 디자인을 통해 입력된 정보 확인. 이러한 피드백은 일반적으로 사용자 입력된 상자 시작 될 때 발생 합니다 입력 하 고 입력을 중지 또는.

암호를 설정 하는 경우 필요한 문자 수를 입력 하는 사용자는 제한 된, 문자 유형을 제한 된 암호는, 암호를 입력 하는 사용자에 게 뿐만 아니라 실시간 인증을 사용 유효, 자격 여부 보다는 말해 암호에만 제출 하는 모든 양식 채우기 암호의 보안을 설명 하는 것 뿐만 아니라 수정할 필요 사용자가 측정 암호 질 수 있도록 눈에 잘 띄는 방법.

직접 피드백 제공, 답변을 확인 하지만 입력된 제안 제공을 국한 되지 않습니다. 사용자가 검색할 때 검색 상자 수 입력된 과정에서 자동으로 작성, 제공 하는 관련된 검색 제안, 수 있는 사용자 입력된 오류를 방지 하지만 사용자의 맞춤법 시간 (필요로 하는 더 많은 전화에) 저장.

9 추가 입력

추가 입력 더 많은 옵션이 나 사용자에 대 한 편견 없이 사용자의 요구를 충족 하기 위해 고급 옵션을 제공할 수 있습니다. 미만 사용자의 10% 이상의 노출 링크를 모니터링 밖으로 채울 것입니다, 사용자가 더 많은 입력을 "추가" 버튼을 클릭 하 여 선택할 수 있습니다, 즉시 증가 작업의 완료를 방해 하지 않습니다.

10 다른 방법

경우 사용자는 기존 양식에서 양식 항목으로 동일한 양식을 작성, 사용자, 반복된 입력 하지 않으려면 사용자 수정할 수 있습니다 단순히 작은 양의 데이터 복사본 가져오기 양식 데이터 기능을 제공 하.

중요 한 정보 또는 정보 시각화, 명확 하 고 효과적인 커뮤니케이션 및 정보 통신, 효율적인 기능, 매핑의 사용의 형성을 그렇게 이해 하기 어려운 작업의 목표를 효율적으로 달성 하기 위해 사용자가. 광고 버틀러 1.0 선택 창조적인 템플릿, 테이블 목록 양식, 하지만 사용자 이해 비용과 선택 비용 큰 판단 하;는 새로운 제도 기본 축소판 형태, 직관적인 크리에이 티브에 중점, 그림은 사용자가 더 효율적 천 단어, 승.

위의 방법 이외에 일부 활성 및 보조 행동 차이, 수직 또는 수평 탭의 사용, 적 층된 방법의 사용이 있다. 사용자는 양식을 작성, 그들은 가능한 한 빨리 작업을 완료 합니다. 그것은 명확 하 고 깔끔하게 양식을 디자인 하는 데 필요한 따라서입니다.

후속

과학 및 기술 개발, 음성 정보, 사진 및 센서와 같은 새로운 기술의 출현이 확실히 양식 디자인에 대 한 새로운 아이디어를 열 것 이다. 그것은 사람들이 시스템 폼의 형태를 통해 직접 상호 작용 하지 않습니다 및 양식을 약화 되거나 사라질 수도 있습니다.

리소스

Http://www.etre.com

http://www.lukew.com/ff/entry.asp?1502

http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/

루크 Wroblewski "웹 폼 디자인: 빈칸에서 채우기"