MONOSUS
ICECREAMING MAG

What's a better way to proceed?
Current thoughts on UI/UX

Hello, I'm Director Oyabuchi.

As a web production company, we create websites for our clients every day, but unlike general products, we don't sell "finished products" from the beginning. We start from zero with nothing, discuss what kind of site you want, and take the time to decide the specifications and create it.

During the web production process, one area that is often difficult to reach an understanding with the client is the area of "UI (User Interface)/UX (User Experience)."

UI and UX are not terms that are only used on the web, but I think it would be a good idea to explain them a little bit when used on the web.

UI (User Interface)
This refers to all information that comes into the user's eye, such as design and text. What users see and feel, such as "This site has a restaurant-like design," "This site is for men," or "The layout is easy to understand," is sometimes called UI.

UX (User Experience)
The experience gained through the web. It refers to the "feeling" or "experience" that a user gets as a result of using the site, such as getting the information they want as they expected, or the smooth and easy-to-understand process of making an inquiry. (Sometimes UX refers to the entire experience from when a product purchased on an EC site is delivered to the user's hands.)

I've explained it like this, but the topic of UI/UX is actually much broader and deeper than that. If I start talking about it, it will become long, so this time I would like to write about my own impressions, or rather, how I feel about UI/UX as a director, using some of my own experiences as examples.

The difficulty of sharing "movements" on the web.

The basic steps in website production (here, we are referring to the stages after planning, where content is decided) can be roughly described as "1. Wireframe creation → 2. Design → 3. Coding." Each phase is generally FIXed (agreed upon with the client) before moving on to the next step.

However, the problem here is that you cannot check the "actual activity on the web" in the middle of the process.

First, we decide on the page structure and flow using wireframes, and then we move on to confirming the design. Since design data is like a still picture, we can check the appearance of the page structure (the tone and manner of the design, layout, etc.) without missing anything, but we often cannot share well the "movement" of the screen, such as transitions and operability. (Of course, we try to share as much understanding as possible of the "movement" by supplementing it with model sites and various materials.)

For example, a drop-down menu.
When you hover your mouse over the menu (global navigation) in the header at the top of the page, all the sub-page items in that menu will appear lined up below.

When proposing design data, we check two images, one with the drop-down menu displayed and one without it, but the actual movement from when the user hovers the mouse over the web until the menu appears below cannot be confirmed until it has been implemented in the final coding part.

Once the design is finalized, we tell the client to check the movement part after coding, and proceed with production. However, once the coding is implemented and the client has a look, there are often many corrections to be made to the "movement" part. For example...

  • Dropdowns appear too quickly or too slowly
  • When the mouse is over the drop-down menu, it appears unintentionally, so I would like to change it so that it appears when clicked.
  • The drop-down menu is larger than I expected. (The size is the same as when it was designed, but I wonder if it feels different when you see it on the monitor with movement?) etc.

In a normal production schedule, we would code and create the product in one go after the design is fixed, so if there are any corrections after implementation, it would be a big pain. (The man-hours spent on coding at the beginning would be wasted.)

However, now that there are so many different types of "movements" on websites, it seems more appropriate to quickly create a mockup (a sample) so that users can get a feel for the actual website as soon as possible, rather than coding it all at once and having them check it at the end.

With that in mind, I've recently been trying to use mockups as much as possible. However, it's also true that this isn't easy. Which parts of the "movement" do I need to grasp? This is because you need to be fully aware of this from the design (wireframe) and design stages. Thanks to that, I feel like the way I draw schedules has changed a lot recently.

Is everyone an expert in UI/UX these days?

Now that it has become commonplace to view websites on smartphones, web technology is also continuing to evolve. We are now in an age where it is possible to create a website that feels comfortable to use, including fine movements, on both PCs and smartphones.

In addition, users' experience has also improved greatly. Even people with no web literacy at all access many websites every day on their smartphones, so they have a keen sense of what is "easy to view and use," and are accustomed to it. Now that everyone is becoming "UI/UX experts," I feel that if you neglect to pay attention to this, it will be immediately noticed and you will be judged as good or bad.

In fact, it is true that sites that have achieved excellent usability use advanced technology that may seem simple at first glance (such as one of the world's largest mail-order sites). Users have accumulated experience with this, so I feel that we are reaching a point where they expect even quite advanced things to be "a given."

In other words, the standard of a "good website" is high these days.
(And it's likely to get even higher.)

To be honest, it's difficult for the production side, but we have to keep that in mind as we go along, and I feel keenly every day that we need to do so.

summary

The level of various technologies in the world is rising, and the level of what people perceive as "good" is also continuing to rise. The same is being expected of the Web, and it seems that evolution will never stop.

In the past, the Web was primarily a tool for obtaining information, but now people are looking for something that they can "feel" and "experience" through the Web. With this change, I feel that the Web production flow must also change.

I feel that planners, designers, coders, and even the directors in charge of production themselves are now able to adapt to change more flexibly.

モノサスアーカイブ