The next and probably last blog post about the user interface before getting to technical issues again is about the main windows, after we've already spend some time on information, confirmation and error dialogs.
Our starting point here was to look out for visual arrangements that would reflect systems standards, but are individual at the same time. Creating a GUI (graphical user interface) that follows standards is a basic requirement by anyone who believes in ergonomics. Using standard interfaces should help the user into an intuitive usage where things do what he expects them to do.
One issue about standards are custom controls. An application should only include those window controls (buttons, menus, lists, &c.) that the system offers. Items like flat buttons may look cool and individual for a short while, but they're really just an expression that individuality is restricted to tricks, costing the user comfort, and, similarly important, performance (noticeable on older machines at least). And while I have to admit our old user interface might not be the best example for that, we've at least tried to refrain from custom controls and skin engines where not necessary.
For Spybot 2.0, we tried to look for a more up to date visual concept than the old Outlook style was. The logical consequence was to look at Vista. You might or might not like Vista, but when you want to follow user interface guidelines, the official ones from the OS company are probably the best choice since they should be widely spread (even though I often have the feeling that they're globally ignored). This first led to the Vista-style dialog decisions posted earlier, and was used in designing main windows as well. Official Vista application windows often prefer a structure of horizontal tiles,
The huge navigation list at the left is now gone, since it was too demanding by offering a huge list of options in advanced mode, which made the mode switching necessary (something we wanted to get rid of as well).
We first thought toolbars might find their way back to some windows, with the exact design still experimented with. And Office style ribbons are something we heard had quite a lot of positive feedback, but the funny blue office look just doesn't match a security application and looks to rogueish.
In the end, we thus decided for task bands like known from Windows Explorer that would show two boxes, one with direct actions, one with associated tasks the user might look for. The decision on the style of these task bands was a difficult one: they needed to be lighter and easy to distinguish from the old office bar to avoid any instance of false expectations of what could be found or not found there. A lof of the GUI was inspired by Vista, but in this case, the Vista style was to replace this with toolbar items in Explorer windows, and the existing task bands were to colourful to our taste and did not support as much structure. We therefore broke keeping in line there and decided for a lighter version of those task bands you know from XP.
To support keyboard users and users that have to depend on screen reader software, this task band has been mirrored into the main menu.
Which leaves one more thing, a central place to cover all the functionality, a place the user can use to select tools without coming from another tool, without having to select entries from the start menu, a kind of super menu to have only one desktop shortcut... you get the requirement I guess. Trying to look into modern concepts for such a thing, a few of us came up with something similar to the Vista welcome window. Which isn't such a new concept: windows to group program icons already existed in Windows 3.x, just were given up later. Of course the modern form has its advantages, among them the huge bar at the top we can use to display some important information like the date of the last update, various versions, on-access status, and more.
A collection of in-development screenshots (don't take them as final) can be found here.
Some interesting links on user interface concepts:
I promise next weeks blog post won't be about user interface stuff, but some technical details on another thing that needed improvement: the updater.
Our starting point here was to look out for visual arrangements that would reflect systems standards, but are individual at the same time. Creating a GUI (graphical user interface) that follows standards is a basic requirement by anyone who believes in ergonomics. Using standard interfaces should help the user into an intuitive usage where things do what he expects them to do.
One issue about standards are custom controls. An application should only include those window controls (buttons, menus, lists, &c.) that the system offers. Items like flat buttons may look cool and individual for a short while, but they're really just an expression that individuality is restricted to tricks, costing the user comfort, and, similarly important, performance (noticeable on older machines at least). And while I have to admit our old user interface might not be the best example for that, we've at least tried to refrain from custom controls and skin engines where not necessary.
For Spybot 2.0, we tried to look for a more up to date visual concept than the old Outlook style was. The logical consequence was to look at Vista. You might or might not like Vista, but when you want to follow user interface guidelines, the official ones from the OS company are probably the best choice since they should be widely spread (even though I often have the feeling that they're globally ignored). This first led to the Vista-style dialog decisions posted earlier, and was used in designing main windows as well. Official Vista application windows often prefer a structure of horizontal tiles,
- with a header with instruction and a few sentences at the top, quite like experienced in dialogs,
- followed by a main data area (sometimes with a toolbar as an additional header), often a modern listview control,
- an information panel and/or,
- buttons at the bottom.
- Additionally, windows might have a task list area at the left.
The huge navigation list at the left is now gone, since it was too demanding by offering a huge list of options in advanced mode, which made the mode switching necessary (something we wanted to get rid of as well).
We first thought toolbars might find their way back to some windows, with the exact design still experimented with. And Office style ribbons are something we heard had quite a lot of positive feedback, but the funny blue office look just doesn't match a security application and looks to rogueish.
In the end, we thus decided for task bands like known from Windows Explorer that would show two boxes, one with direct actions, one with associated tasks the user might look for. The decision on the style of these task bands was a difficult one: they needed to be lighter and easy to distinguish from the old office bar to avoid any instance of false expectations of what could be found or not found there. A lof of the GUI was inspired by Vista, but in this case, the Vista style was to replace this with toolbar items in Explorer windows, and the existing task bands were to colourful to our taste and did not support as much structure. We therefore broke keeping in line there and decided for a lighter version of those task bands you know from XP.
To support keyboard users and users that have to depend on screen reader software, this task band has been mirrored into the main menu.
Which leaves one more thing, a central place to cover all the functionality, a place the user can use to select tools without coming from another tool, without having to select entries from the start menu, a kind of super menu to have only one desktop shortcut... you get the requirement I guess. Trying to look into modern concepts for such a thing, a few of us came up with something similar to the Vista welcome window. Which isn't such a new concept: windows to group program icons already existed in Windows 3.x, just were given up later. Of course the modern form has its advantages, among them the huge bar at the top we can use to display some important information like the date of the last update, various versions, on-access status, and more.
A collection of in-development screenshots (don't take them as final) can be found here.
Some interesting links on user interface concepts:
- Microsoft Windows XP Guidelines for Applications
- Microsoft Vista User Experience Guidelines
- Interface Hall of Shame
- SSW Rules to Better Interfaces
I promise next weeks blog post won't be about user interface stuff, but some technical details on another thing that needed improvement: the updater.
