User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

E.g., when reading an article in a feed and an out-of-view div expands or collapses, moving the current article up or down

Alternatively (if included in this definition), when entering text in a search field and an inline drawer slides down with suggested queries, pushing content further down the page—clicking on links anywhere beneath the pushed text will close the drawer upon leaving focus, snapping the page, disorienting the user, and not registering as a hyperlink click, as intended.

Is there an established term or phrase for this issue? (Mainly so I can read more about it.)

share|improve this question
"annoying"? :-) – Karen Jul 31 '12 at 18:48
I'd call it a "layout shift" or more technically it's a Reflow, but Reflow refers to any style update, not just the shift you're describing. Not aware of a formal term for this exact thing though. – Ben Brocka Jul 31 '12 at 18:51
I don't know how it's called but I remember I connected two G accounts I never ever wanted accidentally, when between my mental command for "click" and the actual click an image has finished downloading, triggering a reflow, and also the reposition of a close button to a "connect this account to " or some other such button.There's no undo... I guess it should be part of the UX curriculum: always make your container sizes independent of rendering progress. – Aadaam Jul 31 '12 at 23:37
maybe add a sample somewhere online that demonstrates – Glen Lipka Aug 7 '12 at 14:17
Even SE does this when you get the "An edit has been made" banner. – Andrew Leach Sep 6 '12 at 8:10

I have always heard that being referred to as an accordion element.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

An accordion is often used on navigation, but I have never seen an accordion navigation effect placement on content. Do you have an example of such an accordion? – Benny Skogberg Oct 8 '12 at 10:29

In jQuery the effect often used is slideDown(). However, I don't know of an official pattern name. I sometimes refer to it as a "reveal".

share|improve this answer
When the reflow happens because of an element offscreen, it's hardly a reveal. – dhmstark Aug 1 '12 at 7:41
I think there might have been crossed wired here - the question refers to when out of scope content changes size or shape dynamically causing the in-scope content to also 'shift' without any indication of why – TJH Aug 7 '12 at 8:00

reflow is as good a term as any when talking design. when it does something in particular to ux then you'd need to be more specific. a reflow could cause ux: reveal, obstruct, shift controls unexpectedly, provide level of detail, proportionate resize due to context....

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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