Final Report [Toto’s diary UX개발]

2011, Spring

Final Report

[Toto’s diary UX개발]

2011년 5월 9일

㈜ S-Moon

팀원: 서승아 / 원지수 / 이경주

1. 프로젝트 개요

1.1. 프로젝트 명 : Toto’s diary UX 개선 1.2. 목적

본 프로젝트는 스마트폰 일정관리 어플리케이션인 Toto’s diary(이하 Toto)의 사용자 인터페이스를 개선하는 것을 목적으로 하며 이를 통해 사용자들이 쉽고 간편하게 이용할 수 있게 함으로써 일정관리 어플리케이션의 이용자수를 높이고자 한다.

1.3. 문제점 및 해결방안

1) 인터뷰를 통한 작업분석과 사용성 평가, 프로토타입 제작 등으로 사용자들이 자주 사용하지 않는 복잡한 메뉴, 불편한 기능, 불명확한 이미지와 메뉴명 등에 대한 요구사항을 분석.

2) 이를 통해 간소화된 주 메뉴 구조와 접근성을 높인 하위메뉴의 UX가이드라인을 제안 1 직관적이지 못한 아이콘 수정 등 UI 개선

2 일정등록 및 수정기능 간소화 및 사용자에게 통제권 부여

3 일정보기기능 개선 – flexibility 제공, 옵션의 사용으로 개인화 가능 4 메모기능 추가

2. 작업 분석

2-1. 사용자 분석

Toto’s dairy의 사용성 평가를 위해 현장방문을 통한 사용자인터뷰를 실시했다. 현장방문의 목적은 잠재 적 사용자, 그들의 작업흐름, 개선된 Toto’s Diary 사용자 인터페이스 설계를 준비하기 위한 사용자들의 태스크들에 대해 아는 데에 있다.

인터뷰는 다음과 같이 스마트폰 사용여부와 일정어플 사용경험에 따라 4 명의 사용자를 대상으로 달력보 기, 일정추가, 일정보기, 일정수정 등 4 가지 기능을 수행하도록 하였다. 인터뷰 대상은 다음과 같다.

기본정도 스마트폰 사용여부 일정어플 사용여부

조선영 대학원생(여) / 20 대 중반 아이팟 사용 X

신미경 대학생(여) / 20 대 초반 X X

이현진 대학원생(여) / 20 대 후반 O X

이상문 직장인(남) / 30 대 초반 O O

인터뷰의 결과에 따라 사용자 목록은 다음과 같이 추출되었다.

 다양한 일정 등록으로 일정구분을 원하는 사용자

 메모기능을 이용해 일정등록을 원하는 사용자

 사진에 메모하여 기록하는 사용자 2-2. 작업 분석 (요약)

2-2-1 11가지의 작업분석을 위한 질문과 사용자테스틀 통하여 다음과 같은 작업목록을 도출하였다.

a) 행위목록에 의한 작업목록 1 일정확인

2 일정등록 3 일정수정 4 일정삭제 5 메모등록 6 메모수정 7 메모삭제 8 알람설정

b) 시퀀스에 의한 작업목록

일정 추가 일정 추가 버튼

-> 제목 입력 -> 날짜 선택 -> 알람 설정 O -> 알람 시간 설정 -> 완료

일정 수정 원하는 날짜 선택하여 일간 보기

-> 수정할 일정 선택 -> 일정 상세보기 -> 수정

-> 완료

일정 보기 월간 일정 보기

↔ 주간 일정 보기

↔ 일간 일정 보기 -> 일정 상세 보기

메모 보기 메모 목록

-> 메모 선택 -> 크게 보기

메모 추가 메모 목록

-> 메모 추가 -> 내용 입력 -> 완료 해야 할 일 등록 및 보기 해야 할 일 목록

-> 해야 할 일 등록 -> 완료

-> 목록 보기 c) 계층적 작업목록

대분류 중분류

일정 보기 월/주/일 단위로 일정보기

월/주/일 단위로 해야 할 일 보기 분류 항목별로 일정보기

카테고리 별로 일정보기 상세 일정 확인하기 일정 등록/수정/삭제 반복되는 일정

기한이 정해진 일정 기간이 정해진 일정

해야 할 일 등록/수정/삭제 월/주/일 단위로 해야 할 일 등록 메모 등록/수정/삭제 메모 조회하기

메모 등록/수정/삭제하기

알람 설정 알람 설정

2-2-2 페르소나

사용자테스트에 따라 다음과 같은 3 가지 유형의 페르소나를 도출하였다.

a) 김하늘

“목표 : 복잡한 일정을 일정관리 어플리케이션으로 통합 관리한다.“

☞성별 : 여 ☞나이 : 25세

☞직업 : 대학원생 ☞사는 지역 : 용산 기술친숙도

- 스마트폰이용여부 : 이용, 아이폰 3G - 현재 일정관리 어플리케이션 이용하지 않음.

니즈

- 손쉽게 일정을 추가하고 랩실 일정, 조교활동일정, 개인일정을 일목요연하게 한눈에 알기 쉽게 보기 원함.

-

동기 및 문제 시나리오

김하늘은 대학원 1학기로 일주일에 3과목 수업을 들으면서 오전 과조교를 하고 있다. 또한 타대학과의 연계 학술대회 를 준비하는 간사로서 여러 일정을 소화해야 하기 때문에 하루 24시간이 모자랄 지경이다. 특히 과조교를 하면서는 여러 교수님의 지시사항과 학부생들의 요청을 처리해야 하기 때문에 메모를 잘 관리하고 체크해야 한다. 현재는 일정은 다이 어리에 직접 기록하고 메모는 포스트잇에 적어서 모니터에 붙여두고 있으나 과사무실 컴퓨터는 다른 조교들도 이용하고 있어 이용에 불편함이 있다. 일정관리 어플리케이션이 있다는 것을 알지만 입력하는 것이 어렵고 귀찮아 현재는 사용하 지 않고 있으나 향후 쉽고 간단한 어플리케이션이 있다면 이용할 생각이다. 특히 메모에서 해야 할 일에서 시간순서대로 정리가 되고 할 일을 처리하고 나면 기록은 남되 목록에서는 제외되는 기능이 필요하다.

b) 조은이

“목표 : 인턴생활의 일정을 기록하고 인턴업무의 내용을 사진과 함께 다이어리 로 기록한다.“

☞성별 : 여 ☞나이 : 23세

☞직업 : 대학생 ☞사는 지역 : 마포 기술친숙도

- 스마트폰이용여부 : 이용하지 않음, 아이팟 사용 - 피처폰에서 일정등록만 함

니즈 일정관리와 사진에 메모를 추가해 다이어리기능 이용

- 동기 및 문제 시나리오

조은이는 여자 대학 4년생이다. 학부연구원이면서 학생회 임원으로서 상당히 분주하게 생활하고 있다. 이번 3월에는 삼성그룹 인턴으로 지원하여 5월부터는 인턴까지 병행해야하니 연예인 같은 죽음의 일정을 소화해야 한다. 핸드폰은 약 정기간이 남아있어 아직 스마트폰으로 바꾸지 못하고 있으나 아쉬운점을아이팟으로 대신하고 있다. 꼼꼼한 성격이어서 일정을 꼬박꼬박 핸드폰에 등록하고 체크하고 있다.

인턴생활에 대한 기대가 있는데 앞으로 인턴을 하면서 하루하루를 기록해서 향후에 직장 생활할때 유용한 자료로 활 용하고 싶다. 카메라로 그때그때 사진으로 상황을 기록으로 남기고 그에 대한 상황과 내 생각을 적어두면 도움이 많이 될 것 같다. 이런 어플이 있는 스마트폰을 사려고 친구들의 스마트폰에서 관련 어플을 찾았으나 마땅한 기능을 가진 어 플이 없어 고민이다.

2-2-3 사용자 / Task 목록

대분류 중분류 김하늘 조은이 이민우

일정 보기 월/주/일 단위로 일정보기

월/주/일 단위로 해야 할 일 보기 분류 항목별로 일정보기 카테고리 별로 일정보기 상세 일정 확인하기

00 0 0

00 0

0 0 일정 등록/수정/삭제 반복되는 일정

기한이 정해진 일정 기간이 정해진 일정

00 0

해야 할 일 등록/수정/삭제 월/주/일 단위로 해야 할 일 등록 0 0

메모 등록/수정/삭제 메모 조회하기

메모 등록/수정/삭제하기 0

0

알람 설정 알람 설정 0

C) 이민우

“목표 : 그때그때 쓰게 되는 메모를 간단히 관리하고 개인화 및 정렬기능으로 손쉽 게 일정관리를 한다.

☞성별 : 남 ☞나이 : 33세

☞직업 : 직장인, 신입사원 ☞사는 지역 : 신촌

기술친숙도

- 스마트폰이용여부 : 이용.

- 스마트폰매니아.

니즈 -일정을 카테고리별글자순별로 정렬해서 볼 수 있고 보안 기능이 필요.

- 동기 및 문제 시나리오

종이랑 펜을 가지고 다니는 것을 싫어하는 편이라 스마트폰을 쓰기 전에도 핸드폰의 메모기능을 많이 활용하였다.

피처폰에서 메모를 남길 때에는 아무래도 일정 개수이상으로 메모하는 것에 한계를 느꼈고 또 메모를 다시 찾아보기 어려웠는데 스마트폰으로 바뀐 뒤에는 편리한 메모 어플이 많아져서 메모를 한 뒤 관리하기가 쉬워졌다. 각 메모에 대 해서 알람 기능과 잠금 설정이 있어서 개인화가 되었으면 좋겠다고 생각한다.일정을 카테고리별, 변경된 시간, 글자순 으로 정리하는 기능이 있었으면 좋겠다.

2-3. 스토리보드

2.3.1 김하늘

오늘도 9시가 되기 전에 학교에 도착한 김하늘 양은 근무를 시작하기 전 잠깐의 시간을 이용해 오늘 하루 의 일정을 확인한다. 카테고리를 학교로 설정하고 학교 일정만 확인했다. 오늘은 오전에 조교 근무가 있고 오 후에 수업이 있는 날이다. 오후 수업의 준비물이 무엇인지 상세 일정을 확인하여 내용을 체크한다.

일정을 체크하고 자리에 앉아 업무를 보는데 교수님으로부터 메일이 와있다. 확인해보니 내일 오후 5시까 지 내야 하는 과제가 생겼다는 공지이다. 한숨을 쉬며 스마트폰을 꺼내 일정을 등록한다. 제목과 시간을 설정 한다. 과제를 할 수 있는 시간이 내일 오후뿐이고 과제가 너무 많다 보니 최근에 잊어버리는 경우가 많아서 2 시간 전 알람을 설정해두었다.

조교 일을 하고 있는데 같이 근무하는 동기가 다음주에 있을 학과 LT에 조교가 반드시 참석해야 한다고 전 해주었다. 선택권이 없는 나는 다음주 금요일과 토요일에 걸친 일정을 등록하고 LT라고 저장했다. 그러고 있 는 사이 지도교수님께서 찾아오셨다. 매주 수요일에 있던 정기 미팅을 금요일 점심으로 바꿨으면 좋겠다는 말씀이었다. 겹치는 일정 때문에 지도교수님이 학과에 양해를 구하고 나는 LT에 하루만 참석하는 것으로 결 정되었다. 그래서 좀 전에 저장했던 일정을 하루 일정으로 수정한다

2-3-2 조은이

은이는 이번에 삼성그룹에서 인턴을 하게 되었다. 오늘은 첫 회의가 있는 날이다. 회의 내용을 회의 중에 적었지만 화이트보드의 그림은 직접 찍어 두는 게 좋다고판단하였다. 그래서 은이는 회의가 끝난 후 폰으로 사진을 찍고 나니 사진에 대한 설명이 다이어리에 함께 정리되어 있으면 좋겠다고 생각이 들었다. 사진을 바 로 출력할 수는 없고 잊기 전에 빨리 정리를 해두고 싶은 은선은 스마트폰을 이용하기로 한다.

스마트폰의 일정관리 어플리케이션에서 메모 기능을 이용하여 사진을 추가한 뒤 간략하게 내용을 적어 넣 는다. 작성을 완료 후 확인하니 제목과 내용을 작성한 날짜와 시간이 뜨고 사진 밑에 정리된 내용이 적혀 있 다. 은이는 회의가 끝난 후 이번 주에 할 일을 정리한 뒤 스케줄을 정리하려고 한다. 주간의 to-do list를 확 인한 후 할 일을 분배하여 각각의 요일에 정리해서 써두고 나서 하루 단위의 일정을 정리하고 싶다.

주간 일정표로 넘어가 주간의 to-do list를 확인한 뒤 스케줄 분배를 하여 요일 별로 일정을 등록한다. 요일 을 선택한 뒤 제목과 상세한 내용을 작성한다. 그 다음 오늘의 일정을 등록하기 위해 주간일정표에서 오늘을 선택한다. 방금 입력한 일들이 list-up되어 있다. Time-table에 회의시간과 점심시간 저녁 약속 등을 시간 별로 등록을 한 후 해야 할 일을 분배한다.

퇴근 시간이 되어 오늘의 할 일을 다 했는지 체크해보기로 한 은이는 오늘의 일간 일정을 확인하여 완료된 일을 체크한 뒤 완료하지 못한 일을 다음 날의 일정에 등록한다.

2.3.2 이민우

이민우 대리는 습관적으로 스마트폰을 확인하는 스마트폰 매니아이다. 출근해서 자리에 앉자마자 알람이 울린다. 오늘 해야 할 일을 알려주는 알람이다. 어플리케이션을 켜보니 오전에 회의, 오후에 외부 미팅 그리 고 프로젝트 보고서 제출 마감 일정이 보인다.

리스트 형식으로 나열된 화면을 보고 카테고리를 구분해야겠다고 생각한다. 카테고리 분류에서 ‘외부 일정

’ 카테고리를 추가하고 외부 미팅 일정을 ‘외부 일정’ 카테고리에 넣는다. 회사 일과 외부 일정이 다른 색으로 표시되어 있어 구분하기 쉬워졌다. 10시가 되어 회의에 참석했다. 다음주 거래처 미팅에 중요한 메모사항이 있어 일정 내용 안에 메모하여 저장하였다. 중요한 사항이기 때문에 보안 기능을 이용해 거래처 미팅 일정을 비밀 일정으로 돌린다. 또한 미팅 전에 준비자료를 찾아서 정리해야 하기 때문에 to-do list에 다음주 해야 할 일을 등록한다.

3. 인터페이스 설계

인터페이스 설계는 사용자들로 실제 어플을 사용해보도록 한 사용자테스트를 근거로 하여 예상 인터페 이스를 스토리보드에 삽입하였다. 예상 인터페이스는 손으로 그린 스케치를 이용하였다. 그 다음 인터 페이스는 사용자평가를 위한 페이퍼프로토타입으로 스토리보드의 대략적인 인터페이스를 개선하였다.

페이퍼 프로토타입은 스마트폰과 비슷한 크기를 위해 A4종이를 4등분하여 스케치로 어플 모양을 만들 었고 일정추가 및 삭제 등을 레이어로 활용하기 위해 포스트 잇을 여러 사이즈로 이용하여 스케치본 위 에 붙이는 방식으로 만들었다.

3-1 초기 디자인

[메인화면]

스토리보드작성예시 페이퍼프로토타입

[일정보기_주간,일간]

상 하단 메뉴탭의 불명확한 아이콘을 수정하고 불필요한 기능을 삭제.

상단 메뉴는 일정추가와 일정상세보기 메뉴로 구성.

해야할 일 목록을 메인에 추가

하단메뉴는 일정과 메모추가, 설정메뉴로 구성.

주간보기 일간보기

[일정추가]

[메모 등록]

사용자평가에서 가장 문제가 많이 제기 되었던 주간,일간 일정보기 화면 – 월간/주간/일간 보기의 전환이 불편하며 일정이 나열되어 있어서 내용 확인이 어려움

상단에 일정리스트를 제공하여 한눈에 알아보기 쉽게 구성

과다한 기능으로 사용에 불편함을 주는 일정추가 화면

불필요한 기능을 없애고 복잡한 화면 정리

ㅊ

[ 기타]

메모등록화면

기존에 메모는 일정의 부가 설명 정도의 기능만을 제공함

메모기능을 분리하고 사진 설정 기능 추가

일정필터, 폴더설정 메뉴 삭제 일정수정 시 시스템오류 알림 삭제

알람설정, 카테고리 기능 추가 오늘의 할일 목록에서 삭제 기능추가 개인화 기능으로 보안 설정 추가

4. 데모 시스템

인터랙티브 프로토타입은 네이버에서 만든 ‘NHN Design Studio’ 라는 툴을 사용하여 구현하였다. 본 툴 은 인터랙티브 프로토타입을 만들기 위해 만들어진 툴로써, 기본적인 버튼이나 테이블과 같은 기능을 제공하 여 쉽고 간편하게 인터랙티브 프로토타입을 제작 가능하다. 최종적인 비주얼 디자인을 만들기 전에 비주얼 디자이너에게 제공하기 위한 전체적인 시스템 디자인을 보여주기 위한 UI 프로토타입을 만들기 위한 툴이다.

NHN Design Studio를 사용하여 만든 toto’s diary 어플의 인터랙티브 프로토타입에 대한 설명이다.

초기 메인화면

월간일정 : 기간있는 일정

월간 일정보기

메인화면으로 사용

상단 탭에서 월 버튼을 누르면 볼 수 있음

+ 버튼이나 날짜를 더블탭하 여 일정추가 가능

일정 추가화면

날짜에서 체크박스를 누르면 두 번째 날짜를 선택할 수 있어 기 간 있는 일정 등록 가능

공개 여부를 선택할 수 있게 하 여 비공개를 선택하면 암호가 걸 림

기간 있는 일정의 경우에는 화 살표로써 기간이 있음을 보여줌

월간일정 : 기한있는 일정 주간 일정 일정 상세보기

기한 있는 일정은 조그마한 네 모로 카테고리의 색이 뜨며 날 짜를 탭 하면 작게 일정을 확인 가능.

일정보기의 상단이나 하단에는 해야 할 일을 볼 수 있음.

주간 일정도 월간일정처럼 작은 네모로 카테고리가 보이며 일정 의 제목과 내용이 간략하게 보 임.

일정을 상세하게 보기 위한 화 면

일정을 제목과 날짜, 카테고리, 알람, 내용으로 정돈하여 보여 줌.

기존에 일정을 한눈에 파악하기 힘든 인터페이스를 개선

일간일정보기 해야 할 일 해야 할 일 등록

일간일정은 시간의 유무에 따 라 칸에 보이게 하여 시간 설정 없이도 일정등록이 가능.

To do 탭의 메뉴

기간/기한이 없는 일을 따로 모 아서 관리 가능

일정에서도 함께 보기 가능

+버튼을 누르면 바로 키보드가 활성화되어 손쉽게 해야 할 일 을 등록할 수 있음.

메모 등록

메모보기 메모 목록

메모를 작성하는 화면

내용을 작성하고 사진을 추가 할 수 있음

사진을 여러 개 추가 가능

공개 여부를 선택하여 암호를 걸 수 있음

메모 내용을 상세하게 볼 수 있 는 화면

우측 상단에 메모를 등록한 날짜 를 볼 수 있음

그림이 크게 보이며 더 크게 보 기를 원한다면 + 버튼을 누르면 됨.

메모 탭을 누르면 보이는 메인 화면

그림이 있다면 작은 썸네일 이 미지와 메모를 등록한 날짜, 첫 줄의 내용만 보이게 하여 메모 를 쉽게 목록으로 볼 수 있게 함

5. 결론

본 프로젝트는 스마트폰 일정관리 어플리케이션인 Toto’s diary(이하 Toto)의 사용자 인터페이스를 개선 하는 것을 목적으로 첫번째 사용자 인터뷰를 통한 작업분석을 통해 페르소나를 설정하고 스토리보드를 작성 하였다. 스토리보드를 바탕으로 휴리스틱 평가 및 페이퍼프로토타입을 제작하였고 사용자 테스트를 통해 개 선된 UI를 검증하였으며 그 결과를 토대로 인터렉티브 프로토타입을 제작하였다.

프로젝트 과정을 통해 가장 크게 개선된 점은

1 기존의 불명확한 아이콘 및 메뉴명을 수정하여 보편적인 인터페이스로 변경되었다.

2 일정등록 및 수정기능이 간소화 되었고 사용자에게 통제권이 부여되었다.

3 월간/주간/일간 일정의 전환이 어려웠던 기존 인터페이스가 수정되어 월간, 주간, 일간 보기가 직관 적이면서 유연성을 가지게 되었고 개인화 기능의 추가로 사생활 보호가 가능하다.

4 일정관리 안에 일정에 대한 코멘트 추가 정도의 기능밖에 하지 않았던 메모기능이 분리되어 설정이 간편하고 사진추가도 가능하도록 개선되었다

수정 보완해야 할 점

추가적인 사용성 평가를 통해 도출되는 문제점들을 보완한다. 인터랙티브 프로토타입으로는 확인하기 힘 든 실제 스마트폰용 프로토타입의 제작을 통해 본 프로젝트의 인터랙티브 프로토타입에서 도출하지 못한 문 제점을 수정 보완하도록 한다.