Transcript Low-fi Prototyping

Human
Computer
Interface
LOW
FIDELITY
Tack-Don Han
Media System Lab., Yonsei University
http://msl.yonsei.ac.kr
좋은 디자인? or 나쁜 디자인?
• 매킨토시의 Eudora Pro
프로그램의 암호 입력
창
• 대부분의 암호는 대소문
자가 섞여 있음.
– Caps Lock의 설정으로
간혹 인증이 실패되는 경
우도 있다.
• 따라서 사용자에게
Caps Lock이 켜져 있음
을 알려주는 것은 좋은
아이디어라 할 수 있다.
• 깜빡거림과 “!”은 불필
요
Outline
• 웹 디자인 패턴
• 로우-피델리티 프로토타이핑
(Low-fi prototyping)
• 오즈의 마법사 방법
• UI 프로토타이핑 도구
• 하이-피델리티 프로토타이핑
(Hi-fi prototyping)
• What prototyping tools lack
왜 프로토타이핑이 필요한가?
• 다양한 디자인을 실험해볼 수 있다.
• 디자인의 피드백을 쉽고 빠르게 얻을 수
있다.
– 실제로 구현 전에 문제점을 수정할 수 있고,
– 이에 따라 비용의 감소 효과가 있다.
• 사용자 중심의 디자인을 유지할 수 있다.
– 사용자에게 테스트하고 그들의 아이디어를 관
찰해야만 한다.
프로토타이핑에서의 Fidelity
• Fidelity n. [U.C]
– 충실, 성실, 충성 <<to>>
– (약속, 의무 등의) 엄수
– 원래 것과 똑같음, 박진성(迫眞性)
• Fidelity는 세부적인 수준에 의
해 나뉘어 진다.
• High fidelity?
– 최종 결과물과 비슷한 프로토타
잎
• Low fidelity?
로우-피델리티
– 스케치 & 스토리보드
로우-피델리티
– 스케치 & 스토리보드
• 스토리보드의 기원
– 영화나 애니메이션
• 중요한 이벤트의 “대본”을 만들라.
– 세부사항은 중요치 않다.(지금 단계에 한해)
– 중요한 상호작용에만 집중하라.
Ink Chat
왜 로우-피델리티 프로토타이핑을
하는가?
• 전통적인 방법론은 너무 오래 걸렸다.
– 스케치  프로토타이핑  평가  반복
• 로우-피델리티로 프로토타이핑을 시뮬레이션할
수 있다.
– 스케치  평가  반복
– 스케치가 프로토타잎으로 사용 가능
• 디자이너가 “컴퓨터를 모사”
• 다른 설계팀이 관찰 및 기록 가능
• Kindergarten implementation skills
– 비전문가도 참여가능
종이를 이용한 설계
• Paper Prototyping 이란
– 주로 유저빌리티를 검증하고, 재설계하는데 이용
– 팀원간의 의사소통부문에서도 명확하고, 간단하게 문제나 개선점을 파
악
• 진행과정
– 팀원들이 한데 모여, 검증하고 싶거나, 가장 중요한 부분(예를 들어 가
장 위험도가 높은 부분)을 선정
– 간단한 그림이나 글씨로 구현물을 상상하며 만들어본다.
– 팀원중에 가상의 컴퓨터 역할을 하는 사람을 선정, 각 케이스에 관한 부
분을 팀원들이 지적해가며 가상의 테스트를 해보는 것.
– 종이위에 구현했으니 유연하고 빠르게 수정하고 변경사항을 반영할 수
있다.
– 모두가 유저가 되어서 유저빌리티와 문제점에 대해 바라볼 수 있다
[종이와 PC 를 적절하게 활용한 프로토타이핑 예]
Paper Prototyping 장점
•
•
•
•
코딩하기전에 디자인을 유저와 함께 테스트해볼수 있다.
빠르고 유연하게 변경할 수 있다.
마케팅방향을 잡아나갈수 있다 .
유저빌리티 테스트 단계에서, 기술적인 변수들을 배제하고 임할 수 있다.
개발자와 디자이너의 충돌이 줄어듦.
•
왜 Computer-Based 프로토타이핑보다 페이퍼 프로토타이핑이 나은가?
– 코딩에 소요되는 노력이 없다.
– 아무리 빠른 설계 도구로 구현한것보다, 빠르게 테스트되고, 유저에게 빠르게 반
응할 수 있다.
– 변덕스러운 피드백을 피할 수 있다.
• 어설프게 구현된 프로토타입은 엉뚱한 피드백을 불러일으킨다.
• 하지만 페이퍼 프로토타이핑은, 컨셉과 기능에만 집중하게 해준다.
– 창의성을 북돋아준다
• 좀 더 창의적이고, 자유롭게 애플리케이션의 관점에 접근하게 해준다.
기본 준비물
•
•
•
•
•
•
•
크고 하얀 종이 (11x17)
5x8인치 index 카드
포스트잇
테이프, 풀, 수정 테이프
펜과 마커 (다양한 색과 크기)
Overhead transparencies
가위, X-acto 칼 등
from “Prototyping for Tiny Fingers” by Rettig
ESP
모델 만들기
• 마감 기한을 정하라
– 너무 오래 생각하지 말라! – 우선 만들어 보라!
• 큰 종이에 윈도우 프레임을 그리라.
• 카드에 각 스크린 영역을 만들라.
– 옮기거나, 변하거나, 보여지고/사라질 수 있다.
• 사용자의 행위에 반응하라.
– 예. Pull-down 메뉴를 이미 만들어 놓은 후에 사용자
에게 제공한다.
• 복사기(사진기 등)를 이용하여 각 많은 버전을
기록하라.
모델 만들기
모델 만들기
모델 만들기
모델 만들기
모델 만들기
테스트 준비
• 사용자를 선택하라.
– 예상되는 사용자군의 배경지식 등을 이해하라.
– 가족이나 친구는 안된다.
• “고객”이 알맞다.
• 시나리오를 준비하라.
– 제품이 실제 사용될 때, 전형적인 제품의 활용에 초점
이 맞춰진 시나리오가 알맞다.
– 프로토타입이 이러한 시나리오를 지원하도록 디자인
하라.
• 실수를 줄이기 위해 연습하라!
Lo-Fi의 장점
• 몇 시간만 투자하면 된다.
– 값비싼 추가의 장비가 필요치 않다.
• 다양한 대안에 대하여 테스트가 가능하다.
– 신속하게 다양한 설계 대안을 테스트 할 수 있
다.
• 최종 결과물의 수준은 반복된 테스트 횟수에 비례
한다.
• 대부분의 반복은 가상으로 구현된다.
(faked)
오즈의 마법사 방법
• 사용자와의 상호작용을 가상으로 구현한다.
Comes from?
– 영화 “오즈의 마법사”
• “커튼 뒤의 조종자”
• 컴퓨터 산업에서 오래된 전통적은 방법
– 예. 뒤에 숨겨져 있는 VAX 머신으로 PC의 프로토타입
을 구현.
• Much more important for hard to implement
features
– speech & handwriting recognition
Lo-Fi 프로토타입의 문제점
• “Computer” inherently buggy
• 실제 구현보다 느리다.
– 상호작용의 속도도 느리다.
• 특정 기능은 구현이 어렵다.
– 풀-다운 메뉴, 드래그 등
• 실제 최종 구현 같이 보이지 않
는다.
– 가끔 각 위젯을 인지하기 힘들 때도
있다.
• 최종 사용자가 자기 스스로 사용
해볼 수 없다.
– 사용자의 실제 사용 환경과 완전히
같을 수 없다.
Informal UI 프로토타입 도구들
Denim
Outpost
Suede
Informal UI 프로토타입 도구들
• Low-fi 종이 프로토타입의 장점을 그대로 제공한다.
– 브레인 스토밍 (brainstorming)
• 다양한 아이디어를 신속하게 고려할 수 있다.
• 세세한 부분까지를 고려할 필요가 없어진다.
– 완성된 설계의 불필요
• 모든 경우를 고려할 필요도 없다. 단지 중요한 예제만 표현하면 충
분하다.
• 전자적인 도구로서의 장점도 함께 제공한다.
–
–
–
–
사용의 편리성
“design memory”를 함께 제공한다.
다른 전자적인 도구로의 이동이 간편하다.
최종 사용자와의 상호작용이 좀 더 실제와 비슷하다.
Designers’ Outpost:
정보의 구조를 설계하는 Tangible 인터페이스
• 실제 물리적인 세계와 가상의
세계를 조합
– 물리적인 포스트-잇으로 가상의
피드백을 구현함.
• 실제성을 지원한다.
– 종이의 affordances
– 협업
– large, persistent representation
• 전자 매체의 장점을 추가한다.
– 편집, 재사용, 분배 등
– 추후에 다른 툴로의 변환, 전환 등
이 쉽다.
DENIM:
스케치 기반 웹 사이트 설계
• Early-phase navigation & 상호작용 디자
인
• 다양한 화면을 지원한다.
– 싸이트맵 – 스토리보드 – 페이지 스케치
Low-fi 프로토타입 & 테스팅
Travelshare
SUEDE:
음성기반 UI 개발을 위한 Informal 프로토타이핑 툴
메일을
읽어!
• Support design practice
– 예제 대본(script)
– 오즈의 마법사 (WoZ)
– 빌트인 (built-in) 반복적 설계
• 설계 – 테스트 – 분석
• 빠르고 유연한 설계
– 음성 인식이나 음성 합성 등의
기술은 없음.
– 프로그래머도 필요 없음
TOPIARY:
위치기반 UI를 위한 프로토타이핑 툴
• 위치 기반 시나리오 작성
– 사람, 구역, 물건 등을 지도에 놓을
수 있다.
• 시나리오를 이용하여 스토리보드
의 이동을 구현한다.
• 반복적 설계
– 오즈의 마법사 (WoZ)
– Place Lab Wi-fi location sensor
• 빠르고 유연한 설계
– GPS나 다른 특별한 장치가 불필요
– 프로그래머도 불필요
정리
• Low-fi 테스팅은 신속한 반복을 가능하게 한다.
– 사용자로부터 반응, 피드백을 바로 알 수 있고, 이를
곧바로 설계에 반영할 수 있다.
• Informal 프로토타이핑 도구들이 종이 방법과
high-fi 도구 사이의 차이를 보완한다.
• High-fi UI 툴은 조금 더 실제에 가깝게 만들어진
UI 설계를 반영하여 테스팅하기에 좋다.
– 일반적으로, 이 경우에도 구현된 어플리케이션 안쪽
의 구체적인 기술은 무시할 수 있다.
읽을꺼리
프로토타이핑
• Books
– Paper Prototyping: The Fast and Easy Way to Design and
Refine User Interfaces, by Carolyn Snyder, Morgan Kaufmann,
2003
• Articles
– “Prototyping for Tiny Fingers” by Marc Rettig, in
Communications of the ACM, 1994
– “Using Paper Prototypes to Manage Risk” by Carolyn Snyder,
http://world.std.com/~uieweb/paper.htm
– “The Perils of Prototyping” by Alan Cooper,
http://www.chi-sa.org.za/Documents/articles/perils.htm
• Web Sites
– Group for User Interface Research, for DENIM & SUEDE
downloads, http://guir.berkeley.edu
– InfoDesign Toolkit, http://www.infodesign.com.au