Now I'm going to critique a customized UI. This is not meant as a knock against the game, by the way. It's actually a fun game and I recommend you download it and give it a whirl. But it does have examples of where the UI stumbles in some key ways.
The game is Friends of Mine. It is has earned good reviews, but also some criticisms. Some criticisms are stale -- complaining about lack of progress, for example. Progress has since been made. One person noted that they "[found] the HTML format to be not attractive at all." I'm not sure if that's a general comment about HTML games, or specific to this one, but I bet it was specific. If it was a general aversion to HTML games, then it's not likely this person would have played this game, much less taken the effort to review it. And yeah, the customized HTML format in this game isn't all that attractive.
So let's take a look at it together. I've deliberately used a portrait aspect ratio.
Title in two places? Not a great start.
OK, so key statistics on the sliding bar. Par for the course when it comes to Sugarcube, but it means having that slider open for most of the game, or sliding it back and forth as the game progresses.
Let's look at "Status".
First off, the page that reveals is not actually called "Status". It seems like the "Status" button opens the "Info" page. That's confusing. A user ought to get feedback that confirms the choice made, as a general rule. If I click on a button called "Status", then the page that appears better be subtitled "Status" assuming it has a subtitle at all. Likewise, I should reach the "Info" page using an "Info" button.
I also note that "Info" is a big honking graphic. More on that later.
Turns out this isn't an "Info" page after all. Or not just the "Info" page. Cut off at the bottom is "Inventory". So "Status" means "Info" and "Inventory". Not obvious to me.
So first thing I would consider it having separate pages for "Info" and for "Inventory", and maybe retiring "Status" as a top-level choice. The menu item "Status" doesn't suggest that Inventory should be here. If I was looking for "Inventory", I'd need to hunt for it (including scrolling vertically) instead of seeing it right on the menu list, say between "Status" and "Objectives".
Indeed, the layout decisions are hard to fathom. "Drunk" and "High" bars are on the front slider, always accessible. But the "Femininity" and "Job Title/Experience" are tucked halfway down the "Info" block of the "Status" page. Why? I have no clue. It's not for lack of space on the front slider. And if they were moved up, the "Inventory" area would move higher on the "Status" page.
Also, using graphics for titles is problematic. To do it right, you need to create multiple versions sized for different screens, and then swap in and out the title graphics when the size is changes. As it is, what looks reasonable on a 1600px-wide window looks enormous on a 750px-wide screen.
Let's look at the Info block. First I'm going to widen the screen:
This looks OK-ish. Now shrink the screen.
"Info" is now stealing a lot of limited screen space (same graphic in a much smaller space). The three graphic elements at the bottom are not resizing or realigning, but are lying on top of each other. Also, the text is scrunching up instead of flowing around the "Play Stats". Better if the "Play Stats" box slid under the text, and the text and "Play Stats" were able to take advantage of the full width of the thinner window.
And why is "Play Stats" a sub-window with its own vertical scroll bar? Now I have to scroll up and down in this Post-It-sized mini-window to read the "Play Stats". More navigation and scrolling. Nah, too much trouble. As a player, I'll end up never looking there. Anything important should be 0 or 1 click away. I know that sounds extreme, but deeper than that, and it'll be forgotten. Unless it's important that is -- in which case you'll be cursed for putting it so far away.
Let's look at "Objectives" now. Going back to the sliding menu and clicking "Objectives", I get this:
Oof, the "Felix" graphical title is being cut off, extending past the right edge of the viewport. Again, using graphics for headers is possible, but you need to invest time in creating alternate graphics sized for reasonable viewport sizes, and create the CSS styling that swaps in the appropriately sized graphic when the window is resized.
At the very least, put the face on the far left instead of the far right, so that if the graphic gets cut off, the face would still be visible. It's the little details too!
Let's play for a bit. Back to the start!
Disclaimer? Check. Main character's name? Check. Epilepsy warning? Check. Patreon link? Check (but really, Patreon?).
Um, how do I start the game?
Dammit! I have to think again. There's no "Start" link, or "Wake up for school" link or something that suggests I start here. "Jason" is fine for a name, I won't mess with that.
Except that I have to. It turns out that's how I start. I put the focus on the name in the box, and hit the enter key. Ugh, no! As a user, I read from top to bottom. Version, age warning, disclaimer, name choice, health warning, Patreon. Having reached the bottom, I am at a loss as to how to proceed. There is nothing after the Patreon link. I don't know what to do next.
It turns out that the trick is to backtrack. Go back up to the name and click enter.
The game should not start with a puzzle on how to start the game.
This is what I mean by intuitive design. Moving the name choice box below the Patreon link would make all the difference. Now the actions flow from top to bottom. Even better would be some text next to that box at the bottom that reads to the effect "Select a name or use the default to start playing".
Let's check out a game play page.
The menu is presented as a horizontal list of links. They don't reorganize themselves when the width changes. They just word-wrap. Here's the thing about horizontal lists -- try to avoid them. Navigating horizontally is more difficult than vertically. Also, I have to parse the list into discrete chunks. The vertical bars help, but it's not obvious from the text that "Talk to Dad" is distinct from "Go to your Bedroom". Those might be two choices, or one choice that got word-wrapped. Sure, after a moment of consideration I can see they're not a single choice, but a vertical list would not have required me to do that thinking.
Here's another example:
So "Confront the Stranger" gets its own line. The choices "Go to the Park" through to "Go to Quick-stop Bar" share a line with those vertical bars as breaks. Then there's a gap, and we have four more choices, but these are vertically laid out on separate lines.
Is there a reason for this? Are the ones on the same line somehow different from the ones on separate lines? Is there some effect on my character or on the plot?
In a way they are different. The four bottom links go to "zones" (my word, not the game's). Each zone has one of those horizontal menus. We already say the menu for the Home zone. But none of these is really obvious. I had to analyze this. Note the phrasing is the same: "Go to the Park" and "Go to Felix's House". At a glance, I can't understand how these are different. Perhaps putting "Leave town center" just above the four vertical choices would make it clear that the horizontal choices are within the town center and the lower vertical ones are not.
But instead we have odd formatting with no obvious reason for the distinction.
As for "Confront the Stranger", it turns out that this one is plot-driven. It's not always available. But instead of figuring out how to seamlessly merge it into the list of the other "local" choices, it's put there separately. I suppose that's ok, but maybe a bit of text would have helped. Something like "Besides that normal stuff you can do, you can also:" and the "Confront the Stranger".
Nah, too contrived. Just figure out how to dynamically construct a menu with fixed choices and plot-dependent choices merged into a single list.
Laying things out better takes time and effort. Indeed, I worked hard on a layout I like before even starting to write any text. It's a discipline thing.