더 나은 스캔 가능성을 위한 UI 디자인 모범 사례

제품 디자이너는 짧은 시간에 많은 정보를 전달하는 경우가 많습니다. "스캔 가능성"이라는 용어, 일반적인 시선 추적 패턴 및 현대적인 디자인 원칙을 이해하는 사람은 쉽게 소비할 수 있는 콘텐츠와 "고정 UI"를 만드는 데 더 적합합니다.

매일 새로운 앱, 웹사이트, 기사 등으로 인터넷이 확장되고 있습니다. 관련 없는 콘텐츠에서 관련 정보를 필터링하는 데 어려움을 느끼는 정보 과부하 사용자의 주의를 끄는 것이 점점 더 어려워지고 있습니다. 마케팅 전문가 David Zheng에 따르면 방문자의 60% 이상이 웹사이트를 포기하고 15초 이내에 웹사이트를 떠납니다 .

연구에 따르면 사용자는 실제로 단어 하나하나를 모두 읽는 것이 아니라 스캔한 다음 시간을 들일 만한 가치가 있는지 판단합니다. 적절한 콘텐츠를 즉시 스캔할 수 있도록 함으로써 제품 디자이너는 단기 방문자를 장기 사용자로 전환할 수 있습니다. 다음은 종종 간과되는 사용성 디자인의 중요한 요소인 스캔 가능성을 증폭하는 데 도움이 되는 UI 디자인 모범 사례를 선별한 것입니다.

스캔 가능성이란 무엇입니까?

Nielsen Norman Group의 UX 전문가는 다음 질문에 답하기 위해 연구를 수행했습니다. 사람들은 웹에서 어떻게 읽습니까? 그의 발견은 간단했습니다. 그들은하지 않습니다.

이 그룹은 웹사이트를 처음 방문하는 방문자의 16%만이 단어 하나하나를 읽을 가능성이 있다는 것을 발견했습니다. 나머지 84%는 헤드라인, 문장, 이미지 또는 애니메이션과 같은 후크 요소를 빠르게 스캔한 후 자료를 더 자세히 살펴보기로 결정합니다. 이 동작은 디지털 인터페이스에 국한되지 않습니다. 예를 들어, 사람들은 신문의 모든 단어를 거의 읽지 않습니다. 대신 헤드라인, 이미지 등 동일한 요소를 스캔하여 시간을 할애할 가치가 있는 항목을 결정합니다.

따라서 스캔 가능성은 스캔하기 쉽도록 콘텐츠를 배치하는 접근 방식입니다. 방문자에게 귀중한 콘텐츠를 화면에 표시하는 데 시간이 짧은 경우가 많으므로 사용자가 웹에서 읽는 방식에 맞게 인터페이스를 완전히 최적화하는 것이 중요합니다. 디지털 제품이 웹사이트, 애플리케이션 또는 기타 유형의 사용자 인터페이스이든 간에 스캔 가능성은 사용자 친화적인 디자인의 가장 중요한 요소 중 하나입니다.

스캔 가능한 인터페이스의 이점

디지털 제품의 스캔 가능성을 결정하는 이상적인 방법은 사용자의 관점에서 제품을 관찰하고 다음 주요 질문에 답하는 것입니다.

1. 페이지의 내용이 청중의 기대에 부합합니까?
2. 페이지의 주요 메시지는 짧은 시간에 이해하기 쉽습니까?

스캔 가능한 인터페이스를 생성하려면 노력이 필요하지만 끈적한 UI 디자인을 만들어 장기적으로 성과를 거둘 수 있습니다. Nielsen Norman Group의 연구에 따르면 스캔 가능성에 최적화된 페이지는 다음과 같은 방식으로 훨씬 더 효과적입니다.

• 사용자는 작업 완료 시간이 더 빠릅니다.
• 사용자는 콘텐츠가 자신에게 적합한지 여부를 쉽게 정의할 수 있습니다.
• 사용자는 기억에 오류가 더 적습니다.
• 사용자는 페이지 구조를 더 잘 이해할 수 있습니다.
• 사이트는 신뢰성과 콘텐츠 품질에 대해 더 나은 주관적인 평가를 받습니다.
• 이탈률이 감소합니다.
• 재방문 확률이 높아집니다.
• 검색 엔진 최적화(SEO) 개선

스캐닝 패턴에서 사용자 습관의 힘

사람마다 콘텐츠를 다르게 소비합니다. 그러나 연구를 통해 잘 정의된 시선 추적 패턴이 나타났습니다. 처음 몇 초 내에 사용자가 인터페이스와 상호 작용하는 방식을 알면 디자이너가 콘텐츠의 우선 순위를 지정하고, 중요한 정보를 기본 가시 영역에 배치하고, 강력한 시각적 계층 구조를 설정하는 데 도움이 됩니다.

Nielsen Norman Group에 따르면 사용자가 인터페이스를 스캔하는 7가지 일반적인 패턴이 있습니다.

• 유명한 F 패턴: 발견된 지 12년이 지났지만 이 패턴은 모바일 인터페이스를 스캔할 때도 여전히 가장 일반적인 스캔 패턴입니다. 눈은 읽을 때와 같이 수평으로 움직인 다음 아래 내용으로 건너뜁니다. 이것은 더 촘촘한 히트맵을 사용하여 느리고 체계적으로 또는 빠르게 수행할 수 있습니다.
• Z 패턴: 지그재그 모델은 정보가 균일하게 표시되고 시각적 계층이 약한 웹 페이지에서 일반적입니다.
• 레이어 케이크 패턴: 사용자는 머리글과 부제목을 스캔할 때 이 패턴을 따라 페이지에서 찾고 있는 정보를 찾을 수 있는 위치(및 여부)를 빠르게 결정합니다.
• Spotted Pattern: 크리에이티브는 일반적으로 이 스캔 모델을 따르며, 큰 텍스트 덩어리를 건너뛰고 색상, 모양 및 비율 이상과 같은 시각적 구성 요소를 스캔하여 특정 정보를 찾습니다.
• 마킹 패턴: 댄서가 빙글빙글 돌면서 균형을 유지하기 위해 물체에 고정하는 것처럼 사용자는 스크롤하는 동안 한 곳에 시선을 고정합니다. 이는 모바일 UX에서 매우 일반적인 패턴입니다.
• 우회 패턴: 목록의 여러 줄의 텍스트가 모두 같은 단어로 시작하는 경우 사용자는 의도적으로 줄의 첫 단어를 건너뜁니다.
• Commitment Pattern: 이것은 드문 패턴으로 사용자가 콘텐츠에 매우 관심이 있고 모든 콘텐츠를 소비하려는 동기가 있을 때만 발생합니다.

사용자가 채택한 패턴은 주로 웹 페이지 방문 동기와 관련이 있습니다. 어떤 유형의 정보를 찾고 있습니까? 그들은 그것을 찾는 데 얼마나 많은 시간을 할애할 의향이 있습니까? 이 정보를 더 빨리 제공할 수 있는 다른 웹사이트가 있습니까?

사용자 조사 및 스캐닝 패턴을 통한 가치 제공

" 사용자 중심 디자인 "이라는 용어를 만든 인지과학 연구원인 Dr. Donald Norman은 "이해하고 사용할 수 있는 기능이 있는 제품을 만드는 것만으로는 충분하지 않으며 기쁨과 흥분을 주는 제품도 만들어야 합니다. , 즐거움과 재미, 그리고 예, 사람들의 삶에 아름다움."

사용자 연구는 사용자 중심 디자인 및 UI 디자인 모범 사례의 초석입니다. 따라서 디지털 인터페이스의 가독성을 향상시키려면 설계자는 최종 사용자를 이해해야 합니다. 최종 사용자의 관점에서 UI 패턴을 디자인하면 자연스럽고 직관적인 경험이 발생합니다.

영향력 있는 솔루션은 추상화로 만들어지지 않습니다. 다음은 아름답고 실행 가능하며 지속 가능한 디지털 제품 세트입니다. 각 디자인 팀은 핵심 청중을 정의하고 시선 추적 패턴을 사용하며 콘텐츠 레이아웃을 디자인하여 끈적한 UI를 생성했습니다.

Instacart는 UI 디자인 패턴을 통해 사용자 중심의 디자인을 활용합니다. 청중의 상당 부분은 노인과 시각 장애가 있는 사용자로 구성되어 있으므로 항목은 주요 CTA를 명확하게 강조하면서 고대비 그리드에 나열됩니다. 이 디자인은 오래 지속되는 방문자를 수용할 수 있는 Spotted Pattern 스캐닝 모드를 허용합니다.

Yelp는 최고의 레스토랑, 쇼핑, 유흥, 음식 등을 검색하는 사용자에게 서비스를 제공합니다. 사람들은 자신의 개인적인 기준과 철저한 조사를 기반으로 리뷰를 평가할 가능성이 높으므로 F 패턴을 가장 적합한 스캔 모델로 만듭니다. 따라서 Yelp는 등급, 이미지 및 주소와 같은 특정 요소를 강조하여 쉽게 스캔할 수 있는 방식으로 콘텐츠를 제공합니다.

Airbnb는 틀림없이 가장 사랑받는 앱 중 하나이며, 이는 대부분 사용자 조사 덕분입니다. 사용자가 모바일 장치를 자주 사용한다는 것을 알기 때문에 마킹 패턴을 수용하도록 설계합니다. 크고 넓은 아파트 이미지를 강조하기 위해 깨끗하고 직관적인 인터페이스를 배치했습니다. 그들은 의도적으로 화면당 표지 이미지 수를 2개로 제한하여 사용자가 적절하게 시간을 할애하고 목록이 눈에 띄는지 여부를 확인할 수 있도록 했습니다.

디지털 제품의 스캔 가능성을 개선할 때 염두에 두어야 할 한 가지 요소는 제품을 볼 장치 유형을 정의하는 것입니다. Airbnb의 모바일 플랫폼은 상당한 트래픽을 받습니다. 엄지손가락 사용 히트맵에서 볼 수 있듯이 Airbnb는 "탐색" 및 "저장된 검색"과 같이 가장 일반적으로 사용되는 UI 요소를 스크롤 및 스캔하는 동안 쉽게 액세스할 수 있는 위치에 전략적으로 배치했습니다.

더 나은 스캔 가능성을 위한 UI 디자인 모범 사례

적절한 시각적 계층 만들기

디지털 인터페이스의 시각적 계층 구조는 사용자가 원하는 정보를 빠르게 검색할 수 있도록 중요도를 전달하기 위해 UI 디자인 요소를 배열하고 표시하는 것을 의미합니다. 적절한 시각적 계층 구조로 레이아웃을 디자인하는 데에는 몇 가지 요소가 있습니다.

• 크기
• 색깔
• 차이
• 근접성
• 조정
• 네거티브 스페이스
• 되풀이

디자이너는 UI 레이아웃 디자인을 만들 때 이러한 UI 디자인 패턴을 고려하여 최종 제품이 보기 좋고 조화로우며 직관적으로 스캔 가능한 레이아웃을 갖도록 합니다.

Google의 검색 결과 페이지는 모든 시각적 계층 요소를 사용하여 가독성을 높입니다. 헤드라인은 색상, 크기 및 후속적으로 대비를 사용하여 강조됩니다. 각 헤드라인을 둘러싸고 있는 네거티브 공간은 사용자가 가장 먼저 스캔하게 되는 헤드라인에 기여합니다.

사용자가 관련 헤드라인을 찾으면 링크의 신뢰성을 확인할 수 있습니다. 색상과 근접성으로 인해 쉽게 알아볼 수 있는 요소입니다. 다음으로, 결과를 더 잘 평가하기 위해 색상, 크기 및 근접성이 일관된 콘텐츠 사본을 조사합니다. 이러한 요소 외에도 반복 및 정렬을 통해 Google 검색 결과를 일반적으로 쉽게 스캔할 수 있습니다.

네거티브 공간 활용

천재 클로드 드뷔시(Claude Debussy)는 “음악은 음표 사이의 공간”이라고 말했습니다. 스캔 가능성에 대해서도 동일한 감정이 적용됩니다. 요소 사이의 음수 공간이 레이아웃을 성공적으로 만드는 것입니다. UI 요소 주변의 적절한 양의 음수(흰색) 공간은 요소 자체에 초점을 맞춥니다. 내용을 강조하고 레이아웃이 어수선하게 느껴지지 않도록 필요한 호흡 공간을 제공합니다. 호흡 공간이 없으면 인간의 뇌는 관심 지점을 스캔할 가능성이 적고 혼란스러울 가능성이 더 큽니다.

소제목을 사용하여 콘텐츠 요약

사람들은 종종 많은 양의 텍스트에 부정적인 반응을 보입니다. 단락이 자신의 관심사와 일치하지 않으면 시간을 잃을 것이라는 가정을 유발할 수 있습니다. UI 디자인 모범 사례는 이 문제에 대한 솔루션을 제공합니다. 긴 기사의 시작 부분에 간단한 부제목을 추가함으로써 사용자는 주제에 대한 궁극적인 통찰력을 갖게 됩니다.

소제목을 작성할 때 요점을 유지하는 것이 중요합니다. 아래 콘텐츠가 제공하는 핵심 메시지를 전달하기만 하면 됩니다.

글머리 기호 및 번호 매기기 목록 만들기

인간의 두뇌는 매우 체계적입니다. 내용을 관찰한 다음 의미 있는 단위로 그룹화합니다. 따라서 사용자는 텍스트 단락에 병합된 여러 포인트보다 글머리 기호 또는 번호 매기기 목록을 더 잘 이해할 수 있습니다.

목록에 의해 생성된 음수 공간은 사용자가 검색하기 쉽게 하므로 주의 깊게 기회를 찾는 것이 좋습니다. 텍스트 내에서 2개 이상의 포인트가 서로 평행하고 설명하는 데 각각 2개 이상의 문장이 필요하지 않은 경우 이것은 목록에 대한 강력한 후보입니다. Nielsen Norman Group은 글머리 기호 디지털 콘텐츠 생성에 대한 추가 통찰력을 제공합니다.

콘텐츠 시각화

현대의 디지털 사용자는 자연스럽게 시각적이며 텍스트 콘텐츠에 항상 잘 반응하는 것은 아닙니다. 외부 환경이 항상 요인이 됩니다. 따라서 텍스트가 많은 레이아웃을 상쇄하기 위해 이미지와 그래픽을 사용하면 유익하고 감정적으로 매력적인 시각적 휴식을 제공합니다. 속담처럼 사진은 천 마디 말의 가치가 있습니다!

원본 영상(일러스트, 매력적인 사진 등)은 사용자의 주의를 쉽게 사로잡을 수 있고 일반적인 스타일 개념을 지원할 수 있습니다. 또한 시각적 계층 구조를 개선하고 텍스트를 더 쉽게 소화할 수 있습니다. 그러나 그래픽을 제대로 사용하지 않으면 역효과를 일으킬 수 있는 위험이 있습니다. 주요 아이디어를 그래픽으로 변환하기 전에 디자이너가 디자인 중인 콘텐츠를 완전히 이해하는 것이 중요합니다.

CTA에 대한 적절한 강조 설정

대부분의 디지털 경험은 사용자로부터 특정 행동을 이끌어내는 것을 목표로 합니다. 클릭 유도문안(CTA) 버튼은 매우 단순해 보이지만 사용자가 구매, 장바구니에 추가 또는 단순히 다른 페이지로 이동과 같은 작업을 완료하는 데 도움이 되도록 전략적으로 설계되었습니다.

UI 디자인 모범 사례에서는 CTA를 작업을 설명하는 콘텐츠 가까이에 배치하여 사용자가 직관적으로 이해할 수 있도록 제안합니다. CTA의 비율, 색상 및 위치가 적절한지 여부를 테스트하는 효과적인 방법은 최종 디자인을 일시적으로 회색조로 변환하는 것입니다. CTA가 눈에 띄게 보이고 강조되어 있으면 스티키 UI가 잘 된 것입니다.

스캔 가능성의 중요성

콘텐츠 관련성, 경쟁 솔루션, 비즈니스 로직 등 UI 레이아웃 디자인이 사람들에게 좋은 평가를 받을지 여부를 결정하는 요소는 많습니다. Forbes 에 따르면 스캔 가능성은 콘텐츠 마케팅에서 가장 간과되는 요소일 수 있습니다. 스캔 가능한 콘텐츠를 만들어 단기 방문자가 오래 지속되는 사용자가 될 수 있습니다.

스캔 가능한 콘텐츠는 최종 사용자에게 그들의 시간이 소중하다는 것을 보여주고 단순히 레이아웃 디자인을 살펴봄으로써 핵심 메시지를 이해할 수 있는 기회를 제공합니다. 바이럴 블로거이자 저널리즘 교수인 Kim Keller는 디자이너들에게 다음과 같이 지적합니다. 그것은 관계이고, 함께 시간을 보내지 않으면 어떤 관계도 살아남을 수 없습니다. 그들의 시간을 존중하고 가치 있게 만드십시오.”

• • •

Toptal Design 블로그에 대한 추가 정보:

• UI 디자인 모범 사례 및 일반적인 실수
• 빈 상태 – UX에서 가장 간과되는 측면
• 단순함이 핵심 - 최소한의 웹 디자인 탐색
• 모바일 인터페이스에 대한 경험적 원리
• 가독성을 위한 디자인 – 웹 타이포그래피 가이드