Jump to content
Zodai

What do you think goes into making a good VN user-interface?

Recommended Posts

I've been talking w/ the programmer about some User Interface design for an early prototype, and I realized I know barely anything about what actually goes into this.  It's something I don't have much experience in.

 

What examples of User Interface, or the UI, have you seen in VNs that fell good to you?  What are the differences between a good UI and a bad one?  Are there any elements in the UI you think would be good to have?

Share this post


Link to post
Share on other sites

Not having it on the screen all the time but having it available immediately is pretty important, a backlock/rewind, a number of save slots greater than or equal to 2x+10, where x is the number of choices in the VN, a skip unread only/skip all toggle (especially if there are multiple routes) and a skip button on the interface so you don't have to sit around like a jackass with your finger on ctrl, a quicksave is pretty nice but I personally rarely use those, toggling individual voices, separate audio sliders for BGM/voice/effects, text speed options that include making the text appear instantly. Oh, also hotkeys, such as making space, enter, and down arrow move to the next line, and the up arrow bringing up the aforementioned backlog.

Some of these belong in the options menu but that's UI too, technically.

Share this post


Link to post
Share on other sites

If the choices are branching and/or straightforward, try to see if you can get a flowchart in there.

Steins; Gate's was pretty great because it integrated well into the story, but that's not to be expected from all VNs. Besides that, I'm fine with anything responsive and looks good (too subjective to categorize).

Don't make it intrusive and have an option to hide UI options until you hover over a certain part of the screen or right click or something.

 

Share this post


Link to post
Share on other sites

For UI, it's all about the features, I never really praised nor despised aesthetic appearance, only the features

  • (Q)save/load
  • Autoplay
  • Fast forward text
  • Skip to next choice / previous choice
  • Backlog / Replay voice
  • Hide UI buttons
  • Options / Settings

Are some basic essentials

I really liked Koi Rizo's right click + direction to shortcut features

See Flutterz post for settings features

Share this post


Link to post
Share on other sites

Aww hell yeah, user interface thread.

First rule of UI: Shizzle's gotta be shiny TO THE MAX. Buttons gotta be shiny, background image gotta be shiny, characters in background image gotta be shiny, sound effects gotta be shiny, et cetera.

Here's an example of PRIME SHININESS. They even got floating shiny animated stuff all over the place.

Shiny is bae.

Here's some more shiny, yo. It ain't as shiny as the first shiny, but when you open up the config and all that, there's some legit shiny in that faded background image, and buttons enter BLUE SHINY MODE when you hover your cursor over them.

And we ain't even got to SHINY SOUND EFFECTS because I don't know how to make webms with those. But them sound effects gotta be high-pitched, not too long but not too short, et cetera (because I ran out of stuff to say).

YOU CAN'T HANDLE THE SHINY.

Actually, that's the only thing I can think of. I don't care what else you do, so long as shizzle's shiny.

Share this post


Link to post
Share on other sites

The UI in most Yuzusoft titles is pretty great in my opinion. They got all the standard stuff + skipping to choices and scene jumping from the backlog. Also the backlog is like 999999 lines long which is somewhat interesting, if a little unnecessary. The "skip to next/previous choice" button is something I find quite important that too many games are missing. It's especially annoying when the game isn't very fast while skipping.

I guess I'll drop in my VN UI/functions pet peeves and +1's since it's related:

 

Cool stuff:

- Cool auto functions like the one in KoiRizo, which adjusts the auto speed for monologue depending on how much text there is. Neat.

- Being able to skip to the previous/next choice.

- Being able to jump back in time through the backlog.

- When CG's and scenes are grouped under their respective characters, rather than all being bunched together in a single "page 1-5" screen.

- When games have lots of UI/settings customization in general (KoiRizo comes to mind, although I would have liked a way to disable the gestures).

 

Not as cool stuff:

- When the text speed option jumps straight from "k i n d o f s l o w" to "APPEARING INSTANTLY" (I remember S;G being very guilty of this). I usually prefer having my text appear a lot faster than I can read, but still with some animation, similar to this (excuse the terrible framerate of the gif).

- When games don't have a master volume option. It's painless enough to do in the windows audio mixer though, so it's really minor.

- The auto function in HoshiMemo, it's really odd. It has one auto speed for spoken dialogue and one for monologue, which seems good, until you realize that the spoken dialogue speed applies to the (silent) protagonist's "spoken" lines as well. The speed setting determines how fast the next line comes up after the voice clip finishes, so basically you gotta be reading the protag's lines fast as hell unless you want a 3 second awkward silence add-on to every single spoken line (you don't). It makes no sense to me, so I'm somewhat suspicious that I might be the one using it incorrectly or something though.

 

Was thinking that I'd be able to come up with more stuff but I guess not

Share this post


Link to post
Share on other sites

A lot of things have already been said by the others, so I'll just suggest one or two things that are obvious but you don't necessarily think about it when creating your game :
- Try to have a way to access the main menu from the game. It's pretty obvious, but you rarely think about it.
- Likewise, if you're planning to let your VN to have a fullscreen option, give a button for the reader to exit the game. Nothing more annoying than having to disable fullscreen in order to leave.
- Get some warning message when the reader tries to leave the game (either to access the menu or to quit the game) that he will lose his current progress if he chooses to continue.
- If you can implement a real backlog instead of ren'py standard rollback, try to go for it. Rollback is often a source of bugs and errors in an engine. Bonus points if your backlog has a "restart to this point" button.
- A right click functionality : you need to decide what you want to do with the right click of your mouse, since it will be the second most used button when playing. You have three choices imo : either have it be a hide/show textbox, either have it display the save screen, or either have it display a menu where you get all the different options (i.e save / load / menu / textbox / settings / exit). Note that if you decide to go with the first two options, you have to make sure that all the other options are accessible through the quick menu buttons.

Share this post


Link to post
Share on other sites

While I won't mention the obvious because pretty much everyone else already has. I'll just say that to me an interface besides of the usual features as the ones stated before it should be easy to use , not overly intrusive or complex, clear, of course having keyboard shortcuts for the main functions is also something desireable

Share this post


Link to post
Share on other sites

About interface, well as far as VN goes it was quite standard I think. But if you ask me what should be good interface, I think it's better if you could jump back to the previous scene or allowed us skip to next choice (Or go back to previous choice). The VN which did that was Noodle Work and Dracu Riot. That's all from me.

Share this post


Link to post
Share on other sites
1 hour ago, Diamon said:

- Get some warning message when the reader tries to leave the game (either to access the menu or to quit the game) that he will lose his current progress if he chooses to continue.

Unless it's an eroge, then remove any and all warnings ;)

Share this post


Link to post
Share on other sites

For me the most important part of the UI is the text itself. The reason is when I read a VN, I sit back, relax and do in fact read the text. Some VNs have less than perfect font/size/color and it strains the eyes, which makes me quit reading prematurely. This mean the text should look calm somehow with enough contrast to make it readable and the colors should match too in order to provide the calm for the eyes text effect.

 

The ability to remove screen flashes/shaking/whatever. Some people may like them, but I don't. This includes all sorts of fancy stuff to do to the choice buttons, like shaking and using a timer. I think the purpose is to give the reader the feeling or urgency to match the story, but it gives me the sense of being annoyed enough to drop the VN.

 

What other mentioned already (backlog, fast forward to next choice, replay voice etc). Perhaps even assign a hotkey for each, making the VN fully controllable without using the mouse at all. It would be awesome if you go all the way and allow changing the hotkeys. That would also prevent any possible issue with foreign keyboards.

 

Speaking as a programmer, UI is actually one of the hardest tasks. Often programming tasks are fairly strait forward, like store all strings printed on the screen to allow the backlog to access them, or replay voice plays an audio file. UI is less specific and less standard solution. Instead it should look good and simple, provide all the needed features and be intuitive. "look good" and "intuitive" is not something you can answer with math or algorithms and the answer varies from person to person. For this very reason I hate UI designing.

Share this post


Link to post
Share on other sites

Being able to move dialogue boxes is nice too. It's like the creators seem to forget that in most humans genitals exist in the lower half of the body which coincidentally means they land on the lower half of the screen where the text is... though perhaps it's a conscious decision to hide the censored components more.

Share this post


Link to post
Share on other sites
1 minute ago, ittaku said:

Being able to move dialogue boxes is nice too. It's like the creators seem to forget that in most humans genitals exist in the lower half of the body which coincidentally means they land on the lower half of the screen where the text is... though perhaps it's a conscious decision to hide the censored components more.

Oh yeah, that too, though the ability to hide the text window would be good enough. Quite a number of VNs hide it with right click or similar. The ability to hide is really simple from a coding point of view while moving is more complex. Also I'm not even sure I like it to move around, at least not unless there is a reset position feature.

Share this post


Link to post
Share on other sites
1 minute ago, tymmur said:

Oh yeah, that too, though the ability to hide the text window would be good enough. Quite a number of VNs hide it with right click or similar. The ability to hide is really simple from a coding point of view while moving is more complex. Also I'm not even sure I like it to move around, at least not unless there is a reset position feature.

I can't recall any recent VN that doesn't let you hide it, I'd just prefer to be able to keep moving with the text without having to close and reopen the window with every line.

Share this post


Link to post
Share on other sites
On 4/4/2016 at 10:03 AM, TexasDice said:

Panic button?

You know, a key that quickly opens a picture of a tree or something if someone walks in on you reading porn. 

It is a good feature but i want a notepad one like in majikoi 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

×