자리모아 임다혜,황희영,최하늘_final

92
Interaction design 카페빈자리 찾기 앱 1416118 임다혜 1310585 최하늘 1313158 황희영 자리

Upload: dahye-lim

Post on 20-Jan-2017

1.254 views

Category:

Design


1 download

TRANSCRIPT

Interaction design

카페빈자리�찾기�앱

!1416118�임다혜�

1310585�최하늘�

1313158�황희영

자리모아

목�������차

와이어프레임 사용성평가�스크립트�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

와이어프레임 사용성평가�스크립트�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

와이어프레임_��흐름

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

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

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

위치�설정�및�빈자리�찾기

위치�설정�후�주변�빈자리를�검색,�카페들의�정보들을�확인할�수�있다

와이어프레임_��설명

상세정보�및�길안내�

카페�상세정보화면에서�관련�정보들과�길찾기,�공유하기�등의�기능을�제공한다

와이어프레임_��설명

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

상세정보�및�길안내�

카페�상세정보화면에서�관련�정보들과�길찾기,�공유하기�등의�기능을�제공한다

와이어프레임_��설명

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

상세정보�및�길안내�

카페�상세정보화면에서�관련�정보들과�길찾기,�공유하기�등의�기능을�제공한다

와이어프레임_��설명

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

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

상세정보�및�길안내�

카페�상세정보화면에서�관련�정보들과�길찾기,�공유하기�등의�기능을�제공한다

와이어프레임_��설명

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

카테고리�검색�및�찾아보기�

와이어프레임_��설명

위치기반서비스를�이용하지�원치�않을때에도�카테고리나�찾아보기�기능을�제공하여�자유로운�검색기능을�제공한다

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

카테고리�검색�및�찾아보기�

와이어프레임_��설명

위치기반서비스를�이용하지�원치�않을때에도�카테고리나�찾아보기�기능을�제공하여�자유로운�검색기능을�제공한다

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

로그인�및�회원가입

와이어프레임_��설명

타�SNS어플을�이용한�로그인과�이메일을�이용한�회원가입이�가능하다

로그인이�안되어있을시�로그인�화면 로그인�화면 로그인�화면 회원이�아닌경우

로그인�및�회원가입

와이어프레임_��설명

타�SNS어플을�이용한�로그인과�이메일을�이용한�회원가입이�가능하다

회원�가입 회원�가입�완료회원�가입

필터(깔대기)�및�마이페이지

와이어프레임_��설명

로그인�서비스중�하나로�카페�정보들을�걸러주는�필터(깔대기)�기능과�마이페이지�기능을�제공한다

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

와이어프레임 사용성평가�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

스크립트�양식�및�테스트�전�알림�사항

사용성평가_��스크립트

기초�질문�사항�및�첫인상�테스트

사용성평가_��스크립트

태크스�1_�위치설정�및�길찾기

사용성평가_��스크립트

태크스�2,3_�검색�및�즐겨찾기

사용성평가_��스크립트

태크스�4,5_�공유�및�필터

사용성평가_��스크립트

최종�질문

사용성평가_��스크립트

태크스�1_�위치설정�및�길찾기

사용성평가_��스크립트

태크스�2,3_�길찾기,�깔대기,�검색,�공유

사용성평가_��스크립트

태크스�4,5_�회원가입�및�즐겨찾기,�필터�설정

사용성평가_��스크립트

나이�:�23살�/�성별�:�여자�/�직업�:�대학생 나이�:�22살�/�성별�:�여자�/�직업�:�케이터링 나이�:�23살�/�성별�:�남자�/�직업�:�대학생

인터뷰�타겟�설정

20대의�카페를�자주�이용하는�젊은층을�타겟으로�정하였다

사용성평가_��테스트�진행

나이�:�23살�/�성별�:�여자�/�직업�:�대학생 나이�:�22살�/�성별�:�여자�/�직업�:�대학생 나이�:�26살�/�성별�:�여자�/�직업�:�대학생

인터뷰�타겟�설정

20대의�카페를�자주�이용하는�젊은층을�타겟으로�정하였다

사용성평가_��테스트�진행

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

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

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

동그라미부분은�딱히�없어도�될거같다,깔때기에�지역이�추가되었으면�좋겠다,�!내가�주로�가는�지역을�추가하는거

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

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

PAGE 개선해야할점

간략정보에�가격�추가

로드뷰

‘깔대기’에�대한�설명�페이지깔대기�항목에�‘지역’추가

확인버튼추가

개선점

#�scene�1

결과�및�개선점

PAGE 개선해야할점 개선점

#�scene�2

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

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

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

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

보류

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

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

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

결과�및�개선점

PAGE 개선해야할점 개선점

#�scene�3

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

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

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

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

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

컬러를�추가

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

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

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

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

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

결과�및�개선점

PAGE 개선해야할점 개선점

#�scene�4

위치설정�및�상세정보�페이지 앱을�두번째�부터�쓰면�편리할거�같지만,�맨처음�설정해야하는�항목들이�많은�것�같다�

(나라면�더�빨리보고싶을거�같아서)�!했던�과정중에서는�매장사진이�보였으면�좋겠다�/�말풍선같은�것을�클릭하면�그냥�다같이�나왔으면�좋겠다

길찾기�및�상세정보�페이지

길(디테일한�지도)을�보고싶어서�눌렀는데�한번�더�상세보기를�눌러야하는게�번거롭다,��

네이버�지도가�아예�처음부터연동되면�더�좋을�것�같다.�!상세보기에서�카페의�오픈,�클로즈�시간이�있었으면�좋겠고,�빈자리를�나타내주는�배치도가��

맨�위에�있는거보다카페�내부의�사진이�제일�먼저�나타났으면�좋겠다.�왜냐하면�자리가�있더라도��

분위기를�보고�카페를�선택하기때문이다

검색�및�공유�페이지 ‘검색’이라는�항목이랑�‘찾아보기’항목이랑�뭐가�다른지�모르겠고�어느�것을�눌러야할지�모르겠고�헷갈린다

위치�설정�및�선호항목�체크�페이지에�

스킵할�수�있는�버튼을�추가한다

길찾기를�나타내주는�페이지에서�

바로�연동할�수�있도록�한다�!상세정보에�오픈,�클로즈시간�추가�

레이아웃�바꾸기

검색과�찾아보기�둘중��

하나�빼거나�이름�바꾸기

나만의�항목�페이지 ‘my’가�뭔지…나만의�목록이랑�뭐가�다른건지�헷갈리고�예상과�다른거같다,��

이미�나만의�목록은�나만의�페이진데�그�위에�‘my’가�또있으니까�이건�뭐지?�싶었다

깔대기�및��선호항목�추가�페이지 ‘+’가�추가의�의미인걸�알겠는데�찾는게�힘들었다�/�‘깔대기추가’라는�항목이�추가�되도�좋을거같다

나만의�목록에서�상단에�‘my’삭제

+크기�키우기,�‘my’에서�‘깔대기�추가’�

항목�추가

결과�및�개선점

PAGE 개선해야할점 개선점

#�scene�3

위치설정�및�상세정보�페이지

길찾기�및�상세정보�페이지

검색�및�공유�페이지

깔대기�및��선호항목�추가�페이지

숫자들이�직관적으로�빈자리인지,�좌석수인지�알�수�없다.

지도의�숫자별로�아이콘의�크기가�달라졌으면�좋겠다.

상세정보가�모두�전송이�되었으면�좋겠다.

인원�설정도�가능하였으면�좋겠다.음료의�가격�설정�범위를�줄이거나�아예�직접�입력할�수�있으면�좋겠다.

자리�배치도에서�콘센트�위치,�와이파이의�정도등이�표시되었으면�좋겠고�

테이블이�아닌�의자갯수를�표시하였으면�좋겠다.�

대표�메뉴�사진�정도는�첨부되어�있으면�좋게다.

튜토리얼�창에서�확실이�설명해�준다.

배치도에�와이파이�공유기의�위치와�

콘센트의�위치등을�입력한다.�

테이블이�몇인용인지�표시하거나�

의자의�갯수로�표시한다.

전송되는�화면을�설정한다.

깔대기에�함께가는�인원을�설정할�수�

있게�한다.�

가격�범위를�직접입력�버튼을�만들어�

직접입력도�할�수�있게�한다.

결과�및�개선점

와이어프레임 사용성평가�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

튜토리얼

디자인�_1차

위치설정�후�길찾기

디자인�_1차

위치설정�후�길찾기

디자인�_1차

상세정보�및�공유

디자인�_1차

디자인�_1차

상세정보�및�공유

카테고리�및�검색

디자인�_1차

카테고리�및�검색

디자인�_1차

시작�및�튜토리얼

Color�Chip

디자인�_�2차

카페�상세보기

디자인�_�2차

카페�상세보기

디자인�_�2차

카페�상세보기

디자인�_�2차

디자인�_�2차

나만의�페이지

디자인�_�2차

필터�설정

디자인�_�2차

홈화면

디자인�_�2차

검색

디자인�_�2차

지역별�검색

디자인�_�2차

역주변�검색

디자인�_�2차

테마별�검색

테마별 검색하기로

각 카테고리 항목에 따라

카페들을 확인할 수 있다

디자인�_�2차

왼쪽�상단�메뉴

디자인�_�2차

오른쪽�상단�메뉴

현재 자신이 사용하고있는

필터를 확인할 수 있고

필터 목록 페이지로 넘어갈

수있는 메뉴

디자인�_�2차

로그인�및�회원가입

디자인�_�2차

로그인�및�회원가입

디자인�_�2차

와이어프레임 사용성평가�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

Final_��최종디자인

Creative�Guideline

Format�����������Android�display�

Font���������������NotoSans�/�Roboto�

!Color

Final_��최종디자인

앱�아이콘

Color�Chip

위치�아이콘과��

카페를�상징하는��

커피

Final_��최종디자인

시작�/�튜토리얼

Color�Chip

시작화면�

튜토리얼�

Final_��최종디자인

시작�/�튜토리얼

Color�Chip

시작화면�

튜토리얼�

Final_��최종디자인

시작�/�튜토리얼

Color�Chip

시작화면�

튜토리얼�

Final_��최종디자인

현재�위치기반�검색

Color�Chip

현재�위치�기반�검색�

간단한�조건설정�후�

위치�설정

1.�현재�자신의�위치를�기준으로��

����최대�500m까지�거리를�설정하기

2.�와이파이�/�화장실�/�흡연실�/�콘센트�등�

�����요구하는�항목�체크하기

Final_��최종디자인

현재�위치기반�검색

Color�Chip

현재�위치�검색�기반�

주변�카페�검색

현재�위치�검색�기반으로�주변�카페를�검색��

각�카페마다�빈자리의�갯수가�아이콘�안에�떠서�정보를�확인

Final_��최종디자인

카페�상세�보기

Color�Chip

현재�빈자리�정보�

위치�및�서비스�정보�

가격정보

Final_��최종디자인

Color�Chip

카페�상세�보기

선택한�카페�길찾기�

네이버�/�구글�연동

주소를�누르면�네이버�지도�/��구글지도로�연동되어�

위치�정보�바로�확인

Final_��최종디자인

카페�상세�보기

Color�Chip

가격정보�

후기정보

Final_��최종디자인

후기

Color�Chip

후기등록

Final_��최종디자인

Color�Chip

공유하기

SNS�로�공유하기

카페�상세�정보를�다�보고�난�뒤�친구나�지인에게�SNS로�

이�정보들�및�페이지�주소�링크를�전송

Final_��최종디자인

Color�Chip

홈�화면

인기별�

빈자리순�

후기별

카페를�직접�검색

인기별�/�빈자리순�/�후기별�카페�추천리스트

마음에�들면�“나만의�목록”�추가하기

최근에�설정했던�위치�기반�검색�시작

현�빈자리�상황�정보�확인

Final_��최종디자인

Color�Chip

홈�화면

후기별�

직접�검색하기

Final_��최종디자인

Color�Chip

검색하기

지역별�

역주변�

테마별

Final_��최종디자인

Color�Chip

검색하기

지역별�

역주변�

테마별

Final_��최종디자인

Color�Chip

검색하기

지역별�

역주변�

테마별

Final_��최종디자인

Color�Chip

검색하기

지역별�

역주변�

테마별

Final_��최종디자인

Color�Chip

로그인�및�회원가입

로그인�

회원가입

Final_��최종디자인

Color�Chip

로그인�및�회원가입

로그인�

회원가입

Final_��최종디자인

Color�Chip

로그인�및�회원가입

로그인�

회원가입

Final_��최종디자인

필터�설정

Color�Chip

필터�

필터설정

2.�와이파이�/�화장실�/�흡연실�/�콘센트�등�

�����요구하는�항목�체크하기

3.�지역별�/�역주변�/�테마별�등�

�����검색할�항목�체크하기

1.�가격(아메리카노�기준)�설정�하기

원하는�항목들을�선택�후�필터링하여��

카페를�찾기�위해��필터�정보�등록하기

Final_��최종디자인

필터�설정

Color�Chip

필터명�변경�

필터목록

Final_��최종디자인

필터�설정

Color�Chip

필터�설정하기�위치�

메뉴

Final_��최종디자인

나만의�카페�목록

Color�Chip

나만의�카페�목록

카페�상세�정보를�보고�마음에�들면�별�아이콘을�클릭�

나만의�카페목록으로�즐겨찾기�한�정보가�저장됨

Final_��최종디자인

나만의�카페�목록

Color�Chip

메뉴�

나만의�카페�목록

Final_��영상

스케치�스토리보드

Final_��영상

무드보드�및�참고�영상

https://vimeo.com/

138725914�

https://vimeo.com/

158608407

Final_��영상

시퀀스�보드

Final_��영상

시퀀스�보드

Final_��영상

시퀀스�보드

와이어프레임 사용성평가�

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

1차�디자인�

2차�디자인

최종디자인�

스토리보드

프로모션�영상

Final_��영상

https://vimeo.com/171489981