2011, Spring
페이퍼 프로토타입 보고서 [Toto’s diary UX 개발]
2011 년 4 월 18 일
㈜ S-Moon
팀원: 서승아 / 원지수 / 이경주
1. 프로젝트 개요
1.1. 프로젝트 명 : Toto’s diary UX 개선 1.2. 목적
본 프로젝트는 스마트폰 일정관리 어플리케이션인 Toto’s diary(이하 Toto)의 사용자 인터페이스를 개선 하는 것을 목적으로 하며 이를 통해 사용자들이 쉽고 간편하게 이용할 수 있게 함으로써 일정관리 어플리케 이션의 이용자수를 높이고자 한다.
1.3. 문제점 및 해결방안 프로젝트의 내용은 다음과 같다.
1) 인터뷰를 통한 작업분석과 사용성 평가, 프로토타입 제작 등으로 사용자들이 자주 사용하지 않는 복 잡한 메뉴, 불편한 기능, 불명확한 이미지와 메뉴명 등에 대한 요구사항을 분석.
2) 이를 통해 간소화된 주 메뉴 구조와 접근성을 높인 하위메뉴의 UX가이드라인을 제안
3) 또한 어플리케이션 리뷰 등의 사용자의 피드백으로 제시된 메모(노트)기능의 추가로 기존에 일정관리 어플리케이션과 메모 기능 어플리케이션을 통합
** 참고 : 기존 어플리케이션에 일정 추가 기능에 있는 ‘메모’는 일정에 관한 코멘트의 기능만 할 뿐이며 일반적으로 사용되는 ‘메모’ 메뉴와 기능이 다르다.
2. 프로토타입
2-1. Prototype description
Toto’s diary의 Low-Fidelity Prototype은 기본적으로 스마트폰과 비슷한 크기를 위해 A4종 이를 4등분하여 스케치로 어플 모양을 만들었고 일정추가 및 삭제 등을 레이어로 활용하기 위해 포 스트 잇을 여러 사이즈로 이용하여 스케치본 위에 붙이는 방식으로 만들었다.
2-2. Lo-fi Prototypes
1 초기화면
<그림 1> 일정보기 <그림2> 일정추가
<그림3> 일정상세보기
옆의 네 화면은 일정보기와 등록에 관한 화면이다. 처 음 어플을 실행하면 <그림 1>월간일정 보기가 나온 다. 일정 보기의 방식은 월간, 주간, 일간 세 가지를 지원한다.
일정을 추가하는 데에는 두 가지 방법이 있다. 한 가 지는 일정 등록을 원하는 날짜에 한 번 탭 한 뒤 우측 상단의 플러스 버튼을 누르는 것이고, 다른 한 가지는 원하는 날짜를 더블 탭 하는 것이다. <그림 2>는 일 정 추가를 하는 부분으로 제목과 날짜, 카테고리, 알 림, 내용을 추가할 수 있다. 일정이 시작일부터 종료 일이 정해져 있다면 날짜를 두 개로 추가하여 기간이 있는 일정을 추가할 수 있게 하였다.
<그림 3>상세 일정 보기에서는 등록한 일정을 한눈 에 알아보기 쉽게 하기 위해 만든 화면이다.
2
일정보기<그림 4>는 일정 보기에 관련한 그림이다. 일정 을 추가하면 조그마한 동그라미가 날짜 밑에 추가 되게 되는데, 이 동그라미의 색은 사용자가 설정한 카테고리의 대표 색이다. 이 색으로 사용자는 어떤 카테고리의 일정이 추가되어 있는지 한눈에 알아
<그림 4>
<그림 5> 알람설정과 카테고리 추가
볼 수 있다. 기간이 있는 일정의 경우에는 긴 직선 으로 표현하였다.
또 일정 보기에서 일정을 카테고리 별로 골라 볼 수 있는 기능을 제공하였다.
<그림 5>는 알람 설정과 카테고리 추가에 관한 화 면이다. 알람 설정은 일정 등록을 할 때 선택할 수 있다.
카테고리는 일정을 분류하여 관리할 수 있게 하기 위해 사용되는 기능이다. 카테고리를 추가하려면 일정보기에서 카테고리를 선택하여 추가하거나, 일 정 등록에서 카테고리 선택할 때 바로 추가할 수 있 는 방법이 있다.
3 해야 할 일 등록
<그림 6> 할일 등록 <그림 7>
<그림 8>
해야 할 일은 기간이나 기한, 날짜가 정해지지 않은 일을 목록형으로 등록하여 볼 수 있게 하는 기능이다. 해야 할 일을 등록하면 <그림 7>에 있는 내용이 <그림 8>에 있는 해야 할 일의 부 분에 나오게 된다.
4 메모
메모하기는 노트를 쓸 수 있는 기능으로, 쓸 내 용이 길 경우나 그림을 추가해야 하는 경우 등에 사용할 수 있다. <그림 10>은 메모 메뉴에서 메모를 등록하고 그 메모를 확대하여 볼 수 있는
<그림 10>
<그림 11>
화면이다.
메모 등록을 하게 되면 내용을 쓸 수 있고 관련 된 사진을 추가할 수 있다. 사진을 추가하면
<그림 11>과 같은 화면이 나와서 앨범에서 사 진을 선택하거나 카메라로 촬영을 할 수 있다.
사진을 선택하여 추가한 후 메모를 등록하게 되 면 <그림 10>의 두 번째 화면에 목록형으로 등록한 날짜와 그림, 메모의 첫 줄이 나오게 된 다.
5 알람설정, 카테고리 추가 등 기타 기능
이 그림은 활성화 버튼의 표시, 키보드, 날짜 선 택 등의 표현과 카테고리 추가/알람 설정 팝업창 을 나타낸다.
3. 사용자 테스트
1) 참가자
사용자 테스트에 참가자는 대학원에 재학중인 곽지은, 학부생 신미경, 행정조교 최미수 총 3명으로 구 성하였다. 곽지은 학생은 아이폰 사용자이고 어플도 이용하고 있는 사용자로서, 최미수는 아이팟 사용 자이고 어플을 사용해 본적이 없는 사용자로 마지막으로 신미경 학생은 스마트폰을 사용하지 않는 미사 용자로서 이번 실험에서 가장 정확한 문제점 진단을 해줄 수 있을 것 같아 테스트에 참여시키게 되었다.
기본정보 스마트폰 사용여부 일정어플 사용여부
곽지은 대학원생(여) / 20대 중반 O O
최미수 대학원생(여) / 20대 후반 △ X
신미경 대학생(여) / 20대 초반 X X
2) 테스트 환경
테스트는 명신관 VM 랩실에서 이루어졌다. 연구실의 중앙에 있는 커다란 테이블에 참여자가 가운데 위 치한다. 테이블 위에 일정관리 어플을 종이에 작성한 low-fidelity 모형이 놓여져 있다. 참여자는 달력 그림이 그려져 있는 종이박스를 손가락 또는 펜으로 터치하여 어플을 조작하게 된다. 손가락 또는 펜으 로 테스트 종이에 작성된 메뉴를 선택하면 프로그램을 대신하여 평가팀 중 한 명이 직접 조작하게 된다.
평가팀 :
greeter & facilitator - 서승아 computer - 원지수 ,
observers – 이경주
3) 작업
□ Scenario 1 : 과제 일정 추가 + 일정 수정 + 알람 설정
4월 25일 5시 UI 과제 일정등록. 등록 시 카테고리 ‘개인’으로 지정, 상세내용은 ‘작업분석’
과제 일정을 25일에서 29일로 수정
2시간전으로 알람 등록
□ Scenario 2 일정 상세보기
일정확인하기 – 월간/주간/일간 보기
□ Scenario 3 기간이 있는 일정 추가
5월 6일 AM9시 ~ 5월 7일 PM1시 학과 LT 일정 등록’
학교 카테고리 추가 및 설정
상세내용 등록 : ‘제2창학 집합, 세면도구 챙기기’
□ Scenario 4 해야 할 일 등록, 삭제
‘TOEIC 학원 찾기’와 ‘쇼핑몰 검색(구두)’ 메모
등록된 메모에서 ‘TOEIC 학원 찾기’ 완료 체크 후
□ Scenario 5 메모 등록
메모에 회의 사진을 선택하여 넣고 첫 회의로 기록
4) 테스트 진행 과정
테스트를 시작하기 전에, 참여자로부터 이 평가가 다른 목적에 사용되지 않을 것이라고 설명을 한 뒤에 ①동의서에 사인을 받았다. 그리고 참여자들에게 우리 팀의 Toto’s diary 일정관리 어플리케 이션의 대략적인 ②내용과 그 UI에 대해 간단한 설명을 했다. 그 후 일반적인 ③조작방법을 종이에 작성한 모형을 통해 설명하였다. 각각의 참여자에게 작업 지시서를 주고 실행해야 할 ④Task 5 가지를 설명했다. 첫 번째 작업을 하는 동안 시행중의 사건들을 모두 ⑤관찰하고 기록하면서 비디 오 녹화 및 사진도 찍었다. 각 참여자는 첫 번째 작업이 끝나면 두 번째, 세 번째 작업을 차례대로 실행하도록 하였으며, 우리는 계속해서 참여자의 ⑥시행 중의 사건들과 행동을 관찰하여 기록하였 다. 틈틈이 참여자가 의문을 품거나 의견을 제시하는 내용에 대해서도 꼼꼼히 기술하였다.
5) 평가 항목
아래의 사항을 참여자가 테스트 하는 동안 중점적으로 체크하였다.
• 참여자가 task를 수행하는데 걸리는 시간.
• 참여자에게 원하는 작업을 도움말 항목이 필요 없이 직관적으로 수행하는가?
• 참여자가 어떤 부분에서 실수를 하거나 고민을 하는가.
• 프로토타입에서 누락된 부분은 없는가
• 참여자가 어떤 부분에서 헤매서 작업 시간이 지연되는가
6) 테스트 결과 1 관찰결과 및 분석
Scenari
o 관찰결과 분석
1 세 명의 참여자가 모두 달력초기화면에서 상단의 + 를 누르지 않고 해야 할 일의 +를 눌러서 등록하려고 하는 행동을 보였다.
+ 아이콘의 이미지 수정 또는 표현방식 고민필요
2 스마트폰의 사용자나 사용하지 않는 참여자들도 월 간,주간, 일정보기는 쉽게 이해하고 월간 이동도 슬라 이드형식으로 넘겨주었다.
다음 달, 이전 달로 넘길 때 화살 표 버튼도 있었으면 추가 의견도 있음
3 일정등록 시나리오를 진행한 후라 기간이 있는 일정 등록 수정에는 어려움이 없이 진행하였다.
4 해야 할 일을 완료해서 없앨 때 체크하여 바로 삭제되 면 실수로 눌렀을 경우 처리할 수 없어 참여자가 당황 하였다.
체크와 삭제를 따로 하거나 경고 창 팝업 필요
5 메모등록에 사진을 추가하는 것은 모든 참여자가 손 쉽게 진행하는 것을 볼 수 있었다.
2 참여자 의견
곽지은 상세보기 페이지가 굳이 필요 없을 것 같다. depth만 늘어나는 느낌.
<- back 버튼 대신 홈 버튼이나 그런 식으로 모양을 바꾸면 좋을 듯 처음에 도움말이 필요함
최미수 해야 할 일을 완료해서 없앨 때 체크하여 바로 삭제되면 실수로 눌렀을 경우 처리할 수 없다.
체크와 삭제를 따로 하든지 체크 하면 경고를 해주면 좋겠다.
다음 달, 이전 달로 넘길 때 화살표 버튼도 있었으면 좋겠다.
신미경 알람 등록할 때 원하는 시간으로 등록 가능했으면 한다.
메모 사진 추가할 때 여러 장 추가 가능했으면 좋겠다.
4. 토론
이 실험을 통해 우리 팀에서 제안한 사용자 인터페이스 개선안이 사용자들에게 어떻게 이해되는지 알 수 있었다.
1) 잘된 점
기존의 불명확한 아이콘 및 메뉴명을 수정하여 대부분의 참여자가 보편적인 인터페이스로 혼 란을 주는 경우가 없었다.
주간일정에서 월간조회로 밖에 넘어 갈 수 없었던 기존 인터페이스가 수정되어 월간, 주간, 일 간 보기는 참여자 모두 손쉽게 이용하였다.
주간일정, 일간 일정 등 자세히 보기의 경우 한눈에 파악하기 쉬웠고 참여자들도 긍정적으로 반응하였다.
일정관리 안에 일정에 대한 코멘트 추가 정도의 기능밖에 하지 않았던 메모기능이 설정이 간 편하고 사진추가도 가능하여 참여자의 만족도가 높았다.
2) 수정 보완해야 할 점
참여자 모두 해야 할 일과 일정의 차이를 느끼지 못하여 이에 대한 명확한 구분이 필요하다.
사용자 테스트에서는 발견되지 못했는데 프로토타입 테스트에서는 일정을 등록할 때 + 버튼 을 찾지 못하고 우왕좌왕하여 개선이 필요하다.
해야 할 일을 완료했을 시에 바로 목록에서 사라지게 되는 인터페이스는 수정되어야 한다.
사용자가 실수 할 수 있으니 완료와 삭제 버튼을 따로 두어 의미를 분명히 한다.
메모 등록에서 사진을 추가할 때 사진을 목록에서 선택하면 바로 추가되도록 기능을 추가한다.
미리보기를 할 수 없어 사진을 잘못 선택할 수 있으므로 미리보기를 제공하는 것이 좋을 것이 다.
3) 기타 의견
일정과 해야 할 일을 구분하기 위해 탭 메뉴에 해야 할 일 메뉴를 따로 만들고 그 메뉴에서 할 일을 추가하고 보이는 것은 일정 보기에 한꺼번에 보이는 것으로 하는 것이 좋을 것 같다는 의견이 있었 다.
또한 달력 보기에서 이전 달과 다음 달로 넘어갈 때 페이퍼 프로토타입의 한계로 드래그 기능을 생 각하지 못하는 경우가 많아 화살표 버튼이 있었으면 좋겠다는 의견이 많았는데, 이것이 페이퍼 프 로토타입의 문제인 것인지 인터페이스의 문제인 것인지 생각해 볼 필요가 있다.
[부록]
1] 디자인 반복 과정에 대한 스케치 화면
□ Scenario 1 : 과제 일정 추가 + 일정 수정 + 알람설정
· 초기화면 · 날짜클릭 · 일정 추가 · 제목추가 · 제목 추가 2 · 날짜 선택 · 날짜
카테고리 선택 내용 입력 상세일정보기 달력 일정 보기 일정 수정 일정수정
날짜 수정 날짜 수정 2 일정 확인 알람 설정 상세 일정 상세 일정 2 수정한 일정확 인
□ Scenario 2 일정 상세보기
월간보기 주간보기 일간보기
□ Scenario 3 기간이 있는 일정 추가
· 일정클릭 해당날짜클릭 일정 추가 제목 작성 날짜 입력 날짜 입력 카테고리설정
카테고리 추가 카테고리 추가 카테고리 추가 학교항목추가 알람 설정 내용입력 내용입력
상세 일정보기 일정 확인
□ Scenario 4 해야 할 일 등록, 삭제
할일 등록 할일 입력 등록 확인 할일 2 입력 할일 2 입력 확인
□ Scenario 5 메모 등록
메모 메뉴 메모 등록 사진추가 사진추가2 사진 확인 내용입력 상세메모확인
2] 작업 지시서
1. 일정 추가 + 수정
4월 25일 5시 ‘UI 과제’ 라는 제목으로 일정을 등록한다. 카테고리는 ‘개인’으로 지정하고 상세내용은 ‘ 작업분석’이라고 쓴다.
그 후 달력(월간보기)에서 방금 등록한 일정을 찾아서 날짜를 29일로 수정한다. 그리고 2시간 전으로 알람을 등록한다.
2. 일정 확인
추가된 일정을 월간/주간/일간 보기로 확인해본다.
3. 5월 6일 AM9시 ~ 5월 7일 PM1시에 학과 LT 일정을 등록한다. 이 때 ‘학교’ 카테고리를 만들어서 추가하고 카테고리를 ‘학교’로 설정한다. 상세내용에는 ‘제2창학 집합, 세면도구 챙기기’ 라고 쓴다.
4. 해야 할 일에 ‘TOEIC 학원 찾기’와 ‘쇼핑몰 검색(구두)’를 등록한다.
그 후 TOEIC 학원 찾기를 완료해서 없앤다.
5. 메모에 회의 사진을 선택하여 넣고 첫 회의라고 등록한다.
