Web Form Design

SIMHWABAN STUDY
20110818

Web Form Design
Phase 1

by
NAM YOUNG-CHUL

What is the FORM?

서비스 제공자와 사용자의 대화
(명령 아님)

What does the FORM really means?

for
Service Provider
성가신 것!
서비스를 제공하는데
필요한 데이터를 for User
수집하고...

서비스 제공자와 사용자의 대화
(명령 아님)

What is The World Best FORM DESIGN?

NO FORM.

폼 화면설계 할 줄 알았겠지?

더 중요한 게 있다.

이건 일종의 대화니까...

어떤
언제 무슨 말을
모습으로
말을 걸까? 할까?
말할까?

우리가 생각하는 화면 설계나
GUI는 이 때나 와서 생각할 일.

언제 Jared Spool의 일화 :
말을 걸까? 버튼 하나를 바꿔 연간 수익을 3억 달러 늘린 웹사이트

Stuff 01 10.99$
Stuff 02 9.99$
e-mail
Stuff 03 4.49$
Stuff 04 2.15$ password
Stuff 05 1.07$
등록 로그인
Stuff 06 19.99$
forgot password?
Stuff 07 24.99$
Stuff 08 4.99$
Stuff... 7.99$

결재 그건 니 생각이고...

로그인 후 간편한 쇼핑 or 등록 후 앞으로 편리한 쇼핑!

e-mail

password

등록 로그인

forgot password?

처음왔는데 자기가 아이디가 있는
처음 온 사용자 처음 온 지도 모르는 사용자 사용자

이 사이트와 관계를 맺으려고
왜 이메일 넣었는데 기억 안나.
여기에 들어온게 아니에요.
자꾸 틀리다그러지? 이메일이 몇 갠데...
단지 상품을 사고 싶을 뿐이라고요.

어쨌든, ‘등록’은 싫어!

언제 Jared Spool의 일화 :
말을 걸까? 버튼 하나를 바꿔 연간 수익을 3억 달러 늘린 웹사이트

Stuff 01 10.99$
Stuff 02 9.99$
e-mail
Stuff 03 4.49$
Stuff 04 2.15$ password
Stuff 05 1.07$
등록 로그인
Stuff 06 19.99$
forgot password?
Stuff 07 24.99$
Stuff 08 4.99$
Stuff... 7.99$

결재

포기...

Database Analysis.

구매자의 중복 등록. 심지어 10번 까지.
45%

건의 비밀번호 찾기 요청
160,000
이들 중 는 해당 구매를 완료하지 않았다.
75%

Solution

e-mail

password

등록 로그인

forgot password?

Solution

e-mail

password

forgot password? 로그인

우리 사이트에서는 물건을 구매하려고 새로운
계정을 만들 필요가 없습니다. 결제를 진행하려면
간단하게 [계속]을 클릭하십시오. 다음번 구매를
더욱 빠르게 하고 싶다면 결제 과정에서 계정을
만들어도 됩니다.
계속 >

물건 구매자 수 45% 증가.
연 매출 3억 증가.

언제
말을 걸까?

똑같이 주소를 물어봐도

회원가입할 때 물어보면 의심스럽고

물품 결제 직전에 물어보면 당연하게 느껴진다.

무슨 말을
할까?
Caroline Jarrett’s Principle

진짜 절대 죽어도 꼭 반드시 필수적으로다가
필요한 거 아니면 물어볼 생각도 하지마.

무슨 말을
할까?

유지 - 삭제 - 연기 - 설명

무슨 말을
할까?

1. 유지

예를 들면, 배송 신청 직전의 주소나
결재 직전의 카드 정보같은 것.

무슨 말을
할까?

2. 삭제

이 약관 동의는
마케팅에 필수적인 꼭 들어가야합니다!
정보니까 이건 꼭
넣어주셔야되요!

Law Team
Marketer
FORM

개인 식별정보 더 넣어줘요
빨리요 현기증난단말이에요

Developer

무슨 말을
할까?

2. 삭제

무슨 말을
할까?

3. 연기

질문할만한 ‘적절한’시점을 기다리기.
예를 들어 가입할 때 주소를 안물어보고
뭔가 받아야할 것이 있을 때 물어보기.
첨부터 관심분야 묻지 말고
그 사람이 사는 것이나 관심 표명한 것 중심으로 수집하기.
(Like, RT, +1, 공감 등이 이런 맥락)

무슨 말을
할까?

4. 설명

무슨 말을
할까?

쓸데없는 입력필드가 하나 생길 때 마다

고객의 짜증은 두배가 된다.

눈치 없이 아무때나 물어보면 네배가 되고,

입력해야하는 이유를 안 알려주면 그냥 외면당한다.

어떤
모습으로
말할까?

어떤
모습으로
말할까?
2.

1.

폼의 형태, 디자인은 입력하는 내용의 성격까지 좌우한다.

어떤
고려해야할 Verbal/Visual/Interaction 요소들로는 레이블링
모습으로 과 스캔 라인 정렬 주위 분산을 막기위한 적절한 dimmed처리 진
말할까? 행상태표시 키보드의 Tab을 이용한 원활한 입력 챙겨주기 항목
타이틀을 상향 정렬할지 우측 정렬할지 좌측 정렬할지 결정 입력
필드의 종류를 살펴보고 적절한 타입을 고르고 입력 필드의 길이
를 적절하게 조절하고 실행을 위한 버튼을 적절히 배치하며 도움
말도 잊지말고 챙겨주고 오류처리 잘 해주고, 특히 오류났을 때
버려놓으면 사용성 치명적이니까 진짜 잘 챙기고 실시간 유효성
검사해서 쓸데없이 짜증나게 팝업보지 않도록 배려하고 불필요한
입력을 방지하기 위해 최적의 기본값을 찾아줄 것. 추가 입력 타
이밍을 잘 잡고 이를 이용해서 점진적인 관여를 실현하라. 선택
의존적 필드 입력방식에는 페이지 단위 선택, 수평 탭, 수직 탭,
드롭다운 리스트 라디오버튼 하단 / 내부 노출 비활성화 노출 그
룹 노출이 있는데 장단점이 각각 있으니까 잘 골라보도록 하기.

어쨌든 제일 좋은 건 폼 자체가 사라지는 거라고

‘웹 폼 디자인’의 저자 루크 로블르스키가 말하더라...

Phase 1.

다소 급하고 갑작스럽게

END

Web Form Design

Recommended

Recommended

More Related Content

Featured

Featured (20)

Web Form Design