I just tried Adobe Dreamweaver CS4 (trial version) in the hope that it was a step up from Dw8 which I have been using. I uninstalled immediately because of several quite hilariously epic GUI design failures. Apparently these limitations apply to most CS4 apps on PC but I only tried Dreamweaver.
Above is a graphic showing the menu bar that CS4 uses when maximised. Imagine this spanning the entire top edge of your screen (graphic is cut-down for brevity). Adobe’s design ignores built-in Windows standards, opting to use their own chrome to draw the windows, and thus reinventing the wheel. This alone would not imply failure, but Adobe’s replacement GUI has several consequences for usability, which can be better appreciated after a crash course in Fitt’s Law.
Fitt’s Law is a well-studied and accurate model which is considered fundamental to interface design, with applications extending well beyond GUIs (think TV remotes, light switches). In the context of a user moving a mouse cursor, it states that “the time required to rapidly move to a target area is a function of the distance to, and size of the target”. This seems like common sense, right? Bigger buttons are easier to click. Yet I continue to be amazed at the number of websites and apps which use minuscule buttons and GUI elements. There are a some notable exceptions, such as Microsoft Office 2007/2010 with its chunky ribbon buttons; and Vimeo, which also uses large GUI elements.
Fitt’s Law has a couple of important implications which have influenced GUI designs in popular operating systems. It’s used so effectively that we take for granted the added usability afforded by its application. It’s not until a dismal interface like CS4 comes along that we appreciate how much we depend on Fitt’s Law.
Edges
The edges of your screen are considered to have infinite size in their orthogonal direction. That is, you can shove your mouse to an edge very quickly and it effectively eliminates the vertical targeting dimension. It’s critical that edges are accessible at the outermost pixel (this is a common reason for edge implementation failure). Some examples of well-known GUIs which successfully exploit screen edges are:
- Windows Taskbar on bottom edge
- Windows minimise and restore buttons on top edge (maximised windows)
- Mac OS menu bar on top edge
- Mac OS dock on bottom edge (or sides)
- Tabs in Google Chrome for Windows on top edge (maximised windows)
Corners
The corners of your screen are considered to have infinite size in BOTH directions. Corners are the holy grail of targeting. This has led to the following innovations:
- Windows Start Menu is in the bottom left
- Windows close button in top right (maximised widows)
- Windows application menu in top left
- Windows 7 desktop toggle in bottom right
- Mac OS Apple menu in the top left
- Mac OS spotlight icon in top right
Adobe Epic Fail
Let’s revisit that menu bar. I’ve added approximate targeting overlays to illustrate how CS4 fails the edge and cornering implementation. Adobe’s complete disregard for Fitt’s Law was an irreconcilable deal breaker for me. For example:
- You can’t access any menus or the minimize/restore buttons using the top edge of the screen.
- You can’t access the close button using the top right corner pixel.
- You can’t double click the top edge of the title bar to restore the window (there is no title bar!).
- You can’t access the application menu using the top left pixel.
There are a few other failings not directly related to Fitt’s law, but still fairly epic (via Adobe forum).
- In Windows 7 it does not support “throw” gestures for window tiling due to custom chrome.
- In Windows 7 it does not support document window grouping and JumpLists due to non-standard implementation of document windows.
- It does not change appearance of title bar to indicate application is focused.
- Maximising a document window (inside the main app window) puts itself on top of the application window, obscuring access to the application window’s tools and commands.
The ultimate irony is that this is meant to be a suite of applications FOR DESIGNERS. I just don’t get it. So I’m back on trusty old Dreamweaver 8 for now.
Oh and here’s some fascinating related reading which any web or app designer should print out or memorise: Microsoft Windows User Experience Guideline Violations.
