최고의 디자이너가 사용하는 10가지 UX 결과물

이 기사의 오디오 버전을 들어보세요

UX 디자이너의 작업은 문서가 거의 없는 팀이 작업하는 린 스타트업 및 애자일 환경부터 엄격한 문서 요구 사항이 있는 제3자 또는 대기업 및 정부 기관을 위한 컨설팅 계약에 이르기까지 다양한 환경에서 발생합니다. 참여 또는 환경의 성격과 관계없이(그리고 모든 것을 하나로 묶는 한 가지) UX 전문가는 디자인 아이디어, 연구 결과 및 프로젝트 컨텍스트를 다양한 청중에게 효과적으로 전달할 필요가 있습니다.

UX 디자인 프로세스 동안 디자이너는 UX 디자인 방법론의 일부로 다양한 "아티팩트"와 프로젝트 결과물을 생성합니다. 결과물은 다양한 형태를 취할 수 있습니다. 결과물은 UX 디자이너가 다양한 이해 관계자 및 팀과 의사 소통하고, 작업을 문서화하고, 회의 및 아이디어 세션에 아티팩트를 제공하는 데 도움이 됩니다. 또한 구현 및 참조를 위한 가이드 및 사양인 "단일 소스"를 만드는 데 도움이 됩니다.

다음은 UX 디자이너가 일반적으로 참여 중에 생성하는 10가지 UX 결과물 입니다. (이 목록은 결코 포괄적이지 않으며 계약의 성격에 따라 더 길어질 수 있습니다.)

1. 사업 목표 및 기술 사양

이것은 기본적인 단계입니다. UX 전문가에게 모든 것은 제품 비전, 즉 비즈니스 관점에서 제품의 존재 이유에 대한 이해에서 시작됩니다. 간단한 용어로 작성된 설명에는 해결하려는 문제, 제안된 솔루션 및 대상 시장에 대한 일반적인 설명이 포함되어야 합니다. 또한 배송 플랫폼을 설명하고 제품이 배송될 기술적 수단을 가볍게 다루어야 합니다.

한 페이지를 넘을 필요는 없지만 What, Why, How의 핵심을 설명해야 합니다. 예를 들면 다음과 같습니다. “The Fantastic App Co.는 Millennial 시장(iOS 및 Android)을 위한 모바일 플랫폼의 선물 증정 애플리케이션의 격차를 확인했습니다. 많은 수의 밀레니얼 세대는 특별한 날짜를 기억하고 최고의 선물을 찾은 다음 그 선물을 찾고 구매하는 데 어려움을 겪습니다. 우리의 솔루션은 그 스트레스를 완화하도록 설계되었습니다. 예측 가능한 디자인과 최신 AI 기술을 사용하는 앱은 유용하고 거의 마법 같은 사용자 경험을 제공합니다.”

2. 경쟁 분석 보고서

새로운 제품을 디자인하기 시작하는 사람이라면 누구나 시장에 잘 맞는지 확인하는 것이 중요합니다. 결정적으로, UX 전략의 일환으로 제품은 시장에서 다른 제품보다 뛰어난 경쟁 우위와 UX를 가져야 합니다.

경쟁 분석은 "경쟁자를 식별하고 경쟁자 의 전략을 평가하여 귀사 의 제품 또는 서비스 와 비교하여 강점 과 약점 을 결정하는 것"을 의미합니다.

UX 디자이너의 초기 작업 중 하나는 문제를 해결하기 위해 대상 고객이 현재 어떤 제품이나 서비스를 사용하고 있는지 조사하는 것입니다. 거기에 동등한 제품이나 서비스가 있습니까? 사람들이 충분히 훌륭하지만 완벽하지는 않은 대체 솔루션이 있습니까? 반창고—비타민이지만 진통제는? 더 나은 UX가 어떻게 차이를 만들 수 있습니까?

사용자 경험 연구의 구성 요소인 경쟁 분석 보고서는 상위 5개 경쟁업체를 식별하고 그들이 올바르게 하고 있는 것과 잘못하고 있는 것이 무엇인지 조사합니다. 이 단계는 명확한 목표가 정의되고 집중해야 할 요소가 명시되는 디자인 방향을 설정하는 데 도움이 됩니다.

3. 페르소나 및 UX 연구 보고서

UX 디자이너는 이해 관계자가 제품 고객의 요구 사항을 이해하도록 해야 합니다. 사용자 행동 패턴을 캡슐화하고 전달하기 위해 페르소나를 생성하고 사용자 연구를 수행하는 것은 이를 수행하는 검증된 방법입니다. 페르소나는 제품의 일반 사용자를 대표합니다. 목표, 필요 및 관심을 통합함으로써 프로젝트에서 작업하는 팀이 사용자에 대한 공감을 개발하는 데 도움이 됩니다.

사용자 연구는 UX 디자인 프로세스의 필수 구성 요소이기도 합니다. 여기에는 행동 패턴을 추출하고 컨텍스트를 추가하며 디자인 프로세스에 대한 통찰력을 제공하는 데 사용되는 다양한 기술이 포함됩니다. 사용할 수 있는 사용자 조사 도구와 기술에는 여러 유형이 있습니다. 올바른 상황에 적합한 "렌즈"를 선택하는 것이 중요합니다.

사용자 조사를 시작하기 전에 시간을 내어 조사 계획 을 세우는 것이 중요합니다. 이것은 연구 목표와 방법을 전달하고 이해 관계자의 동의를 얻는 데 도움이 되는 문서입니다. 또한 연구 프로젝트 동안 모든 사람을 추적하는 데 사용할 수 있는 훌륭한 도구입니다.

사용자 연구 단계가 끝나면 연구 결과를 실행 가능한 항목으로 변환하는 보고서가 생성됩니다. 그런 다음 UX 팀은 해당 항목을 중심으로 제품을 디자인하도록 설정됩니다.

4. 사이트맵 및 정보 아키텍처

사이트맵은 디지털 제품에 포함된 모든 구성 요소와 정보의 시각적으로 구성된 모델입니다. 앱 또는 사이트 콘텐츠의 구성을 나타냅니다. 와이어프레임과 함께 가장 기본적인 UX 결과물 중 하나이며 UX 디자인 프로세스에서 거의 건너뛰지 않습니다.

사이트맵은 탐색, 검색 가능성 및 사용성을 지원하기 위해 정보 아키텍처(제품 구성 요소 구성 및 레이블 지정의 기술 및 과학)를 배치하는 데 도움이 됩니다. 또한 분류 및 사용자 인터페이스를 정의하는 데 도움이 됩니다.

Sitemap은 리소스로 보유하고 반복적인 프로토타입 제작 및 사용자 테스트를 기반으로 제품이 발전함에 따라 조정할 수 있는 편리한 참조입니다. 디자인 작업 과정에서 제품 내용에 대해 논의할 때 모든 사람이 한 페이지에 머물도록 하기 위해 번호 매기기 시스템이 사용되는 경우가 많습니다.

5. 경험 지도, 사용자 여정 및 사용자 흐름

경험 맵은 목표, 요구 사항, 소요 시간, 생각, 감정, 반응, 불안, 기대 등 제품 또는 서비스 내에서 사용자의 흐름, 즉 제품과의 상호 작용 전반에 걸친 전반적인 경험을 보여주는 시각적 표현입니다. 일반적으로 사용자와 제품 간의 접점을 보여주는 선형 타임라인에 배치됩니다.

사용자 여정과 사용자 흐름은 사용자가 취하는 일련의 단계에 관한 것이며 사용자가 현재 상호 작용하거나 잠재적으로 제품과 상호 작용할 수 있는 방식을 보여줍니다. 사용자가 수행할 수 있는 동작, 기능 및 주요 작업을 보여줍니다. 사용자가 수행할 수 있는 다양한 작업의 "흐름"을 조사하고 이해함으로써 사용자 인터페이스에 어떤 종류의 콘텐츠와 기능을 포함해야 하는지, 사용자가 이러한 작업을 수행하는 데 어떤 UI가 필요한지 생각할 수 있습니다.

UX의 대부분은 사용자의 문제를 해결하는 것입니다. 사용자 여정을 작성할 때 디자이너는 페르소나, 사용자의 목표, 동기, 현재의 문제점 및 달성하고자 하는 주요 작업을 이해해야 합니다.

사용자 여정 과 사용자 흐름 의 차이점은 무엇입니까? 사용자 흐름 을 제품 또는 서비스를 통해 하나의 작업이나 목표를 수행하는 사용자로 생각하십시오(예: Lyft에서 자동차 예약). 사용자 여정 은 더 큰 그림을 보여줍니다. 사용자 여정은 작업을 넘어 확장되며 특정 고객 상호 작용이 더 큰 컨텍스트에 어떻게 맞는지 살펴봅니다.

6. UX 와이어프레임

UX 디자인 방법론의 핵심인 와이어프레임은 디자인 프레임워크와 인터페이스 요소에 대한 2차원 "청사진" 일러스트레이션으로, 무엇이 어디로 가는지 보여줍니다. 주로 레이아웃 도구이며 정보 아키텍처, 콘텐츠 간격, 기능, 상호 작용 디자인 및 의도된 사용자 행동을 정의하는 데 도움이 됩니다.

와이어프레임은 UX 디자이너를 위한 필수품이자 프로젝트에서 가장 일반적인 결과물 중 하나입니다. “Show me your wireframes”는 UX 디자이너의 인터뷰에서 다른 어떤 것보다 더 자주 듣게 될 것입니다.

UX 디자인 프로세스의 주요 단계인 와이어프레임은 아이디어를 탐색하고 고객 목표를 해결하는 혁신적인 개념을 생성하는 비용 효율적인 방법입니다. 스케치를 넘어 빠르게 아이디어를 구상할 수 있는 훌륭한 도구이며, 저충실도(스타일 지정 없음, 흑백 상자, 그리스어 텍스트)에서 고충실도(완전한 스타일, 색상, 매우 상세함)에 이르기까지 다양한 맛이 있습니다.

작업장 속기에서 "와이어"라고도 하는 와이어프레임은 유연하고 빠르게 생산할 수 있기 때문에 많은 시간과 비용을 절약할 수 있습니다. 그들은 디자인 방향을 파악하면서 이해 관계자 및 팀 구성원과 대화를 나누는 중심 역할을 합니다.

와이어프레임은 기본적이며 구조적으로 디자인을 정의하고 다양한 사용 사례 시나리오에서 앱 또는 사이트를 통해 사용자 흐름이 작동하는 방식을 정의하는 데 도움이 됩니다. Toptal Design Blog의 이전 글에서 논의한 "와이어프레임 맵"과 NNGroup의 워크플로 및 앱용 UX 제공물인 "와이어플로"와 같은 와이어프레임에 대한 몇 가지 흥미로운 왜곡이 있습니다.

7. 대화형 프로토타입

사용자 중심의 디자인 프로세스에서 또 다른 지배적인 결과물인 인터랙티브 프로토타입은 제품에 생기를 불어넣습니다. 기본적인 프로토타입은 많은 시간과 비용을 절약합니다. 실제 사용 사례 시나리오에서 작동하는 방식을 보여주고 신속한 설계 반복 및 사용자 테스트를 가능하게 합니다. 또한 디자이너가 UX 디자인 프로세스의 여러 단계에서 디자인을 효과적으로 전달할 수 있도록 도와줍니다.

프로토타이핑은 반복을 통한 발견 여정의 어느 시점에서든 발생할 수 있습니다. 종이 프로토타입에서 고도로 세련된 디자인에 이르기까지 제품 프로토타입에 대한 내부 검토를 통해 팀의 모든 구성원이 실제 사용자와 상호 작용할 때 일이 어떻게 작동하는지 확인할 수 있습니다.

정적 스케치와 와이어프레임은 대화형 프로토타입이 할 수 있는 방식으로 제품에 생명을 불어넣지 못합니다. 거의 마술처럼 제품이 어떻게 작동하는지, 즉 모든 것이 어떻게 연결되는지 보고 느껴집니다. 다양한 디자인과 기능을 탐색할 수 있습니다. 새로운 아이디어가 나올 수 있습니다. 문제 지점을 발견할 수 있고 어색한 상호 작용이 드러날 수 있습니다.

대화형 프로토타입은 사용자 테스트에 엄청난 도움이 됩니다. 사람들에게 정적인 페이지를 안내하는 대신 잠재 사용자는 100% 실제처럼 느껴지는 제품을 테스트하고 아이디어를 제공하며 귀중한 피드백을 제공할 수 있습니다.

오늘날 디자이너를 위한 프로토타이핑 도구는 모든 모양과 크기로 제공됩니다. 다음은 UX 디자인을 위한 21가지 대화형 프로토타이핑 도구입니다.

8. 시각 디자인

시각 디자인은 제품의 "최종 페인트 코팅"입니다. 하지만 그 뿐만이 아닙니다. 시각적 디자인은 제품의 UX에 큰 영향을 미칠 수 있으므로 매우 신중하게 접근해야 합니다. 디자이너가 비주얼에 집중할 수 있도록 UX 디자인 프로세스의 이전 단계에서 많은 인터랙션 디자인 및 사용성 휴리스틱이 수행되기를 바랍니다. 제품을 한 단계 더 업그레이드할 수 있는 마지막 기회입니다.

비주얼 디자인은 개발자에게 전달되기 전의 마지막 단계이자 스타일 가이드와 최종 사양이 만들어지는 단계입니다. 단순히 "예쁘게 만드는 것"이 ​​아니라 브랜드 색 구성표를 정의하거나 구현하고 레이아웃, 대비 및 시각적 계층 구조로 사용성에 영향을 줄 수 있는 기회입니다.

9. 개발자를 위한 스타일 가이드 및 사양

UX 디자인 워크플로의 마지막 단계는 개발자를 위한 사양과 스타일 가이드를 작성하는 것입니다. 제품 디자인이 장기적으로 성공하려면 스타일 가이드가 필수입니다.

스타일 가이드는 디자인이 브랜딩, 시각적 스타일, 색상, 글꼴 및 타이포그래피 전반에 걸쳐 일관되게 구현되도록 하기 위한 것입니다. 또한 디자인 패턴, 언어, 규칙(예: 키보드 단축키 및 데이터 표시 규칙) 및 UI 동작 지정(예: 오류 처리)에도 사용됩니다.

일부 스타일 가이드 및 사양은 수동으로 조합되고 나머지는 자동으로 생성됩니다. 수동으로 스타일 가이드를 작성하는 것은 지루한 과정이며 종종 6개월이 소요될 수 있으므로 자동화 도구를 사용하면 시간을 절약할 수 있습니다.

자동화된 방법은 사용하는 도구에 따라 다릅니다. 오랜 시간에 걸쳐 제작된 스타일 가이드와 비교하여 디자인을 전달하는 보다 민첩하고 점진적인 방법입니다. 그들은 팀의 모든 사람이 참조할 수 있는 선반에 있는 "스타일의 성경"과 비슷하다고 생각할 수 있습니다.

Sketch에서 작업하면 Zeplin과 같은 신의 선물이 있습니다. Zeplin은 UI 디자이너와 프론트 엔드 개발자를 위한 협업 도구입니다. 디자인 워크플로를 넘어 팀의 디자인 전달을 돕습니다.

또한 Craft 플러그인을 사용하여 Sketch에서 몇 초 안에 디자인 스타일 가이드를 생성하거나 이 기사에 설명된 대로 Marketch 플러그인으로 HTML 파일을 생성하여 디자인에서 측정 및 CSS를 가져올 수 있습니다.

다음은 50가지 훌륭한 스타일 가이드의 예입니다. 또한 BBC에서 제공하는 것과 IBM에서 제공하는 것 모두 온라인으로 가이드를 호스팅하여 누구나 쉽게 볼 수 있습니다.

10. 사용성 테스트 및 사용 분석 보고서

UX 디자이너의 일은 결코 끝나지 않습니다. 제품이 출시된 후에도 피드백을 수집하고, 사용 데이터를 수집하고, 수정하고, 출시하고, 주기를 다시 시작할 수 있는 기회가 있습니다.

사용성 테스트는 대상 사용자가 귀하의 제품을 사용할 수 있는지 여부를 알려줍니다. 사람들이 특정 UI에서 겪고 있는 문제를 식별하는 데 도움이 되며 완료하기 어려운 작업과 혼란스러운 언어를 보여줍니다.

사용성 테스트 보고서는 일반적으로 프로토타입 단계에서 전달되지만 개선의 여지가 있는 부분을 확인하기 위해 사용자와 함께 기존 제품을 테스트하는 것은 드문 일이 아닙니다.

사용성 테스트(수집, 정렬 및 보고서 생성) 중에 수집된 데이터를 이해하는 것은 UX 실무자 사이에서 점점 더 일반적인 작업이 되고 있으며 실제로는 중요한 UX 기술이 되고 있습니다. 다음은 사용성 테스트 보고서 템플릿입니다.

제품이 출시된 후 또 다른 데이터 수집( 정량적 방법)을 통해 디자인 팀에서 제품이 대규모 사용자에게 어떻게 작동하는지 알릴 것입니다.

사용자 행동을 포착하고 분석하는 수많은 도구와 방법이 있습니다. 시선 추적에서 클릭 추적 및 히트맵(클릭, 탭 및 스크롤 동작 표시), 모바일 및 웹 장치 전반에 걸쳐 모든 사용자의 디지털 발자국을 추적하는 UI 요소 태깅에 이르기까지.

분석 보고서는 고객이 사용하는 기능, 모바일 앱 또는 사이트에서 보내는 시간, 시간 경과에 따른 추세를 보여주고 지역, 계정, 사용자 및 맞춤 세그먼트에 대한 결과를 집계합니다. 기능이 누가 어떻게 사용되는지에 대한 완전한 가시성을 제공합니다.

분석 회사는 일반적으로 주문형 보고서를 자동으로 생성합니다. 이 보고서는 매우 유용하며 제품 사용에 대한 놀라운 통찰력을 제공할 수 있습니다. 모든 고객의 마음을 사로잡을 것이라고 생각했던 놀라운 기능이 거의 사용되지 않을 수도 있습니다. 반대로 UI의 작고 중요하지 않은 기능이 많이 사용되는 것으로 판명될 수 있으며 해당 특정 기능을 확장하는 데 집중해야 할 때라고 결정할 수 있습니다.

UX 디자이너의 사명은 기업이 인간의 행동, 목표 및 동기에 대한 깊은 이해를 기반으로 제품과 서비스를 만들 수 있도록 하는 것입니다. 위의 10가지 UX 결과물은 UX 디자이너가 "디자인 사고"와 사용자 중심 디자인 프로세스의 일부로 사용자에게 훌륭한 경험을 제공하기 때문에 가장 일반적으로 생성되는 것입니다.

• • •

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

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법