Epson

Epson hired Rareview to design touchscreen interfaces for their commercial line of printers.

The new printer interface works on the device as well as on Desktop computers.

Designing a new touch interface for a global brand.

We partnered with Epson to re-design the interface on their commercial line of printers. From screen gestures to touchpoints, to subtle intricacies, the new interface is modern, sleek, and cool. 

Initial research and wireframes.

Prior to beginning this project, our team spent several weeks researching the entire Epson product line. It was imperative that we understood how their current products worked, how their interfaces were designed, and the pain points.

Our research led to several important conclusions:

Simplicity.

  • Simplicity is the quality of being natural, plain and easy to understand. It is not surprising then that simplicity is often thrived for in user interface design. Most people naturally dislike complexity in devices and software. For most of us, being unable to operate a device leads to wasted time and frustration.
    If you can take a complex device or a piece of software and somehow rearrange, reorganize and redesign the interface to make it easy to use and understand, then you’re well on the way to delivering a better user experience.
    Every feature and every interface element you add should make sense and add real value to your product. More features mean more controls and content. More controls and contents make it harder to make the interface simple and clutter-free.
    An expertly designed interface—one that exceeds user expectations—gets out of the way and lets the experience take center stage so the user can achieve their task unhindered. 

UX/UI Design.

  • Display what is relevant to the user within the context of the situation; give the user the information they need to take the appropriate action.
  • Design interfaces to be familiar.
  • Design is about solving problems, and user experience design is really just a shorthand way of stating that something should be designed around the user’s goals and their psychological, physical and contextually-defined limitations.
  • Learn to say no. Many bad experiences come out of not being able to decide on which features are most important and therefore just including them all. This is not what your customers want from you.
  • Your users should be able to naturally and comfortably interact with your device. If a gesture is uncomfortable or too repetitive, the experience won’t be great for users. 

Human Machine Interfaces. (HMI’s)

  • Touch screen interfaces are one of the most common examples of NUI in action. Your fingers and thumbs are your direct link to your device, and the interfaces should be designed with them in mind. Touch targets should be large enough to respond to your finger with enough space to avoid accidentally selecting nearby links. 
  • An embedded display offers the chance to give a product (and maybe even the company) a new face. Home appliance LCD and touch screen HMI development is in its infancy, so here’s a chance to create a new HMI that is exciting and full of features. 
  • What is “smart” depends on the product and the tasks that are routinely performed. Consider tasks performed by new users, power users, everyday users and occasional users. Keep these as a prioritized list and then create the weighted blend that best accommodates your target audiences. 
  • Take a few field trips to electronics stores or automotive dealerships. Get a feel for how customers are interacting with touch screens. Take notes. Take pictures, and don’t be afraid to draw inspiration from outside your own industry. 
  • A comfortable balance between display size, animation and color depth and the hardware that drives it, is essential. For example, if an animation takes a minute to play through and it is jerky and awkward, customers will not be delighted to wait for it each time. 
  • A picture can speak a thousand words-or the same word in a thousand different languages. An icon offers greater simplicity to a display, as well as savings on memory and translation requirements. 
  • Cluttered screens only cause confusion and user rejection. Instead, plan to present the simplest, most common options first-but arrange for quick access to the innards. 
  • Take the screen size into account and create some rules about maximum objects. For example, on a 7-inch, 800 by 480 display that is intended to be operated at arm’s length, the ideal number of interactive objects is in the single digits. 
  • Establish a minimum touchable region at the beginning of development. For an ungloved male finger, a commonly used minimum touchable size is 0.75 inch squared. If you adopt this rule, that means the minimum dimension of any touchable area (either height or width) should be no less than 0.75 inch. 
  • In addition to the object’s touchable area, a buffer between the areas is required. For a finger-operated 7-inch touch screen operated at arm’s length, leave at least 0.125 inch. 
  • With the minimum size and spacing numbers at hand, one can calculate the maximum touchable areas wide using a formula. The same calculation can be done for the number of elements we can fit vertically. This will give you the maximum number of touchable options that can be presented at one time. These limits are important to know at the outset of the interface design process. 
  • With proper planning and the right HMI development process, one device can have software to support all countries. Simply architect your text labels so that they may be dynamically replaced. 

Heuristics.

Studies by the Nielsen/Norman Group have noted three common design issues for touchscreens:

  • Inconsistent interaction design, preventing users from transferring their skills from one interaction to the next. When this design flaw exists, users do not know what has happened or how to replicate a certain action to achieve the same result again. In the worst case, users may not know how to revert to the previous state because there is no consistent undo feature or Back button across applications.
  • Inaccurate selection, or fat fingers. Screens for touch devices are smaller than typical desktop monitors. Their small target areas create a problem in designing mobile applications. Although touching a screen is simpler, it is less precise than clicking with a mouse.
  • Lack of navigational aids such as a visible Home icon or a search box. A Home icon is an important landmark for users. Being easily able to go back to the home page gives a sense of predictability and control to users. Having a visible search box can dramatically improve the success of users looking for a specific piece of information. Unfortunately, designers often sacrifice these common desktop aids to save real estate on mobile interfaces.

Touchscreens.

  • Nokia often insists that 7 millimeters is a fine size for touch targets, and so does Microsoft—but they also say that there should be 2-millimeter gaps between targets. Other guidelines vary. ANSI/HFES 100-2007 recommends a button size of at least 9.5 millimeters.
  • There are, in fact, three facets of touch targets that we must understand and consider when designing touch interfaces:
    • designing visual targets
    • designing touch targets
    • preventing interference errors
  • Always design visible targets to display multiple states. Many errors arise from minor delays in responsiveness. If users don’t get immediate feedback that a tap was successful, they will assume a miss and try again. As soon as a device accepts a touch, the visible target should change to an active state that is clearly different from its default state. 
  • Calculations of angular resolution and distance indicate that a 6-point (pt), or 2.1-millimeter (mm), font size is generally the smallest that allows readability.
  • Icons should not be smaller than about 8 points, or 2.8 millimeters, unless they directly reinforce the text—for example, an indicator that a link loads a page in a new window. People with low vision need larger visual targets.
  • Never place buttons with catastrophic consequences—or even just hard to undo results—near those that have trivial results. 
  • Minimum font sizes must meet three criteria: the text must be readable, legible, and tappable. 
  • Calculations of angular resolution and distance indicate that a 6-point (pt), or 2.1-millimeter (mm), font size is generally the smallest that allows readability. 
  • Icons should not be smaller than about 8 points, or 2.8 millimeters, unless they directly reinforce the text—for example, an indicator that a link loads a page in a new window. People with low vision need larger visual targets.
  • Never place buttons with catastrophic consequences—or even just hard to undo results—near those that have trivial results. 

Touchscreen design guidelines.

  • Determine the size of each visual target and touch the target.
  • Evaluate touch targets for possible interference errors. If small targets are too close together, adjust their size and spacing.
  • Determine the consequences of accidental taps on adjacent targets. If they’re severe, protect users from them by rearranging targets or placing them further apart.
  • Allow natural gestures.
  • Minimize the interaction cost of tapping, typing, and moving between screens.
  • Offer user feedback via simple animations.
  • Make it easy-to-decipher which elements are tappable, and make targets easy to tap.
  • Offer legible text and graphics.
  • Minimum sizes for visual targets on various device sizes:
    • 3.5–5” Screen (Phone Size): 6pt/2.1mm Text, 8pt/2.8mm Icons
    • 9–10” Screen (Tablet Size): 8pt/2.8mm Text, 10pt/3.5mm Icons
  • Touch Targets:
    • minimum: 17pt/6mm
    • preferred: 23pt/8mm
    • maximum: 43pt/15mm
  • Spacing Between Targets to Avoid Interference Errors:
    • minimum: 23pt/8mm
    • preferred: 28pt/10mm

Style guide.

As part of this project, our team worked tirelessly to create a full style guide for all elements in the interface. From colors to fonts, icons, sliders, and buttons — the style guide covers all aspects of UI design elements.

Next Up

SWELL