정혜란

Freed: A System for Creating Multiple Views of a Digital Collection during the Design Process

CHI 2011. Session: Digital Content&Collection

Philip Mendels | Joep Frens | Kees OverbeekeDesigning Quality in InteractionDepartment of Industrial Design

Eindhoven University of Technology

2012.05.03

UX lab | Hyelan

요즘 저의 관심사는,

새롭게 만들어지는 웹사이트, 소프트웨어의 ‘화면’

특히 사용자 중심의, 주위 환경과 사용 맥락과 기기의 특성이 반영된 유용한 관점으로서의 화면 구성(view)에 관심이 많아요.

새로운 소프트웨어를 만드는 논문을 찾아서개선포인트 혹은 주요 디자인 임플리케이션은 무엇인지 모으고 있습니다.

화면(view) 설계에 있어서 어떻게 접근하고 있을까?

새로운 소프트웨어를 만드는 논문을 찾아서개선포인트 혹은 주요 디자인 임플리케이션은 무엇인지 모으고 있습니다.

그래서 찾은 논문이,

Freed: A System for Creating Multiple Views of a Digital Collection during the Design Process

하나, 디자인과 학생들이 프로젝트 수업에서 활용할 수 있는 툴

둘, 학생들이 가지고 있는 디지털 컨텐츠 관리디지털 컨텐츠를 공간적으로 조직화컨텐츠들간의 관계를 정의하고 그것을 시각적으로 반영

셋, 학생들이 그들의 digital collection에 대해 새로운 관점(view)를 만들어 낼 수 있는 힘을 부여

넷, 프로젝트 수업에서 학생들이 직접 써보도록 하고 feedback을 받는 방법 사용

‣ 디자인과 학생들은 한 학기 시간의 60%를 디자인 프로젝트 수업에(때로는 진짜 클라이언트를 위한 프로젝트) 소비함

‣ 이 과정에서 매우 다양한 디지털 자료를 수집 (diverse digital contents)‣ 예를 들어 planning, 요구사항 리스트, 관련 작업 혹은 영감을 주는 작업 사례, 아이디어, 스케치, 인터랙션 시나리오, 클라이언트/전문가 피드백, 프로토타이핑 교재, CAD 모델, 프로그래밍 코드, 사진/동영상 프로토타입, 사용자 테스트 정보, presentations, reports

‣ 지금까지 학생들을 관찰한 결과 대부분 이러한 디지털 컨텐츠를 관리할 때 위계적인 파일 관리 브라우저를 활용함 (윈도우 탐색기, 맥 파인더)

standard file browser는

1. 디자인 작업의 시각적 특성과 맞지 않음

2. 위계적인 것 외의 관계에 대한 정의/시각화가 어려움

3. 서로 다른 소프트웨어 기반의 작업들을 통합하기 어려움

Introduction

다이나믹한 디자인 프로세스에 적합하고,기존의 standard file browser의 문제점을 해결할 수 있는 툴을 만들자

그들의 작업을 다른 시공간적 표현으로 쉽게 바꿀 수 있고,컨텐츠의 분열(fragmentation)을 막기 위해 관련된 디자인 작업을 통합한 툴 (e.g. mapping ideas, presenting)전체 디자인 프로세스를 아우를 수 있는 툴

Research Question

“

‣ 디자인을 돕기위한 많은 시스템이 ‘어떻게 하면 디지털과 물질적인 작품을 결합할 수 있도록 할까’에 초점을 맞추고 있음 (Keller, 2007; Martens, 2010)

‣ 디지털 작업들, 디지털 컨텐츠간의 관리와 조직을 도와줄 수 있는 시스템은 부족

‣ 특히 전문 디자이너의 지식관리에 대한 연구에서, 앞서 진행한 디자인 작업에 대한 지식과 활동들의 재사용이 많이 일어나고 있으며 이 과정이 가치있다는 결과가 나오고 있음

‣ 관련 작품들의 스토리에 대해 알고싶어하고, 과거의 작업 과정을 반영하고 싶다는 디자이너들의 니즈‣ 디자이너들의 구성 전략에 대한 연구를 보면 물리적인 노트나 스케치북, 디지털 폴더가 가장 많이 쓰이는 조직화 전략 (하지만 대부분 이 폴더는 엉망...)(Sharmin, 2010)

Related Study 1Digital collection during the design process

‣ 자유로운 공간구성은 여러 가지 관계들을 맵핑할 수 있게 해줌‣ 복잡한 디자인 프로세스와 컨텐츠의 관계, 학생들간의 관계, 프로젝트의 관계‣ 이러한 관계 맵핑은 collection contents들 간에 자유로운 연상을 가능하게함‣ 자유로운 연상은 창작 과정에서 영감을 얻는데 중요한 요소로 작용 (Ben, 2000)

‣ Prezi: 온라인 어플리케이션, 인터랙티브 맵과 동적인 프레젠테이션 제작이 가능, 몇몇 학생들이 프레젠테이션에 사용

‣ Environment: 컨셉, 컨텐츠 맵핑 소프트웨어, Prezi와 비슷하게 digital canvas에서 제작하며 presentation path를 만들 수 있음, 하지만 슬라이드가 캔버스와 별도로 존재하며 이미지나 텍스트 아이템을 링크할 수 있음(캔버스에 영향을 미치지않고 독립적으로 편집이 가능)

‣ 갖고 있는 아이템과 그들간의 관계가 복잡해지면 만족스러운 레이아웃을 찾기 어려워짐‣ 이에 대한 하나의 해결책으로 (semi-)자동화 레이아웃을 제시 (Heer, 2005)

Related Study 2Spatial organization and automated layouts

‣ view: 개발자가 미리 정의하거나, 사용자가 만들어낼 수 있음‣ exploratory visualization: 사용자로 하여금 동향을 파악하고, 변칙을 찾아내고, 정보를 분리/재조직하고, dataset의 비교를 통해 차이점/공통점을 명확히 파악할 수 있도록 함

‣ 사용자는 결과를 얻는 동안 multiple views에서 데이터와 상호작용할 수 있음

Related Study 3Multiple views

Research Process

툴 프로토타입제작 1st Evaluation

Longitudinal evaluation

- 학생 4명- 2010.3 ~ 2010.6

2nd Evaluation

Workshop &Questionnaire

- 3시간에 걸친 워크샵- 학생 14명- 2010.9

‣이 연구에서는 매우 구체적인 수준의 사용성 평가를 위한 Evaluation이 아님

컨텐츠를 자유롭게 배치하거나 관계를 만들고, 빠르게 공간적으로 재구성하며,연결되어 있는 여러개의 view를 만들고,서로 다른 활동들을 통합(e.g. presentation)하기위한 도구

- 아직 개발중인 툴- 하지만 수업시간에 직접 활용해보도록 함

Freed: current state of the system

‣ Eclipse 개발환경에서 Java 기반으로 만들어진 single-user software application‣ openGL hardware accelerated mode‣ 윈도우와 맥 OS 환경에서 모두 작동‣ 텍스트, 이미지, 동영상 컨텐츠 지원

Freed: current state of the system

System Overview

��� (zoom, panning��)

�� �

Freed: current state of the system

‣ 캔버스(a)와 패널(b)로 구성

1. Graphical Interface

Freed: current state of the system

‣ 하나의 collection 파일에 여러 개의 view를 만들 수 있음‣ view를 바꾸면 컨텐츠의 위치나 크기가 변함‣ view를 일종의 슬라이드로 보고 프레젠테이션에 활용 가능 (아직 view의 썸네일 제공은 안됨)

2. View and Multi-view presentation

Graphical node

Text node

Minimized node

Freed: current state of the system

‣ main collection item: node‣ 썸네일은 자동 생성

3. Collection Items

combine text-graphical node

Path : linear sequence of nodes

force-based algorithm: �� ���� ��� ��� �� ����, �� 2�� �� 3��� ���� �� �

Freed: current state of the system

‣ force-based layout은 노드끼리 겹치는 것을 방지하고 연관되어 있는 노드끼리는 가까이 배치해줌‣ 노드의 위치를 재배치하거나 리사이징이 용이‣ 중요한 노드나 관계는 강조 가능

4. Force-based Layout

Freed: current state of the system

‣ Freed의 Path는 Straight와 Curved로 설정 가능‣ Straight setting : 하나의 path에 집중할 수 있으며 중심 Path와 다른 노드가 어떻게 연결되어 있는지 보고싶을 때 활용

‣ Curved setting : 노드의 구조에 초점을 맞춘 설정, view에 따라 관련된 컨텐츠를 모아보고 싶을때나 현재 컨텐츠의 구조에서 Path가 어떻게 흘러가는지 보고싶을 때 활용

5. Force-based Paths

Freed: current state of the system

‣ view안에서 컨텐츠의 구조를 연대기적으로 보여줌‣ 컨텐츠들이 서로 어떻게 영감을 주었는지 파악 가능‣ 중요한 시점에 timestamp

6. Force-based Timeline

Freed: current state of the system

‣ 특정 노드나 패스에 집중하거나 필요없는 부분을 가릴 수 있음

7. Showing and Hiding Content

‣ 디자인학과 학생 4명‣ 2010.3 ~ 2010. 6, final bachelor project‣ software + illustrated digital manual‣ 조사원이 주요 feature는 직접 시연, 구체적인 사용법엔 대한 안내없이 써보도록 함‣ 3주에 한번씩 만나서 코멘트 받음, 느슨한 인터뷰

Evaluation: Longitudinal evaluation

Evaluation: Longitudinal evaluation

다음 네 가지에 초점을 맞춤

1. Documentation 도구로서의 Freed- 모든 학생들이 연대기적 방법으로 수평적인 디자인 프로세스에 따라 메인뷰를 만듦

2. Exploration & Reflection을 위한 도구로서의 Freed- 이 프로젝트 동안 학생들은 collection과 컨텐츠를 탐구하거나 반영하는데 이 툴을 사용하지는 않았음- 주로 document, communication

- 하지만 비공식적인 프레젠테이션을 준비하는 과정에서 이전 작업을 다시 찾거나 작업의 전체 프로세스를 살펴보는데는 편하다고 느

낌

3. Additional activities을 위한 도구로서의 Freed- 커뮤니케이션 도구로 많이 사용

- 두 명의 학생이 두 주에 한번씩 진행하는 프로젝트의 진행 발표에 활용- 스크린샷을 그대로 프레젠테이션이나 포스터, 레포트에 활용

4. Acceptance를 위한 일반적인 코멘트와 도전- 바쁜 프로젝트 기간중에 기능을 하나씩 익혀가기 어려움- 튜토리얼 비디오가 필요

- 컨텐츠를 빠르게 구조화하거나 재배치할 수 있는 것을 매우 마음에 들어함

Evaluation: Longitudinal evaluation

수정사항

- 하이라이트 기능

- 첨부, 하이퍼링크 기능- 튜토리얼 비디오를 볼 수 있는 웹사이트 개설

‣ 3시간에 걸친 워크샵 시행‣ 14명의 디자인학과 학생‣ 졸업학기의 학부과정 7(여3, 남4), 석사과정 7(여1, 남6)‣ 모두 툴을 처음 써보는 학생, 다수의 long project 경험자, 포트폴리오 보유‣ 13명으로부터 설문지 회수

‣ 학생들에게 툴 프로그램을 제공하고 튜토리얼 비디오를 보게함‣ example collection 포함, 자신의 이전 프로젝트와 막 시작하는 프로젝트 디지털 자료를 가능한한 가져와주길 부탁

‣ Freed로 디지털 자료를 정리, 조직화 하도록 요청

‣ 설문은 크게 세부분으로 구성‣ 1) 디자인 과정에서 일어나는 실제 수집과 반영에 대한 일반적인 질문 (6문항)‣ 2) Freed 사용에 관련된 질문 (19문항)‣ 3) Freed 사용하면서 발생한 요구사항과 개선점 (9문항)

Evaluation: Workshop and Questionnaire

1. Documentation 도구로서의 Freed

“During the process, I got inspired by the option of multiple views. While I was going through my collection, I realized that in different situations, you need different ‘views’ on your collection. In my case I figured that there are situations where you want to present your specific skills as a designer and there are situations where you want to focus more on your projects.”

“The first view is hierarchical to show my activities during a semester, where each activity can have subgroups. This view was an overview to see what kind of media I have created for these activities. The second view was to visualize my activities linked to competencies that I need to work on for my education.“

2. Exploration & Reflection을 위한 도구로서의 Freed

“The various representations of my output are tedious to produce as most of the time it involves recreating part of a previous representation. The difference between these kind of representations are key to gaining insight, however the representations of the current software I use (OmniGraffle, Photoshop, Visio) are too static.”

Evaluation: Workshop and Questionnaire

3. Additional activities을 위한 도구로서의 Freed- 모든 학생들이 하나의 프로젝트 안에서 ‘small collection’을 만들어서 사용- small collection은 디자인 프로세스 안에서 activity별, 물리적인 결과물 등 여러가지 기준에 따라 만들어짐

- e.g. process overview, skill에 따른 작업 구조화, 현재 프로젝트에 관련된 마인드맵, 관련 작업 맵핑(벤치마킹)...

4. Acceptance를 위한 일반적인 코멘트와 도전- 모든 학생들이 시스템이 제공하는 multiple view 기능을 활용

- 하지만 시스템의 자유도가 지나치게 높다는 의견도 있었음

- 13명 중 9명은 실제 디자인 작업에 활용하고 싶다고 응답- 물리적인 자료에 대한 관리가 쉽지 않음

Evaluation: Workshop and Questionnaire

‣ 실제 디자인 작업에 유용 (특히 학생들에게)

‣ documentation, reflection practices 에 대한 니즈가 높았음

‣ exploration, reorganization 기능이 이 툴의 key feature

‣ 학생들로부터의 피드백을 통해 꽤 높은 수용도를 기대할 수 있을것으로 보임

‣ 툴 사용과 관련된 설명, 구체적인 사용성에 대한 개선이 필요 ‣ 전체 디자인 프로세스를 살펴보는 londitudinal study가 필요

Conclusion

Thank you :)