Input group style and examples

AusDTO / gov-au-ui-kit

MOVED TO https://github.com/govau/uikit/

https://github.com/govau/uikit/

MIT License

19 stars 12 forks source link

Input group style and examples #461

Open DJMyles opened 7 years ago

DJMyles commented 7 years ago

Description

a pattern which makes it easy for designers, developers and publishers to construct input / button combination structures across their site.

Additional information

single class in surrounding container
default button to the right
reverse class for button to the left
removes margining and appropriate border

Seeks to address - https://github.com/AusDTO/gov-au-ui-kit/issues/460

Definition of Done

[ ] Content/documentation reviewed by Julian or someone in the Content Team
[ ] UX reviewed by Gary or someone the Design team
[ ] Code reviewed by on(https://docs.google.com/spreadsheets/d/1B8pGWSiFbWhurnDISvD2MKnI0IF_T8tU2sl1naZCw1E/edit#gid=1030964576)e of the core developers
[ ] Acceptance Testing
- [ ] [Cross-browser tested against standard browser matrix]
- [ ] Tested on multiple devices (TBD)
- [ ] HTML5 validation (CircleCI)
- [ ] Accessibility testing & WCAG2 compliance (npm test)
[ ] Stakeholder/PO review
[ ] CHANGELOG updated

gazhands commented 7 years ago

Be good to get everyones thoughts on site search using this kind of patten? search

gazhands commented 7 years ago

Bit more flexible on mobile

AndrewArch commented 7 years ago

@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

gazhands commented 7 years ago

@AndrewArch Maybe follow this approach for the text? http://guides.service.gov.au/design-guide/components/forms-buttons/index.html#hint-text

gazhands commented 7 years ago

https://designpatterns.hackpad.com/Search-buttons-mfVImR30c7G

AndrewArch commented 7 years ago

'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

lreichelt commented 7 years ago

@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?)

Podgkin commented 7 years ago

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

gazhands commented 7 years ago

@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

gazhands commented 7 years ago

And yes would like to test text as well as an icon for different breakpoints