Should you design for the transition period of resizing the window

Question

The big trend (rightly so) in web design right now is making your website responsive. Meaning that your pages will look good on any size screen. As a ux/ui developer I always initially test my pages by grabbing the side of the window and resizing it to see how the page reacts. Depending on your content and its priority to different size screens you may sometimes have to make drastic changes in your layout occurring as the page scales down. For example lead images may disappear completely, nav bars may collapse and float to a different part of the page, unordered lists may get transformed into drop down lists, etc.

Whats the problem?

When resizing the window and watching your page adapt some of these changes may be confusing. If you weren't paying attention for a split second you won't notice the navigation bar you've been using this whole time turn into a hamburger menu in the corner. It also may be a little disorienting, the hiding and moving of elements may cause flickers or shifts on the screen that make you lose track of them.

How to handle it?

So I was wondering how important is it to design not only for users landing on certain screen sizes (mobile, desktop, etc.) but the users that resize after page load. Should you ease elements in and out with transitions, provide some blink/impact animation when the elements lands in its place so users see it, some indication that you hit a breakpoint and the layout is different? Or will average users not pay attention to the transition period and only care about the page layout when it's stationary.

Answer 1

I think this is something that should be deprioritized. It's definitely a nice-to-have, but you have to way it against other variables:

• how may users resize their browsers drastically on a desktop?
• of those users, how many are truly confused by the reflowed layout?
• how much time and money will it take to add these transitions? Will this affect time and money spent elsewhere where it could have a bigger impact?
• does the implementation of these additional transitions add to the bandwidth being used up? Is that worth it?

Answer 2

I think the first thing to do is find out if your users actually resize windows. As designers and nerds, we tend to try this out to evaluate responsive design, but many users do not. This isn't to say that "normal" users (or your users) don't use multiple browser sizes, they just might use fullscreen/half screen versions only, or something like that.

The second question is whether there are meaningful things you can communicate with these transitions/animations. This is possible—maybe you want to let the user know that a sidebar is now accessible off-canvas by having it peek onto the screen. Keep in mind that the design should stand on it's own at any point in the responsive layout... you don't want to count on the user being familiar with the 1920px version in order to use the 1024px version. If the animations/transitions still have something to add, consider question 3:

Are the transitions/animations helpful, or just cool? Delight and creativity are more important for some kinds of web sites/apps than others, but will always fall behind performance and overall usability as you are prioritizing what to build.

tl;dr: If it's useful, won't hurt performance, and you have the dev resources, go for it!

Answer 3

Most users don’t resize their windows that often. So: a definite No, there is no need to fiddle with all this animations.

But: Some users do. So, some animations might be of help — drastic changes (like disappearing or complete different navigation) could (and should) be accompanied by an animation. The animation has the only purpose to help orientation, not to impress. Users want to use the website (read it or do something there), not staring at animations and playing with the resizing.

So the best way would be to add at the end the few animations to the crucial changes. And by animating e.g. the navigation bar or another prominent element the website signals that it is rearranged, and the user is prepared for the different locations of all other elements (whether animated or not).

Answer 4

My short answer is yes, but it is not something you should stress to much over. While most users will have the screen maximised on their device (be it 4k, 1080p, 1024x768 or 320x480 resolutions) there is a chance that they will not have the browser maximised (although this is likely to only happen on a desktop computer).

Unfortunately you can't also rely fully on just resizing the width of the screen. I've seen an issue in chrome where I can shrink than expand the width (to the same width) and it looks different (although a full refresh tends to fix it).