Medical Device Link.

PRODUCT DEVELOPMENT INSIGHT

Return to Article: Design Research Part 1: Creating Better User Interfaces

These illustrations show examples of screen shots of wireframes and visual designs of the same hypothetical medical diagnostic product. Test, data history, and adjustment functions are shown. The input device is shown at the top right of the figure is a commonly used five-way direction pad (typically known as a d-pad).

Column 1 illustrates how the interface works. This is a tool the design team might use internally to explain the idea. It is not intended to be shown to users.

(click to enlarge) Wireframes and visual designs can be helpful tools to test screen concepts in the field.

Column 2 is a wireframe version of the UI, created as an interactive flash demo. It allows users to navigate through the functions.

Column 3 and onward shows visual design examples of how the screens might look on the finished product.

The UI shown here is a generalized hypothetical example. Generally, wireframes are made to be interactive and have intentionally simplified graphics. They are often shown to users at sizes larger than intended on the product. A large size enables users to focus on interaction rather than legibility.

The visual designs show an example of how the UI can be given a specific visual design. This can be shown to users with static screens, preferably at the intended final size on the product. It is shown after the users have tried to navigate through the wireframe version. Only a few visual design sample screens are needed to get the point across about how the UI could look on the final product. Usually, two or three different visual designs are shown for each wireframe concept. This helps the design researchers understand which UI looks best and is understood best by users.