Horizons Application - GUI Design Sample

Overview

Horizons is a feature-rich, desktop application demonstrating sub-systems, layers, switched panels and many other design aspects with over 100 screens and component parts.

This entire prototype was created from scratch by a single designer in just 3 days.

Rather than invent a completely hypothetical example, the application is heavily based on Microsoft® Office Outlook®. This is a great application that has been the model for many other applications with its functional modes and task bar, etc.

The video is shrunk to fit this web site so it may be hard to see everything that's going on. Also, it doesn't show every aspect of the prototype. Download the Viewer and the project distribution file and explore the prototype for yourself and see how it was constructed.

Here's what our designer had to say...

"I was surprised at how much of the application design I managed to create in such a short period of time.

You can’t see it from the final video but the design was built up in stages, starting from an outline and gradually filling in the details. Initially, all the modes looked the same with just different title text and no content. Then, one by one, I worked on each mode and added features.

I love the ability to work in this way, making incremental changes to the design to flesh it out and being able to jump from one area to another to make tweaks.

At each stage, we looked at the design to see what needed further detail and clarification. During the process, many questions popped up like ‘what’s missing?’, ‘what’s this bit for?’, ‘how would we do such-and-such?’ and ‘does the flow work well?’.

I don’t know how long it would take for a developer to create a prototype to this level but, most of the time, it took me just a few minutes to duplicate screens and make changes.

I’m itching to get back on the project and expand on the bits I didn’t have time to complete!”

Things to note

1. The application is based around 5 functional modes: E-mail, Calendar, Contacts, Tasks and Goals.
2. The project is organised with common component folders and independent sub-systems for each mode. These could be tested and worked on seperately or seen in the context of the whole application. This would allow many designers to work on the same project.
3. Screen parts are exchanged within the design when switching between sub-modes. For example, the different Contacts views have different content screens. An extra trick is used here to overlay radio button groups to change their state.
4. Each mode uses the same basic top-level menu bar component with default pull-down menus and connected functionality. Modes use this as a base component but can override the drop-down menus. For example, the "Calendar" mode replaces the "Go" menu with date and appointment related menu items. Each mode also provides its own set of toolbar buttons and controls on top of the base component.
5. Multiple methods are available for accessing some of the functionality, such as top-level menus, context menus, toolbar buttons and toolbar drop-down menus.
6. Expansion and contraction of the structured tables (e.g. Contacts - View By Category) was very easy. The table and overlays were duplicated and very quickly modified to show the contracted state. This was then displayed on top as a modeless window to contract the group and closed to expand it again. In practice, it's a lot easier to create the expanded version first and then create the contracted one from that by deleting rows and shifting the overlays up.
7. Because the sub-systems operate as independent components, they remember their state. So, for example, switching to the "Contacts" mode will return to whatever View state it was last left at, and structured tables retain their expanded or contracted state.
8. Right-click context menus appear in some places. These use "Align to Mouse Cursor" anchors.
9. Some of the icons are not very pretty. The focus for this design project was speed of creation. Any existing icon that was "good enough" to convey the meaning was used directly. Where necessary, these were simply stretched to the required size rather than waste time creating better quality, larger versions. Where no existing icon was available, the integrated Icon Express editor was used to quickly create a new one.