Article
0 comment

Whitespace – Regain distraction-free working in SharePoint

Recently many new user interface element got introduced to SharePoint that provides additional information about other services in Office 365. While you can argue this information might be valuable for users, you can also say that that information is just a consumer marketing attempt for already paid products.

Whitespace releasedIn general, to keep the user informed it is a great thing to have a feature like this but from a design perspective and even end-user experience, those elements are not optimal. If this kind of information is valuable for the user inside an organisation, it is up to the organisation and not a decision made by any service provider.

To be clear, if this shows up on a free OneDrive user interface, but it is not something for a corporate environment.

The UX problem

Not only the relevance for the end user is doubtable there are also usability issues attached to that information. Here is the catch. The elements get delayed in loading into the page.

Once the user finds the relevant information for their work, the appearance of those elements immediately attracts the user’s attention. The effect is similar to when you try to focus on your work, and someone pats you on your back without any chance to avoid.

The go-away problem

Soon, the feedback button will get removed from the footer of the page. The only two things left over are the Teams advertisement and the mobile app hint (appearing two times).

The mobile app issue

The problem with the mobile app is that an organisation might block this tool to be installed by employees. Especially it can be problematical when the organisation allow unmanaged devices to connect. So even when it is not feasible – The link remains.

Mobile App Reminder

Mobile App Reminder

Teams information for you

Teams reminder

Teams reminder

I love Microsoft Teams. I use it a lot, and it is a great tool. Organisations might use it or might not use it because they have another application in place. Nevertheless, get unasked information about Teams in SharePoint.

Dismiss Teams information

Dismiss Teams information – The right and the wrong way

The user can remove this information manually, but the dialogue to do so is implemented as an anti-pattern. The “Yes” button only remove this information for the current session. After closing the browser, the information will come back. Just the text link below the dialogue offer a permanent solution.

In either case, it would be great to see a permanently opt-out option, not based on user decision. It could be managed centrally in the administration of Microsoft 365 or SharePoint specifically.

Introducing Whitespace

Until we see a solution to opt-out, there is only one chance is to use an application customizer that hides these kinds of information from the user interface. I created on that makes it easier and administrable centralised.

I named this tool Whitespace. Like a virus scanner or ad-blocker, it gets the CSS to override for these kinds of information on the user interface. The injected CSS definition gets served and hosted on the GitHub project page. The GitHub pages work like a CDN and make centralised management of overrides available. Besides, it can be configured to get the CSS from somewhere within your tenant.

Whitespace launched

Whitespace launched

To package the CSS with the Application Customiser would lead to a more and more administrative effort in case some new additions to the user interface will be made. This way the CSS can be adjusted to changing class names faster, without redeployment of the solution.

A win but also a danger ⚠️ that not only apply to this solution but to any CDN hosted CSS. The CSS link can also be redirected to a custom source. More information can appear on Github.

After installation and deployment of this extension for SharePoint the user interface don’t show these design elements anymore.

Cleaned up SharePoint user interface - without Teams or Mobile app informations

Cleaned up SharePoint user interface – without Teams or Mobile app informations

 

Final thoughts

In general, any Application on Office 365 should come with an opt-out option for these kinds of information rather than automatically opt-in. Not that this information can bring value to the users but why should user always get remembered to install the mobile app or Microsoft Teams when those applications are already I use or not wanted to get used?

With this extension, I showed here at least for now until a permanent solution gets introduced. To raise awareness I create a User Voice entry named “Permanent opt-out of marketing information on SharePoint

Does whitespace load the CSS from some CDN allowing to change the overall appearance of modern pages? CSS better should be used only wisely from CDN, and I like to share some thoughts around this in an upcoming blog post.

Whitespace is now available

The Whitespace solution is available on Github. Before you use it in your test or development tenant, please make sure you read and understood the readme and that it could have a potentially negative impact on your environment.

You find the solution to download in the release page.