3

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?

  • 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. – JamesRyan Oct 20 '14 at 11:33
6

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

enter image description here

Now coming to the UX design part, here are some recommendations

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

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

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

Towards A Retina Web

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.