완벽한 UX 디자인 프로세스 – 프로토타입 디자인 가이드

단순한 와이어프레임 생성에서 완전한 기능을 갖춘 목업 테스트에 이르기까지 프로토타이핑 프로세스는 모든 디자이너가 마스터할 수 있는 가장 강력하고 강력한 기술 중 하나입니다. 또한 다음 부서에 구축하기 위해 제공할 간단한 결과물로 "프로토타입을 설계"하는 대신 프로세스를 건너뛰는 작업장에서 위험이 따릅니다. 귀하의 비즈니스가 프로토타이핑을 얼마나 부지런히 수행하더라도 실제 프로세스는 종종 최종 제품을 만들거나 깨뜨릴 수 있습니다.

프로토타입을 실제로 만드는 방법과 이유는 종종 미스터리입니다. 많은 디자이너에게 물어보면 혼란스러운 강아지처럼 고개를 기울일 것입니다. "무슨 뜻이에요? 그냥 하면 됩니다.”라고 말할 것입니다. 그리고 충분히 사실입니다. 우리 모두는 프로토타입을 만드는 방법을 알고 있습니다. 우리는 우리가 어떻게 아는지 모릅니다.

이는 프로토타입이 종종 가장 가치 있는 결과물임을 고려할 때 특히 중요합니다. 클라이언트와 관리자는 웹사이트이든 실제 제품이든 당신이 한 일을 보고 싶어합니다. 그들은 그것을 시도하고 다양한 요소를 검사하고 워크플로를 이해하기를 원합니다. 그들은 "어떻게 작동하는지"를 보고 싶어합니다.

프로토타입을 만드는 것만으로는 충분하지 않습니다. 우리는 제품의 초기 초안을 구성하는 것과 관련된 프로세스를 이해해야 합니다. 이 기사에서는 디자이너가 이를 달성하기 위해 알아야 하고 수행해야 하는 모든 것에 대해 자세히 설명합니다.

프로토타입 디자인 - 프로토타입의 용도

인간은 매우 시각적입니다. 사실, 대뇌 피질의 30%는 순전히 시각에 사용됩니다. 따라서 프로토타입을 볼 때 가장 중요한 것은 프로토타입을 보는 것입니다! 클라이언트가 제품을 보고 제품과 관련된 모든 프로세스, 특히 향후 테스트를 위한 경합 영역을 이해할 수 있을 때 해당 프로토타입이 살아납니다.

그렇다면 프로토타입이란 무엇일까요? 프로토타입은 다양한 인터랙티브 디자인 작업을 시각화하기 위한 도구입니다. 사실상 프로토타입(거의 모든 단계에서)은 이전에 나온 모든 작업을 하나의 가시적이고 기능적인 조각으로 결합한 것입니다. 이 시각적 표현은 주어진 시점에서 제품이 무엇을 하고 있는지, 대화형 요소가 무엇인지, 제품이 실제 세계에서 어떻게 작동하는지 보여줍니다.

프로토타입 디자인의 다양한 측면(예: 스케치 생성)을 위한 메커니즘이 많이 있지만, 놓치거나 실수하기 쉽습니다.

이것은 프로토타입이 어떻게 제작되는지에 대한 작업을 매우 가치있게 만듭니다. 여러 면에서 제품의 목적이 어떻게 실현되는지를 설명하기 때문입니다. 대부분의 경우 완벽하지는 않고 확실히 정확하지도 않지만 이름에서 알 수 있듯이 프로토타입은 최종적이지 않습니다.

그들은 우리의 속도를 늦추기 위해 우리를 느리게 합니다. 시간을 내어 아이디어의 프로토타입을 만들면 너무 일찍 복잡해지고 약한 아이디어를 너무 오래 고수하는 것과 같은 값비싼 실수를 피할 수 있습니다.

팀 브라운, IDEO CEO 겸 사장

프로토타입을 생각하는 간단한 방법은 기능을 시연하는 메커니즘입니다.

작동 방식에 대한 실용적인 설명은 다음과 같은 많은 가치 있는 이점을 제공합니다.

• 현실화 – 프로토타입이 제작되기 전에 제품은 완전히 개념적입니다! 잠시 동안은 괜찮지만 결국 이해 관계자와 사용자가 결국 이해하고 감사할 수 있는 것이 되어야 합니다. 프로토타입은 개념에서 실제로 이동하는 첫 번째 단계입니다.
• 작업 문제 – 때로는 솔루션이 없는 설계 문제가 있습니다. 기술로서 프로토타이핑은 문제를 시각화하고 솔루션을 신속하게 도입하는 좋은 방법입니다. 작동하지 않으면 프로토타입을 버리고 다시 시도하십시오.
• 반복 – 프로토타이핑은 단계적으로 이루어지지만 결과는 동일합니다. 아이디어를 발전시키는 것입니다. 스케치에서 하이파이에 이르기까지 각각의 새로운 반복은 테스트할 동작과 기능의 과잉을 제공합니다. 그리고 더 많은 데이터를 통해 더 빠르고 스마트하게 반복할 수 있습니다.
• 의도하지 않은 시나리오 감지 – 일단 무언가 가 보이면 연구에 사용할 수 있는 제품의 한계가 있으며, 이는 있어야 하는 것과 없어야 하는 것에 대한 더 나은 컨텍스트를 제공합니다!
• 사용성 문제 감지 – 많은 디자이너가 살고 있는 곳입니다. 제품에 어떤 종류의 프로토타입이 있으면 사용성 문제를 갑자기 발견하고 수정하기 쉬워집니다.
• 프레젠테이션 – 모든 단계의 프로토타입은 프레젠테이션의 표준입니다. 페이지 버전을 테스트하든 클라이언트에게 제품을 제시하든, 어떤 형태의 프로토타입이 있어야 합니다. 그리고 그렇지 않은 경우 누군가가 그것이 어디에 있고 왜 포함되지 않았는지 묻게 될 것입니다.

프로토타이핑 프로세스를 시작하는 방법

클라이언트로부터 50페이지의 요구 사항 문서를 받은 후 빈 캔버스를 보는 것이 어려울 수 있습니다. 클라이언트 회의, 냅킨 스케치, 더러운 화이트보드 사진에서 정리되지 않은 생각을 검토하는 것은 거의 도움이 되지 않습니다.

프로토타입은 다른 많은 정보를 기반으로 하기 때문에 펜을 종이에 넣기 전에 필요한 세부 정보를 미리 수집하는 것이 중요합니다. 다음 체크리스트를 고려하고 고객이나 관리자가 제공한 세부 정보를 검토하십시오.

1. 프로젝트의 목표는 무엇입니까?

큰 그림부터 시작하세요. 제품이 실제 요구 사항을 해결합니까? 그 필요성을 어떻게 해결합니까? 모든 종류의 실행 가능한 솔루션을 제공하려면 제품의 유용성 을 이해하는 것이 중요합니다.

2. 사람들이 현재 사용하는 경쟁 제품은 무엇입니까?

강력한 경쟁 분석은 제품 유형에 대한 시장 현황과 오늘날의 사용자가 기대하는 것에 대한 명확한 그림을 제공합니다.

3. 청중은 누구입니까? 그들의 목표는 무엇입니까?

인구 통계 및 사용자 요구 사항을 이해하면 특정 사용자 유형을 제공하고 그들의 요구 사항을 충족시키는 데 적합한 제품을 만드는 데 필요한 컨텍스트를 제공합니다.

4. 어떤 종류의 제품이며, 무엇을 위한(디바이스)입니까?

다양한 기술과 솔루션이 있기 때문에 UX 디자이너는 제품이 어떻게 사용될지(웹 앱, 반응형 웹사이트, 모바일 앱 등), 어떤 기기에서, 어떻게 다른 버전이 공존할 것인지(만약 있다면 ).

5. 따라야 할 시각적 선례가 있습니까?

제품이 이미 존재하고 프로젝트가 개선 또는 재설계를 위한 것이라면 제품에 대한 현재 사용자 행동을 고려하여 일부 요구 사항이 존재할 수 있습니다.

6. 결과물은 무엇입니까?

산출물과 프로세스에 대한 기대치를 설정하는 것은 계획 및 워크플로에 매우 중요합니다. 프로젝트마다 다르지만 결과물이 잘 정의되어 있으면 나머지 UX 디자인 프로세스가 원활하게 진행될 가능성이 높아집니다.

프로토타입 그리기

데이터를 사용할 수 있고 정리했으면 다음 단계는 그리기를 시작하는 것입니다. 많은 디자이너는 레이아웃, 구조 또는 시각적 디자인의 특정 요소가 속하는 위치에 대해 그리기 전에 이미 아이디어를 가지고 있을 것입니다. 괜찮습니다. 하지만 초기 스케치의 목적은 사용 가능한 공간을 탐색하여 가능한 것과 더 중요한 것은 불가능한 것을 강조하는 것입니다.

연필과 종이 또는 화이트보드와 마커 중에서 원하는 필기 도구를 모으십시오. 스케치 과정은 작가의 프리라이팅이나 음악가의 스트럼밍과 비슷합니다. 사전에 수행한 모든 작업을 기반으로 느끼는 것을 그리고 아래의 부분을 고려하여 그립니다.

01 | 사용자 흐름 – 식별 사용자 흐름을 따릅니다. 사용자가 목표를 달성하는 방법과 시스템 내에서 상호 작용하는 방법을 확인하십시오.

02 | 정보 엔터티 – 각 사용자 흐름에는 일부 사용자 입력 및 출력이 표시됩니다. 그것들이 무엇인지, 사용자 행동 및 기대와 어떤 관련이 있는지, 어떤 상호 작용과 관련되어 있으며 어떻게 작동하는지 식별하십시오.

03 | 첫 번째 스케치 – 누가 시스템을 사용할 것인지, 무엇을 할 것인지, 무엇으로 할 것인지에 대한 아이디어를 얻은 후에는 방법을 볼 차례입니다. 사용자 흐름을 스케치하세요. 아직 레이아웃을 생성할 필요 없이 기능만 해결하면 됩니다.

04 | 기본 구조 스케치 – 사용자 흐름을 스케치한 후 제품에 가장 적합한 레이아웃을 더 잘 알 수 있습니다. 여기에는 기본 상자나 낙서로 표시되는 콘텐츠(텍스트, 사진, 비디오 등)가 포함됩니다. 손으로 작성하면 크기에 맞지 않으므로 모든 구조와 내용은 실제 사용이 아닌 시각화를 위한 것입니다.

한 가지 추가 팁은 스케치 패드, 특별히 제작된 종이 또는 도구를 사용하여 스케치하는 동안 와이어프레임을 더 선명하게 만드는 것입니다. 문제의 뷰포트에 대한 기본 레이아웃을 제공하고 비용이 상당히 저렴하며 적절한 스텐실을 사용하면 스케치가 더 깔끔하게 표시됩니다. 이것들은 스마트폰과 웹 브라우저를 위한 정확한 종횡비와 격자선을 제공하기 때문에 당신이 지저분한 서랍이라면 엄청나게 도움이 됩니다.

이 프로세스는 원하는 만큼 계속할 수 있지만 사용자 흐름이 완료되고 해당 흐름을 완료하는 프로세스가 명확해지면 다음 단계로 이동할 때입니다. 주로 프로세스를 창의적으로 유지하기 위해 디지털 와이어프레임을 스케치하고 구축하는 작업을 왔다갔다 하는 것이 좋습니다. 더 많은 흐름을 통해 진행할수록 제품이 더 구체적으로 느껴지고 자연스럽게 스케치에서 멀어질 것입니다.

디지털로 이동(저충실도에서 고충실도 프로토타입)

앞으로 나아갈 수 있는 완전한 스케치가 충분하면 디지털화할 차례입니다. Adobe XD, Sketch, Framer, Flinto 또는 완전히 다른 무엇이든 간에 디지털 버전의 스케치를 만드는 것은 스케치를 공식화하는 첫 번째 단계입니다. 따라서 초점은 필요한 요소를 창의적으로 추가하는 것에서 디자인 내 자산 및 구조를 구성하는 것으로 이동합니다.

프로토타입이 더 실용적이고 요소가 더 구조화됨에 따라 제품의 형태가 형성됩니다. 디지털 프로토타입으로 이동할 때 충실도는 상호 작용 수준, 시각 디자인 및 콘텐츠 수준에 따라 결정됩니다. 하이파이는 가장 높은 수준에서 세 가지를 모두 통합하지만 프로토타입은 이러한 영역에서 개별적으로 낮거나 높을 수 있습니다.

사용자 요구에 도달하기 위해 계층 구조를 고려하십시오. 각 스케치는 사용자 흐름과 스토리로 연결되며 스케치는 제품의 레이아웃과 구조를 결정하는 첫 번째 단계입니다. 오늘날의 디지털 도구는 예를 들어 모든 페이지에 적용되는 마스터 요소와 페이지 유형에 대한 템플릿을 설정하는 것과 같이 이 작업의 속도를 크게 높일 수 있습니다.

각각의 새로운 연결과 반복에 대해 두 가지 주요 질문을 하십시오. 이 페이지가 더 큰 사용자 흐름에서 그 목적을 설명합니까? 그리고 상호 작용이 의미가 있습니까(사용자가 작업을 완료하는 방법을 이해했음을 의미)? 우리는 이러한 질문을 많이 합니다. 우리가 더 많이 할수록, 각각의 새로운 반복은 프로토타입을 최종 초안에 더 가깝게 만들 가능성이 더 높아집니다.

디지털 프로토타입은 가독성이 더 높을 뿐만 아니라 대량으로 복제하고 반복할 수 있기 때문에 테스트하기가 훨씬 쉽습니다. InVision 및 Proto.io와 같은 UX 프로토타이핑 도구는 클릭 가능한 프로토타입을 만드는 데 매우 유용합니다. 클릭할 수 있게 되면 개별 버튼부터 전체 흐름에 이르기까지 다양한 측면의 사용성을 테스트하기 쉬워집니다.

클릭 가능한 프로토타이핑은 InVision과 같은 프로그램의 사용 용이성 덕분에 지난 몇 년 동안 특히 인기를 얻었습니다. 이제 모든 주요 프로토타이핑 도구가 테스트 장치에서 직접 모바일 와이어를 보거나 테스트할 수 있는 방법을 제공하는 모바일 장치에 훨씬 더 가치가 있습니다.

일부 엔지니어링 노하우 또는 Justinmind 또는 Axure와 같은 보다 강력한 도구를 사용하면 단순히 클릭하는 것 이상으로 상호 작용하는 기능적 프로토타입을 구축할 수도 있습니다. 사용자는 양식 작성, 단순하거나 복잡한 작업 수행, 실제로 응용 프로그램을 실제로 빌드하지 않고도 사용 목적대로 실제로 사용하는 등의 작업을 테스트할 수 있습니다. 많은 Toptal 디자이너를 포함하여 HCI(인간 컴퓨터 상호 작용) 디자인 교육을 받은 디자이너는 정기적으로 기능 프로토타입을 만들고 테스트합니다.

대화형 프로토타입은 애니메이션, 앱 내부의 사용자 작업, 때로는 기능적 작업 없이는 테스트할 수 없는 상위 수준 기능을 테스트하는 데 적합합니다.

목적이 있는 프로토타입

프로토타이핑의 아름다움과 도전은 현재 진행형입니다. 거의 모든 것에 대해 똑같이 말할 수 있지만 프로토타입은 목적으로 시작하고 끝납니다. 특정 화면이 특정 방식으로 작동해야 하는 이유, 기능이 어떻게 작동해야 하는지, 사용자에게 깔때기가 필요한지 여부를 알지 못하면 만든 프로토타입이 개발되지 않습니다. 그려지고 임시로 생성됩니다.

그러나 구축된 모든 단일 와이어프레임이 그렇게 지능적으로 수행되고 도중에 질문이 제기되고 모든 관련 사용자 스토리가 고려되고 정보 아키텍처가 지도로 사용되더라도 여전히 누락될 가능성이 있습니다. 이것이 프로토타입 디자인의 과제입니다. 클라이언트, 관리자, 심지어 디자이너도 프로토타입이 최종적인 것이 아니라는 사실을 잊습니다. 그것들은 단지 초안일 뿐이며 다음 버전까지의 반복입니다. 모두 UX 디자인 프로세스의 일부입니다.

따라서 다음 프로토타입 세트를 구성할 때 최소한 하나의 가장 중요한 질문을 하는 것을 잊지 마십시오. 이것이 원하는 결과를 생성합니까? 그렇지 않은 경우 새 버전을 작성할 또 다른 기회입니다.

• • •

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

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