Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deck Picker: Separating select and use. #979

Closed
azeier opened this issue May 18, 2015 · 27 comments
Closed

Deck Picker: Separating select and use. #979

azeier opened this issue May 18, 2015 · 27 comments

Comments

@azeier
Copy link
Member

azeier commented May 18, 2015

To make features like #977 and many others work/easier, selecting a deck has to no longer put the deck in "active" mode.
Two main reasons:

  1. Selecting a deck reloads the log
  2. Not possible to select another deck while "auto select deck" is on during a game

Possibly something like this: http://imgur.com/a/nNZ9t
(Use button on all decks, only on selected left/right)

I've been wanting to do this for a long time now, but always put if off because I can't think of a good way to do it.

  • Do you like any of the button placements? What/how would you change it? (I'm not entirely happy with any of those yet)
    • An alternative would maybe be to place a universal "use" button somewhere.
  • Should there be a global indicator of what deck is currently set active? The decklist on the right will not always represent the active deck now. (I tried placing a deck-item outside of the picker to indicate the active one, didn't really look any good)
@culinko
Copy link

culinko commented May 18, 2015

I think a double click or right click -> use deck would work for me. The used deck could be in bold font and selected deck could have the border around it (like in 2nd picture). But I'm not the typical basic user, so maybe there should be a way to distinguish it a little bit more.

Also, if you are in a spectator mode (even when automatic deck picker is off) and you are switching up decks, the tracker is really unresponsive and it could even freeze. Sometimes I wanted to look at my decks during a spectator game, but it's not really pleasant experience. It makes sense now, because you said it reloads the log. So this would fix this issue as well.

@GiggliG
Copy link

GiggliG commented May 21, 2015

It's an interesting problem.

For showing the active deck, maybe you could change the border, or put a little symbol in the name box, like you do with the (N) for Notes. I think a red REC circle like on tv remotes would work pretty well. Placement: maybe bottom of

I think you need a "Go to active deck" function too, maybe in rightclick

You could put a little horizontal function bar just below the All - Arena - Constructed headings, with buttons for functions like:

  • Use current deck
  • Go to active deck
  • Toggle sort by class cards first
  • compare deck (select one deck, click compare deck button, click second deck, and it compares them)
  • Clear tag filter
  • View Tags selection (I always thought this should be more visible)

Just some ideas.

@Elitesparkle
Copy link

Do you like any of the button placements? What/how would you change it? (I'm not entirely happy with any of those yet)

Placing the button there doesn't look nice.
I would opt for a mouse listener (e.g. double click) instead.

An alternative would maybe be to place a universal "use" button somewhere.

You could add a new option called Use (or Active) in the Deck menù.

Should there be a global indicator of what deck is currently set active? The decklist on the right will not always represent the active deck now. (I tried placing a deck-item outside of the picker to indicate the active one, didn't really look any good)

Something similar to the notes indicator would be nice (e.g. the letter A in a circle, as Active).

@azeier
Copy link
Member Author

azeier commented May 28, 2015

The problem with setting the active deck via context menu or doubleclick (which currently open edit, I don't like changing that), is that it's not at all intuitive. Someone who never used the the app would probably have difficulty trying to figure out how it works. An obvious "use this one"-button is a lot clearer.

For the indicator I was thinking about something that's visible regardless of how the decklist is filtered/scrolled. A indicator similar to the notes one adds nothing new (it's bold already).

@Elitesparkle
Copy link

The problem with setting the active deck via context menu or doubleclick (which currently open edit, I don't like changing that), is that it's not at all intuitive. Someone who never used the the app would probably have difficulty trying to figure out how it works. An obvious "use this one"-button is a lot clearer.

I see.
Then go for a button.

A button for each deck in the picker looks bad.
You could place it above or below the deck list.

For the indicator I was thinking about something that's visible regardless of how the decklist is filtered/scrolled. A indicator similar to the notes one adds nothing new (it's bold already).

What do you think about adding a text line showing the selected deck somewhere?
For example: "Using: Handlock".
You could place it near the button.

@azeier
Copy link
Member Author

azeier commented Jun 5, 2015

Sneak peek of where this is at right now:
screenshot 2015-06-05 09 30 04

Working on ironing out the last bugs caused by this change (and finding a place for tags).
Also comes with performance improvements for large numbers of decks!
Doubleclicking on the "active deck" bar at the bottom will select the active deck and bring it into view.

I will be releasing this as a beta update soon (probably this weekend) make sure you have options > tracker > settings > check for beta updates enabled if you want to help me test :). (I would appreciate it!)

Edit: I will also be adding an option to choose between the current icons, the new ones seen above and the hearthstats ones.

@culinko
Copy link

culinko commented Jun 5, 2015

I like the class selection at the top and the active deck info on the bottom. However, I like everything else the way it was before (stats on the right, note icons, colored decks). I hope there will be some options to choose the way we like it. Also I hope there will be multiple options to switch decks like right click -> use deck or double click on a deck.

@azeier
Copy link
Member Author

azeier commented Jun 5, 2015

Adding use deck to the context menu and being able to set the double-click actions are good ideas (any actions other than edit and use?).

Having an option to color the backgrounds should be easy to add, changing the layout maybe not so much. I will look into it but no promises. Plus "I like the old better" often happens with new things :). Might grow on you!

Any ideas on how do display tags with this layout? Adding the full list next to the stats does not look too good. There is probably some elegant solution.

@culinko
Copy link

culinko commented Jun 5, 2015

Yeah, I know, I'm always reluctant to UI changes :P

The only reason why I don't like the deck stats on the left is because it's more difficult to see the numbers overshadowed by the huge deck names in between them.

The new note style and position is very hidden imho. Just compare it with the old look and you can quickly identify the 6 decks that have notes: http://i.imgur.com/uXO1f3W.png. It would definitely take more time with the new look.

Also I'm not sure about the multiple "use" buttons. Maybe show the "use" button only when you have that deck selected? I really don't know about this one.

@CobraA1
Copy link

CobraA1 commented Jun 5, 2015

This is late, but I haven't looked at GitHub in a while . . . Gmail allows you to select an email to view, or to select multiple emails. They use checkboxes for multiple email selection. Some people may bemoan the addition of a clickable element on an individual item, yes, but it is acceptable design.

Gmail also displays tags inline with the title.

Google's new "Inbox" product has a more modern design - it may be a good idea to see if you can pull some design cues from that. I can send an invite if you don't have it.

@azeier
Copy link
Member Author

azeier commented Jun 6, 2015

Further work in progress. Those tags aren't too bad right?

tags

To adress some of the things:

  • I would argue the numbers are "difficult to see" because you are used to looking for them on the right. This way it might even be easier to see which stats belong to which deck, especially if you have multiple decks of the same class (color) next to eachother.
  • The first screenshot was a bad example for the note. The N's are always bold, making them a bit easier to spot. While I still agree it's easier to see at a glance that, in your screenshot, exactly 6 decks have notes, when do you ever need that information? Whether or not a specific deck has a note is not harder to see at all imo.
  • Main reason for the use button on each deck: You can still activate a deck with a single click. Also it's immediately clear what you need to do in order for a deck to be "active".

@culinko
Copy link

culinko commented Jun 6, 2015

The tags look really good, nice work there!

Currently, I write only missing cards and arena rewards into the notes for now and want to clear them later if I get the missing cards and/or if full arena rewards are implemented, that would allow me to see which decks still have notes and which don't and the small "N" is really not so visible next to the deck name. If it was positioned on the right, it would be visible more, but that would be weird next to the "use" button. Maybe a small note icon instead of a text?

@GiggliG
Copy link

GiggliG commented Jun 7, 2015

Very familiar looking deck list there :)
I agree with the earlier commenter that the stats look better on the right where they are now. I like the % above, and wins below, and the positioning makes it easy to scan down the decks and see which is doing well. It's a lot less clear when they are on the left, and yiu have the names of decks between them.

While having rows and rows "USE" wastes that valuable UI area with repetition that gives no information about the deck.
Personally, I'd swap them: put the Active/Use text where you have the percentage now. It fits better in the space where tags go, because it is kind of a tag.

I also suggest changing the boarder around the enter deck that is active, not jhust making the text bold. So that it stands out visually, more clearly, when you are scrolling down a long list.

I do like the way the tags look, that's really good.

I also think the new Note symbol isn't as good as the original. By placing it at the end of the name - which is of variable length - it's less useful, because you cant scan down the list and see which decks have notes, without also scanning from side to side. The old position was always at the same horizontal position, so very easy to scan and see.

I'd suggest if your going to put it near the deck name, put it at the left side of the name, not the right. But I vote for keeping it in the old position (though to match tag position, maybe at the bottom of the row rather than the top).

Actually....

If you keep the numbers at the right as they are now, and keep the note symbol in its current position, you can put Use/Active below the Notes symbol. Leaving the left of the row for tags. I think this would be more usable and scan-friendly.

@azeier
Copy link
Member Author

azeier commented Jun 7, 2015

I like using your decks for testing :P.

Now possible to:

  • Choose between the layout form above and this one.
  • Choose between icon sets

Also added an acutal icon for notes. I think this solves the visibility issue?

layout

Edit: vertically centered the note icon (relative to the name) now, looks a bit better.

@azeier
Copy link
Member Author

azeier commented Jun 7, 2015

Released as beta update.
If you don't have the option checked: you can download here for testing

@culinko
Copy link

culinko commented Jun 7, 2015

This looks much better.

I would still prefer an option to hide the class icons on the left and have the decks colored like before (it gives me more space without the icons and imho white background is very bright).

Also what about having the stats like before (framed and in 2 lines)? It looked more consistent and "presenting" that way.

I was also thinking about another note icon, more colorful one. But even this one is more visible like the black "N" before.

Nice work so far!

edit: Actually, now I realized that decks are aligned to the left and not centered like before. So I just like to request an option setting called "Use old layout" to save you work. It would still have the new functionality of separated select and use (with double click or right click -> use). There just needs to be a border around the selected deck. The only thing I'd change is the class icons, I like them more at the top than on the left. I'm sorry to let you down, I just like the current layout a lot and don't want my user experience to become a nuisance.

azeier pushed a commit that referenced this issue Jun 7, 2015
@azeier
Copy link
Member Author

azeier commented Jun 7, 2015

Added a "legacy layout" option:
legacy

(active deck: bold, selected deck: semibold)

I think this is a decent compromise. Any combination of removing the icon and centering text, with the use button still included just looks weird. Removing the use button is not an option, since I am the one who will otherwise be getting messages saying "selecting decks does not work, pls fix". And it really is just not intuitive.

@culinko
Copy link

culinko commented Jun 7, 2015

Fair enough. Actually, I really like this one :) Just a few nitpicks about this legacy layout:

What do you think about the background under All/Arena/Constructed and the class picker being the old one (dark gray)? I think it fits the overall theme better.

And what about tags (font & border) being black instead of gray, would that suck? Also, what about highlighting the "ACTIVE" text too, change the text color to black and/or bold font to be more visible.

This is all that come to mind. Thank you so much for providing this option, much appreciated!

edit: Or did you change all of the dark gray backgrounds to white? I'd prefer that this layout would keep all the dark gray backgrounds that it once used to have, it feels really "comfortable".

@azeier
Copy link
Member Author

azeier commented Jun 7, 2015

I found that, with both selections being at the top, them having a gray background looks a bit odd, especially with the dark base theme.

Making the "control backgrounds" adjustable it not a totally bad idea, but adding it to the "legacy deck layout" optons is not the way to go. A separate option for it in the future is certainly a possibility but I would like to keep it like this for now. Having the light and dark base themes, means things have to adjust while backgrounds are transparent, but not when they are static gray. I don't feel like dealing with that right now :P.

Making the labels and use/active text black looks way too cluttered in my opinion:
4

Highlighting the active should not be necessary I think, you can see the active deck at the bottom anyway.

@culinko
Copy link

culinko commented Jun 7, 2015

Well, the tags look a bit weird, so definitely the gray is better. For the USE buttons, i thought only the active button will be black, rest stays gray.

As for the background thingy, I still like the old dark gray backgrounds, while using the Light base theme :/

@anonymous555
Copy link
Contributor

FYI: In my own sandbox, I display icons next to decks showing what card sets the deck uses (brm, gvg, etc). You might want to consider adding that as well while you're at it.

cardsets

@culinko
Copy link

culinko commented Jun 9, 2015

Updated to v0.10.5.

Using legacy layout with Base Light theme and want to request a couple of things I'm still uncomfortable with:

  • Old font type/size on the deck names. The font is too big.
  • Old class icons in Games & Statistics. While I like the icons on decks, I still prefer the "face" icons on games and stats.
  • Old gray background under deck buttons.
  • Old gray headers. The gray feels more gentle and the transition from deck picker into stats is easier. Also helps a lot at night.

Don't take this as a stubborn reaction from me, I just want to use Deck Tracker and be comfortable with it like I was before. I don't want it to become like the "Arena Pack where you love Arena, but you're sick of the GvG packs" just because of UI redesign for better functionality. I really appreciate your work on this program, it's the most developed tracker for HS that ever existed.

Also, couple of ideas to the new UI, I talked about some of them before:

  • Class name/Archived text on hover over class icons in deck picker.
  • Double click makes the deck active instead of opening the edit window.
  • Add right click-> use deck.

@azeier
Copy link
Member Author

azeier commented Jun 9, 2015

If any of those are really still a problem in say, one to two weeks, we can talk about it. For now it's gonna stay this way.

I did not implement doubleclick > activate or rightclick > use because they are completely redundant with the "use" button on each deck.

@azeier azeier closed this as completed Jun 9, 2015
@GiggliG
Copy link

GiggliG commented Jun 9, 2015

I'm, also using the legacy view, thank you for incorporating it. It might be a pain for keeping multiple layouts updated, so thank you.

Because this is the internet so no one can ever be truly satisfied, I still have a couple of suggestions. :) Three functional ones, and two cosmetic ones.

Use/Active:
I just had what I think is a brilliant idea for how to represent this as an actual button. Each deck has a class icon that a lot of the time redundant (I am looking at a long list of druids right now). How about: you click that icon to make a deck active, and it adds an overlay over the icon (maybe a symbol, or the word "Active").

I believe this would work in both legacy and new layouts (admittedly it would probably make the new layouts unnecessary.)

The Notes Icon
I don't have any great loyalty to the old notes symbol, but the new one does have the problem that it blends into the background too well. This is even more an issue in layout1/2, I think. Using an icon with a grey fill instead of a white or transparent fill would improve this.

Regardless of icon used, I still think in all layouts it should over at the right side. Having it at the end of the names makes it hard to scan and see which decks have notes. When you scan down, you are also have to scan side to side, and it may sound like that's a minor thing, but it is a significant UI issue. being so close to the name adds to visual clutter, too. Over in the right side, in its old position, it is very easy to identify when scanning down a list.

Jump to Active Deck:
If you have a lot of decks its easy to scroll away from the active deck and lose track of where it is. However, the deck list now has an Active Deck layout at the bottom of list. Why not make this clickable, so that when you click it, the tracker automatically scrolls to the currently active deck?

Highlight Active Deck:
I think the best way to make clear which deck is active is to somehow highlight the entire row containing the deck title, tags, win%, class icon, etc. Like a heavier or coloured border around that row, or some shading in a different colour. You might invert it so the background is always black and the text is always white (or the class colour if that works).

"No Stats"
This text doesn't look great in the legacy layout, but looks worse in Layout 2, and maybe layout 1. When you scroll down, that text is too big, and obscures easy reading. It becomes visual noise. It would be better IMO to have something like "---", or simply leave it empty.

Hope you find this useful, you know how much I love HDT and appreciate your work on it.

@culinko
Copy link

culinko commented Jun 10, 2015

I know that you closed this ticket, but I think valid discussion could still be held. I reconsidered the old icons in stats, I'm actually starting to like the new ones. About the gray background, it's not really a ground-breaking issue and we can figure out that later. Though some UI parts are grey and some white and it just doesn't feel right. About the double click, I don't think it's redundant because of the use button, I would actually expect the double click to activate the deck (not open the edit window), now that we have this behavior of deck activating. At least an option for it would be great.

However, I do think the text on the deck names is too big and I realized that the class icons are too big as well. I have made a picture of how the things could look like with smaller icons (same size as in the header), copied old font and moved the tags a little closer (maybe too close) to the use button. Because the icons would be a bit smaller, the button could be a few pixels thinner again. If the icons are too small, they could be slightly bigger than the ones from the header. My paint skills suck though, but I hope the pictures will show you what I have in mind.

Current legacy layout:
2-legacy

Proposed change:

3-legacy-custom

These two were inspired by GiggliG. I moved the notes and tags to the right. I'm not sure if this is the way to go, but showing it here to get more feedback on this.

4-legacy-right

Only notes on the right, vertically centered:

5-legacy-right-center

I know that most of the time I have Deck Tracker in the background and just see the overlay, but nothing beats good user experience :)

@GiggliG
Copy link

GiggliG commented Jun 10, 2015

I hadn't noticed the issue had been closed when I made my post, sorry about that!

@azeier
Copy link
Member Author

azeier commented Jun 10, 2015

Feel free to leave more feedback (please do) but as I said, I'm gonna leave it like this for a week or two and we can pick it up then.

@GiggliG Jump to active deck is there, doubleclicking though :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

6 participants