{"id":63,"date":"2022-03-25T09:00:09","date_gmt":"2022-03-25T09:00:09","guid":{"rendered":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/?p=63"},"modified":"2022-04-05T12:48:16","modified_gmt":"2022-04-05T11:48:16","slug":"the-right-tool-for-the-job-evaluating-ux-prototyping-tools","status":"publish","type":"post","link":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/2022\/03\/25\/the-right-tool-for-the-job-evaluating-ux-prototyping-tools\/","title":{"rendered":"\"The right tool for the job\" - Evaluating UX prototyping tools"},"content":{"rendered":"

What is a prototyping tool anyway?<\/h2>\n
\n
In basic terms, modern software design can <\/span><\/span>be broken<\/span><\/span> down into a few distinct areas; design, front-end development, and back-end development<\/span><\/span>. <\/span>If you're someone who is great at all three then congratulations, you are a unicorn and are <\/span><\/span>probably<\/span><\/span> very in-demand<\/span><\/span>.<\/span><\/div>\n<\/div>\n
\n
\u00a0<\/span><\/div>\n<\/div>\n
\n
Most people tend to specialise in only one of these disciplines. <\/span>People involved in the design bit of the process (web or UI\/UX design) tend to use a prototyping tool for a lot of their workflows<\/span><\/span>. <\/span>These tools allow designers to organise their style libraries and <\/span><\/span>quickly<\/span><\/span> create mock-ups to help communicate their design intent to developers<\/span><\/span>.<\/span><\/div>\n<\/div>\n
\n
\u00a0<\/span><\/div>\n<\/div>\n
\n
The best prototyping tools make this process as seamless as possible, allowing designers to create mock-ups that look and behave as close to the finished product as possible<\/span><\/span>. <\/span>They also give developers relevant specifications like assets and CSS so that they can more <\/span><\/span>easily<\/span><\/span> build to design.<\/span><\/span><\/div>\n
<\/div>\n<\/div>\n
\"A
The interface for a typical prototyping tool<\/figcaption><\/figure>\n

 <\/p>\n

The best fit for the digital team<\/h2>\n
\n
For a long time, Adobe Photoshop was the go-to package for interface design thanks to its widespread use in the design community<\/span><\/span>. <\/span>Dedicated applications for UI design started to appear around 10 years ago with the arrival of <\/span><\/span>Sketch<\/span><\/a>. <\/span>Today, Figma<\/a>, Adobe XD<\/a>, and Sketch make up the three biggest players in this field, with Figma currently leading the pack<\/span><\/span>.<\/span><\/div>\n<\/div>\n
\n
\u00a0<\/span><\/div>\n<\/div>\n
\n
The digital development team already uses Figma as their main prototyping tool. However, a recent change in personnel - that would be me - provided an opportunity to revaluate our choice of tool...<\/span><\/div>\n<\/div>\n

 <\/p>\n

The contestants<\/h2>\n

There are a mix of Windows and Mac users on the team so we wanted to use a platform-agnostic tool. This took Sketch out of the running, leaving us with a head-to-head contest between Figma and Adobe XD.<\/p>\n

\"\"<\/p>\n

Both tools have their pros and cons but when all <\/span>is said<\/span><\/span> and done, they are very <\/span>similar to<\/span><\/span> one another. Both have a similar interface and workflow, and <\/span>broadly<\/span><\/span> share the same features. <\/span>Probably<\/span><\/span> the most important difference is that Figma is available in a web browser whereas Adobe XD is only available as a desktop app<\/span><\/span>. This means Adobe XD starts off with a larger barrier to entry<\/span>.<\/p>\n

 <\/p>\n

The test<\/h2>\n

There are several roles on the digital development team including designers, front and back-end developers, not to mention stakeholders outside of the team<\/span><\/span>. Each have their priorities when it comes to tools like these. <\/span>However<\/span><\/span>, after a team discussion, we decided that the most important requirements for our prototyping tool are<\/span><\/span>:<\/p>\n

    \n
  • \n
    Create flexible, high-fidelity prototypes that are <\/span><\/span><\/span>nearly<\/span><\/span><\/span> identical to a finished web page <\/span><\/span><\/span>in terms of<\/span><\/span><\/span> look and behaviour<\/span><\/span><\/span><\/div>\n<\/li>\n
  • \n
    Component structure should be <\/span><\/span><\/span>fundamentally<\/span><\/span><\/span> similar to<\/span><\/span><\/span> how they <\/span><\/span><\/span>are structured<\/span><\/span><\/span> on our live site<\/span><\/span><\/span><\/div>\n<\/li>\n
  • \n
    Must be able to deliver interactive prototypes that behave 'like the real thing'<\/span><\/span><\/div>\n<\/li>\n
  • \n
    Stakeholders outside of the development team must be able to access prototypes without friction<\/span><\/span><\/span>. This means no need to sign up for accounts<\/span><\/span><\/div>\n<\/li>\n
  • \n
    Designs must <\/span><\/span>be accompanied by<\/span><\/span><\/span> useful specifications. <\/span><\/span>Ideally<\/span><\/span><\/span> these should include exportable assets and CSS to make the developer hand-off process as easy as possible<\/span><\/span><\/span><\/div>\n<\/li>\n<\/ul>\n


    \nWith these requirements in mind, we set ourselves a task that would emulate a typical story that we would work on as a team<\/span><\/span>. <\/span>The task involved reconstructing one of our web pages in both Figma and Adobe XD and then adding a mock new feature to it<\/span><\/span>. The feature is question? A button that appears when a user scrolls down the page and, when used, takes the user back to the top of the page.<\/span><\/p>\n

    Once built, we give the interactive prototypes and specs to our front-end developers. <\/span>They <\/span><\/span>were tasked<\/span><\/span> with <\/span><\/span>correctly<\/span><\/span> identifying the design intent from the prototypes and then extracting the specs (size, padding values, typography, and colour value) of the new button<\/span><\/span>.<\/p>\n

    \"\"<\/p>\n

    While it was tempting to carry out this evaluation as <\/span><\/span>quickly<\/span><\/span> as possible, we decided to do things <\/span><\/span>properly<\/span><\/span>, <\/span><\/span>in order to<\/span><\/span> get a feel for the real workflow for each tool<\/span><\/span>.<\/p>\n

    This meant building out the foundations like layout grids, style libraries, and component libraries<\/span><\/span>. Or at least enough of them to give us a good idea of what that process was like. <\/span>We could have skipped this step, but, constructing and maintaining a style library or a design system is an important part of using tools like these<\/span><\/span>.<\/p>\n

     <\/p>\n

    And the winner is...<\/h2>\n

    When it comes to the key requirements that we set out, both tools performed well and got the job done. <\/span>Both our front-end developers were able to get the gist of what the button did using the interactive prototypes and were able to export the button's icon asset and get its specs<\/span><\/span>. <\/span>They were able to do this more <\/span><\/span>quickly<\/span><\/span> using Figma but in fairness, they both had previous experience with it<\/span><\/span>.<\/p>\n

    But we can't sit on the fence forever. And, while both tools are up to the task we must pick a winner... and that winner is Figma.<\/p>\n

    Figma has several advantages over Adobe XD that make it a better fit for the digital development team here at the University of Bath<\/span><\/span>. You access it from a web browser so it's completely device-agnostic. <\/span>It has a few more features including more animation triggers which means prototypes are more likely to behave like a finished product<\/span><\/span>. Its collaboration tools are much more robust than XD's making it easier for more of us to work on a file at the same time. It's also more <\/span>widely<\/span><\/span> used and <\/span>therefore<\/span><\/span> more <\/span>widely<\/span><\/span> supported. But more than all that, it was able to do <\/span>virtually<\/span><\/span> everything XD can do and then some<\/span>*<\/span>.<\/p>\n

    I say all this as a long time user of Adobe XD and I must admit I was <\/span>secretly<\/span><\/span> rooting for it to come out on top. But I have to admit that Figma is the better tool for most scenarios. <\/span>While it's important that the tool meets the needs of the entire team, as well as other stakeholders, it's the user experience designer who will use it on a daily basis and Figma surprised me with how easy it was to pick up and how I kept on finding little bits of functionality that Adobe XD lacks<\/span><\/span>.<\/p>\n

    So after all that, it turns out we made the right choice all along. But sometimes you need to go through an exercise like this to make sure you're not <\/span>just<\/span><\/span> sticking with what you know. Ask yourself if your tool <\/span>really<\/span><\/span> is the best one for the job<\/span>.<\/p>\n

     <\/p>\n

     <\/p>\n

    *<\/strong> In the interest of fairness, I should point out that at the time of writing, a lot of Figma's more robust features (including style and component libraries) are locked behind its professional tier. However, they offer this tier free of charge if you're a student or an educator.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    What is a prototyping tool anyway? In basic terms, modern software design can be broken down into a few distinct areas; design, front-end development, and back-end development. If you're someone who is great at all three then congratulations, you are...<\/p>\n","protected":false},"author":1623,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[30],"tags":[11,13,15,14,12,16],"class_list":["post-63","post","type-post","status-publish","format-standard","hentry","category-user-experience","tag-design","tag-interface","tag-user-experience","tag-user-testing","tag-ux","tag-web-design"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/users\/1623"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":0,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/63\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/tags?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}