Usually we would create static wireframes in our tool of choice, whether Illustrator, Photoshop, and more recently, Sketch. We then send these wireframes onto the client, expecting them to imagine what would happen if they clicked a button or dragged an image.

This is fine for most projects, with the client able to grasp what we’ve designed with a brief explanation of the elements within the design and how these would interact. They would then come back with any questions and we would answer these — culminating in a design which is both agreed and understood.

However, there are some projects that need an extra level of interaction. The ability to tap, click, swipe or drag can be key to making a great design more easily understood.

The key is to make a design work not just how we intended, but also how the client subconsciously expects it to work.

For these projects, we needed a tool that would allow us to add that extra layer of interaction and animation. These tools are known as prototyping tools, of which there are many, all vying to become our next best design friend.

The aim of this article is not to give a direct comparison between all the tools we evaluated, but to elaborate on our experience of using them — and ultimately, decide what works best for us. You might decide otherwise, which is great, that’s cool — we’re not monsters.

The quality and functionality of these prototyping tools vary wildly, but they all work in at least one (or more) of three ways; Page-based, Element-based and Hotspot-based. Allow me to explain…

Page-based, Element-based and Hotspot-based

Page-based prototyping

is the ability to link individual screens together to navigate through them one-by-one. There is commonly only one interaction assigned to the whole screen, which is usually in the form of ‘On screen click, move to screen X’.

Depending on the level of functionality, this interaction can be combined with an animation (left swipe, fade in) when moving from one screen to another.

Element-based prototyping

is the more powerful and flexible of the two types and allows us to assign interaction(s) and animations to individual elements on a screen — button, links, images etc.

Being able to apply interactions to individual elements allows us to create ‘real-world’ prototypes and to consider the user flow in a more in-depth way, covering all potential routes into and through an app or website (for example).

Hotspot-based prototyping

is a hybrid of the above two methods and allows us to create similar prototypes but in a more basic way. We can only apply interactions and animations to the screen as a whole, but using hotspots we can define interactions within areas of the screen.

What this means is that you are not actually selecting an individual element and applying an interaction, but rather drawing a hotspot over the element region and defining what should happen if the user interacts within this defined space.

Page-based (Left), Element-based (Centre) and Hotspot-based (Right)

What features we’re after

Given our existing workflow, and without having to change the fundamentals of how we work day-to-day, we wanted to consider tools which had:

A killer user interface

We need an intuitive user interface, this is a given. Not something cobbled together in some guys basement using MS Paint. Something which scales back all of the tools and features into a usable, clean and familiar interface. It’s for this reason that we started using Sketch as a tool for designing some apps and wireframes — the simplicity of the interface.

Zero-training

We don’t want to have to send our designers off on a 2-week UX holiday just to learn how to use a piece of software. It’s also important that we don’t have to completely change our daily workflow to appease the tool of choice, which is why we looked at tools which integrated with Photoshop and Sketch.

Prototyping goodies

The more prototyping features the better. Everything from being able to create simple transitions between screens, animating UI elements and being able to preview these on-screen and on native devices (iPad, iPhone, Android etc). We want to be able to drag text onto a workspace, type something nice and then easily replace it.

Sharing stuff

The ability to share directly with clients, enable comments and then reply directly is of great importance to us. As I’m sure it is to you.

So, let’s crack on yeah?

InVision (Online) — Hotspot-based

Firstly, we’ve been using InVision for a few years now and for us it covers a multitude of needs. Everything from a central place to upload designs, share with clients and enable comments. We can add hotspots to static screens and link these to other screens very easily.

The team at InVision are doing a fantastic job, with new features coming out all the time. Where InVision falls down currently is its lack of animation and transition features. We’re hoping this will all change with an upcoming feature which InVision are calling ‘Motion’. It looks like a game changer. If they get Motion right, coupled with the existing feature set within InVision, this could be the only tool you need. We’ll have to wait and see — check out the promo for this yourself at http://blog.invisionapp.com/motion-prototype-animation/

The interface

The look and feel of the whole InVision interface is pretty darn great. Everything is clean and intuitive to use. We found InVision to have a quick learning curve — even our Account Managers, Copywriters and office pooch got to grips with it easily enough. Managing multiple projects on the system is very easy to understand (see Fig.1)

Fig.1 – the InVision interface

The features

Interactivity is key for us, and InVision let’s us handle this easily. We can import the UI for an app screen, add hotspots and interactive hovers, and send this to the client — all within the time it takes for our developer Jon to make a greasy cup of tea. The commenting system is powerful and fully formed, allowing our clients to easily click on a portion of the design and add any feedback.

Niggles & Bugs

We do sometimes encounter weird juddering on the project overview screen, which seems to be related to scrolling within the browser — sometimes I’ve had to refresh the page to stop this from happening. Also, keeping track of comments can sometimes be difficult, especially if you have clients that like to comment on every single pixel of the design.

Pros

• Very clean and intuitive user interface
• Quick learning curve
• Easy to use interactivity features
• Commenting system
• LiveShare is excellent
• Simple transitions and gestures using the overlays feature
• Integrates and syncs with Sketch and Photoshop

Cons

• Very limited animation and transition features — limited to hotspots to move between screens and some hover effects
• Cannot design within the interface, designs are imported and hotspots applied on-top.

Summary

Overall, we can see InVision being part of our future for some time to come. It does most of what we need, and, should Motion prove to be powerful enough, may even turn into our one-stop shop for prototyping interactivity and animations. You can find InVision here.

Principle (OS X App) — Element-based

A Mac only, standalone app for creating animated and interactive user interface designs. It does what it says on the tin.

The interface

Comprising of a main window, with all the design and interaction tools, and a preview window showing a live view of your current prototype. The idea of a separate preview window is good in theory, although it makes the interface feel a little disjointed. There’s no denying that it is still useful and helps to quickly iterate the design.

It has the simplicity of a Keynote-like interface including all element properties and settings in the sidebar (see Fig.2)

Fig.2 – The Principle interface

I couldn’t help feeling like all the elements available to me weren’t immediately apparent . The part of the interface where the element tools are grouped feels very basic, with only Rectangle and Text being visible (see Fig.3)

Fig.3 – Where my Circles be at?

I would have at least expected a Circle or Shape tool. In comparison, UXPin gives you a veritable smorgasbord of element tools (see Fig.4)

Fig.4 – Elements galore!

The features

Principle’s strength is in its interactivity tools. It uses a timeline-based system for adding time-based animations and interactive elements. This seems very powerful, yet familiar, feeling very much like a mix between the animation timeline in Photoshop and the parameter-based keyframe system of platforms like Flash and After Effects. It’s worth noting that those with experience of using Sketch will find its interface very familiar — Principle even goes as far as to utilise some of the same icons in it’s UI.

The niggles/bugs

The only niggle we had was with the colour of the interface, not really a deal-breaker but sometimes staring at a grey/white interface for hours at a time can screw with your mind — it would be nice to be able to change to a darker version perhaps.

Pros

• Great for interaction design (including motions and gestures)
• Uses timelines for more advanced animations
• Integrates with Sketch
• Live Preview is useful
• Preview on native devices (via Principle Mirror app)

Cons

• Cannot share online (only export to video or animated gif) — not good for sharing an updatable URL with clients.
• Limited tools for creating elements
• Live preview screen can sometimes feel in the way

Summary

If you’re looking for a tool which has powerful interactivity features, and you are comfortable with the slightly more advanced timeline/keyframe way of working, then Principle may be the tool for you. Just be aware that it’s not made for designing with and is just purely a way of applying interactions and animations to imported designs.

UXPin (Online) — Element-based

This online prototyping tool is a fully-featured, mature system which allows you to design, animate and add interactivity, integrates seamlessly with Sketch and Photoshop, with export plugins available for each.

The interface

The interface is, on the whole, very good. You can change the colour of the interface to be darker or lighter to suit your preference. Adding interactions/animations is very intuitive. It’s very much like the UI of the other systems we’re reviewing but based in the browser. UXPin have done a good job of making this usable in the browser, barring the ‘States’ panel, which is extremely frustrating to use (see Fig 5).

Fig.5 – The UXPin interface

The features

Smart elements are a great way of reusing elements across multiple screens. The included element libraries are very good and there are lots to choose from. Also, like the other systems we are reviewing, UXPin utilises a layers palette to keep track of elements on the design.

Sharing is one of the UXPin systems greatest assets, allowing you to share your prototype online at the click of a button. This is exactly what we need to send to clients, without the need for them to install any extra software/plugins — it just works directly in the browser.

The niggles/bugs

We find the interface to be very buggy, sometimes to the point where we think certain functionality is just not finished. Creating new element ‘States’ is touch and go, sometimes it works and sometimes it doesn’t. It is also very difficult to see what states are already created, as the States of the UI is partially hidden —and yes, we tried to increase the size of the ‘States’ panel — but we just couldn’t get it to go any bigger. The ‘Undo’ feature is also flakey, sometimes you have to press undo twice before it does anything (although I believe they may have fixed this in the new update).

Pros

• Integrates with Sketch and Photoshop
• Great Customer Service and Support
• Actively developed with regular features and updates
• Live preview
• Good set of interaction design features

Cons

• Very buggy!
• Some elements either very frustrating to use or just plain don’t work

Summary

The number of features, integration options and sharing/collaboration functionality makes UXPin a very strong offering, but when trying to create a complex prototype, we found that things quickly became very difficult to keep track of.

Pixate (OS X App) — Element-based

Pixate’s strength lies with its powerful conditionals-based animations and interactions. There is a generous selection of animation and interaction effects, which, when coupled with the use of conditionals, allows you to effectively chain different interactions and animations together. Pixate became part of Google in 2015, and other than a major 2.0 release last December, there hasn’t really been much activity within the Pixate camp. However, we really think that the tool has potential so we included it in our review.

The interface

We found the interface to be very intuitive, with a very shallow learning curve. All the tools and properties are laid out clearly, some of them in a similar way to how they are laid out in UXPin.

Unlike other tools, you cannot create new designs in Pixate. To create prototypes you need to design your screens elsewhere and import them. The import process is very simple and once your screens are imported, they are easy to keep track of in the Layers palette.

What it lacks in design tools, it more than makes up for in the power of its other prototyping abilities (see Fig.6)

Fig.6 – The Pixate interface

The niggles/bugs

Ok, we found it to be buggy. We often had to find a workaround for something very simple. Maybe now Pixate is part of Google, it will be able to fix some of the bugs.

Pros

• Advanced conditionals (if-then-else) are quite powerful
• Complex interactions can be achieved using ‘chaining’
• Actions feature has real potential
• Support for different device resolutions

Cons

• Cannot export to web, not great for showing a client
• Client needs either a web account or the Pixate app installed to be able to view prototypes
• A bit buggy
• Doesn’t appear to be as actively developed as some other offerings

Summary

The tool is quite powerful and has real potential. It will be interesting to see just how the tool evolves now that the design team are part of Google. it may be that Google integrates Pixate as part of their own offering, in which case it is worth hoping that the tool’s power is retained. www.pixate.com

Other tools We also looked at other tools in addition to the above, these included:

Origami — Facebook’s own prototyping tool
Proto.io — not a great UI and also has a steep learning curve
Marvel — interface felt a bit too basic, although it has great collaboration tools

And now, the conclusion.

We came to the conclusion that we would continue to use InVision for where hotspot-based prototyping was appropriate. And, until they release their ‘Motion’ suite of tools, for anything more complex we would use UXPin. Despite UXPin’s buggy interface and having to create frustrating workarounds, it provides us with the exact set of tools we need — intuitive creation of interactions, a great auto-saving feature and extremely useful sharing/collaboration functionality.

We hope you have found this article useful, please feel free to add your own reviews and comments below!

Artboards allow you to have multiple designs within one document, by allowing you to place multiple designs side-by side. These designs can be of varying sizes, with some preset sizes being made available to choose from including popular web, tablet and mobile sizes – even Apple Watch. This makes it great for designing responsive websites and apps, allowing you to work on the desktop, tablet and mobile views within one document.

You can easily drag and drop assets between artboards, which allows them to be linked – essentially allowing you to change an object on one artboard which then changes it across all other artboards. These can then be saved and exported individually – making this an extremely powerful and flexible new feature. So let’s dive right in!

Checking and updating your Photoshop version

First off, make sure you are running the latest Photoshop CC 2015 version. You can check your version by going to the Creative Cloud icon in your menu bar. If you need to update it will tell you.

Creating a new artboard

Once you have the latest version of Photoshop, fire it up and we’ll begin by creating a new artboard. Head straight to the File menu and select New, as you usually would when creating a new document. You’ll notice that there is a new document type option called ‘Artboards’. Selecting this shows you a whole raft of new document formats to play with.

Adobe have been really thorough here and have provided us with a large selection of preset screen sizes.

When it comes to layers and how these relate to multiple artboards, we can see that the artboards appear almost like a master group which contains the layers for that artboard. We think this is an extremely intuitive way of representing the layer hierarchy.

Duplicating an artboard

What if you wanted to duplicate an artboard? Well, this also works in the same way as Illustrator, again Adobe seem to have kept the functionality of this the same as it is in Illustrator – which is fantastic for consistency of workflow between products. Holding down the ‘Alt’ key whilst dragging an artboard will duplicate that artboard.

Once we have our designs ready to rock, we can easily export them to PNGs. This is useful if we quickly need to send our designs to the client for review. Exporting these artboards is as easy as right clicking the master layer group for the artboard (in the Layers panel) and selecting ‘Quick Export as PNG’. Alternatively, hitting the ‘Export as…’ option presents us with a new look dialog where we can choose to export our designs into various different formats – useful huh?

What if we wanted to quickly export these designs to PDF? Well Adobe have thought about this too. Head on over to the ‘File’ menu, hover over ‘Export’ and select ‘Artboards to PDF…’ – hey presto!

So, with artboards now added to our design arsenal, what can we do about retrofitting our old designs? Well, this is cool too! Just open your existing design and group all of your layers into one big master layer – now just right click on this master layer and select ‘Artboard from Group…’ – now we’re cooking!

I hope this post has helped you to understand the power of artboards and makes you feel comfortable jumping straight into using them!

Has this been helpful? Do you have any tips on using artboards? Leave us a comment below…

It’s quite clear that I needed to rethink the way I was receiving and reacting to these emails, before it led to disaster. In amongst the alerts, the informational, the slightly useful and the spam lay key messages, important questions from clients, new leads for new business and business critical info. A few too many times I’ve found myself remembering an email somewhere in my inbox that needed attending too, a little too late. I knew that with a new method, I could satisfactorily organise my emails into a priority that made sense- one that sensibly filed away the useful info and set aside the ones that needed a response or a follow up into a nice, easy to read to do list.

A year or so ago I attempted this with Mailbox, a rather delightful looking mail client that had a lot of buzz and a very enticing waiting list that made me feel like I was sitting outside an exclusive nightclub. This is how I learnt of the zero inbox approach, and while the idea excited me, I found the lack of a desktop app problematic. I needed something I could spend my day at a desk with, and while the phone app looked and worked like a dream, I found myself back in Mac Mail, trying to force the methodology into an application that simply wasn’t designed for it.

I left the idea for the time being, but then came along the shiny, material design blue-fest of Inbox by Google. I got early access when it was only available for gmail.com users, and tried it out on my personal account. I instantly loved the sneak-peak semantic thumbnails that summarise visually the important content of each mail. I loved the non-linear bundles system, that recognises certain types of emails, such as purchases, travel or finance, and puts them altogether, automatically. I loved how closely tied the system was to the Google Tasks system, so I could easily turn an email into a to-do. I also loved the idea of snoozing emails. Very often I’m in a meeting, or deep in the midst of some code, and while I notice an email coming through, it’s just not possible to respond to it there and then. Being able to hit ‘snooze’ and have it pop back in the mailbox at a time of my choosing was a vital feature that I simply don’t know how I lived without. It felt like it was half way there to organising my inbox for me, but as it wasn’t available for my work email address, it drifted from my every day use, and I found myself back to the iOS and OSX default mail apps before long.

Recently, however, Google Inbox was released for all Google account email addresses, so I took it upon myself to adopt the new app, and the new way of treating emails. This blog post chronicles my uses, my love, my annoyances, and ultimately whether or not its a system ready to be adopted for professional, high volume email usage.

Day One

A slightly sunny Saturday afternoon, and I add Inbox to my shiny new iPhone 6 plus and iPad and turn off the default mail accounts. I add a bookmark to Chrome and then I spend about an hour or so going through the beast that is my inbox (7,000 little internet barfs inside) and perform a mass clear out. I mostly just select ‘done’ on everything, which pushes your emails into an archived section, out of the way. I’m not entirely sure I should be doing this to every email, but I can’t cope with putting serious thought into 7,000 emails. I feel a bit like when I’m tidying my house. As fast as I can, get it over with, shoving everything into draws, randomly. A problem for future me to worry about. Once everything’s out the way, then I can start afresh. Google rewards me with a zero inbox with a cute little picture of a material design sunset, or sunrise or something. I feel satisfied with my life.

Day Two

My beautiful empty inbox keeps getting interrupted by emails from companies I don’t care about that I wish would leave me alone. No, Monarch airlines, I’m not going to fly with you again. No Just Eat, I don’t want to reorder a curry through you, I’ve already eaten. Please leave me alone. They fall directly into my “Promos” bundle, which is great, although I don’t want them at the top of my inbox, so I have to hit ‘done’ next to them. Which feels strange, as I haven’t “done” anything.

Later I need to find someone’s phone number, and I know they emailed me recently. The search works really nicely, and returns both a little summary about the person and all emails that mention him, so I can easily find the number, much quicker than in mac mail.

I’m a little concerned that the Chrome tab doesn’t tell me how many unread mail I have, and there doesn’t seem to be a notification on OSX. My phone’s pinging away, so maybe that’s not so much of an issue.

Inbox doesn’t appear to have an ability to add HTML signatures, and I know that they’re a little dated in this new world of conversational, text message style emailing, but I do feel as though they’re needed when sending professional emails, especially from a digital agency. I find a useful Chrome extension called Gmelius which appears to resolve that, by adding in HTML signature imports from Gmail and a few other handy features such as an instant remove from mailing list button (take that Monarch!).

Day Three

Right, it’s my first workday using the new approach. It’s 7.20am and there’s already a collection of emails sitting in my previously empty inbox. I lie in bed and remove a few unimportant notifications, add a reminder to cancelling a hosting account and pin a couple of client message down so that I can address them when I’m in the office.

Sitting at my desk presents me with a couple of issues with the desktop version. Firstly, there’s no little number next to the favicon in my Google Chrome tab, which is a bit annoying, especially as the main gmail website has this feature. Did the inbox team forget about it? Or did the traditional gmail team keep it to themselves because they were angry and jealous of their new hip younger sister? A little later, I find another thing lacking about the browser version. I can’t drag files into my emails. What is this, 2011?!  This seems like a strange, glaring miss. I find that I can drag files in from finder in the new ‘compose email’ box, but not when replying to already existing email threads. Another omission, there’s no OSX notifications as of yet either, so I’m relying on my phone to ping, and then addressing the emails within the app.

Despite these issues, I’m feeling remarkably well organised, and have all my correspondences in order. There’s no nagging feeling in the back of my mind that perhaps, just perhaps, I’ve missed something. After an afternoon meeting I clear off my messages and reply to those I need to. My inbox goes back to being empty. Go me.

Day Four

Certain little things are really annoying me about the browser version of Inbox. I can’t right-click on file attachments and copy them into new emails. This is something I do quite a lot. I’m starting to find the search facility a bit frustrating too. It’s fast, but it doesn’t seem to take me direct to the message that I’m searching for. And what is with drafts? They build up like a beast, so you end up with a billion draft versions written out (see the featured image). It also seems to cut off certain aspects thinking they’re not necessary, but actually they’re vital parts of a chain of conversation. My Inbox is empty, I’m more organised, but I’m starting to get grumpy. I’ll continue for the week and see if the grump turns into a hump.

Two weeks later- love and annoyance

So two weeks have passed since adopting my zero inbox approach to work emails. There’s been some great moments, the sheer ecstasy of clearing out all my tasks and being greeted with the pleasant animation of the sunset just before leaving to watch England play New Zealand at cricket, for example. There’s been a lot of agony too- a strangely poor web browser version being the main culprit, missing key features and the handy ability to swap files around here and there with ease. In terms of making me more organised, I’d definitely say that the zero inbox concept has made my workday better. I feel like I know exactly what’s going on, and even when inundated with tasks from emails after a long meeting, I can refer to my todo list and keep it tidy and manageable. The snooze feature works great, although slightly depressing when 10 snoozed emails of problems fly through to you at 8am on a Monday morning. Ultimately, I wouldn’t feel comfortable recommending Google Inbox for other business users, not yet. But the concept of a zero inbox is definitely something I would recommend to everyone. Especially those with a very, very dynamic email account. For me, I’ll be sticking with Google Inbox for the future, hoping that the missing features are just around the corner, or a plugin will come along to make my life complete.

I should start by saying that we, as an agency, endeavour to be the best at what we do and quite often this leads us to challenge the accepted norms. We feel this sets us apart from the others – those who think as design as purely a commodity; something to be sold time and again without thinking about the consequences for its client and end users.

Times change, the internet evolves – and with it, the way that people use websites has evolved. Knowing this is key to understanding how people use and interact with elements of a website.

We wanted to re-think the way in which forms would be used and to create a standardised form design which we could use on future projects. As an agency which focuses heavily on design, we know that great design should focus on experience, but balance creativity.

With this in mind we needed to design a form experience which was:

• Usable
• Accessible
• Visually appealing
• Flexible

We discussed what best practices we knew to be true, what information needed to be captured on the form and what the user needed to see to understand and complete the form correctly.

Using our combined experience, tried & tested methods and common sense – this was our process.

A basic approach

Starting with pencil and paper, we went back to basics and began by thinking about what a form was at a very high level.

Looking at the basic form field types, we looked at how we could apply a set of basic rules to these to create foundation & consistency.

How would the form elements look? Could we use colour coding to denote clarity and consistency? Would validation messages instantly convey understanding? Would the validation work the same across all the field types? How would accessibility concerns be addressed?

These are some of the questions we needed to address to be confident we were doing what was best for the user.

Be clear

Thinking firstly about the layout of the form, we sketched a basic form structure. Knowing that users initially scan a web page with their eyes before making any kind of decision, we knew that keeping the form as linear as possible was common-sense and so we tweaked the form layout to reflect this.

The reasoning behind this is so that the user has a clear goal – they can scroll down the form and know what they must do in order to get from A to B.

We knew that having the user look vertically would keep the correct momentum – giving a sense of progression, whereas too many columns of fields would have the user looking horizontally (perhaps numerous times) – this would work the users eyes too much, potentially giving the user a sense of confusion and a lack of progress.

However, we also knew that sometimes this could not be avoided and so we relied on Form Grouping to help with this (see ‘Keeping it interesting’).

Keep things succinct

Knowing that people initially scan and not read a web page, we also know that ‘the longer the sentence the greater the strain’ – thus, if a sentence of text is too wide, the user will struggle to reach the end of that sentence and may even lose their place.

Whereas if your text sentence is too short, your user will find their eyes moving from left to right too much trying to keep up, making the reader work harder than is necessary, thus breaking their flow. It is estimated that most users will only read around 25% of on-page content.

It is, therefore, important get your point across as quickly as possible. Again, this is even more critical if your page is conversion led.

We decided to apply this rule to form field widths. Where we only have 1 column of form fields, we would also make sure that the form fields were not the full width of the page / container – as this can not only look terrible and but would not be good for usability.

Who wants to deal with a select field that is 1000px wide? Think about all that wasted space inside the element. That being said, there is a balance to be made when you have lots of space and only a small form – but that is an inherent challenge of design (and what keeps design so fascinating).

Keeping it interesting

Just as we wanted to reduce the complexity of the form and keep the users eyes motivated, we also needed to consider the overall length of the form. By this, I mean the number of fields the user will need to complete before being able to submit the form successfully.

Common sense dictates that if the user becomes bored, their concentration will drift – this is true for forms. If the user lands on a page and scans down the page to find a very long form, this has shown to put some people off immediately. Again, if your form is conversion-led, then this could have dire consequences for your on-page goals and ultimately your service or product.

Thus, we needed to keep the form length to a minimum. For those forms that need to be field-heavy or for those users that dare tackle such a form behemoth, there are certain design techniques we can leverage to make our form more usable and less daunting, these are:

Signposting

This technique is a way of giving feedback to a user about which stage they are currently at within the form process. This is often used on forms with multiple steps (such as multi-page forms) and is a great way of showing the user where they are and how far they have yet to go.

See below for an example of this type of technique.

Form Grouping

Whilst signposting can be a clear indication to the user about where they currently stand, there is another powerful technique known as Form Grouping. This technique leverages the ‘Gestalt laws of form perception’ and more specifically the ‘law of proximity’.

This law posits that when we perceive a collection of objects, we will see objects close to each other as forming a group. What this essentially means for our form is that by placing form fields into groups (based on similarity) we can essentially indicate which fields are related – thus providing the user with a clearer view.

HTML already provides a semantic structure for this called a ‘Fieldset’ – this is used to visually (and semantically) group related elements within a form, so from a design perspective it made complete sense to leverage this on the visual side too.

We can further improve upon this by adding visual cues to the form groupings. These visual cues can include group headings – something as simple as ‘Personal Details’ or ‘Employment History’ – therefore adding a title to describe what information is expected from the grouped fields. By adding a border around these groupings, we can further remove any doubt of which fields are related.

Multistage forms

Splitting a form across multiple stages can have its advantages and disadvantages, and can ultimately help guide the user through an otherwise lengthy or complex form. There are 2 main ways a multistage form can work; on the same page and across multiple pages.

Again, there are arguments for and against either of these options – we’re not going to go into this in this article because it is outside the scope of what we are trying to do.

The design

Once we had considered our form’s layout we then moved onto the visual design of it’s elements. We weren’t so much concerned with the exact styling of the elements, rather the design & placement of the user feedback and validation in relation to the form fields.

Because we were designing a form which could be re-used and form the basis of future forms, we needed to keep the exact styling to a minimum – this being left to the per-project design and branding stipulations further down the line.

Staying focused

We opted to add a pleasant border-radius to the inputs, then added a 2 pixel grey border. The text label & placeholder colour was matched to the same colour as the 2 pixel border, this then set our default state for our input style.

It was imperative that we provided clear feedback to the user and so we looked carefully at the styling of various input states. We designed for the following:

As you can see, we utilised colour coding and a change in border width to show a change in field states. Further consideration was given to designing for the visually impaired – see the ‘Making it accessible’ section for how we tackled this.

A valid argument

Validation is a cornerstone of form design – without it you risk confusing the user. Some simple visual feedback to the user shows when something isn’t valid and is the difference between a user happily submitting a form and giving up because they simply can’t figure out where they have gone wrong. Remember; don’t just show the user where the issue is, you also need to tell them what the issue is.

We came up with the following:

Thinking outside the box

People tend to think of forms as an arrangement of text and boxes, whereas a form could be anything. The whole point of a form is to capture information from the user – so shouldn’t this be the ultimate goal? I mean, this is obvious – isn’t it? Sure, but sometimes something so obvious can become secondary to a maverick idea, poorly executed creative or just simply a CBA (Can’t Be Arsed) attitude.

Forms are not just great at giving the user a chance to provide some details about themselves – they are also a fantastic tool for letting the user make a choice. Multiple choice questions are a great example of this and are typically represented by a series of radio buttons or checkboxes. Is there anything we could do with our form to make this choice more usable? We designed a great alternative:

An alternative approach

Another great alternative to the standard form we all know and love is what codrops (http://tympanus.net/codrops/) calls a ‘Natural Language’ Form. An example of this can be seen below. The idea being that you change the details of a structured sentence to build up to a completed response – ready to submit.

This can be an extremely intuitive way of gathering information from the user as it essentially guides the user to answer specific questions within a structured & finite sentence. There is no room for error, no textarea allowing for vague answers or explanations.

This approach can be used with select inputs to further constrain the user to a set of predefined variables – this is not necessarily a bad thing, as it keeps the form succinct and the potential for vague responses to a minimum – capturing only the information which is needed.

Making it accessible

Making the form accessible was at the front of our minds from the minute we started this project. We knew that to make the form as inclusive as possible we would need to combine accessibility with usability and creativity.

Note: We’re not going to stray into development territory here so any accessibility considerations at the code level will be discussed at a later date.

Being inclusive

From a design perspective, we had some ideas about how best to tackle the issues of colour blindness and visual impairments – we would use colour coding and iconography. This is a much-used technique for forms but is also one which makes complete sense in its simplicity.

For visual impairments such as those with poor vision, we would use the colours green and red to make a distinction between fields which were completed correctly and those which needed some attention.

Colour blindness was also a concern and so we added a green tick and a red cross to further clarify the difference between a fields status – a tick for OK and a cross for NOT OK.

Label & placeholder bugbears

Another issue with forms we see regularly are those which have no input labels and instead use placeholder text as labels within the form fields themselves – see below for an example.

This is bad. Why? Because the input label is there to inform the user about what information is required from them. What happens when the user clicks into the field and the label text disappears? What if they start typing and then forget what information was required? Does the user need to enter their name or their shoe size? There’s no immediate way for the user to regain that vital information.

Sure, they could delete the contents of the field and click out of focus, thus regaining the placeholder text – but this is very unintuitive and quite frankly silly. Why would we put the user through that?

No, take it from us that this is an example of how not to design a usable & coherent form.

We needed to make our form fields as informative as possible, arming the user with as much information as possible to complete the form smoothly and without issue. We would have both a field title and an example of the information required set as the placeholder text. Example below:

Thinking ahead

Our team is always thinking ahead and when it came to the responsiveness of our forms, this was no different. At each stage of the form design process, we considered how the form would behave responsively – our main considerations were:

• Would field width be an issue?
• How would we keep the visual flow of the form, so as not to distract the user?
• How could we minimize the space taken up by any validation messages?

We created a mockup to visualise how the form would look on mobile, see below:

The key to making something work across platforms was to keep things simple from the beginning. Adding design complexity needlessly would almost certainly have posed problems for a responsive form design.

We rounded off our form design process by considering how we could make the form even more powerful and intuitive for the user.

Taking the form further

As we’ve said before, the web has changed. Websites are more advanced and forms have evolved alongside. Modern forms are an important part of many conversion goals. Whether this be for capturing as many users details as possible or for increasing e-commerce sales. Surely, if we could tailor the form for every user, this would make the form an even more powerful tool.

We decided to leverage advanced form analytics and for this we wanted to use a 3rd-party service – there was no point re-inventing the wheel when there are some fantastic services out there waiting to be discovered.

It may sound strange for a design-based article to drift into statistics, tracking and analytics – but anything that allows us to make informed design decisions to improve our form is not only a positive thing but is essential for our design to move forward.

So, having identified some potential services, we made a comparison based on each of their offerings – we wanted a service which would allow us to:

• Track form users from start to finish
• See form users in real time, live on the site (we didn’t know if this was even possible!)
• View individual form field statistics
• Make judgements on whether a form field needed tweaking based on these stats
• Be able to compile some solid data about form users and their usage habits

After comparing services, we decided to use a service called Formisimo. This service stood above the rest as it clearly offered everything we needed. The Formisimo service provided very simple integration – just requiring that a code snippet be added to a form, which our developers kindly added onto the form for us.

We logged into the Formisimo system and, when we started testing our new form, slowly began seeing test data feed through. Immediately, our team saw the power in these advanced form analytics and we knew that this would give us even greater visibility on our forms usage.

Being able to track users from start to finish was pretty amazing. Through internal testing, we could see at which form field a user decided to abandon completing the form – allowing us to consider why this was and what we could do to ensure this was reduced.

Reducing dropouts is clearly important and we found that using the Formisimo system we could even see if a user is struggling to complete the form – offering help by showing a helpful on-screen prompt.

Armed with a new, considered form design and some powerful form analytics, we were confident we had created a form for the user. One which put the user first and allowed us to leverage the latest techniques and ultimately pass these benefits onto our clients.

How do you design forms? Do you follow trends or go your own way? Let us know by commenting below!

So we went round the houses looking at all and sundry in the project management world. We tried all the basecamp extensions to add that extra layer of functionality and ease we were looking for. The closest we came was with PPM Roadmap, which put on a slick layer of resource utilisation, gantt charting and click and drag job hour and milestone changes. However we found it to have a clunky unintuitive interface, even after their big Gantt chart update, just didn’t cut it, and so we moved on.

So we went back to basics. What do we want? As a must have we want a system that can:

• Act as a CRM – introduce leads, respond to leads with recorded comms (from us and client) and give an indication of where the potential client is in the service life cycle
• Easily manage projects – In its simplest form we wanted to be able to transfer converted leads into projects, easily load task and milestone templates, invite clients to collaborate through the system (great for managing expectations and being transparent on workflows) that told us what needed to be done by when
• Manage resource allocation – there is nothing quite as wasteful in my head as wasted time (ho ho ho, they ain’t making any more of it) so above all else we wanted to make sure we were busy for as much billable time as possible.
• Map critical paths – we want to know where our dependencies are up to, when we are coming online so that we don’t waste time or effort and can plan ahead
• Invoicing – we would like to be be able to record billable hours and then feed this into a month end invoice to be sent to the client
• Calendars sync – across the whole business we want to see who has what on which day, when milestones need to be hit and when meetings are taking place
• Communication – to be able to chat about projects freely and easily (recorded)

Now we are cooking, so what application does this well? You have some very good value options that we looked at including Zoho but I wasn’t keen on the user interface, the level of support and the billing of micro additions confused me, so guess what, we scrapped them. We then looked at some more focused creative agency setups such as Streamtime which has been heralded as the greatest thing since sliced bread. We found the issue here is that it just wasn’t intuitive enough and it felt like it was going to take 3 months to learn. In fairness this could still be the best thing since sliced bread but we just felt it was too much like hard work to get to know, and we couldn’t find the time to devote to it that was required.

This isn’t really about what was wrong with every other system but how, in my mind, there isn’t one system that just works beautifully, there is always a need to just bridge the gap between many to get what you want. I suppose it’s like everything in life, there are small shops that sell one type of product really well or one boutique restaurant that does one dish amazingly well. So we decided to use what we had to make it work as best we could for us. We are now 3 months in with probably 30-50hrs of research time employed.

So what are we doing:

1. We use Highrise (37signals suite) to manage our leads from contact to client (with recorded comms during this process)

2. We create projects in Basecamp with to-dos and milestone. We also add the client to the project so they can see what we are doing and what we need from them. All email comms are recorded throughout the process in basecamp

3. We use a couple of real whiteboards (not virtual ones) in the office. One contains all live projects with the milestones that we are currently at, this helps quickly visualise where we are at as a company, and where we need to allocate more work. The other whiteboard is a person orientated task board, including what’s being done today and what is pending to be done. At the beginning of each week we have a 10 min quick fire session where everyone lists what they need to accomplish in the week and then colour coded sticky notes (for each service and including internal jobs) are placed on the board under their name. We even put the completed jobs on the poster board next to each of us so we can assess what we have achieved each week, its nice to se a big pile of tasks completed at the end of the week.
4. We use Xero for our invoicing and accounting which is a brilliant program, we create quick and easy invoices form the Basecamp client time allocation records (which take 2 mins) at the end of each month. Xero syncs nicely with our bank for reconciliation and it has great cash flow, profit and loss and forecasting tools.

5. We use Google calendars to sync all our calendars. We share the Basecamp and Highrise feed with all our company Google account calendars calendars and then share these calendars internally. We are now at the point where we use Google calendars to do meetings, holidays and day to day bookings and the Basecamp feed shows the milestones. Don’t sync to dos on your Google calendars as it turns it into a jumbled mess of activity that cant be deciphered.

6. And lastly how do we communicate to each other. Firstly we talk, not continuously, but each Monday morning we have a 10 minute chat and task list, and at the end of the week on the Friday we assess what’s been done and how well we worked across the projects. Once a month we have a sit down for an hour to discuss internal procedures, our marketing material and look at our finances/forecasting/pipeline. We use Skype to talk or send each other bits of info and anything client or internal project related will be relayed though the Basecamp project message system via email.

I’m sure as we grow this will change but that’s what’s working for us right now.