Design Archives – Squirrel365 Create stunning interactive content Mon, 01 Jul 2024 11:32:03 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 https://squirrel365.io/wp-content/uploads/2020/05/cropped-squirrel_512-1-32x32.png Design Archives – Squirrel365 32 32 Building a sustainable travel calculator https://squirrel365.io/building-a-sustainable-travel-calculator/ Mon, 01 Jul 2024 11:31:55 +0000 https://squirrel365.io/?p=19815 We built a sustainable travel calculator to demonstrate how quick and easy it is to test an idea using Squirrel365.

The post Building a sustainable travel calculator appeared first on Squirrel365.

]]>

One of the great things about Squirrel is that it enables users to build a prototype in super quick time.

So, when we were challenged to create a carbon footprint calculator that helps customers understand sustainable travel choices and consequences – building it with Squirrel was a no brainer. We decided to base this ‘conceptual’ calculator on Eurostar*, and build it to align with both their brand and existing data available on their website.

It was envisaged that the calculator could integrate into the Eurostar website, specifically on their sustainability page, rather than being a stand alone app. We also assumed that the calculator widget could hook into data from a logged in user and show previous trip data. And as this was just a prototype these assumptions enabled us to move forward.

Sustainable travel calculator - wireframes to designs

From idea to app in less than a day!

Our designer set to work figuring out what would be useful in a calculator like this. What would a customer want to get from it? And how could they interpret the results and make sense of it? After doing some research and looking at other sustainable travel calculators, we produced some rough wireframes. These outline the desired content, layout and functionality required in the finished calculator app. Wireframes are great for finessing an idea without worrying about the styling. We used Figma to produce these.

Next we started building the calculator app in Squirrel, based on the wireframes – and getting the functionality and calculations all working. Building this prototype was very quick in Squirrel. It probably took 2-3 hours to get all the components in and calculations wired up. That’s the beauty of Squirrel’s drag and drop components – a lot of the work is done for you.

While this was happening, our designer was producing some high fidelity mock-ups using some of Eurostar’s brand assets, including colours, logo and imagery. It’s so important that calculator apps like this are visually engaging, friendly and relatable. And of course we wanted it to seamlessly integrate into the website design.

Finally, we applied the brand styling to the calculator app in Squirrel. Again, this was pretty straightforward to do. The Squirrel components have vast options for styling and customisation. And we were able to achieve the desired look to near pixel perfect precision!

Check out our working calculator below:

Showing travellers the impact of their choices

The finished calculator app demonstrates to customers the impact of their travel choices. They simply enter their start and end destination and the calculator will show them the difference between travelling by Eurostar compared to flying. It calculates the CO₂ generated and saved, and what this equates to. We wanted to show a conversion that people would understand, so we show the number of smart phones that could be charged with that journey’s CO₂ saving. The number feels quite high – which is what we wanted – as this will further highlight and educate Eurostar customers of making the right choice. The calculations for the equivalent power was taken from epa.gov.

Simplifying complex calculations

Eurostar’s existing website has all the CO₂ travel data listed for journeys – but a customer would have to calculate and figure out the real impact themselves by cross referencing other sites.

Our example shows how a simple calculator integrated into an existing site can help to add understanding to an otherwise complex calculation, enabling real-life comparisons that the user can relate to.

This calculator app took us roughly 7 hrs to put together. And even though it’s just a prototype it demonstrates how manageable it is to be able build an idea quickly to test it out.

If you’ve not tried using Squirrel365 for building out a quick idea – give it a go! Your first project is free.

Eurostar website and calculator mockup

 *Eurostar did not ask us to do this for them and were not involved in this project.

The post Building a sustainable travel calculator appeared first on Squirrel365.

]]>
Squirrel Hackathon at IBIS 2023 https://squirrel365.io/squirrel-hackathon-ibis2023/ Wed, 12 Jul 2023 13:11:32 +0000 https://squirrel365.io/?p=19033 In the Squirrel Hackathon at IBIS2023, attendees were invited to create an app, dashboard or calculator using no-code! Check out the results.

The post Squirrel Hackathon at IBIS 2023 appeared first on Squirrel365.

]]>

The Squirrel hackathon challenge!

For the second year running the IBIS conference featured a Squirrel Hackathon. Last year we had some fantastic entries.

This year, attendees were invited to create an app, dashboard or calculator using the no-code app-building platform Squirrel365. Participants are given a spreadsheet, a little bit of context, and set up with a Squirrel365 account. They have 3-4 hrs (broken down into 1 hr sessions at the beginning and end of each conference day) to create something.

The data for the challenge was provided by Greenlight Solutions. Greenlight are dedicated to helping students launch careers in sustainability, and businesses go green. They are passionate about making sustainability solutions achievable and accessible to everyone through their Student-Led Sustainability Projects, Bootcamps, and Sustainability Seminars.

The challenge centred around the data collected by Greenlight’s ‘Green team’ who work with the organisers of events to manage and process the waste generated. They were looking for smarter ways to measure and visualise how much waste has been diverted from landfill as a result.

The spreadsheet contained ‘made-up data’ for several events, and the key calculations required to turn that data into meaningful numbers.

From the submitted hackathon entries, it is easy to see how quickly someone with no prior experience can create something of value using Squirrel365.

Have a look at what was created. We think they are all pretty awesome!

Waste Managament Impact Dashboard

Click to view the interactive version

Squirrel Hackathon - Chris Lilley
Squirrel Hackathon - David Behr
Squirrel Hackathon - Catherine Warren

Diversion rate calculator

Click to view the interactive version

Squirrel Hackathon - Frank Foos

There were two projects that really stood out to the Judge – Ashley, Exec Director at GreenLight Solutions. Congratulations to Chris Lilley, and to David & Jordyn Behr.

Thanks to everyone for taking part in this year’s hackathon and for producing some fantastic no-code solutions. 

The post Squirrel Hackathon at IBIS 2023 appeared first on Squirrel365.

]]>
Creating a free lead capture app https://squirrel365.io/lead-capture-app/ Tue, 01 Nov 2022 14:14:57 +0000 https://squirrel365.io/?p=18013 We created a Lead Capture App using Squirrel365 for our attendance at Big Data LDN 2022. Check out how we did it!

The post Creating a free lead capture app appeared first on Squirrel365.

]]>

Taking Squirrel to Big Data LDN

Earlier this year Squirrel365 exhibited at Big Data LDN (London) It’s the UK’s leading free-to-attend data & analytics conference and exhibition. We were there to show off Squirrel and InfoBurst and how, together, they make a great addition to your BI stack. 

Along with the usual demos, it presented the perfect opportunity to show off an app created with Squirrel — a free lead capture app.  The app allowed us to gather basic contact information from interested attendees quickly. Which led to some great discussions about the creation process.

The motives behind building this lead capture app were partly to save money but, more importantly, to show attendees what Squirrel is capable of. 

Planning the lead capture app

We decided only first name, last name, and email address was essential. Once submitted this would be written to an external Google Sheet. Attendees should enter their information but must not see anyone else’s. Only those with the password should be able to access the list of leads. And clicking on the name should allow you to update information and add any notes if needed.

Finally, an analytics page would keep track of how many leads had been captured. Detailing what they were interested in (Squirrel, InfoBurst, or both) and their level of interest. This would help us identify “Hot Leads”.

 

Designing the App

Our UX/UI team designed the user flow and visuals for the lead capture app. Ensuring a consistent look and feel to the app and making sure it was easy to use. This involved considering the right components to display and capture information, navigation, themes and colours. With the UX and visual design done, all that remained was to build it.

lead capture app designs

Building the app

Using Squirrel’s intuitive interface, I was able to bring the application together quickly – matching the design specifications closely. The build itself took a couple of days to complete. When it came to wiring up the components to the spreadsheet there was a lot more that needed doing. The components had to insert the data into the correct place. I also had to check that the spreadsheet formulas were calculating correctly and that any functions I had in place – like the Data Mover – triggered correctly.

“It all came down to my knowledge of Excel formulas and the functionality of Squirrel’s components, and it just goes to show that anything is possible… when you know how!”

Challenges!

The biggest challenge, personally, was the creation of the “Password Protect” screen, which would secure two pages. This should appear when either the list or analytics sections are accessed. The difficult bit was getting it to stay hidden after the password was successfully entered. I wanted to prevent someone from having to enter the passcode again when switching between those two pages. After a bit of trial and error, I had it cracked! It all came down to my knowledge of Excel formulas and the functionality of Squirrel’s components, and it just goes to show that anything is possible… when you know how!

Subsequently, we created a demo version of the ‘secure’ area. Enabling us to show interested attendees how it would function without exposing real data.

demo area of lead capture app

Try it out

I am continually amazed at what you can create with Squirrel365.

Try out the free lead capture app below. Or sign up and have a go at building an app of your own.

Psst… the password is 1234

The post Creating a free lead capture app appeared first on Squirrel365.

]]>
Squirrel “Save Our Nuts” Hackathon at IBIS 2022 https://squirrel365.io/squirrel-save-our-nuts-hackathon-at-ibis-2022/ Tue, 19 Jul 2022 09:31:21 +0000 https://squirrel365.io/?p=17477 The post Squirrel “Save Our Nuts” Hackathon at IBIS 2022 appeared first on Squirrel365.

]]>

The hackathon challenge!

This year at IBIS, the conference featured a Squirrel hackathon. Attendees were invited to build a project based on a spreadsheet. Eventually, the goal was to create a personal carbon footprint. After a swift introduction to the basics through our “Introduction to Squirrel” guide, the participants set off on crafting their very first project.

Neither of the winners had used Squirrel before the conference, however, they quickly took to the tool. Ultimately, they both produced great-looking interactive dashboards. Also, the younger winner (who was only 13) left the conference with a plan to hold a similar hackathon for her fellow pupils back at school.

Have a look at what they created:

Winner #1

“Using Squirrel was easy and fun. I was able to learn the program basics quickly. Additionally, I was comfortable using the tool since it had some of the same functionally as other tools I use (sizing, grouping and aligning objects). There were so many options for manipulating objects, it made it fun to make the dashboard look the way I wanted it to look”
Devon, Snohomish County

Winner #2

 

The Squirrel team can see just how intuitive Squirrel is and you can see this by what is being made. Also, it’s important to note that this was done in just a few days!

For more on Squirrel’s time at IBIS 2022, check out our Squirrel attends IBIS 2022 blog.

The post Squirrel “Save Our Nuts” Hackathon at IBIS 2022 appeared first on Squirrel365.

]]>
Get started with our free calculator templates https://squirrel365.io/get-started-with-our-free-calculator-templates/ Thu, 09 Dec 2021 12:55:41 +0000 https://squirrel365.io/?p=16350 Check out our new calculator templates. These are free to use, and give you a great head start if you are looking to quickly add something to your website or presentation.

The post Get started with our free calculator templates appeared first on Squirrel365.

]]>

Need a calculator?

Are you looking to build a calculator and embed it on your website? Or do you want to enhance a static powerpoint presentation with some realtime calculations and forecasts? If so, take a look at our new calculator templates and get a head-start. They are free to use and are ready-to-go, or you can customise them to suit your own needs.

You can find these new templates in Squirrel, from the Templates section (on the Start page).

 

Why use a calculator?

Value calculators help customers and prospects understand their ROI on products and services. More and more businesses are using them to collaborate with customers these days. They help to create more successful business cases and accelerate the sales cycle by demonstrating results to users in real time.

Conversion calculators are handy tools that enable users to make quick calculations between commonly used units. These kind of calculators are invaluable to users as they can help someone make a decision, or choose the right product.


Mortgage Calculator template

This mortgage calculator is used to estimate monthly and total payments for the mortgage loan. It includes various loan amounts, terms and interest rates. It’s really easy to use and it solves a lot of issues by providing the relevant information instantly. The mortgage calculator is a simple yet extremely powerful tool that helps to build trust between customer and lender – a trait that has always played an important role in the financial sector. 

Salary calculator template

This calculator provides an easy way to calculate the equivalent hourly and monthly wages based on your annual salary. It considers total hours worked per week, potential bonuses, and factors in vacation time into its calculations. You can always easily edit the calculator to suit your specific needs, such as including different taxation factors, and any other additional variables.

Website conversion revenue calculator template

This calculator shows the predicted impact of converting website visitors into actual sales. Adjust the rates and the average sales cost to see the additional revenue possible. 

Length conversion calculator template

This converts length units from the imperial system to the metric system and vice versa.

Mass conversion calculator template

This converts between kilograms, grams and pounds (kg, g and lbs). All of which are measurements of mass and weight. 

What kind of calculator do you need?

If you have an idea, or need a specific type of value calculator – let us know! We might already have something up our sleeve that you can use, or we can at least give you some pointers on how to get started. You never know we might even build a template based on your suggestion!

For more food for thought – check out our other blog posts on:
How to create value calculators to engage your customers
How to make a calculator app using Squirrel365

The post Get started with our free calculator templates appeared first on Squirrel365.

]]>
5 simple tips for better looking apps https://squirrel365.io/5-simple-steps-to-help-you-design-better-looking-apps/ Mon, 21 Sep 2020 09:08:28 +0000 https://squirrel365.io/?p=4547 If you’ve ever struggled to make your dashboard, calculator, or visual application look good, you aren’t alone. Follow these 5 tips for better project design.

The post 5 simple tips for better looking apps appeared first on Squirrel365.

]]>

Have you struggled with project design?

 

If you find it difficult to make your dashboard, calculator, or visual application look good, then you aren’t alone. Most people aren’t blessed with a natural eye for design and often fail to spot common design mistakes or know how to fix them.

So, we’ve compiled five simple design steps you can take to create better projects. Applying these five best practices will help your project look nicer, be easier to understand for your end-user, and they’ll be more likely to absorb your message and take any relevant action. We hope you find them useful:

 

1. Declutter your content

The first and most critical step towards improving your design is to declutter your content. Clutter causes information overload and means the user has to think and work harder to find what they need.

Content clutter could be:

  • Information users don’t need (such as irrelevant data)
  • Meaningless labels or titles
  • Duplicated or repeated information
  • Data viz or charts that confuse rather than explain.

The aim is to reduce the content as much as you can without losing the key insights. This means reviewing all of the information you are currently presenting and identifying content that isn’t directly beneficial to your target audience. If you aren’t sure what your users need, ask them! Find out what is most important and get your users to rank the rest of the information by priority order.

By reducing and refining your content, it enables you to create a more focussed design that will serve the needs of your users better.

Here’s an example of decluttering:

Comparing a cluttered and uncluttered dashboard

The cluttered dashboard (left) is harder to understand than the uncluttered dashboard (right)

 

 

2. Create a visual hierarchy

Visual Hierarchy is about ensuring that the most important information stands out and the less important information doesn’t distract. Having this hierarchy is very important: it helps guide users through your content and delivers the information to them in a logical way. Get this wrong and your user’s eye will be drawn to the wrong thing first.

When starting your design it helps to know what information is most important to your users, what is secondary information, and so on. Identifying these priorities will help you apply the appropriate visual treatment to the content and give it the right level of emphasis.

Ways to create a visual hierarchy with your content:

  • Position
  • Scale
  • Proximity
  • Colour
  • Contrast

 

Position

This is the logical place to start when thinking about hierarchy. It’s no surprise to hear that the most important things generally go near the top. But there’s a bit more science to this that we should consider:

The Z reading pattern

The typical Z reading pattern

 

In the western world, we read from left to right and zigzag down a page. This applies to the way we ‘read’ on-screen as well. This Z pattern creates four key areas or quadrants where eyes will typically stop and scan the information for longer. Knowing this can help us position our content appropriately. Typically, the top left corner of your design is the best location for your most important content – perhaps the perfect place for the most requested KPI. But the other ‘pause’ points are also good, prominent places for important information.

 

Visual hierachy

Ways to create visual hierarchy

 

Scale

When one item is presented larger than other items our eyes are instantly drawn to it. Scale can be used effectively to emphasise certain content and make it appear more important than other information, and vice versa if you make something smaller.

 

Proximity

Items that are placed close together are typically seen as related or grouped, and space between objects helps to define them as unrelated. The way you use space can help users understand the relationship and hierarchy between objects without the need for using borders or boxes to define these groupings.

 

Colour

Applying a bright colour to an element will make it stand out against other neutrally coloured objects.

 

Contrast

By making an item look visibly different (in shape, colour, or even making text bold) will help it to stand out. Anything that disrupts a regular pattern will create a contrast and therefore create a hierarchy.

Combining any of these will increase the visual hierarchy even further, but you need to be careful not to overdo it. Otherwise, everything will be shouting for attention and the user will be left feeling overwhelmed.

Here’s an example of weak versus strong visual hierarchy:

Visual hierarchy examples

A weak visual hierarchy (left) compared to a strong hierarchy (left) which uses scale, position and colour to give emphasis to the important content

 

3. Use colour with purpose

There are two ways of applying colour to your design — you can use colour decoratively, or you can use colour with purpose.

Colour comparisons

Decorative colour (left) compared to Purposeful colour (right)

 

For dashboard and data visualisation projects, colour with purpose is definitely the right way to go.

Unlike decorative colour (which is just adding colour for the sake of it to make the design look more appealing), using colour with purpose helps to support the information being displayed and gives more meaning to the data. For example, you could use different colour data series’ in a chart, display a RAG status, or simply highlight navigation.

Generally, it’s better to reserve your colours for the data viz, charts and navigation items and keep the rest of the design fairly neutral. If your design is full of colour, whilst it may look fun and exciting, users will have to decipher your use of colour and see through all of the visual noise to get to what they really need – the information.

 

Decorative colour should be kept to a minimum and must not overpower the meaningful colour on your dashboard.

 

Remember, when using colour (even in a meaningful way), some of your users may have a colour impairment. So be mindful of relying on certain colours: e.g. a red and green status is often indistinguishable to a colour-impaired person. But you can ensure absolute clarity in this instance by using arrows alongside. Combining the shape and direction of the trend arrow with the relevant colour means everyone can understand the meaning even if they can’t determine the colour.

Here is an example of red and green used on a KPI tile:

Red and green effects for colour impaired users

Red and green can be indistinguishable to a colour impaired user (right), but visual clues such as arrows can help give meaning.

 

4. Line stuff up and add ‘white space’

This one is quite simple. You should line things up and add in some white space – if you don’t your design will look messy and unprofessional. This could put the overall quality of your project in question. Lining stuff up is actually really easy to do.

In Squirrel we have tools available to help you:

  • The layout grid can help you position things visually.
  • The alignment buttons allow you to line multiple elements up with one click.
  • The distribution buttons allow you to space out three or more elements evenly.

Here’s an example of alignment:

Comparing good and bad alignment

Poor alignment and spacing (left) compared to good alignment (right).

‘White space’ (or negative/unused space) is something that often gets compromised in designs – particularly dashboards, usually due to the large amount of information being presented on one screen. But with a good declutter of content (as explained above), giving your content some space to breathe will help your design look better, and be easier to use.

  • Consider grouping items using space so no need for borders or boxes behind your content (think proximity).
  • Be generous with margins – you wouldn’t feel comfortable reading a book where the words went right to the edge.
  • Don’t be tempted to fill space needlessly – think: does the end-user really need this?
  • Consider hit areas for mobile ensuring there’s sufficient ‘press’ area for fingers.

Don’t be afraid of white space. It’s as essential to a design as the content itself.

Here’s an example of a spacious dashboard:

 

Dashboard with white space

White space generally makes content more digestible and comfortable to read.

 

5. Use a simple & legible font

Good typography can be the difference between a good design and a great design. But choosing and using a font effectively can be daunting to many people.

If your client has a brand font, use it. It will reinforce their brand identity and means one less thing for you to think about. Firstly, check its legibility; particularly at small sizes as it may have been selected a long time ago for print based projects. If it’s not very legible then you should consider selecting a different font for the project.

Generally, Sans-serif fonts are considered more legible on screen – as they work particularly well at small sizes. Their simple and open letterforms are suited to on screen designs displaying numbers. Decorative or creative fonts should be avoided; their elaborate design can become distracting and are often hard to read.

Bear in mind which tool you’re using to create your project. Some tools have limited font options and some tools allow you to upload your own font to use. Have a look at Google Fonts (link) – this is a fantastic resource of well designed, free fonts that you can use in your projects. It’s also categorised, with descriptions of the fonts making it easier to select the kind of font that might suit your project.

Most fonts have multiple weights available ranging from Light all the way up to Extra Bold. It’s worth playing around with the different weights at different sizes until you find the optimal combination. Don’t overdo your use of different font weights – try to stick to two different weights e.g. Regular and Bold. Pick weights that contrast each other nicely so that you can use them to create emphasis where needed in your design.

Creating a clear and consistent typographic hierarchy is a useful thing to do at the beginning of a project. This involves deciding what font size and weight you want for each ‘text’ type, such as the Main title, Subtitle, Body text, Axis label, Micro copy etc. Avoid having text styles that are almost the same size, e.g. 15 and 16px as even the difference is negligible it can make the design feel untidy.

Here’s an example of a simple typographic hierarchy:

A typographic hierarchy

A typographic hierarchy

 

Once you have this, you can ensure the text on every screen in your project remains consistent and looks more professional.

 

We hope these five steps help you with the design of your next project. And if you want to learn how you can write good copy for your project, we share some more best practices in our blog Improving the user experience with copy.

The post 5 simple tips for better looking apps appeared first on Squirrel365.

]]>
Improving the user experience with copy https://squirrel365.io/improving-the-user-experience-with-copy/ Tue, 11 Aug 2020 00:16:58 +0000 https://squirrel365.io/?p=2569 Understand the benefits of good copywriting for BI projects. And learn some tips and tricks for communicating clearly along the way.

The post Improving the user experience with copy appeared first on Squirrel365.

]]>

How to communicate clearly in BI projects

 

 

Some tips and tricks for clear communications

Copywriting is writing with a job to do. Usually, that job is to make the reader think, feel, or act differently from the way they did before. The term “copywriting” is most strongly associated with advertising, but in reality, it’s used in all walks of life: from composing a newsletter email to a BI project.

Writing good copy for your BI projects has huge benefits for you and your user:

  • The key points you want to get across will be easily absorbed.
  • You can persuade your user to come to a particular conclusion.
  • Your project will be a pleasurable experience, rather than something that is hard to decipher and understand.

One thing to bear in mind — you can’t assume two people will draw the same conclusions from your project, you need to show them the way. So, let’s first spend some time thinking about the audience (your users).

 

It’s all about the user!

Understanding your user is the biggest single thing you can do to make the right impact with your copy. You also need to consider the medium you’re going to use to reach your users: there’s a difference between sending something out via email compared to delivering a presentation in person. You’ll need to consider:

  • Who is/are your user(s)? What do they do? Are they internal/external? Why will they be looking at your BI project? What are their needs? What will they be doing with the project? The point is, you can’t effectively achieve what you want to if you don’t know what makes your user tick. Creating personas can be a great start.
  • What do you want your user to do with your project? Be clear on how you want them to act. Consider the tone of your message to ensure the best outcome. The tone needs to be tailored to your specific user, so they feel you understand them.
  • How will you be perceived? Cluttering up your communications with too much text, crowding text around visuals, not getting to the point, not picking out the right points… could all lead to an unfavourable impression. If you don’t get to the point and present a clear and compelling argument, you’ll lose credibility and your information might not be trusted.
  • Does your company have a tone of voice? Do you have brand guidelines to follow? If so, follow them. Consistency is key. It builds trust and you’ll be more successful. If you don’t have them, create a little checklist of things you want to make sure you do in your project. For example:
    • Use font: Open Sans. Sizes: 18 for headings, 14 sub-heads, 12 body…
    • Use bold to highlight key stats/facts.
    • TOV: Warm, straightforward, and honest.
    • Terminology: Use “BI” instead of “Business intelligence.”
    • Put CTAs (call-to-actions) upfront, before data/content…
  • What medium are you using? If you’re delivering a presentation words on slides can be kept to a minimum which leaves more room for exciting and explanatory visuals as you talk around what they see. However, emailed communications mean you need to be extra clever and clear with your copy to get your user to understand the points you’re making.
  • How will you get your user’s attention? There are three simple things you can do: 1) highlight important stuff, 2) eliminate distractions, and 3) create a clear hierarchy of information.

Image provides an example of a badly designed dashboard

A badly designed dashboard

 

 

 

This chart is too cluttered. There’s no hierarchy. It’s distracting and there are too many fonts.

 

 

 

A well-designed dashboard

 

 

 

Unnecessary detail has been removed. Hierarchy has been considered. Graphics and fonts have been simplified.

 

 

 

 

Tips for making your copy clear, concise and relevant

A sentence should contain no unnecessary words, a paragraph no unnecessary sentences… This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that every word tell.

Strunk & White — Elements of Style

 

With that in mind, here’s what you can do:

  • Get rid of the noncritical text. Would eliminating it change anything? Does it support your message? If it doesn’t add value it becomes clutter and puts a strain on your user’s cognitive load. Your message could get lost.
  • When detail isn’t needed summarise! You should be familiar with the detail, but it doesn’t mean your audience needs to be.
  • Create a strong hierarchy. Push necessary but non-message-impacting items to the background. An information hierarchy can help lead your user to form a certain opinion, conclusion, or CTA.
  • Remember that we read from left to right, diagonally down, then left to right again. Bear this in mind when positioning text. Think about where you want your most important points to go.
  • Keep titles short and avoid non-descriptive “meh” titles like “2015 budget.” Use a title with a punch and that denotes an action, for example, “2015 spending is above budget” — it’s immediately more engaging and sets expectations for what’s to follow. Remember that 80% of people read a headline, only 20% read the body content.
  • If you find you’re using the same word over and over again grab a thesaurus and find another one!
  • Use common spelling: no slang, no fancy words, and don’t be too technical. Simplify your language.
  • Address one person. Make it feel personal. Put the user first.
  • Avoid hyperbole — exaggeration creates mistrust and disbelief.
  • Write using nouns and verbs. There’s no place for floweriness in your BI project. Your user probably doesn’t have time for it.
  • Use upper case sparingly — it can be a bit shouty!
  • Repetition handled in a subtle, clever way can help to get your message across and influence a decision. One of the great tricks of copywriting is saying something again and again but in slightly different ways. Rephrasing or reframing an idea helps the message sink in. It Just needs to be done with some finesse.
  • Use a pair of fresh eyes (someone else’s if possible) to proof-read and edit your copy and make it even better. If there’s no one else, put your copy down and come back to it a few hours later or the next day — you’ll need a break from it.

 

Tips for annotating charts and graphs

Thoughtful use of text helps ensure your data visualisation is accessible. It has a number of roles when communicating with data: use it to label, introduce, explain, reinforce, highlight, recommend, and tell a story. Words help to make sense of things and sometimes charts don’t make much sense without them.

You’ll find that certain types of text must be present. For example, every chart needs a title: without a title, the user is forced to stop and question what they’re looking at. Time will be wasted, and the message will be harder to understand.

Remember clutter is your enemy! Every element on the page has an impact on the user’s cognitive load. If they have to work hard to understand your project, they’ll lose interest. It’s your job to identify and eliminate non-informative clutter.

Example of a cluttered, ill-thought-out chart:

Example of a decluttered chart:

 

To keep charts simple you can:

  • Label data series to save the user from having to go backward and forwards between the legend and the data.
  • Straighten up text in line with your charts for a cleaner look. Good alignment makes it easier on the eye.
  • Avoid rotated text: It’s not particularly pleasant to read and the only purpose, it seems, is to give you a bad neck!
  • Use white space or spatial separation: It’s as important as a pause in public speaking. It will give your user time to think and take information in. A lack of white space makes for uncomfortable reading.
  • Remove un-necessary decimal points from your numerical values. They often don’t add anything but clutter.
  • Push non-critical data labels and text to the background: Explanatory text in a muted grey will help the critical text in black (and maybe bold) stand out: it will set a clear hierarchy for the user while reducing cognitive burden.
  • Annotate important or interesting points directly onto your chart or graph: You can explain nuances in the data, highlight something that needs attention or describe relevant external factors. You’ll notice how a few carefully chosen words will make the data so much more accessible.
  • State the conclusion in words so there’s no risk of incorrect interpretation.
  • Make use of the Gestalt Principles of Visual Perception: in the early 1900s the Gestalt School of Psychology identified how people perceive order in the world around them. They developed a set of principles (laws) to demonstrate how we naturally look for similarities in things, such as through contrast or grouping.
    Here is an example of how the use of contrast can help us identify similarities. The second image makes it so much quicker to identify all the number 3’s:
  • Use preattentive attributes (visual clues) to make things stand out such as bold text, size, italics, case and typeface, and colour. Make sure you apply them sparingly to achieve contrast. They’ll help you build your information hierarchy by signalling to the user what they should pay attention to next, and so on… The following examples show a piece of text with no pre-attentive attributes, followed by the same text with colour applied, and then again with size:

No preattentive attributes.

With colour applied.

With size applied.

 

Use storytelling for effective communications

A good story grabs our attention and takes us on a journey, evoking an emotional response. After finishing it we can easily describe it to a friend. I bet that most of us, even though we learned it in our childhood, can still re-tell the story of Little Red Riding Hood.

You can harness the power of storytelling in your BI Project to give it a framework and to engage your user on an emotional level that goes beyond what facts can do.

In his article  How to Write with Style, author Kurt Vonnegut outlines some useful tips for storytelling. I’ve elaborated on a few here:

  • Find a subject you care about: It stands to reason that if you care about a subject, you’ll be more passionate about it and your project will be more compelling because of it. Even if the topic behind your project is not particularly exciting, find a particular angle that you like, see the benefits for your user — get excited by it!
  • Keep it simple: Hamlet’s famous philosophical question, “To be or not to be?” shows how the most simple, childlike questions can be the most profound, and the most remembered.
  • Have the guts to cut: Be ruthless, think bank to Strunk and White’s quote: every word, “must tell.”
  • Be authentic: You need to write and sound like yourself as much as possible. If you sound human and sincere, your user will trust your project.
  • Pity your reader: In other words, be a sympathetic and patient teacher! You’re not writing for yourself; you’re writing for your user. Make your user the main character in the story. It will ensure your project is about them and not you and it allows your message to become the pivotal point in the story.

 

Start with a compelling headline or title for your BI Project

The first thing your user will ask when they see your project is, “what’s in it for me?” They will also ask, “why should I pay attention?” Remember that 80% of people will read the headline, but only 20% go on to read the rest. Your headline is important!

Here are some tips for writing great headlines:

  • Use numbers: The human brain gravitates towards numbers: they’re factual, believable, and help to set expectations, e.g. “5 tips for writing better headlines.”
  • Add value: Let the user know how they’re going to benefit from reading on. You need to talk in terms of benefits rather than features. For example, a feature of Squirrel is the ability to import a .xlf document. The benefit is the user no longer has to rebuild their dashboard from scratch, saving oodles of time.
  • Use verbs (doing words): Remember, no floweriness! Consider these two versions of the same heading, “6 helpful ways to be brilliant at content marketing” verses, “6 ways to write better content.” I know which one gets my attention!
  • Play to your user’s ego: Involve them in the heading, e.g. “Discover 5 ways you can inspire your team.”
  • Use a question: It creates intrigue and leads the user to believe that the answer will follow.
  • Make sure your headline reflects the content within. It has to be relevant!
  • Draft a whole bunch of headlines: Get your ideas down, then go through and cross-ref them against this checklist. Sometimes it’s best to brain-dump and let your creative juices flow, otherwise, you’ll run the risk of stifling them. Do the tweaking and adjusting afterward.
  • Come back to your draft headlines later on. Even better, show them to a friend. Get an opinion.

 

Think beginning, middle, end!

Think about the narrative flow: the order you want your user to experience the story or message. Again, you need to think about who your user is: are they busy? will they appreciate it if you lead with what you want from them? Are they a new audience? Do you need to establish credibility first?

  • Beginning (intro): tell your audience what you’re going to tell them! There’s probably a problem you’re trying to solve with your BI project. Tell them about it and how you’re going to solve it.
  • Middle: now tell them! Convince them, with the strategies you’ve learned in this blog.
  • End (Conclusion): Think CTA! Make it totally clear to your user what you want them to do with the info you’ve provided. One way to end is to tie your message back to the beginning of the story. You could recap the problem and emphasise the need for action.

Tip: Ask a friend or colleague to check your project. Do they follow the story? Do they understand the message?

 

Summary

I hope this blog has opened your eyes to the important role that copy can play in your BI projects. By utilising the tips and tricks you’ve learned, you’ll massively increase your project’s chance of success in being understood, remembered, and acted upon.

So, to wrap up… half the battle is understanding your user’s needs and delivering something you know they’ll be interested in. The other half is about clarity and making it easy for them to absorb the message within your project.

Want to understand more about the benefits of good design for your BI projects and what you can do to achieve this? Check out our blog 5 simple steps to help you design better-looking projects.

Go forth and conquer!

 

 

The post Improving the user experience with copy appeared first on Squirrel365.

]]>