성공하는 폼 디자인의 비밀은?

By | 2009년 6월 3일

사용자 삽입 이미지

고객이 당신의 사이트에 들어온다. 첫 페이지를 채운 화려한 시각 디자인과, 콘텐츠에 흥미를 느낀 고객이 사이트에 더 깊숙이 들어가려 하는 순간, 갑자기 폼이 나타난다. 고객이 직접 채워 넣어야 하는 무수한 필드와 기나긴 동의 약관이 가득한 폼. 고객의 사용자 경험은 급격히 나빠진다. 이제 사이트 창이 닫히는 건 시간문제다.


웹페이지의 디자인도 아니고, 웹 폼만 따로 디자인하는 법을 알려주는데, 그것까지 공부해야 할까요? 웹 폼은 뭐..공부하기엔 너무 일상적인 소재 아닌가? 여러분, 혹시 이런 생각을 하고 계신가요?

자, 그럼 이쯤에서 웹 폼에 대해 팍! 팍! 파헤쳐볼 필요가 있어 보입니다.^^
웹 폼을 디자인하거나 개발하는 여러분과 사용자 사이에는 항상 폼이 있습니다.
전자상거래 사이트의 경우 사용자와 여러분(사이트 측) 사이에는 결제 폼이 있습니다. 회사이 이익이 생기고 안 생기고는 이 폼에서 결정이 나죠.
소셜 애플리케이션을 만들고 있다면 사용자와는 가입, 등록 폼을 거쳐 만나게 될 것입니다. 웹 폼을 통해 커뮤니티에 속한 사람들의 신원을 확인할 수 있겠죠.
또 데이터 입력 폼으로 많은 사용자들은 정보를 제공하거나 공유할 수 있을 겁니다. 유튜브에 있는 엄청난 비디오들은 모두 업로드 폼이 있어 가능했지요.


사용자 삽입 이미지

오프라인이었다면 폼 대신 미소 짓는 직원이 사용자를 맞이할 테지만요. 🙂

이처럼 웹 폼은 결제, 등록, 데이터 입력 등 모든 실행과 결정의 중재자 역할을 하기에 성공적인 웹 애플리케이션의 중심축이 될 때가 많습니다. 또한 완벽한 인터넷 사용경험을 맛보려면 완벽한 폼 요소와 완벽한 사용 흐름이 모두 필요하죠. 웹 폼은 사용자의 긍정적인 경험을 열어주는 문지기도 되고, 그 자체만으로 이용 경험을 극적으로 바꿔주는 열쇠도 됩니다. 이처럼 중요도가 높은 웹 폼인데도 그동안은 많이 소홀히 다뤄지고 있는 실정이죠.ㅜ_ㅡ

그러나 사실 폼은 사용자에게는 거추장스럽고도 불필요한 존재일 뿐입니다. 사이트에서 무언가 원하는 목적을 이루려면 꼭 가입 폼이 필요해 어쩔 수 없이 거치는 것뿐이죠. 회원가입 버튼을 눌렸다가 별별 질문이 길게 나열된 가입 폼에 지레 질렸던 경험이 있진 않나요? ‘헉..이걸 언제 다.. 나중에 가입하자~’ 장문의 질문을 보고 ‘뒤로가기’ 버튼을 누른 경험, 모두 있으실 거예요. 뭐 거기까진 좋습니다.  

폼의 무수한 필드를 채워나가며 이런 것까지 기입해야 하나 싶은 생각을 꾹 참고 애써 다 작성했습니다. 그런데, ‘다음’ 버튼을 누르는 순간 애써 작성한 폼이 뭔지 잘 알지도 못하는 오류로 인해 다음 단계로 넘어가지 않고, 그동안 입력한 내용마저 싹 사라져 깨끗이 빈 필드로 돌아온다면요? 그쯤 되면 좋은 사용자경험은커녕 사이트에 대한 인상이 부디 나빠지지 않기를 바라는 것도 욕심입니다. 옮긴이가 전하는 말처럼 사용자 경험은 예상 외로 작은 부분에서 많은 영향을 받게 되니까요.

저자 루크 로블르스키는 각종 웹 폼의 형태와 성격, 구조 등에 대한 상세한 설명을 하기 위해 수많은 테스트와 사례를 조사하였습니다. 덕분에 책에서 풍부한 예시를 접할 수 있고, 여러분의 각 상황에 맞는 폼이 어떤 것인지를 찾을 수 있는 통찰을 얻게 됩니다. 객관적인 데이터를 근거로 한 사실과 통찰만이 아니라, 저자가 쌓은 풍부한 경험과 선도자 역할을 하는 디자이너들의 견해까지 담아 웹 폼에 대한 다양한 이야기를 들을 수 있죠. (게다가 책에 나오는 이미지들을 플리커에 공개해두어, CC 라이센스 하에 마음껏 사용하셔도 된다고 합니다.)


사용자 삽입 이미지

상향 정렬 항목 타이틀에 대한 아이트래킹 데이터

사용자 삽입 이미지

우측 정렬된 항목 타이틀에 대한 아이트래킹 데이터

사용자 삽입 이미지

좌측 정렬된 항목 타이틀에 대한 아이트래킹 데이터

그런데 이 책, 『웹 폼 디자인 : 고객을 끌어당기는 폼 디자인의 원리』는 마지막에 이르러 여태껏 설명했던 비법들과는 관련 없는 듯한 결론을 내버립니다. 바로 ‘폼은 사라지는 게 이상적이다’라는 결론이죠. 하지만 본질적으로 폼의 역할 자체를 부정하는 것은 아닙니다. 그저 사용자에게 무례하게 질문하거나, 일방적인 요구만이 담긴 기존의 폼을 지양하고, 사용자 스스로 즐길 수 있는 폼을 만들어야 한다는 것이죠. 마치 게임처럼 사용자가 즐기며, 필요한 정보를 스스로 제공할 수 있는 폼을 만들자고 이야기합니다. 눈에 잘 보이는 메인 페이지나 제공 콘텐츠에만 관심을 갖지 말고 폼 디자인을 더 주의 깊게 살펴보아야 하는 이유가 분명 ‘있다’고 말입니다.

저자는 이렇게 주장합니다.

사용성 엔지니어, 웹 개발자, 프러덕트 매니저, 시각 디자이너, 인터랙션 디자이너, 인포메이션 아키텍트 등 어떤 디자인 분야에 속해 있든지 여러분은 웹 폼 디자인에 어떤 방식으로든 관여하고 있다. 과연 읽을 필요가 없는 사람이 있을까?


이미 이 책을 읽으신 분들(원서로)이 올리신 서평이 있으니 같이 참고하세요.

강규영 님의 Intellectual Wanderlust

실제 사이트에서 인용된 예시가 풍부한 점, 아이 트래킹이나 필드 테스팅 등을 통해 수집한 비교적 객관적인 자료에 근거하고 있는 점 등이 마음에
듭니다.
각 장 제일 끝에는 내용을 한 페이지에
요약한 Best Practices 섹션
이 있는 구성도 좋았습니다(물론 요약인 만큼 “이렇게 저렇게 해라” 정도의 얘기만 나오기 때문에,
왜 그렇게 해야하는지에 대한 설명이 필요하면
본문을 읽어봐야겠죠).
……
(원문은 http://alankang.tistory.com/146)

송치형의 웹 프로그래밍 노트

요즘 어떻게 훌륭한 웹 폼을 만들 수 있을까에 대해 고민하고 있습니다. 웹 프로그래밍에 입문한 뒤 한참 동안은 폼 만드는게 쉬운 줄 알았습니다.
그런데 시간이 지날수록 폼 만드는게 겁이 나더군요. ㅡ.ㅠ 라벨의 위치는 어디에 놓아야 할지, 데이터 Validation은 어디에서 할지, 에러
메시지와 헬프 메시지는 어떻게 보여줄지 등등… 여기에 더해 Ajax가 들어가면 또 한층 복잡해지는 것 같습니다. HTML/CSS, 서버
프로그래밍 작업을 혼자 하고 있는 저로서는 특히 HTML/CSS 단을 만들 때 어려움을 느낍니다.

……

(원문은 http://webprogramming.tistory.com/5)

.

6 thoughts on “성공하는 폼 디자인의 비밀은?

  1. 도모

    우와 번역서 나왔네요. 좋은 책 감사합니다. 로젠필드 미디어의 다른 책들도 번역하실 예정이신가요?

    Reply
    1. ks.han

      관심가져 주셔서 감사합니다.
      멘탈 모델(Mental Model)도 번역은 끝났고, Rosenfeld의 책 몇몇 권도 준비 중에 있습니다.

      Reply
  2. 녹차의맛

    이 책은 그냥 읽고마는 것이 아니라 웹서비스를 하고 있다면 정독해놓는 것이 좋을 듯 하네요. 기획, 디자인, 설계 등 모든 기본기를 튼튼하게 하는 책입니다.
    완전 강추입니다.!

    Reply
    1. ks.han

      감사합니다.
      저희 블로그에서만 칭찬해 주시지 말고,
      블로그에 서평이라도 올려주시면….. ^^a

      Reply
  3. Pingback: 스마트헤드 - 블로그

  4. Pingback: 오른손잡이의 왼손으로 그림그리기

댓글 남기기