정교한 프로토타입 – Axure를 사용하는 이유

“디자인은 단순히 보이는 것과 느끼는 것이 아닙니다. 디자인은 작동 방식입니다.” – 스티브 잡스

프로토타입은 더 나은 설계 결정을 내리는 데 매우 중요한 것으로 입증되었습니다. 아티팩트로서 프로토타입은 UX 디자인 및 프로토타이핑의 핵심 결과물 중 하나이며 활동으로서 사용자 중심 디자인 프로세스의 핵심입니다. 프로토타입은 가설을 검증하고 디자인을 테스트하는 데 사용되는 기능적인 단일 시각적 제품으로 병합된 이전의 모든 UX 디자인 작업을 결합한 것입니다.

쉽게 들리지만 디자인 도구가 넘쳐나는 세상에서 올바른 프로토타이핑 도구를 선택하는 것은 신중한 고려가 필요한 작은 작업이 아닙니다. 디자이너는 비용, 기능, 다른 디자인 도구와의 통합, 학습 곡선, 협업 기능, 검토 및 사용자 테스트를 위한 재생 플랫폼을 고려해야 합니다.

설상가상으로 최근 많은 신규 이민자들이 등장했습니다. Figma, InVision, UXPin, Framer, Marvel, Principle, Origami와 같은 온라인 전용 도구가 있으며 일부는 기능 확장으로 프로토타이핑이 내장된 Sketch 및 Adobe XD와 같은 기존 데스크톱 소프트웨어입니다. 모두 장단점, 기능 및 통합이 있습니다.

그러나 새로운 것이 항상 더 좋은 것은 아닙니다. 전장에는 여전히 오래된 군마가 있습니다. Axure 도 그 중 하나입니다. 디자이너가 기능이 풍부하고 상세한 프로토타입을 제공하고자 할 때 Axure는 다시 한 번 살펴볼 가치가 있습니다. Axure는 위에서 언급한 새로 제작된 도구가 탄생하기 몇 년 전부터 사용되어 왔으며 많은 디자이너는 Axure를 깊은 기능이 부여된 와이어프레임 및 프로토타이핑 도구의 할아버지라고 생각합니다.

왜 Axure를 사용합니까?

요즘 디자이너들은 대부분 핫스팟 기반 프로토타이핑 도구를 사용하여 화면을 연결하고 몇 가지 화면 전환을 추가할 수 있습니다. 문제는 이 방법이 테스트 중 전체 사용자 경험을 마무리하는 작은 상호 작용을 포함하지 않는다는 것입니다. 대조적으로 Axure는 프로토타입에 생명을 불어넣는 미묘한 세부 사항과 미세한 상호 작용을 쉽게 처리할 수 있습니다.

사람들이 특정 디자인과 상호 작용하는 방식을 더 깊이 탐구하기 위해 디자이너는 조건 논리, 다양한 사용자 입력 및 프로토타입을 보다 사실적으로 보이게 하는 동적 애니메이션을 사용하여 프로토타입을 구축할 수 있습니다. 작동하는 것과 작동하지 않는 것에 대한 귀중한 통찰력을 얻을 수 있는 훌륭한 방법입니다.

너무 많은 통합되지 않은 디자인 응용 프로그램을 건너뛰어야 하는 것도 비효율적인 문제를 나타냅니다. 일반적인 디자인 워크플로에는 디자이너가 Sketch에서 UI를 만들고 InVision 또는 Marvel과 같은 다른 도구에서 프로토타이핑하는 작업이 포함됩니다. 그 후 설계는 Zeplin과 같은 또 다른 도구를 사용하여 개발자에게 전달됩니다.

Axure는 다른 설계 도구를 사용할 필요가 없도록 완전히 통합된 응용 프로그램입니다. 예를 들어, 사용자 흐름, 고객 여정 맵, 페르소나, 스토리보드, 사이트맵, 정보 아키텍처 및 와이어프레임을 만든 후 디자이너는 Axure 내에서 바로 복잡한 프로토타입을 쉽게 계속 진행할 수 있습니다. 디자이너가 프로젝트를 개발자에게 넘길 때 그들은 어떻게 구현해야 하는지 더 잘 이해할 수 있고 제품 ​​관리자와 더 효과적으로 협력하여 범위를 추정하고 기술적 타당성을 평가할 수 있습니다.

잘 설계된 제품과 서비스를 제공하는 데 가장 큰 걸림돌은 사용자에 대한 이해 부족입니다. Jared Spool, UIE(사용자 인터페이스 엔지니어링)

다른 디자인 도구와 마찬가지로 Axure는 빠르게 선택하여 신속하게 사용할 수 있습니다. 프로그래머가 아닌 사람도 이해할 수 있는 동적 상호 작용을 구축하는 내장 위젯은 인상적인 상호 작용을 위해 즉시 사용할 수 있습니다. 더 깊이 들어가 응용 프로그램을 배우기 위해 시간을 투자하려는 디자이너는 복잡한 상호 작용을 통해 복잡하고 사실적인 웹 사이트와 앱을 구축할 수 있습니다.

실제 Axure 프로토타이핑 예제

디자이너는 항상 시간이 부족하고 특정 사용자 흐름이 리뷰에서 어떻게 작동하는지 보여주고 사용자와 함께 초기에 제품 디자인을 테스트해야 합니다. Axure의 기본 기능은 디자이너가 다른 디자인 도구의 이미지를 대화형 프로토타입으로 빠르게 전환할 수 있기 때문에 이러한 시나리오에서 빛을 발할 수 있습니다.

아래의 B2B 제품 예에서는 일련의 화면을 OmniGraffle에서 PNG로 내보냈습니다. 이미지를 자르고, 마스크하고, Axure에서 레이어에 배치했습니다. 다음으로, 드롭다운 메뉴 및 양식 필드와 같은 Axure 위젯 라이브러리에서 핫스팟 및 대화형 구성 요소를 추가하여 풍부하고 기능적인 프로토타입을 만들었습니다. 그런 다음 원격 조정 사용자 테스트를 통해 제품의 기능을 테스트했으며, 이를 통해 사용자 피드백을 기반으로 한 빠른 설계 반복 작업이 이루어졌습니다.

또 다른 예에서 디자인 및 엔지니어링 팀은 복잡한 B2B 제품에 대해 특히 까다로운 두 개의 위젯을 디자인하는 가장 좋은 방법을 찾을 수 있었습니다. 목적은 사용성을 향상시키고 기술적으로 실현 가능한 데이터가 많은 테이블을 위한 고급 필터 와 사용자 지정 열 선택기 를 설계하는 것이었습니다.

이 시나리오에서는 Sketch에서 다양한 상태의 이미지를 내보내고 Axure에서 빠른 상호 작용을 추가하고 애니메이션했습니다. 버튼 및 체크박스와 같은 UI 구성 요소가 추가되어 상호 작용과 그 효과를 보여줍니다. 팀은 검토 및 테스트를 거친 여러 번의 반복 작업을 거쳤습니다. 다른 프로토타이핑 도구를 사용하면 이 작업이 훨씬 더 오래 걸릴 수 있습니다.

Axure의 기능 및 이점

저는 최근 InVision으로 만든 기본적인 스크린 투 스크린 프로토타입만 사용하고 사용자 테스트를 많이 해본 적이 없는 회사에서 일했습니다. 다가오는 주요 제품 기능을 테스트하기 위해 상세한 제품 프로토타입을 만드는 임무를 받았습니다. 이 새로운 기능을 많이 사용하고 있었고 이해 관계자는 이 기능을 제대로 사용하기를 원했습니다.

Axure에서 다양한 상태와 다양한 시나리오에서 제품이 어떻게 작동하는지 보여주는 수많은 마이크로 인터랙션을 사용하여 상세한 프로토타입을 만드는 데 이틀도 채 걸리지 않았습니다. 예상치 못한 이점으로, 설계 팀이 해결할 수 있었던 많은 엣지 케이스가 나타났습니다.

테스트할 때 사용자가 디자인에 어려움을 겪는 부분과 그 이유 를 알 수 있었는데, 이는 정적 화면으로 제작된 덜 상세한 프로토타입으로는 불가능했을 것입니다. 그 결과 발견한 문제를 신속하게 해결할 수 있었습니다.

또한 프로토타입을 개발자에게 전달하여 반응형 디자인 중단점이 어디에 있는지, 포커스 또는 오류 상태가 어떻게 표시되어야 하는지, 예측 검색이 어떻게 작동해야 하는지를 보여주었습니다.

프론트엔드 개발자들이 프로토타입을 손에 넣을 수 있게 되자 그들의 삶도 훨씬 쉬워졌습니다. 백엔드 개발자조차도 최종 제품이 어떻게 작동해야 하는지 알 수 있었기 때문에 프로토타입을 높이 평가했습니다.

새로운 제품 기능의 이러한 종류의 신속한 프로토타이핑, 테스트 및 구현은 이전에 참여했던 다른 기능 개발보다 훨씬 빨랐고 QA 단계에서 표면화된 문제도 적었습니다.

모든 것이 끝나고 완료되었을 때 팀의 모든 사람들은 상세한 프로토타입이 얼마나 도움이 되었는지 언급하고 이런 종류의 프로토타이핑 프로세스를 더 자주 수행하도록 요청했습니다. 세부적인 프로토타입을 만들고, 검토하고, 테스트하면 큰 차이를 만들 수 있습니다. 전체 팀은 사용자에게 의미 있는 필수적이고 포괄적인 상호 작용을 볼 수 있었습니다.

Axure를 사용하면 가장 복잡한 사용 사례까지 모든 것을 테스트할 수 있습니다. 우리의 프로토타입은 실제처럼 보이고 작동합니다. Julie, 사용자 경험 연구소

Axure의 특징 및 강점

디자이너는 Axure에서 복잡하고 동적이고 기능이 풍부한 프로토타입을 만들기 위해 코딩하는 방법을 알 필요가 없습니다. 정교하고 복잡한 상호 작용은 상호 작용 패널을 사용하여 "if this, then that"이라는 간단한 설명을 사용하여 설정할 수 있습니다. 다음은 몇 가지 추가 Axure 기능 목록입니다.

기본 및 고급 프로토타이핑

• 빠른 와이어프레이밍 및 프로토타이핑을 위한 내장 위젯
• 드래그 앤 드롭 환경
• 코딩 없이 브라우저 기반 프로토타입 구축
• Sketch 자산에서 상호 작용 구축
• 모바일 에뮬레이션 및 모바일 장치 보기
• 사용자 입력이 가능한 작업 양식 필드
• 조건부 논리, 변수 및 표현식 추가
• 동적 콘텐츠 및 적응형 보기 작업
• 애니메이션 효과 추가
• 오프라인 프로토타입 보기
• 사용자 정의 위젯 라이브러리
• Adobe XD 통합 및 플러그인
• 브라우저에서 볼 수 있는 Axure Cloud의 프로토타입 공유

공동 작성 및 공동 작업

• Axure RP와 Axure Cloud를 사용하면 여러 사람이 같은 프로젝트에서 동시에 작업할 수 있습니다.

공유 자산

• 대화형 구성 요소의 라이브러리를 생성 및 공유하고 Sketch에서 자산을 가져옵니다.

개발자 핸드오프

• 자동 수정 지시와 CSS 및 이미지 내보내기를 위해 RP 및 Sketch에서 Axure Cloud로 디자인을 게시합니다.

문서 및 사양

• 프로세스 흐름, 제품 분해 및 시각적 사양을 만듭니다.

Axure 프로토타이핑 미니 사례 연구

단순한 화면 대 화면 프로토타입을 뛰어 넘는 Axure의 기능을 보여주기 위해 기존 전자 상거래 사이트인 Zalando에 대해 미묘한 상호 작용이 있는 몇 개의 화면을 만들었습니다. 완료되면 이 모든 프로토타입 시퀀스를 HTML로 내보내고 Axure Cloud를 사용하여 어디서나 브라우저에서 누구나 검토할 수 있습니다.

먼저 메가 메뉴, 검색, 제품 가로 스크롤, 즐겨찾기 및 뉴스레터 가입을 보여주는 몇 가지 사이트 상호 작용을 만들었습니다.

제품 목록 페이지에서 기본 제품 이미지 아래의 썸네일에 호버 효과를 만들어 제품을 다양한 색상으로 표시했습니다(호버 시 이미지 교체). 또한 제품을 다시 즐겨찾기에 추가하고 가격대를 설정하여 제품 목록 페이지를 필터링하는 드롭다운 위젯을 추가했습니다.

다음으로 위의 화면과 같은 맥락에서 상품 상세 페이지의 썸네일 이미지 위에 마우스를 올려 놓을 때 다른 상품 이미지를 바꾸는 것을 보여주고 싶었습니다. 또한 쇼핑객이 제품 설명, 크기 및 착용감, 배송 및 리뷰에 대한 정보를 볼 수 있도록 또 다른 호버 기능을 추가했습니다. 마지막으로 사이즈 선택기를 통합하고 제품을 장바구니에 담았습니다.

다음 사용자 흐름을 설명하면서 미묘한 슬라이드, 페이드 및 요소 교체 애니메이션을 사용하여 장바구니 관리(예: 장바구니에서 제품 제거)가 어떻게 작동하는지 보여주고 싶었습니다. 이러한 미묘한 마이크로 상호 작용을 생성하는 데 코드가 사용되지 않았습니다.

마지막으로 사람들이 잘못된 로그인 정보를 입력하고 어떤 오류 메시지가 표시되는지 로그인 화면에서 미묘한 UI 변형을 보여주고 싶었습니다.

이러한 미묘한 상호 작용과 UI 변환은 제품 기능을 테스트할 때 유용합니다. 디자이너와 사용자 연구원이 더 자세한 사용자 테스트를 수행하고 전자 상거래 사이트에 대한 사람들의 반응에 대한 더 깊은 통찰력을 얻을 수 있기 때문입니다. 다른 프로토타이핑 도구로는 불가능하거나 매우 어려운 것으로 판명될 수 있는 구체적이고 정교한 모양과 느낌을 보여줍니다.

요약

최신의 최고의 와이어프레이밍 및 프로토타이핑 도구를 찾기 위해 디자이너는 시간의 테스트를 견뎌낸 유능한 확립된 도구를 간과하는 경우가 있습니다.

디자이너는 Axure에게 또 다른 모습을 보여주어야 합니다. 깊이, 기능 세트 및 유연성으로 인해 Axure는 다른 솔루션에 비해 유능하고 강력한 도구이며 회사는 설계 도구로서의 관련성을 유지하기 위해 계속 업데이트합니다.

Axure 무료 평가판을 다운로드할 수 있습니다. 디자이너는 Sketch에서 UI를 내보내고 Axure로 가져오고 사실적인 프로토타입을 만들 수 있습니다. 또한 모든 유형의 프로젝트에 사용할 수 있는 많은 자습서(YouTube 및 Axure 사이트)가 있으며 바로 사용할 수 있는 Axure 위젯도 널리 다운로드할 수 있습니다(무료 및 유료).

• • •

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

• 완벽한 UX 디자인 프로세스 – 프로토타입 디자인 가이드
• 최고의 디자이너가 사용하는 10가지 UX 결과물
• UX 신화 – 프로토타이핑, 사용자 테스트 및 UX 결과물
• Framer 튜토리얼: 멋진 인터랙티브 프로토타입을 만드는 방법
• 이 최고의 UX 도구로 기술을 마스터하세요