Previewing at 1 to 1 scale

When working on a project for a touch interface, screen design should be reviewed at the size it will be displayed at, on device. This is important to correctly assess text legibility, and dimensions of tappable areas.

While designing in Sketch, setting the document's zoom level at 100% does not necessarily display your work at the size it will be viewed at by users. The Sketch Mirror app was a great way - when it functioned as intended - to have a high fidelity preview in your hands while working on an iPhone app project. But the new iOS Sketch app now requires the files you want to preview to be stored in your online Workspace. So previewing on device is not possible anymore if you like to keep things local.

I'm sharing here the solution I came up with years ago, and still use daily: a symbol that I've sized in a way that when I select it and "zoom to selection", the artboards are displayed at the correct scale. Maybe you'll learn about it, maybe you'll let me know of a better way. Here is how to set it up.

1. Cut a sheet of paper to the actual width of the device's screen you want to replicate, lay it on your screen (without touching it of course).
2. Open Sketch, make sure the document window is displayed at full height.
3. Add an artboard at the device's dimensions.
4. Beside the artboard, draw a rectangle and select it.
5. Press ⌘+2, shortcut for the "Selection" menu item found in "View > Zoom To".
6. Compare the width of the paper to the width of the artboard by superposing the two.
7. If the artboard width is larger than the paper's, increase the rectangle's height. If it's smaller, decrease it.
8. Go to 5 until both dimensions seem identical.

I chose to make it #F4F4F4 so it doesn't visually interfere with the artboard to be evaluated. A 60px width makes it wide enough to be selected comfortably with a zoom level in the 10~20% range. If you make it a symbol, you may add a comment detailing the computer's screen size it was made with, and the device it is made for. For example: MacBookPro16"/iPhone5.8". This way you'll know what you're selecting when you have some of them laying around in your documents. It's especially important if you work with two monitors of different dimensions, and/or for different device sizes at the same time.

I'm curious to know how other designers deal with this issue, so please get in touch if you found another way to display your work in progress at final physical size. There's always room for improvement! If someone from the Sketch team stumble upon this: there could be a "Physical size" item in the "Zoom to" menu with a dedicated keyboard shortcut, active when a selected artboard has the dimensions of one of the device templates with known physical dimensions. It would be more efficient than this method, and would work for whatever dimensions the document window would have.

Interface sketching

During a recent project, I put together a tactile interface sketching tool allowing to quickly evaluate layout and behaviour ideas. This post is going through the why and how it came to be, explains how it works, details pros and cons, and ends with a few practical advices.

More and more articles explain to us the primary role of time and kinematics in the production of meaning for tactile interfaces. But as of today, it isn't really easy for a designer to quickly sketch out an interface behaviour for a smartphone or a tablet.

Some existing tools help in this regard by allowing you to link static images one to another using hot spots and animations, recreating a desired experience. For example, taping a menu button on the main screen would slide this screen to the right with a nice ease-out, making room for the menu itself to appear, items fading in one after another.

These tools might provide you with the possibility of manipulating a rough idea of an interface on a device, but they offer a limited choice of behaviours. Only the most “popular” are presented, the same ones developers can implement with little effort when they build an application.

For time and ressources constrained projects, these tools are perfect to get you to a very high fidelity prototype in no time. But if the set of constraints is somehow a bit exotic, and if you would like to experiment new interaction models to answer to them, these tools loose their advantages.

Asking a developer to sit next to a designer to produce interaction sketches which for the most part will be mercilessly discarded - it's their goal in the design process - is a possibility, but it's also a luxury only a small number of companies can afford. For projects where ressources are slim and budgets tight, this comfort is not affordable. Does it make it acceptable to our colleagues that we carry on with explaining our ideas through paper sketches associated with elaborate gestures and sound effects? Probably not.

Origami (graciously shared by one of these almost infinite budget companies, many thanks) seemed very promising to this regard when it appeared. But also very intimidating. The learning curve getting you from total novice to confident in Quartz Composer is a bit steep, and this learning time isn't always justifiable to produce soon to be discarded sketches.
Another pitfall found in Origami is the mouse driven nature of the interactions. To properly evaluate a tactile interface, you should manipulate it directly so you can discover when active zones are too small or too close, or when the hand hides useful informations to complete a task - small but important details that could go un-noticed using a mouse cursor. On the other hand, this tool seems ideal for fine-tuning an animation and transmit its attributes to developers. But if the quality of an animation is crucial to get an interface right, this is not our concern here: we're talking sketching, not finish.

While I was looking for a solution to economically produce interface sketches, Keynote for iOS was a good candidate. Documents can be edited on the OSX version and transferred to an iPhone or an iPad. Direct manipulation is a big win, but where it's deceiving is that you can't actually manipulate the prototype anyway you want. Forget pinches, list scrolls or carousel swipes: any touch on the screen and you're off to the next slide.

But Keynote brought a very consistent advantage on the table: no effort in the production of a transition between two screens. Whatever the shapes, their colors, orientations... as long as the objects are present in the starting and ending slides, the transition is fluid and relatively predictable. It's the well named “Magic Move” transition. I could not let go the time savings this feature allowed so I made concessions on two fronts: holding the interface in my hands, and the relative spotlessness of my screen. The speed I could produce work and the kind of deliverables I could produced were great compensations to these losses.

It took me about an hour and a half to get from a new document to the prototype shown on the video above, made of 14 slides. Keynote can export a video from the slideshow so you can share your ideas with your colleagues, adding notes using the timecode for specifics.

How it works

Everything happens in Keynote, so having a Mac at hand will be a good start. From all the transitions available in this software, the only one used here is Magic Move. A really good name, as in most cases, this is what happens. You build a start state, an end state, you apply the transition and you're done. The time saved compared to solutions where you can edit a timeline is enormous, because there is no timeline to edit.

Where to start

• Place a hollow frame of the device of your choosing on the first slide, and resize it so that it displays at scale 1:1 when you work. It is crucial it displays at scale 1:1 when you play the slideshow if you want to make sure your interface is easy to manipulate.

  

• Under this frame, place a rectangle shape equivalent to the screen size of the device. Put aside its characteristics (width, height, x and y positions) as they will be handy down the road.
• Duplicate this slide so you have a blank slate to start with.
• Add the elements of your first screen using Keynote shapes and text.
• Duplicate this first state into a new slide and modify them to represent the second state of your interface. If new elements appear from nowhere on this second screen, test the Keynote automatic solution (generally a fade in opacity). If this isn't want you want, copy these new elements and paste them in the first slide. You can then hide them by adjusting their opacity, their position, or both.
• Another solution to make objects appear is to use the build effects within the slide (as opposed to transition between two slides).
• Be wary of the succession order of the objects in the Z dimension (which one is on top of the other) and of objects groups, they can influence how a magic move transition play out.
• Once the screens and transitions are finished, put a white mask on top of everything to hide the objects placed outside of the device, then bring the device frame at the very top. Repeat for every slide.
• The prototype is set, and it's time to rehearse so you can demo your idea in the most credible fashion. Touch is of course entirely simulated, but needs to be part of the prototype if you want to get as close as possible to reality.

Pros

• Swiftly testing out layout and/or behaviour of one or multiple screens.
• Easily compare different possible scenarios for a given task completion.
• Communicate an idea to colleagues able to project themselves beyond the lack of graphic or kinematic realism. Gathering feedback at this stage where nothing is settled is a considerable plus for saving development time.
• Manipulating an interface, even by faking it, can point to sizing issues of active zones that seemed perfectly fine on paper.
• Sharing these sketches with people who don't have Keynote through video exports.
• If an idea gets the green light from such a document, development can start in parallel to graphic design work.
• It also works with a video projector. You just need to move your entire body to simulate a scroll gesture.
• It's possible to refine these documents by importing static comps from Sketch or Photoshop.

Cons

• Although these documents help developers getting a good idea of how an interface should behave, they can't use the work you did (on sizes, positions, timings) for production files.
• As such, the document doesn't easily export to a mobile device.
• Finger prints will invade your screen. You'll get used to it.
• The lack of a tool to control the z-index of the objects on the slides make it quite tedious some times.
• When you change the scale of a group that has text in it, the size of the text doesn't scale accordingly, you have to edit it by hand.
• It's not possible to move an image inside its mask during a transition.
• Animations can be tuned up to a certain point. Timings and successions will seem jaggy in some situations, and it demands a bit of imagination to see what it could be. This is an area where Origami is much better.
• Building a portrait to landscape screen rotation can be challenging depending on the screen complexity.

Some advice

• Copy paste an object between two slides will place it at the same coordinates. It can be a real time saver to work with this in mind.
• Apply the magic move on your first slide, before building the screens. This way, when you'll duplicate the slide, you won't have to set it.
• If you're new to Keynote, take the time to familiarise yourself with the difference between build effects and transition effects.
• It's handy to have some sort of lego box slide where you put all the interface elements you would often use.
• Move the elements with arrow keys (+ shift if need be) and keep count so you don't have to open the format/arrange pane to control their position.
• If you need to modify the next screen more than Magic Move can handle well, you can use a buffer slide with automatic transitions so it's invisible when you play the slideshow. Useful when you need to modify objects within a group. In the example file, this is what I did between slides 7 and 8, or 10 and 11.
• Make sure all the elements are present in the start and end slides if you want to keep control on what happens during the transition.
• Keep in mind the z position of your objects.

Conclusion

With a few hundred slides done since last february, colleagues (designers, developers or project managers) having validated this technique value, I thought it was ready to be exposed and shared here. I would be interested in having your feedback, and see if this idea could be pushed a little further so we can all get better at quickly explore interface ideas.

Download the file, tell me what you think. If this has teached me something, it's the importance of bringing an idea to reality as far as possible before asking a developer his time and talents. It might be easier for us designers to visualise mentally, but this ability goes only to a certain point, and a number of small important details can slip through our ideas. It's important to get them out of the way, and this tool helped me a lot in this regard.

The iPhone frame used in the example file is from Pixeden.

If you download the Keynote file, you'll need the Blokk font to read it correctly. It's a great font for placing neutral text in zoning with no effort.

2014.09.03: as @louije reminded me on twitter, Apple had a session about app prototyping during the last WWDC. I saw a mention of this session on twitter the week before, and was quite disappointed I couldn't be there to know if Keynote was part of the recipe. I had forgotten about it until yesterday, and I have looked at the session. It turns out they use Keynote as well, only with much more talent. Take the time to watch it, it's far more didactic and enjoyable than what I've written here. They choose to use Keynote for iOS in their process which I decided to avoid, but the guiding principle is the same: how to decide as fast as possible if an idea is worth exploring further or not.

Croquis d'interface

A l'occasion d'un projet récent, j'ai bricolé un outil de croquis d'interface tactile qui m'a aidé à évaluer des idées d'organisation et de comportement. Cet article vous explique pourquoi et comment il a vu le jour, donne les bases de sa mise en place, détaille ses bénéfices et limitations, et finit par quelques conseils pratiques.

De plus en plus d'articles nous rappellent le rôle primordial joué par le temps et la cinématique dans la production de sens au sein des interfaces tactiles. Mais il reste aujourd'hui compliqué pour un designer de représenter rapidement, à l'état de «croquis», le comportement d'une interface, afin d'en évaluer la pertinence en la manipulant sur un smartphone ou une tablette.

Quelques outils sont aujourd'hui à notre disposition pour palier à cette difficulté : ils offrent la possibilité d'enchainer des écrans statiques les uns aux autres à l'aide de zones actives et d'animations pour visualiser un parcours. Par exemple : appuyer sur le bouton "menu" d'un écran d'accueil pour le faire glisser vers la droite avec un bel ease-out, pour dévoiler le dit menu dont les items s'affichent en fondu ligne après ligne.

Si ces outils nous permettent de manipuler des maquettes d'interface en situation, ils n'offrent qu'un nombre limité de comportements. On y retrouve en effet les plus courants, car ce sont les mêmes que les développeurs peuvent reproduire à moindre frais lorsqu'ils construisent l'application.

Pour les projets fortement contraints en temps et en ressources de développement, ces solutions sont donc très adaptées et vont permettre aux participants du projet de manipuler rapidement une maquette d'interface dans des conditions très proches de celles du réel. Mais lorsqu'on se confronte à un jeu de contraintes sortant des normes, et que l'on souhaite expérimenter d'autres modèles d'interaction pour y répondre, ces outils perdent malheureusement tout leur avantage.

Réquisitionner un développeur pour produire des croquis d'interactions qui seront pour la plupart abandonnés (c'est bien là leur vocation) est une possibilité, mais aussi un luxe que ne peuvent se permettre qu'un nombre finalement restreint d'entreprises. Pour les projets où ces ressources sont rares et précieuses, ce n'est malheureusement pas un confort possible en phase exploratoire. Est-ce une raison pour continuer à tenter d'expliquer à nos collègues ce que nous avons imaginé à l'aide de croquis sur le papier, de gesticulations et autres bruitages élaborés ? Probablement pas.

Origami (mis à disposition gracieusement par une de ces entreprises disposant de budgets importants, remercions-la) a paru très prometteur et séduisant à cet égard quand il est apparu. Mais aussi très intimidant. La courbe d'apprentissage pour passer de novice à confiant dans Quartz Composer est un peu raide, et ce temps de mise à niveau n'est pas souvent justifiable pour la réalisation d'esquisses.
Autre souci posé par Origami: les interactions sont faites à la souris, non au touché. Evaluer une interface tactile par sa manipulation directe, c'est découvrir les instants où les zones actives sont trop petites ou trop rapprochées, ou que le doigt qui agit cache des informations nécessaires à la réalisation d'une tâche - autant de détails importants qui pourraient passer inaperçus en utilisant le pointeur d'une souri. En revanche, pour affiner une animation et en livrer toutes ses caractéristiques aux développeurs, cet outil parait idéal. Mais si les qualités d'une animation sont importantes pour la réussite d'une interface, ce n'est pas le sujet ici : on parle de croquis et non de finition.

Alors que je cherchais comment produire économiquement des brouillons d'interface, Keynote sur iOS a fait un temps figure de bon candidat. Les documents pouvant être travaillés sur la version OSX et lus ensuite sur un iPhone ou un iPad, on retrouve ici l'idée de manipulation directe de l'interface. Mais il faut oublier les interactions allant au-delà du simple tap : tout contact avec l'écran déclenche le passage à la diapositive suivante quelle que soit la zone touchée sur l'écran. En plaçant le prototype sur l'appareil on se rapproche en effet beaucoup plus des conditions du réel, mais on donne aussi la fausse impression qu'il réagira correctement aux différentes sollicitations présentes dans un écran donné, alors qu'en fait il s'agit d'un prototype très scénarisé, passant uniquement d'une diapo à la suivante. C'est un peu gênant quand on souhaite utiliser des glissés horizontaux et des pincements, ou des parcours de liste en scrollant.
D'autre part, le transfert via iCloud et les interprétations possibles (et souvent imprévisibles) entre les deux versions du logiciel se sont avérées un peu lourdes à gérer pour de simples croquis.

Mais Keynote apportait un avantage consistant, celui de la gestion automatique de l'animation entre deux états donnés d'une interface. Quelque soit les formes, leurs couleurs, leurs orientations,... tant que les objets présents sont au même nombre dans les diapositives de départ et d'arrivée, la transition est gérée de façon fluide et relativement prévisible. C'est la bien nommée transition "Magic Move". Ne pouvant pas laisser de côté le gain de temps que cette transition permet, j'ai fini par céder sur deux fronts : la tenue en main de l'appareil cible et la propreté de l'écran de mon ordinateur. Les avantages offerts - rapidité d'exécution et possibilité de générer un livrable compréhensible - compensent il me semble les pertes.

Partant d'un document vierge, il m'a fallu un peu moins d'une heure et demie pour réaliser ce prototype composé d'une quinzaine de diapos qui accompagne cet article. Keynote vous permet ensuite d'exporter une vidéo que vous pouvez partager à vos collègues, et annoter en référençant le timecode.

Comment ça marche ?

Tout se passe dans Keynote, donc avoir un Mac à disposition vous sera certainement utile. De toutes les transitions entre diapos offertes dans ce logiciel, il y en a une sur laquelle tout repose : le Magic Move. Elle porte bien son nom, car la plupart du temps, c'est bien ce qui se passe : on construit un état de départ, un état d'arrivée, on applique cette transition, et magie, ça marche tout seul. Ca permet de gagner du temps par rapport à d'autres solutions permettant d'éditer une timeline, car justement, il n'y a pas de timeline à éditer. Ce qui permet de passer plus de temps à compliquer les constructions et d'arriver dans un laps de temps acceptable avec quelque chose d'assez élaboré pour que ça se rapproche d'une interface tactile animée relativement fidèle.

Comment s'y prendre

• Poser sur la première diapo un masque creux d'appareil, comme un cadre, de façon à ce qu'il soit à l'échelle 1 quand l'animation se joue. Le respect de cette échelle est primordial si vous souhaitez vous assurez que les écrans sont facilement manipulables.

  

• Placer sous cet appareil un calque correspondant à la taille d'écran de l'appareil. Mettre de côté ses caractéristiques (largeur, hauteur, positions en ordonnée et en abscisse) car elles pourront être utiles par la suite.
• Dupliquer cette diapo de base pour pouvoir la reprendre par la suite.
• Construire les éléments de base du premier écran.
• Dupliquer la diapo et modifier les éléments présents pour représenter le deuxième état de l'écran. Si des éléments nouveaux apparaissent dans ce deuxième écran, on peut tester la solution proposée par Keynote par défaut (en général il s'agit d'un fondu d'opacité), ou alors forcer un comportement en ajoutant ces nouveaux éléments dans le premier écran tout en les cachant : soit en jouant sur leur opacité, soit sur leur position en les plaçant hors de l'écran de l'appareil représenté.
• Autre alternative pour faire apparaître un objet, utiliser les actions de comportement dans la slide elle-même, une fois que la transition est terminée.
• Faites attention à l'ordre des calques et aux objets groupés, ils peuvent influer sur l'interprétation de la transition.
• Une fois les écrans finalisés, appliquer un masque blanc pour cacher ce qui dépasse permettra de donner plus de crédibilité à ce croquis. Le masque de l'appareil est alors au premier niveau, le cache juste en dessous, et ensuite on retrouve tous les autres éléments d'interface dans l'ordre qui conviendra en fonction de vos besoins.
• Il ne vous reste plus qu'à bien répéter l'enchainement des écrans avant de présenter pour apporter le plus de crédibilité possible à votre démonstration. Si vous arrivez à avoir le bon timing pendant votre démonstration, les personnes à qui vous montrez un prototype comme celui-là se demanderont si vous avez un écran tactile sur votre ordinateur. Le touché n'est bien entendu là que pour simuler l'interaction dans un esprit de prototypage, et c'est bien la barre espace du clavier qui fait avancer le diaporama.

Les bénéfices

• Tester rapidement l'organisation et le comportement d'un ou plusieurs écrans.
• Comparer plusieurs scénarios d'utilisation possibles.
• Communiquer une idée à des personnes capables de se projeter au-delà du manque de fidélité graphique ou cinématique. Le recueil de commentaires dans cette phase où rien n'est figé est un avantage considérable pour gagner du temps.
• Manipuler une interface, même en faisant semblant, permet de se rendre compte des problèmes d'échelle qui se présente lorsqu'on se confronte aux tailles des écrans et aux tailles des mains.
• Partager ces croquis à des personnes ne disposant pas de Keynote grâce aux exports vidéo.
• Après validation d'un tel zoning, le travail de développement peut commencer en parallèle du travail graphique.
• Ca marche aussi avec un vidéo-projecteur. On peut donc très bien utiliser ce document de travail comme livrable pour communiquer l'avancement du projet à un groupe important de personnes.
• Il est possible d'affiner ces croquis animés en insérant des maquettes statiques plus fidèles, en ajoutant des commentaires et des spécifications qui en font des livrables de grande valeur pour les chefs de projet et les développeurs.

Inconvénients

• Le travail (tailles, coordonnées, temps d'animation) n'est pas récupérable par les développeurs qui devront transposer le croquis dans la réalité. Par contre, cette technique permet de leur donner une bonne idée du résultat souhaité.
• La visualisation directe sur un appareil n'est pas possible.
• Les traces de doigt pourront s'accumuler sur votre écran. Mais on finit par s'y faire, vous verrez.
• L'absence d'interface dédiée pour assigner le z-index des éléments impose parfois une gestion laborieuse.
• Lorsqu'on modifie l'échelle d'un groupe comprenant un objet texte, la taille du texte ne se modifie pas et il faut l'éditer à la main.
• Il n'est pas possible de déplacer une image dans son masque lors d'une transition.
• Les animations peuvent être réglées jusqu'à un certain point. Les timings et les enchainements peuvent être vraiment brouillons à certains moments, et il faut parfois encore un peu d'imagination pour visualiser un résultat final. C'est sur ce point précis qu'une solution comme Origami est beaucoup plus efficace.
• La visualisation d'une bascule portrait / paysage de l'appareil cible peut être compliquée à gérer en fonction de la complexité des écrans.

Quelques conseils

• Le copié-collé entre deux diapos replace un objet aux même coordonnées que son origine. Il faut utiliser ça le plus possible pour gagner du temps.
• Appliquez une transition sur la première diapo, comme ça elle sera déjà présente au copié-collé.
• Si vous êtes débutants sur Keynote, prenez le temps de bien distinguer les animations entre deux diapos des animations qui ont lieu dans une même diapo.
• Préparer une diapo avec tous les éléments de base disponibles : l'appareil dans sa position souhaitée, un masque pour cacher ce qui va dépasser, les éléments d'interface les plus utilisés. La boite de Legos en quelque sorte.
• Déplacer les éléments avec le combo Shift+Flèche et Alt+Shift+Flèche permet de les déplacer rapidement et d'être sûr de retomber sur ses pattes quand on les remet en place, sans avoir à consulter les informations de coordonnées dans le panneau de droite.
• Quand on doit modifier fortement l'état de départ d'une animation par rapport à l'état d'arrivée de l'animation précédente, on peut passer par une transition automatique sans délai entre deux diapos pour rendre ce changement transparent à la lecture. C'est utile quand à un moment donné vous avez besoin de modifier des objets qui sont contenus dans un groupe. Vous pouvez faire une transition automatique sans délai entre une diapo où ces objets sont groupés et une diapo où ils sont dégroupés, puis travailler la transition vers une troisième diapo qui permettra faire changer l'état de ces objets. Dans le fichier exemple à télécharger, c'est ce qui se passe entre les diapo 7 et 8, ou 10 et 11.
• Il faut s'assurer que tous les éléments sont bien présents dans les diapos de départ et d'arrivée si on veut maîtriser leur comportement.
• Bien avoir en tête l'ordre de superposition des objets.

Conclusion

Avec quelques centaines de diapos au compteur, des collègues designers, développeurs ou chefs de projet ayant validé l'intérêt de cette technique, je me suis dit qu'elle était mûre pour être exposée et partagée ici. Je serais ravi d'avoir votre retour d'expérience et de voir comment cette idée pourrait être poussée un peu plus loin, ou si d'autres techniques plus rapides existent pour explorer rapidement une idée.

Allez-y, prenez le fichier exemple en main, dites moi ce que vous en pensez. Cette technique m'a appris une chose, c'est qu'il est important de visualiser une idée avant de solliciter le temps et les talents d'un développeur. On a beau être capable de visualiser mentalement, cette capacité ne va que jusqu'à un certain point et nombre de détails pourtant importants peuvent nous échapper.

Le masque d'iPhone utilisé dans la vidéo vient de chez Pixeden.

Si vous téléchargez le fichier exemple Keynote, vous aurez besoin de la fonte Blokk pour le lire correctement. Elle permet de produire des zones de texte neutres à moindre effort.

2014.09.03 : comme me l'a rappelé @louije, une session du dernier WWDC d'Apple était consacrée au prototypage d'applications tel qu'il est pratiqué en interne. J'avais vu passer l'annonce de cette session sur twitter dans la semaine qui la précédait, bien déçu de ne pas pouvoir y assister pour savoir si Keynote faisait partie de la formule. J'en ai oublié l'existence jusqu'à hier, et il se trouve qu'ils s'y prennent d'une façon assez similaire - si ce n'est avec beaucoup plus de talent. Prenez temps de la regarder, elle est bien plus didactique que ce que j'ai pu écrire ici. Leur méthode n'est pas exactement la même (ils passent par un terminal mobile alors que j'en fait l'économie), mais le principe directeur est identique : comment arriver le plus rapidement possible à décider si une idée vaut la peine d'être creusée et développée ou non.