I have a mobile website, which shows entries by a user. The entries' style is similar to that of twitter entries or facebook entries. So along with each entries, if the user had entered some comments, a note icon will be shown at the end of that particular entry. When the user clicks the note icon, the comment will be displayed below the entry by expanding the entry. My question is should the comment contain a close button (a close icon at the top right)? At present you can click on the note icon once again to toggle the display.

Below is the screenshot. Sorry that I had to blur the things out. When I click the note icon the notes (comments) section (the grey box) shows below. Currently there is no close button on the top right. What would be the best user experience considering the beauty of the page as well. There will be only one note per entry.



3 Answers 3


You could easely visualize the toggle functionality with a + and - button. This type of expand/collapse buttons are common and easy to grasp.

toggle button using + and -

Another alternativ could be to implement Twitters' approach - just using words:

twitter expand button twitter collapse button

  • But the expand or collapse button does not fit the UI given in the screenshot.
    – user3060
    May 23, 2012 at 3:41
  • @kadaj The screenshot wasn't their when I posted my answer. But even so, I convey ideas supplied by images, not exact graphical implementation schemes. I sincerely hope there is room for creativity in the design (Width & Height) otherwise there is another problem with this project. May 23, 2012 at 4:57

In my opinion , you should be converting the same icon to close icon,when comment is expanded, it would save both space and extra effort. close icon because user will be clear on the action he could perform next i,e to close or expand, otherwise toggle should suffice.

Having said that, i assume toggle and close serve same purpose of closing the same division.


Retaining the existing toggle functionality is the way I'd go here, as it's compact and doesn't require the user to follow a separate process - thereby reducing cognitive load.

A good way of communicating this to the user effectively is to change the icon (and thereby the affordance) of the note button to a close icon. This is also behaviour that users will be used to from other applications.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.