Android widget : how to tell users that a similar looking control does not perform same?

Question

In my android application I am developing a desktop widget that mirrors many important tasks supported by my application. This widget contains two buttons that mirroring their counterparts in the app screen. I have designed to look them similar so users can associate them with their in-app counter parts.

However the in-app buttons do support some complicated touch operations, In my application user can touch and release the buttons, the time between these two actions can be ~1 minute. This is not standard long click or click provided in android. We use onTouch() method to work with these buttons. However only clicks (no touch and longClick)are supported in android widget. Thus buttons on widget may look like buttons in app, but they can't perform like their in-app counterparts.

What should I do so that user understands the same and does not mistakenly long click on the button as they can do in application?

If I have to change the buttons' look, how can I change them so user can easily relate with their in-app counterparts and still understands that they have different behaviors?

Answer 1

An icon should perform the same action whether it is in your app or a desktop widget. From your description, it sounds like there is a lot of overlap between the two buttons, but that you want the one on your website to perform additional functions.

To do this, you should have two icons on your desktop widget. One that performs the functions that are common between the two, and another that performs the additional special functions on your desktop widget.

I know that having two buttons isn't ideal, but it's better than confusing customers with the same or similar looking icons that perform differently.

Answer 2

Generally speaking I think it's possible to go four ways at least:

• make sure that same icons do the same (by extending functionality of the widget icon or limiting the functionality of the in-app icon - not necessarily removing some features but shifting them to another icon maybe?)
• prepare a "feature light" icon for the widget, thus making it different from the one in the app and indicating it does less than the one in application
• prepare a "feature on steroids" icon for the app, thus indicating that it does more
• add some comment in the widget to clarify it's a light feature

If you provide more details about the feature itself, maybe some more ideas will appear.

--Edit--

I have noticed that you have just added more details. Actually it's not the feature but the interaction that is different in this case. Looks like the in-app icon works like a button and the widget one works like a switch. You can make it look like a switch and place the icon beside it - I think it should be clear for the users that it is a 0/1 action.

Answer 3

I think the ideal solution would be to keep the icon (since the basic functionality and user need is the same), but change the affordance. A bit like you can have the same symbol on two toilet doors, but change the shape of the handle depending on whether it's a pull or a push door.

Here's a mockup for the recording example:

^{download bmml source – Wireframes created with Balsamiq Mockups}

(The black thing is supposed to be a microphone icon)