Today we begin previewing a beta of some fairly substantial changes to our user interface.

Change is always hard and we don't take it lightly; for the last three months this work has been ongoing in the background, internally we've been using the new UI for a couple of weeks. There are things we like about it, and some things we don't. What's more important than our opinion, is yours and so we are putting it out there to listen to your feedback and make sure we get this right.

See the bottom of this post with instructions on how to enable the changes and how to give us feedback.

Why change?

It's important to understand why we're making these changes. Over the last year, Gitter has grown and evolved. When we first launched, we made it incredibly simple for people to create chat rooms for repositories on GitHub. Today we have nearly 350 000 people across nearly 40 000 public communities.

Beyond single chat rooms

Most fundamentally is that communities are growing beyond single rooms and our current user interface paradigm does not facilitate this really well at all. When joining a room, it's pretty much impossible to know there are other rooms in the same community and in fact many people don't even know you can have more than one room in a community!

This is why we've introduced a new element to the contact list that will filter your rooms by community, favourites and people. You can still view rooms across the whole network from the All Conversations view.

Finding rooms is hard

Search is currently tucked away in the top right corner of the application. Most people don't even realise you can use this to find your contacts or any room/community on Gitter. By moving this to the left side of the screen, we hope this is a lot more obvious. Here you can also find our Explore section where you can browse the thousands of rooms on Gitter.

We will be making further improvements to both the capability of search and Explore over the coming months.

More space to chat

Many people have wanted a way to manually hide or collapse elements on the screen to give more space for chat messages. We also realise that adding 80 pixels of additional width to the conversation list takes up more space. As a result, we've introduced the ability to collapse and expand the list by using the little toggle button on the bottom left of the screen.

If people like this, we will also look to add this to the right toolbar in the future too.

How to enable the new UI

Depending on how you use Gitter, there are a few ways to enable the changes.

Using Gitter in your browser?

Simply visit next.gitter.im and make sure the big giant Next switch is enabled, then find the left-menu toggle further down the screen and enable it. Refresh Gitter and you should be good to go.

Windows or Linux App

If you use Gitter on Windows or Linux, it's a little fiddlier than that. Click on the Gitter menu in the top-bar and make sure Gitter Next is enabled. Then click on Developer Tools which will bring up a window and select the Console tab. Find the select box that defaults to <top frame> at the top of the console and change the value to mainframe. Once that's done, paste the following code into the console and press Enter.

document.cookie = 'fflip=' + encodeURIComponent('j:' + JSON.stringify({ 'left-menu': true })) + ';path=/;expires=' + new Date(Date.now() + 31536000000).toUTCString();
location.reload()

Mac App

Make sure Enable Developer Tools is enabled from the Gitter menu in the top bar. Right click anywhere in the application and choose Inspect Element. This will bring up a web console, just paste the following code snippet into the console and press Enter. The app will refresh after a second or so.

document.cookie = 'gitter_staging=staged' + ';path=/;expires=' + new Date(Date.now() + 31536000000).toUTCString();
document.cookie = 'fflip=' + encodeURIComponent('j:' + JSON.stringify({ 'left-menu': true })) + ';path=/;expires=' + new Date(Date.now() + 31536000000).toUTCString();
location.reload()

Let us know what you think

We'd love to chat about your thoughts. Please join us in gitterHQ/change and let us know what you think. Please note this is very much an early beta preview and will evolve based on your input.

You can find a list of issues here, and please feel free to create new ones.