작업분석을

작업분석을

작업분석을 UI UI 설계에 적용 설계에 적용

숙명여자대학교

임순범

교재



교재



“ 더 나은 사용자 경험 (UX) 을 위한 인터랙션 디자인” , 댄 새퍼 , 에이콘 , 2008

 5 장 . 인터랙션 디자인의 도구 [p.135~148]



인터페이스 디자인을 위한 사용자와 태스크 분석 , J. Redish, 방수원 역 , 한 솜미디어 , 2003

 11 장 . 수집한 데이터 분석과 제시 [p.369~406]

 12 장 . 인터페이스 디자인으로 들어가는 작업 [p.421~452]



인간과 컴퓨터의 상호작용 , 김희철 저 , 사이텍미디어

 11 장 . 시나리오 기반 디자인



Univ. of Washington, James Landay 교수 강의노트

작업분석 결과를 UI 설계에 적용



페르소나 ( 퍼소나 )



제품 / 서비스에 관련될 사람들의 특정 유형



비슷한 목적 , 의도 , 행동방식을 공유하는 인물들의 가상적인 혼합



시나리오 : 글로 쓰인 프로토타입



제품 / 서비스가 어떻게 쓰이게 될까 ?



등장인물이 페르소나 : 설정한 인물에 컨텍스트를 부여



스케치와 모델



종이 / 화이트 보드에 스케치 , 또는 모형제작



공간의 제약 없음 , 쉽게 수정



스토리보드



사진이나 일러스트레이션을 이용하여 시나리오에 맞추어 배열



사용자의 동작 중 가장 중요한 부분을 설명

적용 (1) - 페르소나 ( 퍼소나 )



Persona



제품 / 서비스에 관련될 사람들의 특정 유형

 ‘ 사용자들’ 이 아니라 특정 한 사람을 위해 디자인하는 느낌



비슷한 목적 , 의도 , 행동방식을 공유하는 인물들의 가상적인 혼합

 개별 페르소나는 심층적인 성격차이 ( 행동 , 목적 , 배경 등 ) 가 필요함



페르소나 설정



리서치 대상자들의 특정 행동이나 의도에서 공통분모 추출

 여기에 이름 , 사진 , 배경 데이터 추가하여 진짜 사람처럼

 페르소나 정의 문서에 행동 , 의도 , 목적 등 기술 : 1 명 ~7 명 정도



페르소나별 해당 작업목록 표 작성 가능

 사용자 / 작업 행렬표 참고



페르소나에 시나리오 필수

 시나리오를 부여하여 목적에 맞는 기능을 테스트해야 쓸모

페르소나의 작성



인터뷰 기록 분석 및 행동 변수 파악



도출된 태스크를 중심으로 사용자들의 행동과 관련된 모든 요소를 추출



3-4 개 이상의 태스크 패턴에 항상 같은 그룹에 속한 사용자들을 찾는다 .



이들의 행동을 중요 ‘행동 패턴’ 으로 간주



주요 행동 패턴의 논리와 근거를 파악하여 적절한 것인지 분석



페르소나의 목표 설정



사용자 행동 패턴 ( 특성 ) 을 간단한 목록 형태로 정리한다 .



각 행동 패턴을 대표하는 페르소나 설정



페르소나별 목표를 정리하고 , 개인적 사회적 관계를 설정



예 )



목표 : 대출하기 위한 도서를 검색하고 ,

그 위치를 빨리 알 수 있었으면 좋겠다 .



관계성 : 학생 , 도서관 직원 등



상세 설명 작성



이름



페르소나를 명확하게 구분하기 위해 명명 , 역할 명칭을 사용하기도 함



동기와 요구사항



공통적인 동기를 가진 그룹은 하나의 페르소나로 묘사 , 그룹의 사용자를 대표



사용자가 무엇을 얻고자 하는지 , 무엇을 기대하는지를 표현



시나리오



시스템 자체가 어떻게 사용될지 , 시스템과 사용자 간 상호작용을 묘사



시스템이 실제 사용 상황에 얼마나 적합한지 판단할 수 있게 한다



사용자가 사이트에 방문할 때 어떤 정보를 알고 있을지 정의하기도 한다



사진



페르소나를 대표하는 이미지 설정



기타



인구통계학적 정보 , 기술 숙련도 , 신상정보 등



페르소나의 작성 예



페르소나를 만드는 방법에는 표준화 된 형식이 없다 .



페르소나는 프로젝트에서 차지하는 중요도와 비중에 따라 상세하게 묘사

 단 , 어떤 형태이더라도 공통적으로 사용자의 요구는 무엇이며 , 사용자들이 무엇을 기대하는지는 표현되어야 한다 .

김숙명 : 대출예약자 “ 목표 : 도서 대출 예약을 한다 .”

기본 정보 : 20 살 여자 신상 정보 : 대학교 신입생 요구사항 : 도서 대출 예약

기술 친숙도 : 인터넷 사용이 친숙하다 . 동기 및 문제 시나리오

김숙명은 현재 20 살의 대학교에 갓 입학한 여대생이다 . 그녀는 신입생으로 첫 과제를 훌륭하게 수 행하기 위해 도서관에서 과제와 관련된 도서를 대출을 하고자 한다 . 그러나 현재 필요한 도서가 모 두 대출이 된 상태이다 . 그녀는 다음 순서로 대출을 받고자 대출 예약을 하려고 한다 .

적용 (2) - 시나리오



문제 시나리오



요구사항 분석 , 페르소나 작성



상세 시나리오



다양한 요소들이 같이 작동되는 상황을 묘사

 태스크 및 페르소나에서 정의된 문제시나리오를 기반으로 , 목표로 하는 시스템이 ‘

사용자’와 ‘시스템’ 관점에서 어떻게 수행될지 상세 시나리오로 표현

 상세 시나리오는 구체적인 태스크 목록이 모두 포함되어 있어야 한다 .



시나리오 단계에서는 태스크의 논리적인 흐름을 파악하는 목적

 아직 화면 디자인은 포함하지 않는다 .



프로토타입의 작성 및 평가에 활용

 단순한 예제가 아니라 , 디자인 변수를 설정하고 점검하는데 활용

페르소나 및 시나리오 선택 시 고려사항



시나리오의 선택



사용자가 접할 실제 작업을 선택한다

 적당한 범위를 제공해야 한다 .

 작업에 대한 기능 / 행위를 비교하여 전체적인 세부작업 항목이 많이 포함되도록



사용자 / 작업 행렬표를 확장



작업 / 페르소나 / 시나리오 행렬표



예 ,

시나리오 1 시나리오 2 시나리오 3 시나리오 4 시나리오 5

작업 1 세부작업 1a ○ ○ ○

세부작업 1b ○ ○ ○

작업 2 세부작업 2a ○ ○ ○ ○

세부작업 2b ○ ○

11.1 왜 SBD 인가 ?



시나리오 기반 디자인 (Scenario-Based Design)



과학 : 가시화 / 수식화 가능



디자인 - 관습의 세계 : 원리 작성 및 가시화 곤란

 시나리오 작성으로 가시화 , 이를 이용한 설계 방법



M. B. Rosson & J. M. Carroll (2002) 이 제시

Usability Engineering: Scenario-based Design of HCI



시나리오



다양한 분야에서 사용



시스템 요구분석 등에 사용 – 유용한 설계도구

SBD 의 필요성

비과학적이지만 중요한 개발 방법



시나리오는 구체적이다 .

 시스템 개발 초기에 가시적인 모델 , 구체적 형상 제공 가능

 시스템이 복잡할수록 개념적 모델 설계가 곤란



융통성 있는 제작도구이다 .

 불완전하므로 쉽게 고치고 , 다듬을 수 있음

 하드웨어 수정 > 소프트웨어 수정 > 시나리오 수정



영역 전문가와 개발자 사이의 소통 기반

 프로토타입을 평가할 수 있는 도구

 영역 전문가는 시나리오를 통해 프로토타입에서 문제점 파악→피드백



인간의 활동을 기술한다 .

 인간중심의 디자인 정신과 일치

11.2 Rosson & Carroll’s SBD



시범사례 ( 교재 p.231) : MOOOsburg 가상커뮤니티 : 가상과학전시회



SBD 프로세스



요구분석 단계



사용자에 대한 연구 , 필드 연구 등 수행

 문제 시나리오 : 생각과 논의를 촉발



디자인 단계



활동 (activity) 시나리오

 작업에서 발생되는 가상활동 :

목적 , 요구사항 , 시스템 기능에 초점



정보 (information) 시나리오

 사용자 행동에 대한 정보 구조화 및 계층화 : 요구사항을 시각화



상호작용 (interaction) 시나리오

 작업 수행에서 사용자의 물리적 행동과 시스템의 반응에 초점



프로토타입 제작 및 평가

11.3 절

11.4 절

11.3 요구 분석



요구분석 단계



(1) 근개념 (root concept) 의 설정

 필드에 나가기 전 설정

 비전 / 철학 , 디자인 프로세스 관련된 초기 가정

 사용자 ( 관계자 ) 에 대한 이해 , 사례 [ 표 11.1] p.236



(2) 필드 연구

 현장에 나가서 사람의 활동을 관찰 , 그 결과를 분석 정리

 사람들 , 활동 , 작업 , 문화 등을 이해 : 사용자 연구나 요구 분석에 매우 유용

 관찰과 기록 , 인터뷰 , 도구에 대한 관찰력이 필요



(3) 종합과 분석

 사용자 분석 : 필드 데이터로부터 사용자 그룹의 프로파일 작성 [ 표 11.2] p.239

 작업 분석 : 사용자들이 수행할 작업에 대한 분석 [ 표 11.3] p.240

 도구 분석 : 각 도구가 지닌 정보 분석 , 사용 절차에 대한 분석 [ 표 11.4]

요구분석 단계

요구분석의 결과



요구분석의 결과



(4) 문제 시나리오

 현재 업무에 대한 시나리오

 현재 상황 , 시스템 디자인에 관계 있는 사용자 활동에 대한 이야기

 필드 연구를 토대로 작성 : 허구이지만 사실적으로 묘사

 문제 시나리오 작성 단계

 가상의 사용자 설정 (persona) [교재 사례 ] 예 ) Sally, Ralph (p.243)

 실제 대본 사례 : 가상 사용자들의 실제 활동 이야기

[교재 사례 ] p.244 => 다음 쪽

 예 ) [ 문제 시나리오 1] 샐리는 블랙홀에 대한 전시를 계획한다 .

 예 ) [ 문제 시나리오 2] 랠프는 고등학교 물리 프로젝트를 심사한다 .

사례 : Sally ( 출품하는 학생 )



가상 사용자 (persona) 설정 - 각 배우들의 배경 , 동기 , 특징 등 묘사 p.243

 Sally (출품하는 학생 ) : 지난 3 년 동안 과학 전시회를 준비해 온 블랙스버그 고등학교 2 학년 생이다 . 그녀는 과학 현상에 대한 호기심이 가득하다 . 그녀는 똑똑한 학생이며 , 늘 자신의 의 사가 분명하다 . 그녀는 학교에서나 집에서나 컴퓨터를 즐기는 편이다 . 그녀는 워드프로세서는 물론 , 몇몇 그래픽 편집 프로그램과 친숙하다 . 그리고 지난 2 년 동안은 데이터베이스와 간단 한 프로그래밍 패키지를 시작했다 . 그녀는 거의 매일 친구들에게 이메일을 보내거나 , 웹 서핑 에서 많은 시간을 보내곤 한다 .



가상 사용자들의 실제 활동 이야기 : 문제 시나리오

 (전략 …… 교재참조 ) Sally 는 애니메이션을 보여주기 위해 카드 덱이나 책갈피가 넘어가듯이 한 장면에서 다른 장면으로 넘어가는 효과를 부과하여 각 장면들을 소개하려고 한다 . 무엇보다 도 몇 가지 변형된 것을 만들어 방문자들이 이들 중 어느 것이 그녀의 프로젝트 데이터와 결론에 맞는지를 추측하게 하기로 결정한다 . 그녀는 그녀의 전시에서 단순한 시뮬레이션이 아니라 , 이 렇게 동적인 요소를 부과하여 , 사람들이 추측할 수 있도록 만들 것이다 . 그녀는 심판들이 그녀 가 구상한 이런 특징을 주목할 것이고 , 이것이 수상을 위한 주요 포인트가 될 것이라고 생각한 다 . 지금부터는 그녀가 어떻게 이 모든 것들을 완성할지를 생각해 내야만 한다 .

*** 페르소나용 동기 / 문제 시나리오에 적용하기에는 길다 . => p.243 정도가 적당

11.4 시스템 디자인



활동 (activity) 디자인



실제적인 시스템 기능을 분명히

 구체적으로 시스템이 무엇을 해야 하고 , 어떤 기능이 실행 되고 , 어떤 정보의 기본 값이 무엇인지 등에 대해 생각



메타포 설정이 중요



정보 (information) 디자인



이 기능들을 어떻게 표현하고 , 배열하고 , 화면상에 배치할 것인가



객체와 행동들이 인간이 지각하고 이해하기 쉽도록 표현하고 배열

 스크린 , 메뉴 , 대화상자 등의 디자인 , 음성 , 영상 , 애니메이션 등도 디자인



상호작용 (interaction) 디자인



사용자가 시스템을 어떻게 사용할 것인가

 즉 , 어떻게 시스템과 상호작용을 할 것인가를 디자인하는 단계

 인간과 시스템이 대화를 원활히 해 주기 위하여 필요



시스템의 반응 , 시스템 상태의 시각화 , 복구 기능 등의 문제

활동 디자인 상세



활동 공간 탐색

 메타포와 기술 ( 혹은 도구 ) 에 대한 탐색

실 세계에서 사람들이 쉽고 직관적으로 인식 가능한 대상을 통해

실상과 가상 사이에 사상 (mapping) 이 이루어져야 함

예 ) 가상 과학 전시회를 위한 메타포 [ 표 11.7] 와 해당 기술 [ 표 11.8] p.250



활동 시나리오와 영향력 분석

 시스템 디자인팀 ( 디자인 단계 )

상황적 특징에 대한 영향력 분석을 하며 활동 시나리오 작성

사용자가 개발될 시스템 사용시 어떤 생각과 반응을 할지 고려

 활동 시나리오 예 [ 블랙홀 전시 계획 ] p.251,

 영향력 분석의 예 [ 표 11.9] p.252 ( 생략 )

활동 시나리오 예



Sally 는 블랙홀에 대한 전시를 계획한다 .

 Sally는 가상 전시회에서의 출품이 지금까지 있었던 전시회들과는 무엇이 다를까에 대 해 궁금증이 많다 . 그녀는 그녀의 아이디어를 발표할 때 , 조금은 유연성이 있기를 희 망하고 있고 , 그녀는 심사위원들이 좋아하는 몇 가지의 상호작용의 요소들을 첨가할 수 있을 것이라고 생각한다 . 사실 , 그녀는 자신이 연구한 블랙홀 형성 이론을 표현하 기 위해 이미 하나의 authorware 시뮬레이션을 개발해 놓았다 . Sally 는 가상 과학 전 시회에 이것을 꼭 포함하고 싶어 한다 .

 Sally가 가상 전시회 시스템의 전시 영역으로 갔을 때 , 그녀는 하나의 일정한 레이아 웃을 가지고 있는 템플릿을 찾았다 . 거기에는 제목 페이지 , 개요 , 슬라이드 쇼 , 구체 적인 결과 , 프로젝트 리포트 , 그리고 참고 목록 등을 담고 있었다 . 처음에 그녀는 이 것이 그녀가 이미 계획하고 만들어 놓은 것과 맞지 않을까봐 걱정을 했다 . 그러나 그녀 가 시간을 살펴보면서 , 그것들 또한 많은 유연성을 가지고 있다는 것을 발견했다 . 예 를 들어 , Sally 는 자신의 시뮬레이션을 뒷받침 할 새로운 컴포넌트를 더했다 . 그러나 그녀는 어떻게 그녀가 행성 모델들을 어떻게 표현할지에 대해서는 확신할 수 없었다 .

 후략 ……… ( 교재 참조 )

적용 (3) - 간략한 스케치 작성



기존의 스케칭과 유사



단순히 모습보다는 개념이 중요

 필요시 시간의 흐름이나 역학관계도 표현



낮은 정확도 요구

 원하는 개념을 표현하는 정도의 정확도 / 정밀도로 충분

 맥락 (Context) 을 대략적으로 파악할 수 있을 정도만을 필요로 하므로 ,

상세한 화면 디자인은 하지 않는다 .

적용 (4) - 스토리보드 (Storyboards)



스토리보드의 유래



film & animation



주요 이벤트의 기록 (“script”)

 상세한 설명은 생략 ,

 중요한 상호작용에만 집중

스토리보드 (Storyboards)



시나리오로부터 세부기능 도출



화면 레이아웃 및 상호작용에 따른 디자인 등을 포함

 상세 입력도구 , 시스템의 기능 , 세부 인터랙션 등을 표현



주석

 높은 수준의 스토리보드는 간략한 기능 정보를 포함

 특히 그림으로 표현되기 어려운 것은 글로 표현하여 정확히 이해하도록

Ink Chat

Picturing Time