As someone interested in a local development, when someone writes to one of the relevant local councillors about it, show me their comment and the councillor’s response, so I feel more comfortable about writing to my councillors too

[equivalentideas]

When someone writes to their councillor about an application, show what they've written in the comment feed with the other comments. When the councillor replies, show their response there as well.

This is to show people how easy and beneficial it can be to start a dialogue with your local councillors.

As a secondary benefit, this will also allow people to hold their elected representatives in the council more responsible for the ways they handle feedback and requests from the people they represent.

Also, councillors might have something helpful to say about a development.

Putting these in the current comment feed is a simple extension of the current system as a first pass.

• [ ] Get this working well in the NSW Theme

[equivalentideas]

Here's a mock up of one way to show the initial comment to a councillor:

Using 'wrote to' to describe the action people take, a human and common way to talk about contacting representatives.

I don't think people will recognise their councillors by name, so I think we do need to provide them a label/title. I don't think people need to know which council the person is in, just that they are a councillor local to the area that this planning application is in. I think 'local councillor' is a place to start that achieves this.

It would be great to show an image of the councillor so people can get a better sense of the person writing, and better empathise with them. I did a sketch with the councillor's image with their name in the initial comment to them, but glance at this and think this comment is by the councillor not to them:

I think the image should be saved for the councillor’s reply so you still get to see them, but their image is simple connected to their response.

I've got some ideas so I'm gonna jump in and make something in the browser to look at.

[equivalentideas]

Henare and I have been chatting and reworked the name/story of this issue and the description above.

We want people to understand that they can write to their councillors through PlanningAlerts and that it's really easy. They need to be able to see messages to councillors as distinct from normal comments, to understand that they have this option. They should also understand that that both options can benefit them.

While we want to make the comments distinct we also don't want to make one clearly more approachable than the other or make one seem more special at this stage.

The difference between the types of comments is:

• You make a formal submission on the application to the planning authority when you want to impact the decision on the application.
• You write to a councillor to try and exert some political power to impact a decision, or to simply get a question answered. These comments wont necessarily impact the decision on the application.

We're yet to really see how people approach this so it's hard to define this difference from a users perspective. We decided to make a whole issue for this discussion #818 .

One important distinction is that one type of comment is formal and must be considered, and one type is informal and might not impact the decision on the DA at all. We want people to understand this.

We should make the comments visually distinct in some way so people can quickly see that they are different.

Currently formal comments are grey and square. We could start by giving messages to councillors some colour that makes them less formal, not a blue, and softening the corners—and go from there. It might take more that this, but we can iterate our way there.

[equivalentideas]

Henare also raised an example in our discussion from FixMyStreet, where they use the copy to reenforce that submissions carry weight and are sent to the authority:

Reported via Android in the Street lighting category anonymously at 21:54, Sunday 11 October 2015 Sent to Aberdeen City Council 1 minute later

We drawn on this idea for our formal comments to reenforce that they are actual submissions, as distinct from the messages to councillors.

[equivalentideas]

I've had a play down one avenue of using a subtle touch of colour to liven up both types of comment, and distinguish messages to councillors.

I've used blue, a more formal/serious colour for the comments, and yellow, lighter, friendlier, informal, for the councillor messages:

I didn't think that was enough for starters, they're still too similar. I think a round corner on the messages helps, this is really common in messaging apps:

But still, the reason they're different isn't obvious enough. Next I tried adding some subtle information to demonstrate the difference between the two:

Comment’s get some text explaining that it was sent to the planning authority (maybe saying 'planning authority' would be better, as people wont necessarily know that council is the planning authority? Maybe it needs the time posted, not just date?). Messages to councillors get a pattern to show that this is an exchange, the next step is part of the same comment “Sent to Melissa Brooks 5 ago. They are yet to reply.”. I also slightly softened the corners of the comments because the hard edge doesn't fit the rest of the site.

I'm gonna keep playing with this idea.

[equivalentideas]

Here's another idea, to change the layout of messages to councillors to be more like an email or letter "From: Laurie Burdekin, To: local councillor Melissa Brooks":

I don't think this works because it's structuring the information like a computer, rather than how a person would say it, 'Jim wrote to Jane'. The other titles are more like social media comments/status updates than a letter, which I think is more approachable. Making it more like a formal letter makes it seem more formal than the official comments, which are meant to be more formal.

[henare]

@equivalentideas I like the journey you've gone on and the detail you've put here so that other people can understand it :zap:

Generally I like where this is heading. I think we still have an issue of including two types of information in the same feed. This is against some design principle or the other, I'm sure :wink: So what I think you should do is investigate this specific problem, including looking elsewhere for inspiration.

Some specific feedback:

Messages to councillors get a pattern to show that this is an exchange, the next step is part of the same comment “Sent to Melissa Brooks 5 ago. They are yet to reply.”.

I really like this because it sets up the exchange. It also subtly conveys another important bit of information that we want to surface - that the elected official hasn't responded.

...change the layout of messages to councillors to be more like an email or letter ...I don't think this works because it's structuring the information like a computer, rather than how a person would say it, 'Jim wrote to Jane'. The other titles are more like social media comments/status updates than a letter, which I think is more approachable.

In this case it's less important to be "approachable" if the design conveys an important and otherwise confusing concept in a way the person can understand. Here you're tapping into the viewer's mental model of an email and so it's quite effective. I wouldn't be so quick to reject this.

It's worth noting this concept is used on Right To Know to good effect too.

[equivalentideas]

I like the journey you've gone on and the detail you've put here so that other people can understand it :zap:

Thanks :)

I think we still have an issue of including two types of information in the same feed. This is against some design principle or the other, I'm sure :wink: So what I think you should do is investigate this specific problem, including looking elsewhere for inspiration.

@henare Looking around at social networks, news sites and shops, dividing categories of content into separate feeds is a solution to overwhelming complexity, or to give people a way to navigate to the section they’re interested in. With just two types of comments, I predict that PlanningAlerts users will be able to handle two types of comments in the feed.

At this stage as well, I don't think separating comments to councillors will help people find them, as applications don't have more comments that you can quickly scroll past as see. Visually distinguishing them in the single feed is more helpful way to aid navigation at this stage I think. People come to PlanningAlerts to find out about development applications, the comments are secondary focus—so I think we should over organising them at this stage to so there’s less options/choices to make beyond finding the applications that interest you.

Have I hit the problem for people you’re trying to highlight here @henare ?

[equivalentideas]

I'm going to implement the initial steps of:

• adding the colours
• the councillor reply notice,
• the 'sent on to the authority notice'

to see where that takes me. I think those are good iterations from where it's at now.

I'll then try a few different ways of displaying the 'to/from' info.

[henare]

Have I hit the problem for people you’re trying to highlight here @henare ?

I'm not quite sure I follow your response.

...dividing categories of content into separate feeds is a solution to overwhelming complexity, or to give people a way to navigate to the section they’re interested in.

You're saying that one option to solve the issue of including two different bits of information in one feed is to separate them?

Okay but surely that's not the only option.

With just two types of comments, I predict that PlanningAlerts users will be able to handle two types of comments in the feed.

And your assessment is that it's not a problem?

Okay but what evidence do you have to support your assertion? I was really hoping for a bit of research, examples, principles and that type of thing to back up the decision we make.

Or have I missed what you're saying entirely?

[equivalentideas]

Or have I missed what you're saying entirely?

Yeah I think we’re not quite getting each other ;-) let’s take a step back. I don't think I understand what the specific problem you’re raising is for users?

[henare]

@equivalentideas had a chat about this. We were reminded that it's important that people recognise the distinction between a comment and a message to a councillor. This is because we want people to understand that messaging a councillor is a thing you can do on the site. The reason that's important is that a key reason for showing other people's comments/messages on the site is to give people the confidence that they can write a message too.

However we want to make sure that having these two different things in the same list doesn't make things confusing for the viewer. So we should make design choices that subtly suggest the difference and allow the person to quickly fully comprehend the difference.

We did a quick bit of research and found that a common way of dealing with different data types in the same list is to use a timeline pattern (e.g. this GitHub issue contains a number of different data types). There are several ways to distinguish content in timelines such as icons, layout, and colours.

We only have 2 different types of data in our list so we don't need to create full-blown timeline and conversely we don't need to separate the different message lists. We do however need to clearly reinforce the difference between the two types of information.

[equivalentideas]

In our chat we also realised that referring to all this stuff with the label 'comments' isn’t right #824 .

[henare]

:+1:

[equivalentideas]

I think both colour, different text descriptions of the actions and maybe icons will be good to communicate the differences between the types of 'comments'. I’m going to start by implementing what I go to above, and then keep iterating towards the sweet spot of being clearly distinct, communicating the concepts clearly, but not making them so different that it’s confusing that it becomes too complex or daunting.

[equivalentideas]

Here's a few more ideas for ways to distinguish the two types of comments below. I think their are some useful ideas here to draw on as this develops to say 'lets try something like that instead of this', or 'we need to make it more distinct, what about that'. I'm confident that between these techniques and the ideas above we've got a good clear starting point for a helpful design. I think its time to see what works in the browser now.

Icons

Icons could help show that each comment is a type of comment, and describe what that is conceptually. Here’s some ideas: a pencil or a hand for comments, dialog bubbles for exchanges with councillors. I'm not sure about the comment ideas, but quite like the dialog bubbles for writing to councillors. It reenforces it being easy, and an exchange, rather than a rant:

I think these work best sitting outside the actual comment. Inside they aren't as distinct or easy to scan. Also, having them outside could help show where an exchange starts and make it clear when there's a new distinct comment:

What about councils that don't have councillor comments? Do they get icons even though there’s only one type? I think these would have to be quite subtle to be helpful. We don't want to distract from what people are actually saying.

I think these could be good if we can create icons that really communicate the concept of each type of comment.

Colours

Aside from the earlier mockups of having the comment border change colour, we could also restrict this to one part of the comment, with a sightly thicker border:

I don't think this is a good solution, because it introduces this other graphic element of one side of the comment being heavier. I think the current idea, the whole edging changes colour, is better. Its like the different types have a different glow, but what the person is saying still takes focus. This feels more helpful and supporting in combo with these other techniques. Once you learn the difference, then as soon as you pickup the glow you know what type comment is.

Text style

One important distinction is that comments are ‘one way’, and writing to councillors is a dialog. One simple way to highlight this is by putting more weight on the names by making them bold. That will draw attention to there being two people involved here:

This risks pulling too much weight away from what the person is saying, something we’ve looked at before. This is a different context now though, so making this concept clear might be more helpful to people. Something to reach for if we need it.

Indenting replies

Another way to distinguish an exchange from the ‘one way’ comments is by indenting replies from councillors:

This is a really familiar pattern, but will also help us here by demonstrating that one type of comment can be an exchange is a simple way.

[equivalentideas]

I don't think the difference in border radius is very helpful to people. It's too subtle to make the formal/informal clear, and could be confused as a mistake.

[equivalentideas]

I watched a user to look at the current version of this design during usability testing:

Here's my notes on what happened:

They aren’t immediately aware of any difference between the types of comments. They do notice that it’s yellow: “Is that because it’s the most recent one?”.

Focuses on the panel at the bottom of the message to councillor: 'Sent to Melissa Brooks about 5 hours ago. They are yet to respond.' They could clearly see this was a difference to the other comments.

“They are yet to respond?” Melissa’s put in her comment and it's been sent through to you, but they haven't confirmed? Your testing that their email is real? I don't know who “They” are. “5 hours ago” I thought it was all computer generated. Or Melissa has sent it, and your machine has asked Melissa to verify, but Melissa is at work so she hasn't yet verified ... Oh! Laurie has sent it to Melissa. So Melissa is a councillor, so your asking for the local councillor to respond.

All this confusion seemed to come from not understanding that Melissa was the recipient, they thought that Melissa made the comment. They didn't recognise who the councillor was so assumed they were the person who sent the email. They weren't drawn to the information at the top of the comment at all, but when they eventually saw it, it enabled them to understand that Laurie wrote to Melissa and it was Melissa who was yet to respond.

A few thoughts on this:

• It's not enough to subtly show that the comments are different—the difference has to be clear itself.
• The yellow colour was noticeable and I think will be successful in helping people quickly recognise and distinguish these messages once the difference from the other comments is learnt.
• The panel on the bottom of messages to councillors works well as being recognisably different from the other comments :+1: . The person understood the concept that the message had been submitted and this was information about the current status of the message (though they didn't understand what it meant).
• We shouldn't refer to the local councillors without their title. Most people aren't going to recognise a name as belonging to a councillor. Generally the text may need to be more explicit.
• The information at the top of the comment 'Laurie Burdekin wrote to local councillor Melissa Brooks' was not noticeable. It took a long time to notice that this was different to the other comments.
• The person was excited about writing to councillors once they had seen this, more excited than when they saw the option in the form. :+1:

Generally I think the design is succeeding is differentiating the comment, but the difference isn't actually clear. We need to make the what is happening with these messages more obvious.

Some todos:

• [x] Add 'local councillor' before the name of the councillor in the footer panel. Their name is not being connected to their name with the title in the comment header
• [x] Make it clearer in the comment header that there are two participants, using one of the techniques listed in the earlier comments on this issue.
• [x] review the text and try and make it clearer.

[equivalentideas]

I added 'local councillor' before councillor’s name and also changed the wording from 'sent to' to 'delivered to' which is more clear and direct I think.

I did some quick guerrilla-usability testing and this seems to be much clearer now :+1:

[equivalentideas]

Here's my initial pass of the councillor reply using the indentation and text to show that this is a reply to the previous comment. There’s also a faint line linking the two comments and I've reduced the space between them as compared to other comments to show that they are linked.

I'm going to do some guerrilla testing with this in the morning.

[equivalentideas]

Just tested this and it the person immediately understood that this was a response. I think the text of the comments influenced this as well though, so we’ll see what people actually write.

I think the design is in a good place to start from. It’s clear when people look into it, but the feed is still quite simple and people are really focused on the application and what the responses are saying, rather than all the details of who and where they are going to. The balance is feeling pretty good to me.

[equivalentideas]

We’ve just merged the design prototype of this into master #838 , next is to implement it.

[equivalentideas]

Ok, I'm now going to implement this so you can actually write to a councillor. I'm going to try and do this as dumb as possible, with TDD, while @henare looks into WriteIt and other solutions for how we can make this awesome. The stuff I do here shouldn't matter to how the sending actually works in the end. Here we go.

[henare]

This is well and truly started in #844 and has been split out into individual issues.