Published on | Prototyping: From UX to Front End — Medium Andree @blended.io

I have gotten across many articles and simple stencil kits that promote Sketch as a wireframing tool (for interaction design). In fact, we are still not convinced. Let’s find out why.

Below, I will outline for what reasons and I will explain why other applications might be better equipped for interaction design. In order for you to understand my point of view and perspective, I will firstly lay out the day-to-day activities of an interaction designer and then secondly will explain the differences between designing websites and complex systems or applications (as short as possible).

Interaction Design: Complex interaction rather than point-and-click

Let’s clarify what I mean with interaction design (or IxD). Unfortunately, Wikipedia leaves quite a bit unanswered when visitors glimpse at the opening paragraph for the term: “Interaction design is defined as the practice of designing interactive digital products, environments, systems, and services”. Most non-designers will likely think that “Hey, isn’t that User Experience Design?”. Well, sort of. In short, interaction design is part of the Experience Design process.

An interaction designer cares about how humans interact with machines and is therefore heavily focused on the content, the logic and behaviour of a system or an application. On a day-to-day basis and hands-on level, though, an interaction designer will define for example what content will be accessible by the user on page or screen X of a website or mobile app and, furthermore, the designer defines the screen interactions in order to be able to access that information.

Let’s take the Apple iMessage iOS app as a quick example for interaction design: In comparison to WhatsApp in which a timestamp always accompanies each single message, the design team at Apple decided to hide the timestamp for each message to only show one once “some” time has passed between messages. Now, an interaction designer defined a gesture, a pinch to the left in the message thread (the interaction), which then shows the timestamp per each message (the information).

Simple Websites, Complex Systems?

At blended.io, we build complex software and applications and therefore our Experience practise focuses heavily on software UX. Although there is some overlap in terms of functionality across projects, most systems or applications that we build are quite unique.

Websites, in a typical sense, are less complex than systems and its (web) applications where specific user flows may spread across (interconnected) touchpoints. A couple of examples for more complex sections or parts of applications could be, e.g. setting up a new campaigns on Saas-based ad platforms, adding and managing printers and its jobs or perhaps designing and defining the UI that allows for user roles and user management across systems.

So, for an interaction designer the daily work would imply figuring out what content each step of such an aforementioned process would need to have and especially how the flows shall be orchestrated, how many steps they shall contain, what the user can do in each turn, how the user can interact with the UI.

Websites in comparison are usually orchestrated in a very similar fashion (although of course there might be content heavy sites and therefore more complex, i.e. like those of universities). A site will have an index page, a contact page, a page for products or a page for solutions etc. The site architecture won’t differ much from other website projects and, hence, the complexity of interactions on the typical site is pretty low. The concept and wireframing work (if any) will mainly evolve around site architecture and content rather than user interactions, data states and creation flows for example. Besides, wireframing work on website projects is often skipped or neglected.

An IXD disadvantage in Sketch and the benefit in Omnigraffle or Axure

Wireframing @blended.io where each step in a users’ interaction is visually defined and explained

Now, it may not have been as brief as you would have liked it but explaining the differences in a bit more detail is crucial to understand my point of view.

At blended.io we often work on projects with clients where product features have yet to be defined, therefore, ideation and concept work is a strong lever through which we help our clients build better services. During the interaction design phase we iterate and create many concepts that evolve over time within the boundaries of technology, business and the user.

As interaction concepts will change during design and sometimes during development cycles (not ideal), the tools need to follow suit. We love to be efficient in everything we do (ie. why we are big fans of development tactics to be used in an experience design process). We also believe that designers who work in software need to get or need to have a fairly good understanding what happens behind the UI.

An interaction designer has to contemplate the technical consequences a click on “Confirm” or “Send” will have. Therefore, the orchestration and build-up of flows and scenarios in wireframes that we create, show and explain visually and verbally the many actions and consequences that a user may be exposed to. Those instructions and annotations are crucial to reduce confusion and streamline development down the road (frankly speaking). Alas, we find Sketch to be limited in regard to the way we (should) build flows for software experiences. In order to annotate and visually explain flows a designer in Sketch needs to manually build arrows based on single lines.

Once overall concepts or simple positioning of elements change (and those happen frequently during concept phases) those arrows have to be redrawn every single time. This is a huge pain and not time efficient. Now, you may argue that the benefits of Sketch like being able to use symbols for headers and buttons outweighs the aforementioned issues. Sketch has indeed advantages but lacks on the IXD side of features.

Showing the arrow feature in Omnigraffle > https://youtu.be/ntC3UAJmT1I?t=1960

We have Sketch set up for IXD (e.g. flow definitions) but it takes decent time to get accustomed. We have been using Omnigraffle for quite some time as it allows to add or change arrows very easily with a simple shortcut and they follow suit automatically wherever objects and elements are moved. This is incredibly useful. You will now understand why I wrote a brief outline comparing websites experiences with systems or applications. Generally speaking while working on websites with Sketch, it is totally fine to copy and paste arrows from a stencil kit, but that activity is going to haunt you when working on complex systems and interaction-heavy applications.

In fact, Axure does allow for similar features as Omnigraffle, however, one must always change the editing mode which can hinder ones’ workflow. Omnigraffle is incredibly lightweight and layouts can be copied over to Sketch for any visual designer to get started. One big drawback of Omnigraffle is that is does not offer real symbols. Once you make a change on screen X you (may) need to make those changes on other canvases or layouts manually but since we do not duplicate screens (error prone due to the lacking symbol feature), but we are OK with that and actually never duplicate screens.

Do not get us wrong, we are fans of Sketch (but for other reasons). We totally understand the hype for the tool and its features, especially for visual design, and we really love the fact that users can extend the program with a variety of plugins. The combination of doing great annotations and on-the-fly documentation paired with a better than state-of-the-art arrow feature would make Sketch really sexy for IXD. In fact, some folks in the community do actually love Sketch for IXD for the fact that IX and VX designers can work hand in hand within the same tool (which is indeed a big benefit).

If you would like to experience the very details that make Omnigraffle nice for defining interactions, please download Omnigraffle and give it a 5-min try.

I want to leave you with one question: For the quality of an experience or an actual UI, does it matter more that the fundamentals are well thought through and worked out (early stages of development) or that a design teams’ workflow is smooth? We prefer great fundamentals rather than fancy tools (but would love to have great fundamentals paired with fancy tools;).

What do you think? Get in touch via @andreehuk or @blended.io.

Thanks for reading. We at blended.io are incredibly excited and passionated about the potential innovative leaps for software design and engineering in fintech, investtech and industry 4.0. Get in touch!

Stay on the edge

Get hands-on articles about innovation, experience design or engineering! No spam and worthwhile content only.

Follow blended.io on Twitter

Why We Don’t Use Sketch For Interaction Design was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Why We Don’t Use Sketch For Interaction Design

Cool stuff, every week

More Articles