Skip to content

Commit

Permalink
Address UX feedback on location-based search form
Browse files Browse the repository at this point in the history 
Why these changes are being introduced:

This is in response to a UX review of location-based search.

Relevant ticket(s):

* [GDT-136](https://mitlibraries.atlassian.net/browse/GDT-136)

How this addresses that need:

* Removes top margin from all `details` elements except the first.
* Bolds field labels and normalizes font size for all labels (including
hints and descriptions).
* Moves placeholder text to description `span` elements and changes
"e.g." to "Ex:".
* Changes language for distance description/hint.
* Changes summary labels for geobox and geodistance.
* Changes red asterisk 'required field' indicators to black as indicators,
and adds a `p` tag explaining what the asterisks mean beneat each `legend`.

Side effects of this change:

None.
  • Loading branch information
@jazairi
jazairi committed Mar 26, 2024
1 parent f25953a commit 3ce0ab6
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 39 deletions.
21 changes: 14 additions & 7 deletions app/assets/stylesheets/partials/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
padding: 2.4rem 2rem 1rem 2.4rem;

details {
margin-top: 1rem;
&:first-of-type {
margin-top: 1rem;
}

.field-container {
margin-top: 1rem;
Expand Down Expand Up @@ -78,16 +80,21 @@

#geobox-search-panel,
#geodistance-search-panel {
label::after {
color: $red-muted;
content: '*';
}
.geo-label,
.geo-desc {
.geo-desc,
.hint,
p {
display: block;
color: $black;
font-size: $fs-small;
}
.geo-label {
font-weight: $fw-bold;
&:after {
content: ' *';
}
}
.geo-desc {
font-size: $fs-xsmall;
margin-bottom: 2rem;
}
#maxLat-desc,
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/search_form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function disableGeobox() {
field.setAttribute('aria-required', false);
});
geobox_label.classList = 'closed';
geobox_label.innerText = 'Bounding box search';
geobox_label.innerText = 'Geospatial bounding box search';
};

function enableGeobox() {
Expand Down Expand Up @@ -94,7 +94,7 @@ function enableGeodistance() {
field.setAttribute('aria-required', true);
});
geodistance_label.classList = 'open';
geodistance_label.innerText = 'Close geospatial distance search';
geodistance_label.innerText = 'Close distance search';
};


Expand Down
62 changes: 32 additions & 30 deletions app/views/search/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ if params[:advanced] == "true"
search_required = false
end

geobox_label = "Bounding box search"
geobox_label = "Geospatial bounding box search"
geobox_label_class = "closed"
if params[:geobox] == "true"
geobox_label = "Close bounding box search"
Expand All @@ -27,7 +27,7 @@ end
geodistance_label = "Geospatial distance search"
geodistance_label_class = "closed"
if params[:geodistance] == "true"
geodistance_label = "Close geospatial distance search"
geodistance_label = "Close distance search"
geodistance_label_class = "open"
geodistance_required = true
search_required = false
Expand All @@ -36,8 +36,10 @@ end

<form id="basic-search" class="form-horizontal basic-search" action="<%= results_path %>" method="get">
<div class="form-group">
<label for="basic-search-main" class="field-label" title="<%= label %>" />
<input id="basic-search-main" type="search" class="field field-text basic-search-input <%= "required" if search_required %>" name="q" placeholder="Enter your search" value="<%= params[:q] %>" <%= 'required="required" aria-required="true"' if search_required %>>
<input id="basic-search-main" type="search"
class="field field-text basic-search-input <%= "required" if search_required %>" name="q" title="<%= label %>"
placeholder="Enter your search"
value="<%= params[:q] %>" <%= 'required="required" aria-required="true"' if search_required %>>
<div class="basic-search-submit">
<button type="submit" class="btn button-primary">Search</button>
</div>
Expand All @@ -50,57 +52,54 @@ end
<input id="geobox-search-field" type="hidden" name="geobox" value="<%= params[:geobox] %>">
<fieldset>
<legend>Search within a geospatial bounding box</legend>
<p>* All fields in this section are required</p>
<div class="gridband layout-2c">
<div class="field-wrap grid-item">
<label class="geo-label" for="geobox-minLongitude">
Minimum longitude
</label>
<label class="geo-label" for="geobox-minLongitude">Minimum longitude</label>
<input type="number" step="0.000001" min="-180.0" max="180.0"
class="field field-text <%= "required" if geobox_required %>"
id="geobox-minLongitude" name="geoboxMinLongitude" value="<%= params[:geoboxMinLongitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="minLong-desc" placeholder="E.g., -73.507239">
aria-describedby="minLong-desc">
<span class="geo-desc" id="minLong-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -73.507239)
<span class="hint">Western Hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
<label class="geo-label" for="geobox-minLatitude">
Minimum latitude
</label>
<label class="geo-label" for="geobox-minLatitude">Minimum latitude</label>
<input type="number" step="0.000001" min="-90.0" max="90.0"
class="field field-text <%= "required" if geobox_required %>"
id="geobox-minLatitude" name="geoboxMinLatitude" value="<%= params[:geoboxMinLatitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="minLat-desc" placeholder="E.g., 41.239083">
aria-describedby="minLat-desc">
<span class="geo-desc" id="minLat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0 (Ex: 41.239083)
<span class="hint">Southern Hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
<label class="geo-label" for="geobox-maxLongitude">
Maximum longitude
</label>
<label class="geo-label" for="geobox-maxLongitude">Maximum longitude</label>
<input type="number" step="0.000001" min="-180.0" max="180.0"
class="field field-text <%= "required" if geobox_required %>"
id="geobox-maxLongitude" name="geoboxMaxLongitude" value="<%= params[:geoboxMaxLongitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="maxLong-desc" placeholder="E.g., -69.928713">
aria-describedby="maxLong-desc">
<span class="geo-desc" id="maxLong-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -69.928713)
<span class="hint">Western Hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
<label class="geo-label" for="geobox-maxLatitude">
Maximum latitude
</label>
<label class="geo-label" for="geobox-maxLatitude">Maximum latitude</label>
<input type="number" step="0.000001" min="-90.0" max="90.0"
class="field field-text <%= "required" if geobox_required %>"
id="geobox-maxLatitude" name="geoboxMaxLatitude" value="<%= params[:geoboxMaxLatitude] %>"
<%= 'required="required" aria-required="true"' if geobox_required %>
aria-describedby="maxLat-desc" placeholder="e.g., 42.886759">
aria-describedby="maxLat-desc">
<span class="geo-desc" id="maxLat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0 (Ex: 42.886759)
<span class="hint">Southern Hemisphere is negative</span>
</span>
</div>
</div>
Expand All @@ -113,6 +112,7 @@ end
<input id="geodistance-search-field" type="hidden" name="geodistance" value="<%= params[:geodistance] %>">
<fieldset>
<legend>Search within a distance of a geographic point</legend>
<p>* All fields in this section are required</p>
<div class="gridband layout-2c">
<div class="field-wrap grid-item">
<label class="geo-label" for="geodistance-latitude">Latitude</label>
Expand All @@ -121,9 +121,10 @@ end
id="geodistance-latitude" name="geodistanceLatitude"
value="<%= params[:geodistanceLatitude] %>" aria-describedby="lat-desc"
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="lat-desc" placeholder="E.g., 42.279594">
aria-describedby="lat-desc">
<span class="geo-desc" id="lat-desc">
A decimal between -90.0 and 90.0 (Southern hemisphere is negative)
A decimal between -90.0 and 90.0 (Ex: 42.279594)
<span class="hint">Southern Hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -133,9 +134,10 @@ end
id="geodistance-longitude" name="geodistanceLongitude"
value="<%= params[:geodistanceLongitude] %>" aria-describedby="long-desc"
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="long-desc" placeholder="E.g., -83.732124">
aria-describedby="long-desc">
<span class="geo-desc" id="long-desc">
A decimal between -180.0 and 180.0 (Western hemisphere is negative)
A decimal between -180.0 and 180.0 (Ex: -83.732124)
<span class="hint">Western Hemisphere is negative</span>
</span>
</div>
<div class="field-wrap grid-item">
Expand All @@ -144,9 +146,9 @@ end
id="geodistance-distance" name="geodistanceDistance"
value="<%= params[:geodistanceDistance] %>" aria-describedby="distance-desc"
<%= 'required="required" aria-required="true"' if geodistance_required %>
aria-describedby="distance-desc" placeholder="E.g., 160mi">
aria-describedby="distance-desc">
<span class="geo-desc" id="distance-desc">
Include units; e.g., '100km' or'50mi' (default unit is meters)
Distance is in meters by default; add other units if preferred (Ex: '100km' or '50mi')
</span>
</div>
</div>
Expand Down

0 comments on commit 3ce0ab6

Please sign in to comment.