• CEPro_logo_blue-new
  • TOPICS
      • News
        • People & Places
        • Product Briefs
      • Projects
      • Events
      • Control
        • Central Vac
        • Energy/Power
        • HVAC/IAQ
        • Interfaces/Devices
        • Lighting
        • Motorized Shades
        • Whole House Systems
      • Audio/Video
        • Audio/Video
        • AV Accessories
        • AV Racks
        • Cabling
        • Displays
        • Furniture
        • Headphones
        • Home Theater
        • Media
        • Mounts/Lifts
        • Multiroom AV
        • Projectors/Screens
        • Speakers/Subwoofers
        • Wireless AV
      • Security
        • Access Control
        • Alarms/Sensors
        • Services/Platforms
        • Surveillance/Cameras
      • Business Support
        • Associations/Buying Groups
        • Cell Phone Boosters
        • Distributors/Reps
        • Operations
        • Recurring Revenue
        • Research
        • Sales/Marketing
        • Software Services
        • Tools/Testers
      • Networking
        • Cellular
        • Devices/Equipment
        • Wireless
        • Wired/Installation
      • Markets
        • Builders
        • Commercial
        • Design
        • Europe
        • Outdoors
        • Resimercial
        • Wellness
      • CE Pro Hub Pages
        • Bose
        • Savant
        • Inside Sound United
  • PRODUCTS
  • RESOURCES
    • Reports/Downloads
    • Buyer’s Guide
    • Webcasts
    • Podcasts
    • Integrator Jobs
    • Digital Edition
    • CE Pro-iQ
  • SUBSCRIBE
    • CEDIA SHOW UPDATES
    • CEPRO PRINT EDITION
    • CEPRO DIGITAL EDITION
    • CEPRO NEWSLETTERS
  • DISCOVER
    • CEDIA Expo
      • September 29 – October 1
        Dallas, TX
      • VISIT SITE
    • KBIS
      • February 8 – 10
        Orlando, FL
      • VISIT SITE
    • Total Tech Summit
      • October 26 – 28
        Orlando, FL
      • VISIT SITE
    • Commercial Integrator
      • VISIT SITE
    • Security Sales
      • VISIT SITE
    • Tech Decisions
      • VISIT SITE
    • Campus Safety
      • VISIT SITE
    • Design Well
      • VISIT SITE
    • KBB Online
      • VISIT SITE
    • AV-iQ
      • VISIT SITE
    • CE Pro-iQ
      • VISIT SITE
  • Search
  • TOPICS
    • News
      • People & Places
      • Product Briefs
    • Projects
    • Events
    • Control
      • Central Vac
      • Energy/Power
      • HVAC/IAQ
      • Interfaces/Devices
      • Lighting
      • Motorized Shades
      • Whole House Systems
    • Audio/Video
      • Audio/Video
      • AV Accessories
      • AV Racks
      • Cabling
      • Displays
      • Furniture
      • Headphones
      • Home Theater
      • Media
      • Mounts/Lifts
      • Multiroom AV
      • Projectors/Screens
      • Speakers/Subwoofers
      • Wireless AV
    • Security
      • Access Control
      • Alarms/Sensors
      • Services/Platforms
      • Surveillance/Cameras
    • Business Support
      • Associations/Buying Groups
      • Cell Phone Boosters
      • Distributors/Reps
      • Operations
      • Recurring Revenue
      • Research
      • Sales/Marketing
      • Software Services
      • Tools/Testers
    • Networking
      • Cellular
      • Devices/Equipment
      • Wireless
      • Wired/Installation
    • Markets
      • Builders
      • Commercial
      • Design
      • Europe
      • Outdoors
      • Resimercial
      • Wellness
    • CE Pro Hub Pages
      • Savant
      • Bose
      • Inside Sound United
  • PRODUCTS
  • RESOURCES
    • Reports/Downloads
    • Buyer’s Guide
    • Webcasts
    • Podcasts
    • Integrator Jobs
    • Digital Edition
    • CE Pro-IQ
  • SUBSCRIBE
    • CEPRO PRINT EDITION
    • CEPRO DIGITAL EDITION
    • CEPRO NEWSLETTERS
    • CEDIA SHOW UPDATES
  • DISCOVER
    • Cedia Expo
      VISIT SITE
    • Commercial Integrator
      VISIT SITE
    • Security Sales
      VISIT SITE
    • Tech Decisions
      VISIT SITE
    • Campus Safety
      VISIT SITE
    • Design Well
      VISIT SITE
    • Total Tech Summit
      VISIT SITE
    • KBB Online
      VISIT SITE
    • AV-iQ
    • CE Pro-iQ
M
POPULAR SEARCHES
News
Projects
Control
Audio Video
Security
Business Support
Markets
SUBSCRIBE CEDIA EXPO CEPro-iQ
Design | Interfaces/Devices | News
October 12, 2020

7 Mistakes to Avoid in User Interface Design

New book outlines the art of designing the perfect user interface, including size, shape, 'padding,' spacing, shadows and more for pushbutton icons.
Jason Knott  

The standard rectangle shape is preferred for UI icons versus other geometric or oddball shapes.

Article:
Design | Interfaces/Devices | News
October 12, 2020

7 Mistakes to Avoid in User Interface Design

In smart home control user interface design, a pushbutton icon is more than just a simple button. It’s everything. A single icon can often be the centerpiece for controlling light, intrusion security, surveillance cameras, audio, video, motorized shades and more. If that icon is unattractive and poorly designed, it can lead to dissatisfaction with the entire control solution, not to mention damage the integration the company’s reputation.  

Of course, most UIs today have a standardized design from the manufacturer, but on occasion integrators are still asked to design custom UIs for their clients. Sports-themed and college alumni themes are anecdotally common.

But is there an art to designing the perfect touchpanel icon pushbutton? Yes, according to a new book “Designing Interfaces” by Michael Malewicz, a designer with over 20 years of experience in building digital products.

In the book, Malewicz specifically digs into the importance of user interface design, particular with action-oriented buttons. The primary focus of the book is related to ecommerce websites for online retailers, where the user interface design of that “save” or “purchase” pushbutton can make or break a company. For integrators, many of the same principles apply for the design of their clients’ smart home control systems’ touchpanels and on-screen displays.


7 UI Mistakes to Avoid


Mistake #1: Making a Pushbutton Not Look Like a Pushbutton

“Digital buttons are also descendants from real-world buttons, like on a TV remote, record player, or game controller,” says Malewicz. “The most important thing to know is a button should look like a button, and the most important rule for designing a button is to make it stand out enough so it won’t be confused with anything else. By removing elements from a button its function starts to dissolve and disappear. It becomes decoration or text, losing its actionable qualities.”

CE Pro 2022 Product Guide

CE Pro's 2022 Product Guide showcases some of the latest and innovative solutions from manufacturers serving the custom electronics industry in a cross-section of categories.

Download the guide now!

Mistake #2: Using Odd-Shaped Icons

“We are used to certain shapes and forms that are normally associated with an action,” says Malewicz. “The more our button looks similar to what we associate with buttons, the better.”

Because of this rule, he says a rectangle (or a rounded rectangle) is always the safest choice for a pushbutton because it is immediately identifiable as an action-inducing button compared to other shapes such as triangles or circles. He advises only using those shapes when the style requires such deviation. According to Malewicz, any element that forces the user to take more time to determine what the button is for, will inhibit the action.

Mistake #3: Ignoring the ‘Safe Space’ & ‘Padding’ Ratios

Of course, the spacing between the icons, dubbed “safe space,” on a touchpanel is important. Too close together doesn’t look appealing. But Malewicz also says the spacing of the terms inside the button itself is important, called “padding.”

The action term (i.e., “TV” “Music” “Lights”) should be evenly spaced within the button itself. He says there is an advisable ratio between the vertical and horizontal padding inside the button. The spacing to the left or right of the word inside the button should be 2X the space on the top or bottom. Also, the terms should always be centered inside the button.

Mistake #4: Making Buttons Too Big or Too Small

Just like Goldilocks, your UI icons can’t be too big or too small, but “just right.” But in general, larger is better.

“Both web and mobile buttons should also have the right minimum size. If your buttons are too small, it will be difficult to tap or click on them. The best way is to start with 44 x 44 pixels for all interactive elements on mobile devices,” advises Malewicz. “The sweet spot is somewhere around 50 pixels for mobile buttons. In the case of cursor-based devices, 32x 32 pixels should also work.”

Mistake #5: Not Using Icons for Important Buttons

‘Important buttons also work well with icons,” says Malewicz. For example, including the icon for a TV, along with the term “TV” is a good idea. Similarly for other important functions like “Security,” “Lights,” or “Shades.”

Mistake #6: Not Using Shadows

“Buttons with shadows are also more ‘clickable’ and noticed much faster than flat ones,” says Malewicz. “Add a subtle drop shadow in the button to make it stand out from the background more.”

Mistake #7: Rounding the Corners Too Much

Malewicz says rounded corners are considered more desirable in general, but if you round the much, it is less appealing, especially if you are aligning buttons vertically on the touchpanel or on-screen display.

“If you have left-aligned text just above the button, the more rounded the corner the less that text will visually fit — it’ll make you feel as if the left margin is in two places at the same time,” he adds. “When you start building out your primary, secondary, and tertiary buttons, try to remember to check them against a couple of factors every time.”

ABOUT THE AUTHOR

Jason Knott
Follow
Jason Knott:
Jason Knott is Chief Content Officer for Emerald's Connected Brands. Jason has covered low-voltage electronics as an editor since 1990, serving as editor and publisher of Security Sales & Integration. He joined CE Pro in 2000 and serves as Editor-in-Chief of that brand. He served as chairman of the Security Industry Association’s Education Committee from 2000-2004 and sat on the board of that association from 1998-2002. He is also a former board member of the Alarm Industry Research and Educational Foundation. He has been a member of the CEDIA Business Working Group since 2010. Jason graduated from the University of Southern California.
View Jason Knott's complete profile

ARTICLE TOPICS

Design • Interfaces/Devices • News

ARTICLE TAGS

SHARE

Share On Facebook
Share On Twitter
Share On Linkedin
Share On Whatsapp
Share Via Email
Copy URL
← Previous Article Next Article →
Article Business SupportNewsSoftware/Services

Portal API Integrates with iPoint

Portal.io opens its API to other business management software solutions, and announces its first integration is with iPoint.
Article Audio/VideoDesignLightingMotorized ShadesProjectors/ScreensSpeakers/Subwoofers

Technology Has Become an Interior Design Statement All Its Own

From LED light fixtures to loudspeakers to shades, access control and keypads, to solutions used as ways to conceal technology, design was on everyone’s minds at the recent CEDIA Expo in Dallas.
Article Business SupportNewsSoftware/Services

Portal API Integrates with iPoint

Portal.io opens its API to other business management software solutions, and announces its first integration is with iPoint.
Article BuildersControlEnergy/PowerHVAC/IAQNewsSoftware/ServicesWellness

Sendal and Schneider Electric Partner on Better Home Air Quality

Sendal’s newest Breathe solution helps address indoor air quality in more challenging energy-efficient builds.

SHOW NEWSLETTER

Sign Up

CE Pro

Subscribe Sign Up

Content Types

News
Products
Projects
Companies
Downloads
Webcasts
Podcasts
Events

Specials

IntegratorJobs
CEDIA EXPO
CE Pro 100
CE Pro Summit
Awards Programs

Company Info

About
Contact Us
Customer Service
Media Solutions & Advertising

Subscribe

Magazine
Newsletters
Digital Edition

Connect

Twitter
Facebook
LinkedIn
YouTube
RSS Feed

Categories

AUDIO/VIDEO
AV Accessories
AV Racks
Amplifiers/Receivers
Cabling
Displays
Furniture
Mounts/Lifts
Multiroom AV
Projector Screens
Speakers/Subwoofers
Wireless AV
CONTROL
Central Vac
Energy/Power
Interfaces/Devices
HVAC/IAQ
Lighting
Motorized Shades
Whole-House Systems
NETWORKING
Cellular
Devices/Equipment
Wireless
Wiring/Installation
SECURITY
Access Control
Alarms/Sensors
Services/Platforms
Surveillance Cameras
BUSINESS SUPPORT
Associations/Buying Groups
Distributors/Reps
Operations
Recurring Revenue
Research
Sales/Marketing
Software/Services
Tools/Testers
MARKETS
Builders
Commercial
Design
Europe
Outdoors
Wellness
FOLLOW US ON
  • Follow
  • Follow
  • Follow
  • Follow
  • Follow

© 2023 Emerald X, LLC. All Rights Reserved.

  • ABOUT
  • CAREERS
  • TERMS OF USE
  • PRIVACY POLICY