웹 디자인의 "인지 부하": 사용자가 탈출하고 전환을 증가시키지 않도록 복잡성을 줄이는 방법.

당신은 해본 적이 있습니까? 웹 사이트에 가서 누르고 닫아야 할 때까지 "한 행크"처럼 느껴집니다.

상상해보십시오 ... 당신은 새로운 운동화를 원한다고 상상해보십시오. 완전한 힘! 흥미로워 보이는 온라인 상점을 검색 할 때 Hope와 함께 클릭하지만 내가 찾은 것은 ... 수백 개의 제품이 화면으로 가득 차 있으며 10 개의 메뉴가 있습니다. 하위 카테고리, 필터 필터는 사용하기가 너무 복잡하고 POP -UP 프로모션이 다시 바운다! 흥분은 모두 사라졌습니다. "어리석은" "피곤한"과 "혼란"의 느낌 만. 마지막으로, 당신은 그들이 원하는 신발을 찾지 못했지만 웹 사이트를 닫기 위해 한숨을 쉬고 눌러 웹 사이트를 닫 습니다 .

[삽화를위한 프롬프트] 그래픽 이미지는 혼란스러운 정보로 채워진 컴퓨터 화면을 보면서 혼란스럽고 두통이있는 사용자의 표현을 보여줍니다. 머리 주위에 아이콘, 아이디어 및 물음표가있어 "한한"의 느낌을 전달합니다.

"인지 부하"는 무엇입니까? 왜 웹 사이트의 "독"입니까?

집에서 말하기. 인지 부하는 사용자가 웹 사이트를 이해하고 사용하기 위해 지불 해야하는 "뇌 에너지"입니다. 우리의 뇌는 컴퓨터의 램과 같습니다. 한 번에 복잡한 정보, 질서 있거나 너무 많은 옵션을 던지면 복잡한 처리 영역이 제한되어 있음을 의미합니다. 뇌의 램은 빠르게 "가득 차서"피곤함을 느끼고 혼란스러워하며 웹 사이트를 닫는 "쉬운 일"을 피하고 싶어합니다.

UX의 원칙에 따르면 Nielsen Norman Group이 설명했습니다. 인지 부하는 3 가지 주요 유형으로 나눌 수 있습니다.

• 본질적인인지 부하 (내용 자체의 복잡성) : 세금 정보 작성과 같은 정보 나 목표의 어려움으로 인한 부담. 당연히 셔츠 색상을 선택하는 것보다 더 복잡합니다.
• 외부인지 부하 (Design Complex) : 이것은 우리가 통제 할 수있는 "악당"입니다! 찾을 수없는 것, 사람들이 이해하지 못하는 기술 용어를 사용하거나 혼란스러운 레이아웃을 사용하여 나쁜 디자인으로 인한 불필요한 부담입니다.
• 독일인인지 부하 (학습에 대한 부담) : "좋은"부담, 사용자가 새로운 것을 이해하고 배우는 데 도움이됩니다. 귀하의 제품에서 귀하의 제품이 문제를 해결할 수있는 방법을 이해하는 것과 같은 귀하의 웹 사이트에서

현명한 웹 디자이너의 의무는 불필요한 "외부 부하 감소"입니다. 따라서 사용자는 독일인 부하와 함께 사용하거나 정말로 중요한 것을 이해하기 위해 뇌 에너지를 유지하도록합니다. 사용자의 인식의 편견을 고려한 디자인은 또 다른 흥미로운 문제입니다. 웹 디자인의인지 편견 에 대한 기사에서 더 많은 것을 읽을 수 있습니다 .

[삽화를위한 프롬프트] 간단한 인포 그래픽 이미지, 뇌의 3 개 부분 "내재적", "외부"및 "독일"으로 나뉩니다. "외부"는 화려한 빨간색이며 바트의 자국이 있습니다. 이것이 제거되어야하는 부분임을 강조하기 위해

"엉망"웹 사이트를 계속할 수 있습니까? "재해"사업을 처리 할 준비를하십시오.

인지 부하 문제의 무지는 아름다운 가게를 여는 것과 같습니다. 그러나 가게 입구는 더럽고 고객이 실제로 들어가고 싶지 않은 명확한 표시가 없습니까? 웹 사이트가 사용자의 뇌에 부담을 줄 수있는 결과는 생각보다 더 무섭습니다.

• Bookce rate가 뛰어 들었습니다. 사용자가 들어 와서 올바른 장소를 찾을 수 없었습니다. 그는 즉시 눌렀다. 통계에 따르면 대부분의 사람들은 체류 여부를 결정하는 데 몇 초가 걸립니다.
• 전환율 DANT : 우리의 궁극적 인 목표는 쇼핑, 형태를 채우거나 회원 자격을 신청하든 "무언가를"하는 것 "이지만 모든 단계가"어려운 "과"많은 생각을해야한다 "는 경우 카트 포기가 가장 명백한 예를 포기할 것입니다.
• 경험과 신뢰성 (브랜드 트러스트) : 사용하기 어려운 웹 사이트는 고객이 브랜드가 "주의를 기울이지 않는"적이고 "전문가가 아님"이라고 느끼게합니다. 첫인상은 해결하기가 매우 어렵습니다. 다시 돌아 오지 않을 수 있습니다
• 무료 광고 수수료 낭비 : Google 광고 또는 Facebook 광고와 함께 많은 돈을 버릴 수 있지만, 방문 페이지가 높은 부하를 만들면 사람들이 들어 와서 전환없이 눌러서 "돈을 쏟아 붓고 있습니다.

의사 결정이 높은 B2B 비즈니스의 경우 원활한 경험을 만드는 것이 훨씬 더 중요합니다. 고 가치 B2B 비즈니스를위한 UX/UI 설계 에 대해 자세히 알아 보려면 보다 명확한 이미지를 볼 수 있습니다.

[그림의 프롬프트] 그래프는 "바운스 속도"상승을 보여주고 "변환율"라인이 명확합니다. 인지 부하의 영향과 관련하여 피곤한 뇌 아이콘으로

성경을 열어 "뇌 하중 감소". 실제 해결책. 그리고 즉시 시작해야합니다!

좋은 소식은 입증 된 설계 원칙으로 웹 사이트에서 외부인지 부하를 "제거"할 수 있다는 것입니다. 그리고 이것은 즉시 시작할 수있는 방법입니다.

• "작지만 매우"(Hick의 법)의 원칙을 사용하십시오. 이 규칙은 "더 많은 옵션이 많을수록 더 많은 사람들이 더 오래 걸릴 것"이라고 말합니다. 따라서 사용자가 옵션 (선택의 역설)으로 마비되지 않습니다. 메인 메뉴 수, 첫 번째 페이지에 표시된 제품 수를 줄이거나 양식 만 필요합니다. 전자 상거래 웹 사이트의 솔루션은 Pararicex에서 자세히 알아볼 수 있습니다.
• 정보 구성 (청킹) : 우리의 뇌는 단일 단일 스케일 데이터 (Miller 's Law)보다 "그룹"을 기억하고 길고 짧은 단락 인 콘텐츠를 나누고, 총알 포인트를 사용하거나, 예를 들어 지불 절차를 명확하게 나누는 카드 디자인 또는 다른 색상 배경을 구성합니다. (배송 정보 -> 지불 방법 -> 확인)
• 명확한 "Visual Hiel Hierarchy : 사용, 색상 및 문자의 두께를 사용자의 눈을 탐색 할 수 있습니다. 주요 주제, 보조 주제 및 클릭 할 가장 중요한 버튼이 무엇인지 즉시 알리십시오 (Call -to -Action).
• 사용자 (Jakob 's Law)의 모델을 사용하여 다른 웹 사이트의 대부분의 사용자! 따라서 귀하의 웹 사이트도 비슷하게 작동 할 것으로 기대합니다. 그들이 만난 것처럼 로고 (왼쪽 -탑 각도), 제품 아이콘 (오른쪽 오른쪽 모서리) 또는 표준 체크 아웃 프로세스와 같은 너무 기본적인 것들로 "창의적"을 시도하지 마십시오.
• "오프로드"는 뇌 대신에 뇌가 할 수있는 일 : 사용자가 잘못된 형태를 채우는 경우와 같이 사용자가 길에 정보를 "기억"하도록 강요하지 마십시오. 모든 것을 채우는 모든 정보를 세척하고 이미 본 제품을 보여 주거나 명확한 제품 비교 기능이 있음을 보여주지 마십시오.

사용자가 쉽게 원하는 정보로 탐색하는 개념은 정보 향기의 원칙과 관련이 있으며, 이는 전환을 개선하는 데있어 또 다른 중요한 주제입니다.

[그림을위한 프롬프트] Infox, 작은 아이콘, 그룹 아이콘, 피라미드 아이콘, 아이콘, 보존 및 아이콘과 같은 쉽게 이해하는 아이콘을 사용하여 5 가지 주요 기술 (Hick 's Law, Chunking, Visual Hierachy, Jakob's Law, Offloading)을 요약합니다.

실제 사례 : Saas가 "복잡성을 줄이기"로 동의하고 고객이 "사랑"이라고 할 때

마케팅 담당자에게 데이터 분석 도구를 제공하는 SaaS (Software-as-AA-Service)에 대해 생각해보십시오. 그들의 "첫 번째 버전"에는 기능, 그래프 및 복잡한 데이터 일정이 가득합니다. 대시 보드는 결과가 없습니다. 무엇입니까? 정보가 포함 된 "잃어버린"및 "압도적"을 시험해 보려고 신청하는 신규 고객. 그들은 어디서부터 시작 해야할지 모릅니다. 그리고 마침내 IT의 가치가 재판에서 실제 고객 (트랄 투 페이드 변환)으로의 가치 변경률을보기 전에 사용을 중단했습니다. 지원 팀은 매일 같은 질문에 반복해서 대답해야합니다.

"사용자 경험의 점검"의 사명 : 팀은인지 부하를 그들에게 핵심으로 줄이는 원칙에 따라 모든 대시 보드를 점검하기로 결정했습니다.

• 고급 기능 숨기기 : "고급"메뉴에서 종종 사용되지 않는 복합체를 이동하십시오.
• 가이드와 함께 온 보딩 생성 : 첫 번째 로그인 사용자가 짧은 여행을 할 때 "가장 중요한"3-4가 처음에 필요한 기능 만 제안합니다.
• 대시 보드 "스마트 빈 상태"를 사용하십시오. 혼란스러운 빈 그래프 대신 "데이터를 연결하여 그래프 A를 확인하십시오"라는 간단한 제안이 표시됩니다.
• 새로운 정보 구성 : 관련 정보를 동일한 카드로 정리하고 인간이 이해하기 쉬운 언어를 사용하십시오. 기술 어휘 대신

놀라운 결과 : Tral-to-Paid 전환이 최대 40%까지 변경된 후, "기본 사용"에 대한 지원 티켓 수는 60% 이상 감소했으며 가장 중요한 새로운 고객은 제품의 "이해"및 "가치를 훨씬 더 빨리 볼 수 있습니다". 지속적인 사용으로 이어지는 것은 사용자의 뇌에 관심이있는 디자인의 힘입니다. SaaS 비즈니스를위한 훌륭한 고객 온 보딩 프로세스 의 핵심입니다.

[그림을위한 프롬프트] 왼쪽에있는 대시 보드 컴퓨터 프로그램의 대시 보드 페이지의 이미지를 비교합니다 (오른쪽에 그래프와 숫자로 가득 찬 자란 화면을 표시하기 전에 깨끗한 화면을 표시 한 후 짧은 가이드가 있습니다. 그리고 친근한 방식으로 사용하도록 초대하는 메시지가 있습니다.

팔로우하고 싶습니까? 체크리스트 점검표 Cognitive Load 웹 사이트 (즉시 사용할 수 있음)

여기에서 읽으십시오. 이 간단한 점검 목록을 사용하여 "건강을 확인하십시오". 귀하의 웹 사이트는 뇌가 열심히 일하도록 강요하고 있습니다.

1. 내비게이션 : 메인 메뉴는 몇 개입니까? 7 이상입니까? 외부인을위한 명확하고 쉬운 이해 메뉴에 단어가 사용됩니까?
2. 홈페이지 : 사용자가 처음 3 초 안에 첫 페이지에 오면 웹 사이트에 대해 답변 할 수 있습니까? 그리고 그에게 어떻게 유용합니까? 아니면 흩어진 정보로 가득 차 있습니까?
3. 양식 (양식) : 회원에게 연락하거나 신청하는 정보는 몇 개입니까? 실제로 불필요한 채널이 있습니까? 그리고 그것을 잘라낼 수 있습니까?
4. 페이지/서비스 (제품/서비스 페이지) : 정보가 쉽게 읽을 수 있도록 배열되어 있습니까? 아니면 긴 편지가 풍부하게 함께 붙어 있습니까? "바구니 선택"또는 "따옴표 요청")가 분명합니까?
5. 일관성 : 버튼의 얼굴, 사용 된 색상 및 각 페이지의 레이아웃이 일관성이 있습니까? 아니면 각 페이지가 다른 웹 사이트 인 것 같습니다.
6. 팝업 및 산만 함 : 팝업, 배너 또는 애니메이션이있어 사용자의 사용량을 불필요하게 방해하기 위해 튀어 나오는가?

이 질문에 직접 대답하십시오. 웹 사이트에서인지 부하를 만든 "사각 지대"를보기 시작합니다. UX/UI 설계 설정하기 위해 전문가가 필요한 경우 전환율에 큰 변화가 생길 수 있습니다 .

[그림을위한 프롬프트] 각 컴퓨터 화면에서 돋보기를 사용하는 사람들과 함께 ChecklistListListListling 이미지 (아이콘 아이콘, 메뉴, 하우스 아이콘, 아이콘, 가격표).

사람들이 궁금해하는 경향이있는 질문 (Q & A)은 웹에 대한 모든 매듭을 명확하게합니다. "쉽지만 일"

나는 명확한 답변으로인지 부하에 대한 인기있는 질문을 편집했으며 실제로 여기에서 사용했습니다.

Q1 :인지 부하를 줄이기 위해 "간단한"설계 웹 사이트는 웹 사이트를 "지루하게"만들어주지 않습니까?
A : 전혀 아닙니다! "Simple"은 "지루한"(지루함) 또는 "Plaine"을 의미하지는 않지만 Apple 또는 Google과 같은 세계 클래스 웹 사이트 인 "Clarity"및 "Contentality"를 의미합니다. 간단하지만 강력한 디자인의 좋은 예입니다. 마음은 "본질"과 "아름다움"이 완전히 표시되도록 불필요한 것들을 제거하는 것입니다.

Q2 : 우리 웹 사이트가인지 부하가 높거나 낮은 결과를 어떻게 측정 할 수 있습니까?
A : 직접 측정 번호는 없지만 다음과 같은 징후에서 볼 수 있지만 다음과 같이 볼 수 있습니다. 1.) 정량적 데이터 (정량적 데이터) : Google 웹 로그 분석의 이탈률, 페이지 시간 및 전환율을 참조하십시오. 경고 표시 일 수 있습니다. 2. 질적 데이터 : 이것이 가장 좋은 방법입니다! 실제로 사용자의 유용성 테스트를 웹 사이트에서 임무를 수행하려고 시도하고 "고정"또는 "혼란스러운"또는 HeatMap을 사용하여 사람들이 클릭하여 페이지로 이동하는 위치를 확인해야한다는 것을 알 수 있습니다.

Q3 : 필요한 정보와 단순성 사이에서 무엇을 선택해야합니까? 때때로 우리의 사업에는 실제로 의사 소통 해야하는 복잡한 정보가 있습니다.
A : 아주 좋은 질문입니다. 우리는 한 가지 방법으로 "선택"할 필요는 없지만 "균형"과 "스마트하게 제시된"것을 찾아야합니다. 그런 다음 사용자가 "자세히 알아보기"를 클릭하여 준비가되었을 때 더 복잡한 세부 정보를 보게하십시오. Smashing Magazine과 같은 신뢰할 수있는 정보 소스를 사용하여 고급 UX 디자인 기술을 연구하십시오.

[그림을위한 프롬프트] 이미지 아이콘, 전구, 더 밝은 아이디어와 점차적으로 사라지는 물음표와 함께

요약 : 사용자의 뇌는 가치가 있습니다. 그를 불필요하게 "많은 생각"하도록 강요하지 마십시오.

이 시점에서인지 부하가 UX/UI 산업에서 멋진 기술 용어 일뿐 만 아니라 웹 사이트의 "성공"또는 "실패"에 직접적인 영향을 미치는 기본 심리적 요인이라고 생각합니다. 사용자가 계속 더 많이 알게 될 것이라고 결정하는 것은 중요한 변수입니다. 아니면 "쉽게 이해하기 쉽다"에서 경쟁자들에게 작별 인사를 할 것입니다.

핵심은 사용자의 "뇌를 존중"하여 불필요한 모든 복잡성을 제거하는 것입니다. 웹 사이트에서 "Easy"및 "Wasting Thinking"을 경험할 때 정보를 명확하게 정리하고 가장 원활한 목표로 안내하면 바운스 속도를 줄이거 나 전환율을 추가 할뿐만 아니라 좋은 관계를 창출하고 신뢰를 창출하며 고객이 브랜드에 대해 기분을 좋게 만듭니다.

시간이야! 피곤한 사용자의 눈으로 돌아가서 웹 사이트를보고 시간이 제한되어 있습니다. 그런 다음 "어디에서 쉽게 만들 수 있습니까?"라고 스스로에게 물었습니다. 오늘날의 작은 변화는 내일 훌륭한 비즈니스 결과로 이어질 수 있습니다. 기다리지 마세요!

"수술"을 돕기 위해 전문가가 필요한 경우,인지 부하 웹 사이트는 전환을 늘릴 수있는 최고 잠재력을 잠금 해제합니다. 전환율 최적화 (CRO)에서 팀 전문가에게 문의하십시오!

[그림을위한 프롬프트] 마지막 강력하고 희망없는 이미지 : 사용자는 모바일 웹 사이트를 사용하는 동안 행복하게 웃고 있습니다. 웹 스크린이 깨끗하고 사용하기 쉬운 것처럼 보이면 처음부터 변환 (변환)까지 매끄럽고 매끄럽게 경로가 있습니다.

‍