Suggestion: Redesign of the interaction buttons of posts on the mobile interface
I suggest a simple redesign on the interaction buttons on posts and the actions that they trigger for the mobile interface. The proposed redesign would solve many current issues with these buttons. Unfortunately, I do not have the skills to code this stuff personally, but since I have opened a couple of bug reports on the problems of the mobile interaction buttons and noticed some more problems that I haven't yet reported, I started to think how could they be solved at once. If no-one has big objections on this suggestion, I am happy to open a feature request on Github on this; but I figured out that I should maybe suggest this here on Loomio first. I repeat once more: everything in this suggestion concerns only the mobile interface.
Here is a mock-up of the suggested basic redesign changes:
The location of the icons is not the point of this suggestion. Important here is that visible texts are added and clicking the icons and the texts would trigger different actions, which would be the following:
1. Clicking on the Pencil icon: Opens the existing comments (if any) and a comment box, and focuses on the comment box. If the “N comments” link and the comment button (see the next point) has been clicked earlier, clicking the icon just focuses on the comment box.
2. Clicking on the “N comments” link: Opens the existing comments. Below the comments there is a comment button; clicking on that button opens a comment box.
3. Clicking on the Heart icon: Adds / removes a like.
4. Clicking on the “N likes” link: Opens a list of people who have liked the post.
5. Clicking on the Reshare icon: Makes / removes a reshare. In both cases opens a confirmation dialog.
6. Clicking on the “N reshares” link: Opens a list of people who have reshared the post.
General advantages in comparison to the current design:
One would be able to see instantly, how many comments, likes and reshares a post has. This, I think, is the single biggest advantage of the suggested redesign.
With the addition of texts (N comments / likes / reshares), the meanings of the icons would be instantly clear even to newcomers. Nowadays, especially the meaning of the Reshare icon could be unclear for a newcomer.
The vague and redundant term “reaction”, which is used nowhere else in the interface, is removed. The term is vague, because it is not self-explanatory and because it is not clear, why it includes only likes and comments and not reshares, like it does now. The term is redundant, since no-one is interested in the sum of comments, likes and reshares, but only about their amounts separately. [EDIT: An issue was opened about the confusing "reactions" link on Github. This suggestion would solve it.]
Advantages of particular redesigned actions:
1. Clicking on the Pencil icon: This would solve https://github.com/diaspora/diaspora/issues/5483 Additionally, at the moment, clicking the Pencil icon does not open the existing comments but only the comment box. However, opening them makes sense, because in most cases you want to read earlier comments before commenting yourself.
2. Clicking on the “N comments” link: At the moment, the existing comments are opened by clicking the vague text “N reactions”. “N comments” is a self-explanatory text, unlike “N reactions”.
4. Clicking on the “N likes” link: At the moment, it is not possible to see who has liked a post. This would solve https://github.com/diaspora/diaspora/issues/5688 It is up to the coder to decide how the list of likers is best shown.
5. Clicking on the Reshare icon: At the moment, it is not possible to remove a reshare by clicking the reshare icon again. Removing a reshare in this way would be intuitive, because it is possible to remove a like this way too. (I once instinctively tried to remove a reshare like this and was surprised when it didn't work.)
6. Clicking on the “N reshares” link: At the moment, it is not possible to see who has reshared a post. There is no bug report on that. It is up to the coder to decide how the list of resharers is best shown.
Please let me know, if something was left unclear.
M. K. Mon 16 Mar 2015 10:09AM
@augier That is actually exactly what I meant to suggest. By ”comment box” I meant the form to post a comment. Sorry that my choice of words was misleading!
I am aware that this redesign would not be a peace of cake, but I suggest it rather as a long-term vision of the direction of the mobile interface design than as a feature request that should or could be fulfilled immediately.
In fact, I believe that the redesign could be divided in several more or less independent steps that could be carried out in different pull requests:
- Make some preliminary cleanup work on the code?
- Make the visual changes: Replace the ”N reactions” link by the ”N comments” link; add the amounts and the texts for likes and reshares; changes on the triggered actions don't need to be made here.
- Make clicking the Pencil icon open not only the comment form (as it does currently) but also the existing comments (if any).
- Make clicking the Pencil icon focus on the comment form.
- Make it so that if the comment button below the existing comments has been clicked earlier, clicking the Pencil icon just focuses on the comment form (and does not open a second comment form, as it currently does!)
- Make the ”N likes” link clickable: opens a list of likers.
- Make it possible to remove a reshare by clicking the Reshare icon the second time.
- Make the ”N reshares” link clickable: opens a list of resharers.
Dumitru Ursu Mon 16 Mar 2015 12:37PM
I like the idea. One small critique though: those tapping targets are very small. Unless you're a pianist or a child, you probably will miss them from time to time.
Also, without prior knowlegde, you can't really say what clicking on "N reshares" will do, for example. Although people already assume that, because of the way facebook does it's things.
M. K. Mon 16 Mar 2015 7:21PM
@dumitruursu Thanks for the feedback!
For the mock-up image, I just moved the current icons to another place with Gimp so they should be the same size as currently. They can be made larger quite independently of this suggestion, if needed. Just as a side note, I personally haven't had problems tapping those icons, although I do not qualify as a pianist nor as a child.
And you're right, there is always a possibility of misunderstanding and everything cannot be explained explicitly on the user interface. But I still think that adding the texts next to the icons makes a big difference. When I see the Reshare icon, for example, the first thing that I think of is recycling! Even though a newcomer would not know what resharing means exactly, at least they would probably not think that the icon is there for recycling, i.e. deleting the post or anything like that.
Even though this reason would not be considered a strong one, adding the texts has other advantages: They e.g. make the tapping areas larger and they bring consistency with the desktop interface.
Jason Robinson Tue 17 Mar 2015 8:07PM
I like the idea and would be prepared to support it with a small bounty once an issue exists on github. I really hate not being able to see whether interactions are comments or likes at the moment. It pretty much makes the "My activity" stream useless on mobile :P
Thanks for opening this up!
Rich Wed 18 Mar 2015 10:51AM
How will those buttons look on a narrow screen? Such as an iPhone 4 or 5 ?
M. K. Wed 1 Apr 2015 9:17AM
@jasonrobinson Kiitos! Maybe you could help me with determining what kinds of steps could this redesign be divided, once I open an issue on this on Github? I remember that you used "divide and conquer" strategy successfully with the user data import/export issue.
@rich1 That is definitely a thing to be considered. However, this suggestion is not about how the buttons should look like but about how they should function. So if they are too wide (which I highly doubt but which I am unqualified to evaluate), I am happy to think about an alternative graphical design.
Rich Wed 1 Apr 2015 9:40AM
Perhaps 'look' was the wrong word for me to use.
Jason Robinson Thu 2 Apr 2015 10:06PM
@markusk jep I guess a single issue would be good with some tasks to maybe get people to submit parts of the feature in small pulls instead of trying to take it all at once. Github has the nice task list system for this.
I wouldn't worry too much about getting "things right" immediately - any design will likely be discussed in the pull request stage. I doubt there would be major disagreements whether this kind of fixing is needed for the mobile view - the fight will probably be related to design if any :)
The important thing imho is to publish this to GitHub if no one wants to "object to it" here - otherwise this discussion will just get buried here in Loomio.
Deleted account · Mon 16 Mar 2015 9:21AM
IMHO, the pencil should actually open both the comments and the form to post a comment.
I like your idea. But I think it would need to clean the mobile code a bit, which is far from unnecessary.