Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Could you tell us more about the actions? What are they? I believe feature specific answer will be better than a general one in this case. –  Dominik Oslizlo Mar 6 '13 at 7:51
    
If it appears to be the same, then users naturally expect it to behave the same. So, if the behavior is different, make sure it appears different too. –  André Mar 6 '13 at 8:18
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
P.s. There is no website involved here. –  Prasham Mar 6 '13 at 12:55
    
@Prasham The same advice applies, but I reworded it :) –  JohnGB Mar 6 '13 at 12:58
add comment

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.

share|improve this answer
    
The problem is that it's not a 0/1 action. Suppose this button works as a recorder, when user presses the button recording starts, when leaves the button recording stops. There is a work between 0 to 1 and that's where the complexity is. :) –  Prasham Mar 6 '13 at 8:52
1  
In this case I think you should prepare two different states of the button on the widget, one for "start recording" and another when recording is active. If you use this representation for example: socialtimes.com/mobilecontenttoday/files/original/… you could use red blinking line as an alternative to green line when the button waits for recording. Maybe you could populate the same on/off behavior to the app and offer a switch that would change this behavior to on-tap-and-hold + info for the users that it works in app only? –  Dominik Oslizlo Mar 6 '13 at 9:16
    
I have prepared a quick wireframe for it: imgur.com/NexcaVo –  Dominik Oslizlo Mar 6 '13 at 9:26
    
that's what I have presented, in widget click first to start action, the state is changed so button says waiting..., if user wants to stop the action he/she has to click the button again. Now awaiting for people's responce... :) –  Prasham Mar 6 '13 at 10:05
add comment

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.