Scenario-Based Interactive UI Design

1. Scenario-Based
Interactive UI Design
+ CHI 2013
-Koki Kusano
/안현진
x 2014 Spring

2. Scenario-Based Interactive UI Design
2014 UX LAB. MEETING
- CHI 2013
HyunjinAhn
2014. 04. 10

3. TobeSoft , Prototyping Tool

4. Koki Kusano Momoko Nakatani Takehiko Ohno
NTT Service Evolution Laboratories

5. Abstract
• 사용자의 행동(User behavior)을 파악하는 것은 인터랙티브한 소프트웨어를 설계할 때 가장 중요한
요소.그러나 하나의 UI로 가능한 사용자의 모든 행동을 포함하는 것은 어렵다.
• 디자인에 대한 지식이 거의 없는 사람들에게도 시나리오는 사용자의 행동을 이해하거나 생각을
공유하는 것을 더 쉽게 도와준다.
• 그러나 그것들은 두 가지 약점이 있다.
1. 하나의 UI에 다양한 시나리오를 모두 반영하는 것은 어렵다.
2. 시나리오와 UI를 연결하는 것은 반복적 디자인에서 매우 힘든 작업이다.
• 이 연구에서는 Scenario-based Interactive UI Design tool을 제안한다.
이 툴은 사용자 행동 기반 시나리오와 유아이디자인에서의 정보를 사용하는 것을 돕기 위해 설계되었다.
• Scenario-based Interactive UI Design tool은…
- 위 문제들을 계층적인 시나리오 구조와 시각화된 시나리오 오버뷰를 통하여 해결했다.
- 시나리오를 작성하고 UI를 쉽게 설계할 수 있으며 디자이너의 능력을 향상시킨다.

7. Introduction
시나리오의 장점
• 시나리오 사람들이 과업을 기술하는 아주 유용한 툴이다.
• 시나리오 자연스러운 언어로 쓰여져 있기 때문에 이해하기 쉽다
• 글을 쓰는 사람이 유저-컴퓨터 인터랙션에 대한 충분한 경험이 없더라도 누구나 쓸 수 있다.
시나리오와 디자이너
• 그러나 시나리오가 많아지거나 복잡해질수록 시나리오를 관리하는 것은 점점 어려워진다.
• 디자이너는 시나리오에서 공통점들과 장단점을 찾아 그것들을 통합하는 것은 중요한 업무를 한다.
• 이때 시나리오와 UI를 연결하는 작업은 디자인이 반복됐을 때(Iterative Design) 아주 힘든 일이다.
• 사용성 평가(Useability Test)의 결과를 바탕으로 디자이너가 UI를 수정할 때,
디자이너는 UI뿐만 아니라 원래 시나리오를 동시에 고려해야한다. (이 과정은 원하는 퀄리티에 도달할때까지 반복되어야한다.)
• 이런 어려움은 시나리오를 중요하지 않다고 느끼게 한다.
• 불행히도 아직까지 어떤 도구도 이를 지원해주지 못했고 디자이너의 능력에만 강하게 의존해왔다.

8. Introduction
In this Paper..
• Scenario-based Interactive UI Design tool을 통해 위 문제를 해결했다.
1. 시나리오 관리
시나리오를 계층적인 구조로 표현하여 디자이너가 각각의 시나리오를 재정렬하기 쉽게 했다.
2. 여러 시나리오간의 관계를 시각화
태그를 사용하여 시나리오 구조를 자동으로 시각화 한다.
디자이너가 오버뷰를 통하여 UI를 즉시 고칠 수 있게 하였다.

9. 시나리오 중심 디자인 방법론의 4가지 스탭
1. 필드 스터디
필드 전문가는 타겟 유저들을 목적 상황에서 관찰한다.
그 상황에서 사용자의 행동을 드러나게 하는 인터뷰를 진행한다.
!
2. 사용자의 이미지와 시나리오 작성
디자이너는 구체적인 사용자의 이미지를 만들고 필드 스터디에서 모은 데이터를 기반으로 필요에 따라 시나리오를 작
성한다.
각 시나리오는 목표를 성취하기 위한 유저의 목표, 상황, 행동(Goal, Situation, Behaviors)을 포함한다
사용자의 요구사항과 기능을 뽑아내고 UI요소를 포함한 시나리오들을 구체화 시킨다.
3. UI디자인
시나리오를 기반으로 UI를 반복적으로 디자인한다.
왜냐하면 디자이너는 이 과정을 통해 필요한 기능이나 UI요소를 깨달을 수 있다.
!
4. UI평가
디자이너는 유저테스트를 통해 UI를 평가하고 결과를 기반으로 UI를 수정한다.
Related Work

10. 시나리오 중심 디자인 방법론의 4가지 스탭
1. 필드 스터디
필드 전문가는 타겟 유저들을 목적 상황에서 관찰한다.
그 상황에서 사용자의 행동을 드러나게 하는 인터뷰를 진행한다.
!
2. 사용자의 이미지와 시나리오 작성
디자이너는 구체적인 사용자의 이미지를 만들고 필드 스터디에서 모은 데이터를 기반으로 필요에 따라 시나리오를 작
성한다.
각 시나리오는 목표를 성취하기 위한 유저의 목표, 상황, 행동(Goal, Situation, Behaviors)을 포함한다
사용자의 요구사항과 기능을 뽑아내고 UI요소를 포함한 시나리오들을 구체화 시킨다.
3. UI디자인
시나리오를 기반으로 UI를 반복적으로 디자인한다.
왜냐하면 디자이너는 이 과정을 통해 필요한 기능이나 UI요소를 깨달을 수 있다.
!
4. UI평가
디자이너는 유저테스트를 통해 UI를 평가하고 결과를 기반으로 UI를 수정한다.
Related Work
스탭2와 스탭3 사이이 과정은 시나리오와 UI를 이해하기 어렵다는 문제가 있다.

11. Related Work
요구사항과 프로그램
코드간 추적성 연구
모델 드리븐
UI 자동 생성 접근
UI디자인에 대한 특별한 지식이 없는 이해관계자들이 많다.
시나리오, 사용자 요구, UI를 연결하는 것에는 촛점을 맞추지 않았다.
모든 시나리오 정보를 하나의 UI에 포함시키는 것은 불가능하다.
타 Scenario Based
Design
UI설계와 평가를 위한
프로토타이핑 툴
모델은 특별한 지식을 가지고 있지 않으면 이해하기 어려웠다

12. SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Scenario based Interactive UI Design tool
• 시나리오와 시나리오에 기반한 UI설계의 관리를 돕는다.
• 시나리오와 UI사이의 추적성을 제공한다.
• 디자이너가 UI설계 평가 프로세스를 효율적으로 반복할 수 있게 해준다.
• HTML과 자바스크립트를 이용한 웹기반 어플리케이션으로 개발되었다.
• 가장 중요한 부분은 시나리오 에디터와 UI에디터다. 디자이너는 상황에 따라 자연스럽게 바꿔가며 쓸
수 있다.

14. 시나리오 편집기를 통해 시나리오를 만들거나 관리하는 방법은 세 가지 단계로 진행된다.
SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Support of Scenario Management.
Writing a
scenario
디자이너는 소설처럼 글을 쓴다.
시나리오는 소프트웨어를 사용할 때의 사용자의 행동을 포함한다.
(ex. background, motivation, goal, steps).
Structuring
the scenario
Tagging
the scenario

15. 시나리오 편집기를 통해 시나리오를 만들거나 관리하는 방법은 세 가지 단계로 진행된다.
SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Support of Scenario Management.
Writing a
scenario
디자이너는 문장의 디테일을 기반으로 문장의 계층을 만든다
Structuring
the scenario
Tagging
the scenario

16. 세 번째 레이어는 실제적인 UI표현을 나타낸다
첫 번째 레이어는 씬의 타이틀을 나타낸다.
두 번째 레이어는 UI 표현이 없는 사용자의 행동을 나타낸다
전통적인 시나리오의 단점은 각각의 시나리오가 각각 따로 쓰여져 있기 때문에 서로 연결시키기
힘들었다.
반면에 이 툴은 그것들을 다 포함한 계층 구조를 사용하고 있다.
만약 두 번째 레이어에 UI요소(ex. window, button, icon)가 있을 때, 툴팁은 세번째 레이어로
옮길 것을 추천해 준다.

17. 시나리오 편집기를 통해 시나리오를 만들거나 관리하는 방법은 세 가지 단계로 진행된다.
SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Support of Scenario Management.
Writing a
scenario
Structuring
the scenario
Tagging
the scenario
디자이너는 UI디자인에 영향을 미치는 요구
사항을 포함한 문장을 선택하고 태깅한다.

18. SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Support of Designing UI
UI Editor
• UI 에디터는 자동으로 문장과 태그를 시각화 해준다.
• 사용한 노드(점선 외곽의 반투명 사각형), 태그와 엣지(선), 태그들 끼리의 관계 등이 시나리오 계층구조
에 있는 태그의 위치에 기반하여 시각화 된다.
• 시나리오 구조를 도식화하는 것은 요구사항과 발생할 수 있는 갈등들을 시각적으로 고려할 수 있다.
UI Editor

19. 모서리(선) - 두께는 시나리오 구조에 있는 태그들 끼리의 거리에 따라 계산된다.
노드 - 스프링 모델에 의해 계산되며 시나리오에
있는 사용 빈도에 따라 증가한다. 움직일 수 있다
스텐실을 선택하여 UI요소를 만들 수 있으며
노드 위에 올려 놓을 수 있다.
많은 앳지를 가진 노드는 시각적으로 명백하고 논리적으로 중요하다. 왜냐하면 이 노
드는 많은 시나리오와 관련이 되어 있다는 것이고, 사용자에게 혼란을 줄 여지가 있다.

20. SCENARIO BASED INTERACTIVE UI DESIGN TOOL
Provides Traceability among Scenarios, Tags and UI
추적성
• 시나리오 작성은 러프한 수준의 디자인을 예상할 수 있게 한다. 다시 연결하고 초기 버전으로 되돌아가
는 작업을 반복하며 디자인을 구체화한다.
• 각각의 노드에 UI요소들을 설정한 후, 디자이너가 시나리오와 그것들의 UI요소들의 연결을 더 잘 이해
하기 위해 시나리오를 선택하면, 자동적으로 문장과 관련된 UI요소들이 하이라이트 된다.
• 태그가 달려있는 문장을 지울 경우에 경고 합니다. 그리고 지워진 문장이 연결되어 있는 노드의 색깔을
바꾼다.
• 디자이너가 사용자의 행동과 UI설계를 상상하는 것에만 집중하도록 도와준다.
• 디자이너는 UI뿐만아니라 시나리오와 태그에 관련된 데이터 모두 참조해야야 한다. 이것은 이 툴이 없
으면 아주 힘든 일입니다.

21. User Study
실험 설계
• 툴에 사용된 SBD에 대하여 익숙하지 않은 세 명을 선정.
• 두 가지 상황에 적합한 UI를 구성할 것을 요청.
1. 사용자는 영화 사이트를 브라우징하기 위해 스마트폰 어플리케이션을 사용하는 상황.
2. 사용자가 스마트폰 어플리케이션을 통해서 친구가 추천한 영화를 찾고 보길 원하는 상황.
!
• 주로 Writing, Structuring, 태깅 시나리오와 관련된 활동과 러프한 UI를 만드는 활동을 관찰

22. User Study
Result
• 실험 참여자들은 라이팅과 스트럭쳐링이 사용자의 행동과 막연한 지점을 찾는 것에 대해 유용하다고 대
답했다.
• 실험자들은 적합한 계층구조를 찾는 것도 힘들다고 답했고 이것을 해결하기 위한 방법은 튜토리얼이나
시나리오 샘플을 제공하는 것이다.
• 실험자들은 도식화 된 폼의 이점을 이야기했다.
• 관련된 태그가 중요하다는 점에 대하여 빠르게 이해했다.
• 그러나 우리는 태그간의 관계를 이해하는 것에 대한 효용을 확인할 수 있었다.
• 이 강점을 확인하기 위해 스케일링 성능을 높이고 추가 실험을 실시할 것이다. 시각화 연구 분야에서 제
안한 인터랙션 기술을 추가하여 시각화를 확장 할 계획이다.

23. User Study
툴을 쓰며 받은 피드백,
• UI디자인 단계에서, UI에서 몇몇 결함을 눈치 챘을때, 그들은 빠르고 쉽게 관련된 문장과 태그를 추적하
고 수정했다.
• 위는 참가자들이 반복적 디자인 프로세스를 수행하고 있는 것을 의미하며, 그 동안 데이터의 관계를 자
연스럽게 추적하는 것은 하이라이트된 분장, 태그, UI요소들을 통해 알 수 있었다.
• 참가자들이 디테일한 UI를 원할 때, 새로운 UI요소를 위한 새로운 문장이 추가 되어야 했으며, 이는 비
효율적이다.

24. Conclusion
• 이 연구에서는 디자이너가 시나리오를 구조화하고 여러 시나리오, 태그, UI를 구성하는 것을 도와주는
시나리오 기반 인터랙티브 UI디자인 툴에 대해 소개 했다.
• 또한 이 툴을 통해 반복적 디자인 프로세스를 수행하고 디자인 작업만 집중할 수 있다는 것을 보여줬다.
• 유저 스터디에 참여한 모든 참여자들로 부터 긍정적인 피드백을 받았다.
• 추후연구에서 우리는 더 복잡한 시나리오와 태그와 UI의 추적성과 인터랙티비티의 효과성에 대해 테스
트할 것이다.

25. Discussion Point
• 주로 사용하는(했던) 프로토타이핑 툴의 장단점에 대하여 이야기 해보자.
!
• 아래 대상을 위한 프로토타이핑 툴을 만든다고 한다면 어떤 점을 특히 고려해야 할까?
개발자를 위한 프로토타이핑 툴?
기획자를 위한 프로토타이핑 툴?
디자이너를 위한 프로토타이핑 툴?