How AMOLED Displays Work and Affect UX/UI Design


With the Samsung Galaxy S8 the most wanted smartphone by adults this Christmas, next-generation AMOLED screen design should be on the minds of designers and developers. Thirty-eight percent of adults and 28 percent of teens want an S8 this holiday season, making UX/UI designs for S8 screens mandatory for forward-thinking designers. AMOLED and Super AMOLED displays are shared by the Samsung Galaxy S8 Plus, S8 Active and other popular Android phones. AMOLED designs affect screen resolution, touch sensors and thickness. Here’s a look at how AMOLED screens work and some considerations designers and developers should take into account when developing UX/UI for smartphone users with this type of screen.

How AMOLED Screens Work

Active-matrix organic light-emitting diode (AMOLED) technology is an advance on the OLED technology that was introduced by Samsung to TV and laptop screens in the 2000s. OLED is in turn an extension of LED technology, so it helps to begin with understanding LED.

Light-emitting diodes work by placing an electron-rich layer of a semiconductor material such as silicon against an electron-poor layer of semiconductor with figurative “holes” where the electrons are missing. Where the two layers meet, there is a neutral area where electrons and holes cancel each other. This is connected to two electrical terminals wired with resistance in only one direction so that the current can only flow in one direction across the junction between the two layers, forming what is known as a diode. When electrons cross the junction, they recombine with electron holes and release energy in the form of photons. This produces light bursts, hence the name “light-emitting diode” (LED).

Organic light-emitting diode (OLED) screens work similar to LED, except instead of using two layers of traditional semiconductors, they use organic semiconductors containing carbon compounds to form a pair of layers with opposite charges. The result produces a photon-emitting effect similar to LEDs. Colored light can be produced by adding a colored filter between the organic semiconductor and the screen’s glass or plastic. Combining thousands of red, green and blue OLEDs next to each other enables them to be switched on and off independently, creating an appearance like pixels on a liquid crystal display (LCD) computer screen.

Active-matrix organic light-emitting diode (AMOLED) technology adds another feature to OLED screens. The active-matrix component refers to a thin-film-transistor (TFT) layer that contains a storage capacitor. The capacitor enables the screen display to retain states of pixel lines, instead of only changing one line at a time. This enables AMOLED screens to support larger size displays and higher resolutions. AMOLED also refreshes faster than standard OLED, improving screen response time while consuming less power.

Finally, Super AMOLED takes this one step further with a more sophisticated touch sensor system. In AMOLED displays, touch sensors are placed in a separate layer above the display screen. In Super AMOLED, touch sensors are embedded directly in the screen.

How AMOLED Affects Resolution

For designers, an outstanding feature of AMOLED screens is their superior resolution for displays of blacks and of contrasts of dark and light colors. OLED and AMOLED screens share superior display of blacks and contrasts as compared to LCD screens. This is because LCD screens rely on a backlight to illuminate liquid crystals, so they have to cover up backlit areas in order to create dark spots, making blacks look gray and making contrasts look dim. In contrast, AMOLED illuminates every pixel on the screen so they can create blacks by simply blocking target pixels from receiving light. This generates true, inky blacks and a more vivid contrast of dark and light colors. There are also variations of AMOLED, some with higher resolutions than others.

For designers, this means that sites and apps designed for AMOLED screens can take advantage of blacks and contrasts. However, you should also be aware that overdoing this can lead to oversaturation. Also, bright colors can drain batteries faster. For best results, test how your site or app looks and functions on a smartphone with an AMOLED screen such as the Galaxy S8 Plus.

AMOLED, Touch Sensors, and Screen and Phone Thickness

Another notable feature of AMOLED which distinguishes it from OLED as well as other screen types is its built-in touch sensors. The fact that sensors are built in allows screens to be thinner and lighter and therefore larger. Phones can likewise be thinner. This allows manufacturers to make screens bigger without adding weight to the phone. Some screens now even curve around the edges of phones to maximize screen size. Test your app or site on actual devices to see how they appear on user screens.