인터랙티브프로토타입 및 최종보고서(.docx)

(1)

UI/UX 설계

인터랙티브 프로토타입 [ 시니어를 위한 간편 모드 승차권 예매 앱 ]

팀 명 孝(효)레일

문서 버전 ver 1.0

제출 일자 0000.00.00

팀원 팀원 1, 팀원 2, 팀원 3, 팀원 4

1. 프로젝트 개요

1-1. 프로젝트명: 시니어를 위한 간편 모드 승차권 예매 앱 1-2. 목적

인구의 노령화로 인해 노년층의 철도 사용률은 높아지고 있는데 반해, 노년층이 기존의 승차권 예매 모바일

앱 ‘코레일톡’ 서비스를 이용하는 비율은 현저히 낮다. 기존 앱을 살펴보면 복잡하고 직관적이지 않은 UI 구 성으로 인해 장•노년층이 사용하기에 적합하지 않음을 알 수 있다. 노년층을 고려하지 않은 기존의 코레일 모바일 앱을 개선하여 노년층이 편리하게 사용할 수 있는 사용자 인터페이스를 제공함으로써 디지털 격차를

(2)

해소하고자 한다.

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

● 문제점: 장•노년층이 이해하기 어려운 UI

와 복잡한 예매 프로세스 1) 수행할 작업과 현 상황에 대한 안내가 부족함

: 기존의 '코레일톡' 앱 인터페이스는 전체 승차권 예매 과정에 대한 안내 없이 예매가 진행된다. 현재 사용자

가 진행하고 있는 단계에 대한 정보, 앞으로 몇 단계를 더 거쳐야 예매가 모두 완료된다는 정보의 결핍으로 인해 사용자는 앱을 통한 승차권 예매 과정에서 심리적으로 큰 부담감을 갖게 된다.

2) 하나의 창에서 과도하게 많은 작업을 수행함

: 예매의 첫 화면에서 출발역과 기차역, 날짜, 시간, 인원 등의 세부사항들을 모두 선택하도록 UI

를 구성하여

노년층이 선택해야 할 사항들을 한눈에 파악하기 어렵다. 또한, 한 화면에서 많은 단계를 수행해야 하므로 노 년층에게 부담감과 피로감을 준다.

● 해결방안: 장•노년층이 자주 사용하는 기능으로만 승차권 예매 프로세스를 간소화하여 간편모

드로 제공한다.

1) 예매 과정을 간소화하여 설계한다.

: 기존의 '코레일톡' 앱에서 제공하는 기능 중에서 사용자의 80%가 주로 사용하는 필수적인 기능만 간편모

드에 포함시키고, 나머지 기능은 일반모드에서 수행하도록 하여 프로세스를 간소화한다.

2) 단순하고 순차적인 예매 프로세스로 구성한다.

: 모든 예매 과정을 하나의 창에서 하나의 단계만 진행하는 것 기본으로 하여 입력한 정보 확인의 편리성 및

빠진 정보 유무에 대한 불안감이 감소한다. 또한, 총 진행 단계 및 현재 진행 단계를 가시화하여 조작 상황에 대한 안정감을 제공한다.

(3)

2. 인터페이스 설계 변경

다음은 페이퍼 프로토타입 사용자 테스트에서 관찰된 결과를 기반으로 수정한 주요 사항이다.

대분류 열차 조회 열차 조회 열차 조회 열차 예매

문제점

왕복에서 가는 날짜/시 간 선택 후 오는 날짜 선 택 화면이 떴는데 가는 날짜로 잘못 입력함

당일 출발인데 오늘 출발말고 출발일 선 택을 눌러버림

새마을 호는 고속 열차가 아니라 일반 열차에 속하 는 것인지 헷갈려 함

좌석 변경을 선택할 때 체크박스를 누르 는 것인지 물어봄 변경

사항

가는 날짜/시간 선택 완 료 후 오는 날짜/시간을 선택하라고 따로 알림창 을 띄워줌.

‘출발일 선택’ 대신

‘다른 날 선택’ 으로

명칭 바꿔줌.

“고속 열차(ktx), 일반 열

차(무궁화호, 새마을 호) 를 선택하세요.” 라고 안 내를 띄워줌.

체크박스 선택 대신 버튼을 눌러 선택하도록 변경함

스크린 샷

대분류 열차 예매 열차 예매 승차권 확인/취소

문제점

비밀번호(예매자 정보)와 카드 비밀번 호 입력을 헷갈려 함

카드 유효기간 입력 시 카드 의 글씨가 너무 작아 잘 안보 여서 어려움을 겪음

예매 취소를 누르면 2인 의 승차권이 모두 취소될 까봐 주저함

변경 사항

예매자 정보와 카드 결제 정보를

화면을 나누어 입력함 카드 정보를 카메라를 통해 자동으로 읽어주는 기능 추가 함

“예매 취소를 누르면 1

매

의 승차권이 취소됩니다.”

라고 화면에 안내를 띄워 줌.

스크린 샷

3. 대표 시나리오

0

대표 시나리오 1

메인 화면에서 편도 승차권 예매를 선택한다. 그 다음 출발역은 주요역에서 맨 처음에 있는 서울역을 택하 고, 도착역은 역 검색을 통해 부산역을 입력하여 선택한다. 출발일은 당일이 아니므로 ‘다른 날 출발’을 택 한 후 달력에서 20XX년 9월 13일을 택한다. 출발 시간은 오전 8시로 선택한다. 열차 종류는 고속 열차 로 선택하며, 인원은 경로 1명을 택한다. 열차 조회 화면에서는 8시와 가장 근접한 08:05에 출발하는 열차의 일반실을 선택한다. 지금까지 선택한 내용들을 결제 내용 확인 화면에서 확인한 후 좌석 변경은 따 로 선택하지 않은 채로 결제 화면으로 넘어간다. 예매자 정보 입력 화면에서 예매자 이름, 전화번호, 비밀 번호를 입력하고, 결제 정보 입력 화면에서 카드 번호, 카드 유효기간, 카드 비밀번호를 입력하여 결제를

(4)

완료한다.

스토리보드 1

메인 화면에서 왕복 승차권 예매를 선택한다. 그 다음 출발역은 역 검색을 통해 부산역을 택하고, 도착역은 주요역에서 맨 처음에 있는 서울역을 택한다. 가는 날은 당일이므로 ‘오늘 출발’을 택하고 가는 날의 출발 시간은 오전 8시로 선택한다. 당일치기 여행이므로 오는 날도 ‘오늘 출발’을 선택하고 오는 날의 출발 시간 은 오후 5시로 선택한다. 열차 종류는 일반 열차로 선택하며, 인원은 경로 2명을 택한다. 가는 열차 조회 화면에서는 8:20에 출발하는 열차의 일반실을 선택한다. 오는 열차 조회 화면에서는 오후 9:15에 출발 하는 열차의 일반실을 선택한다. 지금까지 선택한 내용들을 결제 내용 확인 화면에서 확인한 후 좌석 변경 은 따로 선택하지 않은 채로 결제 화면으로 넘어간다. 예매자 정보 입력 화면에서 예매자 이름, 전화번호, 비밀번호를 입력하고, 결제 정보 입력 화면에서 카드 정보를 따로 입력하지 않고 카메라 인식 기능을 사용 해 자동 입력하여 결제를 완료한다.

(5)

(6)

편도 승차권 예매를 선택한 후 출발역은 주요역에 있는 수원역을 택하고, 도착역은 역 검색을 통해 부산역 을 입력하여 선택한다. 출발일은 당일이므로 ‘당일 출발’을 택한다. 출발 시간은 오전 8시로 선택한다. 열 차 종류는 고속 열차로 선택하며, 인원은 경로 1명, 성인 1명을 택한다. 열차 조회 화면에서는 8시와 가 장 근접한 08:05에 출발하는 열차의 일반실을 선택한다. 지금까지 선택한 내용들을 결제 내용 확인 화면 에서 확인한 후 좌석 변경을 선택해 좌석을 3호차 1A, 1B로 변경한다. 예매자 정보 입력 화면에서 예매 자 이름, 전화번호, 비밀번호를 입력하고, 결제 정보 입력 화면에서 카드 번호, 카드 유효기간, 카드 비밀 번호를 입력하여 결제를 완료한다. 1매의 승차권만 예매를 취소해야 할 일이 생겨 다시 메인 화면에서 승 차권 확인/취소를 선택한다. 예매자 정보를 입력한 후 1매의 승차권만 예매 취소를 선택한다.

(7)

4. Hi-fi 프로토타입 설명

4-1. 작성 도구 및 환경

본 Hi-fi 프로토타입은 웹 기반 디자인 툴 ‘Figma’로 제작되었으며, 이전에 만들었던 페이퍼 프로토타입의 스토리보드를 참고하여 작성하였다. (url 주소 : 간편모드 코레일톡 – Figma )

4-2. 프로토타입 개요

 메인화면은 편도 승차권 예매/왕복 승차권 예매/승차권 확인 및 취소 화면으로 이동할 수 있도록 구 성하였다.

 승차권 예매 화면으로 이동한 경우, 출발역과 도착역 선택 시에는 주요역과 역 검색을 통해 역을 선 택하는 화면이 필요하며, 구성 요소로는 주요역과 검색 결과 역 등이 필요하다.

 출발 날짜 선택 화면은 당일 출발과 당일이 아닌 날짜 출발로 나뉘어 선택할 수 있는 화면, 출발일

(8)

선택을 눌렀을 경우, 달력에서 날짜를 선택할 수 있는 화면이 필요하다. 출발일 선택 후에는 출발 시간을 선택할 수 있는 출발 시간 선택 화면이 필요하다. 구성 요소로는 사용자가 선택한 출발 날짜 와 시간이 있다. 열차 종류 선택을 위해 고속 열차와 일반 열차로 나뉘어 선택할 수 있는 화면이 필 요하며, 인원 선택을 위해서는 연령별로 나누어서 인원 수를 다중 선택할 수 있는 화면이 필요하다.

 승차권 확인/취소 화면으로 이동한 경우, 예매자 정보를 입력하는 화면, 승차권을 확인하고 예매 취 소를 택할 수 있는 화면, 취소 완료 화면이 필요하다. 구성요소로는 예매자 정보와 승차권 정보가 있다.

4-3. 미 구현 부분

 키패드로 직접 예매자 정보와 사용자 정보를 입력하는 경우: figma에서는 키패드를 이용해 직 접 값을 입력할 수 없다.

 카드 자동 인식 기능 : figma에서는 카메라를 이용할 수 없다.

(9)

5. 휴리스틱 평가 결과

휴리스틱 사용성 침해사항 중요도/난이도

H1 Visibility of

system 열차 조회 목록에서 한 페이지에 뜨는 열차의 개수가 적음 [중요도 3]

[난이도 0]

H2 Match between

system &

real world

역 검색을 통한 출발역/도착역 선택 시 돋보기 아이콘이 검색 버튼

이라는 점을 이해하기 어려울 수 있음 [중요도 1]

[난이도 0]

왼쪽 상단에 이전 화면으로 돌아갈 수 있는 ‘< 아이콘이 시니어가

이해하기 어려울 수 있음 [중요도 1]

[개발 난이도 0]

H3 User control &

freedom

사용자가 어떤 작업을 마치거나 정보를 입력하면 정상적으로 반영

이 되었다는 확인 메시지를 출력되지 않음 [중요도 2]

좌석 선택 시 사용자가 화면에 보이지 않는 좌석들을 보려면 화살 표를 눌러 위아래로 화면을 움직여야 하는데 이에 대한 설명이 없 어 시스템을 원하는 대로 조작하지 못할 수 있음

[중요도 3]

[개발난이도2]

선택 화면마다 이전 버튼만 있고 홈 버튼은 따로 없어 처음부터 예 매를 다시 하고자 할때 어플을 종료했다가 다시 켜야하는 방법밖에 없음

[중요도 3]

[개발난이도 0]

H4 Consistency &

Standards

주요역 나열 순서에 특정한 기준이 없음 [중요도 2]

[개발난이도3]

출발일 선택이나 열차 종류 선택 화면은 다른 화면들과 다르게 하

단의 ‘확인’버튼이 없어 선택 방식의 일관성이 떨어짐 [중요도 1]

H5 Error prevention

열차 조회 화면에서 일반실과 특실 버튼의 크기가 작아 시니어가

잘못 선택하기 쉬움 [중요도 3]

예매자 정보 입력에서 전화번호 입력 시 한칸에 전화번호를 모두

입력하게 되어 있어 실수를 유발할 수 있음.] [중요도 2]

비밀번호 입력 시 ****로 표시되도록 하여 입력에 실수가 있었는

지 확인이 어려움 [중요도 2]

(10)

H6 Recognition rather

than recall

출발 시간 선택 시 오전, 오후 시간을 위아래로 분류한 부분에서 직

관성이 부족하다. [중요도 2]

H7 Flexibility and efficiency of use

각각의 선택 화면에서 선택을 리셋(취소)하고 다시 선택하는 작업 을 대신 해주는 버튼이 없어 일일이 선택한 것들을 하나씩 직접 취

소해주어야 함 [중요도 2]

H8 Aesthetic &

minimalist design

메인으로 지정한 색상이 튀는 색상이기 때문에 눈에 피로도가 올

수 있다 [중요도1]

[개발 난이도0]

H9 Help users recognize, diagnose &

recover from errors

인원 선택 시 선택한 인원을 다시 취소할 방법이 명시되어 있지 않

음 [중요도 3]

예매 취소 버튼 누름과 동시에 바로 예매 취소가 되어버려 원하지

않는 취소를 유발할 수 있음 [중요도 3]

H10 Help and documentation

결제에서 자동 카드 인식 기능 사용이 익숙치 않은 초보 사용자들

에게는 다소 생소하게 느껴질 수 있음 [중요도 3]

에러가 발생했을 때, 사용자가 스스로 에러를 해결할 수 있도록 도

움말 기능이 제공되지 않음 [중요도 4]

승차권 예매 완료 후 메인 화면에서 승차권 확인/취소를 누르면 방

금 예매한 승차권을 확인할 수 있다는 가이드가 부족하다. [중요도 2]

온라인 상에서 카드 결제를 안해본 시니어 사용자라면 카드 유효기

간이 무엇을 뜻하는지 알기 어려움 [중요도 2]