As we were entering the second half of 2014 it was clear AVChat’s looks were up for renewal. Many clients had already referred to its looks as outdated and wanted a more modern look but we also felt a strong need to bring its design in line with today’s best practices.

Thus for the latest build of AVChat we’ve made the biggest redesign since the initial release of AVChat 3.0. We’ve redesigned it with a simple philosophy in mind: everything needs to be clear, simple and consistent. We think we’ve achieved that:

AVChat 3.5 Group Video Chat New Look

AVChat 3.5 Group Video Chat New Look

Hand in hand with changing the design came adopting the ability to have themes. I am proud to announce that AVChat now supports themes and, to show off the feature, it ships with 2 themes: dark and light (standard).

Another area of focus was adopting sequence based version numbers for AVChat builds. If until now, we referred to each new version by its build number (the last AVChat release was build 3396), from now on, we will primarily use sequence based version numbers. To symbolise the big steps that AVChat has taken from its 3.0 release back in 2009 we will name today’s build as AVChat 3.5 (build 3517).

That said let’s get started in presenting the new design and UI.

The Login Screen

Keeping in mind the approach of clearer elements and consistency, we’ve created the following look for the Login Screen:

Login Screen

We have removed the gender radio buttons and replaced them with a drop down list. This will make it easier to pack many gender options in a tiny space. Some clients replace the gender setting with, for example, a location setting with many options. This design choice will make their lives a lot easier. Genders will continue to have icons assigned to them, but they will only be visible in the users list and in the status bar. Genders now also have colours associated with them but more on that later.

Here’s a view of the Sign in or Register area:

Sign In or Register

Sign In or Register

The Status Bar

After you enter the chat, you will notice the new status bar. It now has the same width as the chat. The buttons that you find here have affect the entire chat and we wanted to convey that.

Also depending on the gender selected the new thumbnail will have a different outline color (shows up on mouse over) that will correspond with the outline color set in genders.xml, for more details view the documentation.

Here’s how the status bar looks:

Status Bar for user

Status Bar for user

Status Bar for admin

Status Bar for admin

The Users List

The users list got quite an upgrade. Apart from the design change we have removed the users list side menu (sorting and type of users to show) and we introduced 3 tabs, one for each type of user:  all users in the room, users watching me, blocked users.

The default sorting mechanism  (alphanumeric, cams on top, time online and genders) can still be set via the  defaultSort setting in avc_settings.xml .

Here’s a view of the complete users list:

New Users List

New Users List

The user item got completely new icons and the thumbnails have been made circular giving the whole thing a much cleaner and modern look. On mouse over a small colored left line will be shown. The color corresponds with the color associated with that users gender ( the same way the outline in the avatar in the  status bar does):

Highlighted User Item

Highlighted User Item

The User Side Menu

Keeping the overall trend of the design the side menu has also been redesigned accordingly, new flat icons, better spacing between elements, simpler form:

User side menu

User side menu

The Webcam Windows

The allow access privacy modal has been changed in order to give more information:

Allow access to webcam modal

Allow access to webcam privacy modal

For the actual webcam windows, both for the broadcaster and the viewers, we have eliminated the borders and as a result the the video has a bigger surface area and feels more integrated with the interface:

Webcam windows

Webcam windows

 The Textchat Area

The two major changes that have been made to the textchat area apart from the color changes and border removals, are the new look of the tab bar and the lower toolbar area with the text input.

The tab bar may feel familiar because you have already seen it in the login screen 🙂

New tabs

New tabs

What you don’t know is that we have also changed the notifications styling:

New notifications

New notifications

Let’s focus on the lower part of the text chat area. Here you can see that some of the buttons were removed:

Toolbar

Toolbar

The missing buttons have been moved to a whole new window, the new Chat settings window, that can be opened via the new cog button cogBtn:

Chat Settings window

Chat Settings window

The Send File Window

The send file window has been updated to reflect the new design but has some new functionality: the user can directly see what types of files are accepted for upload and the maximum upload size that is permitted:

New Send File window

New Send File window

Themes, themes, themes

Along the new design changes we are proud to announce the introduction of AVChat themes.

AVChat now ships with two default themes: light and dark. These can be found in the new themes folder. Each theme has a separate style.xml file. Here’s how they look in comparison:

Theme Light and Dark

Theme Light and Dark

If you wish to know how to change between themes or how to make your own custom theme you can read the AVChat themes documentation.

Check out The New Design in the AVChat 3.5 demos

Our AVChat demos have been updated with AVChat 3.5 and you can check them out at http://avchat.net/demos/ .

 How To Download And Upgrade

You can download this new build of AVChat from your private client area. You can login at https://nusofthq.com/c/ .

Steps to upgrade old AVChat copies:

  1. make a backup of your current AVChat installation folder
  2. overwrite all old client side files (for the settings file and the language files, you can just add the new settings and the new translations to your current settings and language files.)
  3. make a backup of your media server files
  4. overwrite the media server files and restart the media server
  5. clear your browser cache and access AVChat 3.5

If you have issues with it after upgrading contact AVChat’s tech support through your client area or send us an email at support@nusofthq.com.

If you want us to upgrade your existing AVChat installation to 3.5 for you can purchase our Update AVChat Service ($59) from http://avchat.net/services#update. If you’re looking for a clean install you can just purchase the Pro AVChat Install Service ($29) from http://avchat.net/services#installavchat.  Once you make the purchase just contact AVChat’s tech support through your client area or send us an email at support@nusofthq.com and we’ll take it from there.

Small Update AVChat 3.5.1 Released

This update fixes a couple of small issues related to the newly added themes.