Have you considered changing some of the interface buttons' text for icons?

Started by Arwym, February 18, 2012, 10:20:16 PM

Previous topic - Next topic

Arwym

So, I showed my boyfriend the screenshots, and all he said was: "Yes, it's an improvement, as long as the tutorial is understandable." And, by understandable, he apparently means that the tutorial consists primarily of lots of screenshots and step-by-step, dummy-friendly instructions. *Shrugs.*

I find the current tutorials good enough, in my opinion. I can't say about the videos, though, since I haven't seen them.

Trevor

Quote from: Arwym on February 25, 2012, 04:14:13 PM
So, I showed my boyfriend the screenshots, and all he said was: "Yes, it's an improvement, as long as the tutorial is understandable." And, by understandable, he apparently means that the tutorial consists primarily of lots of screenshots and step-by-step, dummy-friendly instructions. *Shrugs.*

I find the current tutorials good enough, in my opinion. I can't say about the videos, though, since I haven't seen them.
The tutorials at launch will be a link to to http://lackeyccg.com/gettingstarted.html which itself is going to be redone.

What exactly does he still find to be confusing about the interface?

billylee174

Well, some ideas.

Quote from: Trevor
What specifically do you think should be "nested, broken into other tabs, or hidden altogether"?
In general, a lot of nesting makes interfaces less intuitive because things are hidden and it isn't always apparent what parent group something would belong to. For example, is loading a deck to a game in the "game" parent group or the "deck" parent group? And even if nesting things didn't have a tendency to obfuscate, it's a pain for people to be navigating menus and submenus and submenus whenever they want to do something. Especially so, if its a frequent action.

I think that it will be a good idea to arrange the main menu.
I've think of making these menus inside the main menu. As you will see I have also made some changes, like adding the "edit deck" option. I've also listed a "view" group, where it can be possible to add options to add/remove parts of the interface. These are just some ideas.

Game
   New
   Save
   Load...
   Load AutoSave1
   Load AutoSave2
Server
   Host
   Join
   Quit game
   Disconnect
Deck   
   Load recent
   Edit
Players
   Add Seat
   Remove Seat
   Spectate
View   
   Fullscreen [ x ]
   Take Screenshot
   Browse Screenshots
Other   
   Hidden play mode [ x ]
   Clear Log
   Clear Table
Preferences

[ x ] means that it's a ticked option.

Quote from: Arwym
If you don't want to nest menu options together in the main menu drop down and other areas, perhaps you could use a divider (like an horizontal line) to separate the options in groups of related options. We'd still have all those options appearing immediately, but at least the menu would become easier on the eyes, and also easier to find a particular selection.

This can also help.

Quote from: Trevor
I know the deck editor with its 20 filters is not the most elegant solution. I could have all of the filters hidden, and force people to add them one at a time, but I think rather than always adding a filter by defining every parameter every time, that it's a lot quicker to just pick the filter that already exists with all but the text entry part all ready.

What if you create a pull down menu to change each filter?. I mean to leave everything as it is, but instead of a fixed filter to change (name, set, etc), you can assign another one by clicking it. Like the pull down menu next to Open recent: (deck). But these pull down menus each having a default value, which should be the same one as the values we now currently have. So if you wish not to change the menu, you will use the filters the same way you did before. This way it will be easier for example to assign many times the same filter (and maybe we will be able to assign the same filter more than the times currently allowed, which will also be an improvement). Tell me if you wish more in-depth explanation on this matter.

Quote from: Trevor
The chat log canned message buttons I think are a little confusing to new players, and I think this is because they aren't necessarily familiar with the concept of canned message buttons. I think it would possibly help if I somehow labeled things in a better way, but I don't really know what would be an improvement.

Yes, they seem not user-friendly because they seem like commands (which they are). If we can rename these, this will help to new users eyes. I mean to assign labels to them. Plugin makers will define the default ones, but then everyone will be able to change them in the preferences as they do now. So in the preferences instead of seeing in the first box '/draw7' we can see '"Draw 7" /draw7', being "Draw 7" the optional label (if no text is included between quotation marks, then no label is included and the canned button in-game will be seen like it is now). But better than this it will be to have 2 boxes for each canned message in preferences. One to set the label, and the other one to set the command. I believe that this can help users be more comfortable with the interface as well as letting them know what the canned buttons contain so as to be able to change them. If commands are colored differently from just messages (Like "Good game") this can also help difference them.

Quote from: Trevor
I just added 2 collapse buttons for the right area and the table view controls.

Yes, they help.

Quote from: Trevor
I am always open to suggestions

Well, here are some of them. I don't like the default skin. That may be something that new users run away from. The problem with this skin I believe that is that all the buttons look the same. I mean, they are all brown and you can't easily tell what is selected. This may confuse users. But what I find is the most annoying is that some buttons are barely readable. I mean, putting the mouse over a tab makes it unreadable, inactive buttons (filters for example) are hard to read. I have been making a skin which I was thinking in sharing when it was finished. I will attach it so you can see what I mean. I'm not telling you that, for example, these are the colors to go. I just want to show the difference when all the buttons are nicely readable and with different colors (then don't have to be so different and end up in such a colorish skin).

Another thing that can be improved can be the "shape" of the buttons and everything. I mean, things can look nicer. And yes, they may spend a little more space, but it can be worth the sacrifice. Please, see these screenshots:
http://www.dropbox.com/gallery/5403772/1/interface?h=4f8a1f#/
Why the first one is the ugliest and the last one the nicest? There are many reasons and I'm no expert at this, but I can see colors, spaces, ticks, shades, separators. I just feel less squares and rectangles in the last image. I know that doing things "nicer" can increase system usage, but may be more user-friendly. No meaning to offense at all, but Lackey may seem something like this operating system (http://www.menuetos.net/0963.png). Yes, it may be very fast and it all enters in some MB, but I just feel that it lacks some colors, some icons, that it is all too square...
I don't mind much how Lackey looks because I know about the great things I can do with this program, but I have to admit that when I first saw Lackey I didn't like much it's interface and this is the thing that can easily make you escape and don't try a program. It is good to have a great functionality, but it is all great to be really simple to use and visually nice at the same time.

Finally, the editor can have some other improvements, like making the bottom buttons smaller, like the "+1" "+3" ones. "Selected +1" does the same as "+1", but they are named differently, which can also confuse users. Also it will be good as it was said before to have a help message when we place the mouse over some buttons. For example, what is "URL", "Paste"?? Yes, I know what they are, but how can a new user know, when the don't even do "anything" (no message appears if nothing is done) when the button is pressed?

Quote from: Arwym
Tooltips would also help if you ever decide to replace some of the text with little icons (they could be 20x20 or 15x15 pixels in size, which I think is the standard in many programs, like LibreOffice ?although I am not sure of the exact size, they seem to be around that), so when the user places their cursor over the icon, they get a little piece of text, or a name, that describes its function, thus solving the issue.

Icons can also help all look nicer and easier to detect. And, as you said Trevor, in the deck editor there is space available to use.

It can also be good in the editor to have some right click functions, like adding +3.

One other thing is to be able to add or remove a card just placing the mouse over it. For example so as to be able to enter some text value, place the mouse over a card and type + to add it, and without doing anything else with the mouse erase the written and change the search value so as to keep on adding cards. Do I make myself clear here?

And lastly, I'd like to be able to use CTRL to change between words in text boxes in the deck editor. I mean to be able to hold CTRL, press backspace and erase the word. I vastly use this but I can't in Lackey. If I try, Lackey recognizes it as a hotkey command ingame and it launches that command.


[attachment deleted by admin due to age]

Trevor

Quote from: billylee174 on February 26, 2012, 09:08:08 PM
Well, some ideas.

Quote from: Trevor
What specifically do you think should be "nested, broken into other tabs, or hidden altogether"?
In general, a lot of nesting makes interfaces less intuitive because things are hidden and it isn't always apparent what parent group something would belong to. For example, is loading a deck to a game in the "game" parent group or the "deck" parent group? And even if nesting things didn't have a tendency to obfuscate, it's a pain for people to be navigating menus and submenus and submenus whenever they want to do something. Especially so, if its a frequent action.

I think that it will be a good idea to arrange the main menu.
I've think of making these menus inside the main menu. As you will see I have also made some changes, like adding the "edit deck" option. I've also listed a "view" group, where it can be possible to add options to add/remove parts of the interface. These are just some ideas.

Game
   New
   Save
   Load...
   Load AutoSave1
   Load AutoSave2
Server
   Host
   Join
   Quit game
   Disconnect
Deck   
   Load recent
   Edit
Players
   Add Seat
   Remove Seat
   Spectate
View   
   Fullscreen [ x ]
   Take Screenshot
   Browse Screenshots
Other   
   Hidden play mode [ x ]
   Clear Log
   Clear Table
Preferences

[ x ] means that it's a ticked option.
I really think submenus are more annoying than helpful. I just think they can be annoying to navigate. I did try to order the menu options in a logical way, but everyone probably has a different opinion on what is the best order. You put "Host and Join" and such in the server section, which seems odd when you are hosting and joining games when not connected to the server. I will reevaluate the order of the menu items.
I will add the option to load decks directly from the menu menu because I think people expect to do it that way intuitively (despite there being a bunch of different ways to load decks).
I am not sure horizontal rules (or something like it) would actually be an improvement or just more clutter.
One thing you mentioned that I just didn't think of was ticked options in the menu, such as for Hidden play mode. I will add that.
Quote

Quote from: Trevor
I know the deck editor with its 20 filters is not the most elegant solution. I could have all of the filters hidden, and force people to add them one at a time, but I think rather than always adding a filter by defining every parameter every time, that it's a lot quicker to just pick the filter that already exists with all but the text entry part all ready.

What if you create a pull down menu to change each filter?. I mean to leave everything as it is, but instead of a fixed filter to change (name, set, etc), you can assign another one by clicking it. Like the pull down menu next to Open recent: (deck). But these pull down menus each having a default value, which should be the same one as the values we now currently have. So if you wish not to change the menu, you will use the filters the same way you did before. This way it will be easier for example to assign many times the same filter (and maybe we will be able to assign the same filter more than the times currently allowed, which will also be an improvement). Tell me if you wish more in-depth explanation on this matter.
Adding filters one at a time may be more intuitive, but it is also a less fast and more annoying way in my opinion.
And if you want to, you CAN change the filters to all the same value. You could have 20 different filters all of the same kind. It's just that I give people an initial set of filters that are already populated with data so they can just choose the preset filter that is already mostly what they want.
If I want filters for "Type CONTAINS X" and "Faction CONTAINS Y", I need to click 2 buttons (both on buttons) and type 2 values ("X" and "Y"). Compare that baseline with any suggestion you have as a potential improvement. Does your method require more than 2 button clicks? Does it require navigating pulldowns which are more annoying that button clicks?

Quote
Quote from: Trevor
The chat log canned message buttons I think are a little confusing to new players, and I think this is because they aren't necessarily familiar with the concept of canned message buttons. I think it would possibly help if I somehow labeled things in a better way, but I don't really know what would be an improvement.

Yes, they seem not user-friendly because they seem like commands (which they are). If we can rename these, this will help to new users eyes. I mean to assign labels to them. Plugin makers will define the default ones, but then everyone will be able to change them in the preferences as they do now. So in the preferences instead of seeing in the first box '/draw7' we can see '"Draw 7" /draw7', being "Draw 7" the optional label (if no text is included between quotation marks, then no label is included and the canned button in-game will be seen like it is now). But better than this it will be to have 2 boxes for each canned message in preferences. One to set the label, and the other one to set the command. I believe that this can help users be more comfortable with the interface as well as letting them know what the canned buttons contain so as to be able to change them. If commands are colored differently from just messages (Like "Good game") this can also help difference them.
I don't think different colors would help. I think that's more confusing than a uniform setting. It is also an aesthetic nightmare. People can already define labels for functions. I think adding a separate label part of the interface would be more likely to complicate things than to elucidate.
I don't know why I didn't think of it before, but I will apply a similar collapse toggle that I have since added to the right area and table view controls area. That will hide the canned message buttons from people until they deliberately enable them.

Quote
Quote from: Trevor
I just added 2 collapse buttons for the right area and the table view controls.

Yes, they help.

Quote from: Trevor
I am always open to suggestions

Well, here are some of them. I don't like the default skin. That may be something that new users run away from. The problem with this skin I believe that is that all the buttons look the same. I mean, they are all brown and you can't easily tell what is selected. This may confuse users. But what I find is the most annoying is that some buttons are barely readable. I mean, putting the mouse over a tab makes it unreadable, inactive buttons (filters for example) are hard to read. I have been making a skin which I was thinking in sharing when it was finished. I will attach it so you can see what I mean. I'm not telling you that, for example, these are the colors to go. I just want to show the difference when all the buttons are nicely readable and with different colors (then don't have to be so different and end up in such a colorish skin).
I can take another look at the default skin. This is of course a very subjective thing. I am not convinced that your skin is an improvement, but I agree that the mouse over and selected colors of some elements of the current default interface should be tweaked.
Quote
Another thing that can be improved can be the "shape" of the buttons and everything. I mean, things can look nicer. And yes, they may spend a little more space, but it can be worth the sacrifice. Please, see these screenshots:
http://www.dropbox.com/gallery/5403772/1/interface?h=4f8a1f#/
Why the first one is the ugliest and the last one the nicest?
That is not a fair comparison because those interface designs display different kinds of things, and a different amount of information.
Quote
There are many reasons and I'm no expert at this, but I can see colors, spaces, ticks, shades, separators. I just feel less squares and rectangles in the last image. I know that doing things "nicer" can increase system usage, but may be more user-friendly. No meaning to offense at all, but Lackey may seem something like this operating system (http://www.menuetos.net/0963.png). Yes, it may be very fast and it all enters in some MB, but I just feel that it lacks some colors, some icons, that it is all too square...
I don't mind much how Lackey looks because I know about the great things I can do with this program, but I have to admit that when I first saw Lackey I didn't like much it's interface and this is the thing that can easily make you escape and don't try a program. It is good to have a great functionality, but it is all great to be really simple to use and visually nice at the same time.
As far as the interface elements go, I am trying to balance a lot things. The entire interface is rendered by me. I am not using any operating system specific functions so there is a uniform appearance across all operating systems. I have tried making the interface look really slick in the past, and this looked cool on my fast computer, but some people on lesser computers really noticed a degradation in performance. I understand your criticisms and I don't disagree. I have some new ideas that I think will make things look better. I will try implementing them, and I will await additional feedback. Btw, my design was inspired by another multi-operating system independent program called KDX. (http://img.brothersoft.com/screenshots/softimage/h/haxial_kdx-17683-1.jpeg) KDX renders its own GUI.
Quote

Finally, the editor can have some other improvements, like making the bottom buttons smaller, like the "+1" "+3" ones. "Selected +1" does the same as "+1", but they are named differently, which can also confuse users.
Good point. I guess I will make them all "+1" and remove the "Selected" part.
Quote
Also it will be good as it was said before to have a help message when we place the mouse over some buttons. For example, what is "URL", "Paste"?? Yes, I know what they are, but how can a new user know, when the don't even do "anything" (no message appears if nothing is done) when the button is pressed?
That is going to be a lot of work, but I guess I will do that. Some programs (like zbrush) pop up help info when you hold down a key (like control key). Some programs just have pop ups come when you hover over an interface item long enough. I'm not sure which method is better. I think the latter is more the norm.
Quote
Quote from: Arwym
Tooltips would also help if you ever decide to replace some of the text with little icons (they could be 20x20 or 15x15 pixels in size, which I think is the standard in many programs, like LibreOffice ?although I am not sure of the exact size, they seem to be around that), so when the user places their cursor over the icon, they get a little piece of text, or a name, that describes its function, thus solving the issue.

Icons can also help all look nicer and easier to detect. And, as you said Trevor, in the deck editor there is space available to use.

It can also be good in the editor to have some right click functions, like adding +3.
Ya, I agree right click functions seems like one intuitive way to do things.
Quote

One other thing is to be able to add or remove a card just placing the mouse over it. For example so as to be able to enter some text value, place the mouse over a card and type + to add it, and without doing anything else with the mouse erase the written and change the search value so as to keep on adding cards. Do I make myself clear here?
There are an awful lot of different ways to add cards to a deck list. I am not sure if it would be helpful to add a new kind of interface element like you describe.
Quote

And lastly, I'd like to be able to use CTRL to change between words in text boxes in the deck editor. I mean to be able to hold CTRL, press backspace and erase the word. I vastly use this but I can't in Lackey. If I try, Lackey recognizes it as a hotkey command ingame and it launches that command.
I have never used CTRL+backspace to erase a word. Is that an operating system convention of some kind? It doesn't work on mac that way. You can clear a text input field a number of ways, including some typical ways (select all + delete) and some Lackey-only ways (like right clicking text input fields).

Thanks for the suggestions.

billylee174

Quote from: Trevor on February 27, 2012, 03:56:35 AM
I really think submenus are more annoying than helpful. I just think they can be annoying to navigate.

What about then creating more menus? In this moment there are 5 "tabs" in the upper screen (one is the the main menu but let's count it as a tab).
These can be changed so if someone places the mouse over it, then some options appear. If we just click the tab, it will be selected (as it is now). In order not to create confusion, when someone places the mouse over a tab, an option will appear under it with something like an arrow pointing down. if we click or place the mouse over it, then the options will appear. I'm just giving you an idea. If you believe that this can work, I can elaborate more on this matter and think of the best way to do this.

So, the options can be:

Game                            Actions                        Deck                      Server                      Preferences
  New                              Clear Log                     Load Recent            Diconnect                 Fullscreen [ x ]
  Host                              Clear Table                  Load...       
  Join                               Hidden mode [ x ]         Edit
  Add seat                         Take Screenshot
  Remove seat                   Browse Screenshots
  Spectate
  Save                           
  Load...                       
  Load AutoSave1           
  Load AutoSave2
  Quit

This is just to give an idea. For example the options inside "Actions" can be inside "Game" if it is wanted to have less tabs.

Quote from: Trevor
And if you want to, you CAN change the filters to all the same value.

Oh, I wasn't aware of this! This was the thing I was asking for, to have a pull down menu for each filter. What I now think that may be good is to be able to select the pull down menu if it is inactive, and doing so activating it. It just saves one click if you wish to turn a filter on and change some of its value.

Quote from: Trevor
I don't think different colors would help. I think that's more confusing than a uniform setting. It is also an aesthetic nightmare. People can already define labels for functions. I think adding a separate label part of the interface would be more likely to complicate things than to elucidate.
I don't know why I didn't think of it before, but I will apply a similar collapse toggle that I have since added to the right area and table view controls area. That will hide the canned message buttons from people until they deliberately enable them.

I'm sorry but how can you assign a label to a canned message? I've tried for example /draw7 <label>Draw 7</label> and I couldn't.
Regarding colors, I mean a way to see a "Draw 7" button and be able to tell if it is a command or if it is just a message saying "Draw 7".

Quote from: Trevor
I can take another look at the default skin. This is of course a very subjective thing. I am not convinced that your skin is an improvement, but I agree that the mouse over and selected colors of some elements of the current default interface should be tweaked.
Quote from: Trevor
As far as the interface elements go, I am trying to balance a lot things. The entire interface is rendered by me. I am not using any operating system specific functions so there is a uniform appearance across all operating systems. I have tried making the interface look really slick in the past, and this looked cool on my fast computer, but some people on lesser computers really noticed a degradation in performance. I understand your criticisms and I don't disagree. I have some new ideas that I think will make things look better. I will try implementing them, and I will await additional feedback. Btw, my design was inspired by another multi-operating system independent program called KDX. (http://img.brothersoft.com/screenshots/softimage/h/haxial_kdx-17683-1.jpeg) KDX renders its own GUI.
Quote from: Trevor
Quote from: billylee174
Also it will be good as it was said before to have a help message when we place the mouse over some buttons. For example, what is "URL", "Paste"?? Yes, I know what they are, but how can a new user know, when the don't even do "anything" (no message appears if nothing is done) when the button is pressed?
That is going to be a lot of work, but I guess I will do that. Some programs (like zbrush) pop up help info when you hold down a key (like control key). Some programs just have pop ups come when you hover over an interface item long enough. I'm not sure which method is better. I think the latter is more the norm.

Thank you. It will be much appreciated, specially for new users. Regarding pop up help, hovering over an item is the norm. Using a key I don't believe that is intuitive.

Quote from: Trevor
Quote from: billylee174
And lastly, I'd like to be able to use CTRL to change between words in text boxes in the deck editor. I mean to be able to hold CTRL, press backspace and erase the word. I vastly use this but I can't in Lackey. If I try, Lackey recognizes it as a hotkey command ingame and it launches that command.
I have never used CTRL+backspace to erase a word. Is that an operating system convention of some kind? It doesn't work on mac that way. You can clear a text input field a number of ways, including some typical ways (select all + delete) and some Lackey-only ways (like right clicking text input fields).

Oh I didn't know that you can't do that in Mac. It is possible in Windows and Linux. But now I know that I can use Select all + delete (which is not as nice as just pressing CTRL+delete) and clear every text message with right click (I thought that this was only applicable to the chat box)

Trevor

I think the idea about the multiple menus is a step in the wrong direction.

You can put a label in a canned message by putting it at the start within exclamation points.
Like !Roll!/roll

I don't think different colors are needed. I think the slash at the start is a pretty clear indicator if something is a function or not.

I can add control+delete if that's something people would expect. I don't think it would interfere with anything, and it would be pretty easy to implement.

innuendo

Ah, i really need my computer so I can chime in with my full thoughts!

I've never in my life seen or used ctrl+del (2 pence)

billylee174

Quote from: Trevor on February 27, 2012, 07:10:06 PM
You can put a label in a canned message by putting it at the start within exclamation points.
Like !Roll!/roll
Great! This was nowhere in the tutorials. In the forum I haven't found it either. It is good to know.

Quote from: Trevor
I can add control+delete if that's something people would expect. I don't think it would interfere with anything, and it would be pretty easy to implement.
It can be very nice to be able to use CTRL, but when you do it interferes with assigned hotkeys. If you were to have a CTRL+Backspace command, then inputting this in the deck editor will also trigger the command on the game tab.

Quote from: innuendo
I've never in my life seen or used ctrl+del (2 pence)

I don't know how many people uses this, but it is very useful. Holding CTRL you can move between words (characters like ></? also count as word separators) with the left and right arrow keys. Up and down arrows keys are used to move between paragraphs, though this doesn't work in some cases for example inputting text in a browser. Then you can use CTRL+backspace or CTRL+delete to erase full words.
Note: you can also hold SHIFT so as to select the words while holding CTRL.

innuendo

Trevor I got my pc put together and started drawing out how I see the application looking, I'm hoping end of week to have something to present (gray and black outline of sorts).

In the meantime, I know you always point us to IM but honestly I haven't had an old style IM client in years (yahoo, aim, etc), you use anything like skype or gchat?

Trevor

Quote from: innuendo on February 29, 2012, 04:02:51 PM
Trevor I got my pc put together and started drawing out how I see the application looking, I'm hoping end of week to have something to present (gray and black outline of sorts).

In the meantime, I know you always point us to IM but honestly I haven't had an old style IM client in years (yahoo, aim, etc), you use anything like skype or gchat?
I am trevoragnitti on Skype and also Facebook.

Cyrus

I think multiple menus would be a plus, because that's the first thing I turn to when I'm new to a program, just to see what it has to offer. I've seen others do this too.

In regards to functions being different colors, uh, didn't you say something to the effect of "I know what it does so I need a fresh perspective" (earlier in this thread... too lazy to find and quote). Seems like you're getting a fresh looks on it that I happen to agree with, and disregarding it because you find it obvious.

I had a possible epiphany when reading through this thread. Do you think the crazy amount of little buttons and things on screen when you open lackey is what causes it to run slowly on nicer machines? I've used Lackey on countless different systems, new and old, and even with a brand new computer I still get some lag between highlighting a button and actually being able to click it. I doubt its related, but cleaning up the interface maaaaay help?

Other random thoughts:
Why not group chat messages into a single button, with the option to expand somewhere in preferences? So that whole row of random looking stuff would just say Quick Chat --> and then you click on it and BLAM-O a billion quick chat options.
Same could be done with the command buttons as well really. A Game Action button perhaps? It'd be essentially just like right clicking, but you could expand it in preferences. Thus, new players don't open the program and see a bunch of tiny buttons, they just see a couple. I think when someone who's new to something is first presented said thing, their first inclination is to click around. Lackey, as it sits, stifles that because there's just too much to click on, even if the new user should be able to quickly tell that they don't need those buttons til they're in game.

By shifting this stuff around you could maybe possibly pleeeaaassseee increase the text size just like 2 points? Maybe you have a giant monitor or something (or just better eyesight) but the size of the text not only screams "OLD LOOKING PROGRAM" (in all capitals, no less) but is very friggin hard to read.

I think the deck editor needs a complete overall to not look like such a mess, but I'm not sure what it is...maybe icons? I think they'd make more sense here than in the game view. Remember that efficiency doesn't have to be your number one priority here. People spend hours making decks anyway, a few extra clicks isn't going to kill them, and if they're net-decking then they should just import it. Plus saving a few clicks here and there is definitely not worth all the time spent not using the program because you find it too difficult in the first place.

Maybe just read your card design tutorial over and over again! Haha, a lot of the suggestions being made seem like things you've told me in the past about card design! In all seriousness though, I know you've already got a lot of work with the actual skeleton of this bad boy, and that you earn an astounding $0 yearly from this time consuming project, so, don't let these long ass suggestion threads get you down, your program still rules!!!!

innuendo

It is time for the first of my "long replies filled with pictures"

Lets start with sharing the gallary I put up on google+ (yes I use google+): Images

Now that you have that we can start talking about what i'm trying to accomplish here. I will preface all of this with this: This is a layout, not a UI. I'm hoping to express how I think things should be arranged and function, not specifically how they should look once implemented. All scaling and text sizes are largely non precise, for instance, the chat text i left a little large. Also, i'm not changing everything. Instead, what i'm hoping to do is bring the most needed and common functions forward, and provide labels and names for the ten thousand buttons on the display, to hopefully group then logically.

That said, let's discuss.

Main Game Display

Lets start with the tan color panel that wraps the left and bottom. This i'm referring to as the "permanent panel" since it's always visible.

You'll notice right away a few changes, First is elevating the game and deck editor "tabs" seen in old lackey into two large buttons, these are without a doubt the most used pages of the program, they should be clearly marked out.

The player display panel is largely the same, With the addition of collapsible panels for each player so you can shrink them if you don't care to see their stats. I also put a spectator in there just for kicks.

To the left is the now fixed chat pane, split into chat tabs (think like some IM programs do). The game tab is always displayed, this is exactly the same as the log you typically see. The server tab is only visible why you are connected to the server, and shows all the chat there. The tab named "guy" is a whisper tab, which is opened when you /whisper or chat them through the server menu. You'll see this later, but it's important to note this chat pane is now always visible in the program. Since it shows all the current chat there is no reason it to hide. This functionality lets you chat the server while you play a game, or chat anywhere while you build decks.

You'll also notice the program should auto detect which canned messages are functions (presence of a ! or / in the front) and pushes them off to the right.  The labels before each section will make it much easier for new players to know what is going on. The Log functions leave a / or a ! in the front to indicate game or plugin defined. Quick chat options are easily labeled now. I will say, we might need to reduce the number you can have, and that is not a loss in my eyes. I can't think of a single plugin i've ever used more than 5 or 6, and that is even my own plugins.

---

Now briefly the top menu bar. The main menu is largely what it is now, I think we can discuss paring it down a bit, but that's not critical to what I hope to accomplish.

The server game button brings up what will look like the top half of the server tab we're used to now. The idea here you don't need the chat (it's on the bottom), so all the server button at the top does is let you browse the players in the server and the open games. Basically exactly the top section of the current server tab. This should display in a popup dialog or other window.

Display options is a nested view of the current zoom/scale/tilt type functions. Once a player sets these they are rarely changed, so having them take dedicated screen space is silly. See this image for an example of the display menu popped up. (this is also how the server menu should pop up, for reference).

Preferences does what it does now, but does it through a pop up window. Trevor, I know you use skype, it should look like the "options..." interface in skype. Where the sections are broken down on the left and the settings for each section are on the right. I didn't include a shot of that because it's pretty obvious.

To the far right of that bar you'll see the current plugin, which is nice because currently you can't see that in lackey without digging in menus. 2nd, it provides a little clickable button that should bring up a "load plugin" interface. I will note that button shouldn't offer stuff like update from url, you can get that all from the preferences option like you do currently. Perhaps the "plugin menu" button from the UI will have a "find new plugins" option that takes you to the preferences window where you can do what we do currently, update from url, etc.

---

Next is the green backed area, this is the active current display, since this view has the "game" button selected on the left, the green zone of the display is the game panel.

Starting at the bottom, the card zone display is exactly what we have now, tabbed sections for each card zone. The "player" off to the right there with a small arrow is to change which player's zones you see. clicking the arrow will put a little context menu there letting you select which player you want to see.

The right panel I have nothing in is the same panel as that, just vertical. You can hide and show it through an option in the "display options" menu at the top. When hidden, all the zones are expanded to fill that space.

The actions bar is all the current game functions we have now, but named so players know what the hell they are for.

The playmat is the same as before.

Deck Editor Card Pool

So clicking "deck editor" in the left panel there changes the green section of the display into the deck editor pane. This is what happens now, but instead of covering up the whole screen, only the green zone is changed. Again, this crucially lets players see the chat at all times, as well as player profiles.

Starting at the top, the deck editor menu is just a small restructuring of the current menu.

Beneath that you see tabbed panes for each super zone. Off to the far right you see a tab for deck info. This overlays the top section of the deck with the current deck meta info field you can get in current lackey.

Beneath the deck view half there are 2 action bars.

The top one is has the add and remove buttons, which add or remove whichever card you have selected (from either the top or bottom displays). No reason for 2 sets of buttons when one can do both. To the right is the load to zone buttons, labeled and hopefully more stand out-ish so that new players can quickly see how to get their deck to the game.

The bar directly beneath that is the Card pool manipulators. You'll notice I tabbed the card pool. Let me explain how this works. When you open the deck editor you just have the "pool" shown. This is all cards in the plugin. This tab can not be closed. The other tabs are opened up by hitting "new filter" or "open pack". When you do that a new tab is opened up allowing players to switch between different sets of filters, or switch between packs and the total pool, freely, without having to rebuild settings. This is a much more logical way to sort the card pool.

Now the quick search field at the right of the bar searching only the currently open card pool tab. So you can narrow down inside a search. Say you filter by type and then want to quickly sub filter that, use this box.

Now to show what I have in mind for the filter panel, see here.

You get 4 filters. Which means at any one time you can filter on 4 different card fields (which should be more than enough). The real addition here is the and/or drop downs. So if you want to search for all cards of type "creature" and "goblin" you can do that, but if you want all creatures or goblins you can do that now as well.

All four rows of filters are "and" together to produce the filtered list at the bottom. Navigating away from the filter tab doesn't reset the filter though, it holds the settings for the filter until you hit the red x to close that card pool tab.

---

I think that does it, it's pretty self explanatory I think what i'm trying to do. I still think Trevor the "new install" pop up is great. Let me know what you think, i'm glad to discuss why I think this UI would be infinitely more inviting to new users, and also have some added tools for current users. And I didn't reinvent the wheel, by and large things are in the same place they are now, but they are more clearly labeled and sorted, and they are sectioned off according to when you need to see them.

The biggest three changes:


  • The reduction of "tabs" in the program to 2 (game and deck editor)
  • The always visible "tan" bar in the images so that chat and player profiles are always seen
  • Restructuring of the card pool display

okay, gotta go for now. Enjoy.

Arwym

o.O  So much discussion around here! I'm in love with the mockups. Many great suggestions have been made. Thanks! I can't wait to see what comes of this.  :)

Trevor

Regarding the idea of having a permanent area (with things such as card images and chat logs), this is something I had considered in the past. I decided against it for a number or reasons. In many modes, it just doesn't make sense to show something. Like when browsing games on the server, card images and player stats don't make sense to show. I know occasionally people will be making a deck, and talking to someone while they do it, but this is not typical, and the cost of keeping chat visible all the time is either using up valuable real estate always showing the game chat, or a more complicated interface that allows the game chat to be situationally hidden. After considering all of the possibilities, I think the way I have it now, where you see different panels (game, deck editor, server, preferences) is the simplest option that gives people the best balance of useful information for what they are trying to do. One possible thing I could do is, while in the deck editor window, when incoming chat comes in, display it with a pop up that automatically hides after a few seconds. I'm not even sure that would be worth it. You can at least see (and even hear) if game chat has been received. And often times that is spoken through sound files, and if you are on a mac, all of the text can be spoken no matter what. And you can always voice chat in another program.
I just don't think there is enough crossover in utility to keep all of those items in your tan part visible all the time.
It's an interesting idea, and I'm glad you brought it up because it made me reevaluate the decisions I had made in the past, which in many cases I change my mind about.

Regarding the game window:

I don't see turn phase buttons. The interface does seem less complicated, but I think that is largely due to the fact that you don't show a lot of information, like tab visibility information for example. Also, just making tabs and fonts a lot larger is not a great solution. Some plugins use up to 20 game zone tabs, and with the current model, there wouldn't be any space for anything besides tabs if you displayed them like that. I do like how you made them visually more clearly tabs, specifically how the base of the active tab is clearly showing what is active. I will tinker with the visual appearance of that tabs with that in mind.

I don't like how much real estate you devote to the huge Game and Deck Editor buttons. That is a large chunk of prime real estate (top left corner) and also this could look especially odd with plugins that have small or very large card images. Remember that when designing the interface, you need to think about how many different kinds of plugins will look. Some plugins don't even use the deck editor, so that would be bad to use such a large chunk of the window like that.

On the top row you have display options, Plugin menu, AND preferences. I think stuff is all under the general "Preferences" umbrella. Options and Preferences are interchangable, so it seems confusing where to go to change things. I know you encapsulated the current table view controls in display options, but I don't think that is clear. Perhaps you didn't hear about the latest changes, but in the unreleased Lackey, the table view controls are hidden by default and can be toggled to be displayed. How you have them, you don't have the option to keep them visible all the time, which is really annoying if you want to see things like zoom and scale all the time.

You separated Quick Chat with log functions. I don't think that works well because some times people use no log functions, sometimes people use a lot of log functions. It varies greatly based on the plugin. In your diagram, you only show 3 of each, which is an unrealistically small amount. I think if you show a more realistic number, you will find that they will run into each other, and the distinction between them will be nothing but a restriction. Sometimes people will want to have them intermixed. Sometimes a log message will be both a chat message and a function associated with it and it would be unclear where that sort of thing should be place. In any case, you are trying to sort them, when I think this is something the user expects to be able to sort. In the unreleased version of lackey, the canned message buttons are hidden at initial launch and can be toggled on or off as a user desires.

Trevor

Regarding the deck editor interface suggestions:



While you could make an argument for the usefulness of the chat always being visible, I think you could not make a good argument that the player stats section of the window is always visible.

Your interface looks simpler, but I think this is again largely due to you omitting a lot of useful controls, such as the "View Tiled" buttons, or the "Combine reprints" button, or the "ignoring doubles" button. Some previously confusing buttons that you omit (like URL and Paste) will be far less confusing in the unreleased lackey because it has tooltips for all of them that will remove that confusion.
The new selected +1 buttons are a lot smaller and now just say +1, +10, -1, etc. I think it is helpful to have them for both the top and bottom panel because if they were just in one, it wouldn't be clear that they affect the other. If they were in some middle zone, I think that also wouldn't be as good because an additional subpanel would be confusing.

I like how you have more white space. I like how you have a tab for the card pool VS the list of all cards. Right now, I have those as buttons, but the functionality really matches the tab paradigm better. I will make changes with those ideas in mind. I am not sure if a tab is appropriate for the deck info. I think that implies it is another deck zone, which is confusing.


I don't like the new way you suggest filters should work. I think that it would be really annoying to use a system like that where you are limited to a small amount of filters that you need to constantly update. It also doesn't provide the A AND (B OR C) functionality that I think you were intending with the AND buttons. It would in some cases, but not all. I think the proper boolean search field that was suggested is the best solution.

I admit the way the filters are now is not ideal, but it is the most useful interface design I have seen. One great thing about the filter design currently in place is there are a bunch of filters all ready made for you with almost all the information all ready for you; everything except the text input you are searching for.
In your design, you would select the pulldown and select "Type". In my design, you just click on the filter the already has "Type". With your design, (with a single filter tab) you can't keep a bunch of filters you previously made still setup but inactive, so that makes it annoying when you go from making one aspect of the deck, to a different aspect of the deck, and then back again to the previous aspect. With multiple filter tabs, I think things start to be confusing and unwieldy. When do players make a new filter tab? If it is automatic, I think their intent couldn't possibly be predicted well enough. If it was manual, I think people would tend not to use it like that. I think people would be more inclined to just tweak a previous filter than make a new one, which in practice negates the multiple filter design. With my model, I don't think people are inclined to do that because you can see all the options at once, and turn various filters on and off, and save them all for possible use later. While a novel concept, I think your multiple filter tabs would be clumsy in practice.

The amount of space allotted for the lists of cards is far smaller in your design. With enough filters, it shrinks. When people have resized the game chat log to be larger (something that would be appropriate for the game window), if that is preserved through to the deck editor, the space yet again shrinks.
I agree that there needs to be more white space in the deck editor, and the game chat and filters you have work against that design philosophy. It is very useful to see a lot of cards displayed at once. With the full card list, that's really its main purpose. Any changes I make need to not sacrifice the amount of cards people can see in the card list.

I'm going to make 2 tabs. One will be card "Card Pool & Packs" and that will show the packs interface. The other will be called something like "All cards" or "Library". Anyone have a better idea, or a preference? It is the list of all cards, which can be filtered, but it is not based on an additive model like the card pool is.