Over a million developers have joined DZone.

Quick UI tip - disabled buttons should be disabled

DZone's Guide to

Quick UI tip - disabled buttons should be disabled

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

This is a simple rule: When a button on UI doesn't do anything or user cannot perform the action at that time it should be disabled. It's a good idea to add a message telling that why the button is disabled and how to enable it if it requires an action from the user (like signing in).

Unfortunately our bad example this time comes from Samsung. They recently release an app for their Unpacked 2011 event. Their app's landing page is actually a very nice example of a nice dashboard implementation. It is visually very pleasing and clear. They do, however, make two critical errors:

Firstly, they hide the status bar. There's absolutely no reason to do it in this app!

Secondly, and even more critically half of the buttons on the dashboard aren't actually active even though they look like they are. What makes it even worse is that the "UNPACKED Live" button looks like the event is happening right now! The icon has text "ON AIR". But when you tap the button you get a popup telling you that it isn't actually on air right now but instead at some point in the future.

Also the "Press Release" and "New Product" buttons take the user to a popup telling that the buttons aren't actually active even though they look like they are.

All this information from the popups should be available inline (there is room) and the buttons should be disabled. Think about the experience from users' point of view. The app's message in all of these cases is like it was screaming to users "HAH! Made you press the button! Nananaa nananaa :P"

Also, the messages are useless. What is 11:00 AM CEST going to tell to US or Asian audience? Just do the math in the app. It is simple. Much more informative would be to tell the user what time it will be in their current time zone. And what does "check back later" mean? Surely they must know that the press release is available during or after the event?



Think about the message and experience of your app. Especially if the app is for PR purposes. Think how users will feel when they use it. Don't lead your users into dead ends. Actions that are not available on the current time should look like they are not available.

From http://www.androiduipatterns.com/2011/08/quick-ui-tip-disabled-buttons-should-be.html

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}