• Register

Ciel Fledge is a game about raising your (adopted) daughter in a dying world. You are responsible for raising her over the span of 10 years. What she becomes entirely depends on how you raise and guide her. Will she be humanities savior? The villain that ends humanity? Perhaps it would be better for her to lead a normal life, oblivious of the dire situation the world is in...

Post news Report RSS [Ciel Devlog #07]The Importance and Complexity of User Interfaces

In this devlog our programmer talk about tackling the issues of building the user interface and its complexity.

Posted by on

This article is taken from the original devlog on our website that you can access here!

General Development Progress


Hi, RikuoTanaka here!

Sorry for being a bit late with this devlog, I am busy with exams this week and the previous one.
And thanks to that, I have to take a break from development for now.
Don’t worry though, as soon as the exams are over, I will jump right back in!
Even without me, it is progressing smoothly, as far as I can tell.

As far as my work goes, remember the Schedule Menu that numfank showed a few weeks back?
While he complained that it looks too complex, I think it looks fine back then(but then again,
I never really complain about any design he does, so… yeah).
Well, since then he redesigned the menu multiple times, which I implemented into the game.
And I have to say, it looks a lot better. Take a look yourself!

The button styles are now in tune with the rest of the other menus, and the information they provide are now easier to read as well. I have to give props to numfank for the new design. It really looks beautiful.
Oh, and did you notice that text at the bottom? From now on, every time you hover a button in the game, a neat little description will pop up to explain what it does! Like I said before, every small details count.

2 weeks ago, wltr3565 showed the Status Menu with the new icons.
What he didn’t show however, was that the sub status menu also gets a similar treatment.

Similar icons to help distinguish between different types of skill.

The team has now started working on the new techniques menu. What does it look like? Find out in the next 2 weeks.

Why UI is important

So, with all of that out of the way, let’s talk about something else.
Last time I discussed about the work that I do in Ciel, that is managing activity parameters.
This time I would like to talk about another aspect that I am working on, and that is the menus, or more specifically, User Interface.

Back in High School, I used to think that the most important aspect of a game is the gameplay system. That is, as long as you get the gameplay aspect fun, everyone can enjoy the game(specifically regardless of the graphics).
Nowadays, I understand that not just the gameplay, but every single aspect of a game is important.
Graphics that can define the setting and theme of the game, music and sound effects(or even lack thereof) that can set the tone, and of course, the gameplay system itself.
With this in mind, it’s not so much about whether graphics are important or not, but rather what kind of direction you want the graphics of a game to be, and whether it is appealing and consistent with the theme or not.

User Interface, of course, is one part of the graphics. How you design the interfaces will certainly affect the feel of the game, albeit in a smaller scale compared to other aspects of the graphic.
Now designing the interfaces is one thing, implementing it in the code is another.
And I have to say, sometimes I feel very tired by just implementing them. It’s not that I don’t know how, but rather there are so many things to consider. The placements, length of text, animation, and so on.

And it is certainly not pleasant when you find out the result of your code to be not what you’re looking for.
Especially since sometimes it takes a lot of time to compile the code and check it in the first place.

Prime Example of UI Done Right

All of those, and add in the fact that when someone talks about a game, the topic of its user interface rarely pops up. And when it does, usually it’s because the menu is designed poorly or not working properly.

Basically, no one talks about the User Interface when it’s good or okay.
…But then came Persona 5. And its gorgeous looking menus. Especially the battle ones.

I’m sure a lot of you know what I’m talking about. And that’s the thing. All of a sudden, EVERYONE was talking about the game’s user interface! And it even became a popular meme! And it’s not broken, that’s for sure!

The thing is, even before the game was released, I already looked at the battle menus from the trailers.
And even back then I thought it looked awesome. I can hardly find a game in which menus do not follow the traditional square(or almost square) shape design, and looks stylish, to boot.
Like I said, design is one thing, implementing is another. I already have some trouble implementing the menu design Ciel Fledge uses, so imagine my awe when I think about how the programmers implement that kind of stylish menu.
There should be a ton of things for the programmers to consider. And I imagine plenty of trial and error as well.

Lesson to Take

Looking at that menu made me realize that there is still a lot to learn for me, as a programmer.
It made me think, “THAT’s the standard required for a professional programmer these days???”
But I guess I can’t keep feeling down about that sort of thing. I can only keep moving forward, alongside the team.
Who knows, maybe there will be a time when I can implement the menus that Persona 5 has.

…The music of Persona 5 is awesome too, by the way. YOU NEVER SEE IT COMING….

And I guess that’s all from me! Sorry for the longer devlog than usual. I promise the next one from me will be much, much shorter.

This is RikuoTanaka, signing out!

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: