Building Graphical User Interfaces - Introduction and Overview

The Graphical User Interface is the single most influential factor affecting the user experience and perhaps the most important part of an application. Often applications are judged by the way they look and feel, and this is even more so when it comes to the Web. The way that an application's functionality and data are organized and presented to the end user is of vital importance.

Many of the recent new technologies on the Web have been developed specifically to enable web applications to provide a better user experience. Rich Internet Applications (RIAs) have the most sophisticated user interfaces. Amongst the most notable RIA technologies are Ajax, Flex, Silverlight and JavaFX. Morfik has chosen to use Ajax due to it being native to the browser and not requiring special plug-ins or software to be installed either on the user's machine or within the browser.

This choice has proven itself to be a sound one with the growing user base of mobile devices running Apple's iPhone OS which doesn't support any kind of browser plugin, at this time.

Web user interfaces

At the time when Windows offered a new user experience on the desktop, many traditional application developers dismissed it on the basis that it did not bring additional functionality, and as such it did not warrant the considerable effort required to write Windows applications. Even worse were those who ported their applications to Windows but kept the old DOS-based command-line user interface. What they failed to recognize was the importance of the new graphical user interface paradigm and its impact on users' choice of applications.

We now have the same situation for the Web, but on a grander scale. Far beyond the traditional users of desktop applications, the World Wide Web has become the new computing platform for the masses. Once again the user interface becomes one of the most challenging aspects of this new platform. Application developers are again facing the same dilemma. Contrary to popular belief amongst desktop application developers, the ultimate user experience for a web application is not necessarily created by reconstructing the desktop experience on the web. Attempts to do so have often had disappointing results.

Unlike desktop applications, where functionality is the primary consideration, in web applications the content is the focus. In web applications functionality is built around content. As such, content drives the design of user interface on the web. Think about the websites you visit. What do you find there? Content. Now think about the desktop applications you use. You use them to complete tasks. A web application needs to provide functionality while looking like a brochure.

A page is perhaps the most important metaphor on the Web. The role of the page in a web application is the same as the role of a window in a desktop application. The layout of a web application needs to have a certain degree of fluidity so that the layout can change in response to changes in content. In contrast, scrollbars are the only way to deal with the variability of content in desktop applications. Although scrollbars can be used inside a web page, their use is generally discouraged and limited to specific controls such as list boxes and comboboxes.

Figure 1 A typical desktop application (Photoshop) versus a typical web application (Facebook)

The content-driven nature of the page layout poses a serious challenge to the conventional desktop tools for building user interfaces on the Web. The failure of the traditional user interface design tools is so great that most web developers have come to the unfortunate conclusion that a text editor is the best tool for designing web user interfaces! One of the main reasons for this is that under the conventional approach, the functionality of user interface and its graphical design have to be built using two different types of tools. Every time there is a change in one domain a tedious manual process must follow to transfer the changes over to the other domain and vice versa.

Morfik has recognized this challenge and has built a development tool that makes creating web applications a whole order of magnitude more efficient than what can be achieved by conventional tools. Morfik achieves this through combining graphical design and visual programming into one tool as well as having developed a special technique that allows for WYSIWYG design of user interface with absolute positioning while maintaining the necessary degree of flexibility at run time.

Steps involved in building graphical user interfaces in Morfik

There are three distinct phases involved in designing user interfaces in Morfik. In each phase there are a number of activities that you must carry out to achieve the design objectives.

These phases are:

  • building the structure of the application user interface
  • adding content, behavior and interactivity
  • enhancing the appearance of the application user interface.

While there are some overlapping aspects to these phases, they present distinct parts of the design process and should be treated separately.

Building the structure

The structure of an application user interface relates to page layout and the organization of functionality within an application. The building of a primary navigational framework is also part of this phase in the design process. The focus is high-level application flow with the goal of allowing end users to get the information and functionality they need quickly and efficiently, without frustration.

The main activities involved in this phase are:

  • choosing the right layout for your application
  • using Pages to structure your application user interface
  • building navigation menus and organizing your application's functionality.

Adding content, behavior and interactivity

In this phase, you will be engaged with connecting user interface elements to various data sources within your application as well as defining behavior and interactivity for your application user interface elements. Most activities can be accomplished without coding. There are, however, situations where coding may become necessary. The goal at this stage is not to develop the functionality or the content for your application; the aim is simply to hook up to the existing functionality and content that have already been defined within your application to user interface elements.

The main activities involved in this phase are:

  • working with Forms to add behavior and content to your application
  • using Controls and Widgets to add interactivity and display content
  • controlling the layout of your application.

Enhancing the appearance

In this phase you will be engaged with adding graphical effects to enhance the presentational quality of your user interface. Simply said, the aim is to make your application look good! In practice, this phase is more challenging than it might appear in the first instance. The hallmark of a professionally designed user interface from a graphical design point of view is its consistency throughout the application. Keeping a consistent look and feel across many pages and over the length of product development cycle is certainly a challenge not to be underestimated.

To make this challenge easier, Morfik has introduced Themes and Styles as part of the graphical design system. Using Themes and Styles you can control the appearance of your application at a global level rather than having to deal with the individual appearances of various controls.

The main activities involved in this phase are:

  • adding Graphical Effects to enhance presentation
  • maintaining consistent presentation through use of Themes and Styles.

Related Topics

Back to top