당신은 주제를 찾고 있습니까 “회원 가입 ux – [앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype“? 다음 카테고리의 웹사이트 you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 ux sun 이(가) 작성한 기사에는 조회수 7,113회 및 좋아요 319개 개의 좋아요가 있습니다.
회원 가입 ux 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 [앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype – 회원 가입 ux 주제에 대한 세부정보를 참조하세요
#프로토타입 #디자인팁 #디자인리뷰
안녕하세요. 오늘도 엄청 긴 영상을 갖고 왔어용 ^^ 아이디어 스케치 한 다음 보통 유엑스 디자이너들은 본인의 아이디어가 어떤지 유저빌러티 테스트 (Usability Testing)을 하는데..그때 프로토타입을 사용해서 많이 테스트를 해요.
오늘은 지난 영상에서 보여드렸던 와이어프레임을 프로토타입을 해서 제가 왜 이런 레이아웃,플로우를 만들었는지 프로토타입한거 보면서 설명을 해드릴거에요.
제가 설명한 것들이 모두 다 UX 디자인 하실때 여러분들도 고려하면서 디자인하시면 좋을 거 같아서 공유해요..
영상이 전체 플로우대로 설명하려니 영상이 엄청 길었어요. 정말 자르고 자르고 편집해서 최대한 짧게 만들려고 했는데..그래도 거의 20분 영상이 되어버렸네요;;
좀 길더라도 UX 디자인 공부하시는 분들은 제가 알려드리는 팁들을 염두하시면서 영상보시고 디자인 해보세요. 도움이 조금 되지 않을까해서 공유해요.
그리고 마지막에 제가 오늘은 숙제 대신 여러분께 설문조사 부탁을 했어요.
여러분들이 유저가 되어서 설문조사에 응해주세요. 그러면 제가 그 데이터로 다음 영상에서 어떻게 UX가 좋은지 나쁜지 판단하는 기준을 어떻게 KPI 숫자로 만들어서 다음 디자인 단계로 넘어가는지 제 방법 공유해드릴게요.
오늘도 영상 봐주신 여러분 진짜 감사드리고 지난 번 아이디어 스케치 영상 유튜브에서 엄청 띄워줬나봐요..ㅎㅎㅎㅎ 댓글들이 엄청 달려서 놀랬어요~🥰🤩
더 열심히 하라는 뜻으로 알고 오늘 영상도 진짜 열정을 다해 제 진심을 담아 만들었어요. 오늘도 영상 봐주신 여러분 정말 감사드려요.
————————–
급하게 상담이 필요하신 분 / 멘토가 필요하신 분들을 위해 제가 1:1 상담 창을 만들었습니다.
1:1 Career Coffee Chat – https://calendly.com/uxsun/
이제 커피챗 https://calendly.com/uxsun/ 통해서 시간 잡아주시면 제가 자세하게 준비해서 1:1 상담해 드릴게요.
——————————————————
Time Stamp
0:00 미리보기
0:10 인사말
0:38 와이어프레임(wireframing)과 프로토타입(prototyping)의 차이점
1:50 [Step1] 회원가입 프로토타입 리뷰
2:00 UX Point 1 : 회원 가입 단순화
2:08 UX Point 2 : 다음 스테이지로 넘어가게 동기부여
2:38 UX Point 3 : 맞는 키보드 제공
3:11 UX Point 4 : 방해 요소 막기
3:29 UX Point 5 : 메인 컨텐츠는 항상 키보드 위에서
4:06 [Step 1] 온보딩 프로토타입 리뷰
4:34 UX Point 6 : 유저들에게 주요기능 설명/기대하게
5:23 UX Point 7 : 온보딩 과정 중 유저 파악
5:27 UX Point 8 : 온보딩이 얼마나 남았는지 표시
5:32 UX Point 9 : 온보딩 과정 지루하지 않게..
5:36 UX Point 10 : 유저에게 맞게 개인화된 정보 보여주는 앱 느낌 주기
7:22 [Step 2] 홈 스크린 리뷰
7:59 UX Point 11 : 유저들이 쉽게 메인으로 돌아올 수 있게
8:35 유저들이 한눈에 유저들의 행동 파악할 수 있게
8:40 UX Point 13 : 유저가 메인 홈에서 필요한게 뭔지 정하기
9:24 UX Point 14 : 새 유저를 위한 프로덕트 투어
9:30 UX Point 15 : 다음 액션이 뭔지 쉽게 알수 있게..
9:35 [Step 3] 아이템 등록하는 플로우 리뷰
10:12 UX Point 16 : 액션 버튼은 눈에 잘 띄게
10:21 UX Point 17 : 관련된 기능은 하나로 묶기
11:33 UX Point 18 : 유저 귀찮게 하지 않기 최소한의 액션
12:24 UX Point 19 : 네비게이션 위치 조정
12:45 [Step 4] 상품 삭제하는 플로우 리뷰
13:12 UX Point 20 : 제스쳐도 디자인
13:25 UX Point 21 : Up and Back 화면 전환은 다르다.
14:20 UX Point 22 : 일관성 유지
15:18 UX Point 23 : 모두가 알아듣게 쉬운 용어 사용 (테크, 엔지니어 용어 사용금지)
15:49 UX Point 24 : 유저 흥미 끌게 게임화도 굿!
17:02 UX Point 25 : 새로운 아이디어/경험 시도
17:48 [다음 영상을 위한 도움요청] Usability test설문 조사
——————————————————
프로토타입 링크
https://www.figma.com/proto/9R9FCxZ2pRuIzoAfazeJ3s/Prototyping_Sharing?node-id=596%3A3322\u0026viewport=235%2C628%2C0.03854480758309364\u0026scaling=scale-down
설문조사 링크
설문조사는 보통 8-12명한테만 받으면 충분해서 설문조사는 마감할게요.^^* 참여해 주신 분들 모두 모두 감사합니다. 🙏
——————————————————
Download
📥 Design Tool : https://www.figma.com/
📥 Prototype Figma File : https://drive.google.com/file/d/1lrVfnKfzeXhhVl_9h_unCrTbEMEVHxVU/view?usp=sharing
📥 Font for the design file : https://blog.naver.com/ktk350/222046340096
——————————————————
Music in the video
All Music Licensed to YouTube by (on behalf of Epidemic Sound)
ES_As We Dance – Andre Aguado
ES_Highlander – Andre Aguado
ES_Skydiver – Andre Aguado
회원 가입 ux 주제에 대한 자세한 내용은 여기를 참조하세요.
회원가입을 완료하게 하는 UX 장치 | RightBrain lab
RightBrain lab은 라이트브레인만의 UX 인사이트와 소중한 현장 경험들을 … 서비스를 이용하기 전 늘 해왔던 회원가입이었지만 자세히 살펴보니 …
Source: blog.rightbrain.co.kr
Date Published: 7/19/2022
View: 7380
회원가입 완료 화면 구성 방법! – 메일리
우리가 서비스를 만들다 보면 콘텐츠가 중요하기도 하지만, 서비스 자체 UX도 굉장히 중요하잖아요. 그런데 간혹 사용자들에게 낯선 인터랙션을 설계해 …
Source: maily.so
Date Published: 2/27/2021
View: 3240
UX/UI 뜯어보기 – 회원가입, 로그인 UI – 매일 성장하는 디자이너
회원가입 화면 · 대부분의 웹사이트 회원가입의 경우 인풋 태그 옆에 레이블 형식으로 디자인 · 잡코리아 회원가입과 마찬가지로 선택적 동의를 세분화하여 …
Source: nahee.tistory.com
Date Published: 1/30/2022
View: 1010
회원가입 화면 디자인을 하기 위한 UX/UI 리서치
1. 회원가입 이유를 명확하게 알려줘야한다. · 2. 이탈하지 않도록 쉽게 만들어져야한다. · 3. 사용자에게 최소한의 정보만을 요구해야한다. · 4. 예시 사례.
Source: blog.100282.kr
Date Published: 3/11/2021
View: 6948
당연함의 크기 – 회원가입 퍼널 개선 – 브랜디 랩스(Brandi Labs)
이 과정이 귀찮은 유저들은 그 가운데서 이탈하는 것으로 진단했습니다. 기본적인 UX일 수 있지만 간편 가입 시에 SNS에서 제공해주는 정보들을 유저가 …
Source: labs.brandi.co.kr
Date Published: 11/10/2022
View: 7290
프립 회원가입 프로세스 UX Case Study (모바일 Ver.)
퍼널 분석을 위한 데이터는 활용할 수 없지만 최대한의 내재된 UX지식과 타 서비스 벤치마킹을 통해 진행했다. 프립의 회원가입 프로세스 개선. 프립 요구 …
Source: baconux.tistory.com
Date Published: 5/13/2022
View: 1514
로그인/회원가입 구현하기 – (1) UI/UX – velog
로그인/회원가입 구현하기는 아래와 같은 순서로 진행될 예정입니다. … 먼저 앱 화면을 디자인하고 UX 플로우를 설계한 후, 필요한 화면들의 structure를 …
Source: velog.io
Date Published: 3/29/2021
View: 6205
회원가입과 로그인, 어떻게 구성하면 좋을까? – wishket
오늘은 다양한 사례들을 중심으로 어플의 ‘회원가입’과 ‘로그인 화면’을 … APPAPP design로그인로그인화면로그인화면 구성로그인화면 디자인모바일앱 UX사용자경험 …
Source: blog.wishket.com
Date Published: 8/4/2021
View: 8223
주제와 관련된 이미지 회원 가입 ux
주제와 관련된 더 많은 사진을 참조하십시오 [앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![[앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype](https://i.ytimg.com/vi/SS4AvrUMeRo/maxresdefault.jpg)
주제에 대한 기사 평가 회원 가입 ux
- Author: ux sun
- Views: 조회수 7,113회
- Likes: 좋아요 319개
- Date Published: 2021. 2. 12.
- Video Url link: https://www.youtube.com/watch?v=SS4AvrUMeRo
회원가입, 로그인 UI
728×90
지극히 주관적인 분석이니 잘못된 댓글 혹은 불편한 내용은 댓글 통해 남겨주세요 ヽ(✿ﾟ▽ﾟ)ノ
로그인 화면
그림 1. 잡코리아
통상 타 사이트에서 로그인을 클릭하면 로그인 페이지로 이동시키지만 잡코리아 개인회원의 경우 팝업창으로 제시하는 게 독특했다. 비단 로그인 화면뿐 아니라 메인 UI가 전반적으로 복잡한 느낌.
그림 2. 마켓컬리
그림 4. 그리팅
상단 탭으로 회원 구분. 박스 색이 아닌 라인으로 구분 짓는 것도 괜찮아 보인다.
로그인 – 계정 찾기 및 회원가입 – sns 로그인 – 비회원 주문조회 순으로 배치
그림 4. CJ 쿡킷
상단 회원 분류 탭을 언더라인으로 구분
소셜 로그인 제공 이후 통합회원가입 유도는 하단 박스로 크게 제공
input 박스 안 Placeholder 폰트는 시각적 계층 구분을 더 명확히 하기 위해 명도를 좀 더 높이는 게 더 좋았을 듯
그림 5-1. 중앙일보
아이디를 이메일이라고 명확히 표현
CTA버튼에도 ‘로그인’ 이 아닌 “이메일로 로그인”이라고 한번 더 사용자에게 주의를 주고 있다.
(가끔 아이디가 이메일인데 이를 표기해두지 않아서 로그인에 한참 애를 먹다 계정 찾기를 통해 아이디가 이메일이었다는 걸 알게 된 경험이 있다. 깊은 화남…┗|｀O′|┛)
그림 5-2. 중앙일보 조인스
로그인 버튼 최 상단 배치. 나머지 ‘아이디 찾기’, ‘비밀번호 찾기’, ‘회원가입’은 하단 박스안에 묶음 배치
회원가입 화면
그림 1-1 잡코리아
개인회원, 기업회원 탭으로 구분.
개인회원의 경우 대중적으로 선호하는 소셜 로그인을 제일 상단에 배치했지만
회원가입으로 들어왔는데 상단에 로그인이라고 되어있으니 혼란이 온다. ‘소셜로 간편 가입’, ‘네이버 간편 가입’으로 표기해주는 게 정확하지 않았을까.
그림 1-2 잡코리아
그림 2-2 잡코리아
항목을 채우지 않고 넘어갈 경우 툴팁으로 한번 더 알림.
input영역에 Placeholder로 표기된 항목 텍스트가 마우스 클릭 시 사라지지 않고 상단으로 이동하여 label 역할.
Placeholder로만 사용했을 경우 사용자가 입력하는 순간 힌트는 사라지는 단점을 잘 보완한 ui 참고:Placeholder를 사용하지 마세요.
그림 2-3. 잡코리아
마케팅 선택 정보 활용 동의는 개인정보, 광고성 정보(이메일, sns) 세 가지를 세분화
개인정보 유효기간 선택 제공
(보통 1년을 기본으로 하고 연장하거나 인증하지 않을 경우 휴면 계정으로 자동처리되기 때문에 1년마다 갱신할 건지 3년마다 할 건지 탈퇴 시까지 유지할 건지에 대해 미리 선택)
그림 3-1. 마켓컬리
대부분의 웹사이트 회원가입의 경우 인풋 태그 옆에 레이블 형식으로 디자인
잡코리아 회원가입과 마찬가지로 선택적 동의를 세분화하여 선택 가능
사용자가 액션을 취해야 하는 버튼은 브랜드 포인트 컬러를 활용하여 행동 유도
입력 폼마다 유효성 검증(✔)
그림 3-2. 마켓컬리
그림 4. 그리팅 회원가입 첫 화면
사용자의 시선은 F 또는 Z형태로 떨어지기 때문에 통합 회원가입으로 유도하기 위해 해당 카드를 좌측에 배치.
통합회원으로 가입 시 주어지는 혜택 문구는 폰트 컬러를 달리 하여 주목성을 주는 게 좋았을 것 같다.
그림 5. h point 회원가입
회원가입 진행도를 상단에 노출
통합 회원가입의 경우 본인인증을 우선으로 처리, 간편 가입 제공
그림 6-1. 그리팅 회원가입
그리팅 일반회원 가입의 경우 약관 동의 후 정보 입력 순으로 처리
마케팅 수신 정보 혜택 문구 강조
그림 6-2. 그리팅 회원가입 정보입력
최종 목표인 ‘회원가입’ 버튼 제외한 나머지 ‘중복확인’ ‘인증번호 전송’ 버튼의 경우 컬러나 라인 버튼으로 가는 게 더 낫지 않았을까
버튼의 시각적 계층 구조
그림 7-1. coloso
마케팅 수신 동의(sns, 이메일 별도 구분하지 않음)
그림 7-2. coloso
유효성 검증 제공(컬리만큼 친절하지는 않다.)
그림 8-1 중앙일보 회원가입
조사 중 가장 많은 소셜 로그인 제공
주력으로 미는 소셜 로그인 카카오톡 혹은 네이버 두 개만 남기고 나머지는
그림 8-2 중앙일보 회원가입 정보입력
마케팅 정보 제공 동의 세분화
개인정보 수집 및 이용(필수) 외에 본인 확인 정보 수집 및 저장(선택)은 뭘까..?
그림 8-3 중앙일보 본인확인 정보 수집 및 저장 내용
거주지별로 콘텐츠 맞춤 제공을 하나보다.
뉴스이다 보니 아무래도 지역 관련 정보를 원활히 제공해주기 위함인가?
그림 9. 쿡킷 cj one 통합회원 가입
하단 계열사 로고를 배치가 시각적으로 글을 읽어보지 않아도 저 많은 계열사들을 통합하여 이용할 수 있겠구나 인지 됨
그림 10-1. 쿠첸
버튼 가로넓이를 과하게 넓게 잡은 느낌
가입 진행 전 회원이 되면 좋은 점을 하단에 노출
그림 10-2. 쿠첸
약간 및 본인인증을 정보 입력 페이지 함께 녹이는 게 좋을 듯 함. (트렌드에 뒤쳐진 느낌)
잘 읽지 않는 약관은 타 사이트에서 보듯이 ‘내용 보기’ 텍스트 링크로 표현하는 게 간편한 것 같다.
그림 11. 롯데인터넷면세점
인터넷 면세점 특성상 외국인의 이용을 고려하여 내, 외국인 구분하여 가입.
그림 12. 신세계면세점
롯데면세점 회원가입 페이지를 보고 신세계면세점을 확인하니
이렇게 풀면 될걸 왜 굳이 다른 경로로 받는 걸까. 의문이 든다.
내부 시스템 사정인 걸까.?
굳이 내국인 외국인을 가르지 않고 휴대폰 번호든 이메일로 가입이든 하나로 해결하는 게 난 더 좋아 보인다.
그림 13-1. 29cm
상단 프로그레스 바로 현재 어느 정도 진행되었는지 알 수 있다.
상세한 약관은 보기 링크 클릭해서 확인하도록 디자인
그림 13-2. 29cm
추후 신규 구축 혹은 UI/UX 개선 프로젝트할 때는 유사 서비스 회원가입이나 로그인 화면 분석도 같이 하면 좋겠다.
728×90
UX/UI : 회원가입 화면 디자인을 하기 위한 UX/UI 리서치
숫자 키보드일때는 키보드 위에 붙는 버튼이 풀버튼으로 사용하지만, 일반 키보드 위에 붙는 버튼은 마진값이 있는 버튼으로 사용이 된다. 이유는 일반 키보드의 자동완성 부분과 가까이 있으므로 터치치에 오류가 날 수 있다는 점을 반영한 것이다.
프립 회원가입 프로세스 UX Case Study (모바일 Ver.)
728×90
평소 관심 있던 액티비티 플랫폼 ‘프립’의 채용절차인 사전과제를 공부 삼아 개선해 보았다. 퍼널 분석을 위한 데이터는 활용할 수 없지만 최대한의 내재된 UX지식과 타 서비스 벤치마킹을 통해 진행했다.
프립의 회원가입 프로세스 개선
프립 요구사항
현 프립의 회원가입 프로세스를 개선 해주세요.
목적
법적 이슈인 마케팅 수신 동의를 추가 하지만 회원가입률(= 회원가입수/설치수)은 떨어지지 않게 한다.
프로세스에 필수로 추가되어야 하는 항목
1. 마케팅 수신 동의 를 받아주세요.
2. 닉네임을 입력하거나 수정 하는 절차도 추가해주세요.
목차
프립의 회원가입 프로세스 개선을 위한 연구 과정은 다음과 같다.
프립 회원가입 프로세스 및 요구사항 분석 타 서비스 회원가입 프로세스 분석 및 시사점 도출 화면별 UX를 적용한 리뉴얼 프로세스
1. 프립 회원가입 프로세스 및 요구사항 분석
프립의 회원가입 프로세스는 굉장히 간단하다. 군더더기 없는 UI와 소셜 계정 가입 버튼의 위치 또한 ‘카카오 계정 로그인’의 높은 회원가입률 데이터를 근거로 설계되었다. 하지만 시작하자마자 나타나는 ‘푸시 알림 여부’를 반갑게 맞이하는 사용자는 안타깝게도 아주 희박하다.
프립 ‘소셜계정 가입’ 프로세스
프립 ‘회원가입’ 플로우차트
요구사항 1 : 마케팅 수신 동의받기
프립이 요구하는 ‘마케팅 수신 동의’는 다양한 상품을 연계하는 O2O 플랫폼 특성상 기존 고객을 위한 효율적인 마케팅 수단이자 맞춤형 서비스를 제공하는 데이터가 된다. 따라서 마케팅 수신 동의율을 높이는 것이 곧 프립의 매출 향상에 영향을 미치며 계속해서 개선해야 하는 과제로 남는다. 이를 위해 마케팅 수신 동의에 대한 가이드라인을 살피고 가장 효율적인 프로세스를 고민 할 필요가 있다.
프립은 2번 조항을 이행하고 있다.
프립의 회원가입 프로세스 개선 목적은 마케팅 수신 동의를 추가하지만 회원가입률은 떨어지지 않게 하는 것이다. 이 말은 즉 정량적인 데이터를 토대로 프립을 설치했지만 마케팅 수신 동의에 신뢰를 느끼지 못하고 회원가입을 하지 않는 사용자가 존재 한다는 뜻이다.
그렇다면 사용자는 언제 ‘마케팅 수신 동의’에 필요를 느낄까?
완료 태스크나 일정을 리마인드 하기 위해
놓칠 수 있는 신규 관심 정보를 전달
뉴스 또는 최신 정보를 받기 위해
쿠폰, 프로모션 등의 정보를 받아보기 위해
따라서 프립의 ‘마케팅 수신 동의’ 페이지에서 이탈률을 줄이기 위해 프립만의 서비스 매력을 어필 하고 회원가입 시 얻을 수 있는 정보를 친절하게 알려줘야 한다.
요구사항 2 : 닉네임 입력 및 수정
프립에 가입하는 고객은 ‘프립 대원’ 또는 간편 로그인 시 설정된 이름으로 닉네임이 설정된다. 현재로써는 ‘닉네임 입력 요구사항’의 목적을 명확히 알 수 없지만 상품 리뷰 작성 시 실명에 대한 고객의 불편함 이 있으며 프립 서비스의 커뮤니티 활동성을 증가 시키려는 의도로 예상할 수 있다.
사람들의 취향은 모두 다를 수 있으니까…
현재는 프립의 피드 페이지에 김**으로 실명이 비공개된 상태이지만 상품 후기 페이지는 여전히 실명이 공개되어 있다. 따라서 리뷰를 작성하기 전 닉네임을 설정할 필요가 있다.
닉네임을 입력할 수 있는 경우의 수
회원가입 단계에서 닉네임 정보 입력
회원가입 이후 쿠폰 및 프로모션을 활용한 닉네임 입력 유도
상품 구매 전 닉네임 입력 유도
상품 리뷰 작성 전 닉네임 입력 유도
프립 대원의 닉네임을 부여하기 위해 위 4가지의 경우의 수 외 여러 가지 경우가 있겠지만 자연스럽고 필요에 의한 닉네임 입력 유도가 중요 하다고 생각한다.
이와 같이 다양한 회원가입 프로세스를 적용한 다른 앱 사례를 찾아보자.
2. 타 서비스 회원가입 프로세스 분석 및 시사점 도출
회원가입은 유저를 항상 고통스럽게 한다. 빈칸을 채우고, 비밀번호를 체크하고, 인증받아야 한다. 뮌헨 대학에서 진행된 연구에 따르면 모바일 환경에서 PC환경보다 비밀번호를 입력하는데 두 배의 시간 을, 그리고 보다 보안이 약한 비밀번호 를 만든다고 한다.
그럼에도 회원가입과 마케팅 수신동의는 프립뿐만 아니라 모든 앱 서비스의 효율적인 마케팅 수단이기 때문에 서비스 특성에 따라 다양한 방법을 사용하고 있는 앱을 분석해 보았다.
벤치마킹 1 : 마이리얼트립
여행 관련 상품수가 가장 많은 마이리얼트립은 시작하자마자 메인 페이지의 다양한 상품을 구경하도록 유도하고 하단 이벤트 배너를 통해 회원가입 시 사용자가 받을 수 있는 혜택을 알려준다. 체험의 중요성 을 강조하고 있다.
마이리얼트립 (2020.07.14 기준)
벤치마킹 2 : 트리플
정성적인 여행정보를 제공하는 트리플은 화면마다 닉네임 입력을 유도하며 앱 정책 동의를 포함 시켰다. 그리고 마케팅 수신 동의를 얻기 위해 사용자가 얻을 수 있는 정보를 친절하게 설명 해준다.
트리플 (2020.07.14 기준)
벤치마킹 3 : 지그재그
2000만 다운로드를 기록한 여성 쇼핑 앱 지그재그는 서비스 이용 의도를 파악한 UX Writing 과 사용자가 얻을 수 있는 혜택과 유익한 정보로 회원가입과 마케팅 수신 동의를 유도한다. 필자는 이러한 통 큰 혜택에 ‘대규모 투자유치 서비스의 바람직한 생색내기’ 라고 생각한다.
지그재그 (2020.07.14 기준)
하나같이 인기 있는 서비스는 저마다의 색깔로 사용자의 회원가입과 마케팅 수신 동의를 유도한다. 벤치마킹의 중요성은 좋은 것을 한데 모으는 것이 아닌 좋은 것을 우리 서비스의 특색에 맞게 녹여내는 것 이라고 배우고 느껴왔다. (물론 벤치마킹이 최적의 UX를 위한 기획이라고 생각하지는 않는다.)
그리고 재미있는 것은 마이리얼트립의 ‘미리 체험하기’는 프립에서도 확인할 수 있었다. 로그인 하단 우측에 ‘둘러보기’ 기능이 있는데 눈에 잘 띄지 않는다. 필자는 기존 프립의 ‘둘러보기’ 기능이 개선해야할 점이라고 생각한다. 둘러보기를 통해 회원가입 시 프립에서 제공하는 혜택을 마이페이지까지 가서 확인하기 어렵기 때문이다. (아래 사진 참조)
뿐만 아니라 대다수의 사용자는 구글 마켓 & 앱스토어에서 프립의 서비스를 미리 보고, 기대를 품고 다운받기 때문에 미리 프립을 둘러볼 수 있는 과감한 선택 을 한다면 회원가입률이 높아질 것으로 생각한다.
조금은 더 생색내도 괜찮은데
벤치마킹을 통한 유도방법과 프립의 강점을 고민하며 다음과 같은 시사점을 얻을 수 있었다.
프립의 신규 가입자에게 제공하는 2,000 에너지를 활용 해 회원가입 또는 마케팅 수신 동의를 유도할 수 있다. 체험형 서비스인 만큼 상품 자체를 체험하는 것이 중요 하며 프립 또한 ‘둘러보기’ 기능으로 체험의 중요성을 인지하고 있다. 앱 정책 동의를 보여주는 페이지가 아닌 닉네임을 입력함으로써 자연스럽게 앱 정책 동의와 함께 프립의 고객으로 유도 할 수 있다.
3. 화면별 UX를 적용한 리뉴얼 프로세스
기존 서비스 대비 다소 파격적일 수 있지만 프립 회원가입을 잠시 뒤로하고 서비스를 미리 체험 하게 하며 프립이 제공할 수 있는 혜택을 바람직하게 생색내는데 집중 했다. 또한, 모바일 환경의 세부적인 UX지식을 활용해 리뉴얼 프로세스를 제작했다.
리뉴얼 상세 설명
프립의 경쟁력을 보여주는 스플래시 스크린, 2초간 보여주고 메인 페이지로 전환 메인페이지 시안 A : 신규회원에 한해서 회원가입 시 혜택 콘텐츠 노출 메인페이지 시안 B : 기존 메인 페이지를 보여주며 하단 이벤트 배너로 2번과 동일한 콘텐츠 노출 회원가입 시 사용자가 얻을 수 있는 혜택을 재차 강조하며 회원가입 유도 회원가입을 유도하는 문구 사진과 닉네임을 입력 및 수정할 수 있고 중복되지 않은 닉네임을 랜덤으로 추천 (Ex : 붉은 오소리) 회원가입 완료 페이지로 마케팅 수신 동의에 대해 사용자가 얻을 수 있는 정보를 제공
* 소셜 회원가입의 프로세스이며 이메일 회원가입의 경우 기존과 동일한 이메일, 패스워드 입력 페이지가 포함됨.
공부 삼아 진행한 것으로 부족한 점이 많습니다. 의견이 다르거나 분석 과정에 문제가 있다면 꾸짖어주세요. 감사한 마음으로 배우고 성장하겠습니다.
참고 문헌
https://brunch.co.kr/@dalgudot/108#comment
https://bitly.kr/oRVeSwKcEPk
반응형
회원가입과 로그인, 어떻게 구성하면 좋을까?
*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 8만 이상의 개발/디자인 업체 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)
회원가입과 로그인, 왜 중요할까요?
(에디터 🐳) 디바이스와 OS는 점점 발전하고 있지만, 이와 관련 없이 꾸준히(?) 유지되고 있는 기능과 화면이 있다면 ‘회원가입과 로그인’이 아닐까 싶습니다. ‘회원’이 된 경우 마케팅 정보를 제공하는 등 비회원에 비해 서비스와의 더 많은 접점을 만들 수 있기 때문입니다. 저 역시 서비스를 기획, 운영하며 회원가입 전환율을 높이기 위한 여러 방법들을 고민했습니다. 오늘은 다양한 사례들을 중심으로 회원가입과 로그인 화면을 어떻게 구성하면 좋을지, 어떤 방법을 활용하면 좋을지 정리해보려고 합니다.
(에디터🐥) 우리 서비스 사용자라는 것을 증명하기 위한 최초의 진입 단계! 회원가입을 하고 로그인을 하면, 서비스 내 무엇을 하는지, 어떤 관심을 가지고 있는지 살펴볼 수 있는 환경이 마련 되는데요! 때문에 회원가입과 로그인은 허들을 낮춰야하는 첫번째 장벽이 되고, 우리는 이 장벽을 낮추기 위해 끊임없이 고민해야 합니다.
💌오늘의 00:00 미리 살펴보기
1. 회원가입 이유를 명확하게 알려주기
2. 회원가입과 로그인을 해야 하는 접점 구분하기
3. 쉽게 느껴지게 하기
4. 두 번 입력하지 않게 하기
회원가입과 로그인, 어떻게 구성할까요?
회원가입을 유도하는 방법과 실제 회원이 되는 과정은 서비스 성격에 따라 달라집니다. ‘커머스’는 일반적으로 배송 받을 ‘주소’를 입력 받아야 하고, 새벽 배송 등 배송 방법에 따라 공동 현관 출입을 위한 비밀번호를 입력해야 하는 경우도 생기죠. 이 경우 벌써 이름과 연락처 등이 포함된 기본 정보, 배송을 위한 주소지, 배송 방법에 따른 공동 현관 비밀번호 등 3가지 필요 정보 입력 단계가 생기게 됩니다. 그럼 이 정보를 한 번에 받아야 할까요? 아니면 필요 할 때 정보 입력을 요청해야 할까요? 회원가입 화면과 로그인 화면은 이렇듯 필요한 정보가 무엇인지 정의하는 것에서 출발할 수 있어야 합니다. 또 신규 사용자와 비회원을 대상으로 어느 시점에 회원가입을 유도해야 하지? 라는 질문에 대한 답도 생각봐야 합니다. 실행하자마자 회원가입을 유도하는 건, 사용 목적이 명확하지 않은 이상 사용자에게 불필요한 과정으로 느껴질 수 있기 때문입니다.
1. 회원가입 이유를 명확하게 알려주기
아이디어스
아이디어스는 앱 실행과 동시에 회원가입 화면을 띄워줍니다. 일종의 ‘강제성’을 띄고 있는 모습인데요. 서비스 한줄 소개와 함께 회원가입 후 서비스 이용을 할 수 있도록 유도하고 있습니다. 물론 이를 피해갈 수 있는 기회도 함께 제공합니다. 하단 ‘회원가입 없이 둘러보기’를 넣어둔 것이죠. 해당 텍스트를 탭하면 가입 시 제공되는 혜택을 알려줍니다. 아이디어스는 쿠폰과 사용자 등급을 높여주는 것을 당근으로 제공하고 있네요. 이 혜택은 내 정보 탭 등 사용자들이 회원가입을 해야 볼 수 있는 화면에서도 동일하게 노출되고 있습니다. 이처럼 회원가입을 해야 하는 ‘이유’는 반드시 필요합니다. 더 중요한 건 비슷한 기능들이 모여 있는 ‘커머스’에서는 기능 중심의 회원가입 유도 보다는 회원가입을 했을 때 주어지는 ‘혜택’에 초점이 맞춰져야 한다는 점입니다.
🐳의 덧붙임 : 우리 서비스와 가장 잘 어울리는 소셜 로그인 수단이 무엇인지 잘 고려해야 합니다. 국내에서 쓰이는 대표적인 수단은 네이버, 카카오, 페이스북, 구글 등이 있는데요. 네 가지를 다 사용하기 보다 해당 소셜 로그인 수단을 활용했을 때 추가로 가져올 수 있는 정보의 범위가 어디까지 인지, 또 우리 서비스 사용자들이 어떤 서비스를 더 많이 쓰는지 등을 미리 확인하는 것이 좋습니다. 또 플랫폼에서 제공하는 정책이나 가이드 등이 어떻게 바뀌는지도 계속해서 확인해봐야 합니다. 최근 가장 큰 이슈 중 하나는 애플 로그인 적용인데요. iOS 사용자 분들이라면 최근 회원가입 수단 중 애플 로그인을 종종 보셨을 겁니다. 미 적용 시 더 이상 앱을 출시 할 수 없을 정도의 톤으로 공지가 내려왔던 점을 감안했을 때, 놓친다면 정말 끔찍한 상황이!
2. 회원가입과 로그인을 해야 하는 접점 구분하기
에이블리
에이블리의 사례는 1번에도 적용 될 수 있는데요! 회원 = 무료배송이라는 내용을 다양한 접점을 통해 일관성 있게 내보내고 있기 때문입니다. 커머스에서 배송은 두 가지 핵심 요소가 있는데요. 하나는 속도, 그리고 또 하나는 배송비 입니다. 이 중 에이블리는 ‘배송비’를 회원 가입을 해야 하는 주요 이유로 활용하고 있는 것이죠. 또 회원가입을 해야 사용할 수 있는 기능이 포함된 화면에서는 기능이 어떤식으로 활용 될 수 있는지 세부적으로 안내해주고 있습니다. ‘찜’ 기능이 대표적! 주요 화면을 연결고리 삼아 회원가입을 해야하는 목적을 잘 전달해주고 있는 사례입니다.
🐳의 덧붙임 : 같은 고민을 한 적이 있었어요. 무료로 배경화면을 받을 수 있는 서비스였고, 회원가입 없이도 배경화면을 다운로드 받을 수 있도록 설계 되어 있어 회원가입을 유도하기 쉽지 않은 구조를 갖고 있었죠. 회원가입 – 로그인을 하지 않으면 하단 탭을 아예 보여주지 않고 있었습니다. 그래서 회원가입과 동시에 쓸 수 있는 기능들을 미리 볼 수 있게 해주고, 핵심 내용을 요약해 내보내면 전환율이 늘어나지 않을까? 라는 가설을 만들었습니다. 그리고 하단 탭을 로그인 여부와 관련없이 노출하고, 각각의 항목을 탭했을 때 어떤 기능을 어떻게 쓸 수 있는지 내보냈습니다. 극적인 수치는 아니었지만, 분명 회원가입 전환율이 높아졌습니다. 어디에서, 어떤 방법으로 회원가입을 유도하지? 라는 질문에 대한 답의 시작은 서비스와 사용자 간 접점을 찾는 것에서 시작되는 것이 그래서 더 중요하다는 사실!
Marpple
UI 뿐만 아니라, 사용자의 주요 흐름도 회원 가입과 자연스럽게 연결 될 수 있어야 합니다. 일단 둘러보기 위해 들어온 사용자들에게 둘러보기를 할 기회조차 앗아가 버리면 그 자체가 허들이 될 수 있기 때문이죠. 자연스레 둘러보고, 마음에 드는 제품이 있을 때 회원가입을 유도 할 수 있다면? 최초 가입에 따른 혜택까지 전달 할 수 있다면? 전환율도 자연스레 높아지지 않을까요?
이 관점에서 Marpple의 사례도 눈여겨볼만 합니다. 상품을 둘러보다, 장바구니에 진입하려는 순간 회원가입과 로그인 페이지로 연결 되고 있는데요! 상품 구매를 위한 자연스러운 흐름을 만들어 가입을 유도하고 있습니다.
🐥의 덧붙임 : 개인적으로 장바구니까지는 비로그인 사용자들에게도 충분히 제공해줄 수 있는 기능이라고 생각해요! 오히려 장바구니 기능을 쉽게 사용할 수 있도록 열어주면, 담은 상품을 봐서라도 가입을 하게 되는!
3. 쉽게 느껴지게 하기
오늘의 집
소셜 로그인으로 인해 상대적으로 복잡한 회원 가입 과정을 거치지 않아도 된다는 점은 사용자와 서비스 입장에서 모두 만족할만한 환경이지만, 실제 회원가입을 유도하는 것은 또 별개의 문제로 다가갈 필요가 있습니다. 어쨌든 회원가입 화면 또는 단계로 넘어갈 수 있는 장치가 필요하기 때문이죠. 앞서 사례로 나왔던 ‘에이블리’는 회원가입이라는 표현 대신 ‘5초 회원가입’을 활용했는데, 이는 회원가입에 걸리는 시간이 짧고 가입 시 무료 배송이라는 혜택을 얻을 수 있다는 점을 동시에 강조하기 위한 방법입니다.
오늘의 집 역시 비슷한 방법을 활용하고 있는데요. 각 소셜 로그인 버튼은 디자인 가이드가 정해져 있기에 ‘3초만에 빠른 회원가입’이라는 문구를 별도로 띄워 가입을 유도하고 있는 모습입니다.
스타일쉐어
회원가입을 위한 첫 걸음(?)을 내딛었다면, 이제 ‘완료’까지 이탈하지 않게 만드는 작업이 중요하겠죠? 우리가 일반적으로 생각하는 이메일 회원가입은 한 화면에 필요한 정보를 타이틀 + 입력창 형태로 구성한 것입니다. 스타일쉐어는 이를 5가지 단계로 나누어 단계 별 1개씩의 정보만 입력 가능하게 설계한 모습이네요. 심리적으로 입력해야 할 공간이 여러개 보이면 귀찮게 느낄 가능성이 높습니다. 이탈할 가능성도 함께 높아지겠죠? 설문조사에서도 비슷한 맥락을 확인할 수 있는 사례가 있는데요. 구글독스와 타입폼이 대표적입니다. 구글독스는 기본적으로 입력된 항목을 한 눈에 볼 수 있게 구성되어 있지만, 타입폼은 답변자로 하여금 하나의 질문씩 차례대로 답변할 수 있도록 구성되어 있기 때문이죠. 이처럼 회원가입 과정이 어렵지 않게 느껴지게 만드는 것 역시 꼭 고려해야 합니다.
🐳의 덧붙임 : 모바일 환경에서는 ‘키패드’가 정말 중요합니다. 숫자를 입력해야 하는 단계에서 일반 문자를 입력할 수 있는 키패드가 튀어 나왔을 때의 귀찮음과 당황스러움이란.. 그래서 단계별로 입력되는 방식이 무엇인지를 잘 파악한 후 사용자가 바로 입력할 수 있는 환경을 만들어주는 것이 필요합니다. (스타일쉐어가 생년월일 입력 화면으로 진입했을 때 바로 숫자를 입력할 수 있는 키패드를 열어준 것처럼 말이죠)
4. 두 번 입력하지 않게 하기
마켓컬리
기획자의 입장에서 가장 많은 고민을 하게 되는 화면은 소셜 로그인이 아닌 방법 (이제 이메일 회원가입으로 굳혀진)의 경우입니다. 유효성 확인이 들어가기 때문이기도 하고, 여러개의 입력창이 존재하기에 사용자로 하여금 쉽게, 두 번 입력하지 않게 하는 방법을 충분히 고려해야 하기 때문입니다. 마켓 컬리는 플레이스 홀더 텍스트를 활용해 각 입력 창 내 어떤 내용을 입력해야 하는지에 대한 1차 가이드를 제공하고 있습니다. 또 각 입력창을 탭하면 상세한 조건을 확인할 수 있도록 설계 되어 있죠. 이렇게 사례를 보면 당연한 구성이라 생각하기 쉽지만, 입력 후에 어떤 조건으로 입력해야 하는지를 알려주는 경우가 아직은 더 많기에 눈여겨 봐야 할 내용이라고 생각합니다. 입력하는 순간에 조건을 보는 것과, 입력 후 사용자로 하여금 ‘잘못’ 입력했다는 식의 안내 메시지를 띄우는 것에는 사용성에 있어 꽤 많은 차이가 존재하기 때문입니다.
🐳의 덧붙임 : 유효성 체크의 경우 클라이언트에서 바로 가능한 항목인지, 서버와 통신을 거쳐야 하는지를 잘 구분하는 것도 중요합니다. 예를 들어 최초 입력한 비밀번호와 비밀번호 확인을 위해 추가 입력한 정보가 일치하는지는 클라이언트에서 바로 구분 할 수 있지만 이미 가입된 계정인지는 서버에서 확인을 해야 하기 때문입니다.
팬시(Fancy)
팬시에서 이메일 가입 시, 이메일 주소로 입력한 내용 중 메일 도메인을 제외 한 텍스트를 아이디로 자동 입력해줍니다. 저는 영문의 경우 이메일 주소 중 일부를 아이디로 활용하는 경우가 많기에 입력을 두 번 하지 않게 만들어주는 측면에서 꽤 유용한 기능으로 다가옵니다.
🐳🐥의 덧붙임 : 필수 입력값이 무엇인지 알려주는 것도 회원가입을 더 간편하게 인지시킬 수 있는 방법이 됩니다. 필수 정보를 모두 입력하기 전, 완료 또는 다음 화면으로 이동하는 버튼을 비활성화 하는 것도 방법이 될 수 있겠죠? 아니면, 선택 정보는 실제 사용이 필요한 순간에 물어보는 것도 방법이고요!
텐바이텐
선택 정보라는 명목으로 생일, 성별, 관심 키워드 등을 배치를 하는 경우가 있는데요. 회원가입에 입력해야하는 빈칸이 많아 보일 수록 사용자들은 피곤해지기 마련입니다. 물론 관심 키워드 등을 미리 입력받으면, 로그인 이후에 뿌려줄 수 있는 콘텐츠가 많아지는 이점이 있죠. 하지만 사용자에게 많은 질문은 부담스러울 뿐입니다. 그럼에도 불구하고 추가, 선택 정보를 받아야 하는 상황이라면 키패드를 적절히 활용하는 것이 좋습니다. 텐바이텐의 경우, 선택 여부를 표기해주고 있긴 하지만 생년월일을 탭하면 기본 설정값이 1920년으로 되어 있어 80-90년대 생이 본인의 생년을 선택하기 위해서는 꽤 많은 노력(?)이 필요합니다. 스타일쉐어와 같이 직접 입력하게 하되, 숫자를 바로 입력할 수 있는 키패드를 열어줬다면 어땠을까 싶네요!
방금 읽은 글은 ‘지금 써보러갑니다’의 뉴스레터 글을 통해 확인하실 수 있습니다.
앱/ 웹 서비스를 구성하는 요소들에 대한 생각과 노하우, 서비스 등을 알고싶다면 지금 바로 구독해보세요:)
키워드에 대한 정보 회원 가입 ux
다음은 Bing에서 회원 가입 ux 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 [앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype
- UX
- UX 디자인
- UX 디자인 독학
- UX 디자인 사례
- 미국 실리콘밸리
- 유엑스 디자이너
- 유아이 유엑스
- UX 디자이너 브이로그
- UX 디자인 컨설턴트
- UX 디자인 실무경험
- UX 디자인 어떻게 일할까
- User experience
- 사용자 중심 디자인
- 미국 현지 디자이너
- UX design
- UX designer
- UI/UX
- UX/UI
- 디자이너
- 유저 익스피리언스
- ux 디자인 어떻게 일할까요
- UX디자인
- 사용자 경험 디자인
- Design Thinking Process
- Design Process
- 디자인 생각하는 과정
- 직장인
- 무료UX
- UX디자인영감
- 초보UX
- 시니어UX
- 디자인공부
- 디자이너유튜버
- UX 디자인 레퍼런스
- 현직 디자이너
- 실무팁
- 디자인팁
- 프로토타입
- 프로토타이핑
- Prototyping
- UX Tips
- UX 팁
- 앱디자인
YouTube에서 회원 가입 ux 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 [앱UX/UI디자인] STEP6. 프로토타입 / 앱 디자인 할 때 어떻게 UX를 넣나? / 미국 현지 실무자가 알려주는 25가지 UX 팁 / Prototype | 회원 가입 ux, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.