페이퍼 프로토타입(.docx)

(1)

페이퍼 프로토타입 보고서 [3456 의 KOBUS]

2011 년 4 월 18 일 박정현 박한주 차경혜 최은희

목 차

1. 프로젝트 개요

1-1. 목적

1-2. 문제점 및 해결방안

2. 프로토타입

2-1. KOBUS 2-2. i Kobus

3. 사용자 테스트

3-1. 참가자 3-2. 테스트 환경 3-3. 작업

(2)

3-4. 테스트 진행 과정 3-5. 평가 항목

3-6. 테스트 결과

4. 토론

4-1. 잘된 점

4-2. 수정 보완해야 할 점

[부록]

1) 디자인 반복 과정에 대한 스케치 화면 2) 작업 지시서

(3)

1. 프로젝트 개요

1-1. 목적

‘KOBUS’와 ‘i Kobus’는 버스 승차권을 예약하기 위한 서비스이다. 우리 ‘3456’ 팀은 문제점 분석을 위해 예매 과정을 실행해본 결과 사용자에게 실수를 유발하게 하는 인터페이스의 문제 등 사용자에게 불편함을 줄 수 있는 다양한 UI적 문제점들을 발견하였다. 따라서 우리는 예매과정에서 사용자에게 불편함을 주는 문제 점들을 언급하고 그 해결방안을 제시할 것이다.

1-2. 문제점 및 해결방안 1) 문제점

 조회 및 예매 과정의 문제

도착지의 우선 선택 불가능/출발지 및 도착지 선택의 번거로움/배차 정보가 없는 날짜의 선택가능/왕 복 선택의 불가능/결제 과정 중도 취소 시 처음부터 다시 예매 옵션을 입력해야 함

 예매 변경 과정의 문제 날짜 변경이 되지 않음

 모바일 예매 및 연동의 문제

모바일 예매 불가 문제 및 예매 내역이 웹과 연동이 안 되는 문제 2) 해결방안

 조회 및 예매 과정의 해결방안

도착지도 우선 선택이 가능하도록 선택 창을 활성화/출발지·도착지 선택란에 지역 명 검색기와 지역 명 분류표를 제공/출발 일시란에 달력 창, 예약 가능한 날짜를 표시하여 제공/예매를 처음 할 때에 왕 복 승차권 예매 기능 추가

 예매 변경 과정의 해결방안 날짜 변경이 가능하도록 개선

 모바일 예매 및 연동의 해결방안

모바일에서 예매한 승차권도 웹에서 확인 및 변경, 취소가 가능하도록 함

(4)

2. 프로토타입

2-1. KOBUS

1) 승차권 예매 클릭

- 예매 창과 예매 이용안내 화면이 뜨며 왕복 라디오 버튼을 클릭하면 출발지, 도착지, 출발 일시가 추가적 으로 생겨서 왕복 경로에 대한 승차권 조회 가능

- 출발지, 도착지, 출발일시 선택 시 스크롤바를 이용해 선택할 수 있는 목록 제공(출발일은 달력 아이콘을 클릭한 선택도 가능

- 버스 등급(일반, 우등, 심야) 및 인원(어른, 어린이) 선택 시 스크롤 바를 이용해 선택할 수 있는 목록 제 공

- 승차권 예매 버튼을 누르면 승차권 취소 수수료, 부도 위약금 및 카드 이용 제한 시간에 대한 팝업창 나옴 2) 원하는 시간대의 승차권 선택

- 조건에 맞는 승차권 리스트 시간 순으로 나오며(왕복 승차권 각각 표시) 그 아래에는 버스 등급에 대한 요금 및 총 소요 시간과 거리가 표시

- 각각 출발 시각에 맞는 버스를 선택 후 확인 버튼을 누르면 예매 일시에 대한 정보 보여주며 다시 한번 확 인하게 함.

3) 좌석 선택

- 왕복 버스 각각의 좌석 선택 화면을 보여주고 체크 박스를 통해 원하는 좌석 선택 - 하단 화면에는 결제 수단(카드예매/계좌이체)을 탭으로 제공

- 카드 종류, 카드 번호, 유효기간, 주민번호 뒷자리의 정보 입력 후 총 결제 요금을 확인하고 승차권 예매 버튼 클릭

4) 예매 완료 확인

- 예매 완료 확인 팝업 창이 뜨고 확인 버튼을 누르면 왕복 승차권 각각의 정보가 나타나고 이것을 확인 후 확인 버튼을 누르면 왕복 승차권 예매 완료

5) 예매 번호 입력

- 신용카드 탭에서 예매 시 사용한 신용카드 번호를 입력 하여 다음 단계로 넘어감.

6) 예매 조회, 예매 변경, 예매 취소 옵션을 선택 할 수 있는 화면

- 기본적으로 이 화면에서는 예매된 내역의 조회가 보여지고 예매 내역을 선택 할 수 있음 7) 예매 변경 탭 메뉴

- 조회에서 선택된 예매 내역이 화면에 출발지, 도착지, 출발일, 출발시각, 버스 등급, 버스 회사, 인원, 요 금 과 같은 정보가 출력, 그 아래에 출발 일시, 인원, 등급을 변경 할 수 있는 메뉴가 나옴

8) 각 변경을 원하는 옵션을 선택

- 출발 시간에 맞는 버스 정보 리스트 보여지고 이중 원 하는 버스 정보를 선택

(5)

9) 버스 선택 후 선택 가능한 좌석 정보 출력

10) 사용자가 입력한 정보에 맞추어 변경했는지 확인 하는 창이 보여짐 11) 변경 된 내용 화면 출력 및 변경 종료 버튼과 내역 확인 버튼이 보여짐 12) 변경 확인 버튼 이용

- 다시 예매 조회 화면으로 돌아가 다시 한번 변경된 예매를 조회

(6)

2-2. i Kobus

1) 메인화면에는 승차권 조회를 위해 옵션들을 선택할 때 나타나는 화면

- 편도와 왕복을 선택할 수 있으며 사용자들이 왕복 보다는 편도 승차권을 예매하는 빈도수가 더 높기 때문 에 디폴트로 편도가 선택되어 있음

- 출발지와 도착지를 선택하는 부분에서는 지역명 직접 검색 또는 한글 자음으로 구분되어 있는 스크롤을 이용해 검색하여 선택. 또, 음성검색도 지원하고 있기 때문에 사용자들이 더욱 편리한 인터랙션을 이용 하여 지역명을 검색하고 선택 가능

- 출발 일시, 버스등급, 인원 선택 시에는 스크롤로 움직일 수 있는 창이 제공 2) 조회결과를 확인하고 결제를 하는 과정의 화면

- 조회결과 화면에는 현재 노선을 즐겨찾기에 추가할 수 있는 버튼과 배차정보가 뜸, ‘즐겨찾기에 추가’ 버 튼을 누르면 ‘조회내역-즐겨찾기’에서 내역을 확인 가능

- 배차정보를 확인하고 출발 시각을 선택하면 좌석을 선택할 수 있는 화면으로 전환

- 좌석 선택 후 ‘다음 단계로 이동’을 누르면 카드번호와 카드유효기간, 주민등록번호를 입력하는 화면으로 전환

- 정보를 키패드로 입력한 후 ‘예약하기’ 버튼을 누르면 예약하고자 하는 내용을 한 번 더 확인하는 화면으 로 전환. 또 앞서 조회 결과 화면에서 즐겨찾기에 추가를 못 한 경우 본 화면에서 추가를 수행할 수 있으 며, 확인 버튼을 누르면 예약이 완료됨

- 예약이 완료되면 예약 내용을 한 번 더 확인 하겠냐는 알림창이 뜨는데, ‘조회’를 누르면 예약 상세 정보 를 볼 수 있는 페이지로 전환, ‘조회안함’을 누르면 메인화면으로 이동함

3) 즐겨찾기 화면

- 조회 결과 화면에서 즐겨찾기에 추가 버튼을 누르면 그림과 같이 ‘즐겨찾기 추가 완료’라는 알림창이 나 타남

- 메인화면 하단에 위치한 ‘조회내역’을 누르면 ‘최근 조회 내역’과 ‘즐겨찾기 내역’확인가능

- ‘최근 조회 내역’이나 ‘즐겨찾기 내역’에 있는 노선을 누르면 ‘내일 같은 시간으로 조회’, ‘현재 시간으로 조 회’를 할 수 있음

4) 예매 내역을 변경하는 화면

- 메인화면 하단에 위치한 ‘예매조회’를 누르면 사용자가 예약한 목록을 볼 수 있으며, 예약 내역을 누르면 예약 상세 내역을 볼 수 있음. 예약 상세 내역 화면에는 ‘예약 변경’과 ‘예약 취소’ 버튼이 있음

- ‘예약 변경’ 버튼을 입력하면 승차권 조회를 했던 메인화면과 같은 구성의 화면으로 전환이 되는데, 이 때 편도/왕복, 출발지와 목적지는 바꿀 수 없도록 고정되어 있고, 출발일시와 버스 등급, 인원은 변경할 수 있도록 활성화 되어 있음

- 변경할 내용을 모두 입력한 후에는 예약했던 순서와 같은 단계를 거쳐 변경을 완료

(7)

3. 사용자 테스트

3-1. 참가자

 박민희 : 대학생, 25세, 여자, KOBUS 및 i Kobus 모두 사용

 전승미 : 학원강사, 27세, 여자, KOBUS 사용

 최희수 : 취업 조교, 24세, 여자, i Kobus 사용 3-2. 테스트 환경

 박민희 : 멀티미디어과학 전공 실습 사무실에서 진행. 학생들이 방문 빈도 높음. 중간 중간 프린터 소음이 있었지만 심각하게 소란스럽지는 않았음

 전승미 : 카페에서 진행되었으며 약간의 소음이 있기는 했지만 참가자가 안정되어 있는 편안한 분위 기 속에서 진행되었음

 최희수 : 멀티미디어과학 전공 학과 사무실에서 진행. 방문객이 없어 비교적 조용한 편 3-3. 작업

1) KOBUS

 예매 : 왕복 승차권을 예매하는 작업을 지시한다. 승차권 조회에서부터 승차권 출발시각선택, 좌석 선택, 결제까지 작업을 수행하도록 한다.

 예매 변경 : 참가자에게 기존에 예매된 버스 승차권을 조회하고 그 예매 내역을 다른 날짜와 시간으 로 변경하도록 작업을 부여한다.

2) i Kobus

 예매 : 편도 승차권을 예매하는 작업을 지시한다. 승차권 조회, 출발시각선택, 좌석선택, 결제의 작 업을 수행하도록 한다.

 즐겨찾기 : 사용자가 조회한 내역을 즐겨찾기에 추가한다.

 예매 변경 : 기존에 예매하였던 승차권을 i kobus 에서 날짜 및 인원 변경을 수행하도록 한다.

3-4. 테스트 진행 과정

1) 테스트 과정 및 프로젝트 설명

테스트 역할은 손님맞이에 박정현, 조력자는 최은희, 컴퓨터 역할은 박한주, 관찰자는 차경혜로 나눠서 각각의 테스터들을 대상으로 KOBUS 및 i Kobus의 테스트를 진행하였다. 또한 테스트를 시작하기 전 테스터들에게 우리 조의 프로젝트는 KOBUS 및 i Kobus를 통해 승차권 조회, 예매 및 변경, 취소를 하 는 사용자들에게 인터페이스 개선을 통해 좀 더 편리함을 제공하는 것이 목적임을 간략하게 설명하였다.

(8)

2) 프로토타입 정리

 KOBUS

예

매 단계 왕복 선택 후 승차권 옵션 정보 선택 → 승차권 조회하기 → 출발 시각 선택하기

→ 좌석 선택하기 → 결제하기 상세

내용

- 왕복 선택 시에는 출발지와 도착지 및 출발 일시 입력 받는 창을 추가적으로 제공하여 왕복 경 로에 대한 승차권을 한번에 제공하도록 함

- 승차권 조회 후 가고 오는 버스 각각의 출발 시각을 보여주고 각각 한번에 선택하도록 함 - 좌석 선택 시 가고 오는 버스의 좌석 화면을 각각 제공하고 각각 한번에 선택하도록 함 - 결제 시 왕복 승차권 전체에 대한 결제를 진행하고 완료 후 해당 내역 결과를 보여줌 변

경 단계 카드번호 입력 → 예매된 승차권 조회 → 승차권 날짜 및 시간 변경 → 변경 확인 상세

내용 - 예매 승차권 조회/변경/취소 메뉴 선택 후 예매 시 사용한 신용카드 번호 입력을 통해 예매 내

역 조회하도록 함

- 승차권 조회 화면에서 원하는 내역을 선택 후 예매 변경 탭 메뉴 선택을 이용하여 변경 옵션을 확인하도록 함

- 각각의 변경 옵션을 입력 후 진행

- 선택 가능한 버스 리스트와 좌석을 선택 할 수 있는 화면 보여 주고 진행하고 마지막으로 변경 된 내역 확인

 i Kobus 예

매 단계 편도 선택 후 승차권 옵션 정보 선택 → 출발 시간 및 좌석 선택 → 승차권 조회하기 → 결제하기 상세

내용 - 편도로 선택되어 있는 것을 확인한 후 출발지와 도착지, 출발 일시, 버스 등급, 인원 등의 각

옵션들을 입력하고 조회

- 조회 결과 화면에서 출발시각 선택

- 버스의 좌석을 선택할 수 있는 화면을 제공

- 결제를 진행할 수 있는 카드정보를 입력하는 화면을 제공

- 예매 내용을 확인할 수 있도록 사용자에게 제공하고, 예매를 완료 즐

겨 찾 기

단계 즐겨찾기에 추가 → 즐겨찾기 내용 조회 상세

내용

- 조회 결과 화면과 예매 내용 확인 화면에서 ‘즐겨찾기에 추가’ 버튼을 제공

변

경 단계 예매 내역 조회 → 승차권 날짜 및 인원 변경 상세

내용 - 예매 내역 조회 후 예약 변경 버튼을 누르면 메인화면과 같은 구성의 화면을 제공

- 출발일시와 인원을 변경한 후 출발 시각 선택, 버스 좌석 선택 화면을 차례로 제공 - 인원 변경에서 발생되는 추가 비용에 대한 결제 진행

- 변경 내용을 확인하고 예약 변경을 완료

3) 작업지시서 설명 : 각 네 가지 테스트의 세부 항목들에 대해 기술한 작업지시서를 작성하여 참가자에게 제공 및 설명

4) 작업 수행

팀원 4명 모두 각각 태스크에 해당하는 페이퍼 프로토타입을 만들고, 팀원 중 1명에게 임의 테스트를 수행하였다. 테스트를 통해서 진행 순서와 적시에 나와야 하는 화면의 순서 등을 익히고 오류를 줄이기 위해 정리 및 작업을 보완, 수정하였다. 팀원 중 박정현이 테스터를 맞이 하고 최은희가 이 테스터에 대해 서 설명을 하고 작업 방법을 알려 주었다. 팀원 박한주는 컴퓨터의 역할 이 되어서 테스터의 행동에 대한 반응 및 결과를 시뮬레이션 해주었다. 그리고 차경혜는 진행에 있어서 일어나는 모든 상황 및 테스터에 대한 기록을 하였다.

5) 의견 수렴

작업 진행 과정 및 작업 종료 후 전체적으로 작업을 수행함에 있어서 불편했던 점은 없었는지, 개선할 사 항은 어떤 것이 있을지를 인터뷰하여 의견을 수렴하였다.

5-1). KOBUS

 예매

- 편도 및 왕복 버튼이 체크 박스여서 중복이 된다고 생각할 수도 있어 혼란스럽다는 의견 - 왕복 승차권 조회 및 예매 시 가고 오는 승차권의 명확한 표시가 필요하다는 의견

 예매 조회/변경/취소

- 변경 옵션에 대한 메뉴가 너무 많아서 혼란스럽다는 반응

- 변경 시 버스 등급 메뉴가 없어서 모든 등급의 메뉴가 조회 되어 원하는 등급의 버스 선택 시 방해 됨 5-2). i Kobus

(9)

 예매

- 예매 화면에서 편도/왕복 선택 시 체크박스 버튼을 라디오 버튼으로 제공하는 것이 좋을 거란 의견

 즐겨찾기

- 즐겨 찾기의 경우 조회결과 화면에서 추가를 하지 않으면 그 뒤로는 추가할 수 있는 곳이 없었다는 의견

- 예약 내용 확인 화면에서 ‘예약 확인’ 버튼을 ‘확인’ 버튼으로 바꿔야 사용자가 혼란스럽지 않을 것 같다는 의견

- 예매 변경을 할 때, 날짜/시간/인원으로 버튼은 통합이 되어도 상관 없을 것 같다는 의견 - 기존에 예매했던 날짜/시간/인원을 화면상에 표시 해줘야 할 것 같다는 의견

- 의견과 예약 변경 화면 자체를 메인 화면인 조회화면으로 사용하면 좋을 것 같다는 의견

3-5. 평가 항목

 공통 항목

- 작업 수행 시 정확한 버튼 및 메뉴 사용 여부 - 작업 수행 시 소요 시간 측정

- 각 태스크 수행 시 터치 및 클릭 횟수

 KOBUS

- 왕복 버튼 인식 여부

 i Kobus

- 음성 검색 버튼 인식 여부 3-6. 테스트 결과

1) KOBUS

참가자 전체 수행 평가 적절한 버튼 및

메뉴 사용 소요

시간 왕복 버튼

인식 클릭/터치 횟수 박민희 무리 없이 작업을 수행 하였지만

메뉴를 자세히 보지 않는 듯 함 각 작업에 대한 적절한 메뉴를

사용함 6분30

초 x 60

전승미 무리 없이 작업 수행 각 작업에 대한 적절한 메뉴를

사용함 7분10

초 O 64

최희수 작업 수행 시 불편한 점을 바로 지적 작업 수행에 필요하지 않은 메

뉴 및 버튼도 사용함 7분50

초 O 70

2) i Kobus

참가자 전체 수행 평가 적절한 버튼 및

메뉴 사용 소요

시간 음성검색 버

튼 인식 클릭/터치 횟수 박민희 작업 수행에 필요한 과정을 쉽게 이

해하고 빠르게 진행 직관적으로 필요한 메뉴와 버

튼을 적절히 사용함 5분 49

초 O 46회

전승미 작업 수행은 수월하게 하였으며 그 과정에서 자신의 의견을 많이 드러 냄

메뉴와 버튼을 적절히 사용 7분20

초 O 35회

최희수 작업 수행 과정에 대한 질문을 많이

함 메뉴와 버튼을 적절히 사용 8분 27

초 O 48회

(10)

4. 토론

4-1. 잘된 점 1) KOBUS

- 왕복 승차권 예매가 한번에 가능해짐으로 예매 단계를 편리하게 통합할 수 있음 - 날짜 변경이 가능 함으로써 기존 예매를 취소 후 재 예매 과정을 거칠 필요가 없어짐 2) i Kobus

- 모바일 상에서 조회 뿐 아니라 예매, 변경, 취소가 가능해짐

- 승차권 조회 화면의 옵션을 개선(편도/왕복, 인원을 조회 화면에서 선택할 수 있도록 개선, 불필요한 버스 종류 항목은 없앴음)

- 음성검색 버튼을 사용 시 음성검색 후 바로 조회가 되지 않고, 출발지와 도착지 항목만 선택이 되도록 개선

4-2. 수정 보완해야 할 점 1) KOBUS

 예매

- 편도/왕복 선택 시 중복 체크가 불가능하다는 점을 반영하여 체크 박스 대신 라디오 버튼 사용 - 왕복 승차권 조회 시 각각의 승차권 정보 입력 창을 사용자가 알아보기 쉽게 구분하기

- 카드 결제 시 최종 결제 금액 화면에 표시해주기

- 예매 변경 메뉴에서 변경 옵션이 6개의 많은 탭으로 구분되어 혼란을 주므로 3개로 수정

- 예매 변경 시 버스 등급 선택 옵션 추가 2) i Kobus

 예매

- 편도/왕복을 선택할 때 라디오 버튼으로 제공 - 예약 확인, 변경 확인 버튼을 확인버튼으로 수정

 즐겨찾기

- 예약 내용 확인 페이지에 즐겨찾기에 추가 버튼을 한 번 더 제공

- 예매 변경 화면을 메인화면과 같은 구성으로 제공

(11)

[부록]

1) 디자인 반복 과정에 대한 스케치 화면

 KOBUS

<1차 스케치>

▼ 조회 및 예매 ▼ 예매 변경/조회/취소

<2차 스케치>

▼ 조회 및 예매

▼ 예매 변경/조회/취소

(12)

 i Kobus

<1차 스케치>

<2차 스케치>

(13)

2) 작업 지시서

 KOBUS

1) 다음과 같이 왕복 승차권을 예매해보세요.

<출발편>

- 출 발 지 : 동서울 - 도 착 지 : 부산

- 출발일시 : 4월 15일(금) 오후 1시 대

<도착편>

- 출 발 지 : 동서울 - 도 착 지 : 부산

- 출발일시 : 4월 17일(일) 오전 9시 대 - 버스등급 : 일반고속

- 인 원 : 어른 1명 - 결제수단 : 신용카드

1) 기존에 예매해 둔 편도 승차권 내역을 다음과 같이 변경해보세요.

- 출발일시 : 4월 18일(월) 오전 9시 - 버스등급 : 우등고속

 i Kobus

2) 다음과 같이 편도 승차권을 예매해보세요.

- 출 발 지 : 동서울 - 도 착 지 : 청주

- 출발일시 : 4월 14일(목) 오후 1시 30분 - 버스등급 : 일반고속

- 인 원 : 어른 1명

3) 현재 노선을 즐겨찾기를 추가해 보세요.

4) 예매 내역을 다음과 같이 변경해보세요.

- 출발일시 : 4월 15일(금) 오후 1시 30분 - 인 원 : 어른 2명