Immediate feedback for interaction with the Network News items.

One of the most important things for us when building the native Android App for XING is to give users the best experience possible when interacting with the app. This also means giving the users the feedback they require so they know that the button they clicked on actually worked. What makes things a little more complicated for us is that we “talk” to XING through an API (meaning we make requests and have to wait for responses to be sure that the call worked), and many of the calls from smartphones are effected via 3G networks or even slower ones, meaning that the app doesn’t really know if the call was successful or not until it receives a response with a success message.

In most cases we just have to wait until the info is there before being able to present something to the user, until which time we just show them a loading screen. As with the Network News page, there is simply nothing to show until the info is there so we have to wait for the call to be received and parsed before the user can see their Network News. In other cases, e.g. when sending a message, we can just send the call, and when the response is successful, we provide feedback to the user (an animation of an envelope closing and then being sent) or just go back to the previous screen. The time elapsed between the button being pressed and the app actually responding to it can be a couple of seconds via 3G or barely noticeable when using wifi.

The “like” or “unlike” button is a bit of a special case in this regard. Consider the following: you go to your Network News and see an activity from a contact of yours that you find interesting (or like), so you go ahead and press the “like” button. What do you expect?

1. The button to change color immediately? Or
2. To wait for a couple of seconds until we get confirmation that the “like” was successful in order for the button’s color to change?

In this case, users are just too used to receiving immediate feedback so if we didn’t change the button color right at the moment the user pressed it, our users would think it didn’t work and try to push it again, thus making a new request. This new request would now be to “unlike” the activity since they already pressed to button to “like” it. That way, they’d end up pressing the same button over and over again, which is of course a pretty bad experience and the reason why the Android App team, considering that the most important thing is to give the users immediate feedback, went for the first option.

The obvious question here would be: What if the request is unsuccessful? What if we change the button’s color to tell the user that the activity has been “liked” but then the response comes back with a fail message? Or what if the user doesn’t even have Internet access when he tries to interact with the activity?

The simple answer to all of these questions is that we just undo whatever we did when the button was originally pressed. Here is some pseudo-code that covers what it does:

private void handleClicked() {
  Toast.makeText(activity.getApplicationContext(),
  activity.getString(R.string.you_like_this),
  Toast.LENGTH_SHORT).show();
  likeButton.setImageResource(R.drawable.ic_liked);
  xingActivity.likes.count++;
  service.activitiesStorage.updateActivity(xingActivity);
  service.likeActivity(new ResponseHandler() {
    @Override
    public void handleFailed(String error) {
      likeButton.setImageResource(R.drawable.ic_likex4);
      xingActivity.likes.count--;
      service.activitiesStorage.updateActivity(xingActivity);
    }
 
    @Override
      public void handleSucceeded(Request request) {
    }

I’ll try to explain it line by line.

- The first thing we do at the exact moment the button is pressed is show a message associated with this id: R.string.you_like_this, which, if your phone is in English, says “You like this”.

private void handleClicked() {
  Toast.makeText(activity.getApplicationContext(),
  activity.getString(R.string.you_like_this),
  Toast.LENGTH_SHORT).show();

- Then the button “color” changes (actually we just change the image from an empty star to a fully colored star).
likeButton.setImageResource(R.drawable.ic_liked);

Finally we update the activity’s number of likes in our database (these last 3 things happen instantly):

xingActivity.likes.count++;
service.activitiesStorage.updateActivity(xingActivity);

Here is the code in the responseHandler which includes what we do when the response has failed and what we do if it is successful. As you can see in the handleFailed() method, we undo everything we just did before:

The image resource is set to the empty star again (this lets the user know that it can still be “liked” so they can try to click on it again when they have an Internet connection):

likeButton.setImageResource(R.drawable.ic_likeable);

We then subtract 1 from the number of likes and update the database:

xingActivity.likes.count--;
service.activitiesStorage
.updateActivity(xingActivity);

Finally, if the request comes back successful we simply do nothing since everything that needed to be carried out was done immediately after the button was pressed.

@Override
  public void handleSucceeded(Request request) {
}

This is a very useful and simple mechanism we use to keep our app users happy and provide them with the latest information as soon as possible.

About the Author

This entry was posted on Tuesday, January 3rd, 2012 at 16:57 and is filed under Mobile. You can follow any responses to this entry through the RSS feed. You can skip to the end and leave a response. Pinging is currently not allowed.