🔖 2021년 9월 3주 TOP3

🔖 2021년 9월 3주 TOP3

2022년 전환율을 높이는 7가지 랜딩 페이지 비교

랜딩 페이지는 전환에 매우 중요합니다. 사용자에게 친숙한 랜딩 페이지는 검색 엔진에서 더 높은 순위를 기록하고 최대한의 리드를 만들어 낼 것입니다. 흥미롭게도 사용자 행동은 매년 바뀌고 기존 랜딩 페이지에서 계속 매출을 얻으려면 새로운 웹사이트 디자인 트렌드를 염두에 두어야 합니다.

2019년에 실적이 좋았던 랜딩 페이지가 2021년에 갑자기 실적이 저조하기 시작했다면 더 높은 전환을 기록하기 위해 랜딩 페이지를 전략적으로 개선이 필요하다는 것을 분명히 보여줍니다. 이탈률 감소, 페이지 방문 시간 증가, 사용자 행동 개선을 위해서는 랜딩 페이지 개선이 필요합니다.

이 기사에서는 브랜드가 랜딩 페이지 디자인을 개선하기 위해 채택한 2021년 최고의 웹 디자인 트렌드에 대해 설명합니다. 트렌드에서 배우고 자신만의 맞춤형 디자인 인텔리전스(design intelligence)를 적용하여 2022년 랜딩 페이지를 리디자인하고 최대 방문자 수를 전환할 수 있습니다.

시작하겠습니다.

랜딩 페이지 디자인이 전환에 중요한 이유

랜딩 페이지는 소비자의 온라인 구매 여정의 첫 번째 정류장이자 인상을 남길 수 있는 첫 번째 기회입니다. 인터넷에 있는 사람들은 인내심이 줄어들고 있습니다. 방문자가 브랜드에 대한 의견을 형성하고 웹사이트에 남을지 떠날지 결정하는 데는 약 50밀리세컨드가 소요됩니다.

기존 웹 사이트 요소로 프로덕트를 구매하거나 랜딩 페이지에 쿼리 폼(query forms, 데이터베이스에 정보를 요청하는 양식)을 작성하도록 현대 고객에게 설득하는 것은 쉽지 않습니다.

2021년에는 2019년보다 웹사이트에 방문하는 방문자에게 깊은 인상을 주기가 더 어렵습니다. 2021년 이후의 고객을 염두에 두고 이상적인 랜딩 페이지는 사용자에게 친숙하고 매력적이며 혁신적이어야 하며 사용자가 행동을 취할 수 있도록 장려해야 합니다.

랜딩 페이지 디자인이 전환에 매우 중요한 몇 가지 주요 이유는 다음과 같습니다.

위의 통계를 고려할 때 랜딩 페이지는 방문자에게 긍정적인 영향을 줄 수 있을 만큼 인상적이고 빨라야 한다고 쉽게 말할 수 있습니다.

전환율이 높은 랜딩 페이지와 각 페이지에서 배울 수 있는 7가지 교훈

다음은 2021년 최근에 업데이트된 전환율이 가장 높은 랜딩 페이지 중 일부입니다. 각 페이지에서 2021년 이후의 다음 디자인에 영감을 주기 위해 배울 수 있는 교훈을 나열합니다.

예 #1 - 지루한 고객 정보를 대화형 퀴즈로 대체합니다.
랜딩 페이지: Nextiva의 통합 커뮤니케이션 준비 퀴즈 랜딩 페이지입니다.
업계: Voice over IP(음성통신) 소프트웨어입니다.
전환 측정 기준: 관심 있는 잠재 고객이 양식을 작성합니다.
리디자인 초점 : 리드의 양과 질 향상
솔루션: 온라인 양식을 대화형 퀴즈로 대체

2019년과 2020년에도 고객 행동을 촉진하기 위해 많은 기업이 랜딩 페이지에 고객 양식을 포함시켜 신속하게 실천하고 있습니다.

. .  

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

웹페이지를 더 쉽게 읽히도록 만드는 빠른 방법

정보화 시대에 시간은 귀중한 것이며, 사람들이 너무 많이 소비하고 싶지 않은 것입니다. 그런 결과로, 평균 방문자들은 페이지 콘텐츠의 약 20%만 읽는다고 합니다.

이는 웹 디자이너와 개발자에게 다음과 같은 몇 가지의 의미가 있습니다. 첫째, 만드는 웹 페이지들이 가능한 한 매력적이어야 합니다. 둘째, 모든 페이지에서 중요한 정보를 눈에 띄게 만들 수 있는 방법을 찾아야 합니다. 셋째, 모든 현대 디자이너들은 오늘날 빠르게 변화하는 고객들에게 사용하기 쉬운 가치를 만들어야 합니다.

웹 사이트를 보다 쉽게 스캔할 수 있도록 하는 것은 페이지를 방문하는 고객들에게 필요한 빠르고 편리한 경험을 얻을 수 있도록 디자이너로서 역할을 충실히 수행하는 방법입니다. 

그렇다면 디자이너들은 어떻게 스캔할 수 있는(*훑어보는) 가능성을 수용할까요?

스캐너빌리티를 위한 디자인 소개
(*Scannability: 스캔 가능성; 훑어볼 가능성)

언뜻 보기에도 스캐너빌리티를 위한 웹 사이트를 만든다는 개념은 좀 이상합니다.

대부분의 디자이너는 고객이 가능한 한 페이지에 오랫동안 머물도록 하는 것을 목표로 프로젝트를 시작합니다. 그래서 최종 사용자들이 몇 초 만에 웹 사이트의 한 페이지에서 다른 페이지로 간편하게 이동하는 개념이 이상할 수 있는 거죠. 

그러나 스캐너빌리티는 단순히 정보를 전달하고 사용자들을 페이지 밖으로 내보내는 것만 그치는 것이 아닙니다. 사이트를 스캔할 수 있으면, 고객들이 구매 유입경로를 더 빠르고 쉽게 이동할 수 있게 됩니다. 더 빠르고 편리한 고객 여정은 더 강력한 사용자 경험과 더 많은 전환으로 이어지니까요. 

예를 들어 넷플릭스를 한번 볼까요. 그들은 넷플릭스에 관심 있는 사용자들에게 홈페이지에 많은 정보를 제공하지 않습니다. 대신 제품의 주요 *USP가 화면 중앙에 밝고 굵게 배치되어 있으며, 시작하기라는 간단한 *CTA도 함께 제공됩니다.

(*USP: Unique Selling Point의 약자로 프로덕트가 가지고 있는 강점이나 차별점을 직접 전달하는 뜻의 마케팅 용어.)
(*CTA: Call To Action의 약자로 사용자의 행동을 유도해내는 요소를 뜻함.)

스캐너빌리티를 위해 디자인을 한다는 것은 페이지의 사용자가 화면을 한눈에 쉽게 보고 구매자 여정의 다음 단계를 수행하는 데 필요한 모든 정보에 즉시 접근할 수 있도록 하는 것을 의미합니다.

불필요한 스크롤을 할 필요도 없고, 다음에는 무엇을 해야 할지 고민할 필요도 없습니다.

분석가인 Jacob Nielsen의 말에 따르면, 사람들은 방문하는 모든 페이지에서 특정 항목을 찾기 때문에 스캐너빌리티는 필수적이라고 합니다.

사용자들은 웹 페이지를 한 단어 한 단어 읽지 않습니다. 대신에 콘텐츠를 스캔하여 본인의 요구 사항에 맞는 정보들을 뽑아냅니다.

스캐너빌리티를 디자인할 때 묻는 질문들

그렇다면 웹 페이지의 스캐너빌리티에 대해 어떻게 알 수 있을까요?
그건 먼저 다음과 같은 질문으로 시작해보세요.

예를 들어, 누군가 Evernote 홈페이지에 들어오게 되면 그들은 다음을 원한다고 가정할 수 있습니다.

이것이 Evernote 웹 사이트 뒤에 있는 디자이너가 페이지 맨 위에 유용한 정보를 배치한 이유입니다.

"업무 효율을 높이고 생활을 정돈하세요."같은 문구가 고객들에게 에버노트의 전체 프로덕트가 무엇인지 정확하게 알려주기 때문입니다. 고객이 필요로 하는 경우, 아래에 있는 간략한 정보 단락에서 몇 가지 추가 세부 정보들을 제공할 수 있으며, 즉시 "무료로 가입하세요."와 같은 CTA를 유발하는 메시지들이 표시됩니다. 

. .  

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

디자인 시스템의 타이포그래피

UI 라이브러리에서 텍스트 스타일을 설정하는 실용적인 방법을 배웁니다.

UI 디자인의 90% 이상이 타이포그래피에 관한 것이라고 생각한 적이 있습니까? 디자인, 색상과 타이포그래피에서 두 가지 확실한 것이 있습니다. 이전 기사에서 색상에 대해 배울 수 있었습니다. 이번에는 디자인 시스템에 텍스트 스타일을 넣는 데 집중해 보겠습니다!

다음은 자신만의 디자인 시스템 UI 라이브러리를 만드는 데 도움이 되는 일련의 기사입니다.

좋은 네이밍 규칙(Naming Convention)

잘 디자인된 네이밍 규칙(Naming Convention)은 디자인 시스템을 기반으로 한 효율적인 UI 디자인을 위한 핵심입니다. 특정 프로젝트와 플랫폼에 대한 텍스트 스타일의 이름을 준비합니다.

네이밍 규칙(Naming Convention)을 정의하는 데 사용하는 핵심 전술은 숫자 순서입니다. 이 텍스트 덕분에 스타일은 가장 큰 스타일(예: 01 Heading 1)에서 가장 작은 텍스트 스타일(12 Overline)까지 정렬됩니다.

Figma를 사용하면 상황이 매우 간단합니다. 이 디자인 도구의 텍스트 스타일은 서체, 크기와 일부 피라미터( parameters, 추가 매개변수)만 정의하면 됩니다. 색상과 정렬은 독립적입니다.

Sketch를 사용할 때 텍스트 스타일을 만드는 것은 좀 더 복잡하고 훨씬 더 많이 만들어야 합니다. 내부에 특정 스타일의 색상과 정렬을 정의해야 합니다. Sketch의 네이밍 규칙(Naming Convention)은 다음과 같습니다.

[Name of the style] / [Alignment] / [Color]
예: 09 Body/Center/Primary

색상이 있는 부분은 레이어 스타일, 색상 변수와 동일한 네이밍 규칙(Naming Convention)으로 이름을 지정해야 합니다. 디자인 시스템 색상에 대한 기사에서 전략을 언급했습니다.

저는 일반적으로 H1, H2, H3… H6, Subtile, Body, Caption 과 Overline과 같은 텍스트 콘텐츠의 기반 비주얼 스타일로 전체 타이포그래피 스케일을 설정합니다. 그러나 버튼, 액션 등과 같은 특정 구성 요소와 관련된 일부 유틸리티 스타일이 있을 수 있습니다.

올바른 서체 선택

서체를 선택하는 것은 앱의 브랜드 인지도와 개성을 구축하는 열쇠입니다.
프로젝트에 디자인 시스템에서 사용할 수 있는 폰트가 이미 있는 경우 UI 라이브러리에 포함합니다. 그렇지 않은 경우, 시간을 내어 가장 적합한 폰트를 찾습니다.

좋은 서체를 검색할 때 해당 폰트가 특정 언어를 지원해야 한다는 사실을 기억해야 합니다. UI 라이브러리가 충분히 유연할 수 있도록 굵기와 스타일의 수에도 주의를 기울여야 합니다.

모바일용으로 디자인하는 경우 Android 또는 iOS의 시스템 관련 폰트가 가장 먼저 선택될 수 있습니다. 그러나 제한두지 않습니다. 다른 앱들을 살펴봅니다. 대부분이 브랜드 관련 폰트를 사용합니다.

디자인 시스템의 폰트 패밀리는 몇 개입니까?

UI 라이브러리에 여러 폰트를 넣고 싶은 유혹이 항상 있습니다. 하나의 폰트로 시작하여 필요한 경우 최대 2개의 폰트 패밀리로 확장하는 것이 좋습니다.

하나는 제목에 사용할 수 있고 두 번째 폰트는 다른 텍스트 스타일에 사용할 수 있습니다. 두 개 이하의 폰트를 선택하면 Design System 전체에서 일관성을 유지하는 데 도움이 됩니다. 그러나 하나의 폰트 패밀리로 충분할 수 있습니다. 

제 디자인 시스템에서 Inter 폰트를 선택했습니다. 매우 보편적이고 현대적인 폰트입니다. UI를 사용하기 시작하기에 좋은 선택입니다.

. .  

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램