Just in time Help Instructions
Enhancing Tool Discoverability with Accordion-Based In-Context Guidance
In ArcGIS Experience Builder, the "Widget Controller" is a popular way to manage multiple tools. However, for public-facing apps or new users, icon-only interfaces can lead to confusion. This article explores a design pattern that replaces standard icon controllers with an Accordion-based navigation system that embeds instructions directly where users need them.
The Problem: The "Icon Guessing Game"
The default Widget Controller pattern is space-efficient but relies entirely on icon recognition. For specialized tools, a small icon doesn't always convey the full purpose, forcing users to click through every tool to find what they need.
Standard icon-only controller: Compact, but requires the user to know what each symbol represents.
The Solution: The Accordion Tool Menu
By replacing the Controller with an Accordion Widget, we provide clear, human-readable labels. This immediately clarifies the application's capabilities without cluttering the map.
The Accordion approach: Large, legible tap targets and clear labels (Near Me, Draw Tool, Measure, etc.) improve accessibility and discoverability.
The Innovation: In-Context "How to Use" Guidance
The true power of this pattern is providing instruction at the exact moment of use. Instead of a separate help page, we embed a "How to Use" view inside every tool panel.
Left: The tool view. Right: The "How to Use" view providing step-by-step instructions for the specific widget.
By using a Section Widget inside the accordion item, we can toggle between the functional tool and a set of instructions. This ensures that users are never "stuck" wondering how to interact with the map.
Consistent Guidance Across All Tools
This pattern is easily replicable across any widget in your experience, from drawing and measuring to printing and data management.
The "Ready to Print" and "Ready to Draw" views provide just-in-time training, reducing the need for external documentation.
The Building Blocks: How to Build It
This layout is achieved using three standard Experience Builder components:
Accordion Widget (Primary Structure): This acts as your main navigation. Create one accordion item for each tool in your workflow.
Section Widget + View Navigator: Inside each accordion item, place a Section Widget with two views:
View 1 (Draw Tool): Drop your functional widget here.
View 2 (How To Use): Drop an Embed Widget here with html contents.
(HTML Code below much easier than it looks thanks to AI).
<div style="font-family:'Avenir Next', 'Helvetica Neue', Arial, sans-serif; box-sizing:border-box; background-color:#ffffff; border:1px solid #dcdcdc; border-radius:4px; overflow:hidden; min-width:250px;">
<div style="background-color:#003366; color:#ffffff; padding:15px; border-bottom:4px solid #FFC72C;">
<div style="font-size:18px; font-weight:800; letter-spacing:0.5px; line-height:1.2; text-transform:uppercase;">
<span style="font-size:20px;">🖨️</span> Print Map
</div>
<div style="font-size:12px; margin-top:5px; font-weight:500;">
Export PDF Map with Legend
</div>
</div>
<div style="padding:20px; color:#333333;">
<p style="margin-top:0; margin-bottom:20px; font-size:14px; line-height:1.5; color:#444;">
Create a professional PDF of your current map view, including active layers and legends.
</p>
<div style="display:flex; align-items:flex-start; margin-bottom:15px;">
<div style="flex-shrink:0; width:28px; height:28px; background-color:#FFC72C; color:#003366; font-weight:900; border-radius:50%; text-align:center; line-height:28px; margin-right:12px; font-size:14px;">1</div>
<div>
<div style="font-size:14px; font-weight:700; color:#003366; margin-bottom:4px;">Set Title</div>
<div style="font-size:13px; line-height:1.4; color:#555;">
Enter a custom title for your map (e.g., "Flood Impact Analysis").
</div>
</div>
</div>
<div style="display:flex; align-items:flex-start; margin-bottom:15px;">
<div style="flex-shrink:0; width:28px; height:28px; background-color:#FFC72C; color:#003366; font-weight:900; border-radius:50%; text-align:center; line-height:28px; margin-right:12px; font-size:14px;">2</div>
<div>
<div style="font-size:14px; font-weight:700; color:#003366; margin-bottom:4px;">Options</div>
<div style="font-size:13px; line-height:1.4; color:#555;">
Select your template (Landscape/Portrait) and ensure <strong>"Include Legend"</strong> is checked under Advanced settings.
</div>
</div>
</div>
<div style="display:flex; align-items:flex-start;">
<div style="flex-shrink:0; width:28px; height:28px; background-color:#FFC72C; color:#003366; font-weight:900; border-radius:50%; text-align:center; line-height:28px; margin-right:12px; font-size:14px;">3</div>
<div>
<div style="font-size:14px; font-weight:700; color:#003366; margin-bottom:4px;">Print</div>
<div style="font-size:13px; line-height:1.4; color:#555;">
Click the <strong>Print</strong> button. Once complete, click the filename in the "Results" tab to open your PDF.
</div>
</div>
</div>
</div>
<div style="background-color:#f8f9fa; border-top:1px solid #dcdcdc; padding:10px; text-align:center;">
<span style="font-size:11px; font-weight:bold; color:#003366; text-transform:uppercase;">
Ready to Print
</span>
</div>
</div>Embed Widget (AI-Assisted Instructions): Use an Embed Widget set to "Expression." Paste custom HTML/CSS here to create the instructional card.
Why This Works
Easier Onboarding: The app teaches itself as the user explores.
Mobile Friendly: Accordion panels are naturally responsive and easy to tap.
Reduced Support: Users are less likely to reach out for help when instructions are one click away.
