Friday, October 9, 2015

research - Is viewport size a useful design constraint, and how are viewport sizes distributed?


I'm trying to support or falsify the hypothesis that desktop browser viewport size is distributed multimodally (that is, with "peaks" in the distribution that might make for useful website design constraints).


Is there any serious research that's been done on desktop browser viewport sizes - whether and when users maximise windows, how users interact with large monitors, and any data that might help with this?


To specifically tackle one aspect of this question: how related are viewport sizes to screen resolution?



Answer



"...how related are viewport sizes to screen resolution?"


This is an interesting question. This answer is probably a good starting point to get the information you're looking for.



I don't have any empirical data to support this, but I imagine that viewport size and screen resolution diverge as screen resolution increases. And there's probably a distinct range of screen resolutions that this divergence kicks in at.


For example, on smartphones and tablets, from what I've seen windows always take up the entire screen. So with these lower-resolution devices, screen resolution ~ viewport size. For data on the distribution of screen resolution (and thus approximate viewport size) among Android and iOS smartphones and tablets, see the 'Resolution' section toward the end of http://opensignalmaps.com/reports/fragmentation.php.


With a large desktop monitor, viewport size can obviously be much smaller than screen resolution. However, I just walked around my office, and the overwhelming majority of people had their browser window maximized.


As for when users maximize their browser window, I think users tend to do that when they're in a fluid UI flow/quickly responsive interface, and/or when they're focused on the application. For example, if users are waiting for over a few seconds for some action to complete, they might resize their browser window to give room for an IM client to chat with others to pass the time. Conversely, if the user is doing work in a non-browser application (e.g. a spreadsheet editor), the browser might be the application users expand to, say, half of the available screen width while waiting for some operation on their application of main concern to complete.


So the relation between viewport size and screen resolution might depend slightly on what your application represents for the user: a way to get their work done, or a place to go for temporary distraction.


Whether users have multiple monitors seems like it would probably also have an effect on the relation between viewport size and screen resolution.


These are mostly just small observations and speculations. Having actual data on this would be much better.


Edit:


"...are there ever any cases where viewport is larger than screen resolution?"


No; viewport size is always less than or equal to screen resolution.



The CSS 2.1 specification states that the viewport is "a window or other viewing area on the screen through which users consult a document", or, in other words, the visible area of the document. And screen resolution is the total width and height of the user's screen. A screen's visible area is always constrained by the screen's width and height, so screen resolution sets an upper bound on viewport size.


A web browser's viewport is almost always smaller than the user's screen resolution. For example, even when a browser window is maximized, the viewport is within the browser's chrome (the borders and widgets like the scroll bar and address bar that frame the document in the browser window). Browsers like Chrome and Firefox have sought to minimize the difference between screen resolution and viewport on their desktop products over the past few years. The viewport is also almost always smaller on mobile browsers, too. In both iOS and Android, an OS system tray (showing notification icons, battery charge level, time, etc.) is always situated on top of the browser viewport. I'm less familiar with IE in Windows Phone 7, but this picture shows it has some browser chrome below the viewport.


Browsers' viewport size is almost always smaller than screen resolution. On desktop browsers, the only case where viewport size and screen resolution would be equal would be when the user is viewing the browser in full-screen mode, for example when watching a video, doing a presentation with their screen forwarded to a projector, or maybe playing a game.


Because visual real estate is so valuable on mobile devices, they'll probably continue to be on the leading edge in the trend toward minimizing the difference between viewport size and screen resolution by doing away with displaying browser chrome, OS system trays and the like by default.




And going back to your original, base question:


"I'm trying to support or falsify the hypothesis that desktop browser viewport size is distributed multimodally..."


The bar chart below, created from data at http://gs.statcounter.com/#resolution-ww-monthly-201111-201204-bar, shows that the worldwide market share of desktop screen resolution is multimodal. Note the peaks at 1024 x 768, 1280 x 800 and 1366 x 768.


Market share of desktop screen resolutions, 11/2011 through 4/2012


The fact that desktop screen resolution is multimodal doesn't necessarily mean that desktop viewport size is multimodal, but given my points above I think this is some indirect evidence that it often is.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...