Search pattern


68
views
0
12 months ago by
1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

2 Answers


0
12 months ago by

 

States 1 and 2:
2 inactive states depending on the context.

State 3:
When the search field is in focus, if it is relevant to the context, you can show a:

  • list of recent searches (like Westpac Live's address book search)
  • most popular searches (like Westpac public site's global site search)

State 4:
When the user starts to type, you can auto suggest predefined search terms based off what they have written.

Do we define the micro-transitions? e.g. Behaviour 1 - transforms into a field and button (e.g. do we need to say - pushes the button to the right as the text entry box unfolds from the left for St George and Peeks (rebounds) and slides right for Westpac) - or is this too much detail for a pattern like this?

written 12 months ago by Stephen Cox  

Yes, I think it would be good to define the micro transitions - but for now I left it out intentionally as the transitions might vary slightly depending on what operating system/browser you’re on (not 100% sure though, need to investigate). 

written 12 months ago by Amritah Pathak  
0
12 months ago by
James  

My preferences is 1 with 4

Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Mobile Wallet (AKA Tap n' Pay)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Validation - errors
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Electronic verification
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Off-canvas menu (AKA navigation drawer, hamburger, kebab, shelf menu)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Date input
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Expense splitter
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Next Best Action (NBAs)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Progress stepper
    Link to the audit of existing stepper patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Placeholder text
    Link to the audit of placeholder text patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Personal details
    Link to the audit of existing personal details patterns: https://digital.westpacgroup.com.au/conf...