New design prototype for the web version UI
blob
Member Posts: 229
@adent42 @ForumNinja @Socks @Toque @Braydon_SFX @everyone...
this is a continuation of this thread: ( I just didn't want this to get lost in the middle of 50 posts)
http://forums.gamesalad.com/discussion/95806/no-no-no-and-no#latest
Here is the design I came up with for the Web version.
(I chose the display module as an example due to the higher number of different elements it comprises.)
(the real image is much sharper especially the fonts.
Double click this link:
It is the exactitude in design that create the quality, an approximation of this, not respecting exact placements, gaps, color scheme, fonts, kerning etc will not work.
Fonts are the same size than the web version yet the module is much smaller and breathes more.
There are also more details, options and instruction within, to go with the education centric push,
I gathered that @adent42 wanted to create a text flow to the logic, however the last line of the current web version:
“using font” “with size” “and color” is not necessary. Sometime more instruction = more confusion.
Moreover, this last line is cosmetic and not part of the logic. Hence I left it out of the text flow for the sake of simplicity, clarity and logic.To increase text flow I added caps the “Place text at” and added the word “text” for a more natural text flow ( this also allow for alignment with line bellow.
“Same with Warp inside actor” is now “Warp text inside actor” for the same reasons.
The check Box is now after the description as the entire flow should be and is: description then activation, this keeps the interface logic consistent and helpful especially for educationThe main window is slightly rounded , not because apple does it but simply because it’s more friendly and a game engine should not look like an accounting software, this create more fun and higher esthetics.
All the tabs are also rounded a tiny bit for harmony and consistency
Static text is grey, editable text is a bit whiter
The instruction in the main text box are intentionally faded, as soon as you type in the box the actual text is the same brightness than the tabs below.Hello world! has been removed, 12 years old have no idea about this 40 years old reference, i rather use the empty space for instructions
The expression editor is represented with parenthesis because it’s their visual chraracteristic and have been moved back to the right of their tabs in order to not break the text flow with too many symbols.
Gaps everywhere follow a certain logic and consistency.
Comments
The post above was a continuation of this...
@ForumNinja @adent42 @etc.....
Allow me to be completely unfiltered and honest with you guys at GS:
The web version is a great tool for teaching UI and graphic design...:
It's a glaring prime example of everything not to do!
The design is absolutely atrocious.
I stared at the web version in disbelief, frozen, paralyzed for about 8 minutes.
I don't even know where to begin, I'm contemplating writing a giant post with explanation, photos and fixes for every missteps, but I'm afraid this is going to take more time than I have and may fall into deaf ears or may be heard but unexecutable by the GS team.
YOU NEED TO SPARE FEW THOUSANDS FOR A GRAPHIC/UI DESIGNER, IN 2018 THIS LEVEL OF NON-DESIGN IS INADMISSIBLE. NONE OF YOU ARE DESIGNERS, OBVIOUSLY, SO YOU MAY NOT REALIZE THE IMPORTANCE AND EFFECT IT HAS ON YOUR CUSTOMER CONSCIOUSLY AND UNCONSCIOUSLY AND THEREFORE YOUR BOTTOMLINE.
IT MAKES YOUR SOFTWARE LOOK WEAK, OLD. UNWELCOMING, BORING.
It's counterintuitive to the highest degree, difficult to use, no ergonomic intelligence, illogical, inconsistent.
I may sound too harsh and rude but I really mean it, I believe sometime true unfiltered expression is needed for full effect.
I'm not trying to create drama here, you know i love you guys, I just want to shake your bones. Wake up! This can't be!!!
Even with the best marketing and coding team and unlimited funds this interface design will make GS drown in quicksand faster than even your backwards resource management skills, do not underestimate the visual and ergonomic power on customers.
There are at least 150 no-nos.
however, I'm not one to criticize strongly without proposing a way out or a fix so:
Like I said, I don't have the time to go thru all of them, especially the ergonomic issues like extra useless clicking, positioning consistency etc.
So I'll go over the basic "must change" ones, (some of you have already mentioned some of these..)
IF you guys hired someone to do all of these, I believe GS entire fate will change.
IN SHORT YOU GUYS ARE TOO FAR GONE.
YOU MUST HIRE A GRAPHIC/UI/CSS DESIGNER NOW OR MORE THAN HALF OF YOUR POTENTIAL CUSTOMERS WILL NOT EVEN GIVE YOU CHANCE AT FIRST GLANCE.
I'm not trying to demoralize anyone, like many others here, I'm only trying to save you, dear GS.
@Socks said:
This is really the heart of the problem. We all have fantasies to be someone we're not.
From the outside everything looks simpler than it is.
This age-old trap is based of the fact that the ignorant does not know what he does not know, hence he has no way to gauge is lack of knowledge and therefore minimizes his deficiency and so, feels able!
An unconscious delusion.
Moreover, a coder thinking he can get away passing for a designer is actually an unintended insult to designers.
Would anyone feel ok winging it as a brain surgeon?
NO! So why winging it as a designer would be ok?
Artistic fields tend to be misunderstood and minimized by mostly non-artistic types. But I assure you dear GS, these fields are not any easier than brain surgery to succeed in, often harder as they requires one to understand oneself and control tendencies beyond books and teaching to achieve mastery.
Designing requires skills just like anything else it goes way beyond the hobbyist skills.
These are very deep multi faceted fields.
Especially UI design, big part of it's human psychology. logic, conventions, masterful simplicity which bear no resemblance to a beginner's simplicity and much more
There's at least more than half a decade of lack of knowledge and experience in UI design to gap with the current web version.
@adent42 for example, you wrote: "you like purple".. In commercial design, not matter what field, no-one cares what you like.
It's about choosing the right option for the right demographic, product and intent.
"I like purple" is an invalid statement to put it in coder terms..
I can tell you that in the design jobs I've had I simply wouldn't have been able to submit >GS 2.0 and keep my job -
I second that, I'll even add that the boss would not even get to the bottom of the page before exploding into rage or asking if this was a joke....
This is the whole purpose of my original post Not to minimize or ridicule the effort but to help you realize that you guys are way too deep in the abyss to get back to the surface on your own and it's normal, nothing to be ashamed about, I can't do what you do.
You guys are great in so many ways but design and UI wise, you need more than help you need someone qualified to take over. Not just a designer or someone with good taste this is all too subjective, GS need a UI designer
One picture worth 2000 words.....

I can't even begin to euh........The mac version was not amazing, unoptimized spacing and arrangement etc. (2006 look ) but useable, the web version is like 1991, 15 years before and to be honest i can not work with this, especially on a big project, I just can not, it clogs my brain, other users told me the exact same thing in PM...It's not just the look, it's 57% a workflow, positioning clicking problem too
And no, this is not an habit problem, in fact a new user will be even more frustrated, at least, we know what this is, they'll have no idea.
Let me add that a 12 years old has never ever seen anything designed like this.
It will be an even bigger shock to them.
@adent42 @ForumNinja @Socks @Toque ......
Without forcing a text flow to modules, we could get things like the one below:
Even more clarity, however, this version, while better for pros may be harder to decode than the first one I did for educational users then again it's debatable..
I think I rest my case, GS do this right, we will all benefit from it, as it will facilitate education sales, (no-one likes to buy ugly and clunky product.)
This may also allow you guys to attract capital ventures beyond BancVentures, Mercury Fund and Greycroft ... when it looks like a million bucks, the pitch is easier and the outcome is more likely to result in a million bucks investment.
Looks great! I didn’t know you were a designer.
Surprisingly no mention of framer studio or principle
I never said I was.
That is way better ! It looks like something from a design package from 2017 rather than a buggy accounting package from 1997 !!
Personally I don't think this is 'harder to decode' at all, anyone using a computer / software package will be familiar with most of the conventions, anyone who has just opened a Display Text behaviour is likely to be aware of / or searching for most of the concepts like font and size and colour, I don't think they need to be walked through each idea, and if they were unfamiliar with the idea of clicking the colour block to change the colour they'd soon know how that works after a single try.
Anyone who opens your Display Text behaviour and cannot work out how to change the font or font size is a lost cause anyway.
I agree I just thought they may be stubbornly attached to the text flow style....
which is a mistake as I explained in the last post on this thread
http://forums.gamesalad.com/discussion/95813/why-are-they-building-the-web-version-without-pro-designers#latest
I don't think anyone approaches software like that, certainly not the target demographic.
In photoshop do you want to just click on the colour selector and grab a colour and then drag the font up a couple of sizes . . . . or do you want to complete a kind of multiple-choice form that says . . .
Use the font of your choice [select here] and employing the colour known as [select here] with size of [select here] at a angle of [select here] . . . .etc etc
(By the way, who on earth says 'with size', what is this ? Shakespearean England ?
)
And if this form like approach to UI design wasn't odd enough by itself it's made more confusing by the inclusion of lots of symbols and brackets and boxes, it seems like an attempt to mix the sentence / text flow / form filling approach with equations, the result is a mess, just do what every other (very successful) software developer out there (Apple, Adobe etc) does and lose all the visual noise and 'concepts', if people want to change the colour of a font don't give them a bunch of symbols, disjointed English and a maths test, just give them a simple colour button.
The current Display Text behaviour is a good example of how incredibly inconsistent the execution of the design is.
The quote mark before 'Hello world!' is two pixels higher than the quote mark after it, the pulldowns for actor/scene are not aligned with the value fields, the text selection pulldown is 2 pixels shorter than the actor/scene pulldowns, the 'at an angle of' value field is 2 pixels taller and wider than the 'place at' value fields, the opening and closing brackets at the start and end of the value fields aren't on the same baseline (2 pixel baseline shift), 'relative to' and 'actor' are different font sizes (and have differing baselines) . . . etc etc.
Lots of small details, a few pixels here, a slightly different font size there, nothing really quite lined up, all small things, but when everything is not quite spot on, and it's all added up, the impression is that it feels a little amateurish.
One final thought, whenever I see the Display Text behaviour, it looks like someone has thrown all the information into a box and then tipped the box up (rotating it counterclockwise) and all the information has fallen into the lower lefthand side
Thine size truly doth confuse me sir.
AHAHAHAH yep, yep, this is exactlty what happened!