Design principles in the Digital Workspace

Posted 11 November 2016 12:00 AM by Niki Postonogovas, UI Designer @ ClearPeople

As we all know, how something looks plays a huge part in how we interact with it as a user. 

If an intranet looks cluttered, unorganised, or is visually confusing, this then makes it harder for a user to find the key information they are looking for. This means the experience will be pretty unpleasant and that user may well resent using that platform again in the future. 

I want to talk about the importance of proximity within design, especially intranets. The correct use of proximity, in conjunction with other key design principles, has a big impact on the user experience and, ultimately, an intranet’s overall success. 

Proximity in design simply means that objects near each other are seen as a unit. It really is that simple, and it’s something you see every day. On your web page or your business card, related information is placed closely together and forms a visual unit. This results in better findability, even when an intranet is content-heavy.

Often when people are getting started with design, there is a temptation to throw everything on the page and fill up every square centimetre of space with type and images. However, it makes information difficult to digest and this in turn will result in your users feeling disengaged. 

Don’t fear the white space

As a designer when I was back at university, this was one of key things all my tutors would say to us regarding designing layouts - do not fear the white space. White space can affect the user’s behaviour as much, if not more, than the actual content on the page. It guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

Grouping related elements

Logically grouping elements within a design means a user can take in content easily, and navigate through the design with ease. This also applies to grouping features within an intranet, for instance, keeping all the functional features to the right of the design.

Hierarchy and contrast

Hierarchy is conveyed by the way elements are grouped and sub-grouped. For example, we use larger font sizes for headings or titles, and smaller for body copy. If there is not enough contrast between these elements, all the content merges into one and the user cannot easily scan the design to find relevant information as it all looks the same. 

Grids

The best and easiest way to group items and use white space appropriately is to start with a grid. A grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections and for elements to have breathing room, giving each section its own visual home. 


One other major benefit of proximity in design is that it helps users navigate a digital workspace without unnecessary delays or obstacles. This is important for intranet designs as they are extremely functional, with some of the users only accessing them to obtain certain documents or information. Proper visual hierarchy by the way of proximity helps users delve deeper into an intranet without worrying about where they’ve been or where they’re going next. They feel comfortable, and are able to get to the most important sections quickly and efficiently. 

To sum up, the main purpose of proximity in design is to organise information. You should allow plenty of white space around text and other elements so that you can really see the effect of grouping items together. With this we are able to create digital workspaces that users can engage with easily and efficiently. 

An example of design principles at work in ClearPeople's Essential Communications Intranet homepage:

essential communications intranet

Share:

Add your comment

 
 

 

Archive

Tagcloud

Digital Transformation employee engagement staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics intranet jquery QA Quality Assurance testing digital workspace content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage windows azure cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp SharePoint Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath