바닥부터 시작하는 UX 스터디 03
UX 견습생의 User Inyerface 웹페이지 뜯어보기: 두번째 화면
이번 포스트를 준비하기에 앞서, 내 스터디를 주기적으로 봐주고 있는 DD Kim(아주 고마운 분이다)은 이 화면의 'Placeholder(플레이스홀더)'가 매우 짜증난다고 말했다. 사실 그가 이런 반응을 보인 것은 이번이 두 번째로, 우리가 UX 스터디를 위해 이 웹사이트를 처음 열어보았을 때에도 그는 플레이스홀더는 왜 저기 있는 거냐며 분노를 금치 못하였던 전적이 있다. 대체 플레이스홀더가 무엇이기에 User Inyerface는 현역 UX 디자이너에게 이토록 원한을 사고 만 것일까?
우선 플레이스홀더가 뭔지 모르기 때문에, 이를 알아보기 위해 구글에 플레이스홀더를 검색해 보았다. 검색결과 1페이지부터 "플레이스홀더를 사용하지 마세요" 라는 아티클이 눈에 들어온다. 정말로 플레이스홀더는 여러 사람들에게 미움받고 있는 존재인 걸까? 아니, 구글 검색만으로 쉽게 속단할 수는 없다. 보다 공신력 있는 자료가 필요하다.
바로 닐슨 노먼 그룹의 웹사이트에 접속하였다. 닐슨 노먼 그룹은 미국의 UI/UX 컨설팅 회사로, 참고하기 좋은 UX 관련 아티클이 많이 올라와 있다. 플레이스홀더라고 검색하니 검색 결과가 주르륵 나온다. 자연스럽게 제일 첫 문장에 눈이 간다.
"Placeholders in Form Fields are harmful"
(양식 입력란의 플레이스홀더는 해롭다)
...? 규모있는 UX 컨설팅 회사에서도 플레이스홀더는 그다지 환대받지 못하는 것 같다. 그렇다면 이번 포스트에는 바로 그 화제의 플레이스홀더가 무엇인지, User Inyerface 웹사이트에서는 이를 어떻게 사용하고 있는지 알아보는 것도 괜찮지 않을까?
플레이스홀더: 생각보다 익숙한 존재
양식 입력 화면에서, 플레이스홀더는 입력란 안에 들어가 있는 옅은 회색의 텍스트를 가리킨다. 컴퓨터와 디지털 기기와 뗄레야 뗄 수 없는 현대인들에게는 이름도 모르면서 얼굴만은 익숙한 동네 친구같은 존재나 다름없다.
아마존 웹사이트의 회원가입 양식 입력란따라서 웹이나 앱에서 양식 입력을 해본 경험이 있는 사람이라면 다들 플레이스홀더가 어떤 역할을 하는지는 굳이 언급하지 않아도 알고 있을 것이다. 플레이스홀더는 양식 입력란 안에서 추가적인 힌트나 설명, 예시를 제공하여 사용자가 쉽게 양식을 완성할 수 있도록 도와준다. 일반적으로 플레이스홀더는 사용자가 양식 란에 입력하면 모습을 감춘다.
User Inyerface의 양식 입력란과 플레이스홀더
User Inyerface의 플레이스홀더플레이스홀더는 보통 양식 입력란의 부가 설명을 위해서 사용되지만, 종종 어떤 양식의 경우에는 플레이스홀더가 라벨의 역할을 대신하는 경우도 있다. User Inyerface의 이 화면이 바로 그런 경우이다. 플레이스홀더를 라벨의 역할로 사용하는 것은 주로 양식의 길이를 보다 간단하게 하거나 화면이 산만해 보이는 것을 막기 위해서 사용하는데, 닐슨 노먼 그룹에서는 이러한 경우 발생할 수 있는 여러가지 단점에 대해서 기술해 놓았다.(닐슨 노먼 그룹, Placeholders in Form Fields Are Harmful) 해당 글의 링크를 하단에 첨부해 두었으니 궁금한 사람은 참고해 보는 것을 권한다.
User Inyerface의 화면의 양식 입력란은 일견 크게 복잡하지 않아 보이나, 플레이스홀더가 라벨 역할을 하고 있는 데다가, 플레이스홀더 역할을 해야 할 부가 설명 텍스트가 양식 입력 화면 하단에 위치해 있다. 결국 사용자가 양식 입력을 하려면 시선을 아래 위로 왔다갔다 반복해야하는 번거로운 수고를 들여야 한다. 심지어, 본 화면의 플레이스홀더는 사용자가 직접 지우기까지 해야 한다.
사실 문제는 이게 다가 아니다
그렇다면 이 화면을 수정하기 위해서 지금의 플레이스홀더를 라벨로 옮기고, 제일 하단에 던져져 있던 입력 조건을 플레이스홀더로 옮기기만 하면 될까? 그러나 입력조건 텍스트를 보면 그리 간단한 문제가 아니다. 저 5줄의 문장이 전부 비밀번호 설정란의 입력 조건을 서술하고 있기 때문이다.
라벨을 제위치로 되돌려 보았지만 아직 문제는 많이 남아 있다플레이스홀더에 내용을 많이 넣게 되면 이전의 문제가 해결되기는 커녕 안 하느니만 못한 사태가 발생할 수도 있다. 그러니 이 쓸데없이 긴 입력 조건을 줄여서 하나로 만드는 작업도 필요하다. 하지만 그걸 고친다고 해서 이 화면의 문제가 완전히 해결되는 것은 아니다. 아직 이 양식 입력 화면에는 단순히 플레이스홀더 뿐 아니라 수많은 문제들이 산재해 있다.
가입이 쉬워야 회원도 많아진다
플레이스홀더는 이 양식화면의 지극히 작은 요소 하나에 불과하다. 실제로 이 화면을 복잡하게 만드는 요소는 보다 복합적으로 얽혀있다. 하지만 이러니 저러니해도 '어렵다'는 문제는 이 화면의 용도를 생각하면 굉장히 치명적인데, 왜냐하면 이 화면은 회원가입 양식이기 때문이다. 서비스를 만드는 사람들은 사용자가 많기를 원한다. 그중에서도 고정적인 이용자를 나타내는 '회원'은 서비스 입장에서 많으면 많을 수록 좋다.
하지만 아무리 서비스가 훌륭해도 회원 자격을 얻어내는 데 한 세월이 걸린다면, 그 서비스는 지속적인 수익창출이 어려울 것이다. 사용자들은 인내심이 많지 않다. 특히나 회원가입이란 사용자의 정보를 요청하는 일종의 계약서에 가깝다. 절차가 복잡하면 복잡할 수록, 설명이 부족할 수록 서비스에 대한 신뢰도와 가입율은 그에 반비례하여 떨어지게 된다. 그런 의미에서, User Inyerface의 양식 폼은 제 발로 찾아온 회원을 문전박대하는 수준에 가깝다.
정말 문제가 많이 남아있다닐슨 노먼 그룹의 '웹사이트 양식 사용성'이라는 글에서는 양식 입력 화면이 지켜야하는 10가지 내용에 대해서 서술하고 있다. 이 내용을 참고해 이 화면을 분석해 보자. 마찬가지로 하단에 해당 글의 링크를 첨부하였으니 관심있는 사람들은 참고해 보기 바란다.
우선 가장 눈에 띄는 것은 중간에 있는 의미불명의 애니메이션이다. 웹페이지는 공간감각이나 방향 감각이 없기 때문에, 사용자는 종종 웹에서 길을 잃은듯한 느낌을 받을 수 있다. 따라서 화면에는 사용자가 지금 어디쯤 와 있는지 안내해줄 수 있는 단서가 필요하다.(스티븐 크룩, 사용자를 생각하게 하지마!,p83) 이를 미루어 보았을때 User Inyerface 화면의 애니메이션 표시는 가입 단계를 표시하기 위해서 만들어진것으로 보인다. 하지만 그렇다면 굳이 애니메이션을 넣을 필요가 없는 데다, 양식 입력 페이지에 단계 표시를 또 할 필요가 없다. 어느 한 쪽을 수정하거나 삭제해야한다.
다음은 양식을 채워나가는 순서와 단계이다. 사용자를 고민하지 않게 하려면 관습적으로 자연스러운 순서로 단계가 진행되며, 묶을 수 있는 작업은 그룹화하여 단순화하는 것이 좋다. 지금의 화면은 비밀번호를 이메일(아이디가 될)보다 먼저 물어보는 데다가, 이메일 입력란은 나눠서 입력하게 만들어 복잡하다.
또한 사용자로 하여금 무엇을 어떻게 입력해야하는지 정확하게 안내하고, 만약에 사용자가 틀렸을 때에는 어디가 잘못되었는지 바로 알 수 있게끔 해야한다. 회원가입 양식에서 서비스는 사용자에 대해 이미 요구하는 것이 많은 상황이다. 그런데 거기다가 오류 탐색까지 사용자에게 떠넘긴다면 사용자의 기분이 어떨까? 아마 일말의 인내심마저 전부 사라지고 과제를 중간에서 그만둘 지도 모른다. 위 이미지의 화면이 딱 그렇다. 요구하는건 더럽게 많으면서(하단의 7번 항목을 보라!) 틀리면 뭐가 틀렸는지도 제대로 안 알려준다. 이용약관에 동의 하는 걸 잊지 말라는 오류 표시만 띄울 뿐이다. 게다가 오류 표시 색상은 긍정을 나타내는 파란색인 데다, 자동으로 채워져 있어서 신경쓰지 않아도 되겠다고 생각했던 이용약관 체크박스의 문구는 맙소사, "나는 이용약관에 동의하지 않습니다" 가 기본 셋팅이다!
이 청개구리짓의 화룡점정은 제일 마지막에 있는 양식 제출 버튼에 있는데, 대놓고 취소 버튼을 누르도록 유도하고 있다. 그게 꼭 나쁘다는 건 아니다. 취소 버튼이 좀 과하게 거대하긴 하지만 개인정보 등 민감한 정보를 제출하는 가입 양식의 경우 사용자가 언제든지 작업을 중단할 수 있도록 취소버튼이 더 눈에 띄는 게 좋다고 한다.(닐슨 노먼 그룹,Website Forms Usability: Top 10 recommentions) 문제는 취소를 눌렀을 때다.
취소하시겠습니까? 예 / 취소모호함은 UX 디자인에서 지양해야 하는 요소 중 하나이지만, 특히나 양식 입력 같은 경우에는 더욱 더 지양해야 하는 요소다. 위 팝업창은 둘다 취소를 긍정한다는 의미로 읽힐 수 있기 때문에 혼란스럽다. 또한 버튼 색상도 쉽게 혼란을 불러올 수 있다. 최악의 경우, 실수로 취소버튼을 누른 사용자가 다시 화면으로 돌아가기 위해서 무의식적으로 빨간 버튼을 눌러 입력한 내용을 전부 날리거나, 과제를 중단하고 싶은 사용자가 녹색의 취소 버튼을 눌러 다시 화면으로 돌아가는 등 사용자를 번거롭게 만들 가능성이 높다.
물론 제출 버튼과 구분이 쉽지 않은 오른쪽의 리셋 버튼도 문제가 있다. 중요한 정보 작성하다가 실수로 다 날려먹을 수 있는 옵션을 왜 주는 걸까? 자칫 잘못해서 누르기라도 하면 죄다 삭제되고 처음부터 시작해야한다. 어차피 더이상 진행하고싶지 않은 사용자는 취소를 누를거고, 계속 진행할 사용자는 다음을 누를것이니, 해당 버튼은 이 화면에 있을 필요가 없다.
화면을 고쳐 보자
그렇다면 이러한 문제점들을 고려하여 이 화면을 한번 수정해 보자.
User Inyerface 두번째 화면 수정안사용자를 헷갈리게 만들었던 모호한 문구와 표현들을 수정하고, 시각적으로 통합할 수 있는 부분들은 합쳐서 표현하였다. 버튼과 입력란 역시, 진행 방향을 고려해 순서와 위치를 조정했다.
User Inyerface 두번째 화면 수정안 2마찬가지로 취소 버튼을 누르면 나오는 팝업도 중의적인 부분들을 보다 명확한 언어로 바꾸어 표현해 보았다.
Comment from DD Kim(UX Designer)
1.색상이 적용된 버튼과 고스트 버튼이 함께 있을 때 색상버튼은 사용자에게 ‘진행을 위해서라면 이것을 누르세요!’라고 말을 거는 셈이야. Cancel 버튼을 의도를 가지고 잘 보이게 한 것을 알지만 그럼에도 둘의 색상을 바꾸는 것에 대해서 한 번 더 생각하라고 제안합니다.
2.메일 주소 도메인의 default를 gmail로 설정해두었는데, 과연 gmail이 대부분의 사람들이 입력할만큼 범용적인 메일일까? 직접 입력을 default로 두는 형태를 고려해봐요.
3.마지막으로 Are you sure you want to cancel? 이 질문 팝업! 여기에는 긍정적인 초록색의 Yes 버튼과 부정적인 Return을 두었는데, 색상이 의미하는 바가 애매해요. Return은 데이터가 삭제되지 않고 유지되는 방향이고, Yes는 데이터가 삭제되는 형태인데 오히려 녹색으로 권장하고 있잖아? ‘긍정’보다는 ‘삭제’될 때 경고성을 주면 좋아. 이건 헷갈리지 말라고 1초 생각한 예시. 좋은 예시 아니고 1초 생각한 거. 예를들어, 입력한 내용이 사라집니다. 진행하시겠습니까? delete(붉은 계열) / cancel(회색계열) 이런 식으로 할 수도 있겠지. 사실은.... 입력한 것이 고작 메일주소와 비번인데 경고 없이 뒤로가기 해주고 싶다 하하.
※ 본 연구 포스트는 Bagaar로부터 웹사이트 내용 게재 허락을 받았습니다.
User Inyerface 웹사이트: http://www.userinyerface.com
※ 양식 입력 화면 관련 참고문헌
https://www.nngroup.com/articles/form-design-placeholders/
https://www.nngroup.com/articles/web-form-design/
