SlideShare a Scribd company logo
1 of 19
Book study_ 10주차 5조
박종호 / 배은지 / 임소연
Book study_10주차 5조

CONTENTS

1. 종이와의 인터랙션
2. 지금 저한테 말씀하시는 겁니까?
3. 요점 정리

4. 아직 남은 이야기
Book study_10주차 5조

종이와의 인터랙션_ 디자인 & 프로토타이핑

디자인은 여러 갈래로 뻗친 가지를

프로토 타이핑은 디자인을 다듬고

탐구하고 비교하는 과정

정교하게 하는 반복적인 과정
Book study_10주차 5조

종이와의 인터랙션_ 여러 대안을 제시하는 종이 인터페이스
3가지 대안

A
최고점수를
받은 디자인

B

1가지 대안

C
중간점수를
받음

C
최하점수를
받은 디자인
Book study_10주차 5조

종이와의 인터랙션_ 여러 대안을 제시하는 프로토타이핑

디자인의 역핛은 옳은 디자인을 찾는 것이다.
사용성 엔지니어링의 역핛은
그 디자인을 옳게 구현 하는 것이다.

A
최고점

B

C
최하점
Book study_10주차 5조

종이와의 인터랙션_ 여러 대안을 제시하는 종이 인터페이스

두 가지 버젂의
실내 온도 조젃기 인터페이스
Book study_10주차 5조

종이와의 인터랙션_ 사례

<인터페이스 지우고 새로 쓰기>

증이 위에 플라스틱을 덧씌우고 마커로 글씨를 쓴다.
플라스틱 위에 적은 겂은 천 조각으로 쉽게 닦아낼 수 있다.
Book study_10주차 5조

종이와의 인터랙션_ 사례

초기 구상

화면 구현

기능 나열
메뉴 나열
인터랙션
나열
....
묶어서
화면구현

사용자테스트

종이에
화면 나열
사용자
스토리 구성
인터랙션 예상
종이이기
때문에
순서바꾸기
쉬움

결과반영

실제 사용자
인터랙션
테스트
종이들을 주고
순서대로
나열하도록
유도함

결과를
검토하여
스토리 보완
구조도 변경
및
순서변경 등
Book study_10주차 5조

종이와의 인터랙션_ 사례
책 예약하기

책 검색하기

사용자는 자신이 원
하는 책을 예약하여
알림설정을 할 수 있
다.

사용자는 자신이 원
하는 책을 작가별/출
찜 하기
판사별/카테고리별로
검색 할 수있다 흥미있는 책, 검색된

정보, 예약한 책 등의
정보를 Keep하여 한
번에 볼 수 있다.

연관정보 보기
해당 도서와 연관된
보내기
도서정보, 인터넷 기
사정보 등의 연관정 도서에 관한 내
해당
보를 확인할 수 있다.
용이나 정보를 공유
하기 기능을 통해 지
인에게 권유할 수 있
다.

읽은 책 정보보기
이미 대여하여 읽은
책에 관한 정보를 확
인할 수 있다.

<종이와 서비스 사용자의 스토리 만들기>
구현을 원하는 부분을 정리하여 비슷한 기능끼리 묶은 뒤 스토리를 구성하여
내용을 바탕으로 종이 위에 원하는 인터랙션, UI등을 그림으로 표현할 수 있다.
Book study_10주차 5조

종이와의 인터랙션_ 사례

<서비스 흐름 측정하기>
반대로 구현된 인터랙션 및 UI를 포스트잇에 그린 뒤 사용자에게 OOO서비스

를 찾아보라 하여 짚어갂 흐름을 확인하여 설계한 스토리와 동일하게 흘러가는
지 점검하는 방법도 있다. 서비스 설계도중 혹은 이미 서비스가 있는 경우 문제
점 도출을 위하여 사용 할 수 있다.
사용자인터랙션 스토리 및 페이지 디자인 -> 사용자테스트 검증(포스트잇)
테스트 녹화,
시선이동 등 확인

사용자

관찰자
Book study_10주차 5조

종이와의 인터랙션_ BALSAMIQ

Paper Prototype
기록으로 유용
Book study_10주차 5조

종이와의 인터랙션_ Mockflow/Axure

<Mockflow>

<Axure>

<목업툴>
실제 종이에 그리는 것과 같은 느낌으로 작업하고 순서를 자유롭게 조정할 수
있는 툴들, 기록/공유가 용이하고 html로 내보내 실제 웹처럼 구현이
가능한 것이 장점.
Book study_10주차 5조

종이와의 인터랙션_ POP App

Prototype 준비물
Book study_10주차 5조

종이와의 인터랙션_ POP App
Book study_10주차 5조

종이와의 인터랙션_ POP App
Book study_10주차 5조

지금 저한테 말씀하시는 겁니까?
<짂행자의 기대>

창의적이고 건설적인
답변을 얻지 못함
Book study_10주차 5조

지금 저한테 말씀하시는 겁니까?
<예상 외의 성과- 스케치는 대화의 중요한 매개체>

창조적인 아이디어를 얻음!
Book study_10주차 5조

아직 남은 이야기
저자가 마지막으로 말하고 싶은 말 01

스케치/ 프로토타입/ 모델 시뮬레이선/ 모의실험 등
= 디자인 프로세스/ 제품개발의 혁신에서 중요한 역할
Book study_10주차 5조

아직 남은 이야기
저자가 마지막으로 말하고 싶은 말 01

스케치/ 프로토타입/ 모델 시뮬레이선/ 모의실험의
장점

단점

-유희

-유혹적이라 단순핚 모의실험을 디자인/ 연구와 혼동

-즐기는 사이 새로운 통찰력 얻음

-지나치면,

-컨셉에 대핚 직관적이고 이성적인 이해 얻음

실험 자체에 지나치게 초점을 맞춰 성과에만 매달림

-서로의 생각 비교/ 대조

/ 중요핚 컨셉과 통찰력을 잃음

실험은
숨은 동기, 근거, 원칙, 학문을 이해하려는
노력과 균형을 맞춰야 함

More Related Content

Viewers also liked

우리 주변의 인터랙션 사례
우리 주변의 인터랙션 사례우리 주변의 인터랙션 사례
우리 주변의 인터랙션 사례YeoneunKim
 
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)SangIn Choung
 
인터랙션 디자인들의 사례들
인터랙션 디자인들의 사례들인터랙션 디자인들의 사례들
인터랙션 디자인들의 사례들heejung0408
 
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인Jong Won Lim
 
인터랙션디자인 2014151046 함승수
인터랙션디자인 2014151046 함승수인터랙션디자인 2014151046 함승수
인터랙션디자인 2014151046 함승수승수 함
 
인터랙션디자인사례
인터랙션디자인사례인터랙션디자인사례
인터랙션디자인사례새미 신
 

Viewers also liked (9)

인터랙션
인터랙션인터랙션
인터랙션
 
우리 주변의 인터랙션 사례
우리 주변의 인터랙션 사례우리 주변의 인터랙션 사례
우리 주변의 인터랙션 사례
 
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)
사용자 스토리 대상 테스트 설계 사례(테스트기본교육 3장 3절)
 
인터랙션 디자인들의 사례들
인터랙션 디자인들의 사례들인터랙션 디자인들의 사례들
인터랙션 디자인들의 사례들
 
인터랙트
인터랙트인터랙트
인터랙트
 
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인
2012151039 임종원 인터랙션 디자인 사례 인터랙션 디자인
 
인터랙션디자인 2014151046 함승수
인터랙션디자인 2014151046 함승수인터랙션디자인 2014151046 함승수
인터랙션디자인 2014151046 함승수
 
User stories
User storiesUser stories
User stories
 
인터랙션디자인사례
인터랙션디자인사례인터랙션디자인사례
인터랙션디자인사례
 

Similar to Book study 10주차 5조

Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토keesung kim
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.DongYoung Kim
 
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화Minho Lee
 
Agile prototyping intro v.1.5
Agile prototyping intro v.1.5Agile prototyping intro v.1.5
Agile prototyping intro v.1.5Mijin Baek
 
Blog 오래가는 ux 디자인
Blog 오래가는 ux 디자인Blog 오래가는 ux 디자인
Blog 오래가는 ux 디자인정인 주
 
Eyes web site progect
Eyes web site progectEyes web site progect
Eyes web site progectKIM HEE JAE
 
UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁Hyun-june Kwon
 
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)keesung kim
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdfssuser4ea7d7
 
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)keesung kim
 
2021 Graduation Project - Collaboration Tool for Student
2021 Graduation Project - Collaboration Tool for Student2021 Graduation Project - Collaboration Tool for Student
2021 Graduation Project - Collaboration Tool for Studentssuser918bf9
 
소프트웨어개발자이야기 2017 p2
소프트웨어개발자이야기 2017 p2소프트웨어개발자이야기 2017 p2
소프트웨어개발자이야기 2017 p2Suho Kwon
 
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...Sugyo Han
 
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법Sunjung Park
 
에버노트 자기관리 완성하기
에버노트 자기관리 완성하기에버노트 자기관리 완성하기
에버노트 자기관리 완성하기호석 진호석
 
프로토타이핑
프로토타이핑프로토타이핑
프로토타이핑정인 주
 
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치hcik 2017 튜토리얼; 인공지능으로 사용자 리서치
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치Seoul National University
 

Similar to Book study 10주차 5조 (20)

Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.
[디프만 6기] 디자인만 할 줄 아는 시대는 끝났다.
 
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
 
Agile prototyping intro v.1.5
Agile prototyping intro v.1.5Agile prototyping intro v.1.5
Agile prototyping intro v.1.5
 
Blog 오래가는 ux 디자인
Blog 오래가는 ux 디자인Blog 오래가는 ux 디자인
Blog 오래가는 ux 디자인
 
Eyes web site progect
Eyes web site progectEyes web site progect
Eyes web site progect
 
UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁
 
Prototyping
PrototypingPrototyping
Prototyping
 
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)
꼭 필요한 만큼의 리서치 (웹월드컨퍼런스)
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf
 
Bsw ui ux정의
Bsw ui ux정의Bsw ui ux정의
Bsw ui ux정의
 
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
 
2021 Graduation Project - Collaboration Tool for Student
2021 Graduation Project - Collaboration Tool for Student2021 Graduation Project - Collaboration Tool for Student
2021 Graduation Project - Collaboration Tool for Student
 
소프트웨어개발자이야기 2017 p2
소프트웨어개발자이야기 2017 p2소프트웨어개발자이야기 2017 p2
소프트웨어개발자이야기 2017 p2
 
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...
Intuitive Page-turning Interface of E-books on Flexible E-paper based on User...
 
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
 
에버노트 자기관리 완성하기
에버노트 자기관리 완성하기에버노트 자기관리 완성하기
에버노트 자기관리 완성하기
 
프로토타이핑
프로토타이핑프로토타이핑
프로토타이핑
 
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치hcik 2017 튜토리얼; 인공지능으로 사용자 리서치
hcik 2017 튜토리얼; 인공지능으로 사용자 리서치
 

Book study 10주차 5조

  • 1. Book study_ 10주차 5조 박종호 / 배은지 / 임소연
  • 2. Book study_10주차 5조 CONTENTS 1. 종이와의 인터랙션 2. 지금 저한테 말씀하시는 겁니까? 3. 요점 정리 4. 아직 남은 이야기
  • 3. Book study_10주차 5조 종이와의 인터랙션_ 디자인 & 프로토타이핑 디자인은 여러 갈래로 뻗친 가지를 프로토 타이핑은 디자인을 다듬고 탐구하고 비교하는 과정 정교하게 하는 반복적인 과정
  • 4. Book study_10주차 5조 종이와의 인터랙션_ 여러 대안을 제시하는 종이 인터페이스 3가지 대안 A 최고점수를 받은 디자인 B 1가지 대안 C 중간점수를 받음 C 최하점수를 받은 디자인
  • 5. Book study_10주차 5조 종이와의 인터랙션_ 여러 대안을 제시하는 프로토타이핑 디자인의 역핛은 옳은 디자인을 찾는 것이다. 사용성 엔지니어링의 역핛은 그 디자인을 옳게 구현 하는 것이다. A 최고점 B C 최하점
  • 6. Book study_10주차 5조 종이와의 인터랙션_ 여러 대안을 제시하는 종이 인터페이스 두 가지 버젂의 실내 온도 조젃기 인터페이스
  • 7. Book study_10주차 5조 종이와의 인터랙션_ 사례 <인터페이스 지우고 새로 쓰기> 증이 위에 플라스틱을 덧씌우고 마커로 글씨를 쓴다. 플라스틱 위에 적은 겂은 천 조각으로 쉽게 닦아낼 수 있다.
  • 8. Book study_10주차 5조 종이와의 인터랙션_ 사례 초기 구상 화면 구현 기능 나열 메뉴 나열 인터랙션 나열 .... 묶어서 화면구현 사용자테스트 종이에 화면 나열 사용자 스토리 구성 인터랙션 예상 종이이기 때문에 순서바꾸기 쉬움 결과반영 실제 사용자 인터랙션 테스트 종이들을 주고 순서대로 나열하도록 유도함 결과를 검토하여 스토리 보완 구조도 변경 및 순서변경 등
  • 9. Book study_10주차 5조 종이와의 인터랙션_ 사례 책 예약하기 책 검색하기 사용자는 자신이 원 하는 책을 예약하여 알림설정을 할 수 있 다. 사용자는 자신이 원 하는 책을 작가별/출 찜 하기 판사별/카테고리별로 검색 할 수있다 흥미있는 책, 검색된 정보, 예약한 책 등의 정보를 Keep하여 한 번에 볼 수 있다. 연관정보 보기 해당 도서와 연관된 보내기 도서정보, 인터넷 기 사정보 등의 연관정 도서에 관한 내 해당 보를 확인할 수 있다. 용이나 정보를 공유 하기 기능을 통해 지 인에게 권유할 수 있 다. 읽은 책 정보보기 이미 대여하여 읽은 책에 관한 정보를 확 인할 수 있다. <종이와 서비스 사용자의 스토리 만들기> 구현을 원하는 부분을 정리하여 비슷한 기능끼리 묶은 뒤 스토리를 구성하여 내용을 바탕으로 종이 위에 원하는 인터랙션, UI등을 그림으로 표현할 수 있다.
  • 10. Book study_10주차 5조 종이와의 인터랙션_ 사례 <서비스 흐름 측정하기> 반대로 구현된 인터랙션 및 UI를 포스트잇에 그린 뒤 사용자에게 OOO서비스 를 찾아보라 하여 짚어갂 흐름을 확인하여 설계한 스토리와 동일하게 흘러가는 지 점검하는 방법도 있다. 서비스 설계도중 혹은 이미 서비스가 있는 경우 문제 점 도출을 위하여 사용 할 수 있다. 사용자인터랙션 스토리 및 페이지 디자인 -> 사용자테스트 검증(포스트잇) 테스트 녹화, 시선이동 등 확인 사용자 관찰자
  • 11. Book study_10주차 5조 종이와의 인터랙션_ BALSAMIQ Paper Prototype 기록으로 유용
  • 12. Book study_10주차 5조 종이와의 인터랙션_ Mockflow/Axure <Mockflow> <Axure> <목업툴> 실제 종이에 그리는 것과 같은 느낌으로 작업하고 순서를 자유롭게 조정할 수 있는 툴들, 기록/공유가 용이하고 html로 내보내 실제 웹처럼 구현이 가능한 것이 장점.
  • 13. Book study_10주차 5조 종이와의 인터랙션_ POP App Prototype 준비물
  • 14. Book study_10주차 5조 종이와의 인터랙션_ POP App
  • 15. Book study_10주차 5조 종이와의 인터랙션_ POP App
  • 16. Book study_10주차 5조 지금 저한테 말씀하시는 겁니까? <짂행자의 기대> 창의적이고 건설적인 답변을 얻지 못함
  • 17. Book study_10주차 5조 지금 저한테 말씀하시는 겁니까? <예상 외의 성과- 스케치는 대화의 중요한 매개체> 창조적인 아이디어를 얻음!
  • 18. Book study_10주차 5조 아직 남은 이야기 저자가 마지막으로 말하고 싶은 말 01 스케치/ 프로토타입/ 모델 시뮬레이선/ 모의실험 등 = 디자인 프로세스/ 제품개발의 혁신에서 중요한 역할
  • 19. Book study_10주차 5조 아직 남은 이야기 저자가 마지막으로 말하고 싶은 말 01 스케치/ 프로토타입/ 모델 시뮬레이선/ 모의실험의 장점 단점 -유희 -유혹적이라 단순핚 모의실험을 디자인/ 연구와 혼동 -즐기는 사이 새로운 통찰력 얻음 -지나치면, -컨셉에 대핚 직관적이고 이성적인 이해 얻음 실험 자체에 지나치게 초점을 맞춰 성과에만 매달림 -서로의 생각 비교/ 대조 / 중요핚 컨셉과 통찰력을 잃음 실험은 숨은 동기, 근거, 원칙, 학문을 이해하려는 노력과 균형을 맞춰야 함