2022년을 위한 10가지 블로그 레이아웃 모범 사례 — 어색한 레이아웃이 UX를 망치게 두지 마세요

현명한 사용자 경험 디자이너는 "좋은 디자인은 눈에 보이지 않는다"고 말했습니다. 즉, 귀하 또는 귀하의 사용자가 귀하의 블로그 레이아웃이나 사용자 경험을 알아차린다면 잘못된 디자인일 가능성이 높습니다.

우리가 매일 사용하는 모든 웹사이트, 앱, 플랫폼에 대해 생각해 보십시오. 우리는 사용자 인터페이스와 경험에 대해 의식적으로 생각하고 있습니까?

최고의 사용자 인터페이스(UI) 및 사용자 경험(UX)은 Instagram 게시물에 댓글을 달거나 긴 형식의 블로그 게시물 을 탐색 하거나 데이터를 입력하는 등 우리의 목표 달성을 방해하지 않는 것입니다. 웹 앱.

잘 디자인된 블로그는 여러 면에서 전자 상거래 비즈니스 소유자에게 필수적 입니다. 예를 들어 사이트로 트래픽을 유도하고 잠재 고객과의 신뢰를 구축하는 데 도움이 됩니다. 또한 제품과 서비스를 홍보하는 데 도움을 주어 나중에 성장 기회로 이어집니다.

불행히도 디자인이 어색하면 사람들이 계속해서 콘텐츠를 읽을 가능성이 적다는 것을 빨리 알게 될 것입니다. 즉, 위에서 언급한 좋은 일이 일어나지 않을 가능성이 높습니다.

“미디어는 메시지다.” 즉, 콘텐츠를 전달하는 방법은 콘텐츠 자체의 품질만큼 중요합니다.

블로그는 마케팅 퍼널의 중요한 부분이므로 좋은 UI/UX는 확실히 재방문자와 수익에 영향을 미칩니다.

이 블로그 게시물은 사용자의 참여를 유지하고 더 많은 것을 위해 다시 방문하고 다른 사람들에게 귀하의 블로그를 추천할 2022년 최고의 레이아웃 사례를 통해 실행됩니다.

2022년 UX를 위한 10가지 블로그 레이아웃 모범 사례

웹 모범 사례를 포함한 기술은 매주 변경되는 것 같습니다. 그리고 새로운 기술과 함께 새롭고 흥미로운 콘텐츠 소비 방식이 등장합니다.

이제 사용자는 소셜 미디어를 통해 또는 휴대전화로 블로그를 읽는 등 짧은 시간에 콘텐츠를 소비하는 데 익숙해졌습니다.

귀하의 블로그 레이아웃은 이러한 변화에 적응해야 하며 누군가가 블로그를 어디에서 어떻게 소비하는지에 관계없이 읽기 쉬워야 합니다.

다음은 최적의 UX를 위한 블로그 레이아웃을 디자인할 때 염두에 두어야 할 몇 가지 팁입니다.

팁 #1: 중앙 집중식 "학습 센터" 접근 방식 사용

특정 주제에 대해 광범위하게 글을 쓰는 것은 Google에서 주제에 대한 권위를 높이고 청중과 신뢰를 쌓을 수 있는 좋은 방법입니다.

그러나 블로그에서 이 콘텐츠를 구성하는 방법은 콘텐츠 자체만큼이나 중요합니다.

비영리 단체를 위한 기금 마련에 대해 알아야 할 모든 내용을 작성했다고 가정해 보겠습니다. 대단해. 그러나 관련 콘텐츠가 태그가 지정되지 않고 분류되지 않고 다른 많은 주제 사이에 산재되어 있다면 비영리 잠재 고객에게 무슨 소용이 있겠습니까?

특정 주제에 대한 모든 콘텐츠를 한 번에 소비하려는 사용자에게는 적합하지 않습니다. 해당 주제에 대한 모든 것이 한 곳에 정리되어 있는 누적 접근 방식을 사용하는 것이 훨씬 좋습니다. 이를 "학습 센터" 접근 방식이라고 합니다.

이 접근 방식은 참여도를 높이는 훌륭한 방법입니다. 이를 통해 사용자는 특정 주제에 대해 웹사이트 전체에서 찾아볼 필요 없이 특정 주제에 대한 모든 콘텐츠를 쉽게 찾고 소비할 수 있습니다. 또한 다른 콘텐츠를 교차 홍보하고 사이트에서 보내는 시간을 늘릴 수 있습니다.

또한 학습 센터 접근 방식은 세션당 페이지를 늘릴 수 있습니다.

이것은 실제로 어떻게 보입니까? MatterApp의 블로그 에서 좋은 예를 확인할 수 있습니다 . 직장 팀에게 칭찬과 피드백을 제공하는 앱을 제공하는 이 회사는 한 페이지에 6개 카테고리 아래 기둥 및 클러스터 콘텐츠를 묶었습니다. 이 페이지에는 사용자가 제품에 대해 더 많이 알기 위해 조사해야 하는 모든 것이 포함되어 있습니다.

팁 #2: "고정" 요소 활용

인간은 게으르다. 따라서 디자인의 기본 원칙 중 하나는 사용자가 가능한 한 적게 작업하면서 최대의 가치를 추가하는 것입니다.

페이지에 "고정" 요소를 사용하는 것은 이를 용이하게 하고 블로그 참여도를 높이는 가장 좋은 방법 중 하나입니다.

고정 요소는 사용자가 아래로 스크롤해도 화면에 계속 표시됩니다. 즉, 사용자가 페이지 맨 위로 다시 스크롤하지 않고도 항상 액세스할 수 있습니다.

예를 들어 이메일 목록에 가입하기 위한 클릭 유도문안이 있는 경우 고정 요소를 사용하면 항상 표시되고 쉽게 도달할 수 있습니다.

HubSpot의 블로그에서 이에 대한 예를 볼 수 있습니다 . 회사는 사용자가 이메일 목록에 가입하도록 권장하는 화면 오른쪽 하단의 고정 클릭 유도문안을 사용합니다.

다음과 같은 다양한 다른 목적으로 고정 요소를 사용할 수 있습니다.

• 소셜 미디어 버튼
• 탐색 메뉴
• 검색창
• 라이브 채팅 위젯

여기에서 중용이 핵심입니다. 끈적거리는 요소가 너무 많으면 페이지가 압도적이고 어수선해져서 궁극적으로 사용자 경험이 저하될 수 있습니다.

팁 #3: 추격전

블로그로 트래픽을 유도하고 Google에서 좋은 순위를 얻으려면 긴 형식의 콘텐츠가 있어야 합니다. 그러나 대부분의 독자는 빠른 답변을 원하고 제품이나 서비스의 장점에 대해 끝없이 이야기하는 것을 원하지 않습니다.

예를 들어, 사용자가 "블로그 쓰기란 무엇인가"라는 질문에 대한 답변만 원하는 경우 해당 쿼리에 대한 대부분의 검색 결과에는 길고 포괄적인 가이드를 읽는 것이 포함됩니다. 가이드가 질문에 답하지만 사용자는 정의를 찾기 위해 긴 콘텐츠를 훑어봐야 합니다.

또 다른 예는 Pinterest의 긴 블로그 게시물을 통해 재료와 레시피 단계를 살펴보는 것입니다. 레시피로 바로 연결되는 링크를 사용하는 요리 전문가에게 감사합니다. 맞죠?

이러한 예는 대부분의 사용자에게 시간이 많이 걸리고 실망스러운데, 이는 나쁜 사용자 경험의 전형입니다. 따라서 대신 기사 빠른 요약 상자를 활용하여 추적하십시오.

전체 기사의 요약을 포함하는 작은 상자를 갖는 것은 편리하고 사용자 또는 독자의 시간을 절약하는 좋은 방법입니다. 요약 상자는 내용을 어디에나 맞출 수 있도록 조정할 수 있지만 기사 시작 부분에 요약 상자를 배치하는 것은 독자에게 답변이나 내용을 자세히 설명하는 훌륭한 방법입니다.

보너스로 사용자의 질문에 명확하고 명료하게 답변하면 Google에서 사용자의 질문에 대한 답변을 강조 표시하는 Google SERP의 최상위 결과인 "추천 스니펫" 결과에 귀하를 배치할 가능성이 높아집니다.

팁 #4: 블로그 카드 디자인 활용

블로그를 최신 상태로 유지하기 위해 많은 기사를 작성하고 있을 것입니다. 수고하셨습니다! 계속 유지하십시오.

그러나 이것은 특히 기본 블로그 페이지에서 모든 새 게시물을 한 번에 강조하려고 할 때 시각적 혼란을 빠르게 유발할 수 있습니다.

그렇다면 사용자를 압도하지 않으면서 기본 블로그 페이지에 게시물을 표시하는 가장 좋은 균형은 무엇입니까? 블로그 썸네일과 기사 링크는 얼마나 크거나 작아야 합니까?

글쎄요, 그 질문에 대한 정답은 없지만 우리는 최소한 가장 효과적인 접근 방식이 "블로그 카드" 레이아웃이라는 것을 알고 있습니다. 구체적인 사항에 관해서는 평판이 좋은 출판 사이트의 관행을 연구하고 복제하는 것이 좋습니다.

Medium.com 은 이 형식의 훌륭한 예를 제공합니다.

다음을 포함하여 블로그 카드 디자인을 사용하면 많은 이점이 있습니다.

• 그들은 스캔하고 소화하기 쉽습니다.
• 그것들을 통해 우리는 중요한 정보를 쉽게 인식하고 기억하고 읽을 수 있습니다.
• 사용자에게 부담을 주지 않으면서 많은 정보를 포함할 수 있습니다.
• 쉽게 재배열하고 재정렬할 수 있어 반응형 디자인에 적합합니다.
• 충분한 공백을 제공하여 시각적으로 매력적이고 탐색하기 쉽습니다.

그러나 레이아웃은 가장 덜 중요한 요소와 가장 중요한 요소를 명확하게 구분하기 위해 다른 글꼴 크기와 이미지를 가져야 합니다. 이 전략은 독자가 디자인을 더 읽기 쉽게 만듭니다.

또한 카드 디자인에 다음 요소를 포함할 수 있습니다.

• 나타난 그림
• 블로그 작성자(이미지)
• 범주
• 블로그 제목
• 소셜 공유 링크
• 게시일
• 블로그 발췌
• 더 읽기 버튼

이 목록을 염두에 두고 Medium의 홈 페이지를 살펴보겠습니다.

각 "카드"와 관련된 모든 정보를 확인하십시오. 거의 모든 블로그 게시물에는 최소한 다음이 포함됩니다.

• 블로그 제목
• 나타난 그림
• 블로그 작성자
• 블로그 작성자 이미지
• 발행일
• 독서 시간
• 나중을 위해 게시물을 북마크하는 기능

당신은 아마 이전에 이러한 모든 요소를 ​​눈치채지 못했을 것입니다. 그렇지 않습니까? 하지만 당신은 아마도 그들의 존재에 감사할 것입니다. 그것은 훌륭한 디자인이 보이지 않는 완벽한 예입니다.

또한 Impact의 인바운드 마케팅 전문가가 블로그 카드 레이아웃에 기사를 정렬할 때 권장 하는 모범 사례 중 하나는 기사를 2~3열로 배치하는 것입니다.

이는 귀하가 제공하는 정보에 따라 다르지만 전반적으로 동시에 표시되는 게시물 수를 최대화합니다.

팁 # 5: 읽기 시간 포함

콘텐츠를 만들 때 사람들이 주변에 머물며 읽기를 원합니다. 그러나 독자가 시간이 없다고 느끼면 계속 진행할 것입니다. 그렇기 때문에 당신이 할 수 있는 최선의 방법 중 하나는 기사를 읽는 데 얼마나 걸릴지 정확히 알려주는 것입니다.

이 전략은 타겟 고객이 항상 이동하는 바쁜 사람들로 구성된 경우 특히 중요합니다. 예상 읽기 시간을 제공함으로써 짧은 시간 안에 소화하기 쉬운 콘텐츠로 다시 돌아올 가능성이 더 높은 시간 약속에 대한 사전 약속을 독자에게 제공하는 전략을 구현한 것입니다.

따라서 사람들이 주변에 머물면서 귀하의 콘텐츠를 읽게 하려면 시간이 얼마나 걸릴지 정확히 알려주십시오. 이 간단한 조치로 참여도가 높아지고 사람들이 사이트에 더 오래 머물 수 있습니다.

팁 #6: 유리하게 공백을 사용하세요

음수 공간이라고도 하는 공백은 페이지에서 요소 주위의 공간입니다. 레이아웃에 공백을 사용하여 독자의 시각적 관심을 불러일으키고 특정 콘텐츠에 주의를 집중시키는 것이 중요합니다.

공백의 적절한 균형을 찾는 것은 잘 디자인된 레이아웃을 만드는 데 필수적입니다. 공백이 너무 적으면 페이지가 비좁고 바쁘게 느껴져 사용자에게 부담이 될 수 있습니다. 반면에 공백이 너무 많으면 페이지가 완성되지 않거나 프로답지 못한 느낌이 들 수 있습니다.

예를 들어, TikTok은 많은 공백을 사용합니다. 그들이 사용하는 양은 비즈니스 웹사이트에서 어리석게 보일 수 있지만 온 페이지 비디오에 모든 관심을 집중시키기에는 완벽합니다.

일반적으로 공백을 너무 적게 사용하는 것보다 너무 많이 사용하는 편이 가장 좋습니다. 이것은 눈에 쉽게 깨끗하고 넓은 모양을 만드는 데 도움이 됩니다.

따라서 블로그 레이아웃과 관련하여 공백은 친구입니다. 특정 콘텐츠에 주의를 기울이고 레이아웃을 시각적으로 더 매력적으로 만드는 데 도움이 될 수 있습니다.

팁 # 7: 사이드바를 어지럽히지 마십시오.

이것은 많은 블로거가 저지르는 일반적인 실수입니다. 그들은 사이드바를 소셜 미디어 아이콘, 선택, 광고 및 기타 임의의 쓰레기로 가득 채웁니다.

이 관행은 모든 것이 나쁘게 보일 뿐만 아니라 방문자에게 혼란스럽고 압도적일 수 있습니다.

또한 고객에게 가치를 더하는 것보다 무언가를 판매하는 데 더 관심이 있다는 인상을 주어 정보 제공, 신뢰 구축 콘텐츠의 전체 목적을 무색하게 만듭니다.

사이드바를 쓰레기 서랍처럼 취급하지 마십시오. 대신 소셜 미디어 아이콘 및 옵트인과 같은 필수 사항에 충실하십시오. 이렇게 하면 탐색하기 쉽고 사용자 경험을 개선하는 보다 간소화된 모양을 만드는 데 도움이 됩니다.

팁 # 8: 타이포그래피를 현명하게 사용

타이포그래피는 텍스트가 호기심 많은 사람들에게 실제 또는 디지털 페이지에서 어떻게 보이는지입니다. 또한 서면 양식을 표시할 때 읽기 쉽고 매력적으로 만들기 위해 서체를 조작하는 것도 포함됩니다.

이 배열에는 일반적으로 줄 및 단어 길이, 간격 등과 같은 디자인 요소 또는 포인트 크기를 가져와서 눈을 즐겁게 하고 더 쉽게 이해할 수 있도록 추가하거나 조작하는 작업이 포함됩니다.

더 나은 효과를 얻으려면 레이아웃에서 타이포그래피를 현명하게 사용하는 것이 중요합니다. 시각적 흥미를 유발하고 특정 콘텐츠에 주의를 기울입니다.

예를 들어, 머리글에는 항상 더 큰 글꼴을 사용하고 본문 텍스트에는 더 작은 글꼴을 사용하고 싶을 것입니다. 또는 제목에 다른 글꼴을 모두 사용하고 싶을 수도 있습니다.

이상적으로는 17px에서 21px 사이의 글꼴 크기가 디지털 리더에 적합한 것으로 간주됩니다. 일부 글꼴 크기는 다른 글꼴에 비해 자연적으로 더 큽니다.

또한 페이지에서 사용하는 글꼴 수를 최대 3개로 제한하는 것이 좋습니다. 예를 들어:

1. 게시물 제목에 첫 번째 글꼴 스타일을 사용합니다.
2. 사이드바 제목에 두 번째 글꼴 스타일을 사용합니다.
3. 게시물 본문에 세 번째 글꼴 스타일을 사용합니다.

마지막 팁은 글꼴이 웹에 안전한지 확인하는 것입니다. 그렇지 않으면 일부 장치에서 로드되지 않을 수 있습니다. Google 글꼴은 웹 글꼴의 무료 저장소이며 항상 안전한 방법입니다.

팁 #9: 관련 기사 통합

사람들이 주변에 머물면서 콘텐츠를 읽게 하는 또 다른 방법은 관련 기사를 레이아웃에 통합하는 것입니다.

관련 기사는 주제 또는 주제가 유사한 다른 블로그 게시물(내부 및 외부)에 대한 링크입니다. 이러한 링크를 포함하면 사람들의 참여를 유지하고 콘텐츠를 더 오랫동안 읽을 수 있습니다.

관련 기사를 찾으려면 Yoast SEO와 같은 플러그인을 사용할 수 있습니다. 이 플러그인은 블로그 게시물을 분석하고 포함할 관련 기사를 제안합니다.

또는 Google로 이동하여 "[주제 키워드] site:[yoursite.com]"을 검색하여 수동 검색을 수행할 수 있습니다. Google이 사이트의 색인을 생성하는 한 해당 키워드가 포함된 사이트의 모든 페이지와 게시물이 표시됩니다.

예를 들어, 블로그 주제에 대해 작성한 모든 페이지를 보려면 Google에 "blogging site:skuvault.com"이라는 검색어를 입력합니다.

결과 페이지는 상호 연결을 위한 훌륭한 후보가 될 수 있습니다.

팁 # 10: 고품질 이미지 사용

블로그 레이아웃에 고품질의 촌스럽지 않은 이미지를 사용하는 것이 중요합니다. 사람들은 텍스트보다 그림에 더 많이 참여하는 경향이 있는 시각적 생물이기 때문입니다.

사실, 연구에 따르면 사람들은 정보가 이미지와 함께 제공될 때 정보를 기억할 가능성이 더 높습니다.

따라서 블로그 게시물의 이미지를 선택할 때 이미지가 고품질이고 현재 주제와 관련이 있는지 확인하십시오.

일반적인 스톡 사진을 피하기 위해 최선을 다하십시오. 때로는 기존 사진을 편집하여 더 사용자 정의된 것처럼 보이게 하는 것처럼 간단합니다.

고급스럽고 무료 스톡 사진을 찾을 수 있는 좋은 장소는 Pexels 입니다.

블로그 UX를 레벨업하는 다른 방법

나열된 10가지 팁 외에도 블로그의 UX/UI를 개선하는 몇 가지 다른 방법이 있습니다.

• 스캔 가능한 디자인 선택 : 블로깅은 책이나 학술 논문을 작성하는 것과는 매우 다릅니다. 짧고 정확한 섹션을 작성하고, 긴 단락을 피하고, 헤더와 관련 이미지로 텍스트를 나누고, 하위 헤더와 헤더를 사용하여 섹션을 구성하여 블로그 레이아웃을 스캔 가능하게 만들 수 있습니다.
• 레이아웃 브랜딩: 브랜딩은 성공적인 비즈니스 마케팅의 핵심이며 블로그 레이아웃에서도 동일하게 작동합니다. 만드는 블로그는 브랜드의 느낌과 모양을 반영해야 합니다. 즉, 홈페이지에 단순한 테마나 디자인이 있는 경우 블로그 레이아웃과 동일하게 유지하는 것이 좋습니다.
• 수직 정렬 사용 : 잘못 설계된 요소가 아픈 엄지손가락처럼 튀어나옵니다. 예를 들어 이미지와 텍스트가 열의 나머지 부분에서 어울리지 않게 보이면 주의가 산만해지고 비전문적으로 보입니다. 또한 단락과 사진의 너비는 시각적 연속성을 위해 동일해야 합니다.
• 검색창 포함 : 사이트에 콘텐츠가 많으면 사람들이 원하는 것을 찾기 어려울 수 있습니다. 블로그 레이아웃에 검색 창을 포함하는 것이 중요합니다. 그렇게 하면 사람들이 원하는 정보를 빠르고 쉽게 찾을 수 있습니다.
• 콘텐츠 작성자 강조 표시 : 블로그에 작성자가 여러 명인 경우 해당 작성자의 이름을 강조 표시하고 게시물 옆에 고품질 사진을 포함하는 것이 중요합니다. 이 접근 방식은 모든 것을 인간화하고 독자와의 신뢰를 구축하는 데 도움이 됩니다. 또한 동일한 작성자의 다른 콘텐츠를 쉽게 찾을 수 있고 Google에서 귀하의 EAT(전문성, 권위, 신뢰)를 결정하는 데 도움이 됩니다.
• 귀하의 사이트를 모바일 친화적으로 만드십시오: 2022년입니다. 블로그 레이아웃이 모바일 친화적인지 확인하는 것은 협상의 여지가 없습니다. 고맙게도 평판이 좋은 제공업체(WordPress, Squarespace, Shopify)의 모든 최신 블로그 레이아웃에는 상자에서 꺼내자마자 모바일 친화적인 레이아웃이 포함되어 있습니다. 모바일 친화적인 레이아웃이 없다면 이 게시물의 범위를 벗어나는 문제가 있는 것입니다.

당신은 그것을 가지고 있습니다! 이 팁을 활용하여 독자가 계속해서 더 많은 콘텐츠를 볼 수 있도록 하는 멋진 블로그 레이아웃을 만드십시오.

재고 관리를 잊지 마세요

우리의 조언을 받아들이고 이러한 UX 팁을 구현하면 독자층, 트래픽 및 판매 급증에 대비하십시오(환영합니다!).

전자 상거래 상점인 경우 이러한 성장을 관리하려면 우수한 재고 시스템이 필요합니다.

SkuVault는 모든 형태와 규모의 기업이 재고 관리와 관련된 지루한 작업을 최적화하고 간소화하도록 돕기 위해 존재합니다.

여기를 클릭 하여 비즈니스 소유자가 수익을 높이고 정신을 지키도록 돕는 구체적인 방법에 대해 자세히 알아보십시오.