2016 알바천국 Capstone Design

1. 알바천국 '현위치'메뉴
리뉴얼 제안서
계원예술대학교 디지털미디어디자인과
2016.10.29 Ver 1.0

2. 사용자 인터뷰
인터뷰 질문지
1. 알바를 찾을 때, 가장 먼저 고려하는 부분은 무엇인가요?
2. 알바천국 앱에서 자주 사용하는 메뉴는 무엇인가요?
3. 원하는 위치에서 인근 지역의 자세한 주소(ex.○○동)를 모두 인지하고 계신 가요?
4. 알바천국 앱 내에서 GPS지도를 이용해 정확한 주소를 몰라도 주변 지역의 알바를 찾을 수 있습니다. 해당 메뉴에 대해 알고 계신가요?
5. 현위치 메뉴를 이용해 보시고, 현위치를 사용해본 후기를 알려주세요.
인터뷰 대상
20대 남녀 학생 4명 선발
인터뷰 질문
: 알바를 가장 많이 하는 연령인 20대들을 대상으로 인터뷰를 진행함
25세
남성
대학생
22세
여성
대학생
21세
여성
대학생
24세
여성
대학생

3. 사용자 인터뷰
알바천국 사용자 심층인터뷰
Q. 알바를 찾을 때, 가장 먼저 고려하는 부분은 무엇인가요?
성별 나이 답변
여 22 가까운 거리위주로 아르바이트를 찾습니다.
여 21 가까운 지역과 노동 유형을 위주로 먼저 봅니다.
남 25 보편적으로는 지역>종류>시급 순으로 봅니다.
여 24 집에서 가까운 거리의 기준과 그 다음은 시급입니다
Q. 알바천국 앱에서 자주 사용하는 메뉴는 무엇인가요?
성별 나이 답변
여 22 내가 할 수 있는 아르바이트 채용정보를 가장 많이 봅니다(직종 / 날짜 …)
여 21 맞춤 알바 검색을 가장 자주 사용합니다.
남 25 잘 써보진 않았지만 지역별이요! 가장 많이 쓸 것 같습니다.
여 24 가까운 곳의 알바를 찾는 것(지역별)을 자주 사용합니다

4. 사용자 인터뷰
알바천국 사용자 심층인터뷰
Q. 원하는 위치에서 인근 지역의 자세한 주소(ex/○○동)를 모두 인지하고 계신가요?
성별 나이 답변
여 22 역 한 정거장거리까지는 알고 있고, 정보가 부족할 경우 네이버 지도 앱을 이용합니다.
여 21 시가 넘어가지 않는 한 알고 있습니다. (동네 지리에 대해 잘 알고 있는 사용자)
남 25
아니요. 대충 1,2,3동으로 나누어진 곳 외에는 잘 알지 못합니다. 이게 차라리 지도 모양으로 나오면 좋을 것 같아요.
지역별에서 동 선택 시, 지도에서 영역을 선택할 수 있게끔?
여 24 아니요 대략의 동네명으로 설정을 합니다. 동이 애매해서 가깝지 않은 동까지 설정되는 경우가 많습니다.

5. Q. 알바천국 앱 내에서 GPS 지도를 이용해 정확한 주소를 몰라도 주변 지역의 알바를 찾을 수 있습니다. 해당 메뉴에 대해 알고 계신 가요?
성별 나이 답변
여 22 아니오, 모르고 있었습니다.
여 21 몰랐습니다.
남 25 몰랐습니다. 설명을 들어보니, ‘현위치’라는 메뉴를 사용하면 될 것 같긴 해요.
여 24
해당메뉴를 바로 찾아 사용하지 못하였습니다. 지역별 메뉴를 탭에 들어가서 위치 설정을 찾다가 다시 메뉴 리스트로
돌아가 현위치라는 메뉴인가?하고 사용 하였습니다.
사용자 인터뷰
알바천국 사용자 심층인터뷰

6. 사용자 인터뷰
알바천국 사용자 심층인터뷰
Q. 현위치 메뉴를 사용해 보시고, 현위치를 사용해 본 후기를 말씀해주세요.
성별 나이 답변
여 22 지도에서 이전 / 다음 공고 버튼의 위치 및 크기가 지도 보는 데에 거슬립니다.
여 21 페이지를 넘길 때 자동으로 상단으로 가지 않는게 불편하고 . 현위치가 뭘 의미하는지 모르겠습니다.
남 25
분류가 되어 있으면 좋을 듯해요. 정보를 보려면 하나하나 눌러봐야 하니..
핀에 하트가 무슨 의미인지 모르겠습니다. 저는 현위치로 가는 것이 꼭 필요하지는 않을 것 같아요.
지도에서 검색이나 손으로 찾는 것이 더 유용해요.
여 24
현위치라는 메뉴명이 확실치 않은 사용성을 줍니다. 현위치? 현위치를 뭐? 이런 생각이 들고요 메뉴 위치 선정에도 문
제가 있는 것 같습니다. 메뉴를 따로 빼지 않고 지역별 탭 안에서 부가적으로 해결하는 것도 괜찮을 것 같습니다.

7. 레퍼런스 리서치
리서치 키워드
지역에 관한
사용자 니즈가 많음
‘현위치’메뉴
인지도 부족
‘현위치’메뉴의
불편함이 많음
‘현위치’메뉴가
유용하게 쓰일 수 있음
‘현위치’메뉴의
레이블링 및 메뉴 위치 문제
‘현위치’메뉴
UI개선 필요성

8. 핀 분류 방식
바로가기 버튼.
빠르게 사용 할
수 있는 메뉴 방
식
레퍼런스 리서치
리서치 키워드
정보 나열 방식
‘현위치’메뉴 UI개선_리서치

9. 핀 분류 방식
바로가기 버튼.
빠르게 사용 할
수 있는 메뉴 방
식
레퍼런스 리서치
리서치 키워드
정보 나열 방식
‘현위치’메뉴 UI개선_리서치

10. 핀 분류 방식
바로가기 버튼.
빠르게 사용 할
수 있는 메뉴 방
식
레퍼런스 리서치
리서치 키워드
정보 나열 방식
‘현위치’메뉴 UI개선_리서치

11. 네이버지도 망고플레이트 다이닝코드
하단에 리스트 출력
하단정보를 스와이핑 해서 볼 수 있음
UI 리서치

12. 혼밥인의 만찬 tumblr We heart it
UI 리서치
Floating Action Button 사용

13. YAP place GPS Note
UI 리서치
지도 전체에 일러스트 사용
각 지역의 주요 건축물 등의 일러스트 활용

14. 새차장주유소 트래블라인 굿닥
UI 리서치
필터링 결과에 따라 다른 핀 디자인
지점 브랜드 및 이름을 핀에 노출

15. Opinet 파킹박
UI 리서치
각 브랜드를 핀에 표시
브랜드 이미지 표시

16. Floating
Action
Button
Pin 기능
효율성
극대화
하단에 배치된 업장 리스트를
지도와 함께 제공하여 사용자에게
핵심 정보를 신속히 보여줌
복잡한 지도 구조에서
아이콘, 색상, 강약 조절을 통해
가장 중요한 Pin 기능 효율을
극대화 시킴.
핵심 아젠다 도출
하단
정보 리스트

17. 복잡한 지도 구조에서
아이콘, 색상, 강약 조절을 통해
가장 중요한 Pin 기능 효율을
극대화 시킴.
핵심 아젠다 도출
하단
정보 리스트
Pin 기능
효율성
극대화
Floating
Action
Button
즐겨찾기, 직종 선택 메뉴를
버튼으로 단축화하여
보다 깔끔하고 편리한 UI 제공

18. 복잡한 지도 구조에서
아이콘, 색상, 강약 조절을 통해
가장 중요한 Pin 기능 효율을
극대화 시킴.
핵심 아젠다 도출
하단
정보 리스트
Floating
Action
Button
복잡한 지도 구조에서
아이콘, 색상, 강약 조절을 통해
가장 중요한 Pin 기능 효율을
극대화 시킴.
Pin 기능
효율성
극대화

19. 정보 / 기능 제공
• 시급 / 주급 / 월급 정보
• 시간정보
• 위치 정보
• 리스트 전체보기
• 지도 클러스터링 기능
• 즐겨찾기 버튼 추가
• GPS/주소 버튼 추가

20. 레이블링
알바맵
현위치

21. 레이블링
알바맵
현위치
“현위치” 라는 레이블링이 사용자의 현위치를 제공하는 기능으로 인지하고 있는 사용자가 대부분
+
지도의 핀 기능을 통해 채용 정보를 제공해 주는 기능이라는 점을 알려주기 위해
“알바맵“ 으로 변경

22. Description
탐앤탐스 안양역점
알바맵
image
시급 7000원 1년이상 오전 9-12시
7
• 업체 로고이미지, 시급, 장단기. 시간 등 표기
• 2개 이상시 처럼 화살표 표시
• 탭 시, 상세보기 페이지로 이동.
8 업체 로고 이미지
• 모양에 맞게 축소하여 자동 맞춤 될 수 있도록 함.
• 등록된 이미지가 없을 시, 상점모양의 일러스트(기본 등록)
경기도 의왕시 포일동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
7
8 9
알바 정보창
7-1
탐엔탐스 외 3개
9 아이콘 정보
• 아이콘 하단에 아이콘 정보 표시
• 해당 정보는 업체측 등록 시 설정하는 값을 불러옴
• 정보없음 일 시, 전화협의로 바꾸고 이에 맞는 전화아이콘으로 대
체함
★
▲ 목록
7-1
1/3
2/3
7
• 업체명 오른쪽에 전체 개수와 현재 페이지 번호 ‘현재/전체’형태로
표시
• 정보가 있는쪽에 화살표와 로고이미지가 일부 보여짐
알바 정보창 (정보가 2개 이상일 때)
7-1
image
image
시안

23. 정렬조건
확인
▼ 지도
탐앤탐스 안양역점
Icon Icon Icon
709M
설빙 인덕원점
Icon Icon Icon
708M
스타벅스 안양역점
Icon Icon Icon
700M
총 28건 정렬조건▼
직종선택▼
탐앤탐스 안양역점
Icon Icon Icon
609M
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
계원예술대학교 디지털미디어디자인과
Description
1
2 직종선택 버튼
• 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로 직종 제공
3 정렬조건 버튼
4
거리정보 제공
5
• 지역,지하철,스팟등 장소검색 가능
검색창(입력박스)
• 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로 직종 제공
2-1
3-1
알바정보
• 한페이지에 총 10개 업체 정보 제공
• 업체로고 이미지, 시급, 시간 근무 일에 대한 이미지 제공
• 업체로고 이미지, 시급, 시간 근무 일 등
구인정보에 대한 이미지 제공
알바맵 알바맵
탐앤탐스 안양역점
Icon Icon Icon
709M
설빙 인덕원점
Icon Icon Icon
708M
스타벅스 안양역점
Icon Icon Icon
700M
총 28건 정렬조건▼
직종선택▼
2 3
4 5
탐앤탐스 안양역점
Icon Icon Icon
609M
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
▼ 지도
직종선택
확인
매장관리 서빙 주방
서비스 생산 기능
사무 회계 IT 디자인
상담 영업 강사교육
2-1
시급높은순 일급높은순
주급높은순 월급높은순
연봉높은순 가까운 순
3-1
지도 돌아가기 아이콘
6
• 목록을 내리고 지도를 볼 수 있는 페이지(M_M_0)로 돌아감.
• 이동 시 지도 위치값은 팝업 전 위치로 고정
6
2-1 직종선택 팝업
• 하단 직종 탭 시, 칸 색이 변하면서 선택됨을 알림. 한번 더 탭 시,
선택취소.
• 중복선택가능.
• 기본 값은 전체선택.
• X버튼 탭 시, 팝업 닫힘 (팝업 내 설정값 적용 안됨)
• 확인버튼 탭 시, 리스트 페이지로 이동 ( 설정값 적용하여 새로고
침됨)
▼
시안

24. End of Document
계원예술대학교 디지털미디어디자인과
2016.10.29 Ver 1.0

25. 2016.12.02 Ver 2.1
Usability Test Report
계원예술대학교 디지털미디어디자인과
박채원, 조영지, 김윤신, 안가은
알바천국 어플리케이션 사용성테스트

26. INDEX
Introduction
1 Result
2 Recommendation
3
방법론 및 진행 프로세스
테스트 목적
참가자 프로파일
테스트 환경
테스크 시나리오
테스크별 수행시간, 접근경로
리얼보이스
사후인터뷰
시선추적(Eye Tracking)
문제점에 대한 해결방향

27. INDEX
Introduction
1 Result
2 Recommendation
3
방법론 및 진행 프로세스
테스트 목적
참가자 프로파일
테스트 환경
테스크 시나리오
테스크별 수행시간, 접근경로
리얼보이스
사후인터뷰
시선추적(Eye Tracking)
문제점에 대한 해결방향

28. 1.Introduction
방법론 및 진행 프로세스
사용성 테스트
진행 프로세스
Usability Test는 서비스의 사용성을 개선하기 위한 방법 중 하나로, 구체적인 문제점을 발견하고 사용자의 행동 패턴을 파악할 수 있는 방법이다.
정성적 테스트 방식으로 진행해 7명 내외의 참가자를 사용자 리서치를 통해 선정하고 서비스 내 중요한 과정 및 기능을 과제로 제시,
과제 수행 결과 와 서비스 이용 중 참가자의 행동과 반응을 토대로 객관적인 데이터 값과 인사이트를 도출해
서비스의 장단점 및 개선 방향을 알아 보기 위한 방법으로 사용성 테스트를 진행했다.
테스트
목표 설정
시나리오
작성
테스트 진행
결과 도출
&분석
개선 방향
도출

29. 1.Introduction
테스트 목적
‘알바천국’ 사용자들이 말하는 문제점 파악
알바천국 어플리케이션 사용자들의 진솔한 의견 또는 직접 사용하는 것을 가까이서 보기위해 이 테스트를 진행한다.
사전 설문조사와 사후 개인 인터뷰를 통해 사용하면서 느낀 불편사항들을 직접 들어볼 수 있도록 하며,
이를 통해 발견한 문제점들을 분석하고 정리하여 개선까지 나아갈 수 있도록 하였다.
경쟁사 ‘알바몬’과의 비교분석
경쟁사인 ‘알바몬’을 같은 시나리오로 테스트를 진행하고 ‘알바천국’과 비교·분석하여,
‘알바천국’ 어플리케이션이 발전할 수 있는 방향을 모색한다.
‘현위치’ 메뉴의 UX/UI 분석
‘현위치’ 메뉴를 사용하는 테스크를 시행함으로써 현위치 메뉴의 문제점을 파악할 수 있으며
사용자 인터뷰를 통해 개선방향에 대한 좀 더 실질적인 의견을 얻고자 한다.

30. 1.Introduction
참가자 프로파일
성별
남자 2명
여자 6명
연령
20대 5명
30대 3명
40대 0명
50대 이상 0명
스마트폰 숙련도
숙련도가 높은 경험자 8명
숙련도가 낮은 경험자 0명
서비스 사용경험
사용 경험이 있는 사용자 4명
사용 경험이 없는 사용자 4명
서비스명 알바천국
알바천국의 실질적인 사용자 연령층을 바탕으로 가장 많은 사용자 층이 되고 있는
20대를 위주로 설정하였다.
알바천국 서비스는 PC버전으로도 많이 사용되나, 이 테스트는 어플리케이션에 관
한 테스트이므로 어플을 주로 쓰는 사람들을 타겟으로 삼았다. 즉 스마트폰에 익숙
하지 않은 사용자가 아닌 숙련도가 보통 이상인 사용자층을 뽑아 테스트하였다.
신규사용자, 기존 사용자 모두 테스트하기 위해 비슷한 비율로 뽑아 테스트를 진행
하였다.
※ 스마트폰 숙련도 기준 (예 / 아니오 대답)
1. 스마트폰을 끄고 킬 수 있다.
2. 스마트폰에서 원하는 앱 프로그램을 찾아 설치, 삭제가 가능하다.
3. 스마트폰 작동이 안 될 때 스스로 장애 문제를 해결할 수 있다.
4. 스마트폰에서 다운받은 파일을 찾아 열 수 있다.
5. 스마트폰을 초기화 시킬 수 있다.

31. 한수아 여 20대 높음 있음 iOS
박진주 여 20대 높음 없음 Android
김성실 여 30대 높음 없음 Android
장윤제 여 30대 높음 있음 iOS
이은탁 남 30대 높음 없음 Android
김세연 남 20대 높음 있음 Android
이소연 여 20대 높음 있음 Android
김세희 여 20대 높음 없음 iOS
이름 성별 연령대 스마트폰 숙련도 서비스 사용경험 사용 운영 체제
1.Introduction
참가자 프로파일
성별
여성 남성
연령대
20대 30대 40대 50대 이상
서비스 사용 경험
있음 없음
사용 운영 체제
Android iOS

32. 1.Introduction
테스트 환경

33. 1.Introduction
테스크 시나리오
1. 원하는 어플리케이션을 통하여 자신에게 맞는 시간과 장소의 알바를 구해보세요.
1. 당신은 알바천국 어플을 통하여 새로운 일을 구하려고 합니다. 서울시 마포구 서교동 지역에서 서빙 업무 관련 알바를 찾아보세요.
2. 당신은 학교 주변의 아르바이트를 구하고 싶지만 주소가 기억나지 않습니다. 어플리케이션에서 정확한 주소를 몰라도 지도를 이용해 알바 찾기가 가능합니다.
해당 기능을 찾아 계원예대 근처 알바를 구해주세요.
3. 당신은 드라마 보조출연 알바를 구하려고 합니다. 직종별 메뉴를 통하여 원하는 알바를 구해보세요. 지역 및 방송사의 조건은 상관 없습니다.
어플리케이션 첫 인상에 대한 테스크
‘알바천국’ , ‘알바몬’ UX/UI에 대한 테스크 사용자가 처음 선택한 어플리케이션부터 1~3까지.

34. INDEX
Introduction
1 Result
2 Recommendation
3
방법론 및 진행 프로세스
테스트 목적
참가자 프로파일
테스트 환경
테스크 시나리오
테스크별 수행시간, 접근경로
리얼보이스
사후인터뷰
시선추적(Eye Tracking)
문제점에 대한 해결방향

35. 2. Result
테스크별 수행시간, 접근경로
대부분의 경우 지역별 메뉴를 가장 먼저 선택하였으며, 후에 검색이나 상세 조건을 선택하였다.
1. 원하는 어플리케이션을 통하여 자신에게 맞는 시간과 장소의 알바를 구해보세요.
한수아(20대) 103초 메인 > 단기알바 > 상세조건검색 > 완료
박진주(20대) 65초 메인 > 맞춤알바(조건설정) > 검색 > 완료
김성실(30대) 60초 메인 > 지역별 > 상세조건검색 > 완료
장윤제(30대) 36초 메인 > 지역별 > 상세조건설정 > 검색 > 완료
이은탁(30대) 225초 메인 > 지역설정 > 맞춤알바(조건설정) > 검색(상세설정) > 완료
김세연(20대) 35초 메인 > 단기 알바 > 상세조건검색 > 완료
이소연(20대) 54초 메인 > 지역별 메뉴 > 지역 선택 > 직종 선택 > 완료
김세희(20대) 50초 지역별 > 검색조건설정 > 완료
이름 수행시간 접근경로
알바천국 선택
알바몬 선택
평균 78.5초

36. 2. Result
테스크별 수행시간, 접근경로
지역별 메뉴에서의 상세조건 설정에서 다소 어려움을 겪어 보다 많은 시간이 걸리는 것을 알 수 있었다.
2. 당신은 알바 어플을 통하여 새로운 일을 구하려고 합니다. 서울시 마포구 서교동 지역에서 서빙 업무 관련 알바를 찾아보세요.
한수아(20대) 68초 지역별 > 지역선택 > 완료
박진주(20대) 47초 메인 > 지역선택 > 직종선택 > 완료
김성실(30대) 50초 지역별 > 상세조건검색 > 완료
장윤제(30대) 118초
메인 > 지역별 > 상세조건설정 > 검색 > 상세조건검색 > 직종별 > 상세조건검
색 > 완료
이은탁(30대) 134초 지역별 > 상세설정 > 완료
김세연(20대) 56초 지역별 > 상세조건검색 > 완료
이소연(20대) 40초 메인 > 지역별메뉴 > 지역선택 > 직종선택 > 완료
김세희(20대) 152초
지역별 > 상세조건설정 > 업직종상세설정 > 재설정 > 지역검색 > 검색 > 재설
정 > 완료
이름 수행시간 접근경로
한수아(20대) 35초 지역별 > 지역상세설정 >완료
박진주(20대) 50초 메인 > 지역 설정 > 지역별 > 검색조건 설정 > 희망업직종 선택 > 완료
김성실(30대) 77초 지역별>상세설정>완료
장윤제(30대) 103초 메인>지역검색>지역알바>검색조건설정>완료
이은탁(30대) 62초 지역별 > 상세검색 > 검색조건설정>완료
김세연(20대) 75초 메인 > 지역검색 > 지역알바 > 검색조건설정 > 완료
이소연(20대) 62초
메인 > 지역알바 > 검색조건설정> 희망근무지 설정 > 서교동 > 검색조건설
정 > 직종검색 > 완료
김세희(20대) 58초 지역설정 > 검색조건설정 > 검색 > 완료
이름 수행시간 접근경로
평균 83.13초 평균 65.25초

37. 2. Result
테스크별 수행시간, 접근경로
여기에 결과값 설명 간단하게~
3. 당신은 학교 주변의 아르바이트를 구하고 싶지만 주소가 기억나지 않습니다. 어플리케이션에서 정확한 주소를 몰라도 지도를 이용해
알바 찾기가 가능합니다. 해당 기능을 찾아 계원예대 근처 알바를 구해주세요.
한수아(20대) 197초 마이메뉴편집 > 현위치(알바맵) > 검색 > 현위치(알바맵) > 완료
박진주(20대) 116초
메인 > 마이메뉴 설정 > 지역별 메뉴 > 핫플레이스 > 채용정보 홈 > 현위치 >
완료
김성실(30대) 68초 메인 > 직종별 > 지도내에서 검색 > 완료
장윤제(30대) 78초 메인 > 현위치(알바맵) > 위치 내 검색 > 지도스와이핑 > 완료
이은탁(30대) 66초 메인 > 현위치(알바맵) >완료
김세연(20대) 68초 직종별 > 지도에서 검색 > 완료
이소연(20대) 43초 메인 > 현위치 > 지역별 > 역세권 > 핫플레이스(실패)
김세희(20대) 210초 메인 > 지역별 > 핫플레이스 > 지역별 > 상세검색 > 실패
이름 수행시간 접근경로
한수아(20대) 60초 알바지도 > 위치선택 > 지도내에서 검색 > 완료
박진주(20대) 108초
메인 > 대학가 근처 > 검색 > 지역별 > 전체알바 > 검색조건서정 > 햄버거메
뉴 > 즐겨찾는 메뉴 편집 > 내 스팟 저장 > 근처알바찾기 > 완료
김성실(30대) 60초 지역별 > 알바지도 > 지도내에서 검색>완료
장윤제(30대) 157초
지역별 > 취소 > 단기알바 > 취소 > 마이메뉴 > 취소 > 검색 >취소>맞춤알
바 > 알바지도 > 지도스와이핑 > 완료
이은탁(30대) 134초 즐겨찾는메뉴 > 알바지도 > 소팅조건설정 > 지도스와이핑 > 완료
김세연(20대) 55초
알바지도 > 위치선택 > 지도내에서 검색 > 완료
이소연(20대) 30초 메인 > 지역별 > 알바지도 > 검색조건 설정 > 완료
김세희(20대) 144초 지역별 > 검색조건설정 > 업직종별 > 업직종선택 > 완료
이름 수행시간 접근경로
‘지도’ 메뉴의 위치가 눈에 띄지 않아 메뉴를 찾는 데에 어려움을 겪는 사용자가 다수였고, 메뉴 안의 기능 사용에도 어려움을 겪었다.
성공
실패
평균 105.37초 평균 93.5초

38. 2. Result
테스크별 수행시간, 접근경로
1차 직종 선택하는 부분에서 알바몬보다 많은 터치수와 긴 수행시간을 요하였다.
4. 당신은 드라마 보조출연 알바를 구하려고 합니다. 직종별 메뉴를 통하여 원하는 알바를 구해보세요.
지역 및 방송사의 조건은 상관 없습니다.
한수아(20대) 78초 직종별 > 조건상세검색 > 완료
박진주(20대) 99초 메인 > 직종별 > 1차 직종 선택 > 2차 직종 선택 > 지역 선택
김성실(30대) 93초 직종별 > 조건상세선택 > 완료
장윤제(30대) 74초 직종별 > 상세조건설정 > 조건재확인 > 재설정 > 완료
이은탁(30대) 70초 맞춤알바 > 단기알바 > 업/직종별 검색
김세연(20대) 70초 지역별 > 조건설정 > 완료
이소연(20대) 42초 메인 > 직종별 > 1차 직종 선택 > 2차 직종 선택 > 완료
김세희(20대) 69초 메인 > 직종별 > 1차 직종 선택 > 2차 직종 선택 > 완료
이름 수행시간 접근경로
한수아(20대) 70초 업직종별 > 상세검색(지역포함) > 완료
박진주(20대) 42초
메인 > 전체 알바 > 업직종별 > 희망 업직종 선택 > 검색조건설정 > 지역설
정 > 완료
김성실(30대) 70초 지역별 > 조건설정 > 완료
장윤제(30대) 302초
희망직종선택 > 업직종별 > 검색조건설정 > 업직종별 > 희망직종선택 > 직
종별 > 검색 > 직종 > 조건설정 > 직종선택 > 완료
이은탁(30대) 70초 지역별 > 조건설정>완료
김세연(20대) 99초
메인 > 직종별 > 1차 직종 선택 > 2차 직종 선택 > 지역 선택
이소연(20대) 39초 메인 > 업직종별 > 희망 업직종 선택 > 완료
김세희(20대) 32초 메인 > 업직종별 > 희망 업직종 선택 > 검색조건 설정 > 완료
이름 수행시간 접근경로
평균 74.38초 평균 60.28초 장윤제씨의 자료는 비정상범위 자료로 처리.

39. 2. Result
리얼 보이스
‘지도’가 나오는 메뉴를 찾지 못 해 혼란스러워하는 사용자가 많았고, ‘지도’ 서비스가 지역별 메뉴 안에 있을 것이라 생각하는 사용자가 다수 있었다.
한수아(20대) 지도를...? 아마도? 지역별. / 드라마 보조출연. 드라마. 드라마가 뭐야? 내가 보기에 드라마는... 서비스야.
박진주(20대) 지도가... 지도가 있단 말이죠? 정말로죠? 정말로. 핫플레이스 이건가?
김성실(30대) 지도를 이용해서 꼭 찾아야 하는 거예요?
장윤제(30대) 그냥 검색으로 하면 안되나?
이은탁(30대) 요즘 알바 구하기도 힘들구나. 지도가 어디 있는지 모르겠는데. ...현위치.
김세연(20대) 지역 다시 설정해야 하나?
이소연(20대) 아, 불편해. 어, 아까 찾았는데. / 지도가 없는데요. 이거는 못 찾겠어요.
김세희(20대) 지도가 어딨어? 지도가 없어. 지도 어딨는거야. 못찾겠네. 없어, 지도. 뭐야. 있어? 이거 포기하면 안 돼요? 알바몬은 딱 보였는데. / 보조출연자가 서비스인가요?
이름 리얼 보이스
알바천국 앱 서비스 사용 시

40. 2. Result
사후 인터뷰
‘현위치’ 레이블링 및 메뉴 위치 지적이 많았으며 카테고리 분류의 직관성이 부족하여 탐색에 어려움을 겪은 사용자가 많았다.
한수아(20대) 알바몬의 직종 분류 직관성이 더 명확함. 현위치 레이블링이 기능 인지에 어려움을 줌. 현위치 메뉴의 스크롤 정보 제공 UI가 부족.
박진주(20대) 1차 직종 분류의 기본 선택이 삭제되지 않아 불편을 겪음. 현위치 핀 위치 이동이 가능할 것이라 예상했으나 불가능하여 어려움을 겪음.
김성실(30대) 메뉴 위치의 변경이 필요, 채용 관련 카테고리 분류가 예측이 안되어 찾기 어려움. 보기 쉬운 정렬 기준으로 제공 필요.
장윤제(30대) 검색을 많이 활용 하는 편, 검색 이용이 더 신속하다 느낌. 알바몬은 텍스트가 눈에 띄지 않아 어려움.
이은탁(30대) 햄버거 메뉴 자주 이용. 카테고리 분류의 직관성이 부족하며 메뉴가 다양하여 찾는데 어려움을 겪음.
김세연(20대) 현위치 메뉴명의 예측이 어려움. 알바몬 화면이 큼직큼직해서 보기 편했음.
이소연(20대) 알바몬이 사용하기 편하고 정보 제공 양이 많음. 레이블링의 직관성이 부족하며 로그인 시 맞춤 소팅 제공 원함.
김세희(20대) 현위치 레이블링이 알바맵에 비하여 인지하기 어려움. 보조출연자는 IT 계열이라고 생각하여 헤맴.
이름 인터뷰 내용
알바천국과 알바몬 비교 인터뷰

41. 2. Result
시선추적(Eye Tracking)
시선 추적(Eye tracking)이란?
Usability Test를 진행하면서 사용자의 시선을 추적하여 사용자가 화면에서 중점적으로 보는 부분, 시선의 진행 순서를 알 수 있는 방법이다.
사용자에게 각 화면의 구성이 어느 정도의 주목도를 가지는지, 얼마나 사용자의 시선을 잡아 둘 수 있는지의 여부를 체크할 수 있다.
헤딩 데이터를 통해 현재 메뉴의 위치나 디자인의 변경 등을 고려해 볼 수 있다.
데이터 보는 방법 :
화면에 도달했을 때 숫자 표기를 통해 사용자의 시선 경로를 알 수 있으며,
원이 커질수록 사용자가 오래 시선을 둔 부분이라는 의미이다.
알바천국 어플리케이션의 Eye Tracking 진행 화면 ▶

42. 2. Result
시선추적(Eye Tracking)
▲ 알바천국 현위치 ▲ 알바몬 알바지도

43. 2. Result
시선추적(Eye Tracking)
알바천국 메인 화면에서는 주로 글로벌 네비게이션을 통해
메뉴로 진입하는 사용자가 많았고, 시선도 네비게이션에 주로 머물렀다.
(but, 네비게이션 내에서 시선분산이 심한편임)
▲ 알바천국 메인화면 ▲ 알바몬 햄버거메뉴
알바몬에서는 햄버거 메뉴를 통해 메뉴로 진입하는 사용자가 많았으며,
아이콘으로 이루어진 ‘즐겨찾는 메뉴’에 시선이 가장 먼저 가면서
오래 머무르고, 순차적으로 내려갔다.
주요 메뉴를 아이콘으로 구성한다면 메뉴간의
중요도(시선유도) 차이를 둘 수 있음.

44. 2. Result
시선추적(Eye Tracking)
▲ 알바몬 햄버거메뉴 ▲ 알바몬 채용정보
햄버거 메뉴내의 아이콘으로 이루어진 ‘즐겨찾는 메뉴’에 시선이 가장
먼저 가면서 오래 머무르고, 순차적으로 내려갔다.
알바몬 채용정보 화면에서도 이와 비슷하게아이콘으로 이루어진 정보
요약에 가장 먼저 시선이 쏠리는 것을 볼 수 있다.
정보를 볼 때, 글만 있는 것 보다 아이콘과 함께 있는부분에 더 짧은 시
간동안 시선이 머무른 것을 보아 아이콘이 쉽고 빠르게 정보를 인지할
수 있음을 알 수 있다.
정보를 빨리 읽도록 해주기 위해서는
아이콘과 함께 있는 것이 좋음.

45. INDEX
Introduction
1 Result
2 Recommendation
3
방법론 및 진행 프로세스
테스트 목적
참가자 프로파일
테스트 환경
테스크 시나리오
테스크별 수행시간, 접근경로
리얼보이스
사후인터뷰
시선추적(Eye Tracking)
시사점 도출
앞으로의 개선방향

46. 3. Recommendation
시사점 도출
지역에 관한
사용자 니즈가 많음
‘현위치’메뉴
인지도/직관성 부족
애매한
직종 분류 기준,
그로 인한 사용성 저하

47. 3. Recommendation
앞으로의 개선방향
지역에 관한
사용자 니즈가
많음
‘현위치’메뉴
인지도 / 직관성
부족
애매한
직종 분류 기준,
그로 인한
사용성 저하
지역에 관한 서비스 강화
(현위치, 핫플레이스 등)
현위치 메뉴 위치변경
레이블링 변경
-
직종별 메뉴
레이아웃 및 UI 변경

48. Usability Test Report
계원예술대학교 디지털미디어디자인과
박채원, 조영지, 김윤신, 안가은
알바천국 어플리케이션 사용성테스트
2016.11.28 Ver 2.0

49. 2016.12.03 Ver 1.0
알바맵 메뉴 상세설계
계원예술대학교 디지털미디어디자인과
박채원, 조영지, 김윤신, 안가은
알바천국 어플리케이션 현위치 개선 스토리보드

50. 버전 날짜 내용 내용상세 작성자 비고
0.1 2016-11-25 가이드라인 / 초안 가이드라인 및 초안 박채원, 조영지, 김윤신, 안가은
0.2 2016-11-25 추가 가이드라인 수정 박채원
0.3 2016-11-26 추가 화면 추가 박채원
0.4 2016-11-27 추가 리스트 화면 추가 김윤신
0.5 2016-11-28 수정 리스트 화면 드롭다운 >>> 팝업으로 수정 김윤신
0.7 2016-11-28 플로우 차트 추가 플로우차트 추가 조영지
0.9 2016-11-29 컨펌 후, 수정 보완
‘즐겨찾기 지역을 추가해보세요~ ‘문구 추가
브랜드이미지 다음 이미지들 보이게 수정
화면경로 작성
리스트 버튼,즐겨찾기 버튼 위치 변경
버튼 라벨링
정렬조건 - 가까운순추가
박채원
1.0 2016-12-02 수정 및 추가
유저시나리오 – 오류들 수정
즐겨찾기 팝업 변경 등 화면 추가 및 수정
디스크립션 디벨롭
박채원
문서 이력
0.2 updated
0.3 updated
0.4 updated
0.5 updated
0.7 updated
0.9 updated
1.0 updated

51. SKT 오후 04:08
탐앤탐스 안양역점
알바맵
서울 강남구 역삼동 알바를 찾아주지!!
★
Icon Icon Icon Icon
Description
화면ID: Main_S2 화면명 지역변경
화면경로
★
우리집
학교
+
계원예술대학교 디지털미디어디자인과
2
1
5
6
7
5-1
8
1 GSP 현위치 버튼
• 탭 시, GPS기능을이용해 현 위치로 지도화면이동.
• 오른쪽에 지역 주소 표시됨.
2 현 위치 표시
• ‘현주소값+알바를찾아주지!!’문구
• 디폴트값(GPS값없을시) – ‘너가 어디든 알바를 찾아주지!!’
• 주소부분or오른쪽삼각형모형탭 시, ‘Main_S1’화면으로이동
3 리스트보기버튼
• 탭 시, 리스트보기화면으로 이동 (오른쪽에서슬라이드되며나옴)
4 지도화면
• 화면을 움직일 때마다 그 지역의 알바를 점으로 보여줌.
• 일정 값으로 지도 지도 축소 시, 클러스터링.(알바수로 보여줌)
6 알바정보 창
• 업체로고 이미지, 시급, 시간 근무 일 등
구인정보에대한 이미지 제공
7 업체 로고 (이미지)
지역 즐겨찾기 버튼
4
3
5
• 플로팅 버튼. 탭 시, 과 같이 상단으로나열
5-1
8 시급, 시간, 근무일 이미지(아이콘)
삭제됨 (문서p4로 수정)
0.2 updated

52. 화면ID: M_M_0 화면명 알바맵 메인 화면
화면경로 메인 > 알바맵
Description
알바맵
★
2
1
4
1 GSP 현위치 버튼
• 탭 시, GPS기능을이용해 현 위치로 지도화면이동.
• 오른쪽에 지역 주소 표시됨.
2 현 위치 표시
• ‘현주소값+알바를찾아주지!!’문구
• 디폴트값(GPS값없을시) – ‘너가 어디든 알바를 찾아주지!!’
• 주소부분or오른쪽삼각형모형탭 시, ‘Main_S1’화면으로이동
경기도 의왕시 포일동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
인덕원역이
근처에 있습니다
5
6
3 목록 버튼
• 현재 지도 범위에 포함된 모든 알바가 리스트로 보여짐
• 탭 시, 리스트보기화면으로 이동 (아래쪽에서슬라이드되며 나옴)
4-1
4 지도화면
• 화면을 움직일 때마다 그 지역의 알바를 점으로 보여줌.
• 일정 값으로 지도 지도 축소 시, 클러스터링.(알바수로 보여줌)
5 핫 플레이스팝업
• 현 위치에서가장 가까운(5km이내)핫플레이스에대한 정보 팝업
• ‘000(핫플레이스이름) +근처에 있습니다’
• 지도 상 움직임이감지되면 띄워주고,5초 후 자동으로사라짐
• 탭 시, 해당 핫 플레이스로지도 이동
6 지역 즐겨찾기 버튼
• 플로팅 버튼. 탭 시, 팝업
탐엔탐스 외 3개
4-1 아이콘
• 알바 스팟 탭 시, 대표 업직종(1차분류기준)의아이콘 표시 – 대표
업직종은 광고상품우선이며 광고상품 없을 시, 최근등록순
• 하단에 정보나타남
• 2개 이상의 알바 정보가 있을 시, 상단에 ‘--외0개’ 표시
• 10~12자 띄어쓰기 우선으로 줄바꿈
• 사이드에 있는 핀 탭 시. 양옆 최소간격유지할 수 있을 만큼 지도화
면이 안쪽으로 이동.
6-1
0.2 updated
▲ 목록
3
즐겨찾기 지역
우리집
학교
저장
+
6-1
편
집
0.9 updated

53. 화면ID: M_M_0 화면명 알바맵 메인 화면
화면경로 메인 > 알바맵 > 즐겨찾기 탭
Description
탐앤탐스 안양역점
알바맵
image
시급 7000원 1년이상 오전 9-12시
1 즐겨찾기 지역 목록
• 등록된 즐겨찾기 지역이 나타남
• 최대 4개까지 등록가능
• 즐겨찾기 버튼 탭 후, +버튼 옆에 ‘즐겨찾기지역을 추가해보세요
’ 문구가 뜨고 5초후 자동으로사라짐
• + 버튼 탭 시, 팝업
2 지역 즐겨찾기 등록 팝업
• 디폴트 값 ‘즐겨찾기1,2,3’
• ㅊ 탭 시, 입력박스내용 삭제
• 입력박스 – 최대 6글자까지 등록가능
• 확인 탭 시, 6-1에 등록됨.
• 닫기 탭 시, 이전화면으로이동
경기도 의왕시 포일동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
학교
탐앤탐스 안양역점
알바맵
★
★
image
시급 7000원 1년이상 오전 9-12시
경기도 의왕시 포일동 알바를 찾아주지!!
우리집
학교
+
지역 즐겨찾기 등록
즐겨찾기 1 x
닫기 확인
6-2
6-1
6-2
6-2
x
▼
0.3 updated
★
▲ 목록
우리집
학교
+
즐겨찾기 지역을
추가해보세요 
6-1
즐겨찾기 팝업 변경
0.9 updated

54. 화면ID: M_M_F1 화면명 알바맵 즐겨찾기지역
화면경로 메인 > 알바맵 > 즐겨찾기
Description
알바맵
1 편집 버튼
• 탭 시, ‘M_M_F2’즐겨찾기 지역 편집 화면으로이동
2 설정된 즐겨찾기 지역 목록
• 탭 시, 지도로 이동(즐겨찾기등록된 위치값)
• 설정된 즐겨찾기 지역이 하나도 없을 경우 : ‘+버튼을 탭하여, 현재
지역을 즐겨찾기로등록해보세요!’문구 노출
경기도 의왕시 포일동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
3 즐겨찾기 추가 버튼
• 탭 시, 화면으로이동. (+한글키패드노출)
5 저장 버튼
• 탭 시, 이전화면(M_M_0알바맵 메인화면)으로이동
• 이동 시 지도 위치값은팝업 전 위치로 고정
3-1 즐겨찾기 지역 추가
• 키패드 오른쪽 상단 완료 버튼 추가
• 팝업은 상단 최소마진값을남겨두고최대로 올려줌.( 팝업 디자인
시, 키패드가올라와도 4개 목록이 다 보이도록 할 것)
• 완료 탭 시, 추가 완료되며 키패드 사라짐
• 입력박스 디폴트 값 ‘즐겨찾기1,2,3,4’: 등록된 지역이름 중 ‘즐겨
찾기 1’이 없으면 ‘즐겨찾기1’로, 있다면 ‘즐겨찾기2’,’즐겨찾기3’,’
즐겨찾기4’차례로표기
• 입력박스는최대 6글자까지 등록가능
▲ 목록
1.0 updated
★
즐겨찾기 지역
우리집
학교
저장
+
편
집
알바맵
경기도 의왕시 포일동 알바를 찾아주지!!
▲ 목록
★
즐겨찾기 지역
우리집
학교
취소 저장
즐겨찾기1ㅣ
편
집
1
2
3
5
3-1
3-1

55. 화면ID: M_M_F2 화면명 알바맵 즐겨찾기지역 편집
화면경로 메인 > 알바맵 > 즐겨찾기> 편집
Description
1 뒤로가기 버튼
• 탭 시, 편집 전 팝업으로 이동됨
2 닫기 버튼
• 탭 시, 팝업 닫힘(M_M_0알바맵 메인화면으로이동)
• 이동 시 지도 위치값은팝업 전 위치로 고정
계원예술대학교 디지털미디어디자인과
3 체크박스
• 탭 시, 처럼 변경됨.
4 수정 버튼
• 지역이름을변경할 수 있게 됨. 로 이동
▼
1.0 updated
알바맵
경기도 의왕시 포일동 알바를 찾아주지!!
▲ 목록
★
즐겨찾기 지역 편집
우리집
학교
삭제
수
정
수
정
알바맵
경기도 의왕시 포일동 알바를 찾아주지!!
▲ 목록
★
즐겨찾기 지역 편집
우리집
학교
삭제
V
1 2
3
5
4
3-1
4-1
3-1 즐겨찾기 지역 추가
• 탭 시, 체크박스에체크되며,목록 선택 표시(색으로)
• 탭 시, 아래 삭제 버튼이 활성화 됨.
• 체크가 하나이상일때, 오른쪽 수정버튼이사라짐
3-1

56. 화면ID: M_M_F2 화면명 알바맵 즐겨찾기지역 편집
화면경로 메인 > 알바맵 > 즐겨찾기> 편집
Description
계원예술대학교 디지털미디어디자인과
1.0 updated
알바맵
경기도 의왕시 포일동 알바를 찾아주지!!
▲ 목록
★
즐겨찾기 지역 편집
우리집
학교
삭제
수
정
수
정
알바맵
경기도 의왕시 포일동 알바를 찾아주지!!
▲ 목록
★
즐겨찾기 지역 편집
우리집ㅣ
학교
삭제
완
료
수
정
4-1
4-1 즐겨찾기 지역 수정
• 탭 시, 키패드가 올라옴.(한글키패드)
• 키패드에 입력창이가려질 경우, 팝업이 위로 이동됨
• 키워드를 한글자 이상 입력하였을때 오른쪽 ‘완료’버튼이활성화
• 완료버튼 탭 시, 키패드가 내려가고변경값 저장된 팝업 창으로 변
환

57. 화면ID: M_M_0 화면명 알바맵 메인 화면
화면경로 메인 > 알바맵 > 핀 탭
Description
탐앤탐스 안양역점
알바맵
image
시급 7000원 1년이상 오전 9-12시
7
• 업체 로고이미지,시급, 장단기.시간 등 표기
• 2개 이상시 처럼 화살표 표시
• 탭 시, 상세보기 페이지로 이동.
8 업체 로고 이미지
• 모양에 맞게 축소하여 자동 맞춤 될 수 있도록 함.
• 등록된 이미지가 없을 시, 상점모양의일러스트(기본등록)
경기도 의왕시 포일동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
7
8 9
알바 정보창
7-1
탐엔탐스 외 3개
9 아이콘 정보
• 아이콘 하단에 아이콘 정보 표시
• 해당 정보는 업체측 등록 시 설정하는 값을 불러옴
• 정보없음 일 시, 전화협의로바꾸고 이에 맞는 전화아이콘으로대
체함
0.3 updated
★
▲ 목록
7-1
1/3
2/3
7
• 업체명 오른쪽에 전체 개수와 현재 페이지 번호 ‘현재/전체’형태로
표시
• 정보가 있는쪽에 화살표와 로고이미지가일부 보여짐
알바 정보창 (정보가 2개 이상일 때)
7-1
image
image
1.0 updated

58. 화면ID: M_S_0 화면명 지역변경
화면경로 메인 > 알바맵 > 현주소 탭
Description
탐앤탐스 안양역점
알바맵
★
4
image
시급 7000원 1년이상 오전 9-12시
서울 강남구 역삼동 알바를 찾아주지!!
계원예술대학교 디지털미디어디자인과
Cancel
지역
경기도 안양시 동안구 관양2동
경기도 안양시 동안구 평촌동
지하철
인덕원역
평촌역
스팟
계원예술대학교
IT밸리
2
1 3
1
• 지역,지하철,스팟등장소검색 가능
2 검색 도움 창
• 가까운 지역, 지하철,스팟(랜드마크,학교,핫플레이스등등)2개씩
표시
• 주소 탭 시, 해당 지역으로 지도 이동 (Main_0 화면으로 이동)
• 입력박스에한 글자 이상 검색 시, 로 변경됨
검색창(입력박스)
탐앤탐스 안양역점
알바맵
★
4
image
시급 7000원 1년이상 오전 9-12시
서울 강남구 역삼동 알바를 찾아주지!!
Cancel
경기도 안양시 동안구 관양2동
경기도 안양시 동안구 평촌동
동안구청
동안 고등학교
동안산병원
동안교회
동안
2-1 2-1
2 검색 도움 창
• 검색한 글자가 들어간 주소,지하철,스팟표시
• 해당 글자가 있는 것 중 0. 내 최근 검색 순 1.가까운 순서 , 2.앱사
용자들이 많이 본 순서로 나열.
• 개수 제한 없이 나열(스트롤가능)
2-1
검색어삭제
• 탭 시, 입력된 글 전체 삭제
• 입력된 글 삭제시 2번 검색 도움 창 기본 값으로 변경됨.
3
4
지도 화면
• 탭 시, 지도화면으로이동 (Main_0 화면으로 이동)
4
5
검색 닫기 버튼
• 탭 시, 검색창 닫힘 (Main_0 화면으로 이동)
5
0.3 updated
1.0 updated

59. 화면ID: M_S_0 화면명 지역변경
화면경로 메인 > 알바맵 > 현주소 탭
Description
계원예술대학교 디지털미디어디자인과
탐앤탐스 안양역점
알바맵
★
4
image
시급 7000원 1년이상 오전 9-12시
서울 강남구 역삼동 알바를 찾아주지!!
Cancel
검색어를 한글자 이상으로 입력해주세요.
ㄱ
2-2
2 검색 도움 창
• ㄱ 과 같은 자음 또는 모음만 입력되었을경우 : ‘검색어를한글자
이상으로 입력해주세요.’문구 노출
2-2
1.0 updated
탐앤탐스 안양역점
알바맵
★
4
image
시급 7000원 1년이상 오전 9-12시
서울 강남구 역삼동 알바를 찾아주지!!
Cancel
서울시 송파구 가락동
경기도 가평구 가평읍
가산디지털단지역
가락시장역
강서구청
강남역
가
2-3
2 검색 도움 창
• 한글자만 검색하였을경우 2-1과 같은 원리로 노출될 수 있도록
하되, 정보가 많을 경우 스크롤로 내릴 수 있도록함.
2-3

60. 정렬조건
확인
▼ 지도
탐앤탐스 안양역점
Icon Icon Icon
709M
설빙 인덕원점
Icon Icon Icon
708M
스타벅스 안양역점
Icon Icon Icon
700M
총 28건 정렬조건▼
직종선택▼
탐앤탐스 안양역점
Icon Icon Icon
609M
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
화면ID: M_L_0 화면명 목록화면
화면경로 메인 > 알바맵 > 목록
계원예술대학교 디지털미디어디자인과
Description
1
2 직종선택 버튼
• 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로직종 제공
3 정렬조건 버튼
4
거리정보 제공
5
• 지역,지하철,스팟등장소검색 가능
검색창(입력박스)
• 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로직종 제공
2-1
3-1
알바정보
• 한페이지에총 10개 업체 정보 제공
• 업체로고 이미지, 시급, 시간 근무 일에 대한 이미지 제공
• 업체로고 이미지, 시급, 시간 근무 일 등
구인정보에대한 이미지 제공
0.5 updated
0.4 updated
0.2 updated
1.0 updated
알바맵 알바맵
탐앤탐스 안양역점
Icon Icon Icon
709M
설빙 인덕원점
Icon Icon Icon
708M
스타벅스 안양역점
Icon Icon Icon
700M
총 28건 정렬조건▼
직종선택▼
2 3
4 5
탐앤탐스 안양역점
Icon Icon Icon
609M
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
▼ 지도
직종선택
확인
매장관리 서빙 주방
서비스 생산 기능
사무 회계 IT 디자인
상담 영업 강사교육
2-1
시급높은순 일급높은순
주급높은순 월급높은순
연봉높은순 가까운 순
3-1
지도 돌아가기 아이콘
6
• 목록을 내리고 지도를 볼 수 있는 페이지(M_M_0)로돌아감.
• 이동 시 지도 위치값은팝업 전 위치로 고정
6
2-1 직종선택 팝업
• 하단 직종 탭 시, 칸 색이 변하면서 선택됨을알림. 한번 더 탭 시,
선택취소.
• 중복선택가능.
• 기본 값은 전체선택.
• X버튼 탭 시, 팝업 닫힘 (팝업 내 설정값 적용 안됨)
• 확인버튼 탭 시, 리스트 페이지로 이동 ( 설정값 적용하여 새로고
침됨)
▼

61. ▼ 지도
탐앤탐스 안양역점
Icon Icon Icon
709M
설빙 인덕원점
Icon Icon Icon
708M
스타벅스 안양역점
Icon Icon Icon
700M
총 28건 정렬조건▼
직종선택▼
탐앤탐스 안양역점
Icon Icon Icon
609M
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
시급 7000원 1년이상 오전 9-12시
화면ID: M_L_0 화면명 목록화면
화면경로 메인 > 알바맵 > 목록
계원예술대학교 디지털미디어디자인과
Description
0.5 updated
0.4 updated
0.2 updated
1.0 updated
알바맵
3-1 정렬조건 팝업
• 하단 직종 탭 시, 칸 색이 변하면서 선택됨을알림. 한번 더 탭 시,
선택취소.
• 중복선택 불가능.
• 기본 값은 거리 가까운 순으로
• X버튼 탭 시, 팝업 닫힘 (팝업 내 설정값 적용 안됨)
• 확인버튼 탭 시, 리스트 페이지로 이동 ( 설정값 적용하여 새로고
침됨)
정렬조건
확인
시급높은순 일급높은순
주급높은순 월급높은순
연봉높은순 가까운 순
3-1

62. 탐앤탐스 안양역점 오픈 아르바이트
Icon Icon Icon Icon
등록일 : 2016.11.25 ㅣ 업데이트 : 2016.12.03 04:00
6300원 3-6개월 주4일 08시 -03시
모집조건
12월 02일
2명
무관
모집마감
모집인원
성별
지원하기
2
3
4
화면ID: M_S_0 화면명 상세보기
화면경로 메인 > 알바맵 > 상세보기
계원예술대학교 디지털미디어디자인과
Description
0.5 updated
0.4 updated
0.2 updated
1.0 updated
탐엔탐스 안양역점 탐엔탐스 안양역점
씨엔티테크㈜
주소 : 서울 서대문구 증가로29길 35 (북가좌동) 씨엔티테크
전화 : 02.3151.8008
모집직종 서빙.주방 > 커피전문점> 조리
복리후생 산재보험,고용보험
상세 채용 정보 + 확대보기
지원하기
7
12월 02일
2명
무관
21세(1996년생)~25세(1992년생)
무관
초보가능
모집마감
모집인원
성별
연령
학력
기타사항
탐앤탐스 커피 안양역점입니다.
초보도 지원할 수 있으며, 오픈시간이지만
일은 어렵지 않습니다.
최소 3개월 이상 장기근무 가능하신분
남녀 모두 지원 가능합니다.
오전 8시부터 근무하며 오픈 준비로 인해
12월 초부터 근무합니다. 9
1
2
1
2
1
2 공고 날짜 제공
• 아르바이트구인 공고 날짜 제공
3 상세 채용정보 제공
4
확대보기 버튼
7
• 텍스트 좌측 화살표 탭시, 이전화면인목록 화면으로이동
되돌아가기버튼
• 아이콘과 텍스트로시급, 근무일 , 시간 등 모집 조건 제공
• 해당 정보는 업체측 등록 시 설정하는 값을 불러옴
• 정보없음 일 시, 전화협의로바꾸고 이에 맞는 전화아이콘으로대체함
지도 이미지 제공
• 업체 장소 위치 제공 탭했을 경우 지도화면 풀화면로 제공 (현재 상
세페이지의지도보기와동일기능)
• 상세 채용정보 확대화면팝업으로 제공 공백 화면 (탭 했을 때
화면 닫힘)
8 지원하기 버튼
TOP 버튼
• 좌측 전화 아이콘 탭했을 때 자동으로 전화화면으로이동
그외에 문자 지원, 이메일 지원 화면으로이동
• 최상단으로올라가는 버튼 , 탭했을 경우 가장 상단으로 올라감
1
5
6
8
9
5 회사 정보
• 업체 등록시 필수정보 불러옴.전화번호,주소,업체명
6 모집조건
• 모집조건 입력 시, 등록된 정보 불러옴.(정보가 없을 경우 항목에
서 제외되며입력값만 불러옴 – 복리후생,모집직종도동일)

63. Use Case Scenario
0.7 updated
1.0 updated
TAP
swipe
알바 pin TAP 하단 정보 영역 Swipe
하단 정보 영역
반대로 Swipe
1. 핀 정보보기

64. Use Case Scenario
0.7 updated
1.0 updated
TAP
알바 pin TAP ‘목록’ TAP
뒤로가기 TAP
TAP
2. 지도영역 전체 목록 보기
‘지도’ TAP

65. Use Case Scenario
‘직종선택’TAP ‘매장관리’TAP
‘매장관리’TAP
TAP
3. 목록 상세검색
매장관리
TAP
1.0 updated
X 버튼 TAP

66. Use Case Scenario
TAP
상단 주소TAP ‘ㄱ’입력
Cancle 버튼 TAP
Or
글자 전부 지우기
TAP
4. 지도 검색
1.0 updated
상단 주소 TAP

67. Use Case Scenario
1.0 updated
TAP
즐겨찾기 버튼 TAP + 버튼 탭
X 버튼 TAP
5. 즐겨찾기 추가
TAP
X
‘저장’ 버튼 탭

68. Use Case Scenario
TAP
‘편집’ 버튼 TAP 체크박스 탭
체크박스 탭
6. 즐겨찾기 삭제
TAP
1.0 updated
뒤로가기 탭

69. Use Case Scenario
TAP
상단 주소TAP ‘ㄱ’입력
완료 TAP
7. 즐겨찾기 수정
TAP
1.0 updated
뒤로가기 탭

70. 계원예술대학교 디지털미디어디자인과
박채원, 조영지, 김윤신, 안가은
알바천국 어플리케이션 현위치 개선 스토리보드
End of document
2016.12.03 Ver 1.0