Jump to content

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


Zodai

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?

Link to comment
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.

Link to comment
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.

 

Link to comment
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

Link to comment
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.

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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 ;)

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...