웹 양식 디자인:쇼케이스 및 솔루션

스매싱 사설

저자에 관하여

스매싱 팀은 높은 품질의 콘텐츠를 사랑하고 작은 세부 사항에 대한 관심. 우리의 온라인 기사를 통해,스매싱 책,전자 책뿐만 아니라 스매싱…↬

  • 11 최소 읽기
  • 오프라인 읽기를 위해 저장
  • 트위터,링크드 인 공유

이 개요는 웹 양식 디자인과 관련된 모든 년 동안 여기에 게시 된 가장 유용하고 인기있는 스매싱 잡지의 기사의 손으로 수확 및 조직 선택을 제공합니다.

빠른 개요

  • 좋은 웹 양식 디자인을위한 유용한 아이디어와 지침
  • 웹 양식 디자인:쇼케이스 및 솔루션
  • 웹 양식 디자인:현대 솔루션과 창의적인 아이디어
  • 웹 양식 유용성에 대한 광범위한 가이드
  • 완벽한
  • 웹 양식 유효성 검사:모범 사례 및 자습서
  • 양식 필드 유효성 검사:오류 전용 접근 방식
  • 웹 양식 디자인 패턴:양식 등록
  • 웹 양식 디자인 패턴: 가입 양식,제 2 부
  • 로그인 양식 디자인에 대한 새로운 접근 방식
  • 가입 및 로그인을 단순화하는 혁신적인 기술
  • 모바일 장치의 양식:최신 솔루션
  • 모바일 양식의 걸림돌 제거
  • 무료 다운로드:디자인을위한 치트 시트 웹 양식

좋은 웹 양식 디자인을위한 유용한 아이디어와 지침

입력 양식은 요즘 거의 모든 웹 사이트 또는 응용 프로그램의 필수 요소입니다. 입력은 상호 작용의 핵심 방법이며 많은 경우 성공과 실패 사이의 하드 변환 지점을 나타냅니다. 우리는 우리의 가입 및 연락처 양식에 사용자를 데려에 넣어 양의 시간과 노력으로,우리가 양식 자체에 시간의 비례 금액을 지출하지 않는 경향이 있다는 것은 놀라운 일이다.

웹 양식 디자인 모범 사례

웹 양식에서는 여러 가지 기술과 요소를 사용하여 비참한 실패에서 성공적인 변환 지점으로 전환할 수 있습니다. 이 기사에서는 웹 양식 디자인에 대한 몇 가지 흥미로운 예와 유용한 지침을 제시합니다.웹 양식 유용성에 대한 광범위한 가이드

당신이 읽을 수있는 것과는 반대로,좋은 버튼,색상 및 타이포그래피 및 많은 제이 큐리 플러그인으로 양식을 후추하는 것은 사용할 수 없습니다. 실제로,그렇게 할 때,당신은 양식 유용성을 구성하는 것의 1/3 만(구조화되지 않은 방식으로)해결할 것입니다.

이 글에서,우리는 당신이 쉽게 따라 할 수있는 실용적인 지침을 제공합니다. 이 지침은 사용성 테스트,현장 테스트,웹 사이트 추적,시선 추적,웹 분석 및 불만을 가진 사용자가 고객 지원 담당자에게 제기 한 실제 불만 사항에서 제작되었습니다.

자세히보기…

웹 양식 디자인:현대적인 솔루션과 창의적인 아이디어

웹 양식은 종종 방문자와 사이트 소유자 사이의 주요 통신 채널입니다. 웹 양식을 이해하기 쉽고 직관적으로 사용할 수 있도록 하는 것이 필요한 이유는 피드백이 항상 중요합니다. 그럼에도 불구하고 양식 디자인에서도 창의성의 건강한 부분을 감당할 수 있습니다.

웹 양식은 지루하지 않아도 됩니다. 관심을 얻기 위해,당신은 독특하고 흥미로운 무언가를 마련 할 필요가-기호,아이콘,색상,위치 또는 웹 양식의 크기는 종종 흥미로운 디자인 솔루션을 달성하는 데 사용됩니다. 우리는 몇 가지 예를 검색 한 우리는 그들을 발견했습니다. 창의적이고 독창적이며 특이한 웹 양식.

스크린 샷

아래에서 우리는 웹 양식 디자인과 관련된 현대적인 솔루션과 창의적인 아이디어뿐만 아니라 40 가지가 넘는(정말로)아름다운 웹 양식 예제를 제시합니다. 일부 예제는 플래시 기반입니다.더 읽기…

완벽한

의 검색,또는 컴퓨터와 인간을 구별하기 위해 완전히 자동화 된 공공 튜링 테스트는 사용자의 입력이 컴퓨터에 의해 생성되지 않았 음을 보장하기 위해 존재한다. 이 독특한 퍼즐은 일반적으로 스팸으로부터 등록 및 주석 양식을 보호하기 위해 웹에서 사용됩니다. 그들은 많은 경우에 저를 짜증,그러나 나는 또한 웹 사이트에 빠른 수정으로 그들을 구현했습니다.

re

이 기사는 인간이 생성 한 스팸의 양을 늘리는 문제에 대한 완벽한 솔루션을 검색합니다. 우리는 주요 질문에 대답하기 위해 사용 방법과 이유 및 유용성에 미치는 영향을 살펴 보겠습니다:무엇 완벽한이며,그들은 심지어 바람직하다?

자세히보기…

웹 양식 유효성 검사:모범 사례 및 자습서

이상적으로 사용자는 웹 양식에 필요한 정보를 채우고 작업을 성공적으로 완료합니다. 그러나 사람들은 종종 실수를합니다. 이것은 웹 양식 유효성 검사가 작동하는 곳입니다. 웹 양식 유효성 검사의 목표는 사용자가 작업을 성공적으로 완료하는 데 필요한 필요하고 적절한 형식의 정보를 제공하는지 확인하는 것입니다. 이 기사에서는 유효성 검사 자체를 넘어 다양한 유효성 검사 및 오류 피드백 기술,방법 및 접근 방식을 탐구합니다.

페이스 북 가입 양식

사용자의 입력은 서버와 클라이언트(웹 브라우저)에서 유효성을 검사 할 수 있습니다.. 따라서 서버 측 및 클라이언트 측 유효성 검사가 있습니다. 우리는 각각의 장단점에 대해 논의 할 것입니다. 서버 쪽 유효성 검사에서 정보가 서버로 전송되고 서버 쪽 언어 중 하나를 사용하여 유효성이 검사됩니다. 유효성 검사에 실패하면 응답이 클라이언트로 다시 전송되고 웹 양식이 포함된 페이지가 새로 고쳐지고 피드백이 표시됩니다.

자세히 보기…

양식 필드 유효성 검사: 양식 필드 유효성 검사를위한 오류 전용 접근 방식

오류 페이지는 끔찍합니다. 방금 20 개의 양식 필드를 작성했지만 단일 필드가 유효성을 검사하지 못했기 때문에 동일한 부풀어 오른 페이지가 얼굴에 다시 던져집니다.

나는 우리의 마지막 유용성 연구에서 피험자가 유효성 검사 오류 페이지를 접할 때마다 절망의 한숨을 분명히 기억합니다.

우리는 또한 검증 오류에 노출 된 피험자가 필드가 선택 사항인지 의심 스러울 경우”회사 이름”필드에”해당 없음”과 같은 것을 작성하여 후속 단계에서 오류를 피하기 위해 예방 조치를 취하기 시작했음을 발견했습니다.

양식 필드 유효성 검사 오류 페이지 BlueNile.com

베이마드 인스티튜트에서,우리는이 문제에 반영하고 우리가 전화 아이디어를 얻었다”오류 필드 만”—이 문서에 대해 정확히 무엇이다. 이 아이디어를 탐색하기 전에 세 가지 전통적인 유형의 유효성 검사 기술을 살펴 보겠습니다: “동일한 페이지 다시로드”,”최적화 된 동일한 페이지 다시로드”및”라이브 인라인 유효성 검사.”

자세히보기…

웹 양식 디자인 패턴:가입 양식

서비스의 수익을 극대화하려면 웹 양식의 완료율을 최대화해야합니다. 너는 너의 방문자를 첫눈에 감명주는 몇몇 혁명적인 아이디어가 있으면 않는한,간단하게 사용자를 너의 위치에 등록하는 가능하게 하는 이젠 그만. 서비스가 최대한의 노출에 도달 할 수 있도록 설계자는 사용자에게 좋은 사용자 경험을 제공해야합니다. 우리는 그들을 초대하고,서비스가 어떻게 작동하는지 설명하고,양식을 작성해야하는 이유를 설명하고,대가로 얻을 수있는 혜택을 제안해야합니다. 그리고 물론,우리는 또한 그들이 참여하는 것을 매우 쉽게 만들어야합니다.

그러나 효과적인 웹 양식을 디자인하는 것은 쉽지 않습니다. 그리고 그것은 하나의 간단한 이유가있다:아무도 양식을 작성하는 것을 좋아하지 않는다—오프라인도 온라인도. 따라서 디자이너로서 양식 완성이 쉽고 직관적이며 고통스럽지 않도록 사운드 디자인 결정을 파악해야합니다.

웹 양식 디자인 패턴

그러나 이러한 결정을 정확히 어떻게 알아낼 수 있습니까? 양식에 대한 링크는 레이아웃에 어디에 배치해야 합니까? 우리는 어떻게 그것을 디자인해야합니까? 레이블을 어떻게 강조 표시해야하며 어떻게 정렬해야합니까? 현대 웹 사이트에서 웹 양식 디자인 패턴은 어떻게 생겼습니까? 이것이 바로 우리가 스스로에게 물었던 질문입니다. 그리고 답변을 얻기 위해 우리는 설문 조사를 실시했습니다.

우리는 현재의 웹 양식 디자인 패턴의 설문 조사의 결과를 제시 아래-웹 양식(해야)문제 100 인기있는 웹 사이트의 분석 결과. 우리는 먼저 가입 양식을 시작하기로 결정했습니다. 우리는 아래에 우리의 연구 결과의 첫 번째 부분을 제시;설문 조사 결과의 두 번째 부분은 다음 주에 발표 될 예정이다.

업데이트:설문 조사 결과의 두 번째 부분은 이제 게시:웹 양식 디자인 패턴:가입 양식 2 부.

자세히보기…

웹 양식 디자인 패턴: 가입 양식,파트 2

지난 주 우리는 웹 양식 설문 조사의 첫 번째 결과를 발표했습니다. 설문 조사의 주요 목적은 설계 방법 효과적인 웹 양식의 일부 직관 디자이너와 개발자를 제공하는 것이 었습니다;우리는 또한 효과적이고 사용자 친화적 인 웹 양식을 달성 할 수있는 방법의 몇 가지 지침을 제시.

스크린 샷

우리는 더 중요한 양식(예:체크 아웃 양식)을 별도로 고려하기를 원했기 때문에 가입 양식에 중점을 두었습니다. 그 후 우리는 선택한 사이트의 각 하나의 가입 양식을 통해 가서 이러한 형태로 구현 된 설계 방법을 분석했습니다. 우리는 우리의 연구 결과의 두 번째 부분을 제시 아래-웹 양식(해야)문제 100 개 인기있는 웹 사이트의 웹 형태 중 설문 조사의 결과.

이 게시물은 체크 아웃 양식에 대한 아니라는 것을주의하시기 바랍니다-즉,또 다른 토론을위한 주제입니다,우리는 곧 게시물 중 하나에 별도로 고려할 수 있습니다. 우리는 우리의 설문 조사를 수행 할 수있는 프레임 워크를 제공 해 주셔서 감사합니다.

자세히보기…

로그인 양식 디자인에 대한 새로운 접근 방식

우리 중 많은 사람들에게 웹 사이트에 로그인하는 것은 일상 생활의 일부입니다. 사실,우리는 아마 우리가 뭔가 잘못 될 때까지,즉,그것을 수행하는 방법에 대해 생각하는 것을 중단 한 너무 자주 그것을 할:우리는 우리의 암호,우리의 사용자 이름,우리가 가입 한 이메일 주소를 잊지,우리는 가입 방법,또는 경우에도 우리는 지금까지 전혀 가입.

이러한 경험은 우리를 위해 단지 실망하지 않습니다,하지만 기업뿐만 아니라 나쁜. 얼마나 나쁜? 주요 온라인 소매 업체의 사용자 인터페이스 엔지니어링의 분석 1 모든 고객의 45%가 시스템에 여러 개의 등록이 있고,160,000 명의 사람들이 매일 비밀번호를 요청했으며,75%의 사람들이 비밀번호를 요청하면 시작한 구매를 완료하지 않은 것으로 나타났습니다.

고 왈라
고 왈라의 로그인 양식.

로그인하지 않은 방문자는 웹사이트 콘텐츠 및 권장 사항에 대한 개인화된 보기를 볼 수 없으므로 전환율과 참여도가 낮아집니다. 그래서,로그인은 큰 문제입니까?—?충분히 큰 일부 웹 사이트는 오래된 문제에 대한 새로운 디자인 솔루션을 탐구하기 시작했다.

자세히보기…

가입 및 로그인을 단순화하는 혁신적인 기술

가입 및 로그인 양식을 디자인하는 방법에는 여러 가지가 있습니다. 대부분의 디자이너는 기존의 방법을 잘 알고 있습니다. 그러나 몇 가지 혁신적인 기술을 이해하고 적용하면 양식을 더 간단하고 효율적으로 작성할 수 있습니다. 이 글에서,우리는 당신의 다음 디자인에 유용 할 수있는 새로운 아이디어의 몇 가지를 제시하고 싶습니다. 이러한 기술을 사용하기 전에,당신은 그들이 당신이 그들을 사용하려고하는 맥락에서 의미가 있는지 확인해야합니다 것을주의하시기 바랍니다. 우리는 당신의 사례 연구 및 긍정 또는 아래에 제안 된 제안을 기각 사용성 테스트에 대해 듣고 싶네요.

더 읽기…

최신 솔루션

등록 및 피드백 양식은 어디에서나 찾을 수 있습니다. 모든 스타트 업은 방문자의 관심을 끌기 위해 노력하므로 웹 양식은 모든 회사의 성공을 위해 점점 더 중요 해지고 있습니다. 결국,정확하게 그 웹 양식은 잠재 고객과의 첫 번째 접촉에 대한 책임이 있습니다. 웹 개발자가 사용할 수 있는 현대적인 솔루션을 살펴보겠습니다. 링크 확인:더/08 2008.모바일 장치에서 양식:최신 솔루션

모바일 양식은 데스크톱 사촌보다 훨씬 더 많은 제약 조건을 갖는 경향이 있습니다. 따라서 모바일 응용 프로그램 및 웹 사이트의 양식 수를 제한하는 것은 일반적으로 좋은 생각입니다. 모바일 장치에서 사용자의 입력을 원할 때 라디오 버튼,확인란,선택 메뉴 및 목록은 열린 텍스트 필드보다 훨씬 잘 작동하는 경향이 있습니다.

그러나 제약은 혁신을 낳고 모바일 형태는 다르지 않습니다. 모바일 장치의 한계로 인해 개발자와 디자이너는 사용자가 데이터를 더 빠르고 쉽게 입력 할 수있는 새로운 방법을 찾게되었습니다. 이 기사에서 다루는 현대적인 솔루션 덕분에 모바일 공간은 양식을 훨씬 오래 피할 수있는 장소가 아닐 수 있습니다. 대신,그들을 격려하는 장소가 될 수 있습니다.

더 읽기…

이동형태의 걸림돌 제거

몇 주 전,나는 산책하러 나가는 동안 포장 도로가 빠르게 다가오는 것을 보았을 때 매우 놀랐습니다. 기절 거기에 누워,나는 곧 무슨 일이 있었는지 깨달았다:나는 떨어졌다. 아야 비-마이너스. 나는 보통 가능한 한 세심하려고 노력하지만,이번에는 포장 도로에 큰 균열이 내 신발을 붙잡고 균형 떨어져 완전히 나를 던졌다.

모바일 걸려 넘어

그것은 휴대 전화에 양식을 작성에 올 때,나는 물리적 측면에서 단지 덜 고통스러운 비슷한 경험에 실행하는 많은 사용자를 관찰했다. 모바일 양식 내의 많은 요소는 사용자가 어떤 종류의 양식 뒤에 숨어있는 서비스 또는 제품에 얼마나 원활하게 도달하는지에 영향을 미칩니다.

양식을 작성하는 과정에서 걸림돌로 간주 될 수있는 몇 가지 요소가 있습니다. 특히 휴대용 장치에,이 여행은 우리가 같은 시간,위치,또는 제한된 입력 옵션과 같은 상황 매개 변수를 고려해야한다는 사실에 의해 복잡,확고한 데스크톱 경험에 비해. 이 게시물에서 우리는 모바일 장치에 대한 가장 일반적인 걸림돌 볼 것이다. 또한,나는 걸림돌을 방지하고 모바일 사용자를위한 양식을 통해 안전하고 빠른 산책을 용이하게하기 위해 설계 전략을 논의 할 것이다.

자세히보기…

무료 다운로드:웹 양식 디자인을위한 치트 시트

양식,양식,양식:너무 자주 디자인에서 간과. 이 게시물에서,우리는 조 거머리에 의해 생성 및 스매싱 잡지와 독자에 대한 발표 양식 디자인 치트 시트를 해제 기쁘게 생각합니다. 이 유아용 침대 시트에는 옴니그래프 템플릿과 포토샵이 포함되어 있으며 원하는대로 다운로드하여 사용할 수 있습니다. 시트를 인쇄하여 벽에 붙이고 고객에게 보내고 일반적으로 모든 사람의 양식을 조금 더 좋게 만드는 데 도움이됩니다.

양식 디자인

유아용 침대 시트 설계자는 수년 동안 양식을 설계하고 테스트했으며 프로젝트에서 가장 일반적인 문제와 문제를 요약하기로 결정했습니다.

자세히 보기…

다음”최상의”선택 항목에도 관심이 있을 수 있습니다:

  • 웹 디자인 요소:예제 및 모범 사례
  • 웹 디자인 탐색 쇼케이스
  • 유용성&사용자 경험

답글 남기기

이메일 주소는 공개되지 않습니다.