New design prototype for the web version UI

blobblob Member, PRO Posts: 229
edited December 2017 in Working with GS (Online)

@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 education

  • The 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

  • blobblob Member, PRO Posts: 229
    edited December 2017

    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.

    • First, you don't have to reinvent the wheel, especially with limited design knowledge. Just ask a designer to copy illustrator or some other adobe software .. this would be a huge step up, not ideal but still a ground breaking improvement.
    • light color interfaces require much more design skills, to look modern and fresh, than darker ones. It's not just a trend, darker is easier on the eyes, white screen desensitize the retina long term and tires the eyes faster.
    • Lose the purple! it make everything looks old. I know you guys probably think it's part of your branding by now, but it's not. It's just ugly and unpopular and just does not work, at least for this dull hue of purple. GAME SALAD you are not Prince thank you.
    • You can not reconcile touch interface with desktop design all-in-one. Touch needs more rounded fat, non-rectangle buttons. and completely different window arrangements. A desktop interface with a lot of useless space does not constitute a touch friendly interface. It only makes it a crappy touch interface and a crappy desktop interface. Just go for desktop for now, no school or student is expecting iPad at this point anyway. Later, hire a designer to modify the CSS for Ipad. There's no winning in the in-between
    • Each "action, behavior or group" do not need their respective logo next to them. only menus : "action, behavior or group" do. The content of these menus only need subtle tints or outlines of their respective menu color. This is very important in design, only do what's needed, if it's not needed don't do it. Always search your design for unnecessary things, when found, erase.
    • The overall font should be a tad bit heavier, this will create a more lush and friendly feeling. It's subtle but it all adds up.
    • On the very bottom left. " < compact" is the same font size and holds the same real estate than menus directly above it. "compact" is not a menu option, it is a interface option, therefore it should be smaller and closer to the interface color.
    • "Add rule" "add group " "add timer" short cuts on the top are too small and too none descriptive. These should have a element or an outline in blue to recall their group color. The + sign in the "add timer shortcut" is green but it should be blue since it belongs to a blue group ( the behavior group). Again, the sum of these small things add up to an overall intuitive design in the end.
    • Add "change attribute" and "change table value"e to the short cut on the top ( whenever you guys got it working) Again, these should be orange to reflect their group color. Always use color logic and consistency, this is a big part of intuitive design too. (It's worth repeating) There is valuable wasted space on the left of these short cut.. Wasted space and breathing design are not the same thing.
    • The "turn off button" on rules should change the rule or action heading color when off, for the sake of clarity. (The button itself does not really need the debug logo in it.) Design conventions taught us that bright colors means on and dark is off, this button is dark when rule is on and bright white when the rule is off. this is backward.
    • The gap underneath "< Compact" on bottom left and the gaps between "groups" to the right and the "sort" tab underneath are all inconsistent this looks super cheap.
    • There is so much more to fix but I would need to take pictures and show examples etc for you to understand.. I just don't have the time, I apologize for this post if it's messy, this was a stream of consciousness, from someone who really knows this stuff and just wants to help.
      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:

    Are you actually using a UI designer (rather than just a general graphic designer) ? Or >are you not using a designer / design company at all . .

    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.

  • blobblob Member, PRO Posts: 229
    edited December 2017

    @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.

  • ToqueToque Member Posts: 1,187

    Looks great! I didn’t know you were a designer.

  • firaxofiraxo Member Posts: 11

    Surprisingly no mention of framer studio or principle

  • blobblob Member, PRO Posts: 229

    @Toque said:
    Looks great! I didn’t know you were a designer.

    I never said I was.

  • SocksSocks London, UK.Member Posts: 12,822

    @blob said:
    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..

    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.

  • blobblob Member, PRO Posts: 229

    @Socks said:
    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,

    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

  • SocksSocks London, UK.Member Posts: 12,822
    edited December 2017

    @blob said:
    I gathered that @adent42 wanted to create a text flow to the logic . . .

    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 ? :D )

    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.

    @blob said:

    • Gaps everywhere follow a certain logic and consistency.

    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 :)

  • pHghostpHghost London, UKMember Posts: 2,342

    @Socks said:
    (By the way, who on earth says 'with size', what is this ? Shakespearean England ? :D )

    Thine size truly doth confuse me sir.

  • blobblob Member, PRO Posts: 229

    @Socks said:

    AHAHAHAH yep, yep, this is exactlty what happened!

Sign In or Register to comment.