모바일 UI/UX디자인 [디지털 프로토타이핑]

디지털 프로토타이핑이란?

실제 스마트폰에서 앱을 사용하는 것처럼, 스마트폰 앱 혹은 관련 서비스를 통해 스크린에서 터치 제스처, 화면의 이동, 터치에 따른 반응 등의 UI조작 및 인터랙션등의 구성, 내용, 전개 등을 확인하기 위함이다.

스마트폰 앱 프로토타이핑 시행의 장점

· 테스트를 받는 사람은 앱 프로그램의 전개, 화면 및 터치 제스처에 대한 인터랙션, 사용 상황의 재연등을 테스트 해볼 수 있다.

스마트폰 앱에 있어 프로토타이핑 필요성

· 비용, 시간 문제 등 프로토타이핑 제작을 위한 프로그래머 투입 불가

· 출시 전, 테스트를 통해 앱의 기능, 콘텐츠 부분의 품질 향상을 할 수 있는 기회

· 개발자, 기획자, 디자이너 관점이 아닌, 사용자의 관점을 테스트할 수 있는 기회

 

스마트폰 앱 프로토타이핑의 종류 

페이퍼 프로토타입, 프로토타이핑 (Prototype On Paper)

· 페이퍼 프로토타입은 종이에 스케치를 하여 레이아웃, 콘텐츠, 아이콘 등을 그리는 방법이다. 

· 미팅 중 급하게 확인해야할 경우

· UI스케치 후 인터랙션을 확인해보고자 할 경우

· 많은 시간을 들이지 않고자 할 경우

· 장점: 신속성 

· 단점: 페이지 많아지면 화면 구성 어렵다

페이퍼+디지털 프로토타이핑(App Cooker아이패드앱 + App Taster아이폰, 아이패드 앱)

· 스마트폰 앱을 사용하여, 스케치를 사진으로 찍고 터치 영역 지정 후 네비게이션과 트랜지션 

· 미팅 중 급하게 확인해야 할 경우

· 아이폰/아이패드 앱 디자인하고자 할 경우

· 주요 페이지들만 디자인해서 재빠르게 테스트 가능

장점: 아이폰/아이패드 앱 프로토타이핑 툴 중 최고 
단점: 페이지가 많아지면 화면 구성하기 어렵다.

· 아이패드가 있어야한다. (다른팀원들도)

· 안드로이드 앱 불가 

디지털 프로토타이핑

· 제공되는 라이브러리를 통해 처음부터 웹, 스마트폰 앱, 데스크톱 프로그래을 사용하여 디지털 프로토타이핑을 하는 경우

프로그램: inVision, FluidUI, Axure, Balsamiiq, FramerJS
· 데스크톱 작업을 통해 여러 페이지 디자인 진행
· 대다수 운영체제 대상으로 포르토타이핑 가능
· 모바일 인터랙션 지원(화면단위)

장점: 
다수 페이지 작업 용이
기본 제공 라이브러리 존재
모바일 테스트 가능(링크, qr코드, 별도 테스트 앱 존재시)

직관적 사용성이 뛰어나다.

단점: 

데스크탑이므로 미팅시 사용하기 어렵다.

화면 단위 인터랙션이 아쉽다.

트라이얼 버전에 제약이 많다.

UI사용자 테스트 필요

· 기획/디자인을 제작의 의도대로 사용하는가에 대해 확인하고 UI사용자 테스트를 진행한다.

· THINK ALOUD방법 : 사용자가 구체적인 행동을 하는 이유를 말로 표현하게 하여 행동의 이유/근거에 대해 알 수 있는 방법

· 관찰방법 : 실제 사용자의 행동을 관찰하여 인사이트, 아이디어를 얻는 방법이다. 이를 통해 사용자 중심의 구성이 가능하다.

· 사용자 테스트 구성 : 먼저 스마트폰 앱에 대해 테스트하고자 하는 문제를 명확히 한다.