4 양식 설계 UX 팁 (예제 포함)

우리는 양식을 단순히 사용자 데이터를 수집하는 수단으로 생각하는 경향이 있지만 한 가지 방법이기도하지만 가끔은 유일한 길, 사용자가 우리와 접촉. 우리가 사용자를 만들 수 있다고 생각하는 것은 망상 일 것입니다. 애정 양식을 작성하는 것은 가능하지만 확실히 가능합니다. 너무 많은 것을 괴롭히지 않는 해결책을 찾는다., 그 과정에서 그들을 돕는다..

그물을 탐색하는 동안 우리는 때로는 프로그래밍 방식으로 정확한 놀랄만 한 솔루션을 찾을 수 있지만, 사용자 경험이 좋지 않아 많은 사용자가 사이트를 포기하게 만듭니다..

양식이 잘 설계된 경우 사용자를 만족시킬 수있을뿐 아니라 처리 할 수있는 백엔드 팀도 만족할 수 있습니다. 훨씬 적은 사용자 입력 오류. 따라서이 기사에서 우리는 우리가 어떻게 할 수 있는지 살펴볼 것입니다. 사용자 입력 오류 최소화 여전히 사용자를 행복하게해라..

사용자 요구 예측

웹 사이트 및 응용 프로그램 다른 사용자 기반 및 목표, 심지어 동일한 위치 일지라도 가장 빈번하게 이름을 짓기 위해 다양한 종류의 데이터를 수집하는 여러 가지 양식을 호스팅 할 수 있습니다.

• 로그인 양식
• 등록 양식
• 사용자 프로필 양식
• 뉴스 레터 가입 양식
• 체크 아웃 양식
• 사용자 설문 조사
• 문의 양식
• 의견 양식
• 양식 검색

이 모든 양식 유형 다른 것들이 필요하다.. 체크 아웃 양식을 디자인 할 때 보안에 대해 사용자에게 확실하게 보증하는 것이 중요하며 의견 양식의 경우에는 emojis 또는 사용자가 실제 분위기를 표현할 수있는 다른 방법을 추가하십시오..

그러나 유사한 사이트 유형도 다르게 설계해야 할 수도 있습니다. 모든 사이트는 순 사용자 기반. 디자인 프로세스를 시작하기 전에, 항상 좋은 생각입니다. 사용자가 필요로하는 것을 예상하십시오., 그에 따라 설계.

예 : 사용자 요구를 겨냥한 소셜 로그인

Codepen의 로그인 양식에는 Github이있는 세 개의 소셜 로그인이 포함되어 있습니다. 이 선택은 대부분의 사이트에서 부당합니다..

그러나 Codepen에 완벽합니다., 사용자 기반이 개발자로 구성되어 있기 때문에 많은 개발자가 Github 계정으로 로그인하거나 개발 계정을 한 번에 연결할 수 있습니다.

Think Mobile-First

모바일 및 데스크톱 사용자는 서로 다른 요구를 가지고 있지만 양식 완성은 모바일 화면에서 훨씬 더 큰 도전입니다., 실제 키보드보다 손 제스처를 사용하여 모바일 우선 접근법 사용 가능한 형식을 디자인 할 때 우리를 더 많이 활용할 수 있습니다..

또한 모바일에서 잘 작동하는 많은 양식 UI 패턴이 데스크톱에서도 잘 작동합니다..

예 : Tappable 컨트롤

높은 품질의 모바일 양식은 보이는 컨트롤 그 위에 모바일 사용자는 쉽게 탭할 수 있습니다. 손가락으로.

웹 디자인 컨퍼런스의 뉴스 레터 가입 양식은 모바일 사용자가 화면에 액세스하는 방식에 적응합니다. 두 개의 입력하기 쉬운 입력 필드 및 손가락 끝 크기의 버튼.

텍스트 입력 필드는 평소와 마찬가지로 높기 때문에 모바일 사용자가 쉽게 입력 할 수 있으며 큰 오렌지색 버튼이 눈금 아이콘으로 표시되어 사용자가 양식을 제출하도록 권장합니다..

사이트의 데스크톱 버전 동일한 양식 디자인을 사용합니다., 보기에도 좋고 대형 화면에서도 잘 작동하므로.

예 : 소모 가능 입력

모바일 용 양식을 디자인 할 때 우리가 할 수있는 방법을 고려하는 것이 항상 중요합니다. 우리가 사용하는 공간을 최소화한다.. 그만큼 소모성 입력 요즘 UI 디자인 패턴이 인기를 얻고 있으며 특히 모바일에서 잘 작동합니다..

Booking.com은 모바일 사이트의 검색 양식에서이 패턴을 활용합니다. 사용자가 검색 필드를 탭하면 다음과 같이 확장됩니다. 제스처를위한 더 많은 공간 남기기, 권장 사항이있는 선택 목록도 아래에 나타납니다..

사용자가 필드를 탭하면 축소되고 추가 정보가 사라집니다..

예 : 모핑 버튼

모핑 버튼 사용자가 처음 버튼을 볼 때 소비 가능한 입력 패턴을 한 걸음 더 가져간 다음 양식으로 변형하다 그들이 그것을 두 드릴 때.

아래의 스크린 샷은 혁신적인 폼 디자인에 대한 Startup의 훌륭한 기사에서 비롯된 것으로 다른 많은 창의적인 솔루션도 제공합니다..

입력 인계 촉진

길이가 긴 양식은 사용자를 방해하는 경향이 있습니다. 우리가 할 수있는 최선의 방법은 우리가 정말로 필요로하는 정보만을 요구하십시오.. 이것은 사용자 경험의 관점에서 중요 할뿐만 아니라 사용자는 너무 많은 개인 정보를 제공하기를 주저 할 수 있습니다. 개인 정보 보호 문제.

그러나 때때로, 우리는 아직도 더 긴 형태와 함께 가야합니다. 이 경우에는 그들을 더 작은 덩어리로 슬라이스하다., 과 청크를 연속적인 화면으로 제공.

장바구니 이탈률을 줄이기 위해 많은 전자 상거래 사이트 (예 : Amazon)에서이 솔루션을 사용합니다..

양식 필드를 완성하기 쉽게하려면 엄지 손가락으로 혼란과 사용자 행동을 줄인다. 가능한 한 많이.

예 : 맞춤 입력기

날짜 선택기 또는 색상 선택기와 같은 다른 콘텐츠 선택기는 올바른 입력을 쉽게 받아들이지 않고 양식을 만듭니다. 더욱 매력적인, 크게 사용자 오류 감소.

Todoist리스트 - 복용 앱 맞춤 힌트를 준다. 사용자가 요일을 가리키면 날짜 선택기 내부에 있음.

예를 들어 아래의 스크린 샷과 같이 사용자는 8 월 31 일에 이미 2 회의 정당한 작업이 있으며 작업에 대한 올바른 날짜를 결정할 때이 정보를 고려할 수 있음을 알 수 있습니다. 생산성이 사용자의 주요 관심사 인 앱을위한 훌륭한 아이디어입니다..

예 : 드래그 앤 드롭 입력

드래그 앤 드롭 디자인 일반적으로 파일 업로드 필드, 특히 사용자가 이미지를 업로드해야하는 곳에서 잘 작동합니다..

일반적으로 파일 업로드 버튼과 비교하여 사용자 행동을 줄이지는 않지만 파일을 훨씬 쉽게 만들 수 있습니다. 사용자가 업로드 할 파일을 선택하십시오., 따라서 잘못된 파일을 제출할 기회가 줄어 듭니다..

WordPress.com은 포스트 편집기 형식으로 우아하고 직관적 인 드래그 앤 드롭 사용자 인터페이스를 제공합니다. 그만큼 작은 미리보기 이미지 그리고 이미 업로드 된 파일의 시각적 표현 사용자가 신속하게 업로드를 실행할 수 있도록 도와줍니다..

예 : 산만 제거를위한 오버레이

사용자가 양식을 작성하는 동안 정신이 산만 해지면 오류가 발생하기 쉽고 더 쉽게 짜증을냅니다.

콘텐츠 오버레이 미니멀리스트 폼 디자인에 대한 훌륭한 대안입니다. 그들은 사용된다. 더 복잡한 사이트 서로 다른 종류의 정보를 동일한 화면에 표시하려는 사용자.

아래 스크린 샷에서 데스크톱 버전의 Booking.com을 볼 수 있습니다. 사용자가 검색 양식에 마우스를 올려 놓으면 나머지 콘텐츠가 도착합니다. 회색의 오버레이로 덮여있다. 그들을 돕기 위해 양식 작성 프로세스에 집중.

사용자 의견 보내기

제공 적시에 적절한 피드백 사용자 경험을 크게 향상시킬 수 있습니다..

양식 디자인에는 두 가지 종류의 사용자 의견:

1. 주어진 의견 전에 양식 제출 - ~하기 위해서 오류를 줄이다. 과 포기 율, 진행 추적기, 사용자에게 올바른 입력을 즉시 알리는 즉시 입력 유효성 검사 또는 도우미 툴팁
2. 주어진 의견 후 양식 제출 - 사용자가 그들은 오류를 범했다., 오류 메시지

사용자가 필요로하는 사용자 피드백의 종류는 타겟 고객의 특성과 사이트의 목표에 따라 다릅니다.

예 : 진행 추적자

설문 조사 및 대부분의 전자 상거래 결제 양식과 같이 한 페이지보다 긴 양식은 진행 추적기 디자인 패턴. 진행 추적기는 즉각적인 시각적 피드백 사용자에게 자신의 상태를 알리고 프로세스를 진행하도록 유도합니다..

SnapSurveys 설문 조사 작성자 웹 앱은 제출 버튼 바로 위에 약간의 진행 추적자를 표시하여 사용자가 자연스럽게 그것을 발견한다.

진행 추적 프로그램은 라벨을 사용하지 않지만 디자인 방식은 목표를 분명히한다. - 원의 수는 단계 수를 나타내며, 이미 실행 된 단계는 파란색으로 표시되고 사용자는 몇 단계가 아직 앞에 있는지를 쉽게 알 수 있습니다.

예 : 실시간 유효성 검사

보디 숍 화장품 소매 업체에서 사용하는 제품 실시간 검증 오류를 없애고 양식 완성 프로세스의 UX를 향상시키기 위해 사용자 프로필 양식에.

입력 양식은 사용자가 양식을 작성하는 동안 확인되며 옳고 그른 답변은 다음과 같이 즉시 표시됩니다. 쉽게 구별 할 수있는 아이콘 오른쪽에서 약간 더 멀리 보이지만 여전히 보이는 지역에서.

예 : 표현 툴팁

이해 가능한 마이크로 카피 양식 디자인에서 성공적인 사용자 피드백의 필수 요소이기도합니다. 정의에 따르면 웹 사이트의 마이크로 사본은 작은 텍스트 덩어리 라벨, 버튼, 오류 메시지, 툴팁 등 다양한 요소에 사용됩니다..

로그인 양식에서 Barclay의 은행 그룹은 잠재적으로 사용자가 도움을 요청할 수있는 질문에 응답합니다. 잘 디자인 된 툴팁 포함 이해하기 쉬운 마이크로 카피.

도구 설명이 거의 숨겨져 있습니까? 아이콘들 사용자를 혼란스럽게하지 않기 위해 로그인 양식을 작성하는 방법을 알고 있지만 항상 존재하는 확실하지 않은 사용자를위한.

일부 툴팁에는 주석 달린 직불 카드의 작은 시각 사용자가 로그인 폼에 입력해야하는 데이터를 쉽게 찾을 수 있습니다..