SharePoint Modern Site Strategies: Designing Pages (Part 2)

Posted by Adam Krueger on December 14, 2018


Welcome to Part 2 of our blog post series where I’m going to provide an overview of modern sites 11SharePoint Modern site layouts and outline a strategy for building effective landing and content pages. In this post, we’ll step back from the specifics of the platform and will instead focus on the facets of an effective page design strategy.

As a reminder, Part 1 gave a high-level overview of the platform. We charted the evolution from SharePoint Classic sites and outlined some key concepts for building pages in SharePoint Modern Sites.

Rows and Columns, Prominence and Proximity

Now that we're living in the world of turnkey responsive design, it's important that we kill a web design sacred cow - namely, designing above the fold. The concept of designing above the fold harkens back to the days of print layouts (specifically newspapers, which have actual horizontal folds). It refers to the practice of determining the content that should be visible before a user scrolls. Here's the problem: it presumes a device, resolution, and whether a user has maximized their browser window. Also, it ignores the fact that users have been socialized to scroll thanks to their social media addictions (thank you, Instagram).

Now, that isn't to say that the order of content is meaningless, rather that we should Modern Sites_2-1abandon an arbitrary fold as the demarcation boundary of content importance. It is still true that users have relatively predictable browse patterns - typically left to right, then top to bottom, stopping on areas of visual prominence - which we can take advantage of when laying out our page. But now we're liberated to focus more on prominence and proximity and not simply focus on the fictitious fold.

There is more than one way to make content prominent (size, visual contrast, and motion are all factors), but for now we'll focus on content that is prominent through its placement – that is to say, what the user sees first.

When determining what content should occupy some of the page's more valuable real estate, here are two criteria you should consider: whether the content is dynamic (regularly updated) and critical (not just relevant to most users, but central to the role of the page).  For example, a critical update banner that appears only when urgent information needs to be communicated to the user satisfies both criteria, and therefore makes sense to live at the top of the page content region. Other content, such as Announcements or Quick Links, tend to lean towards one criteria more than the other and should be weighted accordingly.

Seeing as we’re not solely designing for a laptop, let’s go deeper into how SharePoint's Screen Shot 2018-12-14 at 12.29.12 PMresponsive layouts render your content. As you place your content within each section layout, a mobile device (or a device with a small viewport) will render one section layout at a time, from the left column to the right. That means if you have a 3-column layout, the mobile device will render everything in column one, then two, and finally three before it shows anything in the subsequent section layout. That means that something visibly prominent on your desktop may be buried on your mobile device.

To avoid accidentally burying an important web part, first consider ordering your content for a mobile device to get a better sense of prominence. From here you can fine-tune your layout into the correct sections and columns.

Another consideration when building a page is how to indicate when there is a relationship between page elements. One of the most effective ways to accomplish this is through proximity (proximity is one of several design principles of organization referred to as Gestalt principles). Group related content within a section layout to ensure that the content will retain proximity regardless of whether it's being rendered on a phone or desktop browser.

For example, a company's shipping department landing page could have a 3-column section layout that is dedicated to warehouse updates, containing: shipping announcements, black-out dates (calendar), and your distribution center's current weather. Each of these web parts is dynamic in nature and serves a similar role, therefore it’s intuitive to the users that they would be found in the same place.

Good layouts often present a narrative as you scroll down them. You can imagine the user intuitively understanding that they're moving from a place where urgent updates and critical links live, to area of news and events, before arriving on an area dedicated to document activity. The page should have a kind of logic that persists from desktop to smartphone.

Bringing It All Together

We’ve now covered the experience of authoring content as well as outlining a basic strategy for page design. In Part 3 of our blog series, we’re going to bring it all together and talk through each of the section layout options, explaining the benefit of each and giving sample use cases.

Have questions on SharePoint Modern Sites? Set up a time to chat with our experts - contact us today. 

Topics: Office 365

Adam Krueger

Adam Krueger is the UX Team Leader at Withum. He has over 12 years of UX design and front-end development experience. Adam is passionate about his role in creating highly functional, enjoyable business applications and advocating for user-centered design practices.

Leave a Comment: