5 finds that every product designer must steal from Ghibli Studio

"People are endowed with both the desire to build and destroy." - Hayao Miyazaki

For the uninitiated, Studio Ghibli is a Japanese animation studio founded by artist Hayao Miyazaki. Since 1985, each of their work sets new standards in the world of animation. What is even more interesting, their films found an audience among people of all age groups and nationalities. Isn't this the DREAM of every product designer ?!
')
Therefore, I decided to approach the issue of “designosofsky” in order to make out what I can learn from the films of the studio Ghibli. And here is what I learned:

1. Simplicity

The script of each film produced by Ghibli was written taking into account the fact that the target audience are five-year-olds. For example, the work of “My Neighbor Totoro” (the cartoon from which I took the title image for the article) is based on a story that is briefly described in the IMDb movie database as:

The adventures of two girls with amazing forest spirits

This is a simple story. But wait! She is very multi-layered. Here and experiences associated with the illness of the mother, and the desire to learn about growing up and explore the world. Here is an indescribable fear of responsibility. So, while five-year-old children will be able to enjoy the adventures of girls, any adult will meet bright emotions.

Now let's take a look at the calendar application Fantastical , which perfectly follows this principle.



Entering an event in Fantastical on Mac

Immediately after clicking ⌃⌥ Space on mac, Fantastical throws you directly to the text cursor, and you can start typing whatever you want in your schedule. Also, while you are typing, the application changes the real-time event reminder details in the details pane. So the new user (child) does not need any training to use the basic functions of the program.

At the same time, for an advanced user (adult), a natural language analyzer is well aware of everything that he / she could put in the program: signal time, reminder time, which calendar to use, location of the event, etc.

Focus your efforts on core functions. Make it so that the user can easily access, use and easily learn to understand these features.

Another good example is the Instagram app with its constant focus on the shoot button (just open it on your phone and see this).

A product that loses a lot when it comes to ease of use is Twitter. The latter invented his own Twitter Quill pen icon for writing text. It is not selected and is lost among six or seven other icons on the application screen. Maybe Twitter doesn't want the new user to send tweets?

2. Particular attention to detail.

In fact, this gif does not reflect all the beauty of the stunning castle in the cartoon “The Moving Castle”, created in 2004.

Consider another picture of the studio Ghibli, "Moving Castle". Each fragment of this strange sci-fi castle is traced to the smallest details, and its bizarrely moving parts create a single whole, making a charming character from the castle itself.

Likewise, the nature of the product is made up of all the carefully thought out smallest details.

The Airbnb web application is a great example of a visual presentation of information that is truly important to the user.


Airbnb price range filter

The price range histogram helps the user to immediately understand the average prices in a city and, based on this, to install a filter.

A good example of adapting to the nuances of user behavior is the Chrome web browser. When you try to close tabs one by one, Chrome saves their width - then the close button is in the same place. Try to close several tabs in Safari / IE using a mouse or trackpad, and you will understand what I mean ( the author’s words are refuted in the discussion below - note of the translator )

3. Show your human face

Even the monsters in the films of the studio Ghibli are endowed with human traits. Even locks. Or cats! Ghibli animators achieved this by drawing the eyes of the characters, their expressions ... or the lack of expression, as in this picture :)

Not just kote. Taken from "The Return of the Cat", 2002

A product can show its human side using tools such as: service acquaintance, error messages, offline messages, loading screen, etc. Choose for yourself.

Let your product be not only an assistant for the user, give him the opportunity to become their friend.

Slack Corporate Messenger has developed a great idea with Slackbot. He welcomes you when you register, adds all your profile details using conversational phrases, and communicates with you during setup. In addition, he does all this in a gorgeous witty manner. No wonder the web is full of top Slack stories!



Slackbot: Slack TARS Invention

4. Tell a story

and

5. Adapt it

A good story causes curiosity in the beginning, then presents the environment and characters, and finally draws you into the world of adventure. If you overdo it with a succession of events, then something quite ordinary will come out of a wonderful story.

I would not want to spoil your meeting with the Ghibli cartoons. In no case. Therefore, I will not set an example taken from the work of the studio. But I think the basic principles are fairly universal.

Content is the foundation of any good design.

Let's now see how cool this has been implemented in Airbnb. Hmm, yes, these guys have a great talent for design!



First of all, right at the beginning you get to the page with a warm greeting and “genuinely happy” photos. Secondly, you get attention to plots of interest, such as, for example, “Welcome home”, “Be your own everywhere”, “One stranger less”, etc.

Thirdly, the content elements that make up the content flow model are updated to fit the user's behavior. For example, when you first visit the Airbnb homepage, the Explore section is hidden. Then browse through several offers and return to the home page - you will see the Explore section with destinations that are selected according to the history of the offers you previously opened. All these elements, regardless of how much information you have, are very important for product design.

That's all! Now go and steal gracefully, like artists.