-Toto’s diary UX 개선 프로젝트-

Presentation on theme: "-Toto’s diary UX 개선 프로젝트-"— Presentation transcript:

1 -Toto’s diary UX 개선 프로젝트-
2011, Spring Paper Prototype -Toto’s diary UX 개선 프로젝트- S-Moon 서승아 / 원지수 / 이경주 (월)

2 → 복잡한 메뉴, 불편한 기능, 불명확한 이미지 등에 대한 요구사항 분석
프로젝트 개요 프로젝트 목적 일정관리 어플인 Toto’s diary 의 UI 개선 → 쉽고 간편하게 이용가능하게 하여 이용자 수 높임 작업 분석, 사용성 평가, 프로토 타입 제작 → 복잡한 메뉴, 불편한 기능, 불명확한 이미지 등에 대한 요구사항 분석 간소화된 주 메뉴 구조, 접근성 높인 하위메뉴의 UX 가이드 라인 제안 사용자 피드백으로 제시된 메모 기능의 추가로 기존 일정관리 어플과 메모 기능 어플 통합

3 페이퍼 프로토타입 1. Prototype description 2. Lo-fi Prototypes
스마트폰과 비슷한 크기를 위해 A4종이를 4등분하여 스케치 일정추가 및 삭제 등을 레이어로 활용하기 위해 포스트잇을 여러 사이즈로 이용하여 스케치본 위에 붙이는 방식 2. Lo-fi Prototypes

4 Lo-fi Prototypes 1. 초기화면 일정보기와 등록을 위한 기본 화면 처음 어플을 실행하면 월간일정 보기
일정 보기의 방식은 월간, 주간, 일간 세 가지를 지원 일정 추가 방법 일정 등록을 원하는 날짜에 한 번 탭 한 뒤 우측 상단의 플러스 버튼 원하는 날짜를 더블탭 일정 추가 제목과 날짜, 카테고리, 알림, 내용을 추가할 수 있다 시작일부터 종료일이 정해져 있는 일정은 날짜를 두 개로 추가하여 기간이 있는 일정을 추가 상세 일정 보기에서는 등록한 일정을 한눈에 볼 수 있다 일정 보기 일정 추가 상세 일정 보기

5 Lo-fi Prototypes 2. 일정 보기 일정보기
일정을 추가하면 조그마한 동그라미가 날짜 밑에 추가되게 되는데, 이 동그라미의 색은 사용자가 설정한 카테고리의 대표 색 일정 보기에서 일정을 카테고리 별로 골라 볼 수 있는 기능 카테고리는 일정을 분류하여 관리할 수 있게 하기 위해 사용되는 기능

6 Lo-fi Prototypes 3. 해야 할 일 해야 할 일
기간이나 기한, 날짜가 정해지지 않은 일을 목록형으로 등록하여 볼 수 있게 하는 기능 일정 보기에서 일정을 카테고리 별로 골라 볼 수 있는 기능 카테고리는 일정을 분류하여 관리할 수 있게 하기 위해 사용되는 기능 해야 할 일을 등록하면 아래 그림의 해야 할 일 부분에 나오게 된다

7 Lo-fi Prototypes 4. 메모 ① ② 메모
메모하기는 노트를 쓸 수 있는 기능으로, 쓸 내용이 길 경우나 그림을 추가해야 하는 경우 등에 사용 사진 + 노트 추가 사진 추가 - 앨범에서 사진을 선택하거나 카메라로 촬영 사진을 선택하여 추가한 후 메모를 등록하게 되면 ①번 그림의 ②번의 목록형으로 등록한 날짜와 그림, 메모의 첫 줄 ① ②

8 Lo-fi Prototypes 5. 알람 설정, 카테고리 추가 등 기타 기능 기타 기능
활성화 버튼의 표시, 키보드, 날짜 선택 등의 표현 카테고리 추가, 알람 설정 팝업창

9 사용자 테스트 1) 참가자 2) 테스트 환경 기본정보 명신관 VM 랩실 커다란 테이블에 참여자가 가운데 위치
스마트폰 사용여부 일정 어플 사용여부 곽지은 대학원생(여) / 20대 중반 O 최미수 대학원생(여) / 20대 후반 △ X 신미경 대학생(여) / 20대 초반 2) 테스트 환경 명신관 VM 랩실 커다란 테이블에 참여자가 가운데 위치 테이블 위에 일정관리 어플을 종이에 작성한 low-fidelity 모형 참여자는 달력 그림이 그려져 있는 종이박스를 손가락 또는 펜으로 터치하여 어플리케이션을 조작

10 사용자 테스트 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 메모 등록 메모에 회의 사진을 선택하여 넣고 첫 회의로 기록

11 사용자 테스트 4) 테스트 진행 과정 ①동의서에 사인 ②내용과 그 UI에 대해 간단한 설명
③조작방법을 종이에 작성한 모형을 통해 설명 ④Scenario 5가지 설명 ⑤관찰하고 기록하면서 비디오 녹화 및 사진 촬영 ⑥시행 중의 사건들과 행동을 관찰하여 기록

12 사용자 테스트 5) 평가 항목 참여자가 scenario를 수행하는데 걸리는 시간. 참여자에게 도움말 항목이 필요한가?
참여자가 어떤 부분에서 실수를 하거나 고민을 하는가? 프로토 타입에서 누락된 부분은 없는가? 참여자가 어떤 부분에서 헤매서 작업 시간이 지연되는가?

13 사용자 테스트 6) 테스트 결과 관찰결과 및 분석 관찰결과 분석 1
세 명의 참여자가 모두 달력초기화면에서 상단의 + 를 누르지 않고 해야 할 일의 +를 눌러서 등록하려고 하는 행동을 보였다. + 아이콘의 이미지 수정 또는 표현방식 고민필요 2 스마트폰의 사용자나 사용하지 않는 참여자들도 월간,주간, 일정보기는 쉽게 이해하고 월간 이동도 슬라이드형식으로 넘겨주었다. 다음 달, 이전 달로 넘길 때 화살표 버튼도 있었으면 추가 의견도 있음 3 일정등록 시나리오를 진행한 후라 기간이 있는 일정등록 수정에는 어려움이 없이 진행하였다. 4 해야 할 일을 완료해서 없앨 때 체크하여 바로 삭제되면 실수로 눌렀을 경우 처리할 수 없어 참여자가 당황하였다. 체크와 삭제를 따로 하거나 경고 창 팝업 필요 5 메모등록에 사진을 추가하는 것은 모든 참여자가 손쉽게 진행하는 것을 볼 수 있었다.

14 사용자 테스트 6) 테스트 결과 참여자 의견 곽주은 상세보기 페이지가 굳이 필요 없을 것 같다. depth만 늘어나는 느낌
<- back 버튼 대신 홈 버튼이나 그런 식으로 모양을 바꾸면 좋을 듯 처음에 도움말이 필요함 최희수 해야 할 일을 완료해서 없앨 때 체크하여 바로 삭제되면 실수로 눌렀을 경우 처리할 수 없다. 체크와 삭제를 따로 하든지 체크 하면 경고를 해주면 좋겠다. 다음 달, 이전 달로 넘길 때 화살표 버튼도 있었으면 좋겠다. 김미경 알람 등록할 때 원하는 시간으로 등록 가능했으면 한다. 메모 사진 추가할 때 여러 장 추가 가능했으면 좋겠다.

15 토론 1) 잘된 점 기존의 불명확한 아이콘 및 메뉴명을 수정하여 대부분의 참여자가 보편적인 인터페이스로 혼란을 주는 경우가 없었다. 주간일정에서 월간조회로 밖에 넘어 갈 수 없었던 기존 인터페이스가 수정되어 월간, 주간, 일간 보기는 참여자 모두 손쉽게 이용하였다. 주간일정, 일간 일정 등 자세히 보기의 경우 한눈에 파악하기 쉬웠고 참여자들도 긍정적으로 반응하였다. 일정관리 안에 일정에 대한 코멘트 추가 정도의 기능밖에 하지 않았던 메모기능이 설정이 간편하고 사진추가도 가능하여 참여자의 만족도가 높았다.

16 토론 2) 수정, 보완해야 할 점 참여자 모두 해야 할 일과 일정의 차이를 느끼지 못하여 이에 대한 명확한 구분이 필요
사용자 테스트에서는 발견되지 못했는데 프로토타입 테스트에서는 일정을 등록할 때 + 버튼을 찾지 못하고 우왕좌왕하여 개선 필요 해야 할 일을 완료했을 시에 바로 목록에서 사라지게 되는 인터페이스는 수정되어야 한다. 사용자가 실수 할 수 있으니 완료와 삭제 버튼을 따로 두어 의미를 분명히 한다. 메모 등록에서 사진을 추가할 때 사진을 목록에서 선택하면 바로 추가되도록 기능을 추가한다. 미리보기를 할 수 없어 사진을 잘못 선택할 수 있으므로 미리보기를 제공

17 토론 3) 기타 의견 일정과 해야 할 일을 구분하기 위해 탭 메뉴에 해야 할 일 메뉴를 따로 만들어 구분을 명확히 하는 것
달력 보기에서 이전 달과 다음 달로 넘어갈 때 페이퍼 프로토타입의 한계로 드래그 기능을 생각하지 못하는 경우가 많아 화살표 버튼이 있었으면 좋겠다는 의견이 많았는데, 이것이 페이퍼 프로토타입의 문제인 것인지 인터페이스의 문제인 것인지 생각해 볼 필요가 있음.