Textbox, UI Design Critique

Art threads specific to a single artist.
Post Reply
Message
Author
User avatar
Westeford
Regular
Posts: 151
Joined: Mon Jun 19, 2017 4:43 pm
Completed: 12 Hours to Die
Projects: Project Premonition
itch: westeford
Location: United States
Contact:

Textbox, UI Design Critique

#1 Post by Westeford »

I finally got to working on the text boxes for my project. I opted for a very simple design without trying anything really gimmicky. This is a very character focused game so I decided to give each of the main cast unique text boxes. The name box is made for their names, the main color, and ctc icons.
The colors serve as a hopefully quick way for the player to identify the speaker. (5 out of 6 of the colors were determined by their hair colors.)
One challenge I had with designing these text boxes is the height. Some characters are a bit shorter than others so the default text box would cover almost their entire torso.

That's pretty much the logic that went into the design of these text boxes. I'm interested in hearing what you think. Do you like them, hate them, meh about them? I would love to hear your critique so that I can improve these designs as best as I can.
screenshot0007.png
screenshot0005.png
screenshot0004.png
screenshot0003.png
screenshot0002.png
screenshot0001.png
It was really hard to find scenes without spoilers

Oh and if you're curious about the specs.
Resolution 1280x720
Dialogue Text Size: 30
Name Text Size: 28
Height: 130 (Main box 100, name box 30)
Width 772

Thank you for your time. :D

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3791
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: Textbox, UI Design Critique

#2 Post by Imperf3kt »

I'd personally place the box a little higher and increase the text size by about 30%
After years of reading/watching subtitled movies, you learn why subtitles are placed where they are. Eye travel.

You don't want your readers straining their eyes by constantly having to look down to read the text then up to see the scene. Some people actually get migraines from that. The sweet spot is about ⅓ of the height.
Visual Novel textboxes are very similar.

If you want the player to see more of the image, they can always hide the interface.

Additionally, I would increase the padding slightly, as it currently is I think it "hugs" the text too closely.


Other than those two things I like it.
Do you have a quick menu to go with it?
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
LateWhiteRabbit
Eileen-Class Veteran
Posts: 1867
Joined: Sat Jan 19, 2008 2:47 pm
Projects: The Space Between
Contact:

Re: Textbox, UI Design Critique

#3 Post by LateWhiteRabbit »

I agree with Imperf3kt.

The main thing that jumped out to me is the lack of padding around the text - especially around the character names. Give everything room to breath.

Also, while I applaud you doing something different with the MC side-portrait, it feels kind of 'off' to me. You've seemingly gone to some trouble to make sure your NPCs are all the correct height in relation to each other, and then you have your MC shoved in from the side with a completely different scale. I assume you did this to make sure they fit in the wider bottom part of the triangle cut-away, right?

Why haven't you gone the traditional route of placing the MC next to NPCs? I assume you are trying to emulate some kind of first-person view but have MC expressions at the same time. Instead, I get this weird feeling of standing in the middle of a conversation - like I've picked the most awkward spot to stand and have to keep looking forwards and backwards to keep with the different speakers.

EDIT: I see you are trying to emulate Danganronpa V3. I think it looks weird there too, but it works better because they are using very abstract and blurry backgrounds a lot of the time. Also note that BOTH the main scene and the MC cut-out in V3 are abstract shapes that play off the angles of each other AND the slanted angles of the text box. Not to mention they grow and shrink in relation to each other. Everything has to work together. (And again, let me add that I still find the way V3 did this off-putting and ever-so-slightly nauseating. It is like sitting in a car and trying to keep both the rearview mirror view and the view out the front windshield in focus for an extended period of time - at least to my brain.)


If you want to do something like this, I would use it sparingly, for big reaction moments. And go big - you don't have to worry about scale if you aren't trying to replicate another scene with a background, but instead give us a large close-up of the MC's face. Look at what Persona 5 and what Trigger Happy Havoc did here.

User avatar
Westeford
Regular
Posts: 151
Joined: Mon Jun 19, 2017 4:43 pm
Completed: 12 Hours to Die
Projects: Project Premonition
itch: westeford
Location: United States
Contact:

Re: Textbox, UI Design Critique

#4 Post by Westeford »

Imperf3kt wrote: I'd personally place the box a little higher and increase the text size by about 30%
So a text size of about 39 for the dialogue.
Imperf3kt wrote: After years of reading/watching subtitled movies, you learn why subtitles are placed where they are. Eye travel.
You don't want your readers straining their eyes by constantly having to look down to read the text then up to see the scene. Some people actually get migraines from that. The sweet spot is about ⅓ of the height.
Visual Novel text boxes are very similar.
If you want the player to see more of the image, they can always hide the interface.
You are very much correct. The text box placement is too far down.
I was really hoping there was a way to keep the text box from obscuring much of the shorter characters, but it's a compromise worth taking. I'll move the text box up.
Imperf3kt wrote: Additionally, I would increase the padding slightly, as it currently is I think it "hugs" the text too closely.
I'll add a bit more padding around the text and names. It's an easy fix. I'm thinking around 5px. I've also been considering whether I should be using their full names or just their first names like in the screenshots.
Imperf3kt wrote: Other than those two things I like it.
Do you have a quick menu to go with it?
Thank you
As for the quick menu, I haven't designed one yet. I'm still mulling over a few possibilities. Though the design of the quick menu kinda depended on the text box's location. I'm thinking of putting the quick menu on the bottom like how it is by default

Thank you for your input.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3791
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: Textbox, UI Design Critique

#5 Post by Imperf3kt »

I've seen some games use near transparent designs to make up for short characters, perhaps it is an option?
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
Westeford
Regular
Posts: 151
Joined: Mon Jun 19, 2017 4:43 pm
Completed: 12 Hours to Die
Projects: Project Premonition
itch: westeford
Location: United States
Contact:

Re: Textbox, UI Design Critique

#6 Post by Westeford »

I've fiddled with the design. Have a look.
screenshot0005.png
-The names are given more space in the name boxes.
-Raised the text box about 85 pixels higher.
-Added a frame to the south portion of the text box.
-Increased text size from 30 to 35.

Post Reply

Who is online

Users browsing this forum: Google [Bot]