In previous blog posts we’ve talked about the concept of Perceived Usability and how an interface is judged almost instantaneously on a subconscious level coloring our perception of the event. While there is a plethora of facets that play apart in Perceived Usability all of the above are bound to a component of time.
In most cases the relativity of time and the syncopation of moments goes by unnoticed even when we evaluate the qualities of time against our fancy smart watches, cell phones, car dashboards or digital coffee pots.
In the realm of UX we can use certain studies in Psychology that show us how we react to interfaces that cause an abrupt awareness of time. The hemispheres of our brain pass off activity to our Reptilian or Instinctive Brain which immediately becomes distracted by other environmental factors and before we know it, we’ve brood a negative experience. The negative implications of those few seconds waiting are chalked up on the board alongside stressful traffic… Standing in a long line at the airport… Or even worse and infinitely more painful being at the dentist...
In this very fast loading and hopefully positive blog post we are going to discuss some interesting aspects of Structural vs Managed Navigation performance inside SharePoint Online.
According to a really great article written by Bob German the concept of Structural Navigation has its roots in SharePoint on Premises because of the ability for the server to store a caching of recently used site collections.
By caching site collections on the server the process speeds up the dynamic queries of site collections used to create the DOM repetitiously on each page during post back. SharePoint is doing this to honor the Top or Side Navigational UI Pattern which would state that you would want consistent menus on all pages.
This caching process has benefits to a User's Experience because page load times are faster.
The page load time benefits coupled with security trimming of Structural Navigation have made the option an easy solution for years. What we find however in SharePoint online the concept of dedicated servers are now not individually dedicated but spread across an eco-system of servers in the cloud of O365, in turn making the caching aspects of Structural Navigation run slower in certain situations. It is because of this that Managed Navigation has been in the spotlight as the option of choice lately. The catch here is that Managed Navigation comes with its own baggage that in some situations isn’t the right solution either.
A Real World Scenario for Fixing Structural Navigation Page Load Times
We had a project in which a company had a large amount of content and information that was being presented through an Enterprise Wiki. The strategy was to use an Information Architecture that could be easily cross referenced with minimal upkeep which could dynamically update itself on article creation.
The Quick Launch/Left Navigation was a good candidate for facilitating a UI Pattern with its dynamically created nested unordered lists.
During the process of the project, the Structural Navigation was loading extremely slow and we found that by toggling “Show Subsites” from on to off the pages loaded 90% faster... which if we think about it...obvisoulsy...the page doesn't have to render the Quick Launch/ Left Navigation.
The catch was that by toggling the “Show Subsites” option off the page loaded 90% quicker but was also missing the Quick Launch or Left Navigation.
Now this would normally be a problem, but in this particular situation we are able to rely on the fact that almost all Data inside SharePoint is a list including the available listing of Sites and Subsites. Reguardless if the option is selected on or off the List Data is still present. With a small bit of AJAX we are able to make a successful call to Sites and Sub Sites.
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webs/?$select=title,ServerRelativeUrl",
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
//DO SOMETHING IF SUCCESS
})
},
error: function(error) {
//DO SOMETHING IF THERE IS AN ERROR
}
}); |
By Modifying the AJAX success call back and adding another function we can then do our own iteration through the results and build a UL LI set of DOM elements.
// FIRST LETS CREATE VAR AND MAKE THE PARENT UL DOM
var list = "<ul class='root ms-core-listMenu-root static'>";
// NOW LETS CALL OUR SITES LISTING
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webs/?$select=title,ServerRelativeUrl",
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
// OK WE GOT RESULTS NOW LETS LOOP THROUGH THE RESULTS
$.each(data.d.results, function(ind, val) {
// AT EACH ITEM IN THE LOOP ADD THE LI DOM AROUND THE INFORMATION
list += "<li class='static dropdown' href='#'>";
list += "<a class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode' href='" + val.ServerRelativeUrl + "'><span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text'>" + val.Title + "</span></span></a>";
//LOOP THROUGH CHILDREN BY CALLING A FUNCTION PASSING IN THE RELATIVE PATH
getLists(val.ServerRelativeUrl);
})
list += " </li></ul>";
},
error: function(error) {
//alert(JSON.stringify(error));
}
});
function getLists(ServerRelativeUrl) {
$.ajax({
url: ServerRelativeUrl + "/_api/web/webs/?$select=title,ServerRelativeUrl",
type: "GET",
async: false,
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
list += "<ul class='static dropdown-menu'>"
$.each(data.d.results, function(ind, val) {
console.log(" + " + val.Title);
list += "<li class='static'><a class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode' href='" + val.ServerRelativeUrl + "'><span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text'>" + val.Title + "</span></span></a></li>";
})
list += "</ul>";
},
error: function(error) {
//alert(JSON.stringify(error));
}
});
}
|
The code when coupled together with css creates a touch centric UI Accordion Navigational Pattern that rolls up information very nicely but without the slow loading times of a typical Quick Launch/Left Navigation Rendering
The dynamically created Quick Launch or Left Navigation performs 90% faster than calling traditional Structured Navigation with the “Show Subsites” option checked.
In the spirit of keeping this blog post quick and technical, download the source code for more details on the CSS, HTML and JS and if you have any questions don’t hesitate to reach out or post some comments. In my next blog post I will be talking about the usability improvements in the New SharePoint Framework and setting up a ReactJS project for displaying animated SVG Graphics.