# Kiwi IRC web client design

**URL:** <https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258>\
**Category:** Interaction design\
**Created:** [August 3, 2017, 7:45pm UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258 "2017-08-03T19:45:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![buovjaga](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@buovjaga](https://discourse.opensourcedesign.net/u/buovjaga)\
**Post date:** [August 3, 2017, 7:45pm UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/1 "2017-08-03T19:45:45Z")

</div>

Are there any IRC enthusiasts out here who would like to be involved in dragging the old beast to the 21st century?  
The new incarnation of Kiwi IRC is starting to be pretty solid: [https://kiwiirc.com/nextclient](https://kiwiirc.com/nextclient)  
The lead developer Darren aka [prawnsalad](https://github.com/prawnsalad) could really use a hand with the interface presentation and layout.

I really believe with this modern web client approach we can get rid of the image of IRC as a clunky and opaque interaction tool. Having the power of server-side makes all sorts of magical things possible (storage, data processing etc.). The ideal would be to GUIfy everything, so the non-techy user will not have to face any frightening /commands. I guess the hardest will be inventing a GUI for even the ChanServ commands like setting various flags for channels.

Perhaps the first step would be conducting a competitive analysis of new and emerging chat platforms.  
Listing open source ones:

> **[Mattermost: Open Source, Self-hosted Slack Alternative](https://mattermost.com)**
>
> Enterprise team collaboration and messaging that deploys on-premise or to cloud infrastructure under IT control.

  

> **[Chat for distributed teams](https://zulipchat.com)**
>
> Zulip combines the immediacy of real-time chat with an email threading model. With Zulip, you can catch up on important conversations while ignoring irrelevant ones.

  

> **[Rocket.Chat](https://rocket.chat/)**
>
> Rocket.Chat description

  

> **[Gitter](https://gitter.im/)**
>
> Where developers come to talk.

  
[https://sdelements.github.io/lets-chat/](https://sdelements.github.io/lets-chat/)  

> **[Liberate your communication | Riot](https://about.riot.im)**
>
> Communicate the way you want with Riot - a universal secure chat app entirely under your control.

Here is a quick route to Kiwi IRC’s channel using the WIP new client: [https://kiwiirc.com/nextclient/#irc://irc.freenode.net/kiwiirc](https://kiwiirc.com/nextclient/#irc://irc.freenode.net/kiwiirc)  
There is a theme builder in development, but it only deals with CSS: [https://kiwiirc.com/nextclient-themebuilder](https://kiwiirc.com/nextclient-themebuilder)

---

<div class="post-metadata">

**Author:** ![pdurbin](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/pdurbin/32/3478_2.png) [@pdurbin](https://discourse.opensourcedesign.net/u/pdurbin)\
**Post date:** [August 5, 2017, 12:14am UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/2 "2017-08-05T00:14:10Z")

</div>

Would it make sense to post this at [http://opensourcedesign.net/jobs/](http://opensourcedesign.net/jobs/) as well?

---

<div class="post-metadata">

**Author:** ![jan](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/jan/32/8_2.png) [@jan](https://discourse.opensourcedesign.net/u/jan)\
**Post date:** [August 5, 2017, 9:25am UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/3 "2017-08-05T09:25:24Z")

</div>

Absolutely, this is perfect to post on the job board. 🙂 @buovjaga can you ask prawnsalad to post it on our job board?

---

<div class="post-metadata">

**Author:** ![buovjaga](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@buovjaga](https://discourse.opensourcedesign.net/u/buovjaga)\
**Post date:** [August 5, 2017, 3:10pm UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/4 "2017-08-05T15:10:26Z")

</div>

[I posted it myself](http://opensourcedesign.net/jobs/jobs/2017-08-05-kiwi-irc-web-client-design) 🙂

---

<div class="post-metadata">

**Author:** ![htietze](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/htietze/32/49_2.png) [@htietze](https://discourse.opensourcedesign.net/u/htietze)\
**Post date:** [October 25, 2017, 8:56am UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/5 "2017-10-25T08:56:25Z")

</div>

Unfortunately there has been no activity regarding this topic. So let’s start with the start screen.

**Start screen**

Prawnsalad said it’s solved and will look like this [https://kiwiirc.com/nextclient/?settings=ws64rbgn43d](https://kiwiirc.com/nextclient/?settings=ws64rbgn43d)

I suggest to put the image into the background, make it blurry, and perhaps iterate through some variants. Could look like this:  
 ![mock](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/d4e851645320757c88bf737c36f3009b67d64bf4.jpg)  
(image taken from [https://publicdomainreview.org/2013/08/07/the-lost-world-of-the-london-coffeehouse/](https://publicdomainreview.org/2013/08/07/the-lost-world-of-the-london-coffeehouse/))

**Workflow**

Second topic is ‘the upper right part of the UI’ including account, system configuration, access to networks, and channels.Looks currently like this:  
 ![29063d76-5ed4-44f8-9812-0a6e2102208f](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/f1a39c7f6136224b1a80fae01148cf35855f81d2.png)

The functional requirements are

- Account
  - Forget settings

- Configuration
  - ~20 options to tweak the UI
  - definition of aliases (used as shortcuts for normal commands)
  - -\> settings are related to the account (or system?)

- Network
  - network address
  - user account

- Channels
  - overview and selection

I would reorganize the content and use the tabs for networks (given it becomes real tabs, today the view doesn’t change) and move all configuration things into the account area.

![mock](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/opensourcedesign/original/1X/34aef0f3f915512bb88d809efe7de4dc00900272.png)  
(Currently, the selected channel is indicated by a small bar with the drawback of indentation)

Prawsalad replied briefly that most/many users are connected to more than one server. Doubt that and suggest a survey/poll. But as an alternative the tabs could be vertically.

Another problem with the mockup is that all settings are cramped into the account section. Not bad IMHO, but if I’m wrong it could be solved with an overlay window. Basically I would keep the main view for the channel discussion.

---

<div class="post-metadata">

**Author:** ![prawnsalad](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/prawnsalad/32/399_2.png) [@prawnsalad](https://discourse.opensourcedesign.net/u/prawnsalad)\
**Post date:** [October 31, 2017, 12:47pm UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/6 "2017-10-31T12:47:14Z")

</div>

Hey Heiko, thanks for looking into this!

#### Start screen

As you mentioned, the start screen has been improved a lot since this thread was first opened - but there’s always improvements to be made!

With the demo link you linked to there is the info box on the right hand side. This info box is custom content that could be anything from text to images to links. Your suggested mockup has removed that section entirely so I’m not sure if you had something else in mind that would bring it back?

#### Sidebar - Account and settings

These settings are application-wide settings so hiding them under a user account menu would only make it harder to find and would be out of context.

Perhaps the account box is fine where it is, but the separator underneath it and the + (add network) and settings tab are making it look cluttered? Maybe just adjusting them in some way would actually clear it up.

#### Sidebar - Network tabs

I do think the tabbed format will be a few steps back in usability here. People are commonly connected to more than one network which means:

- Users would no longer be able to see all their channels at a quick glance.
- The tabs would start scrolling sideways so now its the channels + network tabs that are getting hidden.

Dwarf in #kiwiirc had done a very quick survey on how many networks people are connected to and found that most of them are connected to 2-3 networks.

---

<div class="post-metadata">

**Author:** ![htietze](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/htietze/32/49_2.png) [@htietze](https://discourse.opensourcedesign.net/u/htietze)\
**Post date:** [November 10, 2017, 8:24pm UTC](https://discourse.opensourcedesign.net/t/kiwi-irc-web-client-design/258/7 "2017-11-10T20:24:34Z")

</div>

Sorry for the late answer, messed up with the right tracking mode.

> [@prawnsalad](#):
>
> Your suggested mockup has removed that section entirely

I’ve put the image into the background; don’t see need for an info box with additional content.

> [@prawnsalad](#):
>
> These settings are application-wide settings so hiding them under a user account menu…

…was exactly my idea :-). We talked quickly on IRC and all boils down to the question what kind of user you address. IMHO it’s someone who never tweaks settings.

> [@prawnsalad](#):
>
> People are commonly connected to more than one network…

Doubt that with the same argument. But it @Dwarf thinks his poll is representative we should take that for granted. How about vertical tabs? Or icon-only tabs with tooltips. Or left/right scroll buttons for more than two networks.

Actually the tabs go along with the configuration. If you want to keep those things prominent it doesn’t matter how networks are accessed. So bouncing the ball back to you. What questions are open?

And ideally we get more opinions on the topic!