SlideShare a Scribd company logo
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!

More Related Content

Viewers also liked

Terminología básica
Terminología básicaTerminología básica
Terminología básica
Geraldin Ariza
 
Country Analysis of Canada with team
Country Analysis of Canada with teamCountry Analysis of Canada with team
Country Analysis of Canada with teamMaryclair McDonald
 
Analisis de la arquitectura maneirista
Analisis de la arquitectura maneiristaAnalisis de la arquitectura maneirista
Analisis de la arquitectura maneirista
yackelyn9
 
Vídeo-Cine Club: una reflexión para educar
Vídeo-Cine Club: una reflexión para educarVídeo-Cine Club: una reflexión para educar
Vídeo-Cine Club: una reflexión para educar
IES Bajo Guadalquivir Lebrija
 
La semilla de la vida
La semilla de la vidaLa semilla de la vida
La semilla de la vida
Marifer Ruiz Tirado
 
Dry separation
Dry separationDry separation
Dry separation
Evita Lee
 
Sexual Harassment in The Workplace
Sexual Harassment in The WorkplaceSexual Harassment in The Workplace
Sexual Harassment in The Workplace
Estiak Ahmed Onim
 
Desgravacion arancelaria.
Desgravacion arancelaria.Desgravacion arancelaria.
Desgravacion arancelaria.
Danny Mimbela
 

Viewers also liked (9)

Terminología básica
Terminología básicaTerminología básica
Terminología básica
 
Country Analysis of Canada with team
Country Analysis of Canada with teamCountry Analysis of Canada with team
Country Analysis of Canada with team
 
Analisis de la arquitectura maneirista
Analisis de la arquitectura maneiristaAnalisis de la arquitectura maneirista
Analisis de la arquitectura maneirista
 
Vídeo-Cine Club: una reflexión para educar
Vídeo-Cine Club: una reflexión para educarVídeo-Cine Club: una reflexión para educar
Vídeo-Cine Club: una reflexión para educar
 
La semilla de la vida
La semilla de la vidaLa semilla de la vida
La semilla de la vida
 
Arpones
ArponesArpones
Arpones
 
Dry separation
Dry separationDry separation
Dry separation
 
Sexual Harassment in The Workplace
Sexual Harassment in The WorkplaceSexual Harassment in The Workplace
Sexual Harassment in The Workplace
 
Desgravacion arancelaria.
Desgravacion arancelaria.Desgravacion arancelaria.
Desgravacion arancelaria.
 

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

자리모아 임다혜,황희영,최하늘_final
자리모아 임다혜,황희영,최하늘_final자리모아 임다혜,황희영,최하늘_final
자리모아 임다혜,황희영,최하늘_final
dahye Lim
 
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
Hyewon Lee
 
2016 알바천국 Capstone Design
2016 알바천국 Capstone Design2016 알바천국 Capstone Design
2016 알바천국 Capstone Design
Artcoon
 
UX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUIUX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUI
RightBrain inc.
 
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
RightBrain inc.
 
0610 티톡 김지혜김혜진
0610 티톡 김지혜김혜진0610 티톡 김지혜김혜진
0610 티톡 김지혜김혜진Hyejin Kim
 
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
CIZION
 
Gaja 어플레케이션 쇼 슬라이드
Gaja 어플레케이션 쇼 슬라이드Gaja 어플레케이션 쇼 슬라이드
Gaja 어플레케이션 쇼 슬라이드
JAEGUN LEE
 
인터랙 사용성평가스크립트 최종
인터랙 사용성평가스크립트 최종인터랙 사용성평가스크립트 최종
인터랙 사용성평가스크립트 최종
jiyein
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
jinwook shin
 
Daumcafe Feedback
Daumcafe FeedbackDaumcafe Feedback
Daumcafe FeedbackMiriya Lee
 
Daumcafe Feedback Miriya
Daumcafe Feedback MiriyaDaumcafe Feedback Miriya
Daumcafe Feedback Miriyajoogunking
 
ysu(영산대학교) wordpress
ysu(영산대학교) wordpress ysu(영산대학교) wordpress
ysu(영산대학교) wordpress
DreamJ Communication
 

Similar to 자리모아 임다혜,최하늘,황희영 (14)

자리모아 임다혜,황희영,최하늘_final
자리모아 임다혜,황희영,최하늘_final자리모아 임다혜,황희영,최하늘_final
자리모아 임다혜,황희영,최하늘_final
 
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
힙서비콘_라이벌 서비스 누가누가 잘하나_이혜원
 
2016 알바천국 Capstone Design
2016 알바천국 Capstone Design2016 알바천국 Capstone Design
2016 알바천국 Capstone Design
 
part6
part6part6
part6
 
UX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUIUX_Academy_16th_Market_Kurly_UXUI
UX_Academy_16th_Market_Kurly_UXUI
 
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [링크드인 - UX/UI 개선]
 
0610 티톡 김지혜김혜진
0610 티톡 김지혜김혜진0610 티톡 김지혜김혜진
0610 티톡 김지혜김혜진
 
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
라이브리 소셜리포트 8월호 [라이브리 소셜댓글 이벤트 200% 활용하기]
 
Gaja 어플레케이션 쇼 슬라이드
Gaja 어플레케이션 쇼 슬라이드Gaja 어플레케이션 쇼 슬라이드
Gaja 어플레케이션 쇼 슬라이드
 
인터랙 사용성평가스크립트 최종
인터랙 사용성평가스크립트 최종인터랙 사용성평가스크립트 최종
인터랙 사용성평가스크립트 최종
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
 
Daumcafe Feedback
Daumcafe FeedbackDaumcafe Feedback
Daumcafe Feedback
 
Daumcafe Feedback Miriya
Daumcafe Feedback MiriyaDaumcafe Feedback Miriya
Daumcafe Feedback Miriya
 
ysu(영산대학교) wordpress
ysu(영산대학교) wordpress ysu(영산대학교) wordpress
ysu(영산대학교) wordpress
 

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

  • 1. INTERACTION DESIGN I ! 1416118 임다혜 1310585 최하늘 1313158 황희영 자리모아 ! CAFE APP + SMART 공간
  • 2. 목 차 Wire frame 사용성 평가 스크립트 01 02 테스트 결과 및 개선점 03
  • 8. Wire frame _ 주변빈자리찾기 및 카페정보 02 앱 실행 현재 자신의 위치 설정 페이지 현재 자신 위치 기반 카페 추천 목록페이지 (현재 빈자리 현황 위주) 카페 클릭 ➝ 간략정보 페이지 상세보기 페이지
  • 9. 02 즐겨찾기 원할 시 즐겨찾기 추가 길찾기 클릭 자신의 위치와 카페위치 간략 표시 길 상세보기 지도 연동 지도 연동 및 서비스 이용 ➝ Wire frame _ 카페정보 및 길안내 서비스
  • 10. 02 사진보기 Wire frame _ 카페정보 안내 카페 클릭 ➝ 간략정보 페이지 상세보기 페이지 상세보기 페이지 가격정보
  • 11. 02 Wire frame _ 카페정보 안내 상세보기 페이지 상세보기 페이지 공유하기 클립보드 복사
  • 12. 02 깔대기 맞추기 - 선호 항목 담기 로그인이 안되어있을시 로그인 화면 로그인 화면 로그인 화면 Wire frame _ 깔대기 맞추기, 마이페이지, 로그인 마이페이지
  • 13. 02 Wire frame _ 회원가입 회원이 아닌경우 회원 가입 회원 가입 회원 가입 완료
  • 14. 02 Wire frame _ 메뉴 메뉴 원하는 카테고리 선택 카페 추천리스트 마음에 안들 시 다른 카테고리 검색현재 자신의 위치 설정 페이지
  • 15. 02 Wire frame _ 메뉴 찾아보기 지역명으로 찾아보기 지역명 검색 지역명 검색
  • 16. 02 Wire frame _ 메뉴 찾아보기 사진보기 가격정보상세보기 페이지카페명 검색
  • 17. 02 Wire frame _ 메뉴 찾아보기 역이름으로 검색 마음에 들지 않을시 하단에 다른 지역 검색 검색
  • 18. 02 Wire frame _ 메뉴 찾아보기 현재 자신의 위치 설정 페이지 현재 자신 위치 기반 카페 추천 목록페이지 (현재 빈자리 현황 위주) 카페 클릭 ➝ 간략정보 페이지
  • 19. 02 Wire frame _ 마이페이지 마이페이지 즐겨찾기 목록 깔대기 목록
  • 20. 02 Wire frame _ 후기 카페상세보기 후기 후기쓰기 후기쓰기
  • 22. 03 사용성 평가 스크립트 자리모아(ZARI MOA) 프로토타이핑 사용성 평가 Task 스크립트 5월 18일 Bold Italic 사용자에게 제공하는 지시사항 우리는 새로운 서비스를 만들었습니다. 이 서비스는 완성된 것이 아니고, 간단하게 클릭만 할 수 있 도록 화면만 구현이 되어있습니다. 클릭하여 잘못된 결과가 나오더라도 이것은 아직 프로토타입 상 태이기 때문입니다 (버블톡 훈련시키기) 사용성 평가에서 중요한 것은 사용자가 머릿속으로 생각하고 있는 것을 모두 말 로 표현하여 주는것이 매우 중요합니다. 클릭을 하기전에 어떤 생각으로 무엇을 찾고있는지, 왜 클릭 하고 싶은지, 클릭하면 어떤 화면이 나올것으로 기대하는지를 상세하게 계속 말해주어야 효과적인 테스트가 가능합니다.
  • 23. Task 1-1 Task 1-2 Task 2 Task 3 카페를 가기 위하여 가장 먼저 어떤 일을 하시겠습니까? 당신은 카페를 가기 위해 자리모아앱을 실행합니다 현재 당신은 카페를 가야합니다. 카페를 가기위해 가장먼저 무엇을 할 것입니까? 가고 싶은 카페가 생겼습니다. 어떻게 갈 것인지 찾아보세요 정보들을 보다 보니 나에게 필요한 정보들만 보고싶어 검색을 시작합니다 카페정보들을 보다가 필요한 정보가 생기거나 다시 참고해야할 정보를 발견했습니다 그래서 그 정보들을 저장을 하려고 합니다 03 사용성 평가 스크립트
  • 24. Task 4 Task 5 프로토타입으로 제공된 ZARI MOA의 대부분의 서비스를 이용하여보셨습니다 친구에게 길을 알려줘야하거나 지인에게 자신이 발견한 카페의 정보를 나누고 알려줘야합니다 앱안에있는 기능을 이용하여 알려주세요 당신은 자신이 원하는 항목대로 카페 정보를 찾기 원합니다. 자신이 원하는 항목을 토대로 카페를 분류해 주세요 03 사용성 평가 스크립트
  • 25. 테스트 결과 및 개선점 03
  • 28. 03 사용성 평가 테스트 결과 및 개선점 ZARI MOA 위치설정 및 간략정보 확인 음료수 가격정보가 간략정보에는 없어서 아쉬웠다 ZARI MOA 길찾기 페이지 길찾기할때, 실제 모습이나 뷰어가 카페를 클릭했을때 바로 나타났으면 좋겠다 마이페이지 어려움은 없었는데, 깔때기가 정보를 모아주는거같은데 정확히 뭔지 모르겠다 그동그라미(이미지?말하는거같음)부분은 딱히 없어도 될거같다,깔때기에 지역이 추가되었으면 좋겠다, 내가 주로 가는 지역을 추가하는거 깔대기 깔대기를 설정을 하고 확인하는 버튼이 있었으면 좋겠고, 선택하는 버튼이 있었으면 좋겠다 거리도 추가되었으면 좋겠다 # scene1 PAGE 개선해야할점 간략정보에 가격 추가 로드뷰 ‘깔대기’에 대한 설명 페이지 깔대기 항목에 ‘지역’추가 확인버튼추가 개선점
  • 29. 03 사용성 평가 테스트 결과 및 개선점 위치 설정 숫자들이 무엇을 위미하는지 알기 어렵다. 상세 정보 콘센트가 있는 자리도 표시되었으면 좋겠다 깔대기 깔대기 모양이 너무 작아 알아보기가 힘들다 # scene2 PAGE 개선해야할점 빈자리 라는 설명 추가 보류 메뉴 이름 클릭시 사진으로 연결 좀더 확실한 모양으로 변경 개선점 메뉴 사진도 첨부되어 있으면 좋겠다
  • 30. 03 사용성 평가 테스트 결과 및 개선점 위치설정 및 빈자리보기 페이지 숫자와 동그라미가 무엇을 의미하는지 알기 힘들다. ZARI MOA 길찾기 페이지 무엇이 버튼이고 무엇이 내용인지 구분하기가 힘들다. 검색 버튼 구분이 있었으면 좋겠다. 깔대기 너무 작아서 아이콘이 깔대기 모양인지 헷갈린다. 눌렀을 때 화면이 어떤 창이 나오는지 예상할 수 없다. # scene3 PAGE 개선해야할점 컬러를 추가 색이나 두꺼운 선 등으로 구분 입체감을 주는등의 방법을 사용 화살표 모양 등으로 교체 개선점 색이 두가지라 구분이 힘들다 정보 거르기 등의 문장으로 설명