노션 웹사이트에 폼을 더하다. 폼플렛입니다 :)

폼플렛 디자이너의 생생한 인사이트를 담은 아티클이 발행되어 공유드리고자 합니다.

노션 웹사이트에 폼을 더하다.

안녕하세요👋👋

노션 웹사이트 제작부터 폼 빌딩, 데이터 관리까지 해주는 올인원 웹 서비스 <폼플렛>의 디자이너 최도은입니다🤩

저희 <폼플렛>은 지난 11월 13일에 팀 빌딩이 되어, 1월 5일 MVP 배포를 목표로 빠르게 달려온 팀인데요,

아무래도 빠른 시간 내에 프로덕트 기획부터 디자인, 개발까지 바쁘게 진행하다보니 놓치고 지나가는 부분이 많았어요😢

현재는 배포 이후 베타 테스트와 유저 테스트를 진행하며 발견되는 문제들을 해결하는 것과 사용성 개선에 집중하여 프로덕트를 디벨롭해가고 있는데요,

이 과정에서 주니어 디자이너로서 제가 배우게된 것들이 많아 메이커로그로 작성해 공유해보려고 합니다😊

오늘은 그 중에서도 모든 서비스의 시작이라고 할 수 있는 로그인/회원가입 부분의 UX/UI 디자인을 할 때 주니어라면 놓치기 쉬운 몇가지에 대해 이야기 해보려고 해요!

로그인/회원가입 UX/UI 디자인-놓치기 쉬운 5가지

1️⃣ 플레이스홀더

플레이스홀더는 입력 필드 안에 쓰여 있는 글을 말합니다. 사용자가 입력을 시작하기 전까지 일반적으로 밝은 음영으로 표시되는 텍스트죠.

플레이스홀더

최근에는 스마트폰 사용의 증가로 공간을 절약할 필요가 생겼고, 필드 레이블을 플레이스홀더처럼 입력 필드 안에 쓰는 사례가 증가했습니다.

필드 레이블을 플레이스홀더처럼 입력 필드 안에 쓰는 경우

하지만 위와 같이 필드 레이블을 플레이스홀더처럼 쓰는 경우, 입력을 위해 필드를 선택하는 순간 사용자가 해당 영역이 어떤 것을 작성해야하는 영역인지 인지할 수 없다는 문제가 있습니다.

또한, 입력해야하는 텍스트의 형식을 안내하기 위해 별도의 안내 메시지를 주변에 함께 배치해야합니다.

따라서, 폼플렛은 필드 레이블과 플레이스홀더를 모두 사용하는 것으로 결정하였고, 플레이스홀더에는 입력하는 텍스트의 규칙이나 예시를 넣기로 하였습니다.

예를 들어, 폼플렛 계정의 비밀번호는 영문&숫자&특수문자를 포함해 8~15자로 쓰여야한다는 정책이 있는데요,

사용자가 이 정책에 따라 비밀번호를 만들 수 있도록 플레이스홀더에 해당 안내를 삽입했습니다.

이와 같이 플레이스홀더를 사용하니, 지금까지 진행된 십여 회의 베타테스트에서 폼플렛의 비밀번호 생성 규칙을 인지하지 못한 사용자는 없었습니다!

하지만, 이와 같이 플레이스홀더를 사용했음에도 사용자에게 혼란을 야기한 사례가 있었는데요😅

휴대폰 입력 전과 입력 후

폼플렛은 현재 휴대폰을 입력할 때 하이픈(-) 없이 숫자만 입력하면, 최종 형태가 자동으로 하이픈(-)이 삽입되어 보여지는 형태로 개발되어있는데요,

이에 사용자가 하이픈(-)을 제외하고 숫자만 입력할 수 있도록 위와 같이 플레이스홀더를 설정하였더니, 왜 플레이스홀더와 최종적으로 보여지는게 다른지 의문을 갖는 사용자 분도 있었답니다😂

이런 부분은 디자이너와 개발자가 반드시 선 논의 후 적용해야하는 부분인 것 같습니다!

2️⃣ 에러메시지

에러메시지는 오류가 발생했음을 알리고 사용자가 완료하고자 하는 프로세스를 일시적으로 중단시키는 역할을 하는데요,

로그인/회원가입에서는 주로 정책에 맞지 않아 사용할 수 없는 비밀번호라는 것을 알리거나, 이미 가입된 메일이므로 가입할 수 없다는 안내를 할 때 사용하게 됩니다.

에러메시지-아이디와 비밀번호를 확인해주세요.

에러메시지는 상술한 것과 같이 사용자의 프로세스를 중단시키고 경험을 지연시키기 때문에 친절하게 작성할 필요가 있습니다.

사용자의 열의는 이미 약해져 있기 때문에, 에러메시지는 프로세스를 포기하게 만드는 결정타가 될 수 있습니다😭

에러메시지는 다음과 같은 세 가지 목표를 달성해야 한다.

1) 문제가 있다는 것과 그 문제가 무엇인지 간단하고 명확하게 설명해야 한다.

2) 사용자가 중단됐던 곳으로 되돌아가 프로세스를 바로 끝낼 수 있도록 해결책을 제시해야 한다.

3) 지연되는 현재 상황을 가능한 한 즐거운 경험으로 바꿔야 한다.

출처: 마이크로카피(UX 디자이너의 글쓰기) - 킨너렛 이프라 https://product.kyobobook.co.kr/detail/S000001804970

위와 같이 에러메시지는 사용자가 무엇을 잘못했는지와, 해결을 위해 어떻게 행동해야하는지를 명확히 제시해야하는데요,

로그인/회원가입의 경우 대다수의 사용자가 이미 수없이 많이 겪어온 경험이기에, 폼플렛은 위 조건을 모두 충족시키지만 과하게 길어지는 에러메시지보다 짧고 함축적인 에러메시지를 택했습니다.

폼플렛의 회원가입 에러메시지

비밀번호 에러메시지의 경우, '사용 불가능한 비밀번호입니다.'라고 표시하여 사용자가 무엇을 잘못했는지 명확하게 알리고, 그렇다면 어떻게 수정해야하는지는 플레이스홀더를 통해 확인할 수 있도록 하였습니다.

비밀번호 확인 에러메시지의 경우에도, '비밀번호가 일치하지 않습니다.'라고 표시하여 잘못된 지점을 명확히 알렸지만, '위에 입력한 비밀번호와 동일하게 다시 입력해주세요.' 등의 긴 에러메시지를 입력하는 것은 지양하였습니다.

실제로 베타 테스트에서 만난 사용자들의 경우 이러한 에러메시지에 노출되었을 때 의문을 갖지 않았고,

이것은 사용자들이 이미 충분히 많은 로그인과 회원가입을 겪어 왔기 때문에 경험의 일관성에서 야기된 결과라고 생각했습니다.

3️⃣ 본인인증 방식 확인

(중략...)

👇더 읽어보고 싶으시다면 아래 링크를 확인해주세요👀

https://formflet.ghost.io/team-story-login-uxuidesign/

마무리

정리하고 나니 왜 요즘 많은 서비스들이 소셜 로그인을 선택하는 지를 더 절실히 알게되는거 같습니다...

살면서 경험해온 수많은 서비스들에서 대부분 거치게 되었던 로그인/회원가입이라 쉽게만 생각했었는데, 생각보다 고려하고 신경써야할 부분이 더 많았네요😂

어쩌다보니 첫 메이커로그는 로그인/회원가입의 UX/UI 디자인에 대해 적게 됐지만...

저희는 현재 로그인/회원가입이 필요 없는 간단한 웹사이트가 필요한 분들을 위해 딱!인 노션 웹사이트 제작 웹 서비스를 만들고 있는데요🤩

✅노션 페이지를 나만의 주소를 가진 웹사이트로 만들고,

✅폰트를 바꾸거나 CTA를 추가해 꾸미고,

✅폼을 추가해 설문하고,

✅데이터 관리까지 할 수 있는 올인원 웹 서비스입니다!!

빠르게 간단한 랜딩페이지를 만들어야하는 분들을 위한 최적의 서비스이니 한번씩 관심 가져주시면 좋을 것 같습니다☺️

폼플렛은 지금 바로 아래 링크를 통해 사용해보실 수 있습니다!

폼플렛에 많은 관심 부탁드립니다🙏💜

폼플렛 써보러가기 : https://www.formflet.site/

*폼플렛은 웹 전용 서비스이오니 PC로 접속해주시기 바랍니다!