AuthorTopic: UI design and organization...  (Read 643 times)

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

UI design and organization...

on: January 01, 2020, 12:20:49 am
Hell-o folks,



First Question:
So I'm trying to figure out what I should do with the U.I. The problem I have is that I don't like having the notepad squashed like that but I also don't want the notepad to be much bigger because it would take too much room on the screen.

Same thing with the inventory.

I'm wondering what I could do to move things around in order to make things look better.

One thing I could do is to move the notepad on the sides as opposed to the bottom, same thing with the inventory.

Another solution would be to hide both inventory and notepad unless they're necessary as opposed to being constantly on-screen.

(sub-question): were I to conceal the inventory/description, how could I tell the player that they're "there" so to speak.

Second Question:
Speech bubble-wise I think it takes a lot of room if I want to display a lot of text... In the example above I have a single sentence and it takes a lot of room... I can just imagine taking much more space for more text.

Of course, I could have the player input many times to scroll more text but that'd be cumbersome. I can't imagine having to have the player input for every sentence!

If you have more things to say, please do go ahead. I want this to look the best. Any feedback is welcomed.

Offline Mathcong

  • 0001
  • *
  • Posts: 70
  • Karma: +0/-0
    • Mathcong_
    • View Profile

Re: UI design and organization...

Reply #1 on: January 03, 2020, 12:58:42 am
For your first question, i would hide the windows until the player needs them,
you could create buttons with little icons for the backpack, notepad ,etc.

is the notepad only used for item descriptions? if thats the case you can save alot of space by just showing a tooltip when the player hovers over the item.

made a little drawing of what i mean:


Offline Vinik

  • 0010
  • *
  • Posts: 208
  • Karma: +0/-0
    • View Profile

Re: UI design and organization...

Reply #2 on: January 03, 2020, 03:13:11 pm
I think you have a content density and focus issue, and that is confusing you regarding UI. How large is a screen, what is the resolution? Are the rooms going to typically fill the whole screen, be larger than a screen (requiring scrolling), or be much smaller than a screen as shown in the sample? If rooms are going to be this floaty/small in a large screen, are they going to be anchored in the center? On the character? Will the character move? Can he drag the camera? I am betting is a fixed room setup, but the answers to these questions should guide you to knowing how much screen space you have to spare for UI, and how much overlaying it over the game content (and for how long) would be acceptable. Btw, I am digging a lot the whole aesthetic, and everything looks much improved from your earlier stuff, keep up with the nice work :y:

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: UI design and organization...

Reply #3 on: January 17, 2020, 12:20:30 am
First of all, thanks for the replies. For some reason I never receive a notice when I subscribe to a thread on pixelation so I was right to come and check if there were some replies.

I have since decided to make some drastic changes to the general presentation. Instead of creating a new thread I'll post my progress here since it's still to get design feedback. My questions no longer apply however but some of the feedback you've provided still does. If I had gotten a notice my approach would've been influenced my 'designing' but I had to go with my own ideas.

This being said, it's not necessarily a bad thing because I'm just getting into coding so there's nothing to be discarded.

Quick presentation:
This, I feel, is necessary in order to understand the design decisions.

The game I'm going for is essentially a gamebook where the player makes choices in a narrative. The player token moves on the map based on those decisions.

https://i.imgur.com/Kg66AzR.jpg
My source of inspiration (or just google 'Warlock of Firetop Mountain'

This means a lot of reading which is why you'll notice I've gotten rid of the notepad for a book. I showed that years ago so you might be familiar with it.

Current Design
Quote
How large is a screen, what is the resolution?
Since everything is small, I'm thinking to use a resolution of 960x720 and have the art magnified as x2. This would allow me for not everything to be so small.

Quote
Are the rooms going to typically fill the whole screen, be larger than a screen (requiring scrolling), or be much smaller than a screen as shown in the sample?
I'd want scrolling. The camera being centered on the player token. I think a screen would help:

This is an example where the player needs to make a choice for the story to progress. I'm not sure about the little scales there so I might remove them. Not sure about having the pen as a cursor appear in the middle of the book which doesn't seem like a good idea. If I put the cursor on the right, I'll need to constantly move it based on the text which will require more code. Also cursors on the right is rare.

Tabs
You'll notice the tabs on the left. From top to bottom on the left: story, inventory, status and combat. The idea is for the book to display different information depending on the tab which is selected.


In the image above, this is the main narration tab. I used to have some stickies on the right so the player always has information about its health but it doesn't look right which might be art related.

The information being displayed right now doesn't match the right tab, that's because I'm still WIP with all tabs pretty much so I keep changing my mind.

Regarding screen distribution, I feel like it's efficient like it is right now.

The issue I have is all the free space on both sides of the book which I find problematic. I'm not sure what I could put there. I was thinking of a table as if the book was on a desk or something but it would still technically "wasted" space.

So any ideas about what I could put on both sides? The game uses dice so I was thinking of having the dice rolling taking place there maybe instead of having the dice in the book. But in that case I feel like the dice and their results are far away from the content of the book. It makes the player look at different places in combat and that's not fun.

So that's about it, will keep checking the thread this time around (just checked and I did tick 'notify me of replies', weird!).

EDIT: @Mathcong: I like the idea of having health/energy in the upper left but since I need to fill up the space next to the book I need to find a way to fill up that space :).

I need to find a way to stay in the 'pen and paper' theme here. Maybe I could have a notebook on the right for basic stats? I feel like this would be overkill to have both a book and a notebook though.







« Last Edit: January 17, 2020, 12:22:20 am by Zizka »