작업에 적합한 도구: 프로젝트에 가장 적합한 프로토타이핑 소프트웨어 선택

프로토타이핑 도구는 디자이너에게 중요한 리소스가 되어 정적 문서로 표현하기 어려운 애니메이션, 전환 및 마이크로인터랙션을 포함하여 단일 화면의 여러 상태를 문서화할 수 있습니다.

이러한 추세에 주목하는 회사는 이러한 요구를 해결하기 위해 프로토타이핑 도구를 구축하기 시작했습니다. 오늘날 우리는 과다한 도구가 정기적으로 등장하는 것을 목격하고 있습니다. 그러나 무엇을 선택해야합니까? 더 중요한 것은 올바른 것을 선택하기 위해 자신과 팀에 어떤 질문을 해야 합니까?

SmashingMag에 대한 추가 정보:

• 모바일 프로토타이핑 도구를 선택하는 12가지 요소
• 저충실도 프로토타이핑에 대한 회의론자를 위한 안내서
• 반응형 웹 디자인을 위한 스케치 사용
• 올바른 스케치 워크플로 얻기: 스케치 핸드북

"어떤 도구를 사용해야 하나요?" 온라인 포럼, 디자인 모임 및 블로그에서 가장 자주 묻는 질문 중 하나가 되었습니다. 그것은 매우 열광적인 토론으로 바뀌었고 디자이너는 특정 도구나 응용 프로그램에 대해 빠르게 논쟁하는 경향이 있습니다.

진실은 어떤 솔루션도 모두에게 적합하지 않다는 것입니다 . 점점 더 디자이너는 다양한 도구를 마음대로 사용할 수 있어야 하고, 각각의 장단점을 이해하고, 주어진 컨텍스트에 가장 적합한 워크플로를 신속하게 결정할 수 있어야 합니다.

평가 프로세스에는 여러 단계가 포함됩니다. 숙련된 전문가와 팀 관리자는 새로운 프로젝트에 대한 브리핑을 받고 프로토타입이 사용될 위치를 이해하는 즉시 작업에 적합한 도구를 상당히 빠르게 선택할 수 있습니다.

아래에서 목표 정의, 요구 사항 및 컨텍스트 이해, 사용 가능한 옵션 평가에 이르기까지 프로젝트에 적합한 프로토타이핑 도구를 결정하기 위한 5단계를 살펴보겠습니다. 목표는 처음으로 결정을 내리거나 고유한 요구 사항과 제약 조건이 있는 프로젝트에 직면한 디자이너를 안내하는 것입니다.

프로토타입을 구축하는 데 손을 들이기 전에 우리가 프로토타입을 만드는 이유에 대해 생각해야 합니다. 프로토타입이 해결하려는 문제는 무엇입니까? 특정 순간에 프로젝트에 도움이 될 것이라고 생각하는 이유는 무엇입니까?

1. 프로토타이핑 도구가 정말로 필요합니까?

제품이 디자인되는 동안 제품이 어떻게 작동해야 하는지 가시적으로 보여줄 수 있다는 것은 프로젝트에 확실한 이점을 제공하고 디자이너가 가능한 가장 역동적이고 실제적인 방식으로 상호 작용에 대해 생각할 수 있게 해줍니다. 우리는 라이브 환경 외부에서 복제하기 어려운 생생한 인터랙티브 인터페이스의 세계에 살고 있습니다. 인터랙티브 프로토타입은 이러한 경험을 에뮬레이트하는 데 정말 훌륭합니다.

그러나 어떤 경우에는 프로토타이핑 도구가 실제로 필요하지 않습니다. 프로젝트가 초기 단계에 있고 개념을 검증하기만 하면 종이 프로토타입이 제품 작동 방식을 나타내는 데 더 효과적인 경우가 많습니다. 종이 프로토타입은 소프트웨어에 시간을 할애할 필요가 없으며(경우에 따라 사용법을 배우는 경우도 있음) 특정 사용성 문제를 검증하는 것보다 개념을 테스트하는 데 더 중점을 둔 빠르고 충실도가 낮은 설계 반복을 허용합니다. .

다른 경우에는 전용 소프트웨어로 독립형 프로토타입을 만드는 것보다 최종 프로그래밍 언어로 제품 빌드를 시작하는 것이 가장 좋습니다. 웹사이트를 구축할 때 어떤 사람들은 바로 HTML 프로토타입으로 시작합니다. Bootstrap과 같은 프레임워크는 반응형 웹사이트를 매우 빠르게 만드는 데 도움이 되며 경우에 따라 고급 기술 지식이 필요하지 않습니다. HTML 프로토타입용으로 작성되는 코드 유형은 비전문가에 의해 신속하게 작성될 수 있으므로 거의 항상 폐기된다는 점을 명심하십시오.

작업에 적합한 소프트웨어를 선택하기 위해 에너지를 소비하기 전에 대화형 프로토타입이 실제로 최고의 솔루션인지, 어떤 유형의 프로토타입이 해당 프로젝트의 특정 요구 사항에 가장 잘 부합하는지 팀과 논의하십시오.

2. 목표 정의

프로토타입의 목표를 정의하면 필요한 충실도와 기능 수준을 생각하는 데 도움이 될 수 있습니다. 이는 프로토타입 도구 선택을 직접적으로 알려줍니다.

아래 차트는 설계 단계에서 프로토타입을 만드는 몇 가지 일반적인 이유에 대한 개요를 제공합니다. 이러한 범주는 완전하지 않으며 경우에 따라 동일한 프로토타입이 다른 영역에 사용될 수 있지만 프레임워크는 프로토타입의 목표를 우선시하는 출발점으로 사용할 수 있습니다.

다음 중 귀하의 주요 목표는 무엇입니까?

• 클라이언트 프레젠테이션에서 아이디어를 판매하기 위해 . 프로토타입은 개념에 생명을 불어넣는 데 매우 유용합니다. 또한 고객 및 중요한 이해 관계자에게 아이디어를 제시하기 위한 훌륭한 영업 도구입니다. 아이디어를 대화형 형식으로 시각화하면 "큰 꿈"을 꾸는 데 도움이 될 수 있습니다. 그러한 경우 프로토타입의 기능은 더 얕아지는 경향이 있어 아이디어를 판매하는 데 도움이 되는 핵심 기능과 사용자 흐름만 나타냅니다. 제품의 범위가 프로토타입에서 완전히 표현될 필요는 없지만 약간의 시각적 개선은 큰 영향을 미칠 것입니다. 판매 지향적인 프로토타입은 실제 사용자 중심의 디자인 단계가 시작될 때 버려야 하는 경우가 많습니다.
• 사용자 경험을 테스트합니다 . 사용자에게 프로토타입을 제공하는 것은 가능한 최고의 사용자 경험을 옹호할 때 디자이너로서 우리가 하는 일의 중요한 부분입니다. 과정을 수정하기 위해 피드백을 빨리 수집할수록 좋습니다. 사용자 테스트를 위한 프로토타입은 좀 더 세련된 경향이 있습니다. 비록 종이 프로토타입도 제품이 초기 단계에 있을 때 잘 작동하지만. 프로토타입은 테스트 세션 동안 사용자에게 할당하는 작업의 복잡성만큼 강력해야 합니다.
• 내부적으로 개념을 증명하기 위해 . 때때로 프로토타입은 내부 개념 증명으로만 사용됩니다. 아이디어가 있고 실제로 작동하거나 느낌이 맞는지 확인하고 싶을 때입니다. 빠른 프로토타입은 전체 제품 또는 기능을 디자인하는 데 시간과 노력을 투자하기 전에 여러 이해 관계자와 아이디어를 교환하는 데 도움이 됩니다.
• 논리와 실행 가능성을 테스트 합니다. 어떤 경우에는 팀이 개발로 이동하기 전에 기능이 실현 가능한지 여부를 실제로 테스트해야 합니다. 프로토타입은 디자이너와 개발자 간의 토론에 사용되는 살아있는 문서로 기능할 수 있을 뿐만 아니라 아이디어 및 기능 통합을 테스트하기 위한 샌드박스 환경도 제공합니다.

위의 다이어그램은 프로토타입의 목표를 정의하는 데 도움이 됩니다. 그러나 충실도의 수준은 상황에 따라 달라질 수 있음을 명심하십시오. 저충실도 프로토타입을 사용자와 클라이언트 앞에 두는 것은 지극히 정상적인 일입니다. 특히 개념에 대한 초기 피드백을 찾고 있다면 더욱 그렇습니다.

3. 요구 사항 이해

프로토타입의 높은 수준의 목표가 정의되면 소프트웨어, 하드웨어, 타이밍 및 리소스와 관련된 문제와 같이 결정에 도움이 되는 보다 구체적인 문제를 살펴볼 때입니다.

디자이너가 프로젝트를 시작할 때 흔히 범하는 실수는 팀과 만나 해당 프로토타입이 구축, 공유 및 시각화될 컨텍스트에 대해 논의할 시간을 들이지 않고 좋아하는 프로토타입 제작 도구로 바로 뛰어드는 것입니다. 프로토타입의 첫 번째 버전을 만드는 데 많은 시간을 투자했다면 생각을 바꾸는 것이 어려울 것입니다.

팀과 만나 아래 질문 중 몇 가지를 살펴보세요. 프로젝트 관리자, 디자이너 및 개발자를 토론에 참여시키십시오. 전체 그룹은 일정, 예산, 기술 및 기술 호환성과 같은 요구 사항을 고려하여 목록에 있는 대부분의 질문에 답해야 합니다.

다양한 요소가 구성되는 방식에 따라 프로토타입은 다양한 형태를 취할 수 있습니다. 예를 들어 손으로 스케치하거나 와이어프레임을 만들지 않아도 됩니다. 어떤 경우에는 세련되지 않은 해킹된 HTML 및 CSS 콤보가 가능합니다. 다른 경우에는 주어진 상호 작용이 작동하는지 여부와 작동 방식을 실제로 이해하기 위해 더 풍부하고 세련된 프로토타입을 만들어야 합니다.

범위: 프로토타이핑 흐름 대 상호 작용

일반적인 질문:

• 일련의 단계로 흐름을 보여주려고 합니까, 아니면 더 포함된 상호 작용을 나타내려고 합니까?
• 아이디어를 전달하기 위해 프로토타입을 작성해야 하는 흐름 또는 상호 작용의 가장 중요한 부분은 무엇입니까? 그 경험이 일어날 화면의 크기는 얼마입니까?

프로토타이핑 도구의 세계는 사용자 흐름을 에뮬레이트할 수 있는 도구와 특정 상호 작용을 나타내는 데 더 중점을 둔 도구의 두 그룹으로 쉽게 나눌 수 있습니다.

제품에 대한 이야기나 사용자가 제품을 경험하는 방식에 대해 이야기 하려는 경우 흐름을 프로토타이핑하는 것이 더 나은 접근 방식일 수 있습니다. 이 경우 InVision, Axure 및 Keynote와 같은 도구는 효율성을 높이고 프로토타입이 전달하려는 이야기와 연결된 느낌을 주는 데 매우 강력합니다.

고유하고 심도 있는 상호 작용을 나타내 려고 하고 프로토타입을 이해 관계자와 팀 구성원에게 동작을 설명하는 실질적인 방법으로 사용하려는 경우 다른 도구 그룹에 집중할 수 있습니다. Framer, Principle, Pixate 및 Origami가 그 목록에 있습니다.

고려 사항:

• 흐름을 모방하는 능력
• 도구에서 허용하는 충실도 및 상호 작용 수준
• 지원되는 장치

Fidelity: 워크플로 및 시각적 광택 정의

일반적인 질문:

• 와이어프레임 또는 시각적 목업을 시작점으로 사용할 계획입니까?
• 여전히 화면을 디자인해야 합니까?
• 같은 사람이 디자인과 프로토타이핑을 담당합니까?
• 당신의 팀은 어떤 시점에서 프로토타입을 다른 팀에 넘겨야 합니까?
• 최종 프로토타입의 예상되는 모양과 느낌은 무엇입니까?

일부 프로토타이핑 도구는 디자인과 구축을 동시에 허용하는 반면, 다른 도구는 와이어프레임 또는 시각 보드와 같은 기존 자산을 캔버스로 가져오는 데 더 집중합니다.

시간을 내어 팀과 예상되는 디자인 프로세스에 대해 이야기하십시오. 경우에 따라 프로토타입은 기존 자산을 기반으로 빌드 해야 합니다(예: 팀에서 이미 UI의 시각적 구성 요소를 조롱했을 수 있음). 디자이너는 목업을 일관된 흐름으로 연결하기만 하면 됩니다. 또는 내러티브. 여러 도구가 화면을 연결하고 사용자가 흐름을 통과할 때 상호 작용을 에뮬레이트하는 데 더 중점을 둡니다. InVision과 Keynote가 그 좋은 예입니다.

다른 경우에는 동일한 팀원 이 UI를 디자인하고 프로토타입을 동시에 빌드 해야 합니다. 디자인의 이 두 가지 측면을 동시에 반복할 수 있으면 프로토타입 단계가 끝날 때 보다 세련되고 대화식으로 전달할 수 있습니다. 이 경우 단순히 연결하는 것 이상으로 UI를 디자인할 수 있는 도구를 찾으십시오.

또한 필요한 시각적 개선 수준을 고려하십시오. Axure 또는 UXPin과 같은 도구는 결과물의 모양과 느낌을 와이어프레임처럼 만들 수 있지만 다른 도구는 픽셀 단위로 완벽하고 시각적으로 세련된 최종 제품을 허용합니다. 일부 디자인 팀은 원활하게 함께 작동하여 동일한 결과를 얻을 수 있는 도구를 선택합니다(예: 디자인을 위한 Sketch 및 프로토타이핑을 위한 InVision). 선택한 도구가 자동화된 통합을 제공하여 프로토타입을 업데이트해야 할 때마다 시간과 노력을 절약할 수 있는지 확인하십시오.

고려 사항:

• 협업 기능(공유, 라이브 공유, 댓글 및 피드백)
• 워크플로의 다른 소프트웨어(예: Photoshop, Sketch)와의 통합
• 요구되는 충실도 수준(와이어프레임 대 픽셀 완벽한 디자인)

리소스: 필요한 기술 세트 매핑

일반적인 질문:

• 누가 프로토타입을 만들 것인가?
• 그 사람의 소프트웨어 기술은 무엇이며 얼마나 빨리 일할 수 있습니까?
• 특정 도구를 사용하는 방법을 모르는 경우 얼마나 빨리 배울 수 있습니까? 그들은 그렇게 할 의향이 있습니까?
• 얼마나 많은 디자이너가 프로토타입에 대해 협력할 것입니까?

팀의 소프트웨어 기술을 활용하면 많은 시간을 절약할 수 있습니다. 그러나 이것이 조직에서 새로운 도구를 테스트하고 설계 프로세스에 통합하는 데 방해가 되지 않도록 하십시오. 프로토타이핑 도구는 배우고 작동하기가 점점 더 쉬워지고 있습니다. 디자이너는 학습 곡선보다는 도구가 작업에 적합한지 여부에 대해 더 많이 걱정할 수 있습니다.

팀과 함께 사용 방법을 이미 알고 있는 도구를 매핑하고 온라인 조사를 통해 가장 배우기 쉬운 도구를 확인하십시오. 팀이 최대한 많은 프로토타이핑 도구를 배우고 사용하도록 권장하십시오. 다음 프로젝트에 가장 적합한 도구를 선택해야 할 때 팀의 기술 세트의 다양성과 유연성이 유용할 것입니다.

고려 사항:

• 학습 곡선
• 사용의 용이성
• 속도

컨텍스트: 대상 및 사용 정의

일반적인 질문:

• 프로토타입의 청중은 누구입니까? 누가 그것과 상호작용하고 피드백을 줄 수 있어야 합니까?
• 어떤 매체에서 프로토타입을 시각화해야 합니까? 어떤 기기에서? 어떤 맥락에서?
• 청중에게 프로토타입을 안내할 건가요 아니면 이메일로 링크를 보낼 건가요? 전자의 경우 워크스루가 직접 진행되나요? 화면 공유를 통해 온라인으로 진행되나요? 아니면 자체적으로 진행되나요?

모바일 프로토타입을 만들고 회의에서 이해 관계자 옆에 앉아 아이디어를 설명하려면 소프트웨어(모바일 프로토타입을 허용하는 도구)와 하드웨어(전화기)의 올바른 조합이 필요합니다. 귀하의 사양을 충족). 이와 같이 보다 통제된 환경에서는 전체 흐름을 구체화할 필요가 없으므로 시간과 노력이 절약됩니다.

그러나 동일한 프로토타입을 사용하여 제품의 기능이나 모양을 모르는 전국의 사용자와 원격 비동기 사용성 테스트를 실행할 계획이라면 조합이 완전히 다를 수 있습니다. 이 경우 자체 가이드 경험을 허용하는 더 기능적이고 방탄 프로토타입이 필요할 수 있습니다.

고려 사항:

• 지원되는 장치
• 자체 가이드 클릭률 경험
• 간편한 공유 및 피드백 캡처

위의 질문에 답하면 사용 컨텍스트를 이해하고 프로토타입에 대한 몇 가지 기본 요구 사항을 정의하는 데 도움이 됩니다. 범위, 충실도, 리소스 및 컨텍스트와 같이 위에서 식별한 4가지 그룹 모두에 대한 요구 사항을 포함하도록 목록을 작성합니다. 다음으로 해야 할 일은 고려 중인 도구가 필요한 기능을 제공하는지 확인하는 것입니다.

4. 도구 평가

매달 새로운 응용 프로그램이 나오고 이전 응용 프로그램에서는 해결할 수 없었던 모든 문제를 해결할 수 있습니다. 현실은 당신이 이 업계에서 10년 이상 일하면 그 이야기가 반복되고 이 발표에서 패턴을 보기 시작한다는 것입니다.

팀과 함께 초기 질문 목록을 검토한 후에는 잠재적인 도구를 살펴볼 차례입니다. 3단계의 질문에 답하기만 하면 몇 가지 옵션을 빠르게 제거하고 더 면밀한 분석을 위한 후보 목록을 만들 수 있습니다.

관심 목록의 각 도구에 대해 다음을 평가하십시오.

• 플랫폼 및 채널 . 웹사이트나 앱을 프로토타이핑하고 있습니까? 데스크톱 또는 모바일 환경입니까? 반응형 인터페이스가 필요하며 화면 크기에 따라 어떻게 작동합니까? 일부 도구는 채널 전반에 걸쳐 경험을 제공하는 데 더 많은 유연성을 제공하는 반면 다른 도구는 더 집중할 수 있습니다.
• 충실도 . 도구는 어느 정도의 광택을 허용합니까? 이 도구를 사용하여 빠르고 매끄럽지 않은 와이어프레임 기반 프로토타입을 만들 수 있습니까? 시각적 모형을 가져와 애니메이션으로 만들 수 있습니까?
• 공유 및 협업 . 도구가 필요한 수준의 협업을 제공합니까? 팀에서 사용하는 다른 디자인 및 커뮤니케이션 도구와 원활하게 통합됩니까? 진행 중인 작업을 온라인으로 쉽게 공유할 수 있습니까?
• 학습 곡선 . 팀의 누군가가 도구를 작동하는 방법을 알고 있습니까? 필요한 프로토타입을 만들려면 얼마나 능숙해야 합니까? 도구가 얼마나 직관적입니까? 프로그래밍 지식이나 코딩이 필요한가요?
• 가격 . 소프트웨어에 대한 라이센스를 소유하고 있습니까? 얼마를 지불할 준비가 되었습니까? 도구가 계층형 계획으로 판매되는 경우 프로젝트에 적합한 것은 무엇입니까?

5. 이렇게 하자!

이 시점에서 옵션을 하나 또는 둘로 좁혔을 것입니다. 다음 단계는 팀과 재편성하여 최종 결정을 내리고 작업을 시작하는 것입니다. 일반적으로 최종 결정은 일정과 비용을 기반으로 하지만 여기에 나열된 프로세스를 통해 모든 기준이 고려됩니다.

최고의 프로토타이핑 도구에 대한 팀의 토론을 통해 워크플로, 프로세스, 역할 및 책임과 같이 결과물 자체를 훨씬 뛰어 넘는 주제에 대해 정렬할 수 있습니다.

또한 프로젝트 후에 빠른 사후 운동을 실행 하십시오. 선택한 도구로 효과가 있었던 부분과 그렇지 않은 부분에 대해 팀과 논의하십시오. 다음 프로젝트에서는 올바른 도구를 선택하는 과정에서 몇 단계를 건너뛸 수 있습니다.

UX에 "U"를 다시 넣자

마지막 조언: 최신의 훌륭한 프로토타이핑 도구를 모두 배우는 함정에 빠지지 마십시오. 옵션이 너무 많습니다. 선택한 항목에 대해 신중하게 생각하고 사용 방법을 배우는 데 시간을 투자하는 방법에 대해 현명합니다.

제품이 사용자 요구에 얼마나 근접한가에 따라 평가되는 시대에 프로토타이핑 도구 자체에 너무 많은 시간과 에너지를 소비하면 작업에서 정말 중요한 것이 무엇인지에 대해 주의가 흐트러질 수 있습니다. 결국, 당신이 구축하려는 기능이 합법적이고 연구 입증된 사용자 요구를 해결하지 못한다면 특정 상호 작용을 만들고 다듬는 데 몇 시간을 소비해도 소용이 없을 것입니다.

프로토타이핑 도구의 전체 목록은 UX 디자인의 UX 도구 섹션을 확인하십시오.

이 기사에 도움을 주신 Greg Siegal, Eugene Ahn 및 Caio Braga에게 감사드립니다.