Report_053. UX 디자인 산출물의 포괄적인 개요

UX 디자인 산출물의 포괄적인 개요

2월 20, 2018 /디자인 /앱 및 웹 디자인 / Adobe Korea

UX 디자이너는 매일 어떤 작업을 할까요? 셀 수 없이 많은 일들을 합니다. UX 전문가들은 디자인 아이디어와 리서치 결과를 다양한 청중들에게 전달해야 합니다. UX 전문가들이 이러한 전달을 목적으로 사용하는 것이 산출물이며 이는 현재까지 수행한 작업에 대한 물리적 기록입니다. 아래에 열거한 목록은 UX 디자이너가 탁월한 사용자 경험을 제작하는 시점에서 생산하게 되는 가장 일반적인 산출물입니다.

쉽게 이해할 수 있도록 UX 활동별로 산출물을 요약해 봤습니다.

• 프로젝트 평가
• 경쟁사 평가
• 사용자 조사
• 정보 아키텍처
• 인터랙션 디자인

프로젝트 평가

프로젝트 평가는 UX 디자이너가 제품의 현 상태를 이해하는 데 유용한 평가 프로세스입니다.

애널리틱스 감사

애널리틱스 감사는 웹 사이트 또는 앱에서 사용자에게 문제를 야기시키고 전환률 감소를 가져오는 부분을 밝혀내는 방법입니다. 애널리틱스 감사 동안 감사자는 트래픽 출처, 트래픽 흐름, 전환(및 포기) 핫스팟 등의 다양한 방법을 비롯한 툴과 지표를 사용해 제품이 어느 지점에서 잘못되는지(또는 잘 되는지) 분석하게 됩니다. 궁극적으로 UX 디자이너는 애널리틱스 감사를 통해 사용자의 목표를 보다 손쉽게 성취할 수 있는 웹 사이트 또는 앱을 만들어 전환률을 향상시키는 방법을 파악할 수 있습니다.

사용자가 제품과 상호 작용하는 방식, 즉 클릭, 사용자 세션 시간, 검색 쿼리, 전환율 등의 애널리틱스 툴을 통해 도출한 수치를 기반으로, UX 디자이너는 사용자 테스트에서 분명하게 나타나지 않는 행동을 포착하여 예상 밖의 결과를 발견할 수 있습니다. 이미지 출처: Ramotion

팁: 디자인 변경 사항을 대상으로 A/B 테스트를 습관화하십시오. 모든 변경 사항은 A/B 테스트의 대상이 된다는 점을 알고 있으면 (잠재적인 위험성이 존재하는 경우일지라도 결과에 구애 받지 않고) 새로운 디자인을 자유롭게 시도할 수 있습니다. 의도한 디자인이 효과적이면 그 결과를 거의 즉시 확인할 수 있습니다. 또한 변경 사항 일부가 전체 디자인을 망치지 않을까 걱정하지 않아도 됩니다.

콘텐츠 감사

콘텐츠 감사란 앱 또는 웹 사이트의 일부 또는 전체에 대한 정보 자산을 평가하는 프로세스입니다. 콘텐츠 감사는 콘텐츠 인벤토리이자 각 페이지의 콘텐츠에 대한 평가(사람에 의한 정성적 평가 또는 애널리틱스를 통한 정량적인 평가) 및/또는 콘텐츠 소유자 할당이라고 할 수 있습니다. 또한 향후 마케팅 활동의 우선 순위를 정하기 위해 웹 사이트 또는 앱에 있는 모든 콘텐츠를 수집하고, 상대적인 강점과 약점을 평가하는 것입니다. 감사를 통해 디자이너는 콘텐츠를 훨씬 더 효과적으로 이해할 수 있습니다. 전에 알지 못했던 콘텐츠의 존재감을 발견하고, 중복되거나 오래된 콘텐츠를 찾아내거나 콘텐츠에 담긴 모든 유형의 상관 관계를 식별할 수 있습니다. 콘텐츠 감사의 결과는 거시적 관점(콘텐츠 전략 구축) 또는 미시적 관점(특정 페이지 최적화)의 업무에 활용할 수 있습니다.

사용성 테스트 보고서

사용성 테스트는 실제 사용자를 대상으로 테스트하여 제품 사용이 얼마나 용이한지를 검증하는 방법입니다. 사용성 테스트 보고서는 프로젝트 팀이 문제를 식별하고 솔루션을 찾아낼 수 있도록 명확하고 간결하면서도 서술적인 방식으로 사용성 결과를 요약합니다.

사용성 테스트 보고서의 예 이미지 출처: tiffanyho

팁: 결과를 등급별로 분류하십시오. 사용성 테스트를 통해 발견된 모든 문제점의 중요성은 동일하지 않습니다. 사용성 보고서는 조사 규모에 따라 5개 또는 100개 결과를 제공할 수도 있으며, 경우에 따라 모든 결과를 살펴보는 일이 팀에 부담을 줄 수 있습니다. 이러한 이유로, 심각도에 따라 결과를 낮음, 중간 또는 높음으로 분류해야 합니다. 이로써 팀은 사용성 조사에서 드러난 중요한 문제점을 식별할 수 있습니다.

경쟁사 평가

경쟁사 평가는 현 경쟁사 및 잠재 경쟁사의 강점과 약점을 평가하는 것입니다. 경쟁사의 강점과 약점에 대한 평가는 UX 전략에서 핵심이 되는 부분입니다.

경쟁사 분석 보고서

경쟁사 제품 분석에서는 경쟁사의 기존 기능을 비교 가능한 방식으로 표시합니다. 경쟁사 분석 보고서는 UX 디자이너가 업계 표준을 이해하고 현 분야에서 혁신의 기회를 식별하는 데 도움을 줍니다.

경쟁사 분석을 통해 디자이너는 특정 시장에서 경쟁사의 강점과 약점을 평가하고 제품의 경쟁 우위를 향상시키기 위한 효과적인 전략을 도모할 수 있습니다. 이미지 출처: yellowpencil

팁: 자사의 강점과 개선점을 찾아내기 위한 유용한 출발점으로 사용자 경험 휴리스틱스를 들 수 있습니다. 경쟁사 분석이 휴리스틱스 평가를 복제하려는 의도는 아니지만, 정보 전달을 위한 훌륭한 구조를 제공한다는 이유에서 휴리스틱스는 바람직한 출발점이 될 수 있습니다. 휴리스틱스에는 효율적인 탐색, 텍스트 및 레이블의 명료성, 일관성, 가독성, 스캔 용이성 등이 포함됩니다.

가치 제안

가치 제안은 제품의 핵심적인 측면을 서술하는 것으로, 제품의 정의, 사용 대상 및 사용 방법 등을 포함합니다. 가치 제안은 팀이 만드는 제품에 대한 합의를 이끌어내는 데 도움을 줍니다.

가치 제안을 통해 UX 디자이너는 제품과 관련된 중요 사항을 언제나 염두에 둘 수 있습니다. 이미지 출처: UX Mag

팁: 가치 제안은 비즈니스의 주요 목적과 직접적으로 연결되도록 작성해야 합니다. 이렇게 함으로써 UX 활동을 위한 시간 및 예산에 대한 논의를 훨씬 더 쉽게 진행할 수 있습니다.

사용자 조사

사용자 조사는 관찰 기법, 작업 분석 및 기타 피드백 방법을 통해 사용자 행동, 요구 사항 및 동기들을 이해하는 데 주력합니다.

페르소나

페르소나는 잠재적인 사용자 유형과 유사한 방식으로 제품을 사용하는 허구의 인물입니다. 페르소나를 이용하면 디자인 프로세스가 진행되는 동안 디자이너가 사용자와 더욱 손쉽게 공감할 수 있게 됩니다. 페르소나는 UX 분야에서 호불호가 확연히 갈리는 도구입니다. 페르소나를 전적으로 애용하는 UX 디자이너가 있는가 하면, 싫어하는 UX 디자이너도 있습니다. 따라서 UX 디자인 프로세스에서 사용하기 전에 페르소나의 이점뿐만 아니라 페르소나의 단점까지 이해하는 것이 중요합니다.

페르소나는 타깃 사용자의 행동, 요구 및 동기를 집중적으로 부각시킨 허구의 인물입니다. 이미지 출처: xtensio

팁: 가장 효과적인 페르소나는 심층적인 사용자 인터뷰와 실제 사용자에 대한 관찰 데이터를 통해 만들어집니다. 타깃 고객을 대표하는 충분한 수의 사람들을 면담 및/또는 관찰함으로써 사용자에 대한 정보와 지식을 최대한 수집하십시오.

사용자 스토리

사용자 스토리는 제품 사용자의 관점에서 본 제품 기능에 대한 간략한 설명입니다. 기본적으로 사용자 스토리는 개념적 차원에서 매우 높은 수준의 요구를 정의한 것으로, 개발자가 해당 컨셉트 구현에 필요한 합리적인 작업 기간을 산출할 수 있을 정도의 충분한 정보를 포함하고 있습니다.

이미지 출처: realtimeboard

팁: 피처 크립(feature creep)을 방지할 목적으로 사용자 스토리를 사용하십시오. 피처 크립이란 제품 디자인 단계에서 일상적으로 등장하는 용어로, 더 많은 기능을 계속해서 추가하여 프로젝트 범위가 확대되는 경향을 가리킵니다. 어떤 이유로 특정 기능이 중요한지를 설명하는 사용자 스토리가 없이는 무분별한 기능 추가를 삼가야 합니다.

활용 사례

활용 사례는 앱 또는 웹 사이트에서 사용자가 작업을 수행하는 방식을 서술한 것입니다. 사용자의 관점에서 앱 또는 웹 사이트가 요청에 반응하면 어떻게 행동하는지를 설명합니다. 각 활용 사례는 사용자의 목적으로 시작해 목적 달성 시 종료되는 간단한 단계의 시퀀스로 대표됩니다.

활용 사례는 이벤트의 동작 또는 단계의 목록으로, 대개의 경우 목적을 달성하기 위한 사용자와 시스템 간의 상호 작용을 정의하는 것입니다. 이미지 출처: Slideshare

팁: 활용 사례는 UX 단계뿐만 아니라 품질관리(QA) 단계에서도 사용할 수 있습니다. 따라서 특정 제품의 사용성을 검토하는 경우, 가장 중요한 것은 품질관리 전문가가 활용 사례를 간편하게 이용하는 것입니다. 이러한 활용 사례를 통해 품질관리 전문가는 디자인에서 해결되어야 하는 문제에 대한 일정 기준을 제시할 수 있습니다.

경험 맵

경험 맵은 사용자가 제품을 사용할 때 사용자가 수행하는 여러 단계를 탐구하는 다이어그램입니다. 이를 통해 디자이너는 사용자 경로의 매 단계에서 사용자의 동기와 요구 사항을 표현할 수 있고, 각 단계에 적합한 솔루션을 설계할 수 있습니다.

간단한 경험 맵은 하나의 시나리오 동안 가능한 한 개의 경로를 반영합니다. 이미지 출처: effectiveui

팁: 고객 경로 맵 작성 프로세스의 첫 번째 단계는 사용자에 대해 아는 것입니다. 사용자에 대한 수많은 데이터 소스를 이용할 수 있지만, 웹 사이트 또는 모바일 앱 애널리틱스가 가장 확실한 데이터 소스입니다. 애널리틱스는 사용자의 웹 사이트 또는 앱 행동에 대한 유용한 인사이트를 제공하며, 이 데이터는 매력적인 사례를 구축하는 기반이 됩니다.

스토리보드(현재 지향)

스토리보드는 샷과 스토리를 묘사한 일러스트레이션입니다. UX에서 스토리란 사용자가 제품을 사용하면서 취하게 되는 일련의 동작을 말합니다. 스토리보드를 사용하면 디자이너가 디자인의 대상이 되는 사람들의 실질적인 경험을 구현할 수 있습니다.

사람의 얼굴에 나타나는 스마일과 슬픔의 묘사는 강력한 감정적 파급 효과를 가집니다. 따라서 고객의 감정과 이성에 호소하여 생동감 있는 스토리를 만들 수 있습니다. 이미지 출처: Chelsea Hostetter

팁: 스토리보드라고 하면 대부분의 사람들은 자신의 그림 실력에 집중하기 쉽습니다. 반가운 소식은 스토리보드를 작성하기 전에 그림 실력을 먼저 갖춰야 하는 것이 아니라는 점입니다. 전달하고자 하는 실제 스토리가 이보다 더 중요하기 때문이며, 핵심은 정보를 명확하게 전달하는 것입니다.

설문조사

설문조사는 사용자 만족도 정도를 측정하고 특정 제품에 대한 피드백을 수집할 수 있는 빠르고 경제적인 방법입니다. 설문조사가 수많은 사용자들로부터 정보를 수집할 수 있는 훌륭한 방법이긴 하지만, 정성적 인사이트(예: 고객이 특정 제품을 특정 방식으로 이용하는 뜻깊은 이유)를 얻을 수 없다는 점은 명백한 한계입니다.

팁: 설문조사는 짧게 만드십시오. 설문조사를 만들 때 더 많은 질문을 넣고 싶다는 유혹에 빠지게 됩니다. 그러나 설문조사가 필요 이상으로 길어지면 사람들이 질문을 건너뛰는 문제가 생깁니다. 중요한 정보를 더 많이 수집하고 싶다면 효과적인 접근 방식을 사용해야 합니다. 설문조사는 되도록 간결하게 유지하며 또 다른 설문조사를 한두 달 후에 실시하십시오.

정보 아키텍처 정의

정보 아키텍처를 정의하는 것은 특정 부분에 대한 사용자의 이해를 쉽게 하기 위해 정보를 어떻게 배열할지를 결정하는 작업입니다. 디지털 제품의 정보 아키텍처를 정의하려면 내비게이션, 사이트 맵, 분류 체계 및 와이어프레임을 제작해야 합니다.

이미지 출처: Murray Thompson, UX 부스

사이트 맵

사이트 맵은 계층 구조로 구성된 웹 사이트 페이지의 다이어그램으로, 간편하게 웹 사이트의 기본 구조 및 내비게이션을 시각화할 수 있습니다.

사이트 맵 예시 이미지 출처: 비핸스 

팁: 사이트 맵을 신속하면서도 손쉽게 제작하려면 카드 분류 방법을 사용하십시오.

분류법

분류법은 뉴스 웹 사이트의 기사, e커머스 앱의 제품 카테고리와 같이 콘텐츠와 데이터를 분류하는 여러 가지 방법을 탐구하는 데에서 비롯됩니다. 분류법을 통해 디자이너는 사용자와 비즈니스의 목적을 지원하는 콘텐츠 구조를 정의할 수 있습니다.

이미지 출처: Christian Ricci

 팁: 분류법은 가변적인 분류 체계이므로, 정기적으로 다시 테스트하고 업데이트해야 합니다.

와이어프레임

와이어프레임은 페이지의 계층 구조 및 주요 요소를 나타내는 시각적 가이드입니다. 와이어프레임은 UX 디자이너가 팀원 및 이해 관계자와 함께 아이디어를 논의하고 시각 디자이너와 개발자의 작업을 지원해야 할 때 유용합니다.

와이어프레임은 스케치의 형태로 제시할 수 있습니다.

스케치는 새로운 인터페이스 디자인 등의 아이디어를 빠르게 시각화할 수 있는 방법입니다. 이미지 출처: Nicholas Swanson

와이어프레임은 디지털 일러스트레이션의 형태로도 제시할 수 있습니다.

모바일 앱용 와이어프레임의 예. Adobe XD에 탑재된 모바일 및 웹용 두 가지 버전의 무료 와이어프레임 UX 키트, 와이어즈(Wires) 다운로드

팁: 와이어프레임은 간결성을 유지하되 주석을 추가하십시오. 와이어프레임의 목적은 페이지 디자인의 기본 구조를 보여주는 데 있으므로 세부적인 디자인 작업은 나중에 합니다. 팀을 대상으로 와이어프레임을 프레젠테이션할 계획이라면 주석을 포함하십시오. 주석은 구조적인 맥락을 생성하고 핵심 아이디어를 신속하게 전달하는 데 도움을 줍니다.

인터랙션 디자인

인터랙션 디자인(약어: IxD)이란 인터랙티브한 디지털 제품을 디자인하는 작업을 말하는 것으로, 디자이너가 논리적이고 사려 깊은 행동 및 동작으로 매력적인 유저 인터페이스를 설계하는 과정입니다.

스토리보드(미래 지향)

기본적으로 이 스토리보드는 사용자 조사 섹션에서 살펴본 스토리보드와 동일하지만 한 가지 차이점이 있습니다. 즉, 이 스토리보드는 디자인 솔루션 판매를 위해 사용되는 스토리보드입니다. 디자이너는 제안된 솔루션의 이점을 소개하는 데에 스토리보드를 사용하고 이를 통해 이해 관계자를 설득할 수 있습니다.

이미지 출처: digiflip 

팁: 명확한 결과를 설계하십시오. 스토리보드는 스토리의 결과에 대해서는 청중에게 의심의 여지를 남기지 말아야 합니다. 우호적이지 않은 상황을 설명하는 경우라면 문제를 제시하는 선에서 마무리하고, 솔루션을 제시하는 경우라면 상대방에 합당한 솔루션의 이점으로 결론을 내립니다.

사용자 흐름 다이어그램

사용자 흐름 다이어그램은 제품 내에서 작업을 완료하기 위해 사용자가 수행해야 하는 동작을 시각적으로 재현한 것입니다. 사용자 흐름을 시각화하면 개선이 필요하거나 새로 디자인해야 하는 단계를 더욱 쉽게 식별할 수 있습니다.

사용자 흐름은 앱 또는 웹 사이트의 각 페이지에 대한 일반적인 이해를 도와줍니다. 이미지 출처: 비핸스

팁: 현재 디자인 단계에 있는 프로젝트가 많은 경우, 사용자 흐름을 작성하는 일은 시간 소모적인 작업이 될 수도 있는데, 화면이 변경되면 다이어그램이 바로 구식이 되기 때문입니다. 베이스캠프(Basecamp)의 라이언은 간소화된 버전의 사용자 흐름을 제안합니다. 이 형식은 빠르게 스케치할 수 있을 뿐만 아니라 필요한 부분에 대해서 중요한 부분을 전달합니다.

프로토타입

업계 종사자의 상당수는 ‘와이어프레임’과 ‘프로토타입’을 상호 교환적인 용어라고 알고 있지만 이 두 개념은 상당히 큰 차이가 있습니다. 모양도 다르고 의미와 용도도 다릅니다. 와이어프레임은 건축 청사진(예: 건물 플랜)과 유사한 반면, 프로토타입은 최종 제품을 미들 피델리티에서 하이 피델리티 사이의 수준으로 재현한 것입니다. 프로토타입의 목적은 최종 제품에 수많은 시간과 비용을 투자하기 전 제품(또는 제품 아이디어)를 테스트하는 데 있습니다.

프로토타입은 사용자가 제품과 상호 작용하는 방식을 간략하게 보여주는 것으로, 아날로그 방식으로 제작할 수 있습니다.

로우 피델리티 아날로그 프로토타입 이미지 출처: UX 플레이그라운드

디지털 방식도 가능합니다.

하이 피델리티 수준의 인터랙티브 프로토타입, Adobe XD에서 제작, iPhone에 반영

가장 중요한 것은 프로토타입을 통해 사용자가 최종 제품을 이용하는 방식과 유사한 방식으로 콘텐츠를 경험하고 인터페이스를 사용해 주요 상호 작용을 테스트할 수 있어야 한다는 점입니다.

팁: 가능한 한 실제 디바이스에서 프로토타입을 충분히 테스트하십시오. 경우에 따라 데스크탑 에뮬레이터가 효과적일 수도 있으나 실제 디바이스에서 수행하는 디자인 경험만큼 최상의 방법은 없습니다.

결론

지금까지 언급된 산출물의 종류와 갯수에 대부분의 디자이너 분들이 놀라운 반응을 보였을 것입니다. 하지만 안심하십시오. 프로젝트는 저마다 다르고 UX 디자이너는 각각의 프로젝트에 해당하는 산출물을 모두 제작할 필요는 없습니다. 또한 모든 프로젝트에 동일하게 효과적이고 보편적인 한 종류의 산출물도 존재하지 않는다는 점을 명심하십시오. 각 산출물은 적합한 고객이 있는 적절한 상황에서 효과적인 의사 소통 수단이 될 수 있습니다.

 

원문보기

출처 : https://blogs.adobe.com/creativedialogue/ko/design-ko/comprehensive-overview-ux-design-deliverables/