One of our current projects has a requirement for a small screen to display some data to the user. In order to down-select which of the sourced screens to use, we’ve had to look at a few characteristics including cost, energy consumption, screen size, and visibility. We have faced the challenge of figuring out how to get an idea of the visibility and effectiveness of the UI without having to actually create functional prototype demos with our screen samples (due to time/budget/effort constraints). Our solution was to execute the designs in Adobe Photoshop. Sufficiently achieving the task was easier said than done, and took a little bit of cleverness.
For the product in question, users will have to read an item name as well as a quantity. With a small screen, the technology and layout will greatly affect the user’s ability to read the content.
Challenge:
We currently have samples of an LCD display, but the demo electronics just show dots to demonstrate contrast. The demo is very tedious to program and customize. Also, we only have one size display, but we are looking at a few size options. We are trying to understand how many characters will be able to fit on each screen size and how readable the display will be from a short distance.
Solution:
Initially we used Adobe Photoshop to create a canvas the same physical size as the screen with the same number of pixels. This can be done either by setting pixel size or adjusting the DPI in image properties. We populated a few layouts with different sizes, but realized what we were looking at would not be accurate enough – the real product would actually look worse. The reason is because the LCD displays to be used are single bitmap, while a normal Photoshop image has dithering and smoothing of pixels. The real LCDs have an actual resolution of about 72DPI.
The solution was to utilize bitmap mode in photoshop. However, there was still a challenge with the fonts: Most fonts on a standard mac or PC are not pixel fonts. To resolve this, we found a good pixel font called ProFontX. The icons had to be created by drawing pixels, although this was not too tedious. Our end result looked much closer to other actual bitmap LCDs. Now, we are able to quickly mockup and compare screen sizes and layouts for the LCD. In order to get an accurate printout, the designs were printed at a very high DPI.
