Your SlideShare is downloading. ×
0
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Web Form Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Form Design

517

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
517
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SIMHWABAN STUDY 20110818Web Form Design Phase 1 by NAM YOUNG-CHUL
  • 2. What is the FORM?서비스 제공자와 사용자의 대화 (명령 아님)
  • 3. What does the FORM really means? for Service Provider 성가신 것!서비스를 제공하는데 필요한 데이터를 for User 수집하고... 서비스 제공자와 사용자의 대화 (명령 아님)
  • 4. What is The World Best FORM DESIGN? NO FORM.
  • 5. 폼 화면설계 할 줄 알았겠지? 더 중요한 게 있다.이건 일종의 대화니까... 어떤 언제 무슨 말을 모습으로 말을 걸까? 할까? 말할까? 우리가 생각하는 화면 설계나 GUI는 이 때나 와서 생각할 일.
  • 6. 언제 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 등록 후 앞으로 편리한 쇼핑!
  • 7. e-mail password 등록 로그인 forgot password? 처음왔는데 자기가 아이디가 있는 처음 온 사용자 처음 온 지도 모르는 사용자 사용자 이 사이트와 관계를 맺으려고 왜 이메일 넣었는데 기억 안나. 여기에 들어온게 아니에요. 자꾸 틀리다그러지? 이메일이 몇 갠데...단지 상품을 사고 싶을 뿐이라고요. 어쨌든, ‘등록’은 싫어!
  • 8. 언제 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$ 결재 포기...
  • 9. Database Analysis.구매자의 중복 등록. 심지어 10번 까지. 45% 건의 비밀번호 찾기 요청 160,000이들 중 는 해당 구매를 완료하지 않았다. 75%
  • 10. Solution e-mailpassword 등록 로그인 forgot password?
  • 11. Solution e-mailpasswordforgot password? 로그인우리 사이트에서는 물건을 구매하려고 새로운계정을 만들 필요가 없습니다. 결제를 진행하려면간단하게 [계속]을 클릭하십시오. 다음번 구매를더욱 빠르게 하고 싶다면 결제 과정에서 계정을만들어도 됩니다. 계속 > 물건 구매자 수 45% 증가. 연 매출 3억 증가.
  • 12. 언제 말을 걸까? 똑같이 주소를 물어봐도 회원가입할 때 물어보면 의심스럽고물품 결제 직전에 물어보면 당연하게 느껴진다.
  • 13. 무슨 말을 할까? Caroline Jarrett’s Principle 진짜 절대 죽어도 꼭 반드시 필수적으로다가 필요한 거 아니면 물어볼 생각도 하지마.
  • 14. 무슨 말을 할까? Caroline Jarrett’s Principle 유지 - 삭제 - 연기 - 설명
  • 15. 무슨 말을 할까? Caroline Jarrett’s Principle 1. 유지 예를 들면, 배송 신청 직전의 주소나 결재 직전의 카드 정보같은 것.
  • 16. 무슨 말을 할까? Caroline Jarrett’s Principle 2. 삭제 이 약관 동의는마케팅에 필수적인 꼭 들어가야합니다!정보니까 이건 꼭넣어주셔야되요! Law Team Marketer FORM 개인 식별정보 더 넣어줘요 빨리요 현기증난단말이에요 Developer
  • 17. 무슨 말을 할까? Caroline Jarrett’s Principle2. 삭제
  • 18. 무슨 말을 할까? Caroline Jarrett’s Principle 3. 연기 질문할만한 ‘적절한’시점을 기다리기. 예를 들어 가입할 때 주소를 안물어보고 뭔가 받아야할 것이 있을 때 물어보기. 첨부터 관심분야 묻지 말고 그 사람이 사는 것이나 관심 표명한 것 중심으로 수집하기. (Like, RT, +1, 공감 등이 이런 맥락)
  • 19. 무슨 말을 할까?4. 설명
  • 20. 무슨 말을 할까?4. 설명
  • 21. 무슨 말을 할까? 쓸데없는 입력필드가 하나 생길 때 마다 고객의 짜증은 두배가 된다. 눈치 없이 아무때나 물어보면 네배가 되고,입력해야하는 이유를 안 알려주면 그냥 외면당한다.
  • 22. 폼 화면설계 할 줄 알았겠지? 더 중요한 게 있다.이건 일종의 대화니까... 어떤 언제 무슨 말을 모습으로 말을 걸까? 할까? 말할까? 우리가 생각하는 화면 설계나 GUI는 이 때나 와서 생각할 일.
  • 23. 어떤모습으로말할까?
  • 24. 어떤모습으로말할까? 2. 1. 폼의 형태, 디자인은 입력하는 내용의 성격까지 좌우한다.
  • 25. 어떤 고려해야할 Verbal/Visual/Interaction 요소들로는 레이블링모습으로 과 스캔 라인 정렬 주위 분산을 막기위한 적절한 dimmed처리 진말할까? 행상태표시 키보드의 Tab을 이용한 원활한 입력 챙겨주기 항목 타이틀을 상향 정렬할지 우측 정렬할지 좌측 정렬할지 결정 입력 필드의 종류를 살펴보고 적절한 타입을 고르고 입력 필드의 길이 를 적절하게 조절하고 실행을 위한 버튼을 적절히 배치하며 도움 말도 잊지말고 챙겨주고 오류처리 잘 해주고, 특히 오류났을 때 버려놓으면 사용성 치명적이니까 진짜 잘 챙기고 실시간 유효성 검사해서 쓸데없이 짜증나게 팝업보지 않도록 배려하고 불필요한 입력을 방지하기 위해 최적의 기본값을 찾아줄 것. 추가 입력 타 이밍을 잘 잡고 이를 이용해서 점진적인 관여를 실현하라. 선택 의존적 필드 입력방식에는 페이지 단위 선택, 수평 탭, 수직 탭, 드롭다운 리스트 라디오버튼 하단 / 내부 노출 비활성화 노출 그 룹 노출이 있는데 장단점이 각각 있으니까 잘 골라보도록 하기. 어쨌든 제일 좋은 건 폼 자체가 사라지는 거라고 ‘웹 폼 디자인’의 저자 루크 로블르스키가 말하더라...
  • 26. Phase 1.다소 급하고 갑작스럽게 END

×