ucd results for mindquarry 1.2

UCD ResultsNavigation & TalkAlexander Klimetschek, Lars Trieloff, Nadia Mahlow, Jonas Witt

28/03/2007 © Mindquarry GmbH

Release Eagle

Agenda

Experiences with UCD in practice

Results for Navigation Redesign

Results for new Talk component

Outlook

2

Agenda

Experiences with UCD in practice

Results for Navigation Redesign

Results for new Talk component

Outlook

3

Experiences with UCD4

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

First time at Mindquarry

Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

First time at Mindquarry

Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs

Start: Collect ideas, focus, identify problems

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

First time at Mindquarry

Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs

Start: Collect ideas, focus, identify problems

Cyclic process: design → mockup → test

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

First time at Mindquarry

Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs

Start: Collect ideas, focus, identify problems

Cyclic process: design → mockup → test

Result: „Pflichtenheft“ with mockups and notes

What did we do?5initially started by Stephan....

cyclic process very typical

UCD for next release: Navigation Redesign & New Talk component

First time at Mindquarry

Previous Knowledge from HPI seminar, internet, books, Gregor, d-labs

Start: Collect ideas, focus, identify problems

Cyclic process: design → mockup → test

Result: „Pflichtenheft“ with mockups and notes

What did we do?5initially started by Stephan....

cyclic process very typical

Timeline & Statistics

Mo Di Mi Do Fr Mo Di Mi Do Fr Mo Di Mi Do Fr

→D D MMTD

MTD

DM

MT

D←

→/←: Start/EndD: DiscussionM: MockupsT: User Test

KW 10 KW 11 KW 12

6

Timeline & Statistics

Mo Di Mi Do Fr Mo Di Mi Do Fr Mo Di Mi Do Fr

→D D MMTD

MTD

DM

MT

D←

→/←: Start/EndD: DiscussionM: MockupsT: User Test

KW 10 KW 11 KW 12

6

- 3 Tests, total 5 Users- Test sessions: ~1h per user with ~3 scenarios- 1h general interview- Long discussions: 4 h each

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

It`s easy!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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

It`s easy!

Forces you to design & think about all processes

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

It`s easy!

Forces you to design & think about all processes

Getting test users in short time was difficult

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

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

Test users see things with different eyes

Surprises also for the non-hardcore-tekkie guys

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

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

Test users see things with different eyes

Surprises also for the non-hardcore-tekkie guys

Good to see problems fixed in the next round

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

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

Test users see things with different eyes

Surprises also for the non-hardcore-tekkie guys

Good to see problems fixed in the next round

Paper prototyping costs drawing time, but can be made easy

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)

1) should be done by the company‘s designers/developers themselves

2) next time: contact larger group at an earlier point of time OR pay passengers

UCD Experience Facts

Agenda

Experiences with UCD in practice

Results for Navigation Redesign

Results for new Talk component

Outlook

8

Navigation Redesign Results9

10

1

Clear Tab Layout

10

12

Centered 2nd Level Navigation

10

12

3

Breadcrumbs including teams switcher (above content)

10

12

3

4

Team list in sidebar, always visible, quick switching possible

10

12

3

4

5

Search: global position, results pop-up and move stuff below down

10

12

3

4

5

6

Content Area, „tabified nifty box“

10

12

3

4

5

6

7

Content Actions (inside box)

10

12

3

4

5

6

7 8

Section-actions (outside box)Section-global actions (outside box)

10

12

3

4

5

6

7 8

9

AJAX-Notification Area

10

12

3

4

5

6

7 8

9

10

Visually separating Lists from Content Pages

11

Visually separating Lists from Content Pages

11

Visually separating Lists from Content Pages

1

Alternating list entries on gray background

11

Visually separating Lists from Content Pages

1 2

Foreground white tabified nifty box

11

Visually separating Lists from Content Pages

1 2

11

12

12

1

Paging, if needed +table headline,eg. tasks

1

12

1

1

2

Lists are visually behindthe content, thus gray bg color

12

1

1

2

13

Navigation Tree15

Navigation TreeNo single tree, but 2 dimensions

Sections (Files, Wiki, Tasks, ....)

Your Teams

15

Navigation TreeNo single tree, but 2 dimensions

Sections (Files, Wiki, Tasks, ....)

Your Teams

Meta-Tab „Teams“ looks nice, but makes things difficult

15

Navigation TreeNo 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

15

Navigation TreeNo 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

15

Navigation Sitemap: New Pages

16

3

3

3

Navigation Sitemap: New Pages

16

1

All Users list and(public) User profile

3

3

3

Navigation Sitemap: New Pages

16

1

2

Talk: all conversations + new conversation + conv. messages

3

3

3

Navigation Sitemap: New Pages

16

1

2

Talk: all conversations + new conversation + conv. messages

3

3

3+

Email + Instant Messaging Design

Navigation Sitemap: New Pages

16

1

2

Minor (possible) additions needed from navigational pov

3

3

3

Navigation Sitemap: New Pages

16

1

23

3

3

Navigation paths17

Navigation pathsGeneral: [Team] > Section > Page > Subpage

17

Navigation pathsGeneral: [Team] > Section > Page > Subpage

Problems with „Teams“ Section - solutions:

17

Navigation pathsGeneral: [Team] > Section > Page > Subpage

Problems with „Teams“ Section - solutions:

Users: All Teams > Users (> Frank Mustermann)

17

Navigation pathsGeneral: [Team] > Section > Page > Subpage

Problems with „Teams“ Section - solutions:

Users: All Teams > Users (> Frank Mustermann)

All teams: All Teams > Teams

17

Navigation pathsGeneral: [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

17

Navigation pathsGeneral: [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

17

Navigation pathsGeneral: [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

17

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

User Profile page

All Teams

19

User Profile page

New path: „All teams“ > Users > X

All Teams 1

19

User Profile page

2

Profile visible for others / admins can change it later

All Teams 1

19

User Profile page

23

Edit-in-place style as in wiki/tasks

All Teams 1

19

User Profile page

23

4

List of team memberships

All Teams 1

19

User Profile page

23

4

5

Place for settings (first one: receive mails yourself)

All Teams 1

19

User Profile page

23

4

5

All Teams 1

19

Task Filter Quick Improvements

20

Agenda

Experiences with UCD in practice

Results for Navigation Redesign

Results for new Talk component

How to process with non-designed interface areas

21

Talk Design Results22

General Concept23

General Concept23Communicate via

Mails

Web

Instant Messaging

Meeting Minutes

General Concept23Communicate via

Mails

Web

Instant Messaging

Meeting Minutes

One Conversation across all those channels

General Concept23Communicate via

Mails

Web

Instant Messaging

Meeting Minutes

One Conversation across all those channels

Easy setup of mailing lists

General Concept23Communicate via

Mails

Web

Instant Messaging

Meeting Minutes

One Conversation across all those channels

Easy setup of mailing lists

Easy digital meeting minutes

Web Interface24

Web Interface24Full control here

Read and Search

Send Messages

Easily add links to other mindquarry resources

Create Conversations

Subscribe and unsubscribe

25

List of Conversations

25

List of Conversations

1

Create new conversation

25

List of Conversations

2

Email address (starts new conv.=> creates new mail address)

1

25

List of Conversations

2

13

Subscribe/Unsubscribe to/from any new conversations per mail

25

List of Conversations

2

13

4

Title of conversation, links to another page w/ messages

25

List of Conversations

2

13

4

5

1-line-preview of last message, links directly to the last message

25

List of Conversations

2

13

4

5

26

Start a new conversation

26

Start a new conversation

1

Note: no global new buttons here, confuses people

26

Start a new conversation

1

2

Lists subscribe-to-new user, add button opens dialog (next slide)

26

Start a new conversation

1

2

3

Small button, large integration: insert link to files/wiki/tasks etc.

into text

26

Start a new conversation

1

2

3

4

Simple: only one button here to send the stuff!

26

Start a new conversation

1

2

3

4 5

Another hint to the team‘s mail address

26

Start a new conversation

1

2

3

4 5

27

General Search and Filter Widget

27

General Search and Filter Widget

28

Conversation: Message History

28

Conversation: Message History

1

Topic

28

Conversation: Message History

1 2

Subscribe / Unsubscribe to/from this specific conv. per mail

28

Conversation: Message History

1 2

3

Sort chronological (switching can be added in a later release)

28

Conversation: Message History

1 2

34

Paging(wrong here, will be on the right)

28

Conversation: Message History

1 2

34

5

Short message style (chat logs)

28

Conversation: Message History

1 2

34

5

6

User image with source overlay (mail, web, chat...)

28

Conversation: Message History

1 2

34

5

6

7

Timestamps only in-between, as needed (intelligent rules)

28

Conversation: Message History

1 2

34

5

6

7

28

Conversation: Message History

8

Send Message Box same style as in „Start new conversation“

28

Conversation: Message History

8

29

Meeting Minutes in web interface

Mailing List Basics30

Mailing List Basics30Receive conversation messages per e-mail when

subscribed to it

subscribed to new conversations for a team

Mailing List Basics30Receive 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

Mailing List Basics30Receive 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

Mailing List Advanced31

Mailing List Advanced31File attachments are discarded

too many possibilities for display in web interface

if time permits: cut off, put into svn, append svn link

Mailing List Advanced31File 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>

Mailing List Advanced31File 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

Mailing List Advanced31File 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

Meeting Minutes <YouNameIt>32

One could easily put the meeting minutes inside a mail & send it to the conversation‘s mail address

Meeting Minutes <YouNameIt>32Editor 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

Meeting Minutes <YouNameIt>32Editor 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

Meeting Minutes <YouNameIt>32Editor 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

Look out for usage patterns after release and/or

user contributed clients (public API)

One could easily put the meeting minutes inside a mail & send it to the conversation‘s mail address

33

Formal, „XY says:“ Style

34

Creating a new conversation

34

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

Creating a new conversation

35

Taking minutes

Instant Messaging36

Problem with unavailable group chats

Jabber has got it

many servers, e.g. Google Talk, and clients do NOT support it

Instant Messaging36

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?

Instant Messaging36

Agenda

Experiences with UCD in practice

Results for Navigation Redesign

Results for new Talk component

Outlook

37

Outlook

...38

Communicating Results39

Combination of UCD and Open Source is new

Communicating Results39

Combination of UCD and Open Source is new

External developers might concentrate on backend development

Communicating Results39

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“

Communicating Results39

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

Communicating Results39

Non-designed areas?40

Not done because of lower importance / triviality

payment server / account registration

user rights management

Non-designed areas?40

Not done because of lower importance / triviality

payment server / account registration

user rights management

At least mockups should be discussed before implementation

Non-designed areas?40

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

Non-designed areas?40

The UCD Team wishes happy coding & promoting!

Alexander Klimetschek, Lars Trieloff, Nadia Mahlow, Jonas Witt

41

Release Eagle