명확한 시각적 계층 구조로 UX 향상

인터넷이 먼 환상이었을 때부터 시각적 계층 구조의 개념이 디자인에 적용되었으며 인쇄 광고의 정점에 있었던 것처럼 현대 제품 디자인에서도 중요합니다.

시각적 계층 구조는 디지털이든 인쇄물이든 관계없이 사람들이 페이지에서 정보를 받아들이고 처리하는 순서를 결정합니다. 최적의 사용자 경험을 만드는 데 중요한 부분입니다.

간단히 말해서 시각적 계층 구조에 대한 명확한 감각은 사람들을 중요한 콘텐츠나 행동으로 안내합니다. 인쇄 광고에서는 스트랩라인이 되지만 디지털 제품에서는 브랜드 메시지 또는 주요 행동 유도문이 될 수 있습니다.

이는 전략적 결과를 달성할 가능성을 높이는 동시에 질서 있고 목적이 있는 고객 경험을 만드는 매우 유용한 방법입니다.

다음은 UX 디자이너가 디지털 제품의 시각적 계층 구조에 대한 명확한 감각을 달성하고 고객 경험을 다음 단계로 끌어올리기 위해 취할 수 있는 몇 가지 단계입니다.

UX 및 브랜드 목표 정의

다양한 방법을 사용하여 많은 제품 팀이 이미 제품의 각 섹션에 대한 UX 목표를 정의하고 있습니다.

SMART 방법론 ( 특정, 측정 가능, 실행 가능, 관련성, 추적 가능)에 대한 기준을 충족하여 UX 목표의 정의 를 형성하는 것은 이를 수행하는 인기 있는 방법 중 하나입니다. 여기에 대한 좋은 기사가 있습니다.

브랜드 목표도 마찬가지로 중요합니다. 이는 브랜드 및 상업적 관점 모두에서 비즈니스의 가장 중요한 목표를 반영합니다. 자동차 서비스 랜딩 페이지에 대한 브랜드 목표의 예는 a) 브랜드를 프리미엄 서비스로 설정하고 b) 자동차 검색을 장려하는 것입니다.

고객 여정의 다양한 단계에서 UX 및 브랜드 목표를 문서화하는 가장 쉽고 효과적인 방법은 협업적인 시각적 계층 구조 워크샵을 실행하는 것입니다.

Milanote 또는 Sketch와 같은 광범위한 캔버스 협업 도구를 사용하여 프로토타입 화면을 광범위한 시간순으로 배치합니다. 주요 실무자를 온라인 또는 실제 회의에 초대하여 UX 및 브랜드 관점 모두에서 대표자가 있는지 확인하십시오.

그런 다음 화면 공유(또는 모니터에 연결)하고 주석을 시작합니다!

이는 고객 경험의 각 섹션에 대한 UX 및 브랜드 목표를 식별하는 프로세스를 시작하고 나머지 디자인 프로세스에서 활용할 수 있는 전략적 워크플로를 시작합니다.

명확한 시각적 계층 구조를 위한 작업 및 콘텐츠 순위 지정

이제 UX 및 브랜드 목표가 설정되었으므로 각 작업 또는 콘텐츠의 적절한 시각적 계층 구조를 정의하고 후속 디자인 작업에서 참조할 수 있도록 문서화해야 합니다.

우선 분류 체계가 필요합니다. 1에서 3까지의 척도를 사용하는 것이 가장 좋습니다. 1이 가장 중요하고 3이 가장 낮습니다.

이전에 프로파일링된 넓은 캔버스 형식을 사용하여 프로토타입 레이아웃에 공동으로 주석을 달기 시작합니다.

이 예에는 " 이 브랜드의 서비스가 내 예산, 요구 사항 및 선호도에 맞는지 확인하기 위해 더 자세히 알고 싶습니다. "라는 UX 목표가 있습니다. 브랜드 목표는 a) 브랜드를 프리미엄 서비스로 확립하고 b) 자동차 검색을 장려하는 것입니다.

이를 고려하여 브랜드 메시지 Find your Ideal car from 500+ cars(500개 이상의 자동차에서 이상적인 자동차 찾기 )에 1의 계층 구조가 할당되었으며 함께 제공되는 양식 및 CTA도 마찬가지입니다.

가장 중요한 고객 경험에 대한 중요성에도 불구하고 실제 로고(및 탐색)는 UX 및 브랜드 목표를 달성하는 데 큰 역할을 하지 않기 때문에 2로 지정되었습니다.

지원 콘텐츠는 3으로 표시되어 반직관적으로 보일 수 있습니다. 그러나 브랜드 메시지와 "시작하기" 기능을 주요 초점으로 하고 로고와 탐색을 통해 서비스의 프리미엄 아이덴티티와 구조를 설정한 다음 지원 콘텐츠를 통해 형성되기 시작하는 내러티브 흐름을 따릅니다. 고객을 안심시키고 컨텍스트를 제공하며 영감을 줍니다.

디자이너가 시각적 계층 구조를 고려하는 데 익숙해지면 그것이 드러내는 내러티브 가능성을 이해하기 시작하고 사용자 인터페이스와 그들이 전하는 이야기에 진정한 깊이를 더합니다.

디자인 시스템에 시각적 계층 구조 구축

이제 목표와 시각적 계층 구조 순위가 설정되었으므로 이를 실현할 시각적 언어를 만들 수 있습니다. 이미 디자인 시스템이 있고(없으면 먼저 수행해야 합니다!) 다양한 UI 요소가 이미 디자인되었다고 가정해 보겠습니다.

가장 먼저 시작해야 할 부분은 필요한 템플릿의 레이아웃인 구성입니다. 높은 순위의 요소가 표시되어야 하는 위치를 고려하십시오(앞서 설명한 것처럼 항상 가장 기대되는 것은 아닙니다). 다양한 시나리오를 수용하려면 여러 변형이 필요할 수 있습니다. 나중에 프로젝트에서 간과되는 것이 없도록 하려면 디자이너가 시간을 내어 지금 만들어야 합니다.

나중에 디자인 프로세스에서 UI 패턴의 라이브 기호와 함께 디자인 시스템 문서에 여러 예제 목업을 포함할 수 있습니다. 따라서 프로젝트에서 작업하는 디자이너는 최신 버전을 갖게 됩니다.

구성에 대한 광범위한 아이디어가 설정되면 UI 요소의 변형을 만들기 시작할 수 있습니다.

겸손한 페이지 머리글을 가져 가라. HR 컨설팅을 위한 최근 프로젝트의 이 예에서는 다양한 순위의 시각적 계층 구조를 수용하기 위해 디자인 시스템에 세 가지 변형이 있습니다.

디자이너는 UI의 구성 요소를 사용하여 이를 확장할 수 있습니다. 예를 들어, 인기 있는 채용 앱의 최근 프로젝트에서 깊이가 콘텐츠 패널을 구별하는 데 사용되었습니다. 깊이가 클수록 시각적 계층 구조가 높아집니다.

시각적 계층 구조는 브랜드 시각적 언어의 거의 모든 요소(구성, 타이포그래피, 깊이, 이미지, 도상학, 목소리 톤)로 설계할 수 있습니다. 디자인이 깊어질수록 고객 경험이 더욱 응집력 있고 집중될 것입니다.

마무리

시각적 계층 구조 워크플로를 디자인 프로세스에 통합하면 훨씬 더 나은 사용자 경험을 얻을 수 있습니다. 이는 디자이너에게 다양한 유형의 콘텐츠에 순위를 할당할 수 있는 수단을 제공함으로써 사용자 인터페이스가 질서 있고 직관적으로 느껴질 뿐만 아니라 핵심 브랜드 목표를 달성할 수 있도록 합니다.

명확한 시각적 계층 구조는 UX를 향상시킬 뿐만 아니라 현대적인 제품 디자인 환경에서 필수적인 디자인 프로세스에 전략적 초점을 제공하는 지속 가능한 워크플로를 설정합니다.

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

• 디자인 원칙: 계층 소개
• UI 디자인 모범 사례 및 일반적인 실수
• 디자인의 게슈탈트 원리 탐구
• 정보 아키텍처에 대한 종합 가이드
• 이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.