1

I have a doubt whether some component for ex: search bar should remain at the same position when you switch/toggle between views or it can vary as view changes?

For reference I have added 2 images:

enter image description here

enter image description here

In addition to this can the position of search bar change when you switch to different tab? or does it have to remain in the same position throughout all tabs?

For reference

enter image description here

enter image description here

Improve this question

3 Answers 3

Reset to default
3

It should stay the same. If elements switch positions it just makes it harder for the user to interact.

Good design will keep this in mind so elements don't look lost/displaced by keeping them on the same spot on multiple views.

Improve this answer
0

There are also instances where, for lack of space, you will collapse a menu or toolbar. In this case, the principle of "keeping the element in the same spot" still holds. So, if the full menu began on the top right, then the collapsed menu "hamburger" should also be on the top right. It's also not a good idea to break standard mobile interactions so when users see the menu, it highlights and functions like all other mobile menus.

Improve this answer
2
  • Could you please edit this question as of to make it more like an answer to the question asked.
    – Kishan
    Feb 15, 2018 at 18:41
  • @dr. d could you elaborate? The answer is not very clear.
    – NB4
    Feb 16, 2018 at 4:01
0

This will depend on how you expect users to interact with the UI. Changing any element in the UI unexpectedly will increase friction/anxiety and also memory retention of where things are. Element position is also communicating with your user.

Does search function changes depending on the view? is it global or view related? You could move search outside of the view specific area so it won't be affected by layout changes. If the search is specific for that section or area, make sure to make it prominent enough so that a placeholder can be read easily on the input box, that should be the minimum size needed to provide enough context for the user.

Improve this answer
5
  • yes, here search is view related. So the problem I'm facing right now is maintaining consistency & position of the search bar. Since in my design there are 3 variants for container a)700 b)980 c) 1080px. In such cases how do I maintain consistency without disturbing/ changing the design of search bar for different screen size?
    – NB4
    Feb 27, 2018 at 11:02
  • @NB4 Is there a reason the search bar has to be fully expanded? Do you have any requirements for vertical spacing? If not, stacking would maintain consistency, right?
    – ghislaineguerin
    Feb 27, 2018 at 11:38
  • I want to make the view related search to be prominent. Which vertical spacing are you talking about? Can you elaborate the last point?
    – NB4
    Feb 27, 2018 at 11:51
  • Making the search bar always take the entire width. If the elements are stacked you wouldn't need to modify it's position or size, right?
    – ghislaineguerin
    Feb 27, 2018 at 12:03
  • where will I stack it?
    – NB4
    Feb 27, 2018 at 12:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.