LOW FIDELITY

1. Human Computer Interface LOWFIDELITY Tack-Don Han Media System Lab., Yonsei University http://msl.yonsei.ac.kr

2. 좋은 디자인? or 나쁜 디자인? • 매킨토시의 Eudora Pro 프로그램의 암호 입력 창 • 대부분의 암호는 대소문자가 섞여 있음. • Caps Lock의 설정으로 간혹 인증이 실패되는 경우도 있다. • 따라서 사용자에게 Caps Lock이 켜져 있음을 알려주는 것은 좋은 아이디어라 할 수 있다. • 깜빡거림과 “!”은 불필요

3. Outline • 웹 디자인 패턴 • 로우-피델리티 프로토타이핑 (Low-fi prototyping) • 오즈의 마법사 방법 • UI 프로토타이핑 도구 • 하이-피델리티 프로토타이핑(Hi-fi prototyping) • What prototyping tools lack

4. 왜 프로토타이핑이 필요한가? • 다양한 디자인을 실험해볼 수 있다. • 디자인의 피드백을 쉽고 빠르게 얻을 수 있다. • 실제로 구현 전에 문제점을 수정할 수 있고, • 이에 따라 비용의 감소 효과가 있다. • 사용자 중심의 디자인을 유지할 수 있다. • 사용자에게 테스트하고 그들의 아이디어를 관찰해야만 한다.

5. 프로토타이핑에서의 Fidelity • Fidelity n. [U.C] • 충실, 성실, 충성 <<to>> • (약속, 의무 등의) 엄수 • 원래 것과 똑같음, 박진성(迫眞性) • Fidelity는 세부적인 수준에 의해 나뉘어 진다. • High fidelity? • 최종 결과물과 비슷한 프로토타잎 • Low fidelity?

6. 로우-피델리티 – 스케치 & 스토리보드

7. 로우-피델리티 – 스케치 & 스토리보드 • 스토리보드의 기원 • 영화나 애니메이션 • 중요한 이벤트의 “대본”을 만들라. • 세부사항은 중요치 않다.(지금 단계에 한해) • 중요한 상호작용에만 집중하라.

8. Ink Chat

9. 왜 로우-피델리티 프로토타이핑을 하는가? • 전통적인 방법론은 너무 오래 걸렸다. • 스케치  프로토타이핑  평가  반복 • 로우-피델리티로 프로토타이핑을 시뮬레이션할 수 있다. • 스케치  평가  반복 • 스케치가 프로토타잎으로 사용 가능 • 디자이너가 “컴퓨터를 모사” • 다른 설계팀이 관찰 및 기록 가능 • Kindergarten implementation skills • 비전문가도 참여가능

10. 종이를 이용한 설계 • Paper Prototyping 이란 • 주로 유저빌리티를 검증하고, 재설계하는데 이용 • 팀원간의 의사소통부문에서도 명확하고, 간단하게 문제나 개선점을 파악 • 진행과정 • 팀원들이 한데 모여, 검증하고 싶거나, 가장 중요한 부분(예를 들어 가장 위험도가 높은 부분)을 선정 • 간단한 그림이나 글씨로 구현물을 상상하며 만들어본다. • 팀원중에 가상의 컴퓨터 역할을 하는 사람을 선정, 각 케이스에 관한 부분을 팀원들이 지적해가며 가상의 테스트를 해보는 것. • 종이위에 구현했으니 유연하고 빠르게 수정하고 변경사항을 반영할 수 있다. • 모두가 유저가 되어서 유저빌리티와 문제점에 대해 바라볼 수 있다 [종이와 PC 를 적절하게 활용한 프로토타이핑 예]

11. Paper Prototyping 장점 • 코딩하기전에 디자인을 유저와 함께 테스트해볼수 있다. • 빠르고 유연하게 변경할 수 있다. • 마케팅방향을 잡아나갈수 있다 . • 유저빌리티 테스트 단계에서, 기술적인 변수들을 배제하고 임할 수 있다. 개발자와 디자이너의 충돌이 줄어듦. • 왜 Computer-Based 프로토타이핑보다 페이퍼 프로토타이핑이 나은가? • 코딩에 소요되는 노력이 없다. • 아무리 빠른 설계 도구로 구현한것보다, 빠르게 테스트되고, 유저에게 빠르게 반응할 수 있다. • 변덕스러운 피드백을 피할 수 있다. • 어설프게 구현된 프로토타입은 엉뚱한 피드백을 불러일으킨다. • 하지만 페이퍼 프로토타이핑은, 컨셉과 기능에만 집중하게 해준다. • 창의성을 북돋아준다 • 좀 더 창의적이고, 자유롭게 애플리케이션의 관점에 접근하게 해준다.

12. 기본 준비물 • 크고 하얀 종이 (11x17) • 5x8인치 index 카드 • 포스트잇 • 테이프, 풀, 수정 테이프 • 펜과 마커 (다양한 색과 크기) • Overhead transparencies • 가위, X-acto 칼 등

13. from “Prototyping for Tiny Fingers” by Rettig

15. ESP

16. 모델 만들기 • 마감 기한을 정하라 • 너무 오래 생각하지 말라! – 우선 만들어 보라! • 큰 종이에 윈도우 프레임을 그리라. • 카드에 각 스크린 영역을 만들라. • 옮기거나, 변하거나, 보여지고/사라질 수 있다. • 사용자의 행위에 반응하라. • 예. Pull-down 메뉴를 이미 만들어 놓은 후에 사용자에게 제공한다. • 복사기(사진기 등)를 이용하여 각 많은 버전을 기록하라.

17. 모델 만들기

18. 모델 만들기

19. 모델 만들기

20. 모델 만들기

21. 모델 만들기

22. 테스트 준비 • 사용자를 선택하라. • 예상되는 사용자군의 배경지식 등을 이해하라. • 가족이나 친구는 안된다. • “고객”이 알맞다. • 시나리오를 준비하라. • 제품이 실제 사용될 때, 전형적인 제품의 활용에 초점이 맞춰진 시나리오가 알맞다. • 프로토타입이 이러한 시나리오를 지원하도록 디자인하라. • 실수를 줄이기 위해 연습하라!

23. Lo-Fi의 장점 • 몇 시간만 투자하면 된다. • 값비싼 추가의 장비가 필요치 않다. • 다양한 대안에 대하여 테스트가 가능하다. • 신속하게 다양한 설계 대안을 테스트 할 수 있다. • 최종 결과물의 수준은 반복된 테스트 횟수에 비례한다. • 대부분의 반복은 가상으로 구현된다. (faked)

24. 오즈의 마법사 방법 • 사용자와의 상호작용을 가상으로 구현한다. Comes from? • 영화 “오즈의 마법사” • “커튼 뒤의 조종자” • 컴퓨터 산업에서 오래된 전통적은 방법 • 예. 뒤에 숨겨져 있는 VAX 머신으로 PC의 프로토타입을 구현. • Much more important for hard to implement features • speech & handwriting recognition

25. Lo-Fi 프로토타입의 문제점 • “Computer” inherently buggy • 실제 구현보다 느리다. • 상호작용의 속도도 느리다. • 특정 기능은 구현이 어렵다. • 풀-다운 메뉴, 드래그 등 • 실제 최종 구현 같이 보이지 않는다. • 가끔 각 위젯을 인지하기 힘들 때도 있다. • 최종 사용자가 자기 스스로 사용해볼 수 없다. • 사용자의 실제 사용 환경과 완전히 같을 수 없다.

26. Denim Outpost Suede Informal UI 프로토타입 도구들

27. Informal UI 프로토타입 도구들 • Low-fi 종이 프로토타입의 장점을 그대로 제공한다. • 브레인 스토밍 (brainstorming) • 다양한 아이디어를 신속하게 고려할 수 있다. • 세세한 부분까지를 고려할 필요가 없어진다. • 완성된 설계의 불필요 • 모든 경우를 고려할 필요도 없다. 단지 중요한 예제만 표현하면 충분하다. • 전자적인 도구로서의 장점도 함께 제공한다. • 사용의 편리성 • “design memory”를 함께 제공한다. • 다른 전자적인 도구로의 이동이 간편하다. • 최종 사용자와의 상호작용이 좀 더 실제와 비슷하다.

28. Designers’ Outpost:정보의 구조를 설계하는 Tangible 인터페이스 • 실제 물리적인 세계와 가상의 세계를 조합 • 물리적인 포스트-잇으로 가상의 피드백을 구현함. • 실제성을 지원한다. • 종이의 affordances • 협업 • large, persistent representation • 전자 매체의 장점을 추가한다. • 편집, 재사용, 분배 등 • 추후에 다른 툴로의 변환, 전환 등이 쉽다.

30. DENIM:스케치 기반 웹 사이트 설계 • Early-phase navigation & 상호작용 디자인 • 다양한 화면을 지원한다. • 싸이트맵 – 스토리보드 – 페이지 스케치

31. Travelshare Low-fi 프로토타입 & 테스팅

32. 메일을 읽어! SUEDE:음성기반 UI 개발을 위한 Informal 프로토타이핑 툴 • Support design practice • 예제 대본(script) • 오즈의 마법사 (WoZ) • 빌트인 (built-in) 반복적 설계 • 설계 – 테스트 – 분석 • 빠르고 유연한 설계 • 음성 인식이나 음성 합성 등의 기술은 없음. • 프로그래머도 필요 없음

34. TOPIARY:위치기반 UI를 위한 프로토타이핑 툴 • 위치 기반 시나리오 작성 • 사람, 구역, 물건 등을 지도에 놓을 수 있다. • 시나리오를 이용하여 스토리보드의 이동을 구현한다. • 반복적 설계 • 오즈의 마법사 (WoZ) • Place Lab Wi-fi location sensor • 빠르고 유연한 설계 • GPS나 다른 특별한 장치가 불필요 • 프로그래머도 불필요

35. 정리 • Low-fi 테스팅은 신속한 반복을 가능하게 한다. • 사용자로부터 반응, 피드백을 바로 알 수 있고, 이를 곧바로 설계에 반영할 수 있다. • Informal 프로토타이핑 도구들이 종이 방법과 high-fi 도구 사이의 차이를 보완한다. • High-fi UI 툴은 조금 더 실제에 가깝게 만들어진 UI 설계를 반영하여 테스팅하기에 좋다. • 일반적으로, 이 경우에도 구현된 어플리케이션 안쪽의 구체적인 기술은 무시할 수 있다.

36. 읽을꺼리프로토타이핑 • 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