Thursday 9 April 2015

One more screenshot.. for now

Hello everyone. I've just got one more screenshot for you for now, mostly because my hatred of UI work means I've been focusing on the other changes. Also, I should point out that the screenshots in my last post hadn't actually been 'shrunk' to the new sub-768 size, so this one will be a little smaller.

This is a bit of an experimental one where I've completely ditched using a layout designer in favour of actually coding the layout by hand. This is a bit time-consuming, but gets around some problems with using the tools. 
An advantage for you is that you can resize it and it'll change the size of the main text area instead of just adding useless empty space.

With this particular example, I've taken Mugunghwa's suggestion of putting the buttons horizontally, and Lost Trout's request to have the action lists in a vertical column.

Let me know what you think.
Is this good or would the action lists be better in a horizontal strip as they were before? If you like them vertically, are they better like this or on the left? What about the other buttons? Do you like them in this strip along the bottom, or should they form a third vertical column, leaving the main text area to cover the entire height of the screen?



19 comments:

  1. I like the buttons, but I'm not a huge fan of the vertical strip. If you do stick with the vertical strip, definitely keep it on the right side like it is now, and stick to the two strips - three vertical strips would be way too much.
    That being said, I personally prefer the lower horizontal strip by a large margin.

    As far as designs go, I feel the first user submitted design courtesy of Mugunghwa5 in the last update is probably the best mockup I've seen yet.
    ( This one http://s18.postimg.org/5udycto49/Suggestion_1.png )

    ReplyDelete
  2. I'd prefer the latest text and the description of what you're about to do next be closer together like on previous iterations, rather than having to move my eyes from bottom of the window to top right.

    ReplyDelete
  3. I really like the flow of this layout.

    If I was to change something it would probably be the vertical action/description list as it makes the user look at the list first, then up to the description, then down to take action. The column also takes up more space than it needs to, space you might want for displaying other stuff in the future.

    Consider the following:
    -What is the highest amount of actions available to the PC in any given scene? (My guess is that it would be somewhere between 5 or 6 maybe?) The list should therefore not be bigger than necessary to acommodate this amount of options.

    -What is the longest description of any action that the PC can take? You probably want to set a character limit on this, maybe 300-400 or so? Thus you don't need a description window bigger than necessary to fit 300-400 characters. :3

    I would then place the action list on top of the description list, and place both of them above the take action button. This would leave you with a blank space in the upper right corner that could be used for stuff like:
    -Arousal meter
    -Stress meter
    -Inebriation meter
    -Location name
    -Date/time
    -Character portrait
    -Minimap
    -Wallet
    -Save/load buttons
    Basically anything you fancy in the future. :3

    ReplyDelete
  4. Here's a mockup illustrating my point.

    http://s7.postimg.org/8ejsoojh7/Screen_Shot_2015_04_09_at_12_50_00.png

    ReplyDelete
  5. The new design concepts are wasting space. Got version 2.10 and I wouldn't change the position or size of the buttons, but the design!

    Right now the game looks like "business administration" tool with it's old buttons and grey tones instead of "playing a girl". Add more colours, google for windows 8/10 and use angular shaped and coloured buttons with white neutral text. That's the easiest way to overhaul your game into something pretty.
    It would be totally awesome if you let us change the colour, we could visit color.adobe.com for colour schemata and everybody has his/her own style then.

    ReplyDelete
    Replies
    1. I'd definitely go with a color scheme consisting of cream or white, with as few lines and frames as possible with black and pink or pastel details. (Buttons and such.)

      Colors are great, but should be used sparingly to not draw too much attention. (I really hate those interfaces that has an interface that screams at you while you are trying to read.)

      I don't think I'd go for a flat metro like design though, but more rounded edges and subtle transitions to give it some shine. :3

      Fonts, I'd choose a single sans-serif one with many variations. Thin, regular, italic, bold, etc. Open Sans, Source Sans Pro, Helvetica Neue, Avenir, for instance.

      A sleek, modern, yet feminine and non-cartoonish design would be awesome.

      Here's some color inspiration. ^^
      https://dribbble.com/shots/1724701-Logo-Option-5?list=searches&tag=feminine&offset=63

      Delete
    2. Sounds good, even if "round edges and [...] shine" seem to be close to the outdated web2.0 style.

      Delete
    3. I totally see what you mean, but it's not always the case. ^^
      https://dribbble.com/shots/605790-Interface/attachments/48898

      This for instance is a UI kit using gradients, shadows and gloss while being far from web 2.0. ^^

      Delete
    4. Maybe I'm learning something new and am working mostly as a typesetter in my advertising agency than as a graphic designer, but that's actually a fully developed web2.0 design.

      Delete
    5. Colour changes aren't in scope for 0.3.1, although that's certainly a reasonable thing to look into next time I do a UI update.

      Delete
  6. I prefer the current horizontal layout to the screenshot above. Since it's a text game, I feel like the action list should be placed in the lower left, since it continues the natural left to right flow from reading the text in the main area. The vertical columns don't do much for me, and I much prefer when the main text area takes up the whole width of the game window. I'd mentioned before using the side area for a people list, but seeing the vertical buttons here makes me think that any stats and buttons should live below the main text. I could see a single line giving your location and time of the week placed directly above the main text area.

    I do agree that the white and gray are a bit too muted for a game about turning into a woman and having girly adventures. Although when it comes to typeface, I think that when you have a game based on reading, the the main text should be in a serif font.

    ReplyDelete
    Replies
    1. Cubano makes a strong point. I wish to support a horizontal action/description row as well.

      Regarding typography, you'd normally be right about serif fonts being better for reading, after all books are usually using serif fonts. ^^

      But on screen Sans Serif is usually the better choice because while printed fonts usually have a resolution of (at least) 1000 dots per inch, computer monitors has about 100 dots per inch. (A retina screen is 300 dots per inch.)

      This means serif fonts on screen can be harder to read and may place more strain on the eyes. (Same goes for very thin fonts of all kind.) :3

      Delete
    2. Thanks. I think this is what I'll go with for the next version. Then if people don't like it, they'll just have to complain on the forums until the next time I do a UI release!
      I'm not touching colours in 0.3.1. I'm running a bit behind schedule because of the outfit screen problems and perhaps some over-ambitious planning, so there won't be time to look into that this time around.

      As for fonts, I increased the font size again very slightly, but I'm as for font type I'm sticking with arial for now.

      Delete
  7. I completly agree with cubano on this. Placing the action list on the right, completly breaks de reading flow.

    ReplyDelete
  8. Add option to increase font size in main window and all windows.

    ReplyDelete
  9. I just had a different idea. Maybe the action description and Take Action button can go in the same spot as the main text box. It's complicated but if you're hand-coding the UI, then it should be possible. The action list would be a long column, possibly on the left of the screen. The main text box of the game would be to the right of it. When you click an action, the text box would be replaced with a description of the action with the buttons Take Action and Cancel underneath. If you click Cancel, the text box would come back. If you click Take Action, then everything will reset to before. This will free up space in your layout but it might make things confusing.

    ReplyDelete
    Replies
    1. I forgot that Java lists can have multiple columns, so there's no need to have a tall column to fit all the actions. By eliminating the action description and Take Action button, you can move the action list to the bottom where it can be wide and fit all the actions in multiple columns.

      Delete
    2. Cheers. I think I see what you're getting at, but I maybe prefer having the main text stay there & keeping the action description in its own little box. A lot of the time the action descriptions are fairly trivial anyway.

      Delete
  10. Hi all, thanks for your feedback.

    I've finally got the outfit screen fixed, after spending a large chunk of two days on it. It looks pretty much as it did before, but almost all the layout code has been rewritten.
    Because this took so much time and was such a pain, the next version of the scene screen I do will probably be the last one for this release. Reading the comments here, it seems people prefer horizontal 'stripes' with the text window on top, then a row of buttons, then the action list, description & button in a left to right row. I'll put that together, probably tomorrow.

    ReplyDelete