Web Form Design

SIMHWABAN STUDY20110818

Web Form DesignPhase 1

byNAM YOUNG-CHUL

What is the FORM?

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

What does the FORM really means?

성가신 것!

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

서비스를 제공하는데필요한 데이터를

수집하고...

forService Provider

for User

What is The World Best FORM DESIGN?

NO FORM.

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

더 중요한 게 있다.

언제말을 걸까?

무슨 말을할까?

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

어떤모습으로말할까?

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

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


Stuff 01 10.99$

Stuff 02 9.99$

Stuff 03 4.49$

Stuff 04 2.15$

Stuff 05 1.07$

Stuff 06 19.99$

Stuff 07 24.99$

Stuff 08 4.99$

Stuff... 7.99$

결재

e-mail

password

등록 로그인

forgot password?

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

그건 니 생각이고...

e-mail

password

등록 로그인

forgot password?

처음 온 사용자

이 사이트와 관계를 맺으려고여기에 들어온게 아니에요.

단지 상품을 사고 싶을 뿐이라고요.

왜 이메일 넣었는데자꾸 틀리다그러지?

처음왔는데 자기가처음 온 지도 모르는 사용자

아이디가 있는사용자

기억 안나.이메일이 몇 갠데...

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

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


Stuff 01 10.99$

Stuff 02 9.99$

Stuff 03 4.49$

Stuff 04 2.15$

Stuff 05 1.07$

Stuff 06 19.99$

Stuff 07 24.99$

Stuff 08 4.99$

Stuff... 7.99$

결재

e-mail

password

등록 로그인

forgot password?

포기...

Database Analysis.

45%

160,00075%

중복 등록. 심지어 10번 까지.

건의 비밀번호 찾기 요청

구매자의

이들 중 는 해당 구매를 완료하지 않았다.

e-mail

password

등록 로그인

forgot password?

Solution

e-mail

password

계속 >

로그인forgot password?

Solution

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

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

똑같이 주소를 물어봐도

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

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


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

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


유지 - 삭제 - 연기 - 설명


1. 유지

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


2. 삭제

FORM

이 약관 동의는꼭 들어가야합니다!

Law Team

마케팅에 필수적인정보니까 이건 꼭넣어주셔야되요!

Marketer

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

Developer


2. 삭제


3. 연기

질문할만한 ‘적절한’시점을 기다리기.

예를 들어 가입할 때 주소를 안물어보고

뭔가 받아야할 것이 있을 때 물어보기.

첨부터 관심분야 묻지 말고

그 사람이 사는 것이나 관심 표명한 것 중심으로 수집하기.

(Like, RT, +1, 공감 등이 이런 맥락)


4. 설명

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

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

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

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


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

더 중요한 게 있다.



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


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


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

1.

2.


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

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

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

Phase 1.

END다소 급하고 갑작스럽게

Web Form Design

Design

Transcript of Web Form Design