Why User Interaction Design needs to go hand-in-hand with UX

User Experience: Like all things web related, the rabbit hole goes deep. No “professional” ever realises just how deep the hole really goes. I can say at least for myself – that I have a pretty solid grasp of how the modern day web functions. As a qualified visual designer, and a working front-end and WordPress developer, I know all too well what the relationship between user experience and development entails; how they tangle each other like a cassette tape that has got all messed up in your Dads Hi-Fi system.

A few months ago, a colleague and I took on a large freelance project. We’ve always worked well together many due to the fact that between the two of us, we cover the 3 main aspects of web development – UX, front-end and back-end. This wasn’t the first time we had taken on a big project together, and it definitely wasn’t the first time I had been in charge of conceptualising a user experience flow that communicated not only the brand, but the purpose of the website in a way that users would understand and relate to.

User Experience is a an untameable creature at times. Making sure all users understand your intended flow and hierarchy of information, yet simultaneously understanding what that means for developers is a tough one to crack. The meaning of the word ‘skilled’ that you prefix along with all your resumes really starts to get quite heavy and gain some gravity. Anyway, back to the project! We had designed about 15 pages all in all, as well as 5 revisions of each page before it went to development. As you can imagine, lots of fine tuning was done until the client was happy. As a pretext, we really didn’t have too much time amongst other influencing factors and we definitely overlooked some aspects of the project in terms of its logic and functionality which Im sure contributed to the scenario.

We took the pages we had designed to development, and everything went great, we weren’t using any form of CMS – we built the entire site from the ground up, hoping not to be limited by the restrictions of a seemingly “open” but “closed” system like WordPress or Joomla. This is where things started to get a bit hairy. We realised that our well thought out UX wasn’t so well thought out after all. Little issues and roadblocks started popping up at every turn. Taking into account that we were building a very sophisticating booking system, with calendars, carts, user profiles and dynamic pages this was probably a given in the first place, it definitely made the interaction problems worse however. As with most things in life, and pretty much all things in web development, those little issues started posing a mountain of problems at nearly every important stage of communication and user flow. I was baffled to say the least. Why was this happening? Was it a back-end problem or a front-end problem? Or was it really the fact that I hadn’t bothered to take a project like this seriously enough to perform a User Interaction Design. 

Lets be honest, on the majority of small creative websites – “About” goes to the About page – your “Portfolio” goes to your Portfolio page – there really isn’t too much thought behind it. Even One Page Scroll sites are hard to get wrong with scrolling events. That being said, when we make our way to more complicated sites where the amount of “interaction” becomes more important, considered and deliberate, we absolutely need to think quite deeply about how the user works with the interface at hand. I cannot stress enough how much time it will save. If anything, you can sleep well at night knowing that your user experience is solid and you’ve considered just about every possible path that a user; be the person experienced or not, can take.

By employing a User Interaction Designer, for the first time, you actively begin to think like a user would, clicking on buttons, trying to go back to certain pages or just trying to find information. These processes trigger questions in your mind, such as:

  • “What happens when I close this modal dialog?”
  • “Where does the “Book Now” take me? And what happens after that?”
  • “Can the user retrace their steps in order to retrieve important information?”

If these questions jump into your mind, its probably the best thing that could happen to you. It means that you as the designer are starting to get the bigger picture, you’re starting to see just how far down the rabbit hole really goes, and thus you will plug any problems that may arise before the project lands up on your developers desk.

So, in conclusion, what I’ve realised is that once your user experience design is complete, you are actually not done. As the designer you need to export every .psd or sketch file into a .jpeg and upload it to an app like Invision or Marvel. Marvel is free (unless you want to keep your project private and work with teams) and I find its own user experience to be pretty clean and easy to get my head around. The apps allow you to link pages together, and thus forces you as the designer, developer or potential user to really gauge what is happening in your design. Something which you really cannot do inside apps likes Photoshop or Sketch. You’ll soon realise: “Oh, I’ve forgotten a login button” on a page or multiple pages.

Besides achieving a great overall user experience, you will impress your client beyond words let me tell you.

I hope this article helps you if you’re right in the middle of a freelance project. Im also available on Twitter if you want to pick my brain or just drop me an email at [email protected]

Subscribe to our mailing list