From eb4a7907a45011adcf012a4b12e4c22c9614c474 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 24 Sep 2020 15:52:18 +0100 Subject: [PATCH 1/4] Make estimated phone count clearer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We’ve had some feedback from user research that difference between ‘will get alert’ and ‘likely to get alert’ is not clear, and it’s hard to tell if the latter is inclusive of the former. This leads people to question the validity of these numbers, which is important, because an the estimate should give you some idea of the impact of what you’re about to do. This commit reformats the number as a range, for example 1,000 to 2,000 phones. If the range is small, eg 40,000,000 to 40,800,000 then this suggests a false level of accuracy. So instead we just give one number and say it’s an estimate, eg ‘40,000,000 phones estimated’ --- app/models/broadcast_message.py | 4 +- .../views/broadcast/macros/area-map.html | 10 +++- tests/app/main/views/test_broadcast.py | 56 ++++++++++++++++--- 3 files changed, 57 insertions(+), 13 deletions(-) diff --git a/app/models/broadcast_message.py b/app/models/broadcast_message.py index 87b431b37..c5951b152 100644 --- a/app/models/broadcast_message.py +++ b/app/models/broadcast_message.py @@ -128,7 +128,7 @@ class BroadcastMessage(JSONModel): def count_of_phones(self): return round_to_significant_figures( sum(area.count_of_phones for area in self.areas), - 2 + 1 ) @property @@ -136,7 +136,7 @@ class BroadcastMessage(JSONModel): area_estimate = self.simple_polygons.estimated_area bleed_area_estimate = self.simple_polygons.bleed.estimated_area - area_estimate return round_to_significant_figures( - self.count_of_phones * bleed_area_estimate / area_estimate, + self.count_of_phones + (self.count_of_phones * bleed_area_estimate / area_estimate), 1 ) diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html index 53a991dc9..32b0ce8ee 100644 --- a/app/templates/views/broadcast/macros/area-map.html +++ b/app/templates/views/broadcast/macros/area-map.html @@ -7,7 +7,7 @@ Will get - alert ({{ broadcast_message.count_of_phones|format_thousands }} phones) + alert
  • alert - ({{ broadcast_message.count_of_phones_likely|format_thousands }} phones) +
    • +
  • + {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %} + {{ broadcast_message.count_of_phones|format_thousands }} phones estimated + {% else %} + {{ broadcast_message.count_of_phones|format_thousands }} to {{ broadcast_message.count_of_phones_likely|format_thousands }} phones + {% endif %}
    • {% endmacro %} diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py index b17f5c93e..35963b642 100644 --- a/tests/app/main/views/test_broadcast.py +++ b/tests/app/main/views/test_broadcast.py @@ -368,13 +368,57 @@ def test_broadcast_page( ), +@pytest.mark.parametrize('areas_selected, areas_listed, estimates', ( + ([ + 'ctry19-E92000001', + 'ctry19-S92000003', + ], [ + 'England remove', + 'Scotland remove', + ], [ + 'An area of 176,714.9 square miles Will get the alert', + 'An extra area of 3,052.8 square miles is Likely to get the alert', + '40,000,000 phones estimated', + ]), + ([ + 'wd20-E05003224', + 'wd20-E05003225', + 'wd20-E05003227', + 'wd20-E05003228', + 'wd20-E05003229', + ], [ + 'Penrith Carleton remove', + 'Penrith East remove', + 'Penrith Pategill remove', + 'Penrith South remove', + 'Penrith West remove', + ], [ + 'An area of 6.3 square miles Will get the alert', + 'An extra area of 14.4 square miles is Likely to get the alert', + '9,000 to 30,000 phones', + ]), +)) def test_preview_broadcast_areas_page( + mocker, client_request, service_one, fake_uuid, - mock_get_draft_broadcast_message, + areas_selected, + areas_listed, + estimates, ): service_one['permissions'] += ['broadcast'] + mocker.patch( + 'app.broadcast_message_api_client.get_broadcast_message', + return_value=broadcast_message_json( + id_=fake_uuid, + template_id=fake_uuid, + created_by_id=fake_uuid, + service_id=SERVICE_ONE_ID, + status='draft', + areas=areas_selected, + ), + ) page = client_request.get( '.preview_broadcast_areas', service_id=SERVICE_ONE_ID, @@ -384,20 +428,14 @@ def test_preview_broadcast_areas_page( assert [ normalize_spaces(item.text) for item in page.select('ul.area-list li.area-list-item') - ] == [ - 'England remove', - 'Scotland remove', - ] + ] == areas_listed assert len(page.select('#map')) == 1 assert [ normalize_spaces(item.text) for item in page.select('ul li.area-key') - ] == [ - 'An area of 176,714.9 square miles Will get the alert (44,000,000 phones)', - 'An extra area of 3,052.8 square miles is Likely to get the alert (800,000 phones)', - ] + ] == estimates @pytest.mark.parametrize('areas, expected_list', ( From f79a5ca02003b7cfa98dafaf5367ac65ae54e2f9 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 24 Sep 2020 15:52:38 +0100 Subject: [PATCH 2/4] =?UTF-8?q?Style=20=E2=80=98likely=E2=80=99=20area=20w?= =?UTF-8?q?ith=20a=20dashed=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We’ve had some feedback that relying only on luminosity and position to differentiate between the ‘will get alert’ and ‘likely to get alert’ areas on the map might not be enough. We don’t want to introduce another colour because: - it will make the map look very busy - not many other colours contrast with the map tiles as well as blue - relying on colour only to communicate information is also bad for accessibility Instead we can make one of the lines a different style. I’ve gone for dashed on the ‘likely’ line because it looks nice, and gives some suggestion of a porous boundary. Implementing this means using CSS border image, because a `dashed` border (which we still have as a fallback) doesn’t render with consistent dash sizes from browser to browser. We need consistency to match the dashes that the map will be drawing (which use SVG not CSS so don’t have the same problem). --- .../images/dashed-border-govuk-blue.svg | 13 +++++++++ .../stylesheets/components/area-list.scss | 21 ++++++++++----- .../partials/area-map-javascripts.html | 27 +++++++------------ 3 files changed, 37 insertions(+), 24 deletions(-) create mode 100644 app/assets/images/dashed-border-govuk-blue.svg diff --git a/app/assets/images/dashed-border-govuk-blue.svg b/app/assets/images/dashed-border-govuk-blue.svg new file mode 100644 index 000000000..3c9d9f1db --- /dev/null +++ b/app/assets/images/dashed-border-govuk-blue.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index d347af7fc..1bb30c1df 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -1,6 +1,6 @@ .area-list { - display: inline-block; + display: inline; &-item { @@ -104,17 +104,26 @@ &--certain { &:before { - border: 4px solid rgba($white, 0.1); - background: rgba($govuk-blue, 0.6); - box-shadow: inset 0 0 0 2px $black; + border: 2px solid $black; + background: $light-blue-50; } } &--likely { &:before { padding: 1px; - border: 2px solid $govuk-blue; - background: rgba($govuk-blue, 0.2); + border: 2px dashed $govuk-blue; + border-image: file-url('dashed-border-govuk-blue.svg') 4 round; + background: $light-blue-25; + } + } + + &--phone-estimate { + padding-left: govuk-spacing(1); + margin-right: 0; + float: right; + &:before { + display: none; } } diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html index 6111f6be2..b557e9445 100644 --- a/app/templates/views/broadcast/partials/area-map-javascripts.html +++ b/app/templates/views/broadcast/partials/area-map-javascripts.html @@ -5,23 +5,13 @@ {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %} polygons.push( L.polygon({{polygon}}, { - opacity: 0.8, - color: '#005ea5', // $light-blue - fillColor: '#005ea5', // $light-blue + opacity: 1, + color: '#005ea5', + fillColor: '#2B8CC4', fillOpacity: 0.15, - weight: 2 - }) - ); - {% endfor %} - - {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %} - polygons.push( - L.polygon({{polygon}}, { - opacity: 0.3, - color: '#005ea5', // $black - fillColor: '#005ea5', // $light-blue - fillOpacity: 0.3, - weight: 1 + weight: 2, + dashArray: [6, 7], + lineCap: 'butt' }) ); {% endfor %} @@ -29,8 +19,9 @@ {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %} polygons.push( L.polygon({{polygon}}, { - color: '#0b0b0c', // $black - fillOpacity: 0, + color: '#0b0b0c', + fillColor: '#005ea5', + fillOpacity: 0.3, weight: 2 }) ); From 19730dad6e6db15c866d5091b16e39c90f1ae89c Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 24 Sep 2020 12:30:19 +0100 Subject: [PATCH 3/4] Rotate the map key icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We’ve had some feedback that the map key icons look a bit like checkboxes, and that this might have confused a user during the research. So we need a way of making them look different to checkboxes. We don’t want to change the border thickness because it matches what’s on the map. A different approach is changing the shape. Shapes that might still be confusing: - circles (look like radio buttons) - triangles (look like a warning) So this commit changes the shape to a diamond, which is easy to acheive by rotating the square 45 degrees. --- app/assets/stylesheets/components/area-list.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 1bb30c1df..e78829329 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -94,12 +94,13 @@ content: ""; display: block; position: absolute; - top: 0; - left: 0; - width: govuk-spacing(7); - height: govuk-spacing(7); + top: 4px; + left: govuk-spacing(1); + width: govuk-spacing(6); + height: govuk-spacing(6); box-sizing: border-box; margin-right: govuk-spacing(1); + transform: rotate(45deg); } &--certain { From 67bdd27dd00c4c361d97520e2e9b204d52519634 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 25 Sep 2020 09:49:27 +0100 Subject: [PATCH 4/4] Tweak position of key icons to align with text --- app/assets/stylesheets/components/area-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index e78829329..66769111b 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -94,7 +94,7 @@ content: ""; display: block; position: absolute; - top: 4px; + top: 3px; left: govuk-spacing(1); width: govuk-spacing(6); height: govuk-spacing(6);