Invision Community 5: Dark mode, accessibility, performance and mobiles!

[Ehren]

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.

 

New traditional header design

In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 

Accessible interface

The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).

 

Elements are highlighted while navigating with the keyboard

 

Dark mode

Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.

By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 

 

Performance

Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!

Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.

 

Mobile UI

With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.

A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5

 

A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.

We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

View full blog entry

[Chris027]

Very nice. 
 

One thing I’d love to see is the ability to restrict dark mode to specific user groups. This would be nice because we sell subscriptions that remove advertisements. Dark mode works great for subscribers, but for those who see the ads dark mode would make the ad images look really strange. 

[My Sharona]

Regarding the navigation areas. From the verbiage used and the video itself, it appears that with the horizontal header, there is now only a Text Logo. Does this mean that gone is the ability to utilize an image within the header? Perhaps an ability to still use the background area of the header for your sites logo?

[abobader]

Great work @Ehren and well done!

[Ehren]

Just now, My Sharona said:

Regarding the navigation areas. From the verbiage used and the video itself, it appears that with the horizontal header, there is now only a Text Logo. Does this mean that gone is the ability to utilize an image within the header?

Not at all, image logos are most definitely a thing. Next weeks video will showcase that in detail 🙂 

[My Sharona]

3 minutes ago, Ehren said:

Not at all, image logos are most definitely a thing. Next weeks video will showcase that in detail 🙂 

Great! Keep up the good work.

[media]

Wowwwww... great improvement.... keep up the good work...

[Cedric V]

Brilliant work ! Loving the progress.

 

Can we also round up an applause for the frequently in depth updates Invision is bringing? Something that doesn’t need to go unnoticed. It’s one thing to keep working on v5, but keeping us informed with a top notch video, is equally as important!

 

Well done team!

[Clover13]

Very nice work @Ehren!  Lot of thought put into the changes and seeing those good ideas come to fruition! 

The only stickler I saw for my sites is we use a sticky footer ad which could become a conflict with the layout with the mobile menu at the bottom.  Would be great to have an option to put it up top maybe.  Otherwise, I'd imagine it can float above the footer ad if needed with a little CSS.

Smart UX with the sign in and sign up buttons bubbled to the primary view when in guest mode!

System preference dark/light mode is excellent as well to tie into a user's natural device preferences!

On the tech side, that massive JS reduction should help tremendously!  I've been finding a lot of ways to do things I want with CSS and avoiding JS libs as well.  Great stuff!

[Rikki]

Looks great, good job on tackling some of the oldest bug bears 🔥

[Ocean West]

[Claudia999]

Now I'm so excited to see what Pages looks like.

[TheAccountant]

[Randy Calvert]

How about something like this to stay safe? 

If I need something formal, can I get away with the following?

 

Edited October 11, 2023 by Randy Calvert

[Robert Angle]

V5 has me excited. Can't wait for 2024 to get here now 🙂

[Joel R]

Questions:

1. Search modal - Does this entirely replace the Advanced Search? I like the new search.  Modern users are accustomed to simpler search bars with contextual filters, not full page searches with 20 options.
2. Forum Icons - The little houses.  Are those icons or uploaded photos? In generla, support for FA6?  
3. Website Slogan - I'm guessing this is static?  Like, can we have rotating messages "G'Day Mates" and five seconds later "Where's your croc suite?"  
4. Visible Focus Rings - This came out from nowhere, would love to understand the company's perspective behind this feature.  I'm scratching my head because it's not applicable at all for mobile or tablet. This benefits power users on desktop and ... maybe developers?  
5. Mobile Bottom Navigation - Customizable per group or hardcoded?  

[Ehren]

9 minutes ago, Joel R said:

Questions:

1. Search modal - Does this entirely replace the Advanced Search? I like the new search.  Modern users are accustomed to simpler search bars with contextual filters, not full page searches with 20 options.
2. Forum Icons - The little houses.  Are those icons or uploaded photos? In generla, support for FA6?  
3. Website Slogan - I'm guessing this is static?  Like, can we have rotating messages "G'Day Mates" and five seconds later "Where's your croc suite?"  
4. Visible Focus Rings - This came out from nowhere, would love to understand the company's perspective behind this feature.  I'm scratching my head because it's not applicable at all for mobile or tablet. This benefits power users on desktop and ... maybe developers?  
5. Mobile Bottom Navigation - Customizable per group or hardcoded?  

Hey Joel,

1. The advanced search page is still available. The search modal is just an "enhanced version" of the drop-down filter menu which we currently use in version 4.

2. We'll have a lot more information on this in a future update 🤫 But to answer your question, they're FA 6 icons.

3. Correct, this is static. You could use your own javascript code to target the element and change the text every x seconds, but it's not a feature which is coming with version 5.

4. "Focus rings" for focused elements are very important for keyboard users. It's definitely not for power users or developers, but rather users who find it difficult to browse your site with a mouse. Imagine a condition which affects motor control such as Parkinson's disease, or someone who has a broken arm - both of those users would likely find it more convenient to browse using the TAB key instead of using a mouse.

Focus rings only appear when pressing the TAB key on your keyboard (they won't appear when clicking with a mouse), so they've been added purely to improve accessibility for those who need them. Accessibility took a back seat in version 4, however we've placed a higher priority on it with version 5 and will be improving it further in future updates. This is a desktop only feature, but will also work on iPads if a bluetooth keyboard is connected.

5. Currently hard-coded, but customization is currently on my "would be nice to have list". Certainly something to consider.

[Ehren]

13 hours ago, Clover13 said:

Very nice work @Ehren!  Lot of thought put into the changes and seeing those good ideas come to fruition! 

The only stickler I saw for my sites is we use a sticky footer ad which could become a conflict with the layout with the mobile menu at the bottom.  Would be great to have an option to put it up top maybe.  Otherwise, I'd imagine it can float above the footer ad if needed with a little CSS.

Thanks @Clover13!

Relocating your ad would likely be the best solution here. You could technically use CSS to reposition the mobile menu, but a top menu doesn't really meet the goals of an "app-like" interface which we've been aiming for. It's not a setting which will come baked in with version 5, but it's certainly achievable with a couple of lines of CSS 🙂

13 hours ago, Aerodynamic said:

Brilliant work ! Loving the progress.

 

Can we also round up an applause for the frequently in depth updates Invision is bringing? Something that doesn’t need to go unnoticed. It’s one thing to keep working on v5, but keeping us informed with a top notch video, is equally as important!

 

Well done team!

I appreciate that, thanks Cedric! The amount of time that goes into a quick 4 minute video is more than I'd like to admit haha! 😅

[Day_]

These theme updates are making me extremely horny, not gonna lie. 😍

[Matt]

Just now, Day_ said:

These theme updates are making me extremely horny, not gonna lie. 😍

That quote is going straight into the top of our marketing.

Also, may I recommend:

Honestly, though during the initial building phases back in early summer we used to have a weekly sync meeting with Ehren as he's in Australia and everyone else is not and he'd take us through concepts, and ideas and we'd all just say 'wow' for about 20 minutes.

Now I just send him badly annotated screenshots and broken HTML I mangled at 2am his time while he's sleeping.

[Alzar]

Holy f***, that is incredibly nice.

Y'all are knocking it out of the park with v5

[Matt]

Getting some great quotes for the marketing material, thanks!

[The Old Man]

Really well done @Ehren 🙂

Reading through all these new features and improvements made for a great blog post! Clearly, lots of thought and positivity have gone into this side of IC5, and the accessibility improvements are always welcome.

Love the new traditional header layout, thanks for keeping that and for integrating the strapline which will save work. So relieved to read that we can still apply hero header backgrounds!

Can't wait to see how the light/dark theming configuration will look and work in the AdminCP with both as a single theme; I'm thinking of perhaps adjacent light and dark options for each of the theme's settings to reduce page navigation when creating/editing.

Please don't forget to include range sliders and colour with opacity in the AdminCP theme settings. I'd like to see gradient settings and support for the existing stock images option made available in the image upload settings too.

A section for user customisation out of the box would be awesome, somewhere where we could add a background or form setting that each user could use to personalise the theme for themselves. e.g. users could choose a hero background image without having to select a whole theme just for the one they want, and the admin wouldn't have to add 10 themes with 10 different header images.

Any plans to add Unsplash to the Stock Images API?

Nice job and thank you!

[Matt]

AdminCP theme settings 🤔

Where we're going, we don't need no ACP theme settings.

Next week's blog should really help clear up what theming looks like in v5.

Spoiler: It'll be very different.

[PoC2]

Version 5 is looking very, very good.

Thanks to all the team for their hard work!