Sunday 28 August 2011

Quick UI tip - disabled buttons should be disabled

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?

Conclusion
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.



5 comments:

  1. Hi, i think that sometime ago i read a post where you wer pointing the advantages for ios developers when selecting from a variety Ui components. Apparently google decided to include the ViewPager component in the compatibility library. Check out the google developer blog :-)

    ReplyDelete
  2. Show Date/Time depended on timezone isn't always the best. I don't want to think that: "Hey I remembered it said 9 AM. Why is it showing 11 AM now?" or "It's only 8 AM here why did I missed the show again?"

    ReplyDelete
  3. zuka, yeah. That is worth reading!

    Regarding times. Two relevant informations about time is the user's local time and event's local time. I'd say that the user's time is often the more useful. But you're right that having only that info can cause some confusion. Showing both might be a good solution.

    ReplyDelete
  4. Hi juhani, a question that migth be out of topic, what tool would you recommend for ui design for mobile devices? Thanks!

    ReplyDelete
  5. Hey Zuka,
    A good and very reasonable priced one is wireframe sketcher:
    http://wireframesketcher.com/

    You can even get a free license if you have an open source project. It's of course not the only one. If you're on mac OmniGraffle is very very good. Then there are a lot of professional tools like all the Adobe ones.

    ReplyDelete