안녕하세요, 다음커뮤니케이션 UX Lab입니다.


2012년 8월, Daum 지도 APP 서비스가 확 달라진 모습으로 업데이트가 되었습니다. 짝짝짝;; ^^

>> 지도 APP v3.0 소개 URL http://mobile.daum.net/web/mobileApp.daum?serviceId=map


이번 개편에서 사용성 측면의 완성도를 높이기 위한 한 과정으로 '페이퍼 프로토타이핑'을 진행하게 되었었는데요~

요 포스트를 통해 그 과정을 한번 소개해 드리고자 합니다. ^^

 


페이퍼 프로토타이핑을 한마디로 정의한다면,

해당 서비스를 간단하게 만들어 실제 구현되는것 처럼 테스트 하는 방법을 말합니다.

( 출처 : 스토리로 이해하는 UX 디자인 프로세스 - 다음커뮤니케이션UX랩& 마켓인사이트팀 저, 로드북 )

 

페이퍼 프로토타이핑이 종이 화면을 활용해 빠르게 테스트하는 것은 동일 하지만,

테스트를 하는 시기나 목적, 상황에 따라 조금씩 도구나 진행방식이 다를 수 있습니다. ^^

저희가 진행했었던 페이퍼 프로토타이핑은 어떠했었는제, 자세히 한번 살펴볼까요~?

 

- 진행시기 및 목적

이번 지도 App 3.0의 페이퍼 프로타이핑은 APP 개발을 완료하기전

UI 시나리오 문서를 토대로 APP의 동선 및 사용성 그리고 전반적인 개편된 서비스의 사용자 반응을

체크 해보기 위한 목적으로 진행되었습니다.


- 테스트 참여 대상

Daum 지도를 사용하고 있는 일반 사용자 12분이 참가해 주셨습니다.

(남,여 비율 2:1 / 자차,도보 비율 1:1)


- 준비도구 (종이화면+포스트잇)

페이퍼 프로토타이핑은 손으로 직접 그린 화면이나 실제 디자인된 인쇄된 화면을 사용하게 되는데

이미 주요 디자인이 나온 상태였고 APP 개발이 이루어지고 있는 상황에서 UI에 대한 검증도 함께 진행되었으므로

이번 테스트는 디자인이 입혀진 인쇄된 종이 화면으로 진행하게 되었습니다. 지도위에 레이어가 올라가는 부분이나 팝업창은

OHP 필름을 활용해 실제 지도위에 오브젝트들이 올라가는 것과 같이 표현하였습니다.  

 Tip 보통의 페이퍼프로토타이핑 경우 테스트 중에 화면을 수정해가야 하기 때문에 손으로 그린 화면이 주로 활용됩니다.

 

 

▷지도 APP 3.0 페이퍼 프로토타이핑 도구

 

실제 사용자에게 페이퍼 프로토타이핑을 진행했을 시에는 검색, 길찾기, 버스, 지하철 등등

주요 Task별로 화면을 구분해 놓음으로서 쉽게 화면을 찾을수 있도록 하였습니다.

그리고 사용자가 기대했던 화면이나, 개선되었으면 하는 화면을 직접 그릴수 있도록

빈 종이와 포스트잇 등도 준비해 두었습니다.

 

- 테스트 장소 및 테스트 진행자

테스트는 녹화 장비가 갖춰진 실험실에서 진행되었으며

종이 화면을 넘겨주는 컴퓨터 역활의 진행자 1명, 테스트를 진행을 맞은 진행자 1명,

테스트를 관찰한 내용을 적어두는 관찰자 1명 하여 총3명이 함께 테스트를 진행하였습니다.

▷지도 APP 3.0 페이퍼 프로토타이핑 진행 테이블, 진행자

 

- 테스트 진행

테스트에서는 유저가 주요 테스크인 장소검색, 길찾기, 실시간버스, 지하철 노선 등을 사용해가는 동선을 관찰하고

그 안에서의 버튼들이 인지가 잘 되는지, 레이블은 이해가 잘 되는지,

사용자가 사용 동선을 예상할 수 있을 만큼 동선이 자연스러운지를 여부 등을 질문 하였습니다.

 

사용자가 인지가 잘 안되는 컴퍼넌트나 화면의 경우에는

직접 화면위에 그림을 그리거나, 포스트잇을 활용하여 바로 대체할 수 있는 안을 보여주어 개선안을 바로 도출하였습니다.

예시) 

▷UT 동영상 장소검색 부분 :

하단의 버튼 인지의 어려움이 있어, 포스트잇을 활용하여 아이콘을 Text 로 바꾸어 보여주고 아이콘과 Text 둘의 선호를 질문함.

가반수가 넘는 사용자가 Text가 이해하기 쉽다고 답하여, 하단의 버튼을 아이콘에서 텍스트로 변경함.

 Tip 테스트 중간 중간 화면을 수정하여 테스트 종료 후에는 개선된 화면이 도출 될수 있도록 해야 합니다.

 

또한 2개의 화면을 보여주고 선호하는 화면 1개를 선택하게 하여 2개의 시안 중 1개을 선택하는 기준이 될 수 있게 하였습니다.

예시) 

▷UT 동영상 길찾기 부분 :

길찾기 초기 화면에 대해서 2개안을 보여주고 선호하는 화면을 선택하게 하였음.

가반수가 넘는 사용자가 1안을 선택하여 길찾기 초기화면은 1안으로 결정됨.

 

그리고 마지막으로는 개편된 전반적인 느낌이나 좀더 개선했으면 하는 부분에 대해서 질문하였습니다.

 

- 테스트 결과

테스트에서 인터뷰한 내용, 관찰된 내용을 토대로 일주일 이내로 바로 리포트를 작성하여 공유하였습니다.

리포트는 각 이슈별 구분하여, 관찰 내용, 인사이트 및 개선안으로 구성되어 있었으며,

리포트는 지도 APP 관련 실무자 분들께 공유하고 중요도, 긴급도가 높은 이슈는 바로 디자인, 개발에 반영되었습니다.

 

 

소개는 여기 까지입니다~ (급 마무리....)

저희가 진행했었던 페이퍼 프로토타이핑에서는 무엇보다, 현재 지도 APP를 사용하는 사용자들이

기존 버젼에서 처럼 개편 지도 APP을 사용하는데 무리가 없는지 여부를 직접 눈으로 확인해 볼수 있었으며

조금 고민이 되었던 UI 설계는 사용자의 선호나 이해력을 보고 판단할 수 있었습니다.

또한 저희가 소소하게 놓쳤던 부분들도 사용자 분들을 통해 찾아내고 메꿀수 있어

UI 설계의 완성도를 높을수 있었던 것 같습니다.

 

여러분~ 페이퍼 프로토타이핑 어렵지 않아요~~~ ^^

저희는 디자인을 입힌 화면으로 진행하였지만 손으로 직접 주요한 화면들을 그려서 더 빠르고 십게 진행할수도 있답니다~

설계된 UI의 빠~~른 검증이 필요하다면 페이퍼 프로토타이핑!! 정말 강추 드립니다~~ ^^

 

신고
Posted by Daum UX Lab


티스토리 툴바