Introducing the New Look of the Topic Page

Design innovation isn’t always about adding new functionality and features.  It’s very often about taking a fresh look at what your users are already doing to determine ways to make their experience even easier.  Earlier this year we shared our product roadmap with you and one of our priorities for the year was to improve our user experience.  We’re very happy to announce that we took our first major step in that direction today by releasing a newly designed topic page!  All communities on all plan levels will now be on the new design.

The topic page (questions, problems, ideas, praise, updates) and associated topic creation page are the core interactions of the site — it’s where the conversation happens.  These pages have been with us since we started the site close to 4 years ago.  The fact that they haven’t changed much over that time certainly speaks to how remarkably resilient the old design was.  But taking a fresh look, we found that there were many opportunities to improve the user experience.

We wanted to both introduce you to the new design and give you a glimpse into some of the thinking behind it.  The three main goals of the re-design were to 1) streamline the user experience, 2) further encourage conversation, and 3) better expose social sharing features.  Let’s explore each of those goals and what changes you’ll now see in your communities.

Streamlining the User Experience

When it comes to design and usability, less is often more.  The most important tasks should be optimized for in the design, while less important or less frequently performed ones should be easy to complete but given a secondary affordance.  Over the years, features and functions were added to the topic pages and the result was a cluttered, busy design that was often getting in the way of users.  A major goal of the design was to streamline the user experience by removing this clutter.  This resulted in changes to both the topic and community overview pages.

Topic Page
On the topic page, we started by removing visual distractions.  The use of excessive wording (everything was described with a sentence), inconsistent labeling, and inconsistent placing of actions led to a tremendous amount of visual noise on the page.  Noise gets in the way of users being able to quickly orient themselves with the conversation (a precursor to active participation).  We did several things to address these issues.

First, we shortened much of the labeling and wording on the page.  Sentences were shortened to phrases or just keywords (e.g. “I think this answers the question” is now “good answer!”).  Next, we toned down the iconography until users take action.  The “comment” and “good answer” actions appear with flat gray icons until hovered or clicked on.  Third, we consolidated actions into rows or columns.  You’ll now see all of the reply level moderation actions neatly arranged in a column to the right of each reply or comment.  Fourth, we only reveal those actions when users are ready to take them by exposing them on hover.

Community Overview Page
We also made some slight changes to the community overview page.  We removed the “Start a topic” button from next to the search box.  The button was almost never clicked – less than 1% of clicks on the page in fact – and was often confused with a submit button for searching.  If users want to start a topic, they primarily do so using the “quick compose” feature on the overview page.  This makes sense for users, but also makes sense for community managers as that flow includes search results to intercept and prevent duplicate posts.  We added a new “Create a new topic” button on the topic browse page — just in case users don’t find what they’re looking for as they navigate the community.

Encouraging the Conversation

The conversation between and amongst customers and companies is at the core of Get Satisfaction.  We not only wanted to get the clutter out of the way of that conversation, but also to encourage those interactions to happen even more.  To accomplish this, we made changes to the topic creation page, comment interaction, voting, and labeling.

Shorter Topic Creation
On the topic creation page, we tried as much as possible to stay “above the fold”.  We’ve received repeated feedback over the years that the topic posting process “feels” long.  To address this, we first switched the order of the topic subject and description to make the order more consistent with how the topic will actually appear.  We moved the product and tags to the side in a more compact form.  And finally, validation and prompts were moved inline with each of the form elements rather than having them listed at the end of the form.  The result is now a shorter feeling process for users to participate in the conversation.

Improved Comments, Sentiment, and Voting
On the topic page, we started by improving the comment interaction.  You’ll now find comments styled differently than replies with a light gray background.  And once a comment stream has been started on a reply, we now have an open comment box to encourage users to join in the discussion.  Next, we wanted to better highlight the sentiments of the conversation.  So we moved the mood selection and votes on replies out to the left to better highlight them.  The different conversational elements are now much clearer.

Labels That Support More Community Types
As Get Satisfaction has grown, our customer base has moved well beyond companies.  We now find non-profit organizations, government institutions, schools and colleges, and open source projects among our customer list.  The “Company” and “Employee” specific labeling we had on the topic page was inconsistent with the conversation these communities were trying to have with their members.  As a result, we’ve changed these labels to support more communities.  The labels “The best answers from the company” and “Company Participation” now read “Official Responses” and “Official Representatives”.

The +1 Button
You’ll also now notice a new button on topics labeled “+1”.  We decided to change the topic level “me-too” action to “+1” instead of the wordy “I have this question too”.  We debated alternatives quite a bit, but ultimately decided on going with “+1”.  It’s increasingly becoming digital short-hand for agreement and support on the web (as evidenced by Google’s recent announcement to use it as well), translates into other languages easily (in fact requiring no translation at all), works across multiple topic types, and is extremely compact in form.  We decided to keep the “Follow” action separate for now (although we considered consolidating the two) as it was previously somewhat hidden off to the right behind a tab.

Making it Easier to Leverage Your Social Network

We’ve long had social sharing features on the site.  For quite a while now, you could share a topic via Facebook, Twitter, email,  or social bookmarking sites.  The reason for this is obvious.  By spreading the word about a particular topic to the people in your network, you increase the likelihood that the topic you’re interested in will be resolved.  If your goal is to get satisfaction, leveraging your network is the smart thing to do.

The problem is that we were making this difficult for users.  The social sharing features were somewhat hidden on the right side of the page.  And many of these, most notably the social bookmarking sites, just weren’t appropriate for the type of content that’s generated in our communities and hence received minimal usage.

To address this, we moved social sharing front-and-center in the topic page.  In fact, right to the top of the page depending on the state of the topic.  You’ll now see Facebook Like and Tweet buttons right next to the topic description:

And when a topic doesn’t have a status, we now provide a call to action for users to share the topic to help get it resolved:

Setting the Stage for Continued Improvements

The team has been hard at work on this re-design. so we’re obviously excited to get these new designs out into the hands of users today.  But these changes really set the stage for a lot of improvements to come in future releases.  The localization of the UI should be easier as the less wordy design equates to less language translation that we’ll need to do.  We also hope to incorporate social sharing directly into the flow of content posting.  For example, share a new topic on Facebook or Twitter as a user is posting it.  The engineering team also made some great performance and architectural improvements to the topic page that will make future changes much easier to make.

What Do You Think?

We’re looking forward to hearing what you think of the new design.  Please share your thoughts in our community (and try out the new design in the process): Get Satisfaction.

Posted in General
8 comments on “Introducing the New Look of the Topic Page
  1. Kevin Yank says:

    A great deal of thought has definitely been put into the new layout; unfortunately, it’s obvious the same level attention to detail was not applied to the visual design. The new design looks terrible!

    Whereas the previous design projected a light, cheerful, and colourful appearance, this new one has sharp edges, unbalanced margins, difficult-to-read text … it’s just ugly and un-inviting.

    It’s nothing a bit of visual design TLC couldn’t fix, but if this is the future of GS, we’ll be looking to move our support community elsewhere.

    • Steve says:

      Hey Kevin, We’ll definitely be doing additional iterations on the visual design. As you can tell, the focus was on improving the usability via interactions. So there is more to come on the visual side! And it’ll be consistent with the “human” feel that the rest of our app has. We obviously don’t want to be Jargon’y. Appreciate the feedback.

  2. David Ross says:

    I like everything except the Arial Narrow for the big topic headlines. I’d stick with regular Arial or Helvetica Neue. Arial Narrow just looks ehh, junky.

  3. Great guys, the limitation of the amount of reply per topics is gone? You have to solve some login issues. I just clicked +1 without being logged in and then went to make reply to the topic in the same page and both buttons freeze like they were loading but nothing happened, after some minutes I noticed I wasn’t logged in, tried to log in but nothing happened decided to go to you home page and then return logged in, it worked. Very annoying.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Request a Demo
Your Awesome Hosts

David Rowley
CTO

Steven Pal
Dir of Consumer Products

Ramya Krishnamurthy
Dir of Business, Data Products

Categories
Join us on Facebook