16
votes
Tildes UI design
Hey everyone,
I've seen a bunch of posts discussing the design of the site, and I was wondering if there are any other designers on here that would be interested in discussing the interface more precisely, and coming up with potential improvements. I wrote up a design audit and gave it to @Deimos last week, and I wanted to share it with everyone and generate some discussion about minutiae such as colors, placement and styles of buttons and links, etc. I feel like these are just as important as larger features that people are asking for (such as a markdown preview), and have the added benefit of being very fast to iterate on.
I agree with the feedback about the topic cards. My immediate reaction when I joined the site was that there was a lot of wasted space (compared to the "compress the link display" view I'm used to from Reddit). After using Tildes for a few days, I'm more or less used to it, but I'd still prefer a higher density view to see more topics at once.
Wow, I didn't even know that option existed. Although I think that might be too high density for average users, it brings up the question of the necessity of the text preview. I don't know of any other websites that use it (including basic forums, which usually have just the title of the thread). Thoughts?
Yeah, that option was actually the original Reddit layout! I can see the argument for the text preview being useful. The tags seem less useful to me for the amount of space they take up.
(I also think tags would be more useful if they were added by the people reading the post, not the person submitting it. Everyone got this wrong when they copied del.icio.us…)
After browsing for a day, and using the solarized dark theme...my only suggestion would be to allow us to collapse comments without having to scroll all the way up to the parent comment. I'm overall pretty happy with it, but excited to see how it evolves!
You can just click
parent--^ to take you to the parent comment and[back]once you do to go back... you don't need to scroll. ;)The only ting that I wish was different about the solarized dark theme is for there to be more contrast between the blue of the background and the blue of links and usernames.
I've recently watched this video on UI refactoring and liked it quite a bit. If anyone else thinks that's a good idea, I could try to contact/invite him and ask for some input.
That video is awesome! I just went through and watched all of the other videos he's uploaded so far. I would definitely be interested to see what he does with ~ since it's pretty different from the other sites he's refactored.
I was wondering if the comment box can be placed after the body of the post and not at the end of the comments as one would have to scroll all the way to the bottom to post a comment. Just a small suggestion :)
@Deimos @Sid
After reading several discussions on the subject, the design decision seems to be to encourage people to read the thread before posting, hence the text box being at the bottom of the page.
I'm interested to see how usability scales as more users join. For a thread with over 1000 comments it may be a bit tedious to get to the bottom.
Yeah, it was an intentional design decision to place it at the bottom. I pointed out the same thing when I first saw it, but I think it's actually better this way.
I definitely agree that this site could use some design tuning. The usernames especially- at first I wasn't even sure if usernames were listed on the topic cards being that my eyes were jumping around the cards to find relevant information. The topic cards are overall awkward visually. I am in favor of a typical forum-like design with each section of the topic/thread card being separated by column- as in
Topic | OP (with date underneath) | # Comments | Votes
(preview text)
for desktop so as to avoid the massive whitespace on this site.
The current style seems to specifically be made for mobile. In that circumstance it works best in portrait but gets the same whitespace issue as before in landscape. The topic cards also lose coherence in portrait as the (# words) bit often causes a weird linebreak and anything other than one line of tags breaks up the visual flow as well.
I'm skeptical of the visual utility of tags being listed on the topic card by default in either case- you may have noted I omitted them from the desktop example above. They don't filter well visually and just add clutter. They will be useful for automatic filtering (though I don't think that functionality exists yet) and they are useful for people curious about a topic to get a quick impression so it might be advantageous to simply hide them behind a button marked "reveal tags".
Otherwise, I'm largely in agreement with the design audit document from @sid