Article7 브랜드를 해치는 사용성 실수

게시 됨: 2022-08-12

사용성은 웹사이트의 성공에 있어 가장 중요한 요소 중 하나입니다. 그러나 종종 간과됩니다. 우리는 회사가 사용성 모범 사례를 위반하는 것을 몇 번이고 목격했습니다.

그것은 당신의 브랜드에 피해를 입히고 100% 당신의 수익에도 해를 끼칩니다.

이 기사에서는 가장 일반적인 실수 7가지를 분석하여 무엇을 찾아야 하는지 알고 사용자와 친선을 잃지 않고 구축할 수 있습니다.

Jason Wolter(정보 설계자) 및 Cynthia Stipeche(브랜드 경험 이사)와 함께 이 7가지 실수와 각 실수가 브랜드에 미치는 영향을 살펴봅니다.

  • 실수 #1: '햄버거 메뉴'
  • 실수 #2: 홈 링크를 사용하지 않음
  • 실수 #3: 검색 기능 없음
  • 실수 #4: 회전식 회전 목마
  • 실수 #5: 동영상 자동 재생
  • 실수 #6: 2열 형식
  • 실수 #7: 자리 표시자 텍스트

실수 #1: '햄버거' 메뉴

Jason: 큰 총부터 시작하겠습니다. 그래서 가장 큰 것은 아마도 햄버거 메뉴 일 것입니다. 사람들은 햄버거 메뉴를 꽤 많이 사용하지만 검색 가능성이 매우 낮습니다. 사람들은 메뉴를 항상 보지는 않습니다. 특히 막대가 세 개일 때는 더욱 그렇습니다.

세 개의 막대가 인식되지 않는 경우가 많습니다. 우리가 하는 사업에서 햄버거 메뉴를 사용하는 것은 우리에게 일종의 제2의 천성입니다. 그러나 현장 테스트에서 사람들은 이 세 개의 막대가 무엇을 나타내는지 모릅니다. 더 나은 옵션에 대한 검색 가능성이 낮은 메뉴를 숨깁니다.

햄버거 메뉴를 사용해야 하는 경우(예: 모바일 장치에서 볼 때) 모범 사례는 '메뉴'라고 표시된 버튼 주위에 윤곽선이 있는 버튼을 사용하여 클릭 가능한 버튼임을 명확하게 표시하는 것입니다. 그러나 눈에 보이는 탐색을 대체할 수는 없습니다. 이상적으로는 정말 가고 싶은 길입니다.

깨끗하기 때문에 많은 기관에서 사용합니다. 그러나 사람들이 보기에는 어렵습니다. 사용성은 마찰이 없도록 만들고 사용자가 쉽게 상호 작용할 수 있도록 하는 것입니다. 그리고 사용자가 웹사이트와 상호작용하기 위해 웹사이트를 사용하는 방법을 배워야 한다면 그들이 다시 돌아올 가능성은 얼마나 됩니까?

인지 부하라고 합니다. 당신은 백지 상태로 들어가지만, 누군가가 무언가를 찾기가 더 어렵거나 당신이 어떤 정보를 기다리게 만들수록 그들은 결국 당신을 버릴 가능성이 더 커집니다. 솔루션은 그들에게 적합한 더 간단한 솔루션을 만드는 것입니다.

이것은 최고의 사용성 실수 중 하나입니다. 햄버거 메뉴는 꼭!

Cynthia: 이에 대해 약간의 맥락을 설명하겠습니다. 많은 사람들이 햄버거 메뉴를 인식하지 못하고 테스트가 그것을 증명하고 있습니다. 그러나 동시에 그것은 회사의 청중에게 달려 있습니다.

예를 들어, 엔터테인먼트 또는 게임 사이트이고 청중이 훨씬 젊어 보인다면 이 세 줄의 의미를 정확히 알 수 있습니다. 테스트의 모범 사례가 있지만 종종 연령대가 다양합니다. 귀하의 비즈니스에 젊은 고객이 많은 경우 그것이 무엇인지 정확히 알 것입니다. 현재로서는 특히 B2B 사이트를 운영하는 경우 해당 햄버거 메뉴에 의존해서는 안 됩니다.

타겟 오디언스와 페르소나가 중요합니다. 모두를 만족시키는 웹사이트가 있다면 큰 실수입니다. 사용자는 컨텍스트와 자신에게 맞는 정보에 압도될 것입니다. 모든 페이지의 목적을 정의해야 합니다. 정의되지 않은 경우 올바르게 구성되지 않은 것입니다. 그리고 제대로 구성되지 않으면 제대로 작동하지 않습니다.

페르소나를 개발하고 연구를 기반으로 하지 않는 경우 청중을 실망시키는 사이트를 디자인하게 될 수 있습니다. 최종 사용자를 관찰하고 최종 사용자와 대화하고 고객과 대화하는 것은 웹사이트를 통해 사용성과 브랜드를 관리하는 데 매우 중요합니다. 그리고 우리는 그렇게 합니다. 우리는 타겟 고객과 그들의 애로점을 더 잘 이해하기 위해 많은 고객의 목소리를 연구합니다.

타겟 청중을 위한 공감을 발전시키려면 실제 사람들에게 뿌리를 두고 있어야 합니다. 가정이 아닌 관찰에 근거해야 합니다.

실수 #2: 홈 링크를 사용하지 않음

Jason: 많은 웹사이트는 왼쪽 상단의 로고를 클릭하거나 브랜드 로고가 있는 곳이면 어디든지 클릭하면 항상 홈 페이지로 이동한다는 사실을 알고 있는 사람들에게 의존합니다.

테스트는 그렇지 않다는 것을 보여줍니다.

많은 사람들이 당신이 그런 식으로 탐색할 수 있다는 것을 깨닫지 못합니다. 따라서 사람들이 하는 일은 브라우저에서 뒤로 버튼을 클릭하여 홈페이지로 돌아가려고 하는 것입니다. 따라서 내부 페이지에 지속적인 링크가 있으면 사용자가 해당 홈페이지로 돌아갈 수 있는 명확한 방법이 제공됩니다. 그리고 많은 사람들이 그것을 무시합니다.

Cynthia: 때때로 내부 페이지에 '홈'이라고 표시된 버튼을 다시 명확하게 표시하고 싶습니다. 세대차이로 돌아가는 것 같아요. 젊은 청중은 내가 로고를 클릭하면 집으로 데려갈 것이라고 기대할 것입니다. 그러나 현재 테스트 결과 로고를 홈페이지로 다시 이동할 수 있는 유일한 방법으로 사용하는 것은 모범 사례가 아님을 보여줍니다.

실수 #3: 검색 기능이 없습니다 ️‍️

Jason: 검색은 또 다른 문제입니다. 검색을 통해 웹사이트를 탐색하는 사용자의 하위 집합이 있습니다. 따라서 검색 옵션이 없거나 노출된 검색 표시줄이나 탐색에서 눈에 띄는 검색 버튼으로 검색 옵션을 강조하지 않으면 특정 청중을 소외시키는 것입니다. 이는 깊은 아키텍처가 있는 대규모 사이트에서 특히 중요합니다. Search Engine Journal의 연구에 따르면 사용자의 약 3분의 1이 웹사이트에 검색 상자가 없어 망설이는 것으로 나타났습니다. 40% 이상이 웹사이트에서 검색창이 가장 중요한 기능이라고 말합니다.

최소한의 것은 탐색과 시각적으로 구별되는 아이콘이어야 합니다. 눈을 가늘게 뜨고 화면 중앙을 응시하는 테스트가 있습니다. 시야가 흐려지고 시각적으로 식별할 수 있는 튀어나온 항목을 찾습니다. 탐색 텍스트에서 튀어나온 검색 아이콘을 볼 수 있다면 통과할 수 있습니다. 그러나 당신이 할 수 있는 최선의 방법은 검색창을 노출시켜 쿼리를 시작하는 위치를 명확하게 하는 것입니다.

Cynthia: 제 또 다른 문제는 사이트에서 검색을 제공한 다음 사람들에게 검색 결과를 필터링할 수 있는 방법을 제공하지 않는 경우입니다. 또는 검색 기능이 있더라도 결과 페이지에는 예를 들어 파일 유형별로 필터링하는 기능이 없습니다. 사용자가 정보를 찾으려고 할 때 더 많은 마찰을 만듭니다.

사이트에서 검색 기능의 또 다른 실수는 결과 페이지에서 다시 검색할 수 없다는 것입니다. 우리는 과거에 테스트를 수행했고 더 젊게 왜곡된 많은 사람들이 사이트를 검색하거나 콘텐츠를 찾기 위해 메인 메뉴를 사용하지 않는다는 것을 발견했습니다. 그들은 바로 검색 기능으로 이동했습니다.

탐색을 방해하지 않고 바로 검색합니다. Google과 같은 검색 엔진을 통해 정보를 찾기 위해 자란 세대에게 검색 기능이 웹사이트에서 작동하지 않으면 정보를 잃게 될 것입니다.

실수 #4: 회전식 회전 목마

Jason: 자동 회전 회전 목마 또는 일반적으로 회전 목마는 그다지 효과적이지 않습니다. 사람들은 일반적으로 그들을 지나칠 것입니다. 따라서 페이지를 스캔하는 경우 선택 윤곽에 4개의 주요 메시지가 있을 수 있지만 대부분의 사람들은 콘텐츠로 스크롤하기 때문에 첫 번째 메시지만 보게 됩니다.

자동 회전 목마는 더 나쁩니다. 어떤 콘텐츠가 있는지에 따라 사용자는 실제로 보고 있는 메시지를 제어할 수 없습니다. 그래서 그들은 당신의 핵심 메시지 중 하나에 관심을 가지고 있다가 그것을 모두 소비하기 전에 사라져 버릴 수 있습니다. 또는 그들은 그것을 보았고 다시 보고 싶어할 수도 있습니다. 그런 다음 다시 위로 스크롤했는데 거기에 없고 클릭하고 찾아야 합니다.

그래서 당신은 그들이 일을 하도록 만들고 있습니다. 인지 부하로 돌아갑니다. 그리고 그들이 찾고 있는 메시지를 찾으면 5초 동안 그 메시지를 켰다가 다시 전환합니다. 돌아가려면 클릭해야 합니다. 그냥 엉망입니다.

예를 들어, 5개의 평가 슬라이드가 있는 경우 사용자의 95%는 첫 번째 슬라이드만 보게 됩니다. 클릭하여 모두 보려고 하지 않습니다. 그러나 그것은 매우 높은 우선 순위가 아니므로 어떤 경우에는 허용됩니다.

그것이 정말로 나쁜 곳은 3-4개의 주요 메시지와 CTA가 있는 선택 윤곽에 있습니다. 이것들은 당신이 정말로 푸시하려고 하는 핵심 메시지이며 사람들은 결코 그것을 보지 못합니다. 그들이 당신의 4가지 평가 중 3가지를 보지 못한다면 괜찮지만, 회전하는 회전목마로 인해 사용자가 핵심 메시지를 놓치는 것은 좋지 않습니다.

Cynthia: 일반적으로 전염병과 같은 회전 목마를 피하지만 많은 회사에서 여전히 사용합니다. 사용자가 중요한 정보를 놓칠 수 있기 때문에 선택 윤곽에서는 특히 의미가 없습니다. 페이지 상단에 있더라도 중요한 내용은 숨기지 않는 것이 좋습니다.

어떤 사람들은 페이지 상단에 모든 것을 집어넣고 싶어하는데 그것이 그들이 생각하는 전부입니다. 그러나 선택 윤곽에 정보가 숨겨져 있으면 아무 소용이 없습니다.

실수 #5: 동영상 자동 재생

Jason: 많은 웹사이트가 선택 윤곽에서 움직임을 사용하는 것을 좋아합니다. 비디오가 있을 수 있으며 페이지에 도착하면 비디오가 재생되기 시작합니다. 어떤 사람들은 그것을 좋아하지 않습니다. 그들은 움직임을 좋아하지 않고 비디오를 보고 싶어하지 않습니다.

이 문제를 해결하려면 일시 중지 버튼을 포함하고 싶습니다. 사용자가 보기를 원하지 않는 경우 종료할 수 있는 기능을 제공하고 싶습니다. 더 나은 방법은 이미지를 다시 거기에 두고 사용자에게 "이 비디오를 보고 싶습니까?"라는 옵션을 제공하기 위해 실제로 재생 버튼을 강조하는 것입니다. 당신은 그들에게 그것을 강요하고 그들이 그것을 보게 만드는 것이 아닙니다.

사이트의 다른 영역에 있는 자동 재생 비디오도 정보를 찾는 사용자의 흐름을 방해할 수 있습니다. 따라서 일반적으로 자동 재생을 하는 것은 좋은 생각이 아닙니다.

Cynthia: 자동 재생 비디오는 끔찍합니다. 짜증나는 경험입니다. 웹 사이트를 방문하여 비디오가 자동으로 시작되는 것을 원하지 않습니다. 볼륨을 끈 상태에서 동영상을 재생하는 것은 좋지 않습니다. 볼륨이 켜진 상태에서는 더욱 악화됩니다. 사람들이 전염병처럼 웹 사이트를 피하도록 설득하려면 자동 재생 비디오를 넣으십시오.

이제 강력한 비디오 콘텐츠가 있는 경우 해당 비디오의 한 부분을 잡고 수동 루프를 만들 것입니다. 그렇다면 그것은 당신의 얼굴과 눈에 띄지 않습니다. 3초 정도의 루프로 재생될 수 있으며 전체 비디오를 볼 수 있는 클릭 유도문안이 포함될 수 있습니다. 그러면 그것은 당신을 화나게 하거나 버리지 않습니다. 그 시점에서 사용자가 "이것에 대해 더 많이 배우고 싶습니다."라고 말하도록 유인하는 것으로 충분합니다. 오디오가 켜지고 비디오가 재생되기 시작할 때 그들이 놀라지 않도록 옵션을 제공합니다. 사용자는 항상 제어할 수 있어야 합니다. 사람들은 종종 그것에 대해 생각하지 않습니다.

사용자에 대한 공감이 필요합니다. 그래서 그게 무슨 뜻이야? 사업에는 나름대로의 목표가 있을 것입니다. 그러나 그것이 최종 사용자 자신이 필요로 하는 것을 방해할 수는 없습니다. 핵심 질문은 “내가 제공하는 것을 그들의 경험의 틀 내에서 가장 잘 제공하는 방법은 무엇입니까?”입니다. 따라서 최종 사용자에 대해 공감할 수 있을 때 사이트를 방문하고 이에 대해 배우도록 초대하십시오. 그리고 그들이 더 많은 것을 배우기 위해 뛰어드는 동안 그들을 지원하십시오.

그 때 선의의 느낌이 있습니다. 귀하의 웹사이트에 접근하여 사용자에게 가장 좋은 것을 하려고 하는 것보다 수익을 위해 직접적으로 가장 좋은 것을 하는 것이 장기적으로 이익을 가져다 줄 것입니다.

실수 #6: 2열 형식 ‍

Jason: 페이지의 왼쪽과 오른쪽 아래에 필드 대신 세로줄에 필드를 두는 것이 훨씬 더 유용합니다. 사람들은 무언가를 탭하는 데 익숙하며 페이지 아래로 이동하기를 기대합니다. 두 개의 열이 있는 경우 서로 다른 탭 패턴이 너무 많습니다. 그들은 그것이 내려 가고 있는지 모릅니다. 그들은 그것이 오른쪽으로 가고 있는지 모릅니다. 어떤 일이 일어나야 하는지에 대한 기대가 있고 그것은 아래로 내려가는 것입니다. 따라서 여러 열이 있을 때 항상 그 기대를 충족시키는 것은 아닙니다. 따라서 사람들이 양식 아래로 이동할 수 있도록 단일 열이 있는 것이 좋습니다.

Two-Column Form Fields

실수 #7: 자리 표시자 텍스트

Jason: 자리 표시자 텍스트를 사용하고 싶지 않습니다. 자리 표시자는 사용자가 거기에 넣어야 하는 콘텐츠를 이해하는 데 도움이 됩니다. 사용자는 자리 표시자 텍스트 없이 해당 필드에 무엇이 속하는지 알 수 있어야 합니다.

따라서 해당 필드 외부에 레이블이 필요합니다. 위치 지정자로 내부에 있는 경우 클릭하면 텍스트가 사라집니다. 작업을 마치면 다시 돌아와서 어떤 필드를 채우고 있는지 확신하지 못할 수 있습니다.

Best Practice for Form Fields

이는 스크린 리더의 접근성에도 영향을 미칩니다. 레이블은 스크린 리더를 사용하는 사용자에게 해당 콘텐츠가 무엇인지 알려줍니다. 레이블이 자리 표시자이고 외부 지침으로 포함되지 않은 경우 사람들과 화면 판독기를 혼동할 수 있습니다.

가장 큰 실수: 기능보다 미학

기능보다 미학을 우선시하거나 그 반대의 경우도 마찬가지입니다. 당신은 두 가지를 잘 혼합하고 싶어합니다. 디자인 트렌드 구현을 고려하고 있다면 그것이 귀하의 사이트에 적합하고 올바른 이유로 사용하고 있는지 확인하십시오. 디자인 요소는 정말 멋져 보일 수 있지만 대부분의 사용자에게는 실용적이지 않습니다. 따라서 기능이 제대로 작동하는지 확인하고 싶습니다.

귀하의 브랜드는 귀하의 평판입니다. 웹사이트가 사용하기 어렵다면 돌이킬 수 없을 정도로 손상될 수 있습니다.