Input group style and examples #461
base: develop
Are you sure you want to change the base?
Conversation
Bit more flexible on mobile |
@gazhands - with the label moved into the Search text box via CSS and then moved off-screen when the box gets focus? NB. I don't like 'reverse class for button to the left' - seems counter-intuitive to have the action (search/submit) before you've put your search terms in |
@AndrewArch Maybe follow this approach for the text? http://guides.service.gov.au/design-guide/components/forms-buttons/index.html#hint-text |
'Search' inside the text box shouldn't be a hint or place-holder text, it should be a label - like on dta.gov.au See also #432 |
@gazhands on that design patterns hackpad... interesting that the empty searches were reduced but I'd love to know whether the number of 'search' searches increased... (what would happen if you just hit the button and no search term? would it register as empty or search I wonder?) |
Using an icon instead of text is always taking a gamble on your user's level of familiarity with the meaning of that symbol within the context of your system. The search icon is perhaps the most universal of web interface icons, however a magnifying glass does not provide inherent affordance, so the icon only approach can still be problematic for users with very low technological literacy. Standardising to the icon approach will work on mobile sites sought out by people who regularly use the web. However, It may cause some issues for users who do not usually use technology but are required by government to use a site. This cohort is actually very large, and is over represented in some service oriented departments. Using the icon is a sane default, but it may not be appropriate at all breakpoints for all sites. The system proposed by DJMyles allows text as well as an icon, which seems like a good solution. As for the label, I would suggest adaptive labels |
@Podgkin Agree and we do already cover labels and hint text here http://guides.service.gov.au/design-guide/components/forms-buttons/index.html#hint-text |
And yes would like to test text as well as an icon for different breakpoints |
Description
a pattern which makes it easy for designers, developers and publishers to construct input / button combination structures across their site.
Additional information
Seeks to address - #460
Definition of Done
npm test
)