Effective workspace design goes beyond aesthetics; it involves thoughtful consideration of layout, content, and features used to optimise the functionality of your community.
Whether you're revamping an existing space or starting from scratch, these insights will guide you through the process of creating a workspace that aligns with your goals and values.
These top tips will help you explore the principles and practices of designing your workspace with intention and purpose meaning it will be accessible and easy to use for your members.
We also have a video from our Futures Community Huddle on designing your workspace:
1. Make user centred design your focus
User-centred design is crucial for creating a workspace that aligns with the needs of your members. By focusing on the end-user, you can enhance their overall experience.
Some questions to ask yourself and your team are:
- Why will members want to join our workspace?
- What are their goals?
- What are the actions we want our members to complete?
- What will the journeys and themes be in my workspace?
Once you have considered the above points and set out the intention of your workspace align the workspace layout and features with the identified purpose as this will create a cohesive and focused environment for your members to know what they need to do
For instance, if you expect your workspace to be used by frontline staff who do not have their own computer, you should develop your workspace with this in mind and keep checking it works when used on a mobile.
2. Draft your site structure and plot out your workspace before building
You have conducted some research into your community. Now you want to build your workspace, start with a simple site map of the key areas and functionality you need in the workspace. This will help build your proof of concept and make it easier when you come to build your workspace on Futures. Try and keep information three or less ‘clicks’ (folder layers) away from the workspace homepage. A good simple site map will help members navigate through your workspace quickly and be able to easily find what they are looking for
3. Create a Visual Hierarchy
Use visual hierarchy to guide users' attention to the most important information on your workspace. You can create a sense of hierarchy by using headers, buttons and colours.
Use the dashboard item ‘horizontal line’ to break sections of content up, this will make it easier for users to digest the information you are presenting and allow them to scan through the content looking for what they need.
Using headers is a simple and effective way to grab your readers attention, using headers creates separation from the body of the text and means users can scan the information on your workspace quickly and find the information they are searching for.
The position of your content and how users scan pages will also need to be taken into account. For a thorough run through of creating a visual hierarchy and positional matters watch our community huddle on building an accessible workspace.
Watch our community huddle on creating an accessible workspace
4. Make landing pages clear and consistent
Keep landing pages clear and simple with a consistent design throughout your workspace so users can navigate each page with ease. Remember, it doesn’t matter how pretty your workspace is, it is how easy are find things to find. Decide on a layout and commit to the pattern across your workspace
Assess what the function is of a page when you create it, if it is to direct a user to information, keep text to a minimum as this can be distracting and use linked buttons to guide them to where they need to be. If the page is to inform, add more engaging content with text and images. If the page is to encourage an action, include clear instructions.
Watch our training video 'Get started on designing your workspace'
5. Use colour carefully
Avoid using too many colours. It can be tempting to create a new button in a different colour, but this makes workspaces inaccessible, too much colour is overwhelming and can make your workspace look cluttered and unprofessional. Less is more. Pick two or three colours to use when designing your workspace and select them based on your brand or ones that are complimentary to one another
Keep your colour palette consistent. Not everyone sees colour in the same way, so consistency is key. As you can see on our Futures Homepage we have used a primary colour, the blue as a call to action, then we use our secondary colour for the information buttons, this means that users know what to expect and because we use these colours consistently anybody who may see colours differently will be helped by the uniform colour use.
Use colours that have a good contrast. Not all colour combinations work together; if there isn't enough contrast between text and background elements, they can be invisible for certain users.
Check if your colour combinations are accessible by visiting Web Aim Colour Contrast Checker, click on the block of colour and use the ink dropper to select the colours from your workspace and see if they pass!
Do not only convey information using colour. When only colour is used to inform a user, this can be lost if for example they have colour blindness. An example of using colour for information, would be creating different calendar events in a specific colour to inform a user what type of event it is. This may seem like a great idea and work really well for members who have no colour seeing issue but if they do, this will quickly make your events inaccessible to all. Consider how you might do it differently.
To learn more about using colour in your workspace Watch our community huddle on building an accessible workspace
6. Don’t overcrowd pages
It can feel like you need to use all the features and fill your pages with as much content as possible, but too much can make it difficult for members to absorb the information due to cognitive overload. Cognitive Load is the total mental effort it takes to process information. Poorly designed workspaces increase our cognitive load at a faster rate because the information is presented in a complicated way.
To enhance clarity and streamline communication, it is crucial to keep your content concise. This ensures that your message is easily understood and absorbed by your audience. Additionally, reducing the number of choices whenever possible can help to simplify decision-making processes, minimising confusion and promoting efficiency.
Use white space to create balance and make your workspace feel less cluttered. This will improve the overall navigation and ease of use of your workspace allowing members to quickly scan the content.
Try to minimise the length users must scroll on any given page to access content and links. Placing the important information closer to the top of the page will allow users to understand what is vital. If you are shouting ‘but everything we are saying is important’, only the most persistent of scrollers will see it, people check out of long pages way before they reach the bottom. If you have long pages, return to the site map and consider how you can mitigate this
A good way to test if your pages work is to use a mobile, with a smaller screen it means you must be more selective in how you display information and how much you show. This can be a useful tool to inform your information priority.
7. Make journeys through your workspace user friendly
You can create bespoke journeys through your workspace by creating buttons and linking them to different items within the workspace. Icon and image buttons are some of the best ways you can create seamless navigation within your workspace design.
Icon buttons allow you to use text and your choice of icon from the predetermined list (there is also an option for 'no icon' if that is what you prefer).
Image buttons allow you to take any image from your device and make it into a button. You can play around with the sizing of the button and which parts of the image are displayed.
Read our support centre article Using dashboards and icon buttons to link to workspace items
You should ensure that your button names match up with the title of the folder or content you are linking to, use intuitive folder titles and descriptions that accurately reflect the content within. Keep an eye on your folder structure, as users navigate through your workspace by buttons it is ideal if the breadcrumb trail matches the journey they have taken to get where they are. If your workspace folders have been created in a disorganised fashion, it is worth spending time on bringing this into line, it will aid users' journeys and make managing your workspace easier.
Read our Support Centre article Moving items in your workspace
8. Use images in a considered fashion
To build an accessible workspace use images strategically to enhance content and convey information effectively. You do not need to avoid using images as these make your workspace easier to digest for many users however, for those users who cannot see images and use a screen reader they can cause problems if not properly marked up.
For all images unless they are purely decorative, you must add alternative text (commonly known as alt text). You can use two different elements to add images to your workspace:
Text and Images - The title of the image is the alt text.
Image buttons - Has a specific alt text field.
Remember, if the image is decorative, you do not need to describe it as a blank in the alt text field, it will be skipped over by a screen reader. If the image conveys information, make sure you give a clear and concise description of what the image shows.
Do not use images that have text in them. It can seem like a quick win to take a screenshot of some already written text and use this, but you would need to add all the content in the alt image text for a screen reader. We would recommend that you type it up instead of using a screenshot.
9. How to use the Workspace navigation menu
You can control the workspace navigation menu for your workspace. There are three options:
Workspace Contents - This will show the left navigation menu allowing users to click through all the content on the workspace. When building your workspace, we recommend you keep the left navigation panel visible as this will make things easier for you to see what content you have already created.
Custom - You can set a custom navigation menu that can direct users to the main section of your workspace, no matter where the user is in your workspace the custom menu will stay the same.
Always hide - This hides the menu for all users and makes your workspace look a lot bigger and more like a natural web page.
Read our Support Centre article Managing the workspace side menu
10. Understand how some users navigate your workspace
Some users navigate websites by using the keyboard instead of a mouse. This is an important point to consider when designing your workspace.
The direction of travel when using a keyboard to navigate is down a section then across, so break up your content into relatable sections so this pathway is not confused.
For example, if you have 6 learning modules, and you had two columns in the section, you need to number the modules, 1, 2 and 3 down the left column, then 4, 5 and 6 down the right column, with this set up, a keyboard will navigate the modules in numerical order.
11. Don’t use moving or flashing content
Ticker tapes and carousels for example can create problems for users with cognitive impairments as moving elements can make it difficult to read or process information. Users without any impairment can find ticker tapes difficult and frustrating to read.
The carousel is a great feature to use to have full control of the content that is shown to users and can be used really well as a workspace latest news function. However, we recommend disabling the auto play and allow users to select themselves between the different panes of content.
12. Testing and tuning your design
Testing your workspace will really help you fine tune and understand how well it should work. You may be asked by senior leaders to demonstrate your design decisions or why you did not follow an expected brief to the letter. If you have made decisions to ensure your workspace is accessible, then you may want or need to demonstrate some of your design decisions and why you made them.
Simple techniques that can help you test your workspace:
Zoom in to increase the size of the content in on screen. Users can often zoom further than 200%, but this is the benchmark for zoom, if your workspace and content are still accessible at 200% then what you have done, works
Test for responsiveness across different screen sizes. The way you have set up your workspace will act differently on different sized screens, it may not react how you expected. Right click on any screen, select inspect and this gives you the ability to see how the webpage looks in different devices, we recommend using the iPhone SE as this is the smallest device, if your workspace works on this, rest assured it works on the rest.
Use filters. Many browsers and computers have different filters that can be used to change a website and its content. We recommend testing your workspace in monochrome, removing all colour and see if your workspaces user journeys are affected. Another good one is turning on high contrast mode on your device, many users prefer to use high contrast mode, to do this search on your device to enable.