By Uzzal Raz Bongshi on Tuesday, 19 December 2017
Category: News & Updates

New Joomla 4.0 User Interface : Useful or Not?

You might have heard the news regarding- Upcoming Joomla 4. A bunch of new features is on the way with a brand new User Interface. In this major update of Joomla- color, login page, menus, typography along with entire dashboard will be redefined. You will find a massive change in its Entire Interface including the drop of some menus and options.

Since some of the previous menu items and options have been evicted, you may think- Aha!! Fewer options, Less complexity. But have you ever think of it- the newly defined placements for some existing options may kill a significant amount form your allocated working time on the project you're working on or wish to work on?

However, it takes time to be familiar with a new interface, similar to be used to in a new environment.

According to Joomla's official announcement- more changes are coming for both UI and features in order to provide the user a new working experience. You cannot decide whether it's right for you or not until you see the changes.

Now, let's check out how Joomla 4.0 is going to look like. Will it going to be useful or not?

        <h2>
<span>The Style</span></h2>     <amp-img width="1024" height="512" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_typography.png"></amp-img>
        <h3>
<span>Typography</span></h3>        
        <p><span>Content legibility is a very important part of a fully functional and usable GUI. Therefore, in Joomla 4.0 <strong data-redactor-tag="strong" data-verified="redactor">Roboto</strong>&nbsp;is chosen as the new base font for the backend-template. Roboto offers plenty of flexibility and a great feeling including use of light, thin, bold, regular, medium and black weights with matching styles.</span>&nbsp;</p>      
        <h3>
<span>Colors</span></h3>        
        <p>The colors in admin dashboard design is chosen with accessibility in mind. According to the <a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a> guidelines color ratio of the foreground color and background color of the text has to be at least the ratio of 4:5:1 or higher. Therefore dark blue color is decided for the sidebar and light grey color for the whole user interface.&nbsp;</p>      <amp-img width="907" height="413" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_Joomla-pattern.PNG"></amp-img>
        <h2>
<span>New Pattern For Joomla</span></h2>        
        <p>With the release of backend template draft, the Joomla pattern is also premiered. Thanks to <a href="https://twitter.com/chiaraaliotta?lang=en">Chiara Aliotta </a>for the amazing new pattern. The pattern is included on the login page and to some degree on the background in the backend. </p><p>This new pattern is a source of emotion on this field of technical subject. Pattern represents the entire community as a network, where no one is alone.&nbsp;</p>     <amp-img width="1276" height="848" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_login-screen.PNG"></amp-img>
        <h2>The Login Page</h2>     
        <p>In Joomla 4.0 another attraction is the login page on the backend. On the login screen, there is a default new Joomla pattern. But if you want to customize the screen, you can upload your preferred background image in the Joomla template manager. </p><p>There is also an option to upload the logo to the site. The logo improves the identification of the site backend for who switch between many Joomla installations. If no logo is used, the site name will be shown in the white banner above the login form. </p><p>A direct link to your site and a help link that leads you directly to helpful resources is also added to the login page.&nbsp;</p>     <amp-img width="1279" height="849" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_Dashboard.PNG"></amp-img>
        <h2>The Dashboard</h2>      
        Dashboard got a brand new look in Joomla 4.0. You can take the full control of dashboard and customize it by adding own modules. The new dashboard also allows you to drag and drop the modules to your favorite place.<span class="redactor-invisible-space">​</span>      <amp-img width="1280" height="846" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_Users.PNG"></amp-img>
        <h3>
<span>Users</span></h3>     
        In Users option, you can easily manage all the users. The management of users will be more easier with the new look. User access settings are a more general setup, so from now on you will find them in <strong data-redactor-tag="strong" data-verified="redactor">System Settings Menu Item</strong>.<span class="redactor-invisible-space">​</span><span class="redactor-invisible-space"></span>       
        <h2>Manage Menus</h2>       
        The menus now looks more beautiful with new UI and design. Every menu item is now more visible with new menu adding interface, filtering options and all other stuffs. <span class="redactor-invisible-space">​</span><span class="redactor-invisible-space"></span><span class="redactor-invisible-space"></span>      
        <h2>Manage Articles</h2>        <amp-img width="1280" height="848" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_Buttons-reducedd.PNG"></amp-img>
        <h3>
<span>Buttons Reduced</span></h3>       <p>For more space and tidy interface all the unnecessary buttons are pulled out on&nbsp;Article manage page. <strong data-redactor-tag="strong" data-verified="redactor">Why would you see a button, when it's not necessary?</strong> From now on all options and buttons will appear contextually. </p><p>So when you select an unfeatured item, you will not see the unfeature option. When you publish an article, you will not see publish button.&nbsp;</p><amp-img width="1280" height="858" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_create-new-articles.PNG"></amp-img>
        <h3>
<span>Create New Articles</span></h3>       <p>The interface of article creation has got a new look with new colors. The menus and text editing field will offer you quick access over images, permission, article management and everything.&nbsp;</p><amp-img width="1277" height="855" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_article-editing.PNG"></amp-img>
        <h3>
<span>Article Editing</span></h3>       <p>Now quickly compose your articles with the popped up text editor. The 3rd level sidebar is gone to provide you space to edit an article. It's time to take the advantage of contextual change of the editor. </p><p>If you select a link, you will have link options on the right side of the screen, and if you select an image, all the image options will be shown on the image options toolbar.&nbsp;</p>
        <h3>
<span>Mobile View</span></h3>       The interface of Joomla now looks excellent on mobile as well. Access your Joomla site from anywhere more conveniently with the mobile version.<span class="redactor-invisible-space">​</span><amp-img width="1278" height="848" layout="responsive" src="images/easyblog_articles/518/b2ap3_large_backend-redefined.PNG"></amp-img>
        <h2>Backend Redefined</h2>      <p>Fewer Choice, less confusion. Considering this, the new backend is designed. The number of main level item are reduced to a minimum. Now the main tasks in the menu sidebar consist of User, Menus, Content, Components, Settings, and Help. </p><p>For those who are not comfortable with symbols, will be able to toggle the menu and show the name of each item of the menu. </p>

The top bar of the page will help you to recognize your page. You can also replace the default Joomla brand logo with your custom logo. 

Quickstart Icon and Notification

On the top right side, there is a configurable icon named "quickstart." You can add your most needed actions and links at here like Create new article, create new categories or also 3rd party links and actions.

If there are any important notifications available, notification icon will let you know it. The user icon next to notification icon will allow you to access your user setting and logout.

Accessibility Support for Joomla

In the upcoming version of Joomla 4, there will be accessibility support for physically disabled users. They will be able to access the menu easily with special tools like mouth stick and also can customize the colors of the template. 

Menu Items Reduced

The menu items are now divided by adding a plus symbol next to each menu item. So from now on just click on the plus and make something new.

We all have great expectation regarding Joomla 4 and there is yet a lot of changes to come. Till now there is only two alpha releases. You can see whole Joomla 4 administrator dashboard project form here.

Stay with us for getting every single news updates regarding Joomla 4. You can share your thoughts and give your valuable feedback through comment.

Leave Comments