[📓아티클] 라프텔의 로그인/회원가입 페이지 UX개선

 

오늘의 아티클 :

https://brunch.co.kr/@laftelux/6

CS 담당자를 감동시키는 로그인/가입 UX개선기

 

 

 

---

1. 아티클 내용 요약

 

- 로그인/가입 화면 특징

복잡하거나 불친절한 프로세스는 사용자의 탈ㅇㄹ 유ㅠ발.

간단하고 직관적인 UX

유저들에게 첫인상을 남기는 중요한 단계

 

 

- 라프텔 팀의 로그인/가입 화면 리디자인 목표

신규 유저는 빠르고 쉽게 가입 화면에 접근, 기존 유저는 로그인 한 수단을 잊지 않도록 하는 것.

1. 불필요한 뎁스 줄이기
   : 기존 방식은 로그인 버튼을 누르면 상세화면이 열리면서 세부적인 로그인 방법을 선택하는 뎁스로 구성되어있었는데, 바로 랜딩화면으로 보낼 수 있도록 개선하면서 뎁스를 줄였다.
2. 로그인과 가입 버튼을 하나로
   : 이메일 입력 후 기존 계정 유무를 판별하는 과정을 거쳐 로그인 플로우 혹은 가입 플로우로 이동할 수 있게 개선했다. 이 때 두 타입의 프로토타입을 설계해 유저 사용성을 테스트했다.
3. 툴팁으로 마지막으로 로그인한 수단 알려주기:
   : 다양한 소셜 계정으로 로그인할 수 있어 사용자 정보가 기억나지 않는다는 VOC가 주기적으로 들어온다. 로그인을 시도하는 사용자가 막힘없이 빠르게 로그인할 수 있도록 마지막으로 로그인한 수단을 알려준다.
4. 에러 케이스 개선
   : 사용자에게 올바른 메시지를 전달하기 위해 모달 창에 뜨는 문구를 친절한 UX라이팅으로 개선했다.

   -> 결과적으로 유저 플로우가 훨씬 단순해지고 유저의 로그인 계정 문의도 줄었다. 

 

 

 

2. 인사이트

 

- 단계를 거쳐 최종안이 어떻게 선출되는지까지의 과정이 담겨있어 실무 이해를 높일 수 있었다. 특히 유저 플로우를 개선하는 화면을 직접 보여줘서 현업에서 어떤 식으로 유저 플로우를 제작하는 지를 알 수 있었다.

- 어제 읽은 UX라이팅에서 배운 내용 중 하나로 보이스 톤이 떠올랐다. 같은 블로그에 UX라이팅 관련 문서를 읽은 적이 있는데, 보이스톤 가이드를 잡은 후 통일감 있게 구성하니 유저들에게 조금 더 친근하게 다가갈 수 있는 것 같다. 

 

- 로그인/회원가입 개선 아티클을 읽다 보니 유저에게 또 다른 첫 인상을 남기는 중요한 단계 중 하나인 온보딩 페이지에 대한 이야기도 궁금해져서 다음 기회에 온보딩 페이지 관련 아티클을 같이 읽어봐도 좋을 것 같다.

- 툴팁이라는 UI구성요소를 이 아티클에서 처음 알게 되었다. 툴팁은 사용자 인터페이스에서 사용자에게 직접 설명하지 않으면 알 수 없거나 익숙하지 않은 개체를 이해하게 하는 데 도움을 주는 요소이다. 

개체에 텍스트 라벨이 없을 때, 보충 설명 또는 추가 정보가 필요할 때, 그리고 사용자가 잘 사용하지 않는 기능을 설명할 때 사용하는 것이 일반적이다. 그리고 사용자가 팁의 내용과 상호작용 해야 하는 경우에는 사용하면 안된다.

 

3. 참고자료

- 툴팁 :

https://metavision-blog.xyz/entry/UI-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90%EC%84%9C-%ED%88%B4%ED%8C%81Tool-Tip-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%93%B0%EB%8A%94-%EB%B2%95

UI 디자인에서 툴팁(Tool-Tip) 제대로 쓰는 법