Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Parent

Taking our design to the next level: feedback wanted

+13
−3

Our team has been exploring some ideas to improve Codidact's design. We've wanted to improve the visual design for a while, and we also have a lot of other usability changes we'd like to make. We want visual design and function to complement each other, creating a more intuitive and pleasant experience for our community members and visitors. Everything's interconnected, which has made it hard to just do that one thing now, so our design team has been working on a mockup that shows several ideas together. We'd like your feedback.

We're starting with the "post list", the list of (usually) questions on the main page of a community or any of its categories. By moving a few things around and changing the visual emphasis of certain elements, we think this new design is easier to scan and easier to interact with, whether you're looking at a list of questions or a list of recipes or a community's blog. Please check out a live mockup. Note that the design is live but data is static, not all buttons do something (but they hint at what you'd see), and you can't really go to other pages.

screenshot

Color is used more sparingly in this design, with the eye drawn to unanswered questions and the "ask" button (which is now in line with the list of questions rather than all the way to the right). The design supports header banners beyond just the logo, which we think will allow communities to express more of their identity. That orange stripe is a placeholder, to be replaced with whatever each community wants to use to convey itself visually.

The structure of categories -- a row showing the categories, description and category-specific controls below those tabs, post list below that -- is preserved with some tweaks. As you can see, we've moved the voting information to the right and decreased the size of the numbers. Both the numbers (raw data) and the score scale are shown, supporting different modes of taking in information. For some people, the "temperature" bar is the best way to convey information. For those who want a closer look, the raw numbers are still there. We'll keep the tooltips we have now (or improve them); we're not taking away guidance.

Tags are styled differently in an effort to be present and visible without necessarily being in your face. We've given titles a little more breathing room, but we think this still allows for a reasonable number of questions to be shown together.

The "expand" control is new; it allows you to see a quick summary of the page (in a pop-out modal) from right there on the post list. It'll show you the opening lines of the question and a summary of answers, sort of like the table of contents that's available on question pages. (That TOC part isn't there in the mockup now.) For posts that aren't questions, like blog posts, it'll still show the opening lines.

Sorts, filters, and search move into the right column to be "closer" to the things being sorted/filtered/searched. Eventually we envision real user-defined filters, so you can define something that shows you only questions in these tags with fewer than N answers, or posts in all categories meeting some other criteria, or only unanswered questions, or other things yet to be thought of. We haven't designed this filtering system yet (and we'll be asking for your input on what you'd like to have before we do so), but this is where it would plug in and what it could look like. Filters are kind of like named searches, so it made sense to us for search and filters to be together on the page. We think the current sorts (Activity, Votes, etc) probably fit in here too, though we grant that filters (restrict what you show) and sorts (show the same things in different orders) are not quite the same thing.

This design doesn't show the rest of the right column, which we'd like to review separately. For communities that have an important notice (particularly relevant for certain professions), this notice will remain prominent at the top of the column. Other stuff, like featured posts, ads, selected questions, the chat and advertising links, and so on -- that stuff's all subject to more review later, and ultimately we think communities should decide what shows up there. We're also hoping to use that space sometimes for contextual information -- for example, formatting help when you're creating or editing a post.

The design is responsive; try changing your window size to see how it looks for different form factors.

We've been tossing around low-end sketches (Paintbrush is my friend...) with circles and arrows and comments like "clicking here does X". We'd like to thank Matt Brent for turning those vague ideas and his own design experience into a real design that we can now bring to the community for feedback before writing code.

Why are we spending effort on a new design when we have a design that works fine now? Partly to visually distinguish ourselves even more, partly to have a solid foundation for all the things we want to add that were never thought of when the original QPixel code was being written, and partly to empower our communities to customize their presentation along with their content. We think this design helps to highlight the things that are different (we think better) about Codidact. We want communities to be able to build their dreams and we want visitors to see what is possible, what makes it worth looking around.

Please check out the mockup and use answers here to tell us what you like and where you see issues or have suggestions. We want your feedback and constructive criticism so we can all work together to build an even better Codidact.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?
+17
−0

Keep the bidirectional score bar I personally prefer the current bidirectional score bar over the proposed one. It al …

over 1 year ago

+13
−0

Keep special styling for top level and moderator tags (Top level being the blue discussion, feature-request, bug, and …

over 1 year ago

+12
−0

Don't call it "expand", call it "preview" Minor detail, but since the purpose of that feature seems to be to preview …

over 1 year ago

+9
−0

Keep the "expand"/"preview" action link in place Another small detail, but something that has a tendency to annoy me. …

over 1 year ago

+7
−0

Loving the discussion. As the main person responsible for the design I wanted to share my thinking to help inform some f …

over 1 year ago

+7
−0

Emphasize the site name over the network Currently, in the top left corner, where it says `meta.codidact.com`, while …

over 1 year ago

+11
−1

Hover state changes shouldn't cause elements to change size As an example, try using a mouse on desktop to hover over …

over 1 year ago

+6
−0

Add exclude options for the tag filter Perhaps add a section below the tag include filter so we can quickly and easil …

over 1 year ago

+9
−1

Don't touch my avatar! This was already brought up in a comment, but I want to put it in something that can be voted …

over 1 year ago

+5
−0

Make another pass over the color choices Just some general observations here... Blue background is used to highlig …

over 1 year ago

+4
−0

> Color is used more sparingly in this design, with the eye drawn to unanswered questions and the "ask" button (which is …

over 1 year ago

+3
−0

I was checking UI/UX in android. I had marked what isn't looking well right now. >ui >Look at following picture. In …

over 1 year ago

+2
−0

Save space for the questions The focus of the site are the questions and answers. Taking over vertical space with hea …

over 1 year ago

+4
−1

Merge the two top bars. Like in Reddit. Reddit header Saves space while still allowing plenty of community customi …

over 1 year ago

+5
−2

I definitely do not appreciate the bigger fonts. This makes much less content displayed at the same time, which is bad e …

over 1 year ago

+1
−0

In my honest opinion, the new look is actually really good. The color palette also seems to do well on the new GUIs you …

over 1 year ago

+1
−0

I really don't like the change to tags. "...without necessarily being in your face" They need to be in one's face! …

over 1 year ago

+1
−0

More phone feedback -- smaller layout issues. For a screenshot see this answer ('cause wow is that huge and I don't wan …

over 1 year ago

+1
−0

I looked at the mockup on my phone. At default zoom this is what I see (in Chrome, in case it matters): Screenshot …

over 1 year ago

+1
−2

Another observation: In the new design, the search bar is on the side, which automatically makes it shorter. Which IM …

over 1 year ago

1 comment thread

General comments (9 comments)
Post
+5
−2

I definitely do not appreciate the bigger fonts. This makes much less content displayed at the same time, which is bad especially on overview pages. At the current design, two-line titles are the exception. At the new design, they are more like the norm.

Also, I don't like the titles to be in bold font on the overview page. In my opinion, bold should always be used sparingly. Titles in the actual text are sparse, therefore it makes sense to make them bold. Titles on the overview page are the main content, therefore making them bold is IMHO wrong.

Also the fact that the scoring takes much more space isn't to my liking (especially since most of it is whitespace to accommodate the overly long picture bar). And I would prefer to keep it on the left, as that way I do not have to move my eyes across the page to get to it.

Also, I much prefer the current “red to the left, green to the right” bars to the new ones. For one, the current bars get more red the more negative the posting is, while the new bars get more red the less negative the post is (where “negative” means relative to the neutral 0.5 score). Indeed, the most red you get if you are almost neutral. That subconsciously gives the message that the worse posts are less bad (because there's less of the “bad colour”).

Also, the header in the new design is basically empty space (indeed, ironically, for my page width — which is actually less than the screen width — it only has content where the content has whitespace (on the left and right), see image:

Screenshot of new design header and page start

I'm also missing the Featured/Hot Posts box. And the page somehow aprubtly ends, as opposed to the footer information in the current design (and I cannot find the essential information contained there anywhere in the new design, in particular the terms of service, about us and contact links).

What I do like, however, is the new functionality. I appreciate that instead of the unspecific “last activity” the type of activity is given (new comment, new answer, …). The “expand” button is also nice (though I think it shouldn't move when turning into “close”). And of course the filters are a great addition, although the filter criteria need some work (e.g. instead of excluding questions with downvotes, it would make more sense to exclude questions with more downvotes than upvotes, that is, with “negative” score).

BTW, unrelated to the redesign I'm now wondering if instead of using the Wilson score directly, it would make sense to use (2*Wilson score − 1) as public score. The ordering would be the same (that is, the actual score handing would not need to change, only the presentation to the user), but posts with more downvotes than upvotes would actually get negative score (the score interval would be −1 to 1 instead of 0 to 1).

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

General comments (6 comments)

Comments on Taking our design to the next level: feedback wanted

General comments
Canina‭ wrote over 1 year ago:

Several good points here, so +1, but it might be even better if this was split into multiple answers so voting can more clearly indicate agreement/disagreement with each.

celtschk‭ wrote over 1 year ago:

@Canina: Thanks for the feedback. I don't have the time to do it now, but I'll split the post this evening (at least 8 hours from now).

Monica Cellio‭ wrote over 1 year ago:

I don't think the footer omission is an intended change; it's just that this mockup only uses the first handful of questions to demonstrate the changes and then stops. The footer isn't going away.

mattbrent‭ wrote over 1 year ago:

Footer is omitted on purpose - its not pertinent to the post list.

Re title size - i think there needs to be a balance here, but the reality is that adding more posts into a 1000 pixel high browser isnt necessarily a good thing.

RE banner - this empty space is available for sites to customize their own banner, the more we add in this small space the more cluttered it becomes. As posted by Estela i do think its worth exploring though.

Sidebar will be fully visited in the future

celtschk‭ wrote over 1 year ago:

@mattbrent: I just did a little experimentation. If I reduce the title font size from 20px to 17px and the font weight from 700 to 600, and at the same time increase the width for the post details to 88% (shortening the score part to 12%), then I get back to the 8 visible posts from the current design (and IMHO it also looks better).

celtschk‭ wrote over 1 year ago:

@Canina: As you probably have noticed, I didn't get around yet of splitting. Given that there now has been some activity on the post, do you think splitting makes still sense?

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!

Like what we're doing? Support us! Donate