1. Release Eagle
UCD Results
Navigation & Talk
Alexander Klimetschek, Lars Trieloff, Nadia Mahlow, Jonas Witt
28/03/2007 © Mindquarry GmbH

2. 2 Agenda
Experiences with UCD in practice
Results for Navigation Redesign
Results for new Talk component
Outlook

3. 3 Agenda
Experiences with UCD in practice
Results for Navigation Redesign
Results for new Talk component
Outlook

4. 4 Experiences with UCD

5. 5 What did we do?
initially
started by
Stephan....
cyclic process
very typical

6. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
cyclic process
very typical

7. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
First time at Mindquarry
Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs
cyclic process
very typical

8. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
First time at Mindquarry
Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs
Start: Collect ideas, focus, identify problems
cyclic process
very typical

9. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
First time at Mindquarry
Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs
Start: Collect ideas, focus, identify problems
cyclic process
Cyclic process: design → mockup → test very typical

10. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
First time at Mindquarry
Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs
Start: Collect ideas, focus, identify problems
cyclic process
Cyclic process: design → mockup → test very typical
Result: „Pflichtenheft“ with mockups and notes

11. 5 What did we do?
initially
UCD for next release: Navigation Redesign & New Talk
started by
Stephan....
component
First time at Mindquarry
Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs
Start: Collect ideas, focus, identify problems
cyclic process
Cyclic process: design → mockup → test very typical
Result: „Pflichtenheft“ with mockups and notes

12. 6 Timeline & Statistics
KW 10 KW 11 KW 12
Mo Di Mi Do Fr Mo Di Mi Do Fr Mo Di Mi Do Fr
M M
D M
→D D M T T D←
M T
D D
→/←: Start/End
D: Discussion
M: Mockups
T: User Test

13. 6 Timeline & Statistics
KW 10 KW 11 KW 12
Mo Di Mi Do Fr Mo Di Mi Do Fr Mo Di Mi Do Fr
M M
D M
→D D M T T D←
M T
D D
- 3 Tests, total 5 Users →/←: Start/End
- Test sessions: ~1h per user with ~3 scenarios D: Discussion
- 1h general interview M: Mockups
- Long discussions: 4 h each T: User Test

14. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7
4) you are forced to
actually draw the
entire interface if you
want to test it with a
user -> no forgotten
areas
6) with the right
setup (copying &
transparency
slides)

15. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
4) you are forced to
actually draw the
entire interface if you
want to test it with a
user -> no forgotten
areas
6) with the right
setup (copying &
transparency
slides)

16. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
Forces you to design & think about all processes
4) you are forced to
actually draw the
entire interface if you
want to test it with a
user -> no forgotten
areas
6) with the right
setup (copying &
transparency
slides)

17. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
Forces you to design & think about all processes
Getting test users in short time was difficult
4) you are forced to
actually draw the
entire interface if you
want to test it with a
user -> no forgotten
areas
6) with the right
setup (copying &
transparency
slides)

18. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
Forces you to design & think about all processes
Getting test users in short time was difficult
But each user test gives helpful insights
4) you are forced to Test users see things with different eyes
actually draw the
entire interface if you Surprises also for the non-hardcore-tekkie guys
want to test it with a
user -> no forgotten
areas
6) with the right
setup (copying &
transparency
slides)

19. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
Forces you to design & think about all processes
Getting test users in short time was difficult
But each user test gives helpful insights
4) you are forced to Test users see things with different eyes
actually draw the
entire interface if you Surprises also for the non-hardcore-tekkie guys
want to test it with a
user -> no forgotten
areas Good to see problems fixed in the next round
6) with the right
setup (copying &
transparency
slides)

20. 1) should be done by the
company‘s designers/
developers themselves
UCD Experience Facts 2) next time: contact
larger group at an earlier
point of time OR pay
passengers
7 It`s easy!
Forces you to design & think about all processes
Getting test users in short time was difficult
But each user test gives helpful insights
4) you are forced to Test users see things with different eyes
actually draw the
entire interface if you Surprises also for the non-hardcore-tekkie guys
want to test it with a
user -> no forgotten
areas Good to see problems fixed in the next round
Paper prototyping costs drawing time, but can be maderight
6) with the easy
setup (copying &
transparency
slides)

21. 8 Agenda
Experiences with UCD in practice
Results for Navigation Redesign
Results for new Talk component
Outlook

22. 9 Navigation Redesign Results

23. 10

24. 1
Clear Tab Layout
10

25. 1
2
Centered 2nd Level Navigation
10

26. 1
2
3
Breadcrumbs including teams
switcher (above content)
10

27. 1
2
3
4
Team list in sidebar, always visible,
quick switching possible
10

28. 1
2
5 3
Search: global position, results
4
pop-up and move stuff below down
10

29. 1
2
5 3
4
6
Content Area, „tabified nifty box“
10

30. 1
2
5 3
7
4
Content Actions (inside box)
6
10

31. 1
2
5 3
7 8
4
Section-global o( snoitca-noitcebox)
)xob edistu actions (outside S
6
10

32. 1
2
5 3 9
7 8
4
AJAX-Notification Area
6
10

33. 1
2
5 3 9
7 8
4
6
10

34. Visually separating Lists from Content Pages
11

35. Visually separating Lists from Content Pages
11

36. Visually separating Lists from Content Pages
1
Alternating list entries on gray
background
11

37. Visually separating Lists from Content Pages
1 2
Foreground white tabified nifty box
11

38. Visually separating Lists from Content Pages
1 2
11

39. 12

40. 1
Paging, if needed +
table headline,eg. tasks
12
1

41. 1
2
12
Lists are visually behind
the content, thus gray bg color
1

42. 1
2
12
1

43. 13

45. 15 Navigation Tree

46. 15 Navigation Tree
No single tree, but 2 dimensions
Sections (Files, Wiki, Tasks, ....)
Your Teams

47. 15 Navigation Tree
No single tree, but 2 dimensions
Sections (Files, Wiki, Tasks, ....)
Your Teams
Meta-Tab „Teams“ looks nice, but makes things difficult

48. 15 Navigation Tree
No single tree, but 2 dimensions
Sections (Files, Wiki, Tasks, ....)
Your Teams
Meta-Tab „Teams“ looks nice, but makes things difficult
Solution Nr. 1: Put Teams virtually in root

49. 15 Navigation Tree
No single tree, but 2 dimensions
Sections (Files, Wiki, Tasks, ....)
Your Teams
Meta-Tab „Teams“ looks nice, but makes things difficult
Solution Nr. 1: Put Teams virtually in root
Solution Nr. 2: Skip overview pages for now
Once inside a team, nobody will ever find them
Will provide per-user aggregation across teams later

50. Navigation Sitemap: New Pages
3
3
3
16

51. Navigation Sitemap: New Pages
1
All Users list and
(public) User profile
3
3
3
16

52. Navigation Sitemap: New Pages
1
3
3 2
Talk: all conversations + new
conversation + conv. messages
3
16

53. Navigation Sitemap: New Pages
1
3
3 2
Talk: all conversations + new
conversation + conv. messages
16
+
3
Email + Instant Messaging Design

54. Navigation Sitemap: New Pages
1
3
3 2
Minor (possible) additions needed
from navigational pov
3
16

55. Navigation Sitemap: New Pages
1
3
3 2
3
16

56. 17 Navigation paths

57. 17 Navigation paths
General: [Team] > Section > Page > Subpage

58. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:

59. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:
Users: All Teams > Users (> Frank Mustermann)

60. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:
Users: All Teams > Users (> Frank Mustermann)
All teams: All Teams > Teams

61. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:
Users: All Teams > Users (> Frank Mustermann)
All teams: All Teams > Teams
Selected Team Details: [Team] > Details

62. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:
Users: All Teams > Users (> Frank Mustermann)
All teams: All Teams > Teams
Selected Team Details: [Team] > Details
Click on Teams Tab leads to all teams or selected team detail

63. 17 Navigation paths
General: [Team] > Section > Page > Subpage
Problems with „Teams“ Section - solutions:
Users: All Teams > Users (> Frank Mustermann)
All teams: All Teams > Teams
Selected Team Details: [Team] > Details
Click on Teams Tab leads to all teams or selected team detail
Click on Team in Team list will show detail if in teams section

64. Buttons and Icons
- smaller buttons, slightly-rounded, fit-to-text-width
- background color same as light section background color
- general icons indicating action (except for „new“)
18

65. User Profile page
All Teams
19

66. User Profile page
All Teams 1
New path: „All teams“ > Users > X
19

67. User Profile page
All Teams 1
2
Profile visible for others / admins
can change it later
19

68. User Profile page
All Teams 1
2
3
Edit-in-place style as in wiki/tasks
19

69. User Profile page
All Teams 1
2
3
4
List of team memberships
19

70. User Profile page
All Teams 1
2
3
5
Place for settings (first one:
receive mails yourself)
4
19

71. User Profile page
All Teams 1
2
3
5
4
19

72. Task Filter Quick Improvements
20

73. 21 Agenda
Experiences with UCD in practice
Results for Navigation Redesign
Results for new Talk component
How to process with non-designed interface areas

74. 22 Talk Design Results

75. 23 General Concept

76. 23 General Concept
Communicate via
Mails
Web
Instant Messaging
Meeting Minutes

77. 23 General Concept
Communicate via
Mails
Web
Instant Messaging
Meeting Minutes
One Conversation across all those channels

78. 23 General Concept
Communicate via
Mails
Web
Instant Messaging
Meeting Minutes
One Conversation across all those channels
Easy setup of mailing lists

79. 23 General Concept
Communicate via
Mails
Web
Instant Messaging
Meeting Minutes
One Conversation across all those channels
Easy setup of mailing lists
Easy digital meeting minutes

80. 24 Web Interface

81. 24 Web Interface
Full control here
Read and Search
Send Messages
Easily add links to other mindquarry resources
Create Conversations
Subscribe and unsubscribe

82. List of Conversations
25

83. List of Conversations
1
Create new conversation
25

84. List of Conversations
1
2
Email address (starts new conv.
=> creates new mail address)
25

85. List of Conversations
3
1
2 Subscribe/Unsubscribe to/from
any new conversations per mail
25

86. List of Conversations
3
1
2
4
Title of conversation, links to
another page w/ messages
25

87. List of Conversations
3
1
2
4
5
1-line-preview of last message,
links directly to the last message
25

88. List of Conversations
3
1
2
4
5
25

89. Start a new conversation
26

90. Start a new conversation
1
Note: no global new buttons here,
confuses people
26

91. Start a new conversation
1
2
Lists subscribe-to-new user, add
button opens dialog (next slide)
26

92. Start a new conversation
1
2
3
Small button, large integration:
insert link to files/wiki/tasks etc.
into text
26

93. Start a new conversation
1
2
3
26 4
Simple: only one button here to
send the stuff!

94. Start a new conversation
1
2
3
26 4 5
Another hint to the team‘s mail
address

95. Start a new conversation
1
2
3
26 4 5

96. General Search and Filter Widget
27

97. General Search and Filter Widget
27

98. Conversation: Message History
28

99. Conversation: Message History
1
Topic
28

100. Conversation: Message History
1 2
Subscribe / Unsubscribe to/from
this specific conv. per mail
28

101. Conversation: Message History
1 2
3
Sort chronological (switching can
be added in a later release)
28

102. Conversation: Message History
1 2
4 3
Paging
(wrong here, will be on the right)
28

103. Conversation: Message History
1 2
4 3
5
Short message style (chat logs)
28

104. Conversation: Message History
1 2
4 3
5
6
User image with source overlay
(mail, web, chat...)
28

105. Conversation: Message History
1 2
4 3
5
6
7
Timestamps only in-between, as
needed (intelligent rules)
28

106. Conversation: Message History
1 2
4 3
5
6
7
28

107. Conversation: Message History
8
Send Message Box same style as in
„Start new conversation“
28

108. Conversation: Message History
8
28

109. Meeting Minutes in web interface
29

110. 30 Mailing List Basics

111. 30 Mailing List Basics
Receive conversation messages per e-mail when
subscribed to it
subscribed to new conversations for a team

112. 30 Mailing List Basics
Receive conversation messages per e-mail when
subscribed to it
subscribed to new conversations for a team
Mailing list address: <conversation-id>.<team-id>@foobar.com

113. 30 Mailing List Basics
Receive conversation messages per e-mail when
subscribed to it
subscribed to new conversations for a team
Mailing list address: <conversation-id>.<team-id>@foobar.com
Start new conversation: <team-id>@foobar.com
uses subject as new conversation‘s title

114. 31 Mailing List Advanced

115. 31 Mailing List Advanced
File attachments are discarded
too many possibilities for display in web interface
if time permits: cut off, put into svn, append svn link

116. 31 Mailing List Advanced
File attachments are discarded
too many possibilities for display in web interface
if time permits: cut off, put into svn, append svn link
Subject is ensured to be Re: <conversation title>

117. 31 Mailing List Advanced
File attachments are discarded
too many possibilities for display in web interface
if time permits: cut off, put into svn, append svn link
Subject is ensured to be Re: <conversation title>
Bottom of mail contains hint and link to conversation in web

118. 31 Mailing List Advanced
File attachments are discarded
too many possibilities for display in web interface
if time permits: cut off, put into svn, append svn link
Subject is ensured to be Re: <conversation title>
Bottom of mail contains hint and link to conversation in web
Subscribe/Unsubscribe sends you an acknowledgement mail
including all subscriptions as an overview

119. 32 Meeting Minutes <YouNameIt>
One could easily
put the meeting
minutes inside a
mail & send it to
the conversation‘s
mail address

120. 32 Meeting Minutes <YouNameIt>
Editor is a bad word for non-tekkies
One could easily
put the meeting
minutes inside a
mail & send it to
the conversation‘s
mail address

121. 32 Meeting Minutes <YouNameIt>
Editor is a bad word for non-tekkies
Problem:
Only useful for people with formal style of taking MM (XY says)
No solution yet how to support summary-style (apart from writing it into one‘s
speech)
One could easily
put the meeting
minutes inside a
mail & send it to
the conversation‘s
mail address

122. 32 Meeting Minutes <YouNameIt>
Editor is a bad word for non-tekkies
Problem:
Only useful for people with formal style of taking MM (XY says)
No solution yet how to support summary-style (apart from writing it into one‘s
speech)
Creating this tool is cheap, thus try it One could easily
put the meeting
Look out for usage patterns after release and/or minutes inside a
mail & send it to
user contributed clients (public API) the conversation‘s
mail address

123. Formal, „XY says:“ Style
33

124. Creating a new conversation
34

125. Creating a new conversation
Guest user: will be added for
display of his statements, but won‘t
be a normal user in the Mindquarry
system
34

126. Creating a new conversation
34

127. Taking minutes
35

128. 36 Instant Messaging

129. 36 Instant Messaging
Problem with unavailable group chats
Jabber has got it
many servers, e.g. Google Talk, and clients do NOT support it

130. 36 Instant Messaging
Problem with unavailable group chats
Jabber has got it
many servers, e.g. Google Talk, and clients do NOT support it
Solution: Bots
you communicate with the Mindquarry Conversation XY Bot
he prints messages for all others: Peter says:
automatic registration of new users at server?

131. 37 Agenda
Experiences with UCD in practice
Results for Navigation Redesign
Results for new Talk component
Outlook

132. 38 Outlook

133. 39 Communicating Results

134. 39 Communicating Results
Combination of UCD and Open Source is new

135. 39 Communicating Results
Combination of UCD and Open Source is new
External developers might concentrate on backend development

136. 39 Communicating Results
Combination of UCD and Open Source is new
External developers might concentrate on backend development
For possible frontend developers we need good and convincing
communication of resulting „requirements“

137. 39 Communicating Results
Combination of UCD and Open Source is new
External developers might concentrate on backend development
For possible frontend developers we need good and convincing
communication of resulting „requirements“
Future UCD together with Community
UCD hosted at & done by Mindquarry, 1-2 times a year
Selected Committers will be invited

138. 40 Non-designed areas?

139. 40 Non-designed areas?
Not done because of lower importance / triviality
payment server / account registration
user rights management

140. 40 Non-designed areas?
Not done because of lower importance / triviality
payment server / account registration
user rights management
At least mockups should be discussed before implementation

141. 40 Non-designed areas?
Not done because of lower importance / triviality
payment server / account registration
user rights management
At least mockups should be discussed before implementation
User testing not needed, proven concepts out there

142. The UCD Team wishes happy
41 coding & promoting!
Alexander Klimetschek, Lars Trieloff, Nadia Mahlow, Jonas Witt
Release Eagle