전자 상거래 웹 사이트를 디자인할 때의 모범 사례

게시 됨: 2021-03-24

시체를 숨길 가장 좋은 장소가 어디냐는 농담을 들었습니까?

Google 검색 결과의 두 번째 페이지입니다.

재미있지만, 생계를 위해 전자 상거래 웹사이트에 의존하고 있다면 웃을 일이 아닙니다.

그리고 최근 통계에 따르면 다음과 같습니다.

2018년에는 48%, 2021년에는 75%의 온라인 소비자가 웹사이트를 기반으로 비즈니스의 신뢰성을 판단하고 사이트에 도착한 후 처음 50밀리초 이내에 이러한 의견을 내립니다. 잘 디자인된 웹사이트를 갖는 것이 그 어느 때보다 중요합니다.

10년 전에는 수천 달러를 지출해야 했습니다.

그러나 오늘날에는 어떤 디자인 요소를 포함하고 어떤 도구를 사용해야 하는지 알고 있다면 100분도 안 되는 비용으로 스스로 할 수 있습니다.

그리고 그것이 우리가 당신에게 말하려는 것입니다.

1. 관련 테마 선택

모든 마켓플레이스는 다른 용도로 사용되며 특정 유형의 웹사이트가 필요한 용도로 사용됩니다. 이것이 우리가 테마를 가지고 있는 이유입니다.

예를 들어, Booking.com 및 Air B&B와 같은 숙박 웹 사이트는 예약 캘린더 및 이미지와 함께 테마를 사용하여 관련 정보를 제공하고 손쉬운 예약을 제공하는 것을 목표로 합니다.

그러나 Amazon과 같은 전자 상거래 상점은 베스트 셀러 제품과 리뷰를 강조하여 판매 유입 경로에 관한 것입니다.

선택한 테마는 방문자에게 방문 시 비즈니스가 무엇인지 즉시 명확히 해야 합니다. 다행히 대부분의 전자 상거래 웹 사이트 플랫폼은 업종별로 테마를 지정하므로 비즈니스를 지원할 테마를 쉽게 선택할 수 있습니다.

2. 디자인을 단순하고 기능적으로 유지

잘못 설계된 웹사이트를 사용하십니까?

아니요, 물론 당신도 그렇지 않으며 다른 사람도 마찬가지입니다.

“디자인은 단순히 어떻게 보이고 어떤 느낌인지가 아닙니다. 그것이 작동하는 방식입니다.”

스티브 잡스처럼

현대 디자이너는 웹 사이트를 구축할 때 더 많은 청중에게 어필하기 때문에 최소한의 접근 방식을 사용합니다. 이제 모든 사람들은 온라인 쇼핑 시 원활한 UX(사용자 경험)를 기대하며 이를 제공하는 것은 단순함입니다.

소비자가 필요한 것을 찾는 데 필요한 것만 포함하여 더 적은 것이 더 많은 접근 방식을 사용하여 이를 만듭니다.

깨끗하고 탐색하기 쉽고 빠르게 로드되는 웹 사이트는 사용하기 쉽고 편리하기 때문에 전환율이 가장 높습니다.

3. 귀하의 웹사이트를 쉽게 탐색할 수 있도록 하십시오

단순함을 유지하면서 웹사이트의 탐색은 사용하기에 간단하고 논리적이어야 합니다. 그렇지 않으면 방문자가 구매하기 전에 이탈합니다.

오늘날의 전자 상거래 UX 디자인은 방문자가 최소한의 손쉬운 전환을 보장하는 데 중점을 두고 있습니다.

하지만 두 가지 방식으로 작동해야 합니다.

소비자는 왔다 갔다 하는 것을 좋아하며 많은 웹사이트가 잘못된 정보를 얻고 판매를 잃습니다.

필수 웹사이트의 탐색 요소:

  • 브랜드 로고: 헤더에 있어야 하며 항상 홈페이지로 바로 연결되어야 합니다.
  • 검색 표시줄: 사용자가 제품 또는 카테고리를 빠르게 찾을 수 있도록 하며 여정의 모든 단계에서 표시되어야 합니다.
  • 카탈로그: 방문자가 선택한 제품 범위로 직접 전환하고 이동할 수 있도록 도와줍니다.
  • 필터링 : 원치 않는 제품 유형을 제외하여 검색 시간을 줄이며 웹사이트 전체에서 사용할 수 있어야 합니다.
  • 빵 부스러기: 매우 중요   사용자가 이전에 선택한 페이지 또는 제품으로 돌아갈 수 있도록 합니다.

4. 여정을 제어하기 위한 시각적 계층 구조 구현

시각적 계층 구조는 중요한 정보 블록을 강조하여 방문자의 여정을 제어합니다.

정보 블록은 웹사이트에 포함된 전략적으로 배치된 디자인 요소이므로 사용자는 여정의 선택된 지점에서 이를 보고 행동 선택을 제어합니다.

클릭 유도문안 및 로고와 마찬가지로 가장 중요한 것은 항상 스크롤 없이 볼 수 있는 스크롤 없이 볼 수 있는 부분 위에 있어야 합니다.

필수 정보 블록은

  • 머리글 로고
  • CTA(행동 촉구)
  • 눈에 보이는 검색창
  • 쉽게 찾을 수 있는 연락처 정보
  • 탐색 메뉴
  • 주요 콘텐츠 영역
  • 영웅 이미지 또는 슬라이더
  • 웹사이트 바닥글

5. 강력한 브랜딩 요소 사용

소비자는 자신이 사용하는 브랜드를 신뢰하며 Edelman 설문조사에 따르면

" 소비자의 81%는 브랜드를 신뢰할 수 있어야 구매가 가능하다고 말했습니다."

소비자는 브랜드를 기억하기 위해 6번을 봐야 하므로 웹사이트는 타겟 시장과 연결하기 위해 중요한 브랜드 요소를 사용해야 합니다. 브랜딩은 또한 군중에서 눈에 띄고 주목받는 방법이며 시청자가 귀하의 비즈니스를 알아보기 시작하면 귀하의 웹사이트를 클릭하려는 경향이 더 커질 것입니다.

시장과 소비자 모두에게 적합한 로고, 색상, 글꼴과 같은 디자인 요소를 웹사이트 전체에 사용하여 브랜드 아이덴티티를 만들고 응집력 있는 아이덴티티를 만듭니다.

모든 디자인 요소 중 로고는 중추적인 역할을 하며, 9가지 종류의 로고가 있어선택하기 위해, 우리는   이 게시물의 뒷부분에서 각각을 살펴보십시오.

6. 반응형으로 만들기

스마트폰 소유자의 79%가 모바일 장치를 사용하여 구매하므로 전자 상거래 웹사이트는 반응형이어야 합니다.

웹사이트가 스마트폰 사용에 최적화되어 있지 않으면 더 작은 화면 크기에 맞게 조정되지 않습니다. 즉, 텍스트와 인터페이스 요소가 너무 작아서 소비자가 웹사이트와 상호 작용하기 어렵습니다. 그런 일이 발생하면 사용자는 아무 생각 없이 뒤로 클릭합니다.

다행히도 대부분의 최신 웹 사이트는 자동으로 모바일 반응형이지만 선택한 템플릿이 그렇지 않은 경우 필요한 플러그인을 설치하여 업데이트할 수 있습니다.

Saasland WordPress Theme의 모든 페이지는 주요 장치에 반응합니다.
Saasland WordPress Theme의 모든 페이지는 주요 장치에 반응합니다.

7. 사회적 증거 추가

평가 방식의 사회적 증거는 방문자가 귀하의 제품 및 서비스에 대한 편견 없는 여론을 제공하기 때문에 방문자를 구매자로 전환하는 데 필요한 신뢰를 구축하는 데 필수적입니다.

방문자가 볼 수 있는 곳에 두십시오. 이제 수집하고 표시하는 데 도움이 되는 도구를 사용할 수 있습니다.

소셜 미디어

9가지 유형의 로고

픽토리얼 마크

픽토리얼 마크는 이미지나 아이콘 기반의 로고로, 어떠한 텍스트도 지원하지 않습니다. 그것은 잘 확립되고 즉시 알아볼 수 있는 브랜드에서 주로 사용됩니다.

추상 마크

추상 마크는 그림과 비슷하지만 문자 그대로의 표현이 아니므로 상상력을 최대한 발휘할 수 있으므로 진정으로 독특한 로고 타입을 만드는 데 적합합니다.

워드마크

워드마크는 일반적으로 기업의 이름이며, 소비자에게 원하는 메시지와 느낌을 전달하는 특정 글꼴의 사용에 중점을 둔 이러한 스타일의 로고입니다. 하나를 사용하는 경우 선택에 신중을 기하고 브랜드의 개성을 포착해야 합니다.

레터마크

회사 이름이 워드마크 로고 유형에 비해 너무 긴 경우 이니셜을 사용하여 식별을 만들 수 있습니다. 기억에 남는 로고를 만드는 검증된 방법입니다.

콤비네이션 마크

콤비네이션 로고타입은 아이콘과 워드마크의 조합으로 비주얼과 텍스트를 사용하여 시청자가 자신을 인식하고 기억할 수 있도록 하여 스타트업 비즈니스에 적합합니다.

마스코트

마스코트는 비즈니스를 나타내는 데 사용되는 일러스트 캐릭터입니다. 그리고 회사에 개성을 부여하는 데 완벽하기 때문에 수많은 감정적 수준에서 연결되기 때문에 사람들이 연상하는 이미지가 되는 경우가 많습니다.

상징

엠블럼은 문장, 배지 및 인장과 같은 텍스트가 포함된 아이콘입니다. 일반적으로 대학, 자동차 제조업체 및 음료 회사에 사용됩니다. 이 스타일의 로고는 일반적으로 매우 상세하여 업데이트하기 어렵습니다.

모노그램

모노그램 로고는 종종 회사 설립자의 이니셜을 포함하는 단축된 문자 표시입니다. 패션 업계와 고급 제품과 서비스를 제공하는 사람들이 사랑합니다.