Hey everyone! This is my first time posting on this forum. I am fairly proud of the UI for a puzzle game I’ve been working on, though it is still a WIP and would love to get some feedback!
The general purpose behind creating this UI was to attempt to make something different than the traditional Window popup UI that is common to most games. There’s really no rhyme or reason for this, other than a desire to experiment!
I really enjoy the hand drawn look, so it was quite natural to come up with the idea of making the entire game appear as if it was drawn on various notebooks strewn across a desk. You can see in the video that UI window transitions are achieved by moving the game camera across the desk to different notebooks. This makes everything feel connected and in my opinion has a really nice feel to it!
Any feedback is welcome, but specifically I am curious about the following things:
The sound effect at the beginning of the video that accompanies the circling of the level 1 number. Do you find this sound annoying? I picked it to go along with the hand drawn look of the UI, to make it come across like someone is drawing the circle highlight in real time, but am second guessing whether it’s a good idea to implement similar sounding effects on the rest of the UI.
The notebook background.
Should I go with a 3D notebook (currently it is just a static UI image with drop shadow added in Photoshop to give it some depth)?
Should I use a less realistic looking notebook?
Do you find the lines in the notebook background distracting? I added these for game play reasons, but they are not necessary for the UI that is separate from game play (I thought using the same notebook background would make the game board and rest of the UI feel more connected).
The skewed perspective. This helps gives the game a more 3 dimensional feel and I think I like it, but would love some feedback on it from others. The alternative is to utilize an orthographic camera, which would look like this:
The Color Selection window: Do you think it is hard to see the 5 x 5 grid of colors? Using a black background behind the grid would make the colors stand out more, but I don’t think this would go well with the rest of the UI.
I really like what you’ve done with this. Of course, I think a UI like this will only be fitting if it is thematically appropriate for the game.
I thought it was very appropriate and it caught my attention in a good way. Had a nice effect. However, without hearing it over and over (especially when playing brain-teasing puzzles) it’s hard to know for sure if it’ll work. You might consider some very subtle tonal variation using pitch shifts.
I think the static image is a little uncanny-valley. Using an actual 3D model might help here. Especially with lighting that changes speculator highlights as the camera shifts around. The lines are not distracting at all. They really sell the authenticity.
Looks wise I think it’s fine. Again, the perspective sells it. However, it might be distracting to users when they make perfectly vertical motions with their mouse only to find the next button up or down is slightly offset. For this reason alone it might be worth reducing or removing the perspective. Perhaps when shifting cameras you could pull back a little to show the perspective and then move in to the next UI panel until you end at a parallel angle?
It is a bit hard to see the brightest color. Perhaps you could fill the background with a diagonal hatch similar to the hand-drawn borders. Other than that, I’d say keep it light. A solid black would be distracting and detract from the effect you are going for.
I’m not sure what you mean about the perspective and the buttons being slightly offset. Are you talking about when the user hovers over the button with the mouse?
It’s related to that, yes. In other words the buttons don’t align in perfect vertical rows in relation to the screen because they are being foreshortened in the direction of the vanishing point due to perspective. This means that in some cases the user might have to move their mouse in a slightly un-intuitive way to get to buttons that are higher or lower than the current mouse position.
Okay, I totally understand what you are saying now! That is definitely an area of concern, though I suppose I’d have to wait until testing to find out of it’s something that bothers players. Fortunately it should only be an issue in the menus, as the game play does not call for much vertical mouse movement.
Here’s an updated video showing the progress on the game if anyone is interested! Feedback is appreciated.
Specific things I am eager to get some feedback on:
The notebook binding rings: Do they seem too large to you? Do you think I should make them solid black with no reflections, or go for better specular reflections (I think that’s the right term) on the front of the rings (I know the specular does not look great right now how it appears on the edges).
How does the mood of the scene feel? Should it be brighter? I was going for a feeling of it all taking place in an office on a bright, sunny day, but right now it feels more like a nighttime scene being lit by artificial lighting (which is not necessarily bad).
Near the end of the video you can see some little triangles appearing below the ovals.Without getting into too much detail on the game, these are meant to serve as selection indicators, or highlights. I tried regular highlights at first and they didn’t look great, so I came up with this alternative. What do you think?
