첫인상이 중요합니다: 훌륭한 시각 디자인이 필수적인 이유

게시 됨: 2021-07-22

사람들은 성급한 판단을 내립니다. 사람의 첫인상을 결정짓는 데 걸리는 시간은 단 1/10초. 웹사이트도 다르지 않습니다.

사용자가 웹사이트에 남을지 떠날지를 결정하는 의견을 형성하는 데 약 50밀리초(ms)(0.05초)가 걸립니다.

이 숫자는 특정 연구에서 나온 것입니다. 첫 번째 연구에서 참가자들은 각각 500ms 동안 제시된 웹 홈페이지의 시각적 호소력을 두 번 평가했습니다. 후속 연구에서 그들은 노출 시간을 50ms로 줄였습니다.

전체적으로 시각적 매력 등급은 50ms와 500ms 조건 사이의 상관 관계와 마찬가지로 한 단계에서 다음 단계로 높은 상관 관계를 보였습니다. 따라서 시각적 매력은 50ms 이내에 평가될 수 있으며, 이는 웹사이트에 좋은 첫인상을 남기는 데 약 50ms가 있음을 시사합니다 .

이 첫인상은 구조, 색상, 간격, 대칭, 텍스트 양, 글꼴 등 많은 요소에 따라 달라집니다. 이 게시물:

  • 웹사이트 및 첫인상에 대한 자세한 조사.
  • 첫인상을 개선하는 시각적 디자인을 만드는 방법을 보여줍니다.

참고: 아래의 모든 웹사이트 스크린샷은 설명을 위한 것입니다 .

웹사이트 및 첫인상 조사

사용자는 17ms 안에 디자인 의견을 형성합니다.

몇 년 전 Google은 자체 연구에서 50ms를 확인했습니다. 실제로 그들의 연구에 따르면 일부 의견은 17ms 이내에 발생하지만 일부 설계 요소에서는 그 영향이 덜 두드러집니다.

그들의 연구에서 발견한 주요 결과는 시각적 복잡성이 낮고 프로토타입이 높은 웹사이트(특정 범주의 웹사이트에 대한 대표적인 디자인이 보이는 방식)가 매우 매력적으로 인식된다는 것입니다.

원형 홈페이지의 정사각형 예
사람들은 웹사이트가 어떤 모습이어야 하는지에 대한 기대치를 가지고 있습니다. 디자인이 아무리 상상력이 풍부하거나 눈에 띄더라도 이러한 방식에서 벗어나는 것은 위험합니다.

핵심 정보: 웹 디자인을 단순하고 친숙하게 만드십시오. 관례를 따르십시오. 사람들은 전자 상거래 사이트 어떻게 생겼는지에 대한 고정된 아이디어를 가지고 있습니다. 혁신적이고 틀에 얽매이지 않는 레이아웃을 선택하면 사람들이 선호하지 않을 것입니다.

참고: 포괄적인 보고서(전자상거래를 위한 247개 지침)에서 수많은 전자상거래 지침 및 테스트 아이디어를 참조하십시오.

눈이 웹 페이지의 주요 영역에 정착하는 데 2.6초가 걸립니다.

사용자의 눈이 웹사이트의 첫인상에 가장 큰 영향을 미치는 영역에 도달하는 데 2.6초가 걸립니다.

연구원들은 웹 페이지를 스캔할 때 학생들의 안구 움직임을 모니터링했습니다. 그런 다음 연구원들은 시선 추적 데이터를 분석하여 학생들이 다음과 같은 페이지의 특정 섹션에 집중하는 데 걸리는 시간을 결정했습니다. 메뉴 , 로고, 이미지 및 소셜 미디어 아이콘 - 다른 섹션으로 이동하기 전에.

그들은 첫인상이 좋을수록 더 긴 참가자들은 페이지에 머물렀습니다.

  • 상위 21가지 전자상거래 A/B 테스트 아이디어

    By CXL

    효과가 있는지 테스트하여 첫인상을 개선하십시오. 다음은 연구에서 파생된 상위 21개 전자 상거래 테스트 아이디어입니다.

  • 이 필드는 유효성 검사용이며 변경되지 않은 상태로 두어야 합니다.
웹사이트 첫인상의 시선 추적 연구 예
이 연구는 웹사이트를 6개의 섹션으로 나눈 다음 학생 피험자의 안구 움직임을 모니터링했습니다. (이미지 출처)

시청자의 관심을 가장 많이 끌었던 6개의 웹사이트 섹션은 다음과 같습니다.

  1. 기관의 로고입니다. 사용자는 계속 진행하기 전에 이 영역에 6.48초 동안 집중했습니다.
  2. 기본 탐색 메뉴입니다. 로고만큼 인기 있는 피험자들은 메뉴를 보는 데 평균 6.44초를 보냈습니다.
  3. 검색창 . 사용자는 6초 이상 집중했습니다.
  4. 사이트의 메인 이미지입니다. 사용자의 시선은 평균 5.94초 동안 고정됩니다.
  5. 사이트의 작성된 내용 . 사용자는 약 5.59초를 보냈습니다.
  6. 웹사이트 하단 . 사용자는 약 5.25초를 보냈습니다.

핵심 사항: 좋은 첫인상은 더 긴 방문으로 이어집니다. 여기에 나열된 6가지 요소가 멋지게 보이는지 확인하십시오.

첫인상은 94%가 디자인과 관련되어 있습니다.

영국 연구원들은 다양한 디자인 및 정보 콘텐츠 요소가 온라인 건강 사이트의 신뢰에 어떻게 영향을 미치는지 분석했습니다. 이 연구는 웹사이트의 모양과 느낌이 첫인상을 결정짓는 주요 요인임을 분명히 보여주었습니다.

깨끗한 웹사이트 디자인의 예
영국의 한 연구에 따르면 대부분의 웹사이트 비평은 콘텐츠가 아니라 사이트 디자인에 대한 인식에 의존합니다.

테스트 참가자가 제공한 모든 피드백 중 94%는 디자인에 관한 것이었습니다.

  • 복잡한;
  • 바쁜 레이아웃;
  • 탐색 보조 장치의 부족;
  • 지루한 웹 디자인;
  • 색상 사용;
  • 팝업 광고;
  • 사이트 소개가 느립니다.
  • 작은 글씨;
  • 너무 많은 텍스트;
  • 기업의 모습과 느낌;
  • 열악한 검색 기능.

실제 콘텐츠에 대한 피드백은 6%에 불과했습니다. 시각적인 매력과 웹사이트 탐색은 사람들의 사이트 첫인상에 가장 큰 영향을 미쳤습니다.

동시에 잘못된 인터페이스 디자인은 웹사이트에 대한 빠른 거부와 불신과 관련이 있었습니다. 참가자가 디자인의 한 측면을 좋아하지 않을 때 전체 웹 사이트는 홈페이지를 넘어 거의 탐색되지 않았습니다.

스탠포드 대학의 신뢰성 전문가들이 실시한 Consumer WebWatch에 대한 연구에서도 비슷한 결과가 나타났습니다. 그들은 사람들이 웹 사이트의 신뢰를 평가하는 방법에 대해 말하고 그들이 진짜로 어떻게 무엇이 다른 것을 발견했다.

데이터에 따르면 일반 소비자는 콘텐츠보다 시각적 신호와 같은 사이트의 피상적인 측면에 훨씬 더 많은 관심을 기울였습니다. 예를 들어, 전체 소비자의 거의 절반(46.1%)이 레이아웃, 타이포그래피, 글꼴 크기 및 색 구성표를 포함한 시각적 디자인의 매력을 부분적으로 기반으로 사이트의 신뢰성을 평가했습니다.

핵심 내용: 훌륭한 디자인은 사람들이 당신을 신뢰하고 계속 머물게 합니다. 형편없는 디자인은 불신을 만들고 사람들을 떠나게 만듭니다.

첫인상은 시각적인 매력이 사용성을 능가합니다.

한 연구에서는 시각적 매력과 사용성이 웹사이트에 대한 사용자 성능과 만족도에 미치는 영향을 조사했습니다.

사용자는 시각적 매력(높음 및 낮음)과 사용성(높음 및 낮음)이 다양한 웹사이트에서 다양한 작업을 완료했습니다. 그 결과 첫인상이 사이트의 시각적 매력에 가장 큰 영향을 받는 것으로 나타났습니다 .

사용자는 매력도가 높은 사이트에 높은 "사용성 및 관심도"를 부여하고 "사용성 및 관심도"가 낮은 사이트에 낮은 항소. 매력도가 낮은 웹사이트에 대한 사용자 인식은 사이트를 성공적으로 사용한 후에도 사이트의 유용성에 크게 영향을 받지 않았습니다.

핵심 내용: 디자인에 투자하십시오. 사용자를 끌어들이는 데 가장 중요한 것은 바로 이것이다. 흥미롭게도 훌륭한 시각적 디자인은 사용성 등급을 높이고 실제 사용성은 훨씬 덜 중요합니다.

긍정적인 첫인상은 전반적인 만족도를 높일 수 있습니다.

주관적 사용성 평가에 대한 제품 기대치의 영향을 연구하기 위해 수행된 실험에서 참가자는 사용성 테스트 전에 새로운 모바일 장치에 대한 긍정적 또는 부정적 제품 리뷰를 읽었습니다. 통제 그룹은 아무 것도 읽지 않았습니다.

긍정적 인 제품 리뷰로 프라이밍 연구에 사용되는 모바일 장치.
연구에 사용된 장치입니다. 긍정적인 제품 리뷰는 할당된 작업을 완료하지 못한 경우에도 사용자가 더 긍정적인 경험을 할 수 있도록 합니다.

이 연구는 주관적인 실험 후 평가에 긍정적인 기대가 놀랍도록 강한 영향을 미치는 것으로 나타났습니다. 긍정적인 리뷰를 읽은 참가자는 부정적인 프라임 및 비 프라임 그룹보다 장치에 훨씬 더 나은 실험 후 등급을 부여했습니다.

이러한 긍정적 소수의 부스팅 효과는 사용자가 대부분의 작업을 실패하는 어려운 작업 조건에서도 유지됩니다.

핵심 정보: 사용자가 귀하의 사이트를 "즉시" 좋아하면 딸꾹질을 위해 약간의 여유를 줄 것입니다. 이러한 종류의 프라이밍은 다른 방식으로도 작동할 수 있습니다. A n 부정적인 첫인상은 사이트에 대한 전반적인 만족도를 감소시킵니다.

좋은 인상을 남기고 싶다면 어디에서 시작하는 것이 가장 좋을까요?

시각 디자인으로 좋은 첫인상을 만드는 방법

1. 귀하의 웹사이트(및 귀하의 회사)를 귀하의 디자인으로 차별화하십시오.

당신은 시크하고, 어리석고, 섹시하고, 정통하고, 똑똑하고, 클래식하거나 무엇입니까? 경쟁과 어떻게 다른가요? 웹사이트의 타이포그래피, 이미지 및 디자인을 통해 가능한 한 빨리 전달합니까?

소비자를 실망시킬 수 있는 "혁신적인" 디자인을 피하는 것과 독특한 시각적 스타일을 찾는 것 사이에는 균형이 있습니다. 너무 자주, 같은 버티컬에 속한 회사들은 디자인 미학에서 "미투(me-too)" 접근 방식을 채택합니다.

때로는 경쟁 사이트가 너무 유사하여 사이트 헤더에서 로고를 제거하면 한 사이트를 다른 사이트와 구별하는 것이 거의 불가능합니다.

내가 알아차린 바에 따르면 이것은 두 가지 주요 이유 때문입니다.

  1. 디자인 미학에 대한 내부 대화는 뚜렷한 시각적 아이덴티티를 개발하기보다는 기능에 대한 대화로 이어집니다.
  2. 경쟁을 위해 "일하고 있는 것처럼 보이는" 기능과 미학이 채택되었습니다.

물론 새 사이트가 시작되면 모두가 서로에게 하이파이브를 주기에 너무 바빠서 새 디자인이 메이저의 카피에 가깝다는 것을 알아차리지 못합니다. 경쟁자, 또는 기존 고객이 처음에 회사와 쇼핑하는 것을 좋아하는 이유를 묻는 것을 완전히 무시했습니다.

시각적 커뮤니케이션에 차별화를 더하고 싶지만 어디서부터 시작해야 할지 모르겠다면 Zaltman Metaphor Elimination Technique를 확인하고 이를 정성적 설문조사에 적용하십시오. 이를 통해 방문자를 소외시키지 않으면서 브랜드의 핵심 가치를 나타내는 첫인상을 디자인 수 있습니다.

Taylan Demirkaya의 마케팅 연구 에서 ZMET 기법

"브랜드 아이덴티티"는 단순히 무시할 수 있는 단순한 것이 아닙니다. Cheskin Research & Studio Archetype은 1999년까지 전자 상거래 회사와 신뢰를 구축하는 데 있어 가장 중요한 6가지 요소를 발견했습니다.

  • 상표;
  • 항해;
  • 이행;
  • 표시;
  • 최신 기술;
  • 보안 로고.

잠시 생각해 보십시오. 첫인상이 귀하의 사이트가 다른 웹사이트와 구별할 수 없다는 것이라면 경쟁업체보다 귀하를 선택하는 것은 고사하고 다른 사람이 귀하의 제품 페이지를 탐색해야 하는 이유는 무엇입니까?

예를 들면 다음과 같습니다. 무작위 검색에서 시각적 구별과 전반적인 첫인상이 문제인지 알아보기 위해 "가죽 재킷"을 검색했습니다. 처음 세 가지 결과는 다음과 같습니다.

이 세 사이트를 구분하는 것이 있습니까? 정확히 같은 인구 통계를 공유하지 않더라도 실제로는 그렇지 않습니다.

검색 결과를 스크롤하는 데 시간이 조금 걸렸고 위와 같지 않은 사이트를 찾았고 마침내 Bomboogie를 발견했습니다. 페이지가 경쟁업체와 구별된다는 점은 부인할 수 없습니다.

다른 사이트와 달리 페이지는 즉시 다른 느낌을 보여줍니다. 이것은 섬세하고 고급스러운 재킷을 만드는 회사가 아닙니다. 그들의 재킷은 "비행사가 사용하는 재킷에서 영감을 얻었습니다". 사이트는 일부를 봅니다.

몇 년 전, 내가 처음 이 연구를 했을 때 내가 찾은 가장 뚜렷한 사이트는 Schott였습니다. 이미지 슬라이더, 음료수 캡 탐색 및 많은 가짜 질감을 버리고 싶었지만 특히 오래된 브랜드라는 점을 감안할 때 강한 첫인상을 주는 디자인에 대한 매력이 있었습니다.

쇼트

캐릭터와 감정을 느낄 수 있고 신뢰할 수 있는지 여부에 대한 느낌이 올 수 있습니다. 이것이 전체적인 첫인상입니다.

그러나 디자인 트렌드도 그들을 따라 잡았고 이제는 다른 모든 사이트와 훨씬 더 비슷하게 보입니다.

Shopify는 뚜렷한 첫인상을 가진 회사를 특징으로 하는 100가지 아름다운 전자 상거래 디자인 목록을 만들었습니다.

핵심 정보 : 사용자를 혼란스럽게 하거나 짜증나게 할 정도로 혁신적이지 않으면서 고유한 브랜드 아이덴티티를 전달할 수 있습니다(그리고 그래야 합니다).

2. 사이트 방문자에게 더 강력한 첫 번째 사이트를 만들도록 유도 인상.

관광 웹사이트에서 첫인상의 역할을 조사한 연구에 따르면 영감과 관련된 요소가 여행에 가장 큰 영향을 미치는 것으로 나타났습니다. 첫 인상 에스.

이는 시각적으로 매력적인 자극이 사람들이 사이트에 더 오래 머물게 하고 따라서 더 많은 방문자를 구매자로 전환시키는 중요한 도구임을 시사합니다.

칠레 여행 사이트에서 영감을 주는 자연 경관

사용성은 첫인상 형성의 두 번째로 중요한 요인이었고, 그 다음이 신뢰성이었습니다.

대체로 이것은 여행자가 목적지(이미지)에 대해 영감을 얻고 싶어한다는 것을 말해줍니다. 그들은 물건(사용성)을 파악하는 데 정신적 에너지를 낭비하고 싶지 않고 여행 제공업체가 합법적인지(신뢰성) 확인하기를 원합니다.

핵심 정보: 꿈을 판다면(예: 칠레로 휴가를 간다는 아이디어), 영감을 주는 사진이 첫인상을 주는 주요 요인입니다.

3. 접을 수 있는 부분이 흔들리는지 확인합니다.

수년에 걸쳐 위의 문제는 뜨거운 논쟁거리였습니다. 연구에 따르면 사람들은 스크롤하는 데 문제가 없으며 실제로 스크롤하는 것을 선호합니다.나누기 콘텐츠를 여러 페이지로 이게 첫인상이랑 무슨 상관이야?

9 웹사이트 신뢰도 킬러

알렉스 버켓

의심이 아닌 신뢰를 불러일으키는 웹 페이지를 만드는 방법을 배우십시오.

  • 이 필드는 유효성 검사용이며 변경되지 않은 상태로 두어야 합니다.

스크롤 없이 볼 수 있는 문제에 대한 새로운 사고 방식은 다음과 같습니다. 웹사이트에서 가장 좋은 부분이어야 합니다. 첫인상은 0.05초 만에 결정된다. 사용자는 그 시간 동안 아래로 스크롤하지 않습니다.

따라서 스크롤 하지 않고 즉시 보는 것이 아래로 스크롤할지 여부를 결정합니다. 이를 염두에 두고…

탐색에 각별한 주의를 기울이십시오.

명확한 사이트 탐색의 예

수많은 히트맵 연구에 따르면 탐색은 일반적으로 웹 사이트에서 가장 먼저 가장 많이 보는 영역 중 하나입니다. 그러나 일반적인 범주를 넘어서 무엇을 포함해야 합니까? ?

사람들이 장바구니를 포기하는 이유에 대한 Business Insider의 연구에 따르면, 25%의 사람들이 "웹사이트가 너무 복잡하다"(즉, 탐색이 사용하기 어렵다)고 말했고, 60%에 가까운 사람들이 "숨겨진 비용"(예: 배송료)을 언급했습니다. ) 그들이 아빠 없이 떠난 주된 이유 .

쇼핑객이 전자 상거래 상점에서 지불하지 않고 떠나는 이유를 보여주는 차트
숨겨진 비용과 복잡한 웹사이트는 사용자가 비용을 지불하지 않고 웹사이트를 떠나는 두 가지 주요 이유입니다.

eConsultancy의 다른 연구에서 낯선 전자 상거래 사이트에서 구매하는 것에 대해 질문한 방문자는 "전문적인 디자인", "잘 알려진 브랜드가 포함된 사이트" 및 "연락처 정보 표시"가 모두 구매 결정에 영향을 미쳤다고 말했습니다. ).

모르는 판매점과의 쇼핑에 대한 연구 결과.

잘하면 사이트의 탐색에 일부 또는 전체가 포함될 수 있으며, 없는 경우 방문자가 구매하지 못하도록 할 수 있습니다.

사이트 콘텐츠에 들어가지 않고 내가 즐겨 찾는 사이트 중 하나인 ThinkGeek의 탐색에서 얼마나 많은 정보가 전달되는지 살펴보십시오.

많은 귀중한 정보를 전달하는 사이트 탐색.

너무 많이 사냥하지 않고도 쉽게 찾을 수 있습니다.

  • 시간에 민감한 프로모션;
  • 사이트를 더 깊이 탐색하는 다양한 방법(카테고리, 관심분야, 검색)
  • New, Top, Exclusive 제품 및 가지고 있는 제품에 대한 힌트(선물, 티셔츠, 전자 제품, 상품권)
  • 보상 프로그램;
  • 판매 중인 제품;
  • 그들의 "무료 배송" 임계값;
  • 고객 지원 가용성("라이브 채팅" 및 "도움말" 버튼을 통해).

Zara와 같은 극단적인 예와 비교하면 이것이 왜 중요한지 알 수 있습니다.

미니멀리스트 탐색의 예

사례 연구: Alight는 사이트 검색을 16% 증가시키고 구매를 25% 증가시킵니다.

올드 어라이트

Alight(현재 CurvyHQ)는 사이트가 오래되었다는 것을 알고 있었습니다. 플러스 사이즈 여성 소매업체는 사이트 전체 탐색을 보다 현대적으로 만들었습니다.

그들은 검색 표시줄의 크기를 늘리고 신뢰 기호를 제거했으며 "판매" 및 "신규" 범주를 분홍색 탐색 영역에 통합하고 다른 사소한 업데이트 중에서 가치 제안을 명확히 했습니다.

검색 표시줄이 있는 업데이트된 홈페이지 탐색

그 결과 사이트 검색이 16% 증가하고 전체 구매가 25% 증가했습니다. 이 모든 것은 강력한 첫인상을 주는 탐색 부분을 만들어 냈기 때문입니다.

웹사이트나 NBA에서의 첫인상은 몇 년 동안 지속될 수 있습니다.

경제학자 Barry Staw와 Ha Hoang의 연구는 NBA에서 드래프트 명령의 영향을 조사했습니다. 그들은 드래프트 이후 5년 동안 선수들의 경력을 관찰했다. 5년이면 여러 방면에서 자신을 증명하기에 충분하니, 드래프트 명령이 역할을 해서는 안 되지 않습니까?

잘못된. 연구에 따르면 선수들이 받는 시간은 드래프트 순서와 상관관계가 있습니다. 팀은 드래프트가 높은 선수들에게 더 많은 플레이 시간을 부여하고 선수의 코트 내 성능, 부상, 트레이드 상태, 플레이한 위치 및 기타 요소를 통제한 후에도 더 오래 유지했습니다.

드래프트 번호가 증가할 때마다(즉, 8순위 대신 9순위로 지명됨) 플레이 시간이 23분만큼 감소했습니다. 놀랍게도, 드래프트 순서는 연구에서 측정된 마지막 해인 NBA에서 한 선수의 5년 동안의 플레이 시간을 계속 예측했습니다. 1라운드에 드래프트된 선수들은 경력도 더 길었습니다. 그들은 나머지보다 3.5년 더 놀았습니다.

선명하고 강렬한 첫인상을 주는 홈페이지 예시

또 다른 연구에서는 첫인상의 지속성을 조사했습니다. 그것은 첫인상과 모순되는 새로운 경험이 그들이 만들어지는 맥락에 "묶여"진다는 것을 발견했습니다. 그러나 첫인상은 여전히 ​​다른 맥락을 지배합니다.

우리의 뇌는 기대치를 어기는 경험을 "규칙에 대한 예외"로 저장합니다. 규칙(즉, 첫인상)은 위반된 특정 컨텍스트를 제외하고 유효한 것으로 처리됩니다.

핵심 내용: 첫인상이 부정적이면 사용자가 수년간 당신에 대해 편견을 가질 수 있습니다.

결론

시각적 매력이 중요합니다. 많이. 내 충고: 디자인에 돈을 아끼려고 하지 마십시오. 나는 "간단한" 디자인 점검이 어떻게 상당한 전환율 향상을 가져오는지 몇 번이고 보았습니다.

사람들은 귀하의 사이트에 대한 의견을 1000분의 1초 만에 형성합니다. 웹사이트의 첫 1초가 뒤따르는 모든 초보다 더 중요할 수 있습니다(있을 경우). 1초가 좋은 첫인상을 남기도록 하십시오.