popup interface design - Tabs to page through multiple features

[Anonymous User]

I have trained hundreds of users, from engineers to arborists to accountants, on using Esri map viewers.

Users do not 'see' the previous/next feature buttons < > in the popup title bar.  They understand once they see it. But, they never notice it.  I found that a bit surprising but I think perhaps because the controls are so small with no color or texture that could be why they are not discoverable.

Here are my mockups for what I would like to see.

One layer, multiple features - current interface:

How I would like to see it:

Yes, huge buttons. Or let us customize dang popup CSS/HTML.  Or I will just intercept it in my custom CSS. Anyway I recommend large buttons and let us decide how to label the buttons because some layer names are kinda long and would be too much to cram in there (like my layer is really named Property Boundaries (Parcels) but I'd change to just Parcel 1, Parcel 2 etc)

Now with multiple layers, let's say Parcels, Streets and Trees, it's currently the same as above. How I'd like to see it:

As to number of features, could leave in the titleBar or put right below the feature selector buttons with an <hr> below it.

Now of course it's possible to customize this and do it yourself. For example in 3.x (used by WAB) - https://developers.arcgis.com/javascript/3/jssamples/widget_infowindowchart.html and https://community.esri.com/thread/106181

While the 4.x < > feature buttons are a little more prominent I still think they will not be noticed.

So, while we can add this for a custom template...I don't envision doing this for all my layers in all my viewers.  And I always turn on all popups for all visible layers in all my viewers. (Something else that would probably a good thing for Esri to consider as a programmer's option, for now, it requires hacking layerinfos module in WebApp Builder). 

It would be good to add this concept in to the default interface for the Next-Generation ArcGIS Online web map "Map Maker".

Other items needed for popups that are well-known:

1. moving popup  (easy enough to implement, see https://community.esri.com/thread/161401#comment-750577 etc -  but would be good to support by default)

2.  popups that auto-resize to fit content, and have a resizer handle in the lower-right corner for users to resize on their own  https://community.esri.com/ideas/4590

3. Support full HTML and CSS to allow us to design the popup better and leverage Arcade to generate CSS and HTML on the fly so it will render in the popup.  Would allow attributes to affect the HTML and CSS via Arcade, very powerful. Example: based on the type of color a fire hydrant, could change the background color of the popup DOM node. Just a random example to give an idea. 

4.   show related records directly within the popup

5. show attachments in the popup

Kory Kramer‌

[Anonymous User]

Another thought - the default behavior of the popup should be that it doesn't the feature, at least by default. If it is a polygon, it could have a leader line from the centroid or edge (perhaps either as options) and the popup should be outside the feature; again perhaps placement left vs top vs right etc as optional parameters. I have my popups movable using the workaround here but some users still do not notice it can be moved. It would be a safer default behavior to have the popup not cover a polygon by default.

[Anonymous User]

Here is an example  https://public.sagis.org/PopupExample.html  from Kelly Hutchins‌ post. 

This demonstrates basically what I propose as the next generation popup UI.   I propose though as I am illustrating above, the big tabs should be what layer (by layer I mean what dataset, i.e Soils, or Streets, or Trees, etc) and then with sub-tabs of which should be of features, appearing if more than one is present.  For example if you click on the map and underneath the cursor is one Tree, three Street segments and two Water Lines. Big tabs for each dataset layer, sub-tabs if there are multiple features.  As users do not notice the 1 of 3 Features with the < > buttons in the titleBar of popups. Tabs are discoverable and a more widely used and understood interface element.