Zack Wallace is a hobbyist programmer and private web developer in Northern Arizona and has been in the IT field for over 12 years.

Zack's articles

  1. Google Web Designer: Production-Ready Tool or Toy?

    Google Web Designer is a graphical design tool for creating HTML5/CSS3/Javascript advertisements using animations and 3D transforms. By using their graphical tools such as drawing, text, and 3D objects, you can animate these objects and events on a timeline using keyframes.

    Times Square
    photo credit: CMMooney

    GWD is clearly not meant to create full applications or entire websites, but rather banners, popup ads, sidebars, animated buttons even, with a strong focus on projects for Doubleclick and AdWords campaigns.

    There doesn’t seem to be a lot of buzz about this tool and I haven’t found many example projects that have made full use of it. Craig Buckler wrote a review of GWD for SitePoint back in October 2013 and it did not get the greatest review. His review, however, was just days after launching the initial beta. The version I am running is 1.1.2.0814 which is still in Beta. The program is now almost a year old.

    Knowing Google, it might come out of beta by the time we get Firefox version 3076!

    Note: When I needed help using or explaining a feature, I stuck almost exclusively to Google’s own Help Center. They also have a Youtube channel with a handful of videos only a few weeks old. I was surprised how little help there is for this program out there, but perhaps the program is simpler than it seems?

    The Project

    Because this is a tool for animating, I figured I’d create some kind of simple ad with a “click here” hotspot. I wanted to animate a cursor arrow and make it bounce against the hotspot when they hover the cursor over it.

    Sounds simple enough right?

    All I have to do is animate a small graphic and have it loop, then create the hotspot and send the user off to some web page when they click. Let’s see how easy it was to create!

    First, using some awe-inspiring built-in shapes and brushes from Photoshop CS6, I made this quick mockup ad for you to get a dream vacation.

    Mockup

    The idea is to have the white arrow bounce on the button when you hover the cursor over it; and when you click the button, open another page.

    I hope you will spend more time on your graphics than I did!

    Editing Modes

    Every time you create a new file, you can choose which editing mode to work in, here is a very brief explanation of each:

    • Banner (Simple ad for specific dimension within an app)
    • Expandable (Ad expands when clicked and has a close button to shrink it back)
    • Interstitial (Full page ad that appears at some point in your app such as between page transitions, click a close button to continue flow of app)
    • HTML (Much simplified HTML starting point, not as focused on Google ad environment and fancy features)
    • HTML with Pages (Uses a ‘Page’ construct, allowing your ad to contain multiple pages within itself without browser refreshing)
    • CSS (Essentially a very basic text editor with little more than line numbers and color highlighting)
    • JavaScript (Same basic editor)
    • XML (Same basic editor)

    The only thing of note here is that the Banner, Expandable, and Interstitial modes are more specific to Google ads. The initial source of a Banner was 107 lines of HTML and it published 8 files and 1 folder for 70.2KB total size. When opening a simple HTML document which is not focused on Google ads, it had 24 lines in the HTML and published 3 files and 1 folder for 1.57KB in size.

  2. Danger of the Accidental Click (and other UX issues)

    When designing your application, website or form UI, one of the things you will think about is placement of various commands and buttons. This might be menu items, a toolbar, some buttons, text links, drop-downs, hover menus, and any actionable, clickable elements such as resize bars.

    SitePoint has a wealth of info about UX design, they have a whole section about it! This post is merely a list of things to keep in mind when designing which particularly bug me.

    Issues

    Here is an example: I use Photoshop a lot, which has many menus with dozens of options, but like many PS users, I learn a lot of shortcuts and avoid the menus when possible. One thing I do very frequently is export a graphic for the web, which is in the File menu. I don’t know why I do this but 5 out of 10 times I go to that menu, I overshoot the option and click Revert which is right under it.

    Photoshop

    Surprisingly, I almost never have this issue with any other menus in PS, but this one happens all the time. Part of the problem is that I do this so often, it’s muscle memory, I don’t spend seconds of my time properly positioning the cursor before clicking. The other part of the problem is that Adobe has decided to put an option like Revert next to an option like Export. They pretty much do the opposite things!

    My point is to watch out for these opposites, placing your “OK” and “Cancel” buttons side by side without adequate sizing and white space. Or Yes/No, Save/Close, Minimize/Exit, and so on.
    Microsoft Windows has always had the frustration of minimize, restore, and Close next to each other on all their Windows, and I have, as I’m sure most of you have, closed Windows when you wanted to restore them.

    My wife has nightmares of the time she was writing a paper for a final and had a simple accident of closing before saving. I don’t know about you but my social feeds have shown me dozens of posts over the years from friends who have lost their work on “accidental clicks”.

    Another issue is useless drop-down menus when there is clearly enough space to provide the options without a menu. Gmail comes to mind. Notice in Gmail I get a menu just to select TWO other options! In Yahoo, they elegantly place all selections as icons with no menu. One click beats two clicks in most cases. Clearly balance is needed, but in the case of Gmail, there are only 2 other options in the menu, not 15, so just put them side-by-side!

    Gmail

    Yahoo


    A Concept

    The best way to handle opposite functions is to think of muscle memory, separation and white space, then colors and visual cues.

    Muscle memory bites us in the butt every time some application changes things and we continue to try and click where we’ve normally clicked before. Imagine if Windows suddenly moved the Start button from the left side to the right side. Muscle memory alone would cause people to go nuts and beg for the previous position, and yet there is nothing inherently different about something being on the left or right, top or bottom.

    Here are some common muscle memory design features:

    • The “Exit” command in most File menus is usually the last option.
    • The ‘About’ dialog is almost always in a ‘Help’ menu at the bottom. In Chrome the About screen is not on the bottom, unlike Firefox, Internet Explorer, or 99% of every other applications. This causes me to lose one or two seconds to properly find and click it to avoid an accident. Adobe Reader is the worst, putting About in the 2nd from top position while the bottom is used for purchasing the full version!

    • Use of ‘Tools’ or ‘Edit’ menu to find the program options and settings. And the use of a ‘gear’ icon for settings fits in here.

    People get used to where things are, and muscle memory makes them click the wrong thing more often than not when elements are out of place.

    Along with muscle memory you will be dealing with visual cues. The issue of red versus green colored buttons comes to mind as Kerry Butlers wrote about recently.

    When a user is trying to do something in your app, typically red means something will be deleted, or data changes canceled, or something else destructive will happen. In my opinion, every other color is up for grabs, but red tends to mean something will be lost or removed.

    That being said, when a user thinks they are trying to do something such as delete a playlist, you might pop up a dialog with green and red buttons. Even without thinking they will likely jump to red and click because they think red means “danger, playlist will be deleted”.

    In reality, the user is giving an explicit command to delete something, and green typically means ‘perform that thing I want to do’. So technically, when a user says ‘delete this playlist’, it would be the green button to affirm what they want, while red would actually mean ‘cancel what I requested’. If a user were working just on visual cues, and red means ‘destroy something’, they may click red thinking the playlist would delete, but in fact it’s still there.

    I know some have given up this battle and make all buttons the same color. I used to have a red ‘Delete’ button in my email app, but now all the buttons are the same color and style. I actually miss the visual color cues, now I waste a second making sure I’m clicking Delete and not Junk or something else.

    Be careful you don’t make all your buttons/icons TOO similar because you only gain visual conformity at the expense of visual distinction. Visual distinction is better, as visual and muscle memory learn positions and colors before they learn to read text. It’s so much faster to whip up and click the red button than it is to try and pick the command I want among 10 other commands which all have identical icon colors and styles.

    Another visual cue is common positioning, as mentioned earlier about the Exit or About commands. People are used to having minimize/maximize/close on the top-right of the app (in Windows). But Close is on the top-left in ElementaryOS and Mac, but is on the right for Linux MINT and other distros. Notice, though, that in both Mac and Windows and Linux, Close is the furthest option to the edges.

    People are used to Okay/Confirm/Go/Yes to be on the left side of things, and Cancel/Delete/No to be on the right side. Or the Save/Confirm on top and Cancel on bottom.

  3. How I Set Up My Development Machine on Windows

    Every developer is different. This article is not an explanation of what is “best” or what you “should” do, it is simply a look at one developer’s tools. I work with PHP, HTML, MySQL, CSS, and JavaScript, so pretty par-for-the-course web development here.

    SitePoint recently published an article on a similar theme, minus the “in Windows” part, written by Shaumik Daityari. He uses Ubuntu as his development machine, so I thought it would be nice to review a similar setup from the Windows side of things.

    A Fresh Install

    I’m going to assume I have a fresh install of Windows 7 Pro and starting from scratch. I use Ninite to install all my favorite tools on a new machine. These include the latest browsers, as well as:

    These are some of the programs I install, but there are many more non-dev-related programs to fetch as well. If you haven’t used Ninite to setup a new machine, you’re missing out, it makes the process so much easier!

    Getting ready to install programs with Ninite

    About the Basic Tools

    As mentioned, I install all browsers so I can test locally on each one. There are web services that will show you how your project renders in different environments and on older browsers, if need be. You might want to check out BrowserShots or Browserling for multi-browser rendering. They both have free tests you can run.

    FileZilla is for my FTP needs, Notepad++ is my general text editor to replace Notepad in Windows (I also use a plugin to edit Hex files.

    WinSCP is a tool for working in the filesystem of my Linux servers over SFTP with a visual drag-n-drop interface, and PuTTY is my remote console SSH tool.

    I use 7-Zip for compressed files, Greenshot for taking screenshots and annotating them, and Dropbox is where I keep a lot of files of individual clients with invoices, spec sheets, server and hosting information, to-do lists, training material, and a lot of other data. I also use Dropbox to share screenshots and files.

    I’ll also mention Evernote as a brilliant note-taking application.

    Special mention are the following handy tools: ColorMania, jRuler, and of course Firebug for Firefox.