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

Hey there.

First of all, I want to thank you for developing a program that is so flexible and complete. I don't think there's anything better among the competition. For instance, Cockatrice's interface is way simpler, neater and whatnot, but I can't stay connected to a server for more than 5 minutes.

I have been looking around the forums for discussions about the user interface, because I too find that it's sometimes too overwhelming, and basically, hard to look at. I told a couple of friends to get the program today, and one of them, the first thing he said when he opened the application was, "What the hell am I looking at?" That's pretty much what I thought the first time I opened it, too, to be honest. Nevertheless, I decided to give LackeyCCG a chance, so by reading tutorials and watching videos, I learned my way around the interface. Now, not everybody thinks the way I did, and they may choose to drop it before trying; and sometimes, I really wish they'd stay and play card games with me.

I know that you don't want to sacrifice functionality for a simpler interface, but I still believe that the UI can be simplified without sacrificing functionality. I also know that designing a GUI that is balance as such is a very difficult task to undertake.

Have you ever looked at a program named Calibre? Calibre is an e-book library management application with many features. It's the best of its kind, actually, and it's free. Much of its interface is simplified by the use of buttons, context menus, tabbed windows, etc. Have you considered any of this?

I have included a couple of screenshots along with this post to show you how the Calibre interface looks and works. You can see that there are many things to do in this program, yet it's easy on the eyes and simple enough. That's why I am using it as an example.

http://i.imgur.com/Ft44Y.png

http://i.imgur.com/P7Dy8.png

What do you think?

Trevor

QuoteIt's the best of its kind, actually, and it's free. Much of its interface is simplified by the use of buttons, context menus, tabbed windows, etc. Have you considered any of this?
I make heavy use of lots of different kinds of interface elements, including all of those.

The main reason that interface looks less complicated is because it is less complicated. There are maybe 20 or so different buttons. Lackey on the other hand, has well over 50. Having little icons for functions is nice, but they take up far too much space. A lot of Lackey's interface is concealed until you need it, and a lot of Lackey's interface can be hidden, like the area to the right of the table can be collapsed.

If you have any specific interface suggestions, let me know.

I don't think just removing interface elements, or making them awkwardly inaccessible is worth it just to seem less daunting to new users. But if you can come up with better ideas about how the interface should work that still lets people do things they can now, please let me know.

What I would like is better video tutorials.

Arwym

Thanks for the prompt response, Trevor.  :)

I understand what you say, and if I can come up with more specific suggestions, I will definitely let you know.  :) If there's anything I can do to help, I'll do that too.

I think that, for now, I'll make a few skins to share with the community.  :)

innuendo

I'll just mention that without a doubt the biggest barrier to entry in lackey is the UI.

I've introduced maybe 10-15 people to the program and literally every one of them has needed a guided tour by me to even get a deck loaded. And then a whole 2nd tour to preform basic functions in the game. It's not solved by video tutorial. It's solved by a more intuitive UI.

I will mention, if I may be objective, that you are staunchly defendant of the UI. I want to express to you as a user and someone who promotes your program actively, that it's easily it's biggest weakness. I fully understand the desire for functionality, but you can't objectively say the UI is intuitive. You also can't say it's attractive by any modern standards. I don't say this to criticize your work, I know UI's are time consuming to no end, I program myself. But I don't think your constant dismissal of "the ui is frustrating because" posts is beneficial in the long run.

I'll give a largely abbreviated list of suggestions, again not attempting to provoke, but I think without question this is the most out of date and "in need" part of Lackey:

Some of the 100% critical function to play a game are unnecessarily hidden, especially on first boot.

For example, 0% of players who download lackey want to play war3000. The first prompt a new install gets is it find and download a plugin to use.

Deck loading is needlessly hidden behind a deck builder menu when it makes perfect sense if you are playing with fixed or already built decks to bring "load a deck" to the main play space menu.

You have a bunch of things tabbed to hide them (settings for example), when it makes sense to use a settings dialog (like nearly all programs I can think of), where a setting option from the main menu brings up a settings panel, with a more managed list of settings.

This applies to stuff like the server tab, which for all real reasons could be condensed into something other than a tab.

Why do we have 20 some options in the main menu tab? surely some of those could be nested, broken into other tabs, or hidden all together.

In short, I can't think of any program in which the main window of functionality changes so frequently between actions. I think a smart updated lackey UI would run everything through the main play space. Everything else you need should be handled through dialog windows. The one exception may be deck building, which is inherently complex, but could be laid out much more logically (e.g. why do we have 20 filter lists present at all times, it's wasted screen space, something you talk about frequently).

Trevor, I really want to stress how much I desire to show new people lackey and have them go "wow, that's awesome" instead of "well I can see how it's useful, but damnit it's an ugly duck".

It's a tool I want to use semi professionally for testing my games, and as it stands it's a constant struggle to introduce new players to a play test environment in lackey since it is virtually impossible to just pick up and understand the programs core and necessary functions. I've, as has the OP, become familiar and learned its MO.

If we could sit down and discuss options about a new lackey UI, I think this is easily your biggest opportunity for ROI on the value of lackey.

Trevor

innuendo, I agree with your assessment of the problem, but I am not convinced what you present as ideas are solutions or ameliorating changes.

The default plugin is a placeholder plugin because Lackey does not come loaded with any plugin. If a player wanted plugin X, and lackey came preloaded with plugin X, ya, it would be more convenient for that player. But for people who want plugin Y, they still need to install it, but if plugin X is already installed things are even more confusing for them. The lackey download would be a lot larger, they would have a bunch of files they wouldn't need, and they would have the additional task of deleting the unwanted plugin, in addition to installing the desired one. Also, I don't promote any specific plugin as an official plugin. People may mostly use plugin X today, but next year, maybe most people will be using Lackey to play plugin Y. I have decided to remain impartial about plugins, and if anyone has a working plugin they want listed, I will add it to the list.

I have tried to make the plugin installation process as easy as it can be, but if you have any specific suggestions of how I can improve things, I will implement them if they will help. I have made a lot of improvements to the interface and things are a lot easier to use than they once were.

You can load a deck a number of ways. Obviously, you can only edit a deck in the deck editor. There are ways to load a deck in the game window. Among others, you can right click a player's avatar in the players stats section and use the right click menu to load a deck. But now that you mention it, I guess it might make things more intuitive if people can select an option in the main menu to "Browse deck to load". If people think that additional method of loading a deck would be more intuitive, I can easily add that.

QuoteYou have a bunch of things tabbed to hide them (settings for example), when it makes sense to use a settings dialog (like nearly all programs I can think of), where a setting option from the main menu brings up a settings panel, with a more managed list of settings.
If I understand you correctly, you seem to be complaining that I use a Preferences panel tab for settings instead of an option from a main menu. Well, I do have an option in the main menu called "Edit Preferences...". So it seems like your only complaint would be that I also have it as a tab, visible always. Well, there isn't any wasted space having it as a tab in addition to the other tabs. I need tabs for the Game, Deck Editor, and Server, and an additional tab for Preferences appears where otherwise there would be nothing. And I think people do click the preferences tab frequently to change their preferences. Yes, they could select "Edit Preferences..." in the main menu which does the same thing as clicking the preferences tab, but I think practically everyone would rather click a tab rather than navigate a menu, or at least have the option to do either.
I think having the Preferences tab visible only serves to make the interface more intuitive. I know it is one more thing adding to the plethora of buttons and GUI elements, but I think its usefulness and intuitiveness offsets that slight increase in interface complexity.
Do you disagree with any of that?

I could have the server not as a tab, but I think that would be worse. The server tab is something you always want to be able to see, to tell you if you are connected to the server, how many people are there, if there are server messages you haven't seen, and other info. So if I don't have a server tab to display that, I would have what? I think a tab is intuitive, allows a place for that information to be displayed, and I think people understand that clicking on the server tab shows the server related stuff. If people want to see that, they know where to click. I am open to ideas for GUI improvements, but something along the lines of "just hide it in a menu" I think makes things less intuitive, and not more.

QuoteWhy do we have 20 some options in the main menu tab? surely some of those could be nested, broken into other tabs, or hidden all together.
I thought you were just arguing that more things should be added to the main menu?
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 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. The filters section of the deck editor does take a decent amount of space, but it isn't space that would be used for any other purpose. Furthermore, people who want multiple filters will need this space eventually, and I think it would be worse to have them either run out of space or have the window arrangement somehow change to accommodate for the increased demand of space.
Show me some specific ideas about how you would improve it, preferably with a screenshot/drawing. I acknowledge imperfections, but the current way is the best method I have thought of so far.

I think the major aspect of the game window that overwhelms people is there are 3 rows of buttons. There is the Table view buttons above the table, the General and Card function buttons below the table, and the log canned message buttons above the log. First off, I want to remind you that the function buttons below the table are completely optional and redundant. All general and card functions can be performed either by right click menus, the 2 menu pulldowns above the table, or even by key bound hot keys, among other methods. The function buttons below the table are visible if the plugin maker deemed them frequently used enough to warrant having them be made into buttons below the table. If you want the general and function buttons to be removed from that area, tell the plugin maker. Do you think they should be?
Now that I think about it, I suppose having the General and Card function menus (at the top left of the table) is redundant and I think I will remove them. Not only are they redundant, but in retrospect, they have nothing to do with the other table view related functions. I'll make a separate thread about those with a poll to see if people think I should remove them.

Regarding the table view interface elements, it is important for people to always be able to see that sort of info. I don't know of any better way than a strip of related GUI elements like I have them now. If you have a better idea, let me know.

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. Would you suggest I remove the current label "Log" from there and instead insert some different label? What label?

The myriad of tabs for player zones I think adds a lot of complexity to the interface, but I think it also adds a lot of power to the interface. I haven't heard any suggestions for improving them, but I am open to hear ideas and seeing mockups of those ideas.

I am always open to suggestions, but I can rarely act on any suggestions that aren't specific. I am available to speak with most times on AIM, Facebook, Skype, through email, or through forum posts.

BTW, here is that poll: http://www.lackeyccg.com/forum/index.php?topic=1499.0

Arwym

How about a "Setup Wizard" and/or "Program Tips" dialog showing up for first-time users, to begin with? From that initial dialog, you could introduce them to the concept of plugins and offer to download another from the plugin list, maybe modify some settings too. Cockatrice does something like this, telling the user where to begin the first time the application is loaded.

I think that could be a good place to start.

Then, there is something I've wondered before. Why this bar here (see attachment) at the top (I keep forgetting its name, sorry) is not being used. Most modern programs make use of it, and this helps to save so much space in the main window.

This past Monday, I finally made my boyfriend join me in a session of MTG, but he doesn't want to play again. He found it too complicated. I wanted to teach another friend to play MTG through Lackey, but my boyfriend suggested it wouldn't be a good idea, because of the complexity of the interface. :( This really makes me frustrated. I really like Lackey for what it offers, and like the other poster, would love to be able to spread the word and get overall positive reactions about it, and have them play again. Especially now that I am designing my own game to be played exclusively via Lackey.  ;)

[attachment deleted by admin due to age]

Trevor

Quote from: Arwym on February 22, 2012, 05:37:41 PM
How about a "Setup Wizard" and/or "Program Tips" dialog showing up for first-time users, to begin with? From that initial dialog, you could introduce them to the concept of plugins and offer to download another from the plugin list, maybe modify some settings too. Cockatrice does something like this, telling the user where to begin the first time the application is loaded.

I think that could be a good place to start.

Then, there is something I've wondered before. Why this bar here (see attachment) at the top (I keep forgetting its name, sorry) is not being used. Most modern programs make use of it, and this helps to save so much space in the main window.

This past Monday, I finally made my boyfriend join me in a session of MTG, but he doesn't want to play again. He found it too complicated. I wanted to teach another friend to play MTG through Lackey, but my boyfriend suggested it wouldn't be a good idea, because of the complexity of the interface. :( This really makes me frustrated. I really like Lackey for what it offers, and like the other poster, would love to be able to spread the word and get overall positive reactions about it, and have them play again. Especially now that I am designing my own game to be played exclusively via Lackey.  ;)
The bar is part of the operating system interface. Many programs use it. Many programs don't use it. I don't use it because it is very operating system dependent, and using it also requires making people not run Lackey in fullscreen mode, which many people do.

A tutorial is definitely something I want to improve and better integrate within Lackey, especially for people who launch Lackey for the first time. I think a pop up for first time users is a good idea. It would probably have to be a link to a webpage or youtube. I would want it to be a video, and it isn't feasible to be distributing the necessarily huge video files along with the program itself.

As far as the complexity of the interface goes... I totally agree that it's a big issue, but no one has presented me with a workable solution.
I want feedback about specifics. What do you and people you have shown Lackey to think is too complicated specifically?
How do you think things can be improved?

I have one idea. I will make the right panel collapsed at initial launch.

Arwym

For one, I think it's the great amount of little buttons and tabs all over the window. Most of the time, we don't know where to start looking; others, simply feel intimidated by the many options available at first glance. The text looks so small to me: I think that it could be a little bigger, but I know that this would reduce space, so I doubt it can be done at this time. The padding between the buttons' borders and the text inside is very limited in some cases, as well. Some buttons, due to their length, are being cut off, but I suppose that can't be helped when different plugins have different buttons, defined by the plugin authors. I think we could use tooltips to help there. At least on the Mac version, when I mouse over an interface object, I don't get any tooltip text. 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.

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.

As for the filters in the deck editor, and other areas over the interface, for that matter, I think you could make them collapsable. A little arrow at the corner could collapse and expand the filters. I think the same goes for the right panel that you mention. I've noticed many interfaces do this effectively.

If I can come up with mockups or more specific suggestions during the week, I'll post them here.  :)

innuendo

trevor i'm in the middle of a pc transition (yay new computer) so I don't have my normal suite of tools. This is something I want to work on, so I will put together some mock ups and ideas in full hopefully in the comming weeks.

Trevor

Quote from: innuendo on February 22, 2012, 09:18:50 PM
trevor i'm in the middle of a pc transition (yay new computer) so I don't have my normal suite of tools. This is something I want to work on, so I will put together some mock ups and ideas in full hopefully in the comming weeks.
Thank you. When designing the interface, remember that things need to be functional above all else. It would be very easy to make the interface look simple and intuitive if you remove a bunch of useful interface elements.
Also, remember that some things that one might do to de-clutter the interface may make certain actions more annoying when used in practice.

Trevor

I just added 2 collapse buttons for the right area and the table view controls.

When Lackey initially launches, people will see these collapsed.

Here is what things look like collapsed and uncollapsed.





You think that makes things less confusing to new users?

Arwym

Sure thing! Looks much friendlier, in my opinion. But I think I will ask my boyfriend and some of my friends who haven't used LackeyCCG what they think. The opinion of existing users would probably help as well.  :)

Trevor

Quote from: Arwym on February 23, 2012, 09:22:37 AM
Sure thing! Looks much friendlier, in my opinion. But I think I will ask my boyfriend and some of my friends who haven't used LackeyCCG what they think. The opinion of existing users would probably help as well.  :)
The opinion of current users is helpful, but the opinion of people just trying Lackey for the first time are the most helpful. As the designer, I am not good at figuring out what new people find inscrutable about the interface because it all makes sense to me.

innuendo

That's a nice step for sure.

I think what I mock up will end up being something more "what if we looked at this from the ground up." At the very least it will give us a talking point to move towards something different, and hopefully improved. But again, all in time.

Sincerely, i'm glad we're having these talks.

Trevor

Update:
When you launch Lackey for the first time, you now see this:



Let me know if you have any other suggestions to make things look less confusing for new users.