Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI Discussions] Changeset Details #22

Closed
rasagy opened this issue May 11, 2017 · 9 comments
Closed

[UI Discussions] Changeset Details #22

rasagy opened this issue May 11, 2017 · 9 comments

Comments

@rasagy
Copy link
Contributor

rasagy commented May 11, 2017

Following up from #11, let’s use this ticket to iterate on the Changeset details view:

c - changeset detail - v2

Key information:

  1. Main header with CTA
  • Open in (JOSM, iD etc.)
  • Verify (Harmful, not harmful)
  • Add tag (Longer list of tags that could explain actual cause, action taken, escalation etc.)
  1. Changeset metadata
  • Apart from what’s visible in the changeset list, more details like Imagery, Source, Editor etc.
  1. Flagged features
  • Table with links to open the individual feature page, highlight it in changeset map, open in JOSM
  1. Changeset discussion
  2. Changeset map

For the layout, I’m envisioning the top half with dedicated section for 2, 3, 4 and the bottom half for changeset map. This ensures that the changeset detail is always visible (for context), and you can view the flagged feature list along with the changeset map (so you can quickly inspect individual features on the map without any scrolling).

cc @kepta @ajithranka @batpad @geohacker

@rasagy
Copy link
Contributor Author

rasagy commented May 11, 2017

Things to discuss:

  • How should the layout work responsively?
  • How should the changeset map layout change to accomodate the responsive layout? This conversation can help push Make changeset map responsive osmlab/changeset-map#133 forward.
  • How should changeset map open full-screen (Like full-screen video? In a new tab? Draggable layout?)

Thoughts @planemad @maning @manoharuss & others?

@bsrinivasa
Copy link

@rasagy , The changeset detail page looks good. Also curious to check out ideas on how changeset map and discussion module could be fit in the current layout design.

How should changeset map open full-screen (Like full-screen video? In a new tab? Draggable layout?)

Would suggest for changeset map to just expand in shape to about 75% (or a bit more than that) of the screen (as in a photo viewer experience) and when clicked outside the map, the page should return back to the original state which displays changeset details and the normal changeset map. I wouldn't recommend opening in a new tab as it would be again tedious to open - close and switching tabs.

@rasagy
Copy link
Contributor Author

rasagy commented May 11, 2017

Since a common usecase with OSMCHA is to have a split-screen layout (OSMCHA + JOSM/iD), we need to make sure the layout is responsive here’s how the layout could look like on a 800x600 screen:

c - v2 tablet

We could push the 2, 3, 4 sections in a single layout (scrollable) and keep the changeset map pinned to the bottom. But with the list showing, the horizontal space will be pretty limited for the map.


c - v2 tablet sidebar

To use the horizontal space better, this collapsed view where the sidebar can be shown on top of the details page when you click on the hamburger icon.

This still requires a lot more iterations to nail down, will work on this once we have clarity on how the details screen looks.

@willemarcel
Copy link
Collaborator

Good ideas, @rasagy !

I think it's not necessary too much space for "Flagged features" in the first image, so I would adjust its section height to the same of the changeset details

@rasagy
Copy link
Contributor Author

rasagy commented May 11, 2017

@willemarcel Good point! @kepta also worked on a quick prototype to test this on multiple screens, and I think the overall feedback is to not do a 50%-50% split but roughly 30%-70% split so changeset map uses more space. Will iterate on this and see what works best!

@rasagy
Copy link
Contributor Author

rasagy commented May 11, 2017

Would suggest for changeset map to just expand in shape to about 75%…

@bsrinivasa Interesting feedback! Like @willemarcel mentioned, I think we can give changeset map more space by default. Let’s see if that removes the need to have a full-screen view for most cases.

@rasagy
Copy link
Contributor Author

rasagy commented May 17, 2017

@kepta helped make a quick prototype to get feedback on the layout. The main feedback was that 50-50 split doesn’t work well, especially on slightly smaller screen sizes, and the changeset map should be toggle-able/expandable in some way.

Based on those inputs, @kepta, @ajithranka & I went ahead with rethinking the layout by focusing on the changeset map and adding details around it.

First iteration: Collapsable panels

c - changeset-map ui - v4

This combines the left panel in changeset map with other details in OSMCHA to create a set of toggle-able panels. These could open/close like accordions (at most one section open at one time).

Second iteration: Panels as map controls

c - changeset-map ui with icons - v4

Taking the above idea forward, this collapses the panels into a smaller control/icon/button, thus taking minimal space in the interface when someone wants to dive deep into the changeset map.

This approach avoids the jarring movement of clickable areas in an accordion that we saw in Concept D, and also makes each section flexible in size (for ex the Flagged features could be wider to accommodate the table, while the Toggle layers could be smaller).

c - changeset-map ui with icons panels

Let’s take this approach forward and start working on a high-fidelity design.

PS: This would require us to also update the design of the changeset map, tracking that on this ticket.

@willemarcel
Copy link
Collaborator

Excelent!! Both are very good, but I prefer the Panels as map controls.

@kepta
Copy link
Contributor

kepta commented Jun 8, 2017

Closing this ticket as it has gone out of date.

@kepta kepta closed this as completed Jun 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants