Report details screen is getting super cluttered on narrow screens

[zarino]

Discussion on #2012 has brought up the fact that screens like this…

…are starting to feel super claustrophobic on small screens. (That screenshot is from an iPhone SE, where browser toolbars reduce the vertical height even further than it already is.)

A few thoughts:

• Do we really need to show zoom and pan controls here? Could we instead hide them until the map is made full screen (either via the "Expand" button or the "Back to all reports" button)?
• If the zoom and pan controls disappear, could the "Expand/Collapse" button maybe be overlaid, as a single "diagonal arrows" icon, on top of the top right corner of the map?
• Does "Get updates" need such prominent positioning? Could it be moved further down, after the report details, and closer to other "get involved"-type interactions like leaving an update?
• Is there a shorter, or more obvious way of labelling the "Back to all reports" action? Native apps tend to label their toolbar "Back" buttons just "Back". Or maybe, if expanding / tapping the map does a natural thing, we might not even need a back button?

[zarino]

Further thoughts from @dracos, spurred by us looking at this mockup of the page with lots of the buttons removed:

• Should metadata go below the problem description?
• Do we need all that metadata? Date seems important, but category, user, integration details…?
• Why isn’t the date being summarised into a human readable "X days ago" format?

[zarino]

Here’s where the mockups got to on this:

• Removed map controls – dragging and scrolling still work to pan and zoom
• #sub_map_links replaced with a new element that combines the existing "Expand" button, and the previous "Back to all reports" .problem-back button.
  • (Technically, we might want to keep #sub_map_links, for now, so we can display the "Shortlist all visible" button for inspectors, and Satellite/Road toggle on Google Maps and Zurich – but most users won’t see it.)
  • On wider screens, we’ll keep this element where it is, but hide the "Expand map" button, leaving just "Nearby reports" in the same position as the current "Back to all reports" button on desktop.
• Smaller status banner (when shown). Not precious about the style here – tempted to drop the little pin icon and use the pin colour(s) as the background, as shown above, just to reduce visual clutter.
• Report title, metadata, image(s), and description as currently.
  • I’m wondering whether we can hide the "Sent to [council] [x time] later" sentence, if the delay was less than an hour or two? In those cases, we might want/need to modify the preceding sentence to include the council name.
• Pretty heavy restyling of #key-tools. Giving each item a full line means the labels can be more self-explanatory.
  • Now includes a relocated "Get updates" button (from #sub_map_links).
  • Styling to mostly match the #sub_map_links replacement further up – 16px text, enough contrast to pass WCAG AA, finger-friendly 44px tall hit area.
• "Unsuitable?" button replaced with two links that go to the exact same place (for now!), but should hopefully cut down on people contacting us to complain about reports but not including any of the report details because they’ve not followed the "Unsuitable?" link.
• I’ve played with the idea of displaying the updates a bit more like "comments". Not precious about this, but might be a bit more self-explanatory to modern users.

As mentioned, I’m thinking that the desktop layout would be almost identical too – just with the map and "Expand map" button removed.

I am sure there will be edge cases I’ve not thought of. What do you think @dracos @wrightmartin?

[zarino]

If we do change the styling of updates, I’ll need to think how to handle the "Still open, via questionnaire, [date]" style of updates, that don’t have any body text.

[dracos]

Lots to like here! As ever, lots of these could be done as small increments rather than having to do them all at once :)

Going by your previous comment, yes, what is the difference now between nearby reports and expand map (on mobile); on desktop of course you'd go back to the page listing the reports but on mobile as the map is full screen at that point and it's basically the same view, hmm...

Perhaps metadata (apart from date) could all go behind a dropdown of "meta info" somehow? Or should it be under the text? Or split? Is the precise time important? Perhaps if it's been sent to the council the same day, it could be "Reported to FOO [in the blah] [today | on date]". If not yet sent, could be "Reported [in the blah] on date, not [yet] sent to council"; or only the date in that case.

[zarino]

Perhaps if it's been sent to the council the same day, it could be "Reported to FOO [in the blah] [today | on date]". If not yet sent, could be "Reported [in the blah] on date, not [yet] sent to council"; or only the date in that case.

This is exactly what I was thinking. It will mess with the translations, but maybe that’s not too big a deal. I’m sure lots of other strings will be changing.

Agree we could do it very incrementally. Off the top of my head:

• Hide pan/zoom controls on map
• Smaller styling for report status
• Move the old #key-tools links into the list layout, in the middle of the page
• #sub_map_links tidying/replacing – whatever we decide to do there
• Refreshed styling for updates
• Typography / layout improvements for report title, metadata and description

what is the difference now between nearby reports and expand map (on mobile);

The main difference, to me, is that, once you’ve tapped "Expand" there’s a nice easy "Contract" that gets you back to the same screen again. Whereas if you go to nearby reports, there’s no easy way back, other than find and tapping the right marker on the map.

[dracos]

Could expand map be just the icon in the corner of the map? That would match e.g. youtube or google maps streetview map.

[zarino]

Could expand map be just the icon in the corner of the map? That would match e.g. youtube or google maps streetview map.

Yeah, could be!

That would just leave the "Nearby reports" / "Back to all reports" link between the map and the title – and now I’m wondering whether we even need that. "Nearby reports" could just be one of the items in the new #key-tools list slightly further down the page – which is, ironically, where the "Nearby reports" link currently is in the DOM anyway.