+1-855-848-1332
  • linkedln
  • facebook
  • En | 中文
  • About Us
    • Company
    • Values
    • Management Team
    • Locations
    • Careers
  • Products
    • LCD Displays
    • OLED Displays
    • PRECI-Touch
    • Cover Lenses
    • Fast Track
    • Screen Protectors
  • Markets We Serve
    • Automotive
    • Consumer
    • Industrial
    • Medical
    • POS
    • White Goods
    • Marine & Outdoor
  • News
    • Topical Index
    • Events & Happenings
    • PR Archive
  • Documents
  • Investor Relations
  • Contact Us

News Top Menu

  • Topical Index
  • Events & Happenings
  • PR Archive

User Interface Design for Touch Screen Displays

October 13, 2016

touch screen displaysBy Josh Toland, Business Development Manager for New Vision Display

With projected capacitive touch technology (PCAP) it has become increasingly common to include a capacitive touchscreen in almost every new product that contains a display. Today many, if not most, users expect a device to be touch-enabled and to have an intuitive user experience. When designing software for touch screen displays, any designer should be aware of some best practices.

Know Your Users

Anytime a new product is created, a key part of the design process is defining the target users of the system. You make assumptions about what country the user will be in, what language they will speak, and even with which hand they will touch the display. Let’s assume for this article that you are designing a product for the US English speaking market. By defining this user group you can now assume that when a user looks at a device their eyes will naturally go to the top left corner of the display. You can also assume that about 90% of users will be right-handed.

Navigation

Users do not want to read a manual or have to “figure out” how to use an application. Navigation elements should be kept as simple and consistent as possible. Luckily there has been a lot of research into designing software for mobile devices that has trained the users what to look for.

  1. Use Common Elements
    • Items like navigation bars on top of the screen or a home button require no explanation for a user to understand.
  2. Don’t Hide Navigation
    • Nothing is more frustrating than trying to find a way to exit a page or to go back. Keep navigation elements always available and easy to access.
  3. Minimize Touches/Clicks
    • A goal for any application should be to minimize the number of times a user must touch a button or link in order to accomplish their task.
  4. Provide Visual Hierarchy
    • If possible a visual guide can help a user quickly and easily navigate an application.

Button Size and Placement

There are technical and physical limitations that need to be taken into account when designing a good user interface. The technology is always improving and allowing for more precise input, but the real problem is that the human finger is not. MIT did a study and discovered that the average human fingertip measures roughly 8-10mm. This will naturally limit the precision a finger can have when using a capacitive touchscreen.

  1. How will your device be held?
    • The way a device is held will determine how a user will interact with it. Will they hold it like a tablet and user their thumbs to click or more like a phone and have a free hand and use fingertips to touch.
  2. Gesture Support
    • Depending on the size of your display you may consider gesture support. The larger the display the more a user expects simple gestures like scroll, zoom, and swipe to be supported. If you choose to support these then the UI must have a “no fly zone” to allow the user enough space to perform the gesture without clicking on another navigation element.
  3. Button Size/Spacing
    • Apple recommends that 44pt x 44pt is the minimum size a button should be. Meanwhile, Nokia recommends 7mm and Microsoft recommends 9mm. This data – in combination with the human finger being roughly 8-10mm – is a guideline for minimum sizes. But, there is no guideline for maximum sizes.
    • Some research suggests that if a button is too big a user can overlook the button and not see that it is clickable.
  4. Information Visibility
    • Users don’t have x-ray vision. Be mindful when designing the UI that a user will be blocking portions of the screen with their hands and fingers while trying to click. If they are changing values on the screen, make sure they can still see the data while editing.

Thanks to companies like Apple and schools like MIT there is a wealth of knowledge online about designing user interfaces. Every application is different and every product is different, but there are a number of common design elements that can be used to keep the user experience fast and easy.

References:

  1. User Interface Design Guidelines for Great Experience Design
    1. https://software.intel.com/en-us/articles/user-experience-design
  2. Mobile Web Application Best Practices
    1. https://www.w3.org/TR/mwabp/
  3. An MIT study, “Human Fingertips to Investigate the Mechanics of Tactile Sense,” discovered that an average size fingertip measures 8-10 mm
    1. http://touchlab.mit.edu/publications/2003_009.pdf
  4. Apple iOS Human Interface Guidelines
    1. https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/
  5. Microsoft Windows Phone UI Guidelines
    1. https://msdn.microsoft.com/en-us/library/windows/apps/hh202889(v=vs.105).aspx

Related Topics:

  • Display & Touch System Integration
  • What’s the difference between LCD and OLED displays?
  • Ways to Enhance the Functionality of LCD Displays
  • How to Choose the Right Components for Your Display Module
  • Does Your Product Need a Capacitive Touchscreen?
  • Displays for Medical Applications
  • Requirements for Industrial TFT Displays
  • User Interface Design for Touch Screen Displays
  • Application of Single, Dual and Multi-Touch User Interfaces on Projected Capacitive Touch Screens
  • What Optical LCD Display Module Modes Mean: Reflective, Transmissive, and Transflective
  • TFT LCDs – Driver ICs and Interfaces
  • Glass Treatments for Touch Screens
  • Designing Low Reflectance Touch Panels for Sunlight Readability

question Have a question?

Our experienced staff

is eager to help!


Contact Us

« New Vision Display and Elektrosil at Electronica 2016
New 1.2” Round AMOLED display »

Twitter Feed

  • Meet us at these upcoming tradeshows in 2020! Learn More Here: https://t.co/PkSQsJgmpV #lcddisplay #lcdscreen… https://t.co/fc4jZoJfCZ

    4 weeks ago
    1 Favorite
  • Join us at Embedded World 2020 - Feb 25-27 in Nuremberg, Germany! Hall 1/1-133. Contact sales@newvisiondisplay.com… https://t.co/VRDwAUZw5z

    2 months ago
    1 Favorite
  • @ACTRON_AG now offering NVD PRECI-Touch® sensors based on market-leading @MicrochipTech controllers. Read ACTRON's… https://t.co/nYcxbi8jQn

    2 months ago
    1 Favorite
New Vision Display

1430 Blue Oaks Boulevard
Suite 100
Roseville, CA 95747

1.855.848.1332

About

  • Company
  • Values
  • Management Team
  • Locations
  • Careers

Products

  • LCD Displays
  • OLED Displays
  • PRECI-Touch
  • Cover Lenses
  • Fast Track
  • Screen Protectors

Markets

  • Automotive
  • Medical
  • Industrial
  • Consumer
  • White Goods
  • Marine & Outdoor
  • POS

Other

  • Contact Us
  • Documents
  • Investor Relations
  • Events & Happenings
  • PR Archive
  • Intellectual Property
  • Privacy Policy
  • Terms and Conditions

© 2015-2019 New Vision Display, Inc. All rights reserved.

This material may not be published, broadcast, rewritten or redistributed.

Get a Free Quote