User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm using a modal window to reveal additional information about a selected item.
There are multiple items, some of which may have more or less information than others. Would it be appropriate to have the modal flex based upon very little information or a lot of information?
There is no problem as such with resizing a modal window, but there are a few points that may speak against it in some curcumstances:
Resizing maybe considered an "unexpected sied effect", and reduce the users feeling of being in control.
The dialog might be positioned near a screen border, resizing it may move parts off-screen and either force the user to drag it back, or force you to make it jump around. (This is still better than forcing the user to resize manually - but only slightly so.)
Automatic resizing may create the impression of having jumped a different dialog, increasing perceived complexity.
Modal dialogs lock you in, they say "before you want to do anything else, complete this."
Keep this lock-in short! A task that requires frequent resizing of its canvas might not be well suited to a modal dialog.
There should be no need to "peek behind" that dialog. It might be the cleaner solution to go with the maximum reasonable size (as @VitalyMijiritsky already elaborated), and accept some blank space in the layout. Blank space isn't bad for modal tasks.
I do see use cases where resizing on the fly still would be useful, or where longer lock-in isn't really a problem. Adjusting the initial size to fit the initial/current content should be fine in most situations.
tl;dr: you can, but think twice if you need to
Our application uses lots of modals of various sizes. After experimenting with many different configurations and use cases, the most sensible solution just evolved.
We make all of our models the same width, 400px, but that should vary depending on your content. All the modals are the same distance from the top of the screen, 10%. The height of the modal is then dynamic, expanding to fit the content appropriately, up to 80% of the window height. When the content has a large amount of text, the modal gets a vertical scrollbar. Some designers may scoff at this last point, but through our user testing this delivered the most consistent, streamlined and intuitive experience.
Other than that, Vitaly's Modal Best Practices link above is also spot on and provides great advice.
It should definitely be the right size for its content, otherwise it seems poorly designed.
One obvious caveat is that it shouldn't be larger than the screen itself:
UX Movement: Modal Windows Best Practices
Don’t make the window size too tall or wide. If your modal window is taller or wider than the user’s screen, they’ll have to scroll to see all of it. This makes it painful for users. It would also cover up most of the main window, making users think that they have left the main window and are looking at a new page. Make your modal windows small, so that it doesn’t cover up the main window and users don’t have to scroll.
In general resizing a modal based on content should be fine. Here is an example from OSX http://screencast.com/t/vaOsT8d5n4e
If you can share more details/sketch, it'll help provide a more specific answer.
