One of my pet phrases when reviewing interaction documents is “This interaction is ugly.”
Some of the children who heard this said, “Oh…” “Some asked,” Should interactive manuscripts be beautiful? Should interactive manuscripts be logical and ok?”
Ah… In today’s society, it’s sad enough as a designer that you can’t live by your face, so why not make your work look better? I’m talking about myself.
I think there are several reasons why interactive documents should also be considered beautiful:
1. There is a “beauty is utility” principle in the interaction principle. People subconsciously assume that beautiful things are also useful. So, don’t let the ugliness of your plan cloud your superior’s judgment of your plan.
2. We also assume that an interaction designer who produces beautiful interaction documentation is professional and trustworthy (needless to say).
3. My ability in other aspects (such as logical thinking and creativity) is not good enough to outweigh my weakness in performance.
4. At a higher level, interactive documents are also for human use and should also focus on user experience.
However, the definition of beauty in an interactive document is not quite the same as visual.
A beautiful interactive document should be beautiful, clear, and easy to use. It is more of a logical beauty.
So what should a good interactive document contain, and what should you pay attention to?
The following content comes from the experience of the mentor, the suggestions and feedbacks from colleagues at work, and my own experience.
medium
PPT, PDF, HTML… What format do you use to enter your interactive documents?
Powerpoint and PDF have the advantage of looking formal, beautiful, and because the size of the canvas on each page is fixed, it’s not easy to miss anything. But the disadvantages are also obvious, a PPT does not put a few interface is full, feel not free. There is also a lack of indexing for interactive documents that can run to dozens or hundreds of pages.
So I still recommend HTML with a side index and unlimited canvas space.
identification
Put it on the first page of your document.
For people who are new to your interaction documentation, such a note will help them understand your interaction, especially if it is not generic.
Review images
A revision history
Put it on page 2 of your document.
Specify the redactor of the document so that the developer can easily find the corresponding interaction; List the date the document was updated (the most recent update comes first), give a hyperlink to the page that was modified, and specify what was changed.
Review images
The page title
Write it at the top of every page. Indicates which module the function described on the current page belongs to, so that the viewer is not easily lost.
Review images
alignment
Alignment makes the document more readable.
Alignment of elements within a single interface, between interfaces, anything on a page should be able to find alignment points.
Review images
Do your notes line up? When my advisor pointed out that the comments in my interactive manuscript didn’t line up, it suddenly dawned on me: It’s all details.
See the right side of the picture for better readability
UI: Color, line, white space
1. Try to do black, white and gray without color.
Otherwise the color doesn’t match the visual, and the test will ask which one to use.
2. Gray will make the interaction look more refined.
Avoid using black lines and white characters on a black background.
Look at the pictures to see their interactive documents two years ago, although it is neat, but there is always a kind of indescribable retro
3. Use different shades of grey to show levels and focus.
Review images
4. Leave reasonable white space to avoid over-crowding or over-empty interface.
Review imagesPay attention to details like color and white space
At this point, one might ask, is interaction useful to waste time on this kind of visual aspect?
I’d say it’s design common sense, or are you willing to improve yourself in this area? If so, the next drawing is the one on the right of the picture above, which is a waste of time. You can never predict how a skill will be used in the future.
Of course, if you know how to use the interactive component library (reply to the interactive Component library to view the article), you will also save a lot of time.
Hot spots
Indicate the extent of the hot zone.
For example, there is no “closed” thermal area in the upper right corner to make things easier. And then the development made the hot zone the same size as X. I get feedback from users that this X dot is missing.
Review images
Correct way to express:
Review images
There are also some representations of closely connected hot spots that can make development more visible:
Review images
Transparency superposition method
Review images
Color discrimination
Review images
Repeated enumeration
The picture
When using pictures, blend them with the background to avoid “clip art”.
Review images
If you don’t find a suitable icon, use placeholders and text annotations instead.
Review images
Speaking of placeholders, vision says, “I meditate for hours every time I randomly pull up a picture placeholder in an interaction.”
View the picture with the picture, in the end with what picture is good…
So, if you have ideas for graphic content or style, don’t be shy about expressing them in various forms in an interactive document.
Review images
The flow chart
The main line and branches should always go in the same direction.
As shown in the red box below, “yes” and “no” go in different directions in the two judgments, which is not a very good experience for the viewer.
Review images
Correct flow chart representation
Review images
Interface flow should also be clear on main lines and branches
Review images
Don’t leave too much white space between the processes, or the developer will mistakenly assume that the interaction on the page ends there.
Review images
You can draw a guide line along the edge of the page to indicate that there is more content to follow
Do not set the size of a single interface to be too large. Otherwise, a screen can not display several interfaces, low browsing efficiency.
annotation
Make comments concise and unambiguous.
There are two kinds of expressions. One is that comments and the UI are isolated and self-contained, with numbers corresponding to each other.
Look at the picture there are many foreign interactive manuscripts are this way. The advantage is that it looks very regular, suitable for annotation-intensive interfaces; The disadvantage is that the development of the line of sight needs to go upstream in the interface, find the corresponding relationship.
In another form, comments and UI are directly connected by a wire.
This is more intuitive when viewing images with fewer comments.
Index of the side
Side indexes are the most important part of interactive documents. It makes a hundred-page interactive document easy to browse and find.
1. Show proper hierarchy
Correct representation of function dependencies to enhance side navigation readability.
Review images
2. Name each page properly
Page name is also learned, naming to do logical, comprehensive meaning.
For example, if you look at the following group of page names, can you see the status of the member page?
Review images
If I name it this way, doesn’t it make more sense?
Review images
3. Split pages properly
In theory, all the flow of a feature can be put on one page. But too many branches on a page can turn into a spider web.
Remember when you first started your job to do the sign-in interaction. There are several ways to register by clicking on your phone number, and I’ve drawn them all on one page. By the time of the interactive review, when I was holding this huge flow chart to explain “the stars”, the audience was immediately confused.
Later, I learned to split pages.
Review images
4. Share pages properly
In the beginning, I added payment interaction to all types of product pages.
Then I found that the payment process was a pit, where there were too many uncertain factors. If I changed it, all the relevant pages would have to be changed again, which was easy to make mistakes.
Finally, I deleted the payment process from all the product pages and linked to a separate page dedicated to payment process. In this case, you only need to change this page.
Review images
5. Avoid long side indexes
When I was working on Windows Phone, because I had to iterate on all the functions of other platforms for nearly two years at a time, the side index of interactive documents was like the Great Wall, and it took me a long time to find a feature.
Later to do windows10, the interactive document according to the large functional module split, so that each document of the page number is moderate.
Review images
conclusion
Do these points above, in fact, it is not difficult, difficult is consistent, become a habit. Sometimes a busy, a lazy, careless in the details, but increase a lot of communication costs. The last trouble or their own.
Interactive documents, the form is enough, do not have to pursue too much. With frequent updates several times a day, strike a balance between the documentation experience and productivity.
How can we make interactive documents a better experience for people who are looking at them? How to communicate your design more correctly and clearly? Treat interactive documentation as a product of your own. Every time you feel uncomfortable, think about how to improve it, listen to user feedback, and iterate. This is also to improve their design ability.
View pictures cloud music interactive design group