HSTracker not working at all... # UI-Design, Usability and User Experience

[ytbewhitebox]

Hey there,

first of all, thank you for your great work and effort you put into this! I am very grateful for you making this piece of software availible for everyone!

So the bugs I am experiencing with the App Version posted two days ago were the following:

• The tracker windows wont be klick- and moveable. Even if the auto pos. option is off.
• I cant add new Decks to the manager. After I saved it, I cant choose it because there is nothing saved.
• The "From a file" button seems to have no function at all (I saved my old decks per txt file from the last stable release) I do have the old textfiles, but I cant import them atm.
• I think it is a bad decision to deny any change of the Windowsize on the Deckmanager. Since I do have a big screen on my iMac I want to use that space.
• I do use HS in windowed mode and tracking positions of the window works like a charm.
• I cant import any Online saved decks from Hearthstats
• The picture data should be included in the Download to save traffic. When a card changes, it can be updated with a kind of changelog list on a server and loaded afterwards.

I do hope you do have plans on investing some more time to this. Thank you in advance!

I am very positive about the app and cant wait to see it work properly!

If you need UI-Design changes or consultation in usability or User Experience, contact me asap. Since I do have a B.A. in Design and almost a M.A. in Design Sience, I do think that I can help you out.

[bmichotte]

Hi,

thanks for your great feedback. Let me answer all your points.

The tracker windows wont be klick- and moveable. Even if the auto pos. option is off.

I'm not sure to understand this point. Could you more precise on this?

I cant add new Decks to the manager. After I saved it, I cant choose it because there is nothing saved.

Looks like I broke something in the latest update. I'll check an correct for the next version

The "From a file" button seems to have no function at all (I saved my old decks per txt file from the last stable release) I do have the old textfiles, but I cant import them atm.

Yes, this is not yet implemented, I'll try to add it soon

I think it is a bad decision to deny any change of the Windowsize on the Deckmanager. Since I do have a big screen on my iMac I want to use that space.

I have to add this but didn't had the time yet.

I do use HS in windowed mode and tracking positions of the window works like a charm.

At least one good point :D

I cant import any Online saved decks from Hearthstats

I'll check this point. When I tried, this was working.

The picture data should be included in the Download to save traffic. When a card changes, it can be updated with a kind of changelog list on a server and loaded afterwards.

The main problem with this is that I should add something like 300Mo to the app, which is not great :/ (I should add the cart for all languages)

If you need UI-Design changes or consultation in usability or User Experience, contact me asap. Since I do have a B.A. in Design and almost a M.A. in Design Sience, I do think that I can help you out.

If you want to provide me some psd/jpg files with some redesign of part of the app, feel free to do it. I'll add your change if I think they can be benefit for HSTracker !

[bmichotte]

Btw, if you choose to help with some design, could you please check #76 ?

[asiertejada]

I've been also playing a little bit with the UI design.

First, I don't like at all the HearthStats icons and now with the new frames of the new version even less.

The old version of HSTracker let you choose between a couple themes so maybe this feature could be reimplemented (a HearthStats theme and a more HearthStone-like skeumorphic one?).

I've started to redesign the class icons/buttons in the deck manager in a (let's say) less flat style. If you like the approach I wouldn't mind to keep on redesigning the deck manager screen.

[ytbewhitebox]

Please keep in mind that there could be copyright issues. Since they are the original class pcitures (that I definetly like) blizzard could harm this project…

[asiertejada]

App is already using Blizzard IP. Don't think that would be an issue as this is a not commercial software.

[ytbewhitebox]

Yeah, cards and stuff, I get it.

I had let it be since I wanted to the same as you, but dont know how far original pictures can be used. Idk the EULA of Hearthstone or such, maybe we should ask for permission of blizzard. Idk my suggestion / oppinion.

[ytbewhitebox]

And if I may suggest to make the border a bit smaller (2px or so)? It is kind of bulky. If @bmichotte likes them its all fine. But my suggestion is making them smaller, since they should be used a bit smaller in the List view, too. As you can see. I Like the color choice of yours!

[bmichotte]

I like it but like @ytbewhitebox said, maybe with a thinner border. I could provide a "classic" theme (with this kind of icons) as well as a "flat" theme (the current one).

Do you have any idea to design some frames for the list of deck ?

[asiertejada]

Borders, colors and shadows, etc. can be easily modified. In fact I'm using the HearthStats ones in the example, and as you can see they need to be modified when used with the classic icons that have a dark background.

My point was creating an alternative to the HearthStats theme.

I have cloned your repo locally so I have an idea of the assets (sizes, etc.) the current theme is using.

@bmichotte what do you have in mind? If you let me know or provide a rough sketch of what you are thinking on I think I can work out something.

[bmichotte]

@asiertejada I was thinking of something like this... what do you think ?

(ps: enjoy my photoshop skills)

[asiertejada]

OK. I don't see it having the class icons again on the deck list.

I have been testing the following design:

Frame is still WIP (colors, shadows, …). Feedback?

[ytbewhitebox]

In my opinion it is too fancy and fanart-like, i think it is the wrong approach to make a Decklist that is easy to manage. A smaller class Icon in front and a Caption with normal weighted (and easy readable) Typo plus a button for prefs would do better, i think. I have the same opinion like @bmichotte has asked for. I do definitely see the Class Icon again in the decklist for faster and easier Deck recognition. For example: the pictures in the background are too hard for the eyes in combo with the white, brown, green typo, etc. They are bad designchoices.

But the not so heavy borders at the class icons on top are way better…

Maybe you can just play with colored areas?

The Class icon as round Icon first, then the Deckname and afterwards the preference Button? As simple as it sounds, but if you have to read a Design first to get to your desired results, it is like absolutely not intuitive.

If I had more time I would do some suggestions but atm im booked out. Sorry for the negative feedback…

Kind Regards

[ytbewhitebox]

But i'll try to come up with a few concepts by the end of next week…

[asiertejada]

First of all, thanks for your constructive feedback.

I agree with:

• Colored font is not readable. In fact it is not needed. Just a test to keep using Hearthstats colors. Discarded.
• Images and readability. Was a quick test. Room to improvement.

I disagree with:

• Fanart design makes the UI difficult. Not related in my opinion. Functionality is independent of the skin.
• Hero portraits not recognizable. I won't deny my proposal is inspired by the official deck manager. If that is not recognizable…
• More icons in the deck rows. Makes the design repetitive, specially if the size is comparable to the class filter buttons. I even think such a icon crowded design, above all if no simpler icons are used, is quite confusing.
• Colored areas. That's the approach of the flat HearthStats theme. I think a more differentiated one would be better. Or no need to create a new theme. That's why I'm heading towards some kind of banner to identify the decks.
• Low weight font. I'm not sure system font at small sizes it's more legible than a big bold one. I chose Belwe as it's the Hearthstone font, and the one we are used to. Anyway I'm still not happy with the legibility of the font. Maybe a blurred background or different kind of shadows could make some improvement.

I've been toying a little bit with the design and this is the last iteration:

As you may see, it ditches the cog icon (which I think is pretty counterintuitive as it hides the main options) in favor of more icons in the toolbar.

It also features a way to see which deck is selected other than the actual list on the right, by darkening the rest of decks.

Same idea applies to the available options.

I think this could be easily (I think, not a big expert in OS X apps) implemented in code, and also believe to be a nice UI improvement.

Wood frame still WIP and maybe other kind of frame (material, color, etc.) could be used. A small overlay for the bottom right area matching the more skeumorphic theme would be next step.

[bmichotte]

My ideas are quite simple. I will steal (this is an habit now), the new themes from Epix HDT (the windows version) for decks, but also want to provide deck manager themes.

I do like flat stuff, but I think some people can like skeumorphic UI, and so, why not provide a more HS theme for the deck manager.

Therefore, I like your idea, but more the last proposition you made, with one exception, I'm not sure for the gradient stuff on the left. Maybe something more like the mask from the cards

Also, it's a good idea (and I will change it) to drop the cog and use toolbar instead.

[ytbewhitebox]

This feedback is offered to @asiertejada and is open to read for anyone strongly concerned about the app design, too:

You didn't understand my statement here. And there is no need to be sarcastic. You seem to not be a designer for real, you seem to be a coder and a hobby mediadesigner, maybe you are a wood- and socialworker, too. It is nothing wrong with that, knock yourself out. I won't use your skin, if it will be possible to choose one. I do hope that dough… that is what skins are made for. ;)

A simple design is definitely better than yours, and I would suggest to get somebody going with it, who can actually work out nice and crisp graphics instead of that semi pro Photoshop-filter skilled work of yours. That was what I meant with Fan-Art. If I had the time, I had done something so far, but my time was roughly enough for a translation to german and the new (temporary) splashscreen, and this answer to your post.

Don't get me wrong, I know that I do not have anything to say, allow or deny in here at this project, at this kind of department. That is the job and status of @bmichotte which I do deeply respect in all manners. But as a user who may have only this app for future usage, I get a bit nervous about this try of yours to propose this kind of design to a highly relevant and delicate part of this kind of software. A poor design, proposed to a community, is a nightmare (for the community). I made a (temporary) Splashscreen while I had exactly that in mind. And with this I wanted to set a standard for future adjustments (for me or other designers who may give some of their free time away for this really nice project). It is not a fancy thing to make a fast concept of a splashscreen, adjust and tile some places here, goldcut some guides there and there and such, but if you don't understand why I started there after all, it is just a lame splashscreen over and over again…

I was about to install xCode and wanted to test around with OS X, sketched templates even to get the interface going, but after I saw, what you did and what you answered, it wasn't worth the effort anymore, I was done… I am sorry, you are doing this for free (props for that!), me either, but you seem to not be able to work with (constructive) feedback from people way more experienced than you in that field. I signed Up at github only for this project, because I am greatly concerned as to how the Apps development progresses.

If you cant revisit my feedback within the right aspects, I can't and wont help you ;)

If you want a sceumorphic Design, don't work amateurish, with a wrong set "inner glow" and "dropshadow" filter from PS even on the font… dude. Use zBrush or an other (free) 3D-Tool and get things going in 2.5D OR! watch more and more PS tutorials and read some books about sceumorphic designs…

Hero portraits: […] won't deny my proposal is inspired by the official deck manager. If that is not recognizable…[…] Yeah dude, that is the kind of sarcastic kiddie stuff I needed to get chunked… slowclap initiated…

I never said a […] low weight font […], who said that?! I said […]normal weighted (and easy readable) Typo[…] there are fonts easier and FASTER to read, which are designed for many interface purposes. You are working with the HS font like a "MOVIE FONT", hey it is a StarWars app, so lets take the SW-Font! To screaming at its user: HEY I am a app for some kind of StarWars related stuff…

[…] More icons in the deck rows. Makes the design repetitive[…] wow, and that my friend, is a good thing ;) You could have worked with Square Images instead of rounded ones like the ones above, didn't you?

[…] Colored areas. That's the approach of the flat HearthStats theme. I think a more differentiated one would be better. Or no need to create a new theme. That's why I'm heading towards some kind of banner to identify the decks.[…] What would be better? And why would it be? Is it only to not be in the same direction of hearthstats? Or what purpose does it have at this point? You are putting your aesthetic needs over anybody elses, that is not the approach of a good design. Design has a differentiated purpose, which purpose has yours? That is selfish, dude ;)

Look at theese, they are WAY better than your approach, even it is the same you began with (round Class icons with colored borders) so you took that approach first obviously:

It is very crowded indeed, but far more better than what you wish you could do…

https://github.com/Epix37/Hearthstone-Deck-Tracker

@bmichotte I am sorry, I just wanted to clear things out from my position here. This only reflects my opinion against the design concepts from @asiertejada and not against any part of software you code! I do really like this app and cant wait to see it finished. Therefore I will stay around and watch the dev and try to propose things I can help with from time to time. Do yourself a favor: Even if it is free don't take any shitty design only because it is free…

[bmichotte]

@ytbewhitebox @asiertejada First of all, I'd like to thank you for helping, giving ideas and your time for HSTracker. I really appreciate it.

BUT. I don't want any kind of drama here. I think we are intelligent adults and can express ourselves without being gross or that kind of stuff. Even if one can't be fine with another, I think, everything is good to take. In his last design, @asiertejada removed the cogs from the deck list, which is a very good idea (I already implemented this modification btw). For the rest of the design and like I said before, I think there are some good ideas, and maybe @ytbewhitebox is right, they are not polished/finished but I'm sure that with some good advice, this could be a nice design.

So really, please be constructive courteous guys ;)

[asiertejada]

@ytbewhitebox Man, I don't know why you're taking this thing so personally. It's not a matter of your design versus my design or something like that. It's just a skin, a theme. There could be hundreds of them. You just choose the one you like. You have better ideas, OK, propose them. Everybody would be more than happy to have more than 1 or 2 choices. I don't think this is a contest of any sort.

I think what I'm proposing it's to have a different UI theme from the HearthStats one or the Epix's tracker. And if I'm investing some of my free time it's because I think some more people would like to have the opportunity to use such a kind of theme. If I were selfish I would clone the app, change some assets and use it in my computer, remember this is an open source software.

Of course I'm not professional designer, that's why I'm asking for feedback with every small iteration of the design. Because I know there would be a lot of things to improve.

But even if I'm always open to criticism, some of your previous feedback was not precisely the kind of feedback one would expect in a place like GitHub. Your last comment (which by the way is full of wrong assumptions and gratuitous attacks) shows what I'm talking about.

What I know for sure I am is quite a bit more respectful person with the people who is giving their time for free in order to help or improve a community.

But anyway, as @bmichotte has perfectly pointed out, let's not make a drama of this.

[ytbewhitebox]

@bmichotte @asiertejada Oh my god, me neither wants a anonymous internet drama performed at my precious workingtime in my office while I have to do some serious client work for money in exchange. That is why I was giving good advice, instead of making a drama out of this. I really do hope you got the message in the first place! There is too much effort taken inside this already by writing that long comment before, I get it. But like I said I want to help and advice and not waste my time with pointless discussions about who is right or wrong while designing things.

@asiertejada If you read your own posts, please reflect and read them again, and don't tell me, that you would not read them as they are if you were me. You wrote:

[…]"But even if I'm always open to criticism, some of your previous feedback was not precisely the kind of feedback one would expect in a place like GitHub. Your last comment (which by the way is full of wrong assumptions and gratuitous attacks) shows what I'm talking about."[…]

Where are the wrong assumptions?! I don't understand your point, while you can't see your own sarcastic comment about mine before, dude. That was the point where I had to take my time to tell you what actually is the point. You don't like negative and constructive feedback. That is a fact for now.

Another problem is, that I have to rip myself off a leg to get this all here with (probably) right grammar (hopefully) and get the statement right, while german is my native language.

I don't take anything here personally, but I do take it seriously, everything. I wrote why I didn't propose at the first place. I didn't see this as a contest I just wanted to give you professional design advice, which you (@asiertejada ) was immune against, as you see in your answer after my constructive feedback.

[…]Of course I'm not professional designer, that's why I'm asking for feedback with every small iteration of the design. Because I know there would be a lot of things to improve.[…] Dude, you asked for feedback, BUT ignored it in the first place. You didnt discuss things u did them because "you didn't think that it is was good idea", for no reason and didn't even explain why. In my kind of colloquia you would have a very hard time, explaining your behavior and work with this kind of statement. Well I am a prof. and for sure I can explain you every reason I set or design a thing the way I do. Also I am a professional when it comes to habits like discussion or social behavior. And I can see you talk one way but act the other:

[…]What I know for sure I am is quite a bit more respectful person with the people who is giving their time for free in order to help or improve a community.[…] I think that is a kind of twisting argument, while you were doing exactly the same with your previous ignorance sent into my direction:

[…] I won't deny my proposal is inspired by the official deck manager. If that is not recognizable…[…] You were, offensive to me with that dude, like I was some nut job… so it also can apply to me. I was very respectful and open with you and even didn't criticized you the way I would have a professional designer, because this is what it is: A open source Software everybody can contribute things to. And if you want that somebody should be thankful for things you do, do them right or dont do them. I did the things not for the "thank you" I did them for their purpose…

This is like if I would code something and act like it would work best…even if it doesn't. You as a professional programmer would tell me that my coding is bad because you can see things that I as a newbie would not see. It's exactly the same way around with design. But you acted like a blindfolded child…

You got the point now?

[…] But anyway, as @bmichotte has perfectly pointed out, let's not make a drama of this.[…] That is exactly what I was planning in the first place. I just do thing seriously, like if you do something don't let anybody do bullshit with you(r stuff). That is what I learned early on and that is what I do not let happen to me or my surrounded people, ever.

It is harder to say "I was wrong" and "you were right" than "I do it like this" (without a "because") or twist things…

Kind Regards!

@bmichotte thanks for the new alpha!

[asiertejada]

Next iteration:

• Frame shadows improved.
• Mask from the cards used (it's a great way to improve legibility).
• New gradients (most of them still in progress, colors, transitions, etc.) in order to use the same class color as in the filter buttons.

Hope you like it.

[asiertejada]

Another small iteration:

• Deck stats block redesign by using the actual stat bars and an overlay (see attached GIF below)
• Some UI suggestions (see attached picture below)

[asiertejada]

Themed filter buttons working on my custom build:

[cmario92]

Hello there, You are doing a great join man, and everyone else testing.

I was wondering if anyone mentioned that the background for both the current player's and the opponent's tracker should be set to UIColor.clearColor() instead of black with alpha of 0.4 or so.

No need to show the window size/borders to this one.

Looking forward to your opinions.

[bmichotte]

@cmario92 correct me if I'm wrong but clearColor is black with alpha at 0 and there's a settings to change this opacity, which is the reason of this

[cmario92]

It is indeed. I am sorry I didn't know that was an option given to the user under the HSTracker preferences.

I am not sure why this should be a choice given to the user to decide if he/she wants a background added to the HSTracker windows.

The reason I am saying that, is by scraping the UISlider under the tracker's preferences would decrease the number of items listed in the preferences, making sure the necessary bits are left.

Let me know of your thoughts @bmichotte

[TickMan]

I am not sure why this should be a choice given to the user to decide if he/she wants a background added to the HSTracker windows.

The option to add a "background" can be particularly useful when positioning trackers "off-window" (to obscure Desktop clutter), although I concede that it's probably not a "common" choice.

I certainly wouldn't resent its removal... but it seems like a small price to pay for those who may.

¯_(ツ)_/¯

-TM

[cmario92]

Great point I totally agree with you.

The reason I am making this such a big deal, is because the tracker's preferences contains so many checkboxes/sliders/dropdowns that is making it it hard for the user to make it full use.

@TickMan gave a fair point here, I would not scrap that out

[TickMan]

The reason I am making this such a big deal, is because the tracker's preferences contains so many checkboxes/sliders/dropdowns that is making it it hard for the user to make it full use.

I concur, wholeheartedly... but I don't think that "slashing features" is the solution.

Each individual preference is objectively useful, and extremely simple... the frustration comes when users have to read through a dozen of them just attempting to find whatever it is they may want to tweak.

I suspect that the solution lies in overhauling the entire Preferences layout... more-refined categorization, smarter organization, descriptive labels/icons/tooltips, etc.

Hopefully, someone more-qualified than myself will take a look at it... but if I get some free time tomorrow, I could at least throw-together an outline of minor improvements. 😜

-TM

[bmichotte]

@TickMan @cmario92 yeah, definitely please do =) I you come with a good refactoring of "categories of preferences", I'll change it with pleasure =D