{"id":1705,"date":"2016-06-06T12:14:04","date_gmt":"2016-06-06T12:14:04","guid":{"rendered":"http:\/\/projectsimply.com\/?p=1705"},"modified":"2016-06-06T12:14:04","modified_gmt":"2016-06-06T12:14:04","slug":"our-journey-towards-a-better-way-of-prototyping","status":"publish","type":"post","link":"https:\/\/projectsimply.com\/our-journey-towards-a-better-way-of-prototyping\/","title":{"rendered":"Our journey towards a better way of prototyping"},"content":{"rendered":"

Our clients are busy people. When we send them a wireframe or UI design to review, they need to understand what they\u2019re seeing.<\/strong><\/p>\n

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.<\/p>\n

This is fine for most projects, with the client able to grasp what we\u2019ve 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\u200a\u2014\u200aculminating in a design which is both agreed and understood.<\/p>\n

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.<\/p>\n

The key is to make a design work not just how we intended, but also how the client subconsciously expects it to work.<\/strong><\/em><\/p><\/blockquote>\n

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.<\/p>\n

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\u200a\u2014\u200aand ultimately, decide what works best for us. You might decide otherwise, which is great, that\u2019s cool\u200a\u2014\u200awe\u2019re not monsters.<\/p>\n

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\u2026<\/p>\n

\nPage-based, Element-based and Hotspot-based<\/h2>\n


\nPage-based prototyping<\/strong><\/h3>\n

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 \u2018On screen click, move to screen X\u2019.<\/p>\n

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.<\/p>\n

Element-based prototyping<\/strong><\/h3>\n

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\u200a\u2014\u200abutton, links, images etc.<\/p>\n

Being able to apply interactions to individual elements allows us to create \u2018real-world\u2019 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).<\/p>\n

Hotspot-based prototyping<\/strong><\/h3>\n

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.<\/p>\n

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.<\/p>\n

\"page-based\"<\/a>

Page-based (Left), Element-based (Centre) and Hotspot-based (Right)<\/p><\/div>\n

<\/h2>\n

\nWhat features we\u2019re after<\/h2>\n

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:<\/p>\n

A killer user interface<\/h3>\n

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\u2019s for this reason that we started using Sketch as a tool for designing some apps and wireframes\u200a\u2014\u200athe simplicity of the interface.<\/p>\n

Zero-training<\/h3>\n

We don\u2019t 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\u2019s also important that we don\u2019t 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.<\/p>\n

Prototyping goodies<\/h3>\n

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.<\/p>\n

Sharing stuff<\/h3>\n

The ability to share directly with clients, enable comments and then reply directly is of great importance to us. As I\u2019m sure it is to you.<\/p>\n

So, let\u2019s crack on yeah?<\/strong><\/p>\n

<\/h2>\n

 <\/p>\n

\"\"<\/p>\n

InVision (Online)\u200a\u2014\u200aHotspot-based<\/h2>\n

Firstly, we\u2019ve 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.<\/p>\n

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\u2019re hoping this will all change with an upcoming feature which InVision are calling \u2018Motion\u2019. 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\u2019ll have to wait and see\u200a\u2014\u200acheck out the promo for this yourself at http:\/\/blog.invisionapp.com\/motion-prototype-animation\/<\/a><\/p>\n

The interface<\/h3>\n

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\u200a\u2014\u200aeven 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)<\/p>\n

\"screen-invision\"

Fig.1 – the InVision interface<\/p><\/div>\n

The features<\/h3>\n

Interactivity is key for us, and InVision let\u2019s us handle this easily. We can import the UI for an app screen, add hotspots and interactive hovers, and send this to the client\u200a\u2014\u200aall 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.<\/p>\n

Niggles & Bugs<\/h3>\n

We do sometimes encounter weird juddering on the project overview screen, which seems to be related to scrolling within the browser\u200a\u2014\u200asometimes I\u2019ve 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.<\/p>\n

Pros<\/h3>\n
    \n
  • Very clean and intuitive user interface<\/li>\n
  • Quick learning curve<\/li>\n
  • Easy to use interactivity features<\/li>\n
  • Commenting system<\/li>\n
  • LiveShare is excellent<\/li>\n
  • Simple transitions and gestures using the overlays feature<\/li>\n
  • Integrates and syncs with Sketch and Photoshop<\/li>\n<\/ul>\n

    Cons<\/h3>\n
      \n
    • Very limited animation and transition features\u200a\u2014\u200alimited to hotspots to move between screens and some hover effects<\/li>\n
    • Cannot design within the interface, designs are imported and hotspots applied on-top.<\/li>\n<\/ul>\n

      Summary<\/h3>\n

      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.<\/p>\n

      <\/h2>\n

       <\/p>\n

      \"logo-principle\"<\/h2>\n

      Principle (OS X App)\u200a\u2014\u200aElement-based<\/h2>\n

      A Mac only, standalone app for creating animated and interactive user interface designs. It does what it says on the tin.<\/p>\n

      The interface<\/h3>\n

      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\u2019s no denying that it is still useful and helps to quickly iterate the design.<\/p>\n

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

      \"screen-principle\"

      Fig.2 – The Principle interface<\/p><\/div>\n

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

      \"Fig.3

      Fig.3 – Where my Circles be at?<\/p><\/div>\n

      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)<\/p>\n

      \"Fig.4

      Fig.4 – Elements galore!<\/p><\/div>\n

      The features<\/h3>\n

      Principle\u2019s 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\u2019s worth noting that those with experience of using Sketch will find its interface very familiar\u200a\u2014\u200aPrinciple even goes as far as to utilise some of the same icons in it\u2019s UI.<\/p>\n

      The niggles\/bugs<\/h3>\n

      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\u200a\u2014\u200ait would be nice to be able to change to a darker version perhaps.<\/p>\n

      Pros<\/h3>\n
        \n
      • Great for interaction design (including motions and gestures)<\/li>\n
      • Uses timelines for more advanced animations<\/li>\n
      • Integrates with Sketch<\/li>\n
      • Live Preview is useful<\/li>\n
      • Preview on native devices (via Principle Mirror app)<\/li>\n<\/ul>\n

        Cons<\/h3>\n
          \n
        • Cannot share online (only export to video or animated gif)\u200a\u2014\u200anot good for sharing an updatable URL with clients.<\/li>\n
        • Limited tools for creating elements<\/li>\n
        • Live preview screen can sometimes feel in the way<\/li>\n<\/ul>\n

          Summary<\/h3>\n

          If you\u2019re 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\u2019s not made for designing with and is just purely a way of applying interactions and animations to imported designs.<\/p>\n

          <\/h2>\n

          \"logo-uxpin\"<\/h2>\n

          UXPin (Online)\u200a\u2014\u200aElement-based<\/h2>\n

          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.<\/p>\n

          The interface<\/h3>\n

          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\u2019s very much like the UI of the other systems we\u2019re reviewing but based in the browser. UXPin have done a good job of making this usable in the browser, barring the \u2018States\u2019 panel, which is extremely frustrating to use (see Fig 5).<\/p>\n

          \"Fig.5

          Fig.5 – The UXPin interface<\/p><\/div>\n

          The features<\/h3>\n

          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.<\/p>\n

          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\u200a\u2014\u200ait just works directly in the browser.<\/p>\n

          The niggles\/bugs<\/h3>\n

          We find the interface to be very buggy, sometimes to the point where we think certain functionality is just not finished. Creating new element \u2018States\u2019 is touch and go, sometimes it works and sometimes it doesn\u2019t. It is also very difficult to see what states are already created, as the States of the UI is partially hidden \u2014and yes, we tried to increase the size of the \u2018States\u2019 panel\u200a\u2014\u200abut we just couldn\u2019t get it to go any bigger. The \u2018Undo\u2019 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).<\/p>\n

          Pros<\/h3>\n
            \n
          • Integrates with Sketch and Photoshop<\/li>\n
          • Great Customer Service and Support<\/li>\n
          • Actively developed with regular features and updates<\/li>\n
          • Live preview<\/li>\n
          • Good set of interaction design features<\/li>\n<\/ul>\n

            Cons<\/h3>\n
              \n
            • Very buggy!<\/li>\n
            • Some elements either very frustrating to use or just plain don\u2019t work<\/li>\n<\/ul>\n

              Summary<\/h3>\n

              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.<\/p>\n

               <\/p>\n

              <\/h2>\n

              \"logo-pixate\"<\/h2>\n

              Pixate (OS X App)\u200a\u2014\u200aElement-based<\/h2>\n

              Pixate\u2019s 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\u2019t really been much activity within the Pixate camp. However, we really think that the tool has potential so we included it in our review.<\/p>\n

              The interface<\/h3>\n

              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.<\/p>\n

              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.<\/p>\n

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

              \"screen-pixate\"

              Fig.6 – The Pixate interface<\/p><\/div>\n

               <\/p>\n

              The niggles\/bugs<\/h3>\n

              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.<\/p>\n

              Pros<\/h3>\n
                \n
              • Advanced conditionals (if-then-else) are quite powerful<\/li>\n
              • Complex interactions can be achieved using \u2018chaining\u2019<\/li>\n
              • Actions feature has real potential<\/li>\n
              • Support for different device resolutions<\/li>\n<\/ul>\n

                Cons<\/h3>\n
                  \n
                • Cannot export to web, not great for showing a client<\/li>\n
                • Client needs either a web account or the Pixate app installed to be able to view prototypes<\/li>\n
                • A bit buggy<\/li>\n
                • Doesn\u2019t appear to be as actively developed as some other offerings<\/li>\n<\/ul>\n

                  Summary<\/h3>\n

                  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\u2019s power is retained. www.pixate.com<\/p>\n

                  Other tools We also looked at other tools in addition to the above, these included:<\/p>\n

                  Origami<\/strong>\u200a\u2014\u200aFacebook\u2019s own prototyping tool
                  \nProto.io\u200a<\/strong>\u2014\u200anot a great UI and also has a steep learning curve
                  \nMarvel\u200a<\/strong>\u2014\u200ainterface felt a bit too basic, although it has great collaboration tools<\/p>\n

                  And now, the conclusion.<\/h2>\n

                  We came to the conclusion that we would continue to use InVision for where hotspot-based prototyping was appropriate. And, until they release their \u2018Motion\u2019 suite of tools, for anything more complex we would use UXPin. Despite UXPin\u2019s buggy interface and having to create frustrating workarounds, it provides us with the exact set of tools we need\u200a\u2014\u200aintuitive creation of interactions, a great auto-saving feature and extremely useful sharing\/collaboration functionality.<\/p>\n

                  We hope you have found this article useful, please feel free to add your own reviews and comments below!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

                  Our clients are busy people. When we send them a wireframe or UI design to review, they need to understand what they\u2019re seeing. 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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,15,4],"_links":{"self":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts\/1705"}],"collection":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/comments?post=1705"}],"version-history":[{"count":0,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts\/1705\/revisions"}],"wp:attachment":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/media?parent=1705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/categories?post=1705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}