Currently a post shows only one tag on the Steemit list of posts:
Because this is based on the old functionality of one-topic per post there's no where to see what other tags this post uses if the person uses a list of tags in the tag field when submitting. Furthermore it's useful to see what a post would be tagged as in the list of posts to see what other subjects it might cover.
I just spent a few minutes mocking up a way that the list would look better, be more consistent, and convey more information without more clutter or using more space. Click for bigger.
To the right of the tag list there's something else. For more tags than could fit in the post list summary there can be an arrow or ellipsis the user can click to show all the tags used in the post.
You might also notice that the vote buttons and reward display are moved to the left. When I started moving things around I realized that it would be a good idea to have the upvote/downvote buttons and post rewards be in a consistent place on a list page's X-axis. Illustration highlighting the different positions of the buttons currently:
A button that performs a blockchain action should have a consistent position in my opinion. Non-interactive content can be more dynamic.
Edit: Incorporating @bbqbear's suggestion in the comments, here's a mockup incorporating the sum of ideas in this thread (click to make bigger):
This would be a nice improvement, consistent placement of ui buttons is easier on the brain. Prioritizing the important info and buttons to the left would also be useful, like putting rewards and voting buttons under the picture.
This would allow you to quickly scan pictures and voting totals, and the farthest left upvote button would be the easiest to press. Moving the votes drop down farther from the downvote button would also be helpful in preventing accidental downvotes while trying to look at who voted.
This is a good idea too. I didn't consider it because I thought the preview image could potentially use the entire height of the summary box but looking at it closer it looks like space adjacent to the bottom row isn't used for the preview.
This would also solve the issue of aligning the vote reward with text-only posts lacking preview images:
Timestamps also get aligned, and if you look closely my mockup design above solves the issue of saying "5 votes" when there are actually 7, but one of them is a downvote. I brought that issue up here: https://steemit.com/steemit-issues/@pfunk/vote-count-is-wrong-when-there-are-negative-votes
It would solve a few problems. The main thing to consider for usable UI's is importance of info, and arrange it in order of importance from left to right.
It would seem swapping the timestamp and # of responses would be a better order and use of space. The responses link is redundant and could just be a # display instead of a link. The timestamp could also be right-aligned to fix alignment problems you pointed out in the main post. Like this
The "Responses" link is actually not redundant. In the case of direct external links, the responses link is unfortunately the only way to get into the post in order to see the URL before following it. Direct links pose a risk to users as I've written about in another post (link below).
https://steemit.com/steemit-issues/@tombstone/direct-external-links-are-too-risky-please-disable-them
Oh yeah, you are correct.
I agree with your other post too. Titles should not link directly out, but have a link icon or something after the title that does.
Positioning the voting buttons such that they will always be in the same place is a very sensible idea. But you would be incorrect to assume the thumbnail photo is always the same height. In fact, it is not always the same height and therefore placing the voting buttons beneath the photo may not be the best solution.
The height of the thumbnail photo actually varies and sometimes it does
Right but it never goes below the summary text, so with the current design, that space is free.
This may explain the inadvertent downvotes at times.
I also used the tag #tags on this post for illustration. Unless I made this reply you wouldn't be able to tell it had that topic tag.