INTERACTION DESIGN I

!1416118 임다혜

1310585 최하늘

1313158 황희영

자리모아!

CAFE APP + SMART 공간

목�������차

Wire frame

사용성�평가�스크립트

01

02

테스트�결과�및�개선점

03

Wire frame

01

Task model

02

Task flow

02

User journey

02

Wire frame

02

➝

➝

Wire frame _ 주변빈자리찾기 및 카페정보

02

앱�실행 현재�자신의�위치�설정�페이지 현재�자신�위치�기반�카페�추천�목록페이지�

(현재�빈자리�현황�위주)

카페�클릭��➝��간략정보�페이지 상세보기�페이지

02

즐겨찾기�원할�시�즐겨찾기�추가�

길찾기�클릭자신의�위치와�카페위치�간략�표시 길�상세보기 지도�연동 지도�연동�및�서비스�이용

➝

Wire frame _ 카페정보 및 길안내 서비스

02

사진보기

Wire frame _ 카페정보 안내

카페�클릭��➝��간략정보�페이지 상세보기�페이지 상세보기�페이지 가격정보

02

Wire frame _ 카페정보 안내

상세보기�페이지 상세보기�페이지 공유하기 클립보드�복사

02

깔대기�맞추기�-�선호�항목�담기 로그인이�안되어있을시�로그인�화면 로그인�화면 로그인�화면

Wire frame _ 깔대기 맞추기, 마이페이지, 로그인

마이페이지

02

Wire frame _ 회원가입

회원이�아닌경우 회원�가입 회원�가입 회원�가입�완료

02

Wire frame _ 메뉴

메뉴 원하는�카테고리�선택 카페�추천리스트 마음에�안들�시�다른�카테고리�검색현재�자신의�위치�설정�페이지

02

Wire frame _ 메뉴

찾아보기 지역명으로�찾아보기 지역명�검색 지역명�검색

02

Wire frame _ 메뉴

찾아보기 사진보기 가격정보상세보기�페이지카페명�검색

02

Wire frame _ 메뉴

찾아보기 역이름으로�검색 마음에�들지�않을시�하단에�다른�지역�검색 검색

02

Wire frame _ 메뉴

찾아보기 현재�자신의�위치�설정�페이지 현재�자신�위치�기반�카페�추천�목록페이지�

(현재�빈자리�현황�위주)

카페�클릭��➝��간략정보�페이지

02

Wire frame _ 마이페이지

마이페이지즐겨찾기�목록 깔대기�목록

02

Wire frame _ 후기

카페상세보기후기 후기쓰기 후기쓰기

사용성�평가�스크립트

02

03

사용성 평가 스크립트

자리모아(ZARI�MOA)�프로토타이핑�사용성�평가�Task�스크립트�5월�18일

Bold Italic 사용자에게�제공하는�지시사항

우리는�새로운�서비스를�만들었습니다.�이�서비스는�완성된�것이�아니고,�간단하게�클릭만�할�수�있

도록�화면만�구현이�되어있습니다.�클릭하여�잘못된�결과가�나오더라도�이것은�아직�프로토타입�상

태이기�때문입니다

(버블톡�훈련시키기)�사용성�평가에서�중요한�것은�사용자가�머릿속으로�생각하고�있는�것을�모두�말

로�표현하여�주는것이�매우�중요합니다.�클릭을�하기전에�어떤�생각으로�무엇을�찾고있는지,�왜�클릭

하고�싶은지,�클릭하면�어떤�화면이�나올것으로�기대하는지를�상세하게�계속�말해주어야�효과적인�

테스트가�가능합니다.

Task 1-1

Task 1-2

Task 2

Task 3

카페를�가기�위하여�가장�먼저�어떤�일을�하시겠습니까?

당신은�카페를�가기�위해�자리모아앱을�실행합니다

현재�당신은�카페를�가야합니다.�카페를�가기위해�가장먼저�무엇을�할�것입니까?

가고�싶은�카페가�생겼습니다.�어떻게�갈�것인지�찾아보세요

정보들을�보다�보니�나에게�필요한�정보들만�보고싶어�검색을�시작합니다

카페정보들을�보다가�필요한�정보가�생기거나�다시�참고해야할�정보를�발견했습니다�

그래서�그�정보들을�저장을�하려고�합니다

03

사용성 평가 스크립트

Task 4

Task 5

프로토타입으로�제공된�ZARI MOA의�대부분의�서비스를�이용하여보셨습니다

친구에게�길을�알려줘야하거나�지인에게�자신이�발견한�카페의�정보를�나누고�알려줘야합니다�

앱안에있는�기능을�이용하여�알려주세요

당신은�자신이�원하는�항목대로�카페�정보를�찾기�원합니다.�자신이�원하는�항목을�토대로�카페를�

분류해�주세요

03

사용성 평가 스크립트

테스트�결과�및�개선점

03

03

사용성 평가 테스트

scene1 scene2 scene3

03

사용성 평가 테스트

03

사용성 평가 테스트 결과 및 개선점

ZARI�MOA�위치설정�및�간략정보�확인 음료수�가격정보가�간략정보에는�없어서�아쉬웠다

ZARI�MOA�길찾기�페이지 길찾기할때,�실제�모습이나�뷰어가�카페를�클릭했을때�바로�나타났으면�좋겠다

마이페이지

어려움은�없었는데,�깔때기가�정보를�모아주는거같은데�정확히�뭔지�모르겠다

그동그라미(이미지?말하는거같음)부분은�딱히�없어도�될거같다,깔때기에�지역이�추가되었으면�좋겠다,��

내가�주로�가는�지역을�추가하는거

깔대기

깔대기를�설정을�하고�확인하는�버튼이�있었으면�좋겠고,�선택하는�버튼이�있었으면�좋겠다

거리도�추가되었으면�좋겠다

#�scene1

PAGE 개선해야할점

간략정보에�가격�추가

로드뷰

‘깔대기’에�대한�설명�페이지

깔대기�항목에�‘지역’추가

확인버튼추가

개선점

03

사용성 평가 테스트 결과 및 개선점

위치�설정 숫자들이�무엇을�위미하는지�알기�어렵다.

상세�정보 콘센트가�있는�자리도�표시되었으면�좋겠다

깔대기 깔대기�모양이�너무�작아�알아보기가�힘들다

#�scene2

PAGE 개선해야할점

빈자리�라는�설명�추가

보류

메뉴�이름�클릭시�사진으로�연결

좀더�확실한�모양으로�변경

개선점

메뉴�사진도�첨부되어�있으면�좋겠다

03

사용성 평가 테스트 결과 및 개선점

위치설정�및�빈자리보기�페이지숫자와�동그라미가�무엇을�의미하는지�알기�힘들다.

ZARI�MOA�길찾기�페이지 무엇이�버튼이고�무엇이�내용인지�구분하기가�힘들다.

검색 버튼�구분이�있었으면�좋겠다.

깔대기

너무�작아서�아이콘이�깔대기�모양인지�헷갈린다.

눌렀을�때�화면이�어떤�창이�나오는지�예상할�수�없다.

#�scene3

PAGE 개선해야할점

컬러를�추가

색이나�두꺼운�선��등으로�구분

입체감을�주는등의�방법을�사용

화살표�모양�등으로�교체�

개선점

색이�두가지라�구분이�힘들다

정보�거르기�등의�문장으로�설명

Thank you!