New topic list view

In the footer, where the meta items are, there is an inconsistency with font-sizes and font-families.

Red: 14px, system font

Green (expectation): 16px (default), custom font-family (in inSided’s case it’s Proxima)

You’re fast!

System font should indeed inherit the font-family. The font-size at 16px is something we did custom for inSpired bacuse our font-family has a small height by itself :)

Since changing the lay-out, the colour of the labels has changed to black unless you hover over them. Is there a way to change this? Right now it clashes with the rest of our styling.

The meta items don’t align perfectly. The like button (icon and number) should be about 1-2 pixel higher to be on the same line as the other icons and values. 

I have to say I'm really not that thrilled about this… Our community normally looks very clean, but now it became a bit messy with all the colours, stripes and other stuff. Not what you wanted to achieve.Like Bjoern mentioned, not all meta items are aligned…

The colors should be updated to your brand primary color :)

Sorry to hear that 😞 Anything in particular you really dislike? We are looking into the alignment issues of the meta items.

@Yoeri Thanks!

Another issue I’ve noticed is that when you enable phrases and click on ‘edit’ to change the text after a member’s name and rank, you are being sent to the article, instead of being able to edit the phrase.

If I’m really quick (and my connection happens to be a bit slow), I can sometimes stop the page from loading, in which case I can edit the phrase. But this shouldn’t be how it works.

Other than that I also think the overall lay-out is a bit less clean.

For example:

• Since everything is now stacked horizontally instead of vertically; a combination of a long username, rank and category name, leads to the text being cut off.
• This might be connected to the meta items mentioned by @bjoern_schulze , but the question marks and ‘resolved’ symbols next to a topic title do not align with said title.
• I personally dislike the topic preview text taking so much space horizontally. I see how this leaves room for topics using the idea card, but without the extra image it looks worse the shorter the topic title is.

Thanks for sharing your feedback Yannick! When in phrase mode you should not go to topic pages when you actually want to change phrases, we’ll look into that. 

The meta items needs some minor alignment, that is indeed related to Bjoern his feedback. Do you have an example of “long username, rank and category name, leads to the text being cut off.” 

Here you go. 

By the way, I realize that this is an extreme case, as I don’t see many custom ranks actually being that long. I just thought I should mention it.

That’s a good example, thanks for mentioning. That’s a very long rank title indeed 

Hey! 

I feel like the new vote buttons on the ideas aren’t clear unto what they do. I definitely preferred the old style, but appreciate the counter etc. showing. Is there anyway to roll back to the old version? I’m launching tomorrow and there’s now just a bunch of tiles with 0 and a lil carrot icon on them. If you’ve not used Insided before, I don’t think it’s very clear, especially in a launch state.

Thank you!

Hey Ben, Thanks for the feedback! I’ll PM you

Users are reporting that on favorite/overview the favorite button has disappeared. They have to invest more effort now to unfollow topics, because they need to open every topic in order to find and click the button.

Good catch, thanks for reporting

I have some questions regarding the topic header:

1 - User name
2 - User title
3 - Meta text and Category title
4 - Dotted line

With the changes in the topic header the user title (2) has gotten a much more prominent role compared to before. Can you give some insights as to why the user title is getting this attention compared to the user name (1) and the Category title (3)? Why is the user title linked to the topic and not linked to the user profile? Did you consider having the user icon shown instead?
→ Personally, I’d like to have the user title scraped completely here. For me it is enough to have this information in the profile hover card and it also doesn’t make sense to link it to the topic. In its place I’d like to see the user icon instead because in our community we are using the user icon to highlight the user ranks (employee/moderator, power user).

The category title (3) is using the metadata color, even though it is a clickable link. Why did you decide to choose the metadata color instead of the branded color that is usually used for highlighting links in inSided? You are also introducing a new design element, the dotted line (4). Are there plans to use this element elsewhere too in the future to keep it consistent?
→ My expectation for styling of the category title would be to have a consistency with the breadcrumb (as it serves a similar function). So my suggestion is: Either the category title in the new topic list view should follow the current breadcrumb styling (no dotted line, branded color for highlighting links) or the breadcrumb should follow the newly introduced styling.

I quickly threw together how I would like to see the topic header:

In my opinion this solution is cleaner, gets rid of unnecessary information (so is also taking up less space and therefore is less dominant) and is consistent to the overall styling.

Hi everyone, I'm afraid I have to agree with some colleagues here. I'm not a big fan of the new topic list view designs. Personally, I think it looks more confusing and very bruised. Furthermore, the design approach makes it look rather old to me. Do you plan to give customers the opportunity to decide on one design?

Hey, I wanted to let you know that we’ve seen and discussed al the incoming feedback. Later today we’ll provide an update on our plans on how to move forward with this! Meanwhile, keep sharing your feedback - we’ll take it into account! :)

Could it be possible to make the color difference between read and unread topics more clear? Or am I able to adjust this myself? This is a challenge especially when there’s a new topic with no comments, as “ N new comments” line is missing

Here’s an example (the two first topics are unread, the last one is read)

Our users are asking if the title in “read” topics could perhaps be in a lighter shade of gray…?

I have some questions and suggestions for article images, titles and excerpts:

Article images: In the screenshots the article image on desktop has an aspect ratio of 16:9, on mobile it is close to 16:9, but a bit different.
The actual aspect ratio on mobile now is close to 21:9 (tested on Samsung Galaxy S10). Why the discrepancy between preview and live? Will you fix this and use the expected 16:9 (i.e. the same aspect ratio as for desktop)? 

Article labels: The smaller the article images in the topic list view, the more dominant the article labels are, especially when the labels contain more than 10 characters. Are there plans to review this and maybe move the article label or change the styling to make it less dominant?

Titles: I suggest to have a maximum length for the displayed title - like you do for the excerpts. Because sometimes (inexperienced) users still put their whole question into the title. Without limits, the title can easily get 6 or more lines long.

Excerpts: In the screenshots you showed that for articles with an article image there will be three lines of text excerpts on desktop as well as mobile. But the live behaviour is different, only two lines are shown on desktop and mobile. Is this expected?

Hey all,

We realised we made a sensitive UI change in the community. Changing a layout you have been using for years is challenging (and difficult to keep everybody satisfied).

We shared our plans, designs, and research on the community. Prior to the release, we announced a release date. But we acknowledge this was not sufficient: It’s hard to assess changes from a piece of text and a static design – a real-life example where you could see and test changes was lacking. Once rolled out we saw that not all changes worked out the way we expected them to be.

We’re grateful for our community (you) and the feedback you provided so far! It’s great to build better products together with you. 

I’ll try to keep it shorter now and provide an update on our plans moving forward.

UI Changes

The new list view is here to stay! We’ll make the following changes based on your feedback:

• Make cards more spacious by increasing paddings and bringing big avatars back on desktop/tablet view

• Make labels and idea status smaller, and move them to the end of title, so that titles can be aligned vertically and easier to scan (this also applies to articles with featured images)

• Remove rank title styling to make everything easier on the eye

• Use border color for the dotted line below the category name to make this element more calm

• Add 4px radius to images in article cards to make them less harsh and consistent with rounded avatars and buttonss

• Re-enable ‘unsubscribe’ functionality on the user’s subscription/favorite page 

• Improve aligment of icons

Here’s a view of the new listview when the UI changes have been implemented.

We decided to keep the new ideation ‘vote/upvote’ button as it provides a better layout for quick scan. We also believe that this style represents a common UX pattern for upvoting, which is used by other popular platforms like HackerNews, Reddit and ProductHunt.

We’ll investigate the following feedback:

• ‘phrases’ mode not working on topic list view

• maximum length for displayed titles

The changes mentioned in this update will be rolled out automatically to the list view in the coming days. We’ll keep on iterating on the feedback we get along the way!  Updates on this matter will be shared here on inSpired.

Hey @bjoern_schulze ,

Thanks for your feedback, really appreciate your detailed checking. 

About the image ratio you mentioned:

Article images: In the screenshots the article image on desktop has an aspect ratio of 16:9, on mobile it is close to 16:9, but a bit different.
The actual aspect ratio on mobile now is close to 21:9 (tested on Samsung Galaxy S10). Why the discrepancy between preview and live? Will you fix this and use the expected 16:9 (i.e. the same aspect ratio as for desktop)? 

The featured image in topic list is respecting our Visual Guide. The actual ratio of the featured image is 9:4. We use this radio in both topic page and topic list on mobile. On desktop/tablet, featured image is cropped into 16:9 (65% of the center part will be shown) so that text won’t be squeezed too much by the wide image.

Feedback for the vote button: The vote button on the new topic list view isn’t consistent to the vote button on the topic page.

My expectation is that the inactive vote button pulls the colors from the “Toggle button (inactive)” settings and the active button pulls the colors from the “Toggle button (active)” settings. That’s how it is done on the topic page.

Instead it doesn’t use button color settings at all, but the “Branded color” and “Border color”.

@xiaoyu-shen Thanks for the explanation! So the two basic aspect ratios on inSided remain 9:4 (original) and 16:9 (for most of the teasers)?

The latest UI changes mentioned in my update here have been rolled out

The unsubscribe icon on the subscription page is restored, the alignment of the icons will be fixed shortly

Thanks for the quickly developed changes!

I have some feedback from my community regarding the category type “News”. In this category type all content is sorted by the articles’ publish date. A few users already sent “bug reports” that the sorting would be wrong - when it isn’t.

One reason: Users have learned that content ist sorted by last activity. And because the topic list on the category type “News” looks the same as for “Ideation” and “Default”, the users’ expectation is to have the same sorting behaviour.

Another reason: The publish date isn’t displayed at all on the topic list. The only timestamp available is “last activity”, so mixing this up is an easy thing to do.

That’s why I propose to make UI changes for the topic list of the category type “News” in the near future:

• Different look and feel to “Default” and “Ideation” category types
• make more use of the article images (have a more magazine style layout)
• display different meta information (e.g. publish date instead of last activity timestamp)