들어가는 말
사용자에게 받는 마케팅 수신정보 동의는 기업에게 비즈니스적으로 큰 영향을 끼친다. 푸쉬 알람을 통해서 유입되는 고객이 그만큼 많기 때문이다. 그러기 위해서는 회원가입과 로그인 절차가 필요하고 그 과정에서 수신정보 동의를 받아야 한다. 하지만 이 과정에서 이탈하는 사용자도 있고 애초에 동의하지 않는 사용자도 많다. 그렇기에 사용자에게 거부감 없이 가입을 시키는 것이 UI/UX 디자이너의 큰 과제라고 할 수 있다.
현재 많은 고객들을 유치하고 있는 웹사이트 중에 하나를 선정하여 그 과정을 살펴볼 것이다. 내가 선정한 사이트는 오늘의집이다. 기본적으로 판매하는 제품이 많고 그만큼 혜택이 많아서 보여줘야 하는 광고물의 양도 비례하게 많다. 동시에 오늘의집에는 특이한 컨셉으로 사용자들을 유치하고 있는데 바로 커뮤니티이다. 인테리어 기업이지만 사이트 내에서 다른 사용자들의 인테리어 스타일을 엿볼 수 있다. 집이란 공간은 남이 쉽게 볼 수 없는 공간인 만큼 이 커뮤니티는 더 매력적인 공간이 되는 것이다. 그래서 이러한 점들을 가입절차와 수신동의를 얻게 하는 데 어떻게 활용되었는지 살펴보겠다.
1. 오늘의집, 회원가입 굳이 해야해?
오늘의집 사이트에 들어가게 되면 보이는 첫 메인화면이다. 사용자는 화면에 글씨를 읽기보다 스캔을 하게 되는데 왼쪽 위부터 오른쪽 아래로 훑게 된다. 가장 눈에 띄이는 것들을 보자면 "첫 구매 2만원 할인"과 "여기가 24평이라고?" 가 되겠다. 이유는 간단하다 할인혜택은 오늘의집 메인색으로 채워져 있어 눈에 띄고 24평 관련 글은 메인화면 중에서도 메인이라고 할 정도의 사이즈이기 때문이다. 그 외에도 메인사진 바로 오른쪽에 위치한 광고도 눈에 띄일 수 있다.
여기서 기존 사용자가 아닌 새로운 사용자들은 혜택을 누리기 위해 가입을 고민하게 된다. 그리고 나와 같은 관심사를 가진 사람들의 글을 읽기 위해 24평관련 글이 아니더라도 커뮤니티를 사용하고자 하면 글을 클릭하게 될 것이다.
글을 읽다가 한 두번의 스크롤 끝에 오늘의집은 가입을 해야만 볼 수 있다며 가입을 요구하게 된다. 이런식으로 사용자들로 하여금 소속감을 이용하여 가입을 유도하고 있다.
2. 가입 어떻게 하는데?
비로소 가입하기에 도달하게 되면 로그인 화면이 나오게 된다. 이때 글을 읽다가 가입을 할 때와 제품을 구매하다가 가입을 하는 두 경우, 가입 UI가 다르다.
제품을 구매하려는 경우 제품의 옵션을 입력한 상태에서 로그인을 진행하기 때문에 새로운 창에서 로그인 및 가입을 진행하고 돌아올 경우 다시 입력해야 한다. 이때 사용자는 불편함을 느끼고 이탈할 수도 있다. 그렇기 때문에 이런 경우는 팝업창으로 진행하게 된다. 로그인을 마치게 되면 보고 있던 화면에서 하고 있던 과제를 다시 수행할 수 있게 되어 사용자는 큼 불편함 없이 목표까지 도달하게 된다.
다시 돌아와 로그인 화면을 보자면, 이메일 가입과 간편 로그인 3가지 버튼, 비회원 주문으로 크게 3개로 나눌 수 있다. 이메일과 비밀번호 입력란은 연하게 표현되었고 반대로 간편로그인은 색이 채워져 있어 클릭을 유도하게 된다. 회원가입을 진행하게 되면 여러번의 클릭과 입력을 수행해야 되기 때문에 기업에서도 간편로그인을 유도하게 되는 것이다. 비회원은 기업 입장에서 비즈니스적으로 긍정적인 효과를 얻기 어렵기 때문에 가장 아래 시선이 잘 가지 않는 곳에 두었고 버튼으로 만들지 않으며 색도 단조로운 회색으로 하였다.
로그인에 문제가 있는 경우는 흔치 않지만 존재하기 아주 약하게 표시되었고 클릭하게 되면 질문이 많은 경우를 나열한 FAQ와 Q&A를 할 수 있는 문의공간이 나오게 된다.
새로운 사용자가 회원가입을 하게 될 경우 동의 항목에 체크를 하게 된다. 모든 필수 체크 항목이 체크되면 "동의하고 계속하기" 버튼이 활성화가 된다. 이 뒤로 추가 정보를 입력하게 되는데 닉네임을 입력하게 된다. 동시에 어떤 이메일로 가입이 되었는지 보여지게 된다. 닉네임은 커뮤니티 활동에서 매우 중요하게 작용되는데 실명일 경우 커뮤니티 활동량이 적어지기 때문이다. 그렇지만 닉네임을 입력하게 유도하는 과정도 번거로우면 안 된다. 회원가입을 완료하면 자동으로 로그인이 되어 보고 있던 글을 다시 읽을 수 있게 보고 있던 화면으로 돌아간다.
3. 어떻게 돌아가는거야?
보기 쉽게 도식으로 그려보자면 위와 같은 그림이 나온다.
4. 감동적인 디테일 요소들
받지 않은 쿠폰이 있다면 쿠폰받기를 유도하는 메세지가 뜬다. 또한 구매버튼 밑에는 할인 광고 배너가 떠 있으며 장바구니 버튼보다 바로구매 버튼이 색이 채워져 있어 눈에 띈다. 이 모든 요소가 구매를 유도하고 있다.
커뮤니티에 글이 많으니 필터가 존재한다.하지만 어떤 필터 값을 입력할 지 고르는 것도 중요하다. 필터값에 대한 항목을 가로로 정렬하였고 마우스 호버링 시에 드롭다운이 되어 선택을 할 수 있게 된다. 여기서 중요한 것은 드롭다운 페이지에서 마우스가 잠깐 벗어난다고 메뉴가 닫히지 않는다는 것이다. 창이 작은 경우 마우스가 잠깐 벗어나기도 하는데 다시 메뉴를 들어가야 하는 번거로움이 생긴다. 여기서는 마우스가 영역을 벗어난 지 0.n초 후에 닫히는 것으로 설정한 것 같다. 사용자를 생각하는 세심한 배려가 느껴진다. 그리고 이러한 필터형태가 세로로 정렬된 필터 형태보다 훨씬 편한 것 같다.
그 이유는 이러하다. 필터를 사용할 때 부모란에서 자식란으로 넘어갈 때 왼쪽 마켓컬리의 사진을 보면 이동하는 공간이 다소 좁다. 이렇게 될 경우 자식란을 살펴보러 마우스를 움직일 때 다른 부모란에 마우스 커서가 닿아 선택 영역이 바뀔 수 있다. 하지만 오른쪽 오늘의집 같은 경우는 부모란에서 자식란으로 넘어올 때 가로 영역으로 넘어 오기 때문에 부모란이 바뀌는 경우는 없다. 하지만 이 경우 부모란이 많아지면 보기에 복잡해진다. 마켓컬리도 그러한 이유 때문에 불편하더라도 세로 스크로 메뉴를 사용하지 않았을까 싶다.
광고 배너에 "막막한 - 한방에 해결하세요" 글자는 그대로지만 사용자가 불편해 하는 것들만 애니메이션을 집어 넣음으로써 불편함의 핵심이 눈에 띄고 다양한 메세지에 대한 내용을 일관성 있게 보여주어 어떤 것이 불편한 지에 대해 집중하게 되고 빠르게 공감할 수 있게 하였다.
설치 관련 페이지에서 끝까지 스크롤을 하였다는 것은 사용자가 고민하고 있거나 망설이고 있다는 것이다. 이런 사용자들의 심리를 분석하고 오늘의집은 스크롤 끝에 "아직 망설리고 계신가요? 상담은 무료입니다." 라는 메세지를 전달하여 사용자가 조금 더 편하게 접근할 수 있게 하였다.
5. 이런 점은 개선하는 게 좋을 것 같다!
상품 카테고리를 보면 실물 사진들과 텍스트로 묶인 카드가 가로로 쭉 나열되어 있다.
각 사진 뒤에는 어두운 배경을 깔아두어 이미지가 돋보이게 할 수 있으며 그 뒤에 가로로 긴 배경을 하나 더 두어 "여기는 카테고리 영역" 이라는 생각을 심어줄 수 있다. 이렇게 두 줄로 묶어서 보여주면 가운데 시선이 집중되고 칸이 세로로 길어져 상대적으로 카테고리 영역이라는 느낌이 확실히 든다.
원래는 위 아래 콘텐츠가 카테고리랑 상당히 가깝다. 하지만 콘텐츠 사이의 거리를 마냥 벌리기에는 갑자기 카테고리만 동떨어져 보일 수 있다. 나의 개선사항은 이 문제를 영역의 세로값을 늘리면서 해결할 수 있다.
마무리 글
오늘은 오늘의집의 UI/UX에 대해서 알아보았다. 내가 독립할 때 다른 사람들의 첫 독립 경험을 보며 위안을 삼았고 참고 삼아서 나의 집도 인테리어를 하였다. 많은 도움이 되었고 사용할 때 큰 불편함이 없었는데 이제 와서 자세히 분석하여 보니 그 뒤에서 사용자를 위해 고민하는 수 많은 사람들의 노력 덕분이라는 것을 알게 되었다. 나 또한 그들이 가는 길을 걷고 있는 사람으로서 존경심이 들었고 사용자들의 생각을 읽는 개발자/디자이너들의 생각을 추적하는 것이 재밌고 흥미로웠다.
'스파르타코딩클럽' 카테고리의 다른 글
| 스코클 4주차 WIL (마지막 주) (0) | 2023.12.15 |
|---|---|
| 스코클 사전캠프 3주차 WIL (1) | 2023.12.08 |
| UI/UX 용어 정리 (2) (0) | 2023.12.04 |
| 사용자의 마음을 읽는 디자인 (0) | 2023.12.04 |
| 스코클 사전캠프 2주차 후기 (0) | 2023.12.01 |
