Thursday, November 12, 2015

Tools Design

Variable Set Editor - Main view
Continuation of previous post :] this time with real examples :D

Real tools design 

This may look like joke but this one window took me ~3 days to do. This include all it's features and communication:

Editor <-> Engine.

But this is reality. Creating good tools require time and I wasn't joking in Summary from previous post:
"As you can see creating of good tools is not easy. You often need go back and forth to create something really useful. You don't want to modify everything by scripts in which you can make easily mistake. Good tool will for sure save you a lot of work and return effort that you spend on it." 

Truth about tools 

The truth is simple: most of the people don't like doing them. Even for me this is not most pleasant job but it need to be done and need to be done right. Otherwise I would loos so much time later trying to modify everything manually or supporting tool that are shitty.

Variable set editor - Design

First change comparing to the old window is construction. New one is split on 3 different tabs:

1. Variable Tab
2. References Tab
3. Tips Tab
In real world most of the time, the first one will be enough to work. 

Variables Tab

You have there all information you need:
  • Type - It's shown as icon which is easier to notice and in the same time take less space.
  • Name - Next to type icon you have name which is use and you can filter variables using it.
  • Inheritance - Variables with inheritance have slightly different type icon.
  • Value - As you can see there are 2 types there 
    • black - Override values
    • gray - Values you inherit
Simple but this are not all information you have there. Sometimes you want to see what value which you override and from where it is inherit. To help with this there is ToolTip which you can see bellow.Variables which don't inherit values don't have it. 


Thanks to all this: Simple two column table have more information than four column table in previous post. But this not end of changes.

Adding variables dialog

When you adding variables you also expect nice UI. But nice UI is not everything you need. You also need input validation and feedback to user when something is wrong.


In case of this dialog I validating if user don't try add existing variable name. When he try to do that I changing color of text box on red and disable possibility to add variable. 



References Tab

References tab is really simple it just showing references tree and operation you can do with them. Not too much to add there.
References View

Tips Tab

This one may looks funny in one person projects. But I think even then this is nice touch. Sometimes you forgot some small details and describing stuff in this way allow you to quickly check it without need of searching inside code.

Tips View

Final summary 

I don't know what you think but I personally like how  window which you seen in previous post transformed into this one. I don't have any longer felling that something is wrong whit this one and using of it is pleasant experience so I'm satisfy with it. 

Of course I don't saying that nothing will change anymore because I would lie. With time I will for sure adding some new features but this is really good start.

Greg 

No comments:

Post a Comment