1 / 36

LOW FIDELITY

Human Computer Interface. LOW FIDELITY. Tack-Don Han Media System Lab., Yonsei University http://msl.yonsei.ac.kr. 좋은 디자인 ? or 나쁜 디자인 ?. 매킨토시의 Eudora Pro 프로그램의 암호 입력 창 대부분의 암호는 대소문자가 섞여 있음 . Caps Lock 의 설정으로 간혹 인증이 실패되는 경우도 있다 .

sakura
Télécharger la présentation

LOW FIDELITY

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  14. ESP

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

  16. 모델 만들기

  17. 모델 만들기

  18. 모델 만들기

  19. 모델 만들기

  20. 모델 만들기

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related