7

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.)

5
  • 13
    "annoying"? :-)
    – Karen
    Jul 31, 2012 at 18:48
  • 4
    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, 2012 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, 2012 at 23:37
  • maybe add a sample somewhere online that demonstrates
    – Glen Lipka
    Aug 7, 2012 at 14:17
  • 1
    Even SE does this when you get the "An edit has been made" banner. Sep 6, 2012 at 8:10

3 Answers 3

2

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

1
  • 1
    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? Oct 8, 2012 at 10:29
0

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".

2
  • When the reflow happens because of an element offscreen, it's hardly a reveal.
    – kastark
    Aug 1, 2012 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, 2012 at 8:00
0

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....

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.