Several of the projects I'm working on are going to be published for both standard and retina displays, plus now we're considering publishing the same applications for 4K and 5K resolution. Has anyone encountered any research that addressed in what ways the resolution increase can affect usability? Are there any major differences in how the UX design and testing should be approached?
1
-
Don't design for 4k displays! I have a big display because I want to look at more pages at once, not so that designers can force a giant font that is so big you can't read it anymore. At the very least understand the window size is important not the screen size.– JamesRyanCommented Oct 20, 2014 at 11:33
Add a comment
|
1 Answer
Note: I am assuming you are talking about web applications here
The more your resolution increases, the smaller your assets are going to look since the assets might have fixed width and height and since the resolution has increased exponentially, the space occupied by those assets would be even more smaller. This is because of the higher pixel density. To quote this article
When the iPhone 4 (Retina iPhone) was released, iOS designers and developers had the task of updating all their image assets to be twice the size. This was because the resolution had doubled from 320x480px to 640x960px.
Although it was not a new concept, this introduced pixel density to many designers and developers. The pixel density was higher because the resolution had doubled and the number of pixels had quadrupled. The Retina iPhone's resolution in reference pixels is still 320x480. They were just jamming 4 pixels where 1 was before — making raster assets look low resolution.
This was Squares website before they thankfully optimized for retina
Now coming to the UX design part, here are some recommendations
- Use scalable vector graphics to design your assets : To quote this article
SVG stands for Scalable Vector Graphics, it is a format that can be used on the web and consists of shapes and paths, with fills, gradients etc. All of the information for SVG files is stored as XML, not bitmap data. So it is completely scalable!
- Use CSS to Render UI Elements : This is because CSS would enable you scale up to any resolution needed.To quote the same articles again
Designers have actually been preparing for an HD web for years. Because using CSS3 to render user interface elements, with properties such as border-radius and box-shadow works in much the same way as vector graphics do. They are completely resolution independent and will display crisp and smooth no matter how much you zoom into them. So wherever possible use CSS properties for user interface elements.
- Target specific screen sizes and resolutions with media queries : This would enable you to provide a customized experience based upon the resolution and ensure the content and the design scales well such that images are crisp and the text also scales well
There a number of excellent articles you should read
How To Prepare for The High-Resolution Web
A guide for creating a better retina web
I also recommend reading this excellent article about how PPI affects your design and why it should be considered depending on the resolutions you are looking at and the form factors of those devices. To quote the article
The amount of pixels-per-inch defines how sharp an image is, the more pixels in a square inch, the more detail. Once a device or display has a high enough PPI, it is considered a high density display.
Generally speaking, a high-density denotes a display with at least 200 pixels-per-inch but this definition is not set in stone. Depending how close or far the device from the eyes greater affects how sharp an image appears. A laptop monitor doesn’t need to have as nearly as high of pixels-per-inch as a cellphone to appear to be a high density display. This is due to the fact most people sit much further away from a laptop screen than they do a cellphone.
Below are examples of 4k PPI at various sizes, common non-high-density display PPI and common high density displays PPI.
Note that an iPhone 3G has a higher PPI than most of the 4k displays and yet it is considered a non-high density display.
4k Pixel Densities at 3840 x 2160
24-inch -185 PPI
28-inch - 157 PPI
32-inch - 140 PPI
39-inch - 113 PPI
50-inch - 88 PPI
65-inch - 67 PPI
