How we tried to find a way to tell in an interesting and clear manner why a new opportunity of archiving files into a cloud is handy and practical.
(Russian version of this post is here: https://habrahabr.ru/company/acronis/blog/280842/)
But What For?
Our kind of guy is a professional of IT world aged forty-fifty who helps to solve various technical problems of those who call him “you are a computer professional though!”
A tech savvy person doesn’t get lost in modern technologies and is ready to try something new. But this doesn’t necessarily guarantee that such people will understand fully how good your product is. A person buys not your product, but “a better version of himself” which he hopes to get as a final result. You should help them to get to know your product to the full extent even if it seems simple and self-explanatory to you – the creators.
If you already have a successful product which is on sale and has its dedicated fans, this doesn’t necessarily mean that it will be the same forever. The product should develop not only technically, but also become simpler in use. You can read here about how we were simplifying True Image for Windows.
The Starting Point
Helping a person to become familiar the product is harder than it seems. Digitally – emails on certain schedule and assistance in the product itself. If a person buys a packaged version, then printed guidelines and phone support are at his disposal.
I will tell you only about how we tried to help a user to get orientated inside Acronis True Image for OS X.
Last year the subscribers to Acronis Cloud gained a new useful opportunity in Acronis True Image – archiving files into a cloud. It works simple from the user’s side: using mouse you drag files into the app window or you click and pick in the usual Finder window everything that takes much space in the drive but isn’t used quite often. This is how the archiving tab looks now:
In case the user doesn’t have a subscription to Acronis Cloud, he sees a very similar stub:
Seems elementary: you drag files and send the whole pile to the unlimited cloud. In two years you want to relook at the wedding video – you enter Acronis Cloud, download and watch. Impressions and important files are safe. And are available almost any time, and still you have plenty of free space in your drive.
But actually it’s not that simple as it seemed. Originally we tested a short archiving tour on the Windows version, so we already reaped a harvest from the mistakes we had sowed.
It turned out that the variant with abstract illustrations which we liked doesn’t give people any help to understand how they can benefit from archiving. The tour hasn’t reached out to everyone as well. And this is where our mistakes correction hard work has begun.
Dig, Shura, Dig!*
We look for the problems a user has experienced and how we can help him to solve them. The very first sketch found his room in this sheet worn by reality:
Discussion in the Basecamp was so long that plugins to make webpage screenshots collapsed when I tried to make a screenshot for this article. So you will have to take it on trust. Actually we agreed that along with each new slide we will give more and more detail dwelling on main four slides:
- User greeting and short description of archiving. Here the information will be sufficient enough for some of the users and they can decide to use the app further closing the tour. But others will want to learn more and they will proceed to the following steps.
- Step-by-step instruction about how archiving works. Here is detailed information about three simple steps. Pick files at your convenience; let the app move your files to the cloud freeing up the hard drive space; use the drive free space for new impressions.
- Picking data center. If you live, let’s say, in Germany, and you have slow internet, then domestic servers will allow to save and pull back the data you need. If, according to the law, your data must locate domestically, pick domestic server.
- Simple access to files. You want – you use the drive assembled in the system, you want – you open the browser from any device. You can pull back the file you need regardless of the device where you use the browser as long as it is modern.
As the company sticks to the policy of maximal nativeness in the Mac app, we began our search for stylistics in the OS X standard apps. This is how one of the iTunes tour page looks like:
And this is how the Safari startup page looks like:
The advantage of this approach is that the user is training in the conditions close to the real ones using the screenshots of the product. And he will have a better understanding of the product after such tour. But in our case, there are more disadvantages.
Firstly, it will be necessary to redraw the tour even after the minimal changes of the interface which was spotted in the tour. For example, if iTunes decide to use the user pic the user has chosen himself instead of the user icon, they will have a heavy and dirty workload. All the screenshots with the old icon must be replaced with the new beautiful ones having the user pic. This is one of the examples how expensive it is to change something in the interface of the product working for quite a long time.
Secondly, the problems of considering all the possible sizes of the text block during the localization. It is such a broad theme that it will be discussed later.
The Approach Using Real Interface
Although we knew the problems we would have to face, we still decided to circumvent it boldly by decreasing the number of elements in the screenshots we will have to localize. Our task was simplified as the appearance of Safari and Finder changes seldom and this means that supporting such screenshots in the tour will be not that expensive. For our first steps we chose the most difficult slide about access to files. That’s why we talk about Safari and Finder only.
The slide essence is simple: the drive with archived files is assembled into OS X as a usual net drive. And through browser you can reach your files almost anywhere in the world.
Notes, the app to keep notes renewed in the OS X El Capitan greets the user by quite abstract illustrations:
Notes use both icons taken from the interface and abstract illustrations.
We however decided to make a variant combining sketchness and screenshots of the real interface:
Neither fish nor fowl. We throw it to the dogs and try another approach.
The Approach of Real Interface Screenshots With No Sketchness
iTunes and Safari did manage, right? They did. And that means we can try to seek the solution in the framework of this approach.
We quickly sketch the main features of the access slide:
We try it:
We fit it to the environment:
On the other slides:
No, we fail to overreach ourselves. The latest OS X La Polkovnique has been released? Be so kind as to redraw your screenshots! Renewed the icons at the sidebar of the app? Well, you know the drill. So we’re seeking further.
The Approach of Qualitative But Not Very Abstract Illustrations
Deliciuos, rich and attracting approach, thus widespread. We begin to seek for a sufficient level of abstraction, meanwhile fitting it to the future interface and playing around with the text:
We present details:
We’re so close, we make tracks:
This is it!
We continue developing and fit the stylistics to other slides:
Remarks begin to appear on the uselessness of such sophisticated and playful verbal acrobatics. Fair enough. We need more about the essence and further from the abstraction:
We try to do without a separate window, replace the elements and make a tour integrated into the archiving tab.
The result is ugly and inconvenient. We go back.
We finalized with the illustrations, now we begin to perfect the element which is equally important – the text. And it is the moment when the necessity to think of product localization comes on the stage.
Acronis True Image is used in 145 countries, it “speaks” 15 languages. Forgot it? Brace yourself: technical writers will cut to the quick hacking to pieces the well-loved interface. Great limiting factor to value each word. Approximately like a 140 symbols limit in Twitter.
For example. Capacious English command “Back up” turns into a broad, like a famous Russian soul, 3-word-phrase.** This also often happens in Portuguese or German languages.
Thus, having gone around the ritual circle «make — check — think» once again, we came to a simple decision. Buttons-links «Next» and «Previous», reliable, as a Kalashnikov, solve our problems perfectly. We bring round all the links at each step of the tour beginning from the slide about files access.
The design results are reflected in the complex of artifacts.
1. General layouts
These are standard “screenshots” where the product is fitted to the environment. In the case of archiving, it is the interface of the app in the context of the OS X desktop.
2. Technical layouts
Same general layouts from the first item. But here we additionally specify all the parameters of the elements, their location and interdependency. It happens that we begin from the printed layout version where the developer specifies the data he needs.
Next step is generating the layout in the Sketch where we have the description of all elements and how they are going to interact. Here the popular plugin Sketch Measure snaps into action. Thanks to it, you almost don’t need to draw with your own hands when creating technical layouts and it only remains for you to think of what to do with the saved time.
Detailed layouts (as in the picture in the title) help the developers to assemble the interface close to the desired one. After that we together shape up what has been baked in the test assembly.
It is crucially important to be friends and communicate all the time with developers. You will be able not only to promptly polish the result of bringing the layouts to life, but also learn to understand which technical limits developers (and you) face. And if you know the rules, then you can think of intricate ways to circumvent them without loss of quality and operability.
3. User’s path
We gather all the accumulated layouts into the user flow visual diagrams analyzing the user main path. We try to detect all the “turns” that may distract the user from the main flow: internet suddenly collapsed, the absence of subscription and other similar obstacles.
In this very case we didn’t have to create such a diagram for the reason of linear flow: the person either sees the whole tour or not. The interface behavior in cases different from the main one was able to be described with a usual text.
Something About the Moral
Start from nothing. Draw with a pencil, create mindmaps and wireframes.
Don’t be afraid of experiments and seek for new lines of approach to the problem. Without raising a bump from mistakes, you will gain no experience.
Never think you know the user like your ten fingers. Test the hypotheses, try the approaches, seek for what will work out just in your case.
Furnish all the design developments with technical layouts and the description of negative scenarios. Season highly with a well-thought user flow with real layouts as steps. Everyone will hug you mentally if you discipline yourself to perform the whole ritual all the time before you get a similar comment:
//*A popular meme in the Russian-speaking community.
** The English command “Back up” is translated into Russian as “Создать резервную копию”.