[내일배움캠프 본캠] 6/4 TIL

디자인카타

강동화 튜터님 '랜딩페이지란?' 세션

CH 4 개인과제: 구글 캘린더 UX 리서치 및 개선-1

 

디자인카타

B 선택

71%의 사람이 선택

 

왜 해당 UI가 더 좋은지 작성합니다.

· 수치 뿐만 아니라 막대 길이로 비율을 직관적으로 파악 가능함. 즉, 텍스트를 읽지 않아도 시각적으로 어느 쪽이 더 우세한지 즉각적으로 인식할 수 있음

· A안보다 최소한의 색상이지만 색상 대비가 뚜렷하여 구분이 명확하게 드러나고, 넓은 여백의 레이아웃으로 미니멀하고 세련되어 보임

 

나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.

· A/B 색상의 차이가 크지 않아 시각적으로 구분이 어렵고, 단순히 수치로만 나눈 것처럼 보임

· 처음에는 100% 바를 하나로 나눠 보여주는 방식이 낫지 않나? 생각했지만 댓글에서 극단적인 결과값(예: 95% vs 5%)의 경우 한쪽 영역이 지나치게 좁아져 텍스트 표기가 어려워지는 문제가 생길 수 있다는 내용을 봄. 이 경우에 동일한 영역 사이즈 내에서 자유롭게 표기가 가능한 B가 더 나을거란 의견에 동의했음.

 

 

강동화 튜터님 '랜딩페이지란?' 세션

랜딩페이지란?

사용자가 착륙(Landing)하는 첫 페이지

외부 경로- 사용자 유입 > 특정한 목표를 가진 웹페이지

 

목표-> 사용자 행동을 유도하는 것

(가입, 구매, 다운로드, 신청, etc) 목적형 페이지

 

설득이 중요!

 

▷ 하나의 제품에 집중

▷ 사용자의 행동 유도

▷ 설득적인 구조

▷ 흐름에 맞는 시각 구성

 

왜 중요할까?

-> 브랜드의 첫인상 결정

방문자는 평균 3초 안에 이탈 여부 결정

디자인이 허술하거나 메시지가 애매하면

믿을 수 없다는 인상으로 곧바로 이탈

 

-> 전환율에 직접적인 영향

사용자는 '이걸 왜 해야 하지?'라는 질문을 끊임없이 함

랜딩페이지는 이 질문에 논리적 + 시각적으로 설득해야 함

 

구조

Hero -> 공감 -> 솔루션 -> 기능 -> 신뢰-> 행동 유도

Hero

헤드라인 서브헤드 비주얼 CTA 버튼 - 사용자의 이목을 끄는 문구와 비주얼

공감

텍스트 강조 문구 - 사용자의 Pain Point를 직/간접적 공감하는 문구

솔루션

텍스트 설명+ 이미지 - 우리의 제품/서비스가 어떻게 해결하는지 핵심 기능 간단하게 설명

기능

텍스트 설명+ 이미지 - 3~4가지 주요 기능 상세 설명(기능별 스크린샷 + 상세 설명)

신뢰

사용자 후기, 인증, 파트너 로고 - 신뢰 형성

추가요소

FAQ, 플랜 가격 등 - 망설이는 사람을 설득하는 정보

CTA 

텍스트 문구 + CTA 버튼 - 마지막 행동 유도

 

 

목표 설정-> 타겟 설정-> 메시지 도출-> 구조-> 와이어프레임-> 디자인

 

 

CH 4 개인과제: 구글 캘린더 UX 리서치 및 개선-1