�ݺ�ߣ

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

목 차
와이어프레임 사용성평가 스크립트
테스트 결과 및 개선점
1차 디자인
2차 디자인
최종디자인
스토리보드
프로모션 영상

와이어프레임 사용성평가 스크립트
1차 디자인
2차 디자인
최종디자인
스토리보드
프로모션 영상

➝
➝
와이어프레임_ 흐름

앱 실행 현재 자신의 위치 설정 페이지 현재 자신 위치 기반 카페 추천 목록페이지
(현재 빈자리 현황 위주)
카페 클릭 ➝ 간략정보 페이지 상세보기 페이지
위치 설정 및 빈자리 찾기
위치 설정 후 주변 빈자리를 검색, 카페들의 정보들을 확인할 수 있다
와이어프레임_ 설명

상세정보 및 길안내
카페 상세정보화면에서 관련 정보들과 길찾기, 공유하기 등의 기능을 제공한다
사진보기카페 클릭 ➝ 간략정보 페이지 상세보기 페이지 상세보기 페이지 가격정보

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

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

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

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

카테고리 검색 및 찾아보기
위치기반서비스를 이용하지 원치 않을때에도 카테고리나 찾아보기 기능을 제공하여 자유로운 검색기능을 제공한다
찾아보기 역이름으로 검색 마음에 들지 않을시 하단에 다른 지역 검색 검색

로그인 및 회원가입
타 SNS어플을 이용한 로그인과 이메일을 이용한 회원가입이 가능하다
로그인이 안되어있을시 로그인 화면 로그인 화면 로그인 화면 회원이 아닌경우

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

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

와이어프레임 사용성평가
1차 디자인
2차 디자인
최종디자인
스토리보드
프로모션 영상

스크립트 양식 및 테스트 전 알림 사항
사용성평가_ 스크립트

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

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

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

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

최종 질문

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

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

나이 : 23살 / 성별 : 여자 / 직업 : 대학생 나이 : 22살 / 성별 : 여자 / 직업 : 케이터링 나이 : 23살 / 성별 : 남자 / 직업 : 대학생
인터뷰 타겟 설정
20대의 카페를 자주 이용하는 젊은층을 타겟으로 정하였다
사용성평가_ 테스트 진행

나이 : 23살 / 성별 : 여자 / 직업 : 대학생 나이 : 22살 / 성별 : 여자 / 직업 : 대학생 나이 : 26살 / 성별 : 여자 / 직업 : 대학생
인터뷰 타겟 설정
20대의 카페를 자주 이용하는 젊은층을 타겟으로 정하였다
사용성평가_ 테스트 진행

ZARI MOA 위치설정 및 간략정보 확인 음료수 가격정보가 간략정보에는 없어서 아쉬웠다
ZARI MOA 길찾기 페이지 길찾기할때, 실제 모습이나 뷰어가 카페를 클릭했을때 바로 나타났으면 좋겠다
마이페이지 어려움은 없었는데, 깔때기가 정보를 모아주는거같은데 정확히 뭔지 모르겠다
동그라미부분은 딱히 없어도 될거같다,깔때기에 지역이 추가되었으면 좋겠다, !
내가 주로 가는 지역을 추가하는거
깔대기 깔대기를 설정을 하고 확인하는 버튼과 선택하는 버튼이 있었으면 좋겠다
거리도 추가되었으면 좋겠다
PAGE 개선해야할점
간략정보에 가격 추가
로드뷰
‘깔대기’에 대한 설명 페이지
깔대기 항목에 ‘지역’추가
확인버튼추가
개선점
# scene 1
결과 및 개선점

PAGE 개선해야할점 개선점
# scene 2
위치 설정 숫자들이 무엇을 위미하는지 알기 어렵다.
상세 정보 콘센트가 있는 자리도 표시되었으면 좋겠다
깔대기 깔대기 모양이 너무 작아 알아보기가 힘들다
빈자리 라는 설명 추가
보류
메뉴 이름 클릭시 사진으로 연결
좀더 확실한 모양으로 변경
메뉴 사진도 첨부되어 있으면 좋겠다

# scene 3
위치설정 및 빈자리보기 페이지
숫자와 동그라미가 무엇을 의미하는지 알기 힘들다.
ZARI MOA 길찾기 페이지 무엇이 버튼이고 무엇이 내용인지 구분하기가 힘들다.
검색 버튼 구분이 있었으면 좋겠다.
깔대기
너무 작아서 아이콘이 깔대기 모양인지 헷갈린다.
눌렀을 때 화면이 어떤 창이 나오는지 예상할 수 없다.
컬러를 추가
색이나 두꺼운 선 등으로 구분
입체감을 주는등의 방법을 사용
화살표 모양 등으로 교체
색이 두가지라 구분이 힘들다
정보 거르기 등의 문장으로 설명

# scene 4
위치설정 및 상세정보 페이지 앱을 두번째 부터 쓰면 편리할거 같지만, 맨처음 설정해야하는 항목들이 많은 것 같다
(나라면 더 빨리보고싶을거 같아서)
!
했던 과정중에서는 매장사진이 보였으면 좋겠다 / 말풍선같은 것을 클릭하면 그냥 다같이 나왔으면 좋겠다
길찾기 및 상세정보 페이지
길(디테일한 지도)을 보고싶어서 눌렀는데 한번 더 상세보기를 눌러야하는게 번거롭다,
네이버 지도가 아예 처음부터연동되면 더 좋을 것 같다.
!
상세보기에서 카페의 오픈, 클로즈 시간이 있었으면 좋겠고, 빈자리를 나타내주는 배치도가
맨 위에 있는거보다카페 내부의 사진이 제일 먼저 나타났으면 좋겠다. 왜냐하면 자리가 있더라도
분위기를 보고 카페를 선택하기때문이다
검색 및 공유 페이지 ‘검색’이라는 항목이랑 ‘찾아보기’항목이랑 뭐가 다른지 모르겠고 어느 것을 눌러야할지 모르겠고 헷갈린다
위치 설정 및 선호항목 체크 페이지에
스킵할 수 있는 버튼을 추가한다
길찾기를 나타내주는 페이지에서
바로 연동할 수 있도록 한다
!
상세정보에 오픈, 클로즈시간 추가
레이아웃 바꾸기
검색과 찾아보기 둘중
하나 빼거나 이름 바꾸기
나만의 항목 페이지 ‘my’가 뭔지…나만의 목록이랑 뭐가 다른건지 헷갈리고 예상과 다른거같다,
이미 나만의 목록은 나만의 페이진데 그 위에 ‘my’가 또있으니까 이건 뭐지? 싶었다
깔대기 및 선호항목 추가 페이지 ‘+’가 추가의 의미인걸 알겠는데 찾는게 힘들었다 / ‘깔대기추가’라는 항목이 추가 되도 좋을거같다
나만의 목록에서 상단에 ‘my’삭제
+ 크기 키우기, ‘my’에서 ‘깔대기 추가’
항목 추가

# scene 3
위치설정 및 상세정보 페이지
길찾기 및 상세정보 페이지
검색 및 공유 페이지
깔대기 및 선호항목 추가 페이지
숫자들이 직관적으로 빈자리인지, 좌석수인지 알 수 없다.
지도의 숫자별로 아이콘의 크기가 달라졌으면 좋겠다.
상세정보가 모두 전송이 되었으면 좋겠다.
인원 설정도 가능하였으면 좋겠다.
음료의 가격 설정 범위를 줄이거나 아예 직접 입력할 수 있으면 좋겠다.
자리 배치도에서 콘센트 위치, 와이파이의 정도등이 표시되었으면 좋겠고
테이블이 아닌 의자갯수를 표시하였으면 좋겠다.
대표 메뉴 사진 정도는 첨부되어 있으면 좋게다.
튜토리얼 창에서 확실이 설명해 준다.
배치도에 와이파이 공유기의 위치와
콘센트의 위치등을 입력한다.
테이블이 몇인용인지 표시하거나
의자의 갯수로 표시한다.
전송되는 화면을 설정한다.
깔대기에 함께가는 인원을 설정할 수
있게 한다.
가격 범위를 직접입력 버튼을 만들어
직접입력도 할 수 있게 한다.

튜토리얼
디자인 ��1차

위치설정 후 길찾기

상세정보 및 공유

카테고리 및 검색

시작 및 튜토리얼
Color Chip
디자인 _ 2차

카페 상세보기
디자인 _ 2차

나만의 페이지
디자인 _ 2차

필터 설정
디자인 _ 2차

지역별 검색
디자인 _ 2차

역주변 검색
디자인 _ 2차

테마별 검색
테마별 검색하기로
각 카테고리 항목에 따라
카페들을 확인할 수 있다
디자인 _ 2차

왼쪽 상단 메뉴
디자인 _ 2차

오른쪽 상단 메뉴
현재 자신이 사용하고있는
필터를 확인할 수 있고
필터 목록 페이지로 넘어갈
수있는 메뉴
디자인 _ 2차

디자인 _ 2차

Final_ 최종디자인
Creative Guideline
Format Android display
Font NotoSans / Roboto
!
Color

앱 아이콘
Color Chip
위치 아이콘과
카페를 상징하는
커피

시작 / 튜토리얼
Color Chip
시작화면
튜토리얼

현재 위치기반 검색
Color Chip
현재 위치 기반 검색
간단한 조건설정 후
위치 설정

1. 현재 자신의 위치를 기준으로
최대 500m까지 거리를 설정하기
2. 와이파이 / 화장실 / 흡연실 / 콘센트 등
요구하는 항목 체크하기

현재 위치기반 검색
Color Chip
현재 위치 검색 기반
주변 카페 검색
현재 위치 검색 기반으로 주변 카페를 검색
각 카페마다 빈자리의 갯수가 아이콘 안에 떠서 정보를 확인

카페 상세 보기
Color Chip
현재 빈자리 정보
위치 및 서비스 정보
가격정보

Color Chip
선택한 카페 길찾기
네이버 / 구글 연동
주소를 누르면 네이버 지도 / 구글지도로 연동되어
위치 정보 바로 확인

Color Chip
가격정보
후기정보

후기
Color Chip
후기등록

Color Chip
공유하기
SNS 로 공유하기
카페 상세 정보를 다 보고 난 뒤 친구나 지인에게 SNS로
이 정보들 및 페이지 주소 링크를 전송

Color Chip
홈 화면
인기별
빈자리순
후기별

카페를 직접 검색
인기별 / 빈자리순 / 후기별 카페 추천리스트
마음에 들면 “나만의 목록” 추가하기
최근에 설정했던 위치 기반 검색 시작
현 빈자리 상황 정보 확인

Color Chip
홈 화면
후기별
직접 검색하기

Color Chip
검색하기
지역별
역주변
테마별

Color Chip
로그인
회원가입

필터 설정
Color Chip
필터
필터설정

2. 와이파이 / 화장실 / 흡연실 / 콘센트 등
요구하는 항목 체크하기
3. 지역별 / 역주변 / 테마별 등
검색할 항목 체크하기
1. 가격(아메리카노 기준) 설정 하기
원하는 항목들을 선택 후 필터링하여
카페를 찾기 위해 필터 정보 등록하기

필터 설정
Color Chip
필터명 변경
필터목록

필터 설정
Color Chip
필터 설정하기 위치
메뉴

나만의 카페 목록
Color Chip
카페 상세 정보를 보고 마음에 들면 별 아이콘을 클릭
나만의 카페목록으로 즐겨찾기 한 정보가 저장됨

Color Chip
메뉴

Final_ 영상
스케치 스토리보드

Final_ 영상
무드보드 및
참고 영상
https://vimeo.com/
138725914
https://vimeo.com/
158608407

Final_ 영상
시퀀스 보드

Final_ 영상
https://vimeo.com/171489981

�ݺ�ߣ

자리모아 임다혜,황희영,최하늘_final

Recommended

More Related Content

Viewers also liked (20)

Similar to 자리모아 임다혜,황희영,최하늘_final (20)

자리모아 임다혜,황희영,최하늘_final