Jan 9, 2015
iOS Interaction Design Workflow —
Combining Pen&Paper, Sketch and Axure
During the process of writing my master thesis I noticed some kind of regularity in my interaction design workflows that have established throughout the last years. This is how I work on my projects and combine different tools.
Step One
Usually when starting a new project I do a lot of research and getting in touch with the product and target group. I want to skip this step in this article and focus on the production and prototyping.
So when all preperation is done I begin with making scribbles and place all the different interface elements at their potential positions. What really helps here is an outline of your target display in order to get a feeling for the proportions. I trialed tools like the UINK.it stamp by Adam Skalecki or the stencils and pads by UI Stencils and have to say that everything is fine, even a self-drawn box, as long as it fulfills its purpose. I personally ended up using a self-made sketching pad and sometimes a stencil for drawing consistent icons.
After that I use those sketches for first rough paper prototyping tests. This really can give you valuable insight in customers views or behaviours. I know that most clients prefer to spare on usability evaluations but their results keep on proving their significance within a design process. Remember: most of the time you are not working for the ones who pay you, but for their customers. So don’t try to design for the stakeholders and keep on focussing on the end-user.
Cut out single interface elements and rearrange them on your analogue “screen”. Let the users interact with the interface and iterate this procedure. You will quickly make progress and understand the priorities from a users point of view.
Step Two
Now things become digital! Once I’m happy with my scribbles I begin with layouting these wireframes in Sketch. Yes, that’s right: wireframes in Sketch. If you don’t know Sketch yet, you should definitely check it out. Besides the possibilities it offers at digital layout creation, I found it extremely useful at early design stages to use their iOS app Sketch Mirror. This app puts a live view of your current Sketch workspace on the screen of your iPhone. And this makes so much sense:
You are producing for an iPhone so you should design on an iPhone!
And you should make wireframes on an iPhone! Bring every button, every image and every text area into its final position. You can now check factors like the accessibility of your interface elements on the final device. This on one hand provides a huge boost to the quality of your work as you can check the usability of your screens on the fly, and to the effectiveness of your workflow on the other hand, as you can evaluate during your production process and do not have to do these tasks in separate steps.
Step Three
Since Axure has been updated to version 7 in 2013 it got even more powerful (not only) in terms of mobile prototyping. It now handles responsive concepts quite well and makes it much more easier and efficient to create multi-platform prototypes.
What I’m doing when I work on app prototypes is either using exported assets from Sketch or simply putting the wireframes in the background and start converting them into a native Axure prototype. I really grew fond of the AxShare service which hosts your prototype on Axure servers and provides a (fairly) short URL for direct access. Using AxShare in combination with correctly set-up mobile settings makes it extremeley comfortable to work on the actual interaction design and the animations.
For a native retina feel you should start with setting the width to device-width, the inital scale to 0.5, forbid user scalability and generate without a sitemap.
You may want to have only one actual page in Axure and put a dynamic panel into it with the final device’s full screen dimensions. In this way you are able to simulate smooth transitions between your screen states (e.g. fades or slides) and get rid of that flashing impression when loading another “real” page. If you are using this technique, I highly recommend integrating some kind of reload button as full screen web apps do not feature browser navigation elements. Link this reload button or gesture to your page and you don’t need to restart your web app after every update.
Getting the prototype on your device is very straight forward: publish it to AxShare and open up the URL in your mobile Safari browser. By the way the URL can also be customized which can be helpful if you have to provide the prototype to your clients.
Navigate to your page so you have an URL like this:
http://something.axshare.com/pagename.html
This is the path you need to save on your homescreen. Et voilà — you can now continue working on your Axure prototype, submit your work by pressing ⇧ + ⌘ + A and check if everything works on your device.
Alright, that’s it for my workflow of iOS interaction design — put together very shortly. I hope you liked my first Medium article. If you have any questions, feel free to ask.
Cheers
Max
