Interaction Design Theory: The relationship between content and container

After studying the dead cat article, I also talk about the relationship between content and container today.

You may find it a bit awkward to look at the headline, and it's a form to follow? " It seems to be the opposite, and it seems to be a very unprofessional view from an interactive design perspective, which is a bit like I shoot myself in the foot or the dead cat's feet ...

But unfortunately I am a friendly and afraid of pain penguins, so the fact is this:

We can define the form-following content as a usability recommendation for the default interface, which can be applied to what is seen when a user enters an interface. However, we also know that users are not wooden people, their environment is not always an ideal state, QQ online users have exceeded a billion, and that who who has said: "1000 people have 1000 hamlet." "So, how many states can the same software on the 100 million-person screen have or will be able to be said clearly?" My QQ hidden in the top of the screen, your QQ but occupy the entire screen, his QQ is what the way we can not guess. But 1000 hamlet is still Hamlet, the thing that the software can do still want to remain unchanged.

Therefore, an interface needs to adjust the content to adapt to change when the user actively changes the form of the software, which is the form of content adaptation in certain circumstances.

Does it feel familiar? Understand the Web front-end work students should immediately think of "streaming layout" aspects of technology and skills! Congratulations, you can come to the CDC and get me a second prize.

For web design, the degree of freedom of the software design is greater, but for a long time it is very rare to see the good adaptable to the user's software, perhaps because the software can not be simple flow, and the design and development costs will become very large when adapting to the layout, So it is very rare to find a better adaptive form of software examples. In the most common case, when using the same software, different users do not necessarily use the same size of the interface, full screen, half screen, One-fourth screen or any strange size is all possible, the same size when the resolution or interface element definitions are often different, ideally, The interface of a software should be able to make some automatic adjustments to these different changes so that users can compare them to normal conditions or have more extensibility than normal conditions.

This is actually an interesting and complex problem, before the DJ, Bug and I talked about this topic, has been suffering no better than the study and research subjects, but later in the day-to-day work found a person in the immediate but has not noticed the guy:

Microsoft Fluent/ribbon UI

I used to say I didn't like Microsoft at all, but since Win7 and Office2010 my opinion has changed a little, starting with Win7, Microsoft is ready to start using the Fluent/ribbon interface that started in Office2007. Like its name, the interface structure is streaming and smooth, but most users notice that it's layered flat features, and the leakage of its liquidity, here first come up with a number of Word2010 exquisite small figure and share with everyone.

　

First put a full screen at the 1280x800 resolution of the Word2010 as a reference:

This is the word interface that we are familiar with--the students who haven't tried Fluent/ribbon have to do it 100 times 100 times--we can see that the various functions we are familiar with are equally comfortable and reasonable (basically) in the way we want them to appear in our desired position. Next, I'm going to start reducing its size, and then we can notice how the interface changes:

The first change out of the full screen state occurred, with the Clipboard tool area in the upper-left corner, the "cut", "copy" and "Format brush" three features leaving only the icons. For the Office series, these three features are deeply rooted, and to save space, adjust them first.

Continue to shrink the interface, the next change is the style area, the display number of the Quick Style is reduced from 5 to 4, and then reduced to 3. Quick Style Such a function, in the space is more difficult to sacrifice a two positions, after all, there are 3 of others are displayed, the other, point open Drop-down list can also be selected, after all, the graphic list is still relatively fast.

When I continued to reduce the size of the window, word did an interesting thing, and it put everything in the editing area together and turned it into a drop-down menu with a lookup icon telling the user to "find it at least", which seems to be not a common feature, except to find it. But I'm more curious as to why I don't have all the mouse responses that come with this pull-down menu and the "change style" next to it.

I thought the next thing was very simple, that is to put away the collection, but in fact, it's another fun. But some of the bad methods, the font and paragraph area of the icons are compressed from two lines to three lines, first compressed is the paragraph area, when the window continues to narrow the turn to the font area, I admit I did not think, Because the three rows of such a large stack of icons look messy, the identification rate and the clicks are very affected, I may not do so, but without losing these almost all of the common features of the situation, rearrange the position is an impossible way. It was such a surprise that I didn't really figure out how they were packed in such a small area ...

The next thing is easier to understand, after continuing to reduce the size of the interface, the style area's "Quick Style" has been put into a drop-down menu.

continues to become smaller, the entire style area is closed, and then the paragraph area is finally closed.

This picture is a bit large, because this narrowing change is not just the toolbar section above, the lower left corner also has a corresponding adjustment, or first look above, the font area has finally been collected, in addition to the blue "file" menu, the menu bar other text spacing is even smaller, the lower left corner "insert/rewrite" The switch first disappeared, Then "language", "proofing" and "word" are hidden in turn, the function of the lower right corner has not changed.

If you zoom out again, the menu bar will not be fully written, then on both sides of the arrow, you can scroll around, and the window at the top of the shortcut area also appears the expanded icon, while the lower right corner of the "Zoom" slider is also hidden, leaving only a percentage of the display ratio of the indicator used to manipulate and feedback.

Finally, I can put a picture without shrinking ... When the interface width is less than about 284 pixels, window at the top of the shortcut definition area, menu bar, toolbars disappear all clean, the interface at the bottom of the display ratio is completely hidden, the change is still predictable, can be done in such a small interface, probably not what the editorial behavior. Finally put a more funny picture, you can explain the Fluent/ribbon UI from the side of the freedom, although I do not know what in this case we can do in this program ...

As we can see from the above figures, in changing the size of the interface, Word can be selected according to the size of the different parts of the interface elements to adjust, in order to be in a variety of unconventional sizes to get the best possible ease of use and visual experience, from this example, basically see still relatively successful, Although depending on the situation, the level of flattening will have a certain loss, but for users of different forms of interface requirements, the interface content initiative if able to adapt to the changes in the form of the user's personalized needs will be very good satisfaction. Of course the interface content for the interface form of adaptability or to be based on the available.

　

　　In this experiment, basically this change is based on the following principles, recommended to everyone:

1. Hide the elements as often as they are used, such as the order in which the style areas are hidden.
2. Hide the interface elements according to the possible scenes of a specific size range, such as hiding the menu bar and toolbars under small size.
3. Already established graphic elements can reduce auxiliary text, such as "cut" features such as the use of icons.
4. Use Drop-down menus, expanded or scrollable element groups to compress space, such as the compression function area and the scrolling menu bar.
5. Properly rearrange layout, such as text, paragraph area of the number of lines change.

　

　　Three further details are also suggested:

1. Changes are made before the interface boundary overlaps with the operating area, giving the user more buffer time and making the interface smarter.
2. Never forget the mouse response with the mouse tips.
3. Ensure that the reduction of things can be found in some way.

　

To turn an interface into a smart transformer is a very challenging and meaningful thing, of course, this will be very interesting, today only took out Word2010 to see, interested students can go to play Outlook2010, it is more fun than word, Adaptability is more of a pattern.

Let's cheer once, long live the adaptability!