1. User-Centered Process Framework and
Techniques to Support the Realization
of Interactive Systems by
Multi-Disciplinary Teams
Mieke Haesen
8 December 2011
Advisor: Prof. dr. Karin Coninx
Co-advisor: Prof. dr. Kris Luyten

2. The Title
User-Centered Process Framework and Techniques
to Support the Realization of Interactive Systems
by Multi-Disciplinary Teams

3. User-Centered Process Framework and Techniques
to Support the Realization of Interactive Systems
by Multi-Disciplinary Teams

4. User-Centered Process Framework and Techniques
to Support the Realization of Interactive Systems
by Multi-Disciplinary Teams

5. Systems Designer HCI Customer
Analyst Specialist
User-Centered Process Framework and Techniques
to Support the Realization of Interactive Systems
by Multi-Disciplinary Teams

6. Problem
I need an
Application application that
Logic looks like…
but …
Systems Designer HCI Customer
Analyst Specialist

7. Problem
I need an
Application application that
Logic looks like…
but …
SOFTWARE USER-CENTERED
ENGINEERING DESIGN (UCD)

8. Goal
I need an
Application
Logic
application that
looks like…
but …
USER-CENTERED SOFTWARE ENGINEERING (UCSE)

9. Goal
USER-CENTERED SOFTWARE ENGINEERING (UCSE)

10. This Presentation
I II
User-Centered Process Framework and Techniques
to Support the Realization of Interactive Systems
by Multi-Disciplinary Teams

11. A Process Framework
for Multi-Disciplinary
User-Centered
Software Engineering

12. MuiCSer

13. Process Framework for…
Practical Processes
Comparison and Evaluation
for Applied Research
Literature

14. [Mori et al., 2002] [Lin et al., 2008] [Campos and Nunes, 2007] [Brown et al., 1998]
[Coyette et al., 2007] [Lin and Landay, 2008] [Michotte and Vanderdonckt, 2008]
[Meskens et al., 2008] [Chatty et al., 2004]
Presented at HCSE 2008

15. Process Framework for…
Practical Processes
Comparison and Evaluation
for Applied Research
Literature
UCSE in Industry

16. Interviews in Industry
 Do our findings correspond with common practice?
 3 companies participated:
 8 practitioners
 Focus on user-centered
approach
 Results:
 Difficulties when collaborating with technical teams
 Lack of suitable models and notations to pass information

17. Process Framework for…
Practical Processes
Comparison and Evaluation
for Applied Research
Literature Case Studies
UCSE Practices

18. News- Mobile
Wizard Game
for
Children

19. Process Framework for…
Practical Processes
Comparison and Evaluation
for Applied Research
Literature Case Studies
UCSE in Industry
WEAKNESSES AND DIFFICULTIES IN UCSE

20. Weaknesses and Difficulties in UCSE
Lack of notations / tools to
A collaborate in multi-disciplinary UCSE teams
B transition informal artifacts into formal models
C incorporate of all user needs and requirements

21. Storyboards as a
Common Language
for User-Centered
Software Engineering

23. COMuICSer Storyboards
= sequence of scenes,
depicting users
carrying out several activities
by using devices
in real life situations.

24. COMuICSer Tool
 Support the early stages in UCSE
 Increase visibility and reuse of storyboards in later
stages

25. Tool Support for COMuICSer
Storyboards

26. Weaknesses and Difficulties in UCSE
Lack of notations / tools to
A collaborate in multi-disciplinary UCSE teams
B transition informal artifacts into formal models
C incorporate of all user needs and requirements
RESEARCH CHALLENGES

27. 4 Research Challenges
1 2
Storyboarding for The Visual
Multi-disciplinary Teams Storyboarding Language
3 4
Storyboarding to Support Storyboarding to
Artifact Transformations Connect UCD and SE

28. Storyboarding for
Multi-disciplinary Teams
Are storyboards and accompanying tool support
useful for UCSE practitioners?

29. First User Study
 Does COMuICSer fit in common practice?
 First evaluation of the COMuICSer tool
 Presenting storyboarding approach in a storyboard
 Storyboard walkthrough

30. Results of First User Study
 COMuICSer storyboards and tool are very useful
in several activities of user-centered approaches
 Storyboard should be created by people having
different backgrounds
Presented at Interact 2009

31. Storyboarding for
Multi-disciplinary Teams
How are storyboards created in a
multi-disciplinary team?

32. Observational Study
Tool- Tool-
box box
HCI UI
Specialist Designer
Images Frames
Tool- Tool-
box box
Systems Stake-
Analyst holder
Video
Camera

33. Results of Observational Study
 Some participants did not share the artifacts they
prepared
 HCI specialists took the lead in storyboarding
 Different perspectives of multi-disciplinary teams

34. Observational Study
A B C
Stack of
locations Storyboard
Storyboard Storyboard
 7 scenes  8 scenes  10 scenes
 ordered  ordered  ordered
spatially chronologically chronologically

35. Storyboarding for
Multi-disciplinary Teams
 Communication in
multi-disciplinary
teams
 Storyboarding
stimulates discussion

36. The Visual Language
of Storyboarding
What aspects of a visual language
can contribute to storyboards in UCSE?

37. Iconic Characters –
Detailed Backgrounds
[McCloud, 1993]
Invoke team members’ empathy with characters
Imagine the situation as accurately as possible
Help team members with limited drawing skills

38. Transitions
[McCloud, 1993]
“The Gutter”
What are the conditions for a new situation?

39. COMuICSer Tool

41. The Visual
Storyboarding Language
 Techniques of comics
to express a message
 Inspiration for tool
support
Presented at (BCS) HCI 2010

42. Storyboarding to Support
Artifact Transformations
How can storyboards be used for the
transformation from informal to formal artifacts?

43. Informal Artifacts Formal Artifacts
Persona Scenario
Abstract UI Task Model
Concrete UI
Storyboard
UI Mockup
Final UI

45. Mapping Storyboards to Models

46. From Storyboard to
High-fidelity Prototype

47. From Storyboard to
High-fidelity Prototype

48. Storyboarding to Support
Artifact Transformations
 COMuICSer
storyboard meta-model
and model
transformations
 UI design: keep track
of contextual
information
Book chapter, published in MDDAUI 2010

49. Storyboarding to Connect
UCD and SE
How can storyboards be connected with
software engineering artifacts?

50. Agile Software Engineering
 Principles
 Iterations and increments
 Involvement of customer
 Face to face communication
 Interviews with agile teams
 Similar difficulties in software engineering as in UCD
 Lack of notations that include non-functional
requirements and context of use

51. User Stories
 Functional requirements
 User’s point of view
 Index cards As a (role)
I want (function)
So that (business value)

52. Connected Storyboards

53. Example
Device
Personas
Context
of Use
Functional As a TV researcher
Requirements I want to share my
videos
so that I can show them
to my colleagues

55. Storyboarding to Connect
UCD and SE
 Connect COMuICSer
storyboards and user
stories
 Consider non-functional
requirements and
contextual information
during requirements
elicitation
 Both teams can stick
with their notations

57. User Study
 How are storyboards
interpreted?
 5 COMuICSer storyboards
 10 participants
 Procedure
 Creation of UI designs, informed
and inspired by the storyboard
that was provided
 Discussion with the author
 Questionnaires

58. Results of User Study
 Resulting UI designs were applicable
 Misinterpretations
 Participants’ satisfaction of the UI designs

59. Conclusions
and
Future Work

60. Contributions
MuiCSer COMuICSer
Process Framework Storyboarding

61. Conclusions
COMuICSer
Storyboarding
Useful for Connection
multi-disciplinary with
teams SE Artifacts
Comics Transformations to
Techniques Models and
Applicable UI Designs

62. Future Work
 Longitudinal Study  Extended Tool Support
 Thorough evaluation  Collaborative
 Investigate remaining storyboarding
challenges  Usability testing