Tag Archives: web

It’s All About the Interface

Jan 23, 2012

Round about 2000, I stumbled across a software project that restored my will to live. The MAME project was developing software that made it possible to run old arcade and console games on any platform — in simple terms, I could download their free software and run old arcade games on my PC. I grew up on these games, and had been very saddened by their disappearance over the previous years.

Of course, as with most things, the situation wasn’t as simple as downloading and installing some software — for one thing, MAME provided the emulation software to make all this possible, but not the games themselves. Finding games (and games with proper licensing) proved to be a challenge. But by far the bigger challenge was with the physical interface between software and user.

Tempest Wheel

Robotron Controls

Arcade games came equipped with a dizzying array of joysticks, buttons, and flywheels, and in many ways the games were designed with particular physical interfaces in mind. Try playing Tempest without a heavily weighted flywheel, and you’ll be sorely disappointed in the results.

Try playing Robotron with a keyboard instead of two joysticks, and you’ll be cursing at the computer screen in no time.

I speak from experience.

The solution — one I never undertook myself — is to build a control panel for your MAME emulator. If the computer keyboard and mouse don’t provide you with a good enough interface, build your own! Lots of people have done it. Check out this homemade rig:

MAME + Ubuntu!

The Right Interface

The lesson I take from this is simply that sometimes the right interface can, regardless of all of the wonderful features of a piece of software, hardware, or website, be the difference between a great user experience and a terrible user experience. While simple, I do believe that it is an oft-overlooked bit of wisdom.

Your website might hold the secrets to eternal life and happiness, but if users have to click more than two or three times to get to that information, your site will quickly be dead to them. If you’re building a new website, don’t rely on yourself to see if the paths to your information are good ones. Get people who aren’t familiar with the site to browse through it and see how they manage.

Your software might be the most useful programs in the world, but if it’s not also one of the most useable, you’ll have a difficult time selling copies of it. Again, good interface design and testing are paramount here.

Your hardware might do incredible things, but if no one can figure out how to use it, no one is going to buy it. Design and test!

Brilliant Interfaces I Have Known

iOS: Obviously, one of the great revolutionary interface schemes of the past decade or eight has been the operating system for the iPhone — iOS and its touch/swipe/tap interface. Scrolling by swiping, opening by tapping, selecting by touching, all has made the iPhone one of the great utilitarian and fun computer devices of all time.

Scrivener: Have you ever tried to use a word processing program to write a book? I have, and it’s not fun. Programs like Word and OpenOffice are good at handling one or two documents of a few pages each, but anything more and it’s an organizational nightmare. Luckily, I found Scrivener — an amazing piece of software that is built with the author and researcher in mind. It allows you to organize all of your research, drag and drop images from other sources, and provides you with a virtual corkboard that makes visualizing your project a breeze. When you’re done, you can export to Microsoft Word so that the poor suckers who don’t have Scrivener can see what you’ve done.

The Hand Blender: Tired of hauling out your huge, unwieldy blender, filling it with food, running it, and pouring it into a bowl? Break out your handy (literally) Cuisinart Hand Blender, and just bring the blender right to the bowl. Brilliant!

Clip to Evernote

On Image Resolution and Quality

Oct 27, 2011

Why do you need to know about image resolution if you are not a professional graphic designer? If you are ever going to print something, put a graphic on the web, or create a PowerPoint presentation yourself, you want to know about resolution and why it matters for quality.

The jargon

First, there are some important acronyms to learn: DPI, PPI, and LPI are measurements that refer to the composition of an image.

  • DPI: Dots per inch. Generally used in printing, this refers to the dots of ink on one line across one inch.
    A 10 × 10-pixel image on a computer display us...

    Image via Wikipedia

  • PPI: Pixels per inch. This term is mostly used for monitors and video production. A pixel is a dot on a video screen.
  • LPI: Lines per inch. This is another print term that is mostly used for half tones and is the measurement of how close together the lines are in the grid.

In print, it takes lots of dots to make an image. In each space, a dot can either be black, or a color. In process printing (also referred to as CMYK), the colors are cyan, magenta, and yellow, and in combination with each other and with black it is possible to create thousands of unique colors. A yellow dot and magenta dot together will produce a tone of red. If you add a cyan dot the red turns to purple.

The quality of a printed image depends on two things: the capabilities of the printer, and the original resolution of the digital artwork. The higher the DPI and LPI, the better the image will look when it’s printed because the dots are smaller and closer together.

Size your images for their use

Don’t confuse image size with file size. The resolution and quality of an image affects file size, and file size can affect effectiveness for a specific use. If you have an image that is high-resolution and large, but reduce it to a small area and put it on your website, it will slow your site load times and possibly discourage visitors. All that extra file size does nothing to help display your image and only slows the loading time for the viewer.

sample image

Likewise, if you use a small image and make it larger in a report, it will distort and become pixelated or fuzzy when you print it. The poor print quality may require throwing away brochures and starting over.

My sample here is 1” square (and may appear a different size depending on your monitor settings), and is 96 pixels x 96 pixels. The file size is a mere 27 kilobytes (27kb) and loads quickly. To print that same image in a magazine or on a brochure, I would increase it to 300 pixels x 300 pixels to keep the size at 1” square and the file size would increase to 263k — almost 100 times larger.

Tools

Adobe Photoshop leads the market in image manipulation and production. However, there are many image editing tools and utilities available, including many shareware or free utilities included with your computer. These utilities generally allow you to crop and size images, and to save them in the most common formats.

One thing that you cannot do with most images is to increase the size and dpi at the same time, while maintaining image quality. There are tools that will “res-up” an image, but they create the missing pixels by sampling the pixels next to the missing area and guessing what the color should be to fill the empty space. (Vector graphics are an exception as they use geometrical shapes to represent images in computer graphics.)

Here is an example of what happens to an image if you try to use it larger than the resolution supports. (The first image does not have sufficient resolution for this size, while the second image is sized appropriately.)

low resolution image increased in size

proper resolution

 

Practical Tips

Print: for printing most things, images should be 300 dpi or greater at the final size. This allows high-quality printing with little distortion. You have probably seen what happens when a web image is used for print — the image becomes fuzzy. Images for newspapers can usually be at a lower resolution of 200 dpi, as the press does not produce as many dots per inch and the paper is lower quality.

Web: Use 72 dpi with the image at size. Any image with greater dpi will be reduced to display at 96 dpi or less. For presentations, you may want to use 150 dpi so your print outs are clear. The display or projector will still only present the images at 72 dpi.

Clip to Evernote