Welcome, Guest. Please login or register.

Pages: 1 2 3 [4] 5 6 7
Print
Author Topic: WIP - HUD and the GUIs, feedback needed !  (Read 37934 times)
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #45 on: December 15, 2010, 06:01:45 AM »

I think icons have strengths which text can not have:
  • Icons are more easily distinguished, making them easier to find. When all of the [items] are presented as words, each word must be read in turn to find the desired one. Icons, on the other hand, are easily remembered and can be found at a glance.
  • Icons usually take up less space. This allows more functions to fit within the same space, or allows for the UI [inventory] to take up less screen real estate.
  • Icons can incorporate [item] status information.
Based on this text vs icons in web design post by Jack Moffett.

Regarding space: look at the inventory screen of these BG2 screens and imagine it in text form.
@qubodup - so, are you against text-based by principle or do you just doubt it's practicality ?

The Jack Moffett arguments are valid in many aspects, but in the end we come down to a very big difference - we're dealing with a game interface rather than a website. While the design principles for icons should and do apply here, my goal's still to try and come up with a text-based inventory UI, which is intuitive and simple to use.
The goal is to have the layout and divisions between 'containers' positioned in such a way that using them would not hinder your 'speed' while scrolling through your inventory - to have everything positioned in it's 'right' place and thus making it's use more intuitive.

Right now in the photochop I made everything is cluttered and not thought through, but when things are in place everything should make sense.

What zenbitz said applies too. When you have a furry coat and a bearskin in your inventory and only the furry coat is wearable, then you wouldn't go trying it on. It would probably be in a 'window' separate from wearables, or there wouldn't be a mark that it is wearable (wearable/wieldable items usually deteriorate and eventually break down). In-game in a container (chest, box, locker, car trunk)
you'd see the following:
Container:
- A furry coat (well-worn)
- Bearskin

Also - the text could have colour-coding instead of quick status info in brackets

Ofcourse all of the information that tells us that can be shown with an icon, too - the quality or state of an article of clothing can be a numerical value in the corner of an item + an icon can look more flashy at first glance.

Until now I totally forgot about this one (how could I, it was only the game of the year in all gaming magazines before it's release) other big example of a textbased inventory - *drumroll* FALLOUT 3. Here you go:



Personally I found it's use convenient rather than inconvenient. Simple, in your face with all the necessary information and the text is a single colour even because of the artistic choice made with the interface. I'm actually considering trying some of the FO3 inventory 'features' in the next photochop (which I hope I should have for showing soon enough)

In the FO3-like approach the tabs could be quickly accessed with the arrow keys, a matter or microseconds, if you've got the reflexes. If there enough items that scrolling becomes necessary, the arrow keys and mouse-wheel + scrolling bar.


Concerning support for slightly rotated text: pychan doesn't seem to support something like that out of the box. Nevertheless it sounds like a great concept to me to underline the "handmade" look of the GUI. So perfectly aligned text would actually look pretty odd in this case. So if pychan doesn't support rotated text out of the box, we'll definately find a way to implement support for it ourselves.

Would it be crazy nuts for coders to write a script that transforms the provided text into an image and rotates the image into place ? Also - depending on the layout the description is probably going to have a word limit or letter limit to keep it simple.
Whether there is a tool for it, in item-creation, either in mapper or separately, you'd have a section for the description and separate slots for weight and/or any other parameters, the post it would have it's own layout mapped and would position the text into it's correct place - in the game, the image would be rotated.

I mean - I think it is not necessary and a horizontal text would be fine, I'll try to address this problem in a future photochop for further discussion (again - it is not that important and in no way essential to the design, the rotated text I mean)

@ Technomage - the image you provided is broken : (( I couldn't find another image of the Myst inventory, either.
Logged
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #46 on: December 15, 2010, 01:02:15 PM »

@ rotating text:
Small font is sometimes kept in bitmap fonts, this is why Times New Roman is so clear when it is 8 pixels high - this is basically all handcrafted. Font is usually anti-aliased and best if hinted.
It is rendered into grid of pixels, which gets disturbed when rotating. Text will loose some readability. Better way would be rotating it at lowest possible level, before rasterizing it, so that it will be antialiased normally and will be not as fuzzy as when rotating after that, and we will still could possibly use tweaks like subsampling if it will be available in some distant future.

Possible good-looking hacks:
If rotating before rendering is impossible - rotating big text only.
Prepare some things in bitmap form and using that instead.

@ icons vs text
I'm a "visual" guy, but small icons make my eyes tired in no time. Searching for stuff is not easy for most of the time, and obtaining description from X different items that all are similar is extra uncool. Plus, icons usually are tossed and shuffled often, so there is no "the right place" for a particular item, where text entries are usually sorted with some key like type or container and alphabetically later.

This turns using an item by 180 degree: you are supposed to choose action first and seek for item later on the list that shows suitable items only. This again turns abilities and skills by 180 degrees, cause there will be need of having instant view on all possible actions somewhere. And what we are using now (RMB on item to get the list of items) will not be used too often. We may solve this in other ways, I may be biased too much with roguelikes which have to handle 100+ items in that way.
Logged

mvBarracuda
Admin
Community member

Posts: 1308



View Profile Email
« Reply #47 on: December 15, 2010, 08:03:49 PM »

Concerning the FO3 GUI: I hated it with a passion because it felt so clunky. However that was not really a problem of the text-based approach but because of two other GUI aspects:
1. The GUI was made for game consoles, so you standard font size was rather large (so you can read it a couple of meters away from your couch); as PARPG is targetting PC systems, we can simply go for a smaller font and that should do the trick
2. The GUI didn't offer any kind of advanced sorting options for items; it would be great if you could sort the inventory items based on some criteria, e.g. weight, value, bulk size, condition, etc.
Logged
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #48 on: December 15, 2010, 09:10:11 PM »

This is my idea on evaluation of gaspard's idea.
Paper clip is missing, but thats only due to me being in hurry to show you that.
http://wiki.parpg.net/File:Notebookmockup_sketchy_copy.png
On the left page you can decide what you want to do, on the right - sort inventory via different criteria.
What is depicted here are on the right:
info | barter | container | wear
and on the left:
weight | bulk | where-it-is | wereables/weapon only | by type (arrow up says its sorted upwards, whatever would it mean)

The list of items consists of "up" and "down" arrows, it indicates opened branches with + and cunopened with -

This is just a mockup for brainstorming, really.
Logged

zenbitz
Community member

Posts: 1164



View Profile
« Reply #49 on: December 16, 2010, 12:14:14 AM »

I like it Q_X.

I remember badly struggling with the FO interface especially with "long guns" because the drag-n-drop was dependent on the center of the object, not the edge.   I guess it's 2010 though.
« Last Edit: December 16, 2010, 12:16:01 AM by zenbitz » Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
qubodup
Admin
Community member

Posts: 261



View Profile Email
« Reply #50 on: December 21, 2010, 10:05:01 PM »

I don't think the advantage of Icons is very clear cut when you are dealing with many 10's of items that can be highly similar.

And actually - there are 28 Icons in the above "Post Reply" think and ~1/2 of the I don't know what they are.  The ones I DO know are "universal" Icons.
Icons are easier to differentiate than text.
Text on the other hand is easier to learn, because it is more clear than icon.
I think differentiation is more important when navigating an inventory than ease of understanding new items.

So in the case where objects/tasks are easily distinguishable icons are great - assuming you use interface so much that they are memorized.

With icons - it's easy to tell a Leather Jacket from a Machete or a .357 magnum - but not so easy to tell a .357 magnum from a .38 special or a Machete from a Sax or a Leather Jacket from a Pea Coat.
color and perspective allow to make big visual differences between similar items.

Fallout RPG Item Icons Collection

The other advantage of a text view is that we don't have to create 250 icons RIGHT NOW.
One placeholder icon is enough. Smiley

@qubodup - so, are you against text-based by principle or do you just doubt it's practicality ?
I think icons are better for items in an inventory rather than text.
Logged
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #51 on: December 22, 2010, 01:41:54 PM »

Lets summarize it maybe:

Text-based inventory:
Easier to implement
Makes things like using containers and filtering trivial to use
Size can be scaled up and down
Costs no extra work
Gives more specific knowledge
makes navigating easy if there is < 100 items in inventory, but in the same time makes encapsulation/filtering/keeping order easier
Looks clear

Icon-based inventory:
Harder to implement
Makes things like containers and filtering hard to use (unless you can filter all the small or green items), also makes some problem when implementing bulk and slots
Size is fixed, hard to scale bitmaps (with guichan under mask)
Cost extra work when making files and binding it inside game structure
Gives more instant information
makes navigating easy no matter what the inventory count is, but makes hard to distinguish between similar items. Makes need to toss things manually to keep them in order sometimes.
Looks attractive

My personal conclusions: if using icons, target rather 75x75 or 100x100 pix base size, so that similar items will look differently and there will be hard to find an item that is hiding in an eye's dead spot.
If using text, take care of usability and things like sorting.

For me it looks pretty similar to one of holy wars, like console v. GUI
Logged

Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #52 on: December 30, 2010, 11:34:21 AM »

Progress report
Decided: we will stay with icons. We will however take what's best in text-based menus and put it in good use - namely filtering and sorting will be implemented.
I've made a mockup, as promised. Sorry for lack of spaces here and there, Inkscape insisted on puting D chars instead of it.

Last, undescribed icon in the column, on the bottom, is "drop on ground". Should work with DnD items on it as well.

One of icons is highlighted, description is shown above it. It may be full info (I can squeeze 2 lines of text more there).
All the new elements are made in raw vector, this is not a proposal, just a quick mockup.
I have the idea that when you press "Use Ability" the abilities will be shown in place of items. It may be text list or "inventory like" set of icons with description above, just like inventory items have.

I thought even of inventory items "holding" an ability - so that you need needle to patch your clothes, knife to flesh out animal, billycan to cook meal, and you simply use billycan on meat to make a stew.

This last action (using things) is little bit tricky. I still don't know how to use things quickly with one page of inventory only, but it should be doable. Maybe dragging target (meat in above example) icon onto lightbulb, this will make abilities visible, and later you just choose what to do with the meat (so choose billycan and make a stew, or choose firestarting device and have it roasted? and in this case - how to make PC eat raw meat? have "artificial jaw" to eat things and doll to wear them?)

If someone needs Inkscape file with things below, just drop me a line, its not that big, I can send it Wink


* notebook - inventory.jpg (132.02 KB, 553x604 - viewed 555 times.)
« Last Edit: December 30, 2010, 11:58:38 AM by Q_x » Logged

Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #53 on: December 30, 2010, 12:22:59 PM »

Isn't the item description area a bit too small ? If the grid is scrollable, then it shouldn't matter at all if it were a hex or two shorter for the description area to be bigger - a low-tech bottle of beer might not be something that you write a lot about, but more complex items could need more description.

OR for a more detailed item info there could be a pop-up window ?

My two cents on the layout - I still think that bookmarks, instead of drawn buttons on the page would serve better as the tabs/icons to switch between various sorting settings etc. The icons right next to the grids clutter the whole thing magnificently, while bookmarks can be in-theme (notebook) and colorcoded to differentiate between actions and sorting bookmarks

EDIT: also, the grid with items would probably work better with a fixed-color or fixed-texture background - then they could be taylored for that and that would be fine.

how are big items dealt with as icons ? They'll just be.. smaller ? melee weapons could have hilts or blades, and pistols and guns shouldn't be a problem, but how about rifles ?
« Last Edit: December 30, 2010, 12:51:28 PM by Gaspard » Logged
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #54 on: December 30, 2010, 01:23:13 PM »

@ top space - it can be bigger like 2-3 lines extra without problems. Also text can be smaller, fitting 1-2 lines extra without bad readability. so 4 extra lines without much problem.

@ tabs, this will mess usability issues a bit. You will have top row of small paper leafs, and pushing them will not change things below that totally, just sort or filter items. This is IMHO non-intuitive. I'd rather put there more general stuff - quests, inventory, character stats, maybe main menu or map, major things.
If you're distracted by the way I sketched it - don't worry, it will be fancy Wink may be stickers, things drawn with pencil, like sticker peeled of an orange to indicate food, whatever. Also placement is not mandatory, may be above and below the icons.

@ icons size - if there will be no need of sorting things manually (unlimited amount of squares in inventory with good sorting support), I can imagine multisquare items. Just without, as qubodup called it, inventory tetris.
We can simply visualize 2^0-9 bulk scale with 1-10 squares (+/- 1) used by an icon (so usually items would take 2-4 squares). With this approach we can make like 30x30 pix squares.

One more thing, that may ease things a little - we may have line of text just below the inventory, displaying "status", so things like "piece of meet selected, choose an action now" or "warm boots dressed, +1 speed, +2 thermal protection, old boots taken off", or "not enough space in your backpack", "you can't carry this, its too heavy".



« Last Edit: December 30, 2010, 01:26:42 PM by Q_x » Logged

zenbitz
Community member

Posts: 1164



View Profile
« Reply #55 on: December 30, 2010, 06:19:39 PM »

some comments:

1) Short vs. long descriptions - I think that having a short one appear in the panel is fine.  I think that a longer one should be available by selecting (double-clicking?) the item itself (popup window?)

2) As drawn, you cannot really distinguish "sorts" from "filters" - maybe one group should be on a a different axis?  Or possiible have a photoshop style icon + hold to select sub type (so "sort" would be an arrow a/z, but with a sub type next to it, filter is usually some kind of "funnel" icon...

3) Not sure what "Use ability" is supposed to be...

4) Not sure if this is discussed elsewhere but right-click on an item should show a context menu - could include standard actions like drop, examine (gives long description), use, list of skills/abilities that can be applied to it.

5) for "combining" items, I think we need a different view.   I think Arcanum had something like this, although I still haven't played it much.    Another option would be that you could do a standard "control-click" to select various items then right click for context menu and it would show you various "combine" options.   

There are I guess two kinds of "combining" objects - one is where you just take A+B -> C, and another where you take A+B+C put it into D -> E + D back again.   So you need "D" like a catalyst (or in the "Beer" example, as a container) but it's "Unchanged" by the combination.   ... also some combinations are reverseable and some arent''''... yipes I better make a wiki page about that.
Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
qubodup
Admin
Community member

Posts: 261



View Profile Email
« Reply #56 on: January 03, 2011, 08:04:00 PM »

@ top space/description:
This is bugging me as well.. I would like to avoid opening pop-ups.. perhaps the left side could be used for longer description texts..

@ layout/tabs/skills:
I would prefer text instead of icons.
There definitely needs to be a separation between skill button and sorting/filtering buttons.
I think I would prefer skills to be part of item context menus, rather than a button in the inventory.

@ icons size:
They should be all the same size. Like in F1/2: http://www.flickr.com/photos/qubodup/5280664614/sizes/o/in/photostream/


@zenbitz: use ability would probably open a list of skills and then you would chose a skill and then the inventory would be filtered by items that can have the skill applied to them.
or maybe the use ability button would invoke a skill list after clicking the next item.
Logged
qubodup
Admin
Community member

Posts: 261



View Profile Email
« Reply #57 on: January 03, 2011, 09:26:05 PM »

I thought I'd post my quick mockup

the sorting/filtering solution is horrible... take this as visual food for thought


* parpg-mockup-inv.jpg (81.61 KB, 594x545 - viewed 569 times.)
Logged
qubodup
Admin
Community member

Posts: 261



View Profile Email
« Reply #58 on: January 04, 2011, 06:05:55 PM »

Another mockup of how equipping could be displayed and how mouse could interact by hovering.

No hover: http://www.flickr.com/photos/qubodup/5324383074/sizes/o/in/photostream/
No hover commented: http://www.flickr.com/photos/qubodup/5324382932/sizes/o/in/photostream/

Hover: http://www.flickr.com/photos/qubodup/5324383256/sizes/o/in/photostream/
Hover commented: http://www.flickr.com/photos/qubodup/5324382728/sizes/o/in/photostream/


* parpg-mockups-invEqipt-mouseHoverNullNOCOMMENT.jpg (106.6 KB, 780x545 - viewed 568 times.)

* parpg-mockups-invEqipt-mouseHoverTrueNOCOMMENT.jpg (118.18 KB, 780x545 - viewed 559 times.)
« Last Edit: January 04, 2011, 06:14:05 PM by qubodup » Logged
zenbitz
Community member

Posts: 1164



View Profile
« Reply #59 on: January 04, 2011, 07:46:21 PM »

Looks good!  I don't have a preference for hover vs. non hover.  Although I am generally a "hover" type guy.
Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
Pages: 1 2 3 [4] 5 6 7
Print
Jump to: