mockups

Development of our card database & card dev. tool. Used as the Gatherer & to empower the community to create new cards. Lead dev: Knitter
Locked
User avatar
snowdrop
developer
Posts:798
Joined:Mon Feb 01, 2010 15:25
Location:Sweden
Contact:
mockups

Post by snowdrop » Tue Dec 28, 2010 03:27

Two quick ones of how it could be made to look better. Click for full size.

mockup.png
mockup2.png
User avatar
TorbenBeta
Posts:122
Joined:Fri Aug 13, 2010 19:33
Location:Germany Niedersachsen/Lower Saxony

Re: mockups

Post by TorbenBeta » Tue Dec 28, 2010 08:49

I have looked at them and must say that I'm impressed of the energy you have put into, Snowdrop.
Some things I liked: I like how you changed the type of card into big letters like C, A.
I liked that you put the version number under everything and the different tabs like history, info (what should be in there exactly?), report and edit. And that the logo is in the top. I think I like how you changed the comment area.

Some things I disliked: I dislike (don't take that as an insult) that you removed the info in the upper part. I mean "WTactics - Cardscape - Card Development Software". I also don't like that you changed the info table, because I think it was more clear in the original. A thing I'm not sure about is the colour, why did you change that from brown to blue/grey? I don't like that you put a zero before the numbers in the comment area, could you kindly explain the reasons?

Suggestions of my own: Merge the headers to: the logo from the mock ups and add in the third line "Card Development Software". I hope you understand me. Another suggestion for the info-table: I'm for a mix of both. Remove the first table: "Elvish Fighter (Version 2:0.01) Date Submitted: 2010-12-27 01:56:18 Author: pennomi". And use snowdrops suggestion instead.
For the main table, I think we should stick to the original version. As for version number, I would stick with snowdrop but add a break between number and date and add the author. As for the colour, I'm not sure but I think I like the original more.
I hope you can read this.
User avatar
snowdrop
developer
Posts:798
Joined:Mon Feb 01, 2010 15:25
Location:Sweden
Contact:

Re: mockups

Post by snowdrop » Tue Dec 28, 2010 12:02

TorbenBeta wrote:...how you changed the type of card into big letters like C, A.
Interesting. They could be used for cardtype, but as I created them they are not:

They show the status of the card. Each letter and color corresponds to something along the lines of Concept/Refine/Approved/Official etc.

Cardtypes are clearly shown beneath the card title, just above the grey text box.
I liked that you put the version number under everything
Yes, my reasoning on that is connected to the next reply below: I don't think version number and exact date and time of creation of that version is super important to the average user of cardscape: 80-90% of the players will use it as mainly a database.

First info given must always be about the card itself, in it's current state, from a players perspective. As for players wanting to check if they have the latest card or developers finding the version and date it's still very easy to do so and even becomes easier when you separate it from play-text.
and the different tabs like history, info (what should be in there exactly?), report and edit. And that the logo is in the top. I think I like how you changed the comment area.
Info contains whatever we don't put in there as it is now. Stuff that could be nice to know and that is easy to know when we have a digital database but that isn't deemed as necessary for cardscape to function from the perspective of a player.

Some example of things that can be gathered under "info" page for a specific card is:
  • Creators name & avatar
  • Date of original creation
  • Dates of when the card was put into a different mode
  • ...and by which dev it was put there
  • Maybe a note from it's creator
[*]Number of people that marked the card as favourite.
[*]Number and % of decks that card is put in?
[*]Which other card(s) it seems it is always combined with in a deck?
[*]Average number of copies of this card in a Gaian or any deck.
Some things I disliked: I dislike (don't take that as an insult)...
I only take things as an insult when they're off topic and personal, if even then. :P Criticism is the only way to improvement, at least if it's also constructive.
that you removed /../ "WTactics - Cardscape - Card Development Software".
I think it should be as minimal as possible. If we had a good logo I would remove "WTactics" as well since our database & card creation tool page isn't anywhere a normal first time visitor would ever go to learn about the identity of the game, nor would it (the title of cardscape page) fill any huge function for branding the game and making the name known.

In any case I don't think a page should have 3 titles or a combiend title string that is as long as "WTactics - Cardscape - Card Development Software". Besides, that title is also misleading: CS is also a database. What it is depends on it's user. A majority of the visitors will never create a card, so for them it's just a database.

I believe that the only ones that should create a card in the first place is a person that knows the rules and have been around for a while. If those two are true we minimize the workload for moderators and devs that have to read through plenty of crap suggestions made by people that didn't even care about to even learn the basic rules before suggesting 10 cards.

How does that relate to anything? It does, in the sense that a person that has been around would understand and see that CS can be used to create cards. Thus there is no actual need to enlighten the public what CS is. Or is there, if one accepts my reasoning on this point?
I also don't like that you changed the info table, because I think it was more clear in the original.
I'm not sure how it was clearer in the original version: I opted for removing table lines since I find them cluttering. Instead I use space and bold font. Overall I think it's as clear as before, maybe even clearer.

What could be perceived as less clear is the fact that I combined two variables from the database and that I did it twice: The gold / threshold and the attack / defense. Before they were displayed as single posts. Now they're paired as described above. Reason for that is to save some screen estate, which allows us to have bigger text and better readability, but also because attack and defense is already paired in the game, both on creature card and also when adding modifiers.

I do agree that using abbreviations is less clear. I however don't think it's worth spelling out the full word since it, again, eats space. It would take a newcomer 3 to 15 seconds to learn the abbreviations, especially when looking at the picture next to them and/or hoovering over them (which could explain what they stand for in a tool tip). Then that person would know this forever.

If we on the other hand spell out the words we, again, clutter the screen with stuff the user knows. Imagine a player that sticks around for half a year to 3 years, using the database. She would have to see text as "threshold" over and over again in every cards grey box. Meaning, those that use CS the most, are the ones that have to see the same info over and over again for no reason.

Part of this discussion also depends on at what width the page will be locked: If there is space or if we use small fonts it might be another matter. Personally though I'm against going with small fontsize on that page, and I don't we should assume that everyone has a 24" widescreen at home.
A thing I'm not sure about is the colour, why did you change that from brown to blue/grey? I don't like that you put a zero before the numbers in the comment area, could you kindly explain the reasons?
From which brown? The yellow/beige background in the original

Colours are usually the easiest to tweak when all is into place. I don't care much exactly which ones we end up using, but the whole site is themed around brown, orange, white, grey and light blue. Can be seen both in forum and on main page. On main we also have some pinkish. All in all, we only use like 5-8 basic colours for the whole site, and I don't think we should add more of them to the palette.

Only reasons I use different colours at all is aesthetical - it looks good, and also functional - they group elements that belong together or differentiate them self from others somehow. It makes using the site and finding info on it easier and more "intuitive". When it comes to discussing aesthetics it's hard to find an objective and common ground short of us doing surveys on our target groups about which colour combos they like the most etc, which is info we don't have right now or will have in the nearest future. And even then, it could still, for branding purposes etc, still be wise to use a somewhat different colour palette than the standards that most of the competition uses.

The zero before the 1 can and probably should be removed since it clutters and fills no function that can't be replaced by spacing with CSS.
User avatar
pennomi
developer
Posts:151
Joined:Mon Nov 01, 2010 02:11
Location:Utah, United States

Re: mockups

Post by pennomi » Tue Dec 28, 2010 18:28

I really like these mockups; they look a lot nicer than the one I'm using. I'm not sure when I'll have time to change the looks, since core features are a bit more important, but I think this will be the way it'll end up looking.
snowdrop wrote:
TorbenBeta wrote:...how you changed the type of card into big letters like C, A.
Interesting. They could be used for cardtype, but as I created them they are not:
They should NOT be used for cardtype because for cardscape to be portable, all of the code that makes visual effects should use only the info not specific to the game. Otherwise, each project will have to reprogram the card.php file to make sure that it uses their specific card definition.
They show the status of the card. Each letter and color corresponds to something along the lines of Concept/Refine/Approved/Official etc.
I like this idea, though it might confuse people who are new to cardscape to just see a giant letter. What could we do to make it more intuitive?
I liked that you put the version number under everything
Yes, my reasoning on that is connected to the next reply below: I don't think version number and exact date and time of creation of that version is super important to the average user of cardscape: 80-90% of the players will use it as mainly a database.
Agreed. Hide the info that is unimportant to non-devs.

Also, I agree with the info tab. That's a great idea to keep things uncluttered and to add more statistics. Another place statistics will go is on each user page, for instance "Cards suggested by this user".
What could be perceived as less clear is the fact that I combined two variables from the database and that I did it twice: The gold / threshold and the attack / defense. Before they were displayed as single posts. Now they're paired as described above. Reason for that is to save some screen estate, which allows us to have bigger text and better readability, but also because attack and defense is already paired in the game, both on creature card and also when adding modifiers.
This is fine for us to do if we want to hack our own software, but paired stats will probably not show up in the actual cardscape software. This goes back to having to program extra code for things that are specific to a single game, and not cardscape as a whole. By making paired stats, cardscape will lose its portability.

In the distant future, that may become a configuration option, but I think some other features take major priority over that one.
I do agree that using abbreviations is less clear. I however don't think it's worth spelling out the full word since it, again, eats space. It would take a newcomer 3 to 15 seconds to learn the abbreviations, especially when looking at the picture next to them and/or hovering over them (which could explain what they stand for in a tool tip). Then that person would know this forever.
Once again, abbreviations make portability an issue. However, I think this one would be relatively easy to implement.
User avatar
snowdrop
developer
Posts:798
Joined:Mon Feb 01, 2010 15:25
Location:Sweden
Contact:

Re: mockups

Post by snowdrop » Wed Dec 29, 2010 00:37

. I'm not sure when I'll have time to change the looks, since core features are a bit more important, but I think this will be the way it'll end up looking.
Look is last on the list. PHP first. :P It can all be molded any way we want in the end.
I like this idea, though it might confuse people who are new to cardscape to just see a giant letter. What could we do to make it more intuitive?
When hovered upon there's a slight delay. After that a tooltip pop-up appears with a short & snappy explanation. Same goes for abbreviations etc. Think thats doable both with CSS and/or javascript.

I'm still somewhat against it being more obvious than that: People that don't put an effort to read up on what it means or can't figure it out fairly simple by using the site should probably not create cards in the first place ;)

I also think it can be spelled out on e.g. the info page. The R sign could be shown along with clear text "Rejected", or whatever we'd use the R for.

In the end, this is no harder to learn than learning what the leaf means in WT, or what the mysterious dots on the right are. :P
...paired stats will probably not show up in the actual cardscape software. This goes back to having to program extra code for things that are specific to a single game, and not cardscape as a whole. By making paired stats, cardscape will lose its portability. /../ abbreviations make portability an issue.
Nothing relating to WT should be hardcoded. Everyhting, all fields, names, text etc, should be configurable from config.php.

For example, we can't assume that all games will have an ATK and/or DEF value. I guess it could have bananas, cherries and monkey-spank instead. Those field/value names must be easy to config before installing CS, along with the number of such entries on a card. (Imagine a game alwyas using 10 variables, or one just using 3)

This, in effect also solves any and all translation issues for people not interested in running CS in ENG. :) It comes as bonus.

Paired stats or trippled or even quadruppled stats is something that would never happen in the db, behind the scene. It is just a way to organize how info is displayed and is super easy for people to re-arrange any way they'd want by editing the html/php.

For that reason the displaying of the card stats/text in the grey field should maybe be a small and easily to edit cardtextbox.inc.php-file thats included(). That way people won't have to re-do all their stuff every time they update the rest of CS.
User avatar
snowdrop
developer
Posts:798
Joined:Mon Feb 01, 2010 15:25
Location:Sweden
Contact:

Re: mockups

Post by snowdrop » Wed Dec 29, 2010 01:50

Some additional examples of how it could be more intuitive with added info-text and how colour could be used, on the border of being intrusive:
mockup2.jpg
Locked