User Interface Design in ICEfaces 1.8: Part 1

Exclusive offer: get 50% off this eBook here
ICEfaces 1.8: Next Generation Enterprise Web Development

ICEfaces 1.8: Next Generation Enterprise Web Development — Save 50%

Build Web 2.0 Applications using AJAX Push, JSF, Facelets, Spring and JPA

£18.99    £9.50
by Rainer Eschen | November 2009 | AJAX Java Web Development

In this article by Rainer Eschen, we will take a look at what a desktop-like presentation means to modern web applications. We will learn the design principles and start with a common page layout based on the Facelets templating.

Before we take a more detailed look at the ICEfaces components, we will discuss the desktop character of modern web applications in this article. Desktop technology  is about 40 years old now and there are best practices that can help us in our web application design.

An important part of the user interface design is the page layout. We will have a look at the corresponding design process using a mockup tool. The Facelets example will be extended to show how to implement such a mockup design using Facelets templating. Finally, we will have a look at the production-ready templating of ICEfusion.

Revival of the desktop

The number of desktop-like web applications is growing faster and faster. The demand for this is not a big surprise. Using full-featured desktops meant that users had to suffer from the limited-user model of the first generation Web. This usage gap is now filled by web applications that mimic desktop behavior.

However, there is a difference between the desktop and the Web. Although equipped with desktop-like presentations, web applications have to fulfill different user expectations. So, we have a revival of the desktop metaphor in the Web context but it is mixed with user habits based on the first decade of the Web. Nevertheless, the demand for a purer desktop presentation is already foreseeable.

If you primarily followed the traditional web programming model in the past, namely the request-response pattern, you may first have to shift your mind to components and events. If you already have some desktop-programming experience you will discover a lot of similarities. However, you will also recognize how limited the Web 2.0 programming world is in comparison to modern desktops.

The difference is understandable because desktop design has a long tradition. The first system was built at the end of the 1960s. There is a lot of experience in this domain. Best of all, we have established rules we can follow. Web design is still a challenge compared to desktop design.

Although this article cannot discuss all of the important details of today's desktop design, we will have a quick look at the basics that are applicable to nearly all user interface designs. We can subsume all this with the following question: What makes a software system user-friendly?

Software ergonomics

Have you ever heard of the ISO standard 9241, Ergonomics of Human System Interaction (http://en.wikipedia.org/wiki/ISO_9241)? This standard describes how a system has to be designed to be human-engineered.

There are a lot of aspects in it, from the hardware design for a machine that has to be used by a human to the user interface design of software applications. A poor hardware or interface design can result in not only injury, but also mental distress that leads to wastage of working time. The primary target is to prevent humans from damage.

The most important part of ISO 9241 for software developers is part 110, dialog principles. It considers the design of dialogs between humans and information systems with a focus on:

  • Suitability for the task
  • Suitability for learning
  • Suitability for individualization
  • Conformity with user expectations
  • Self-descriptiveness
  • Controllability
  • Error tolerance

We will take a deeper look at these later.

ISO 9241-110 has its roots in a German industry standard based on research work from the early 1980s. I frst had a look at all this during a study almost 20 years ago. Most interesting with part 110 is the stability of the theoretical model behind it. Independent of the technical advances of the IT industry in the last two decades, we can still apply these standards to modern web application design.

Challenges

The principles of ISO 9241-110 can help you to get better results, but they only serve as a rule. Even if you follow such principles slavishly, the result will not be automatically valuable.

Creating a useful interface is still a challenging business. You have to accept a process of trial and error, ask for customer feedback, and accept a lot of iterations in development before usability becomes your friend.

The technical limitations that derive from your framework decisions can be additionally frustrating. The problems that we have with today's AJAX technology are a good example of it, especially if you are already experienced with desktop development and its design rules.

Apply Occam's razor

Everything should be made as simple as possible, but not simpler.

Albert Einstein's quote mentions two important aspects in creative processes that are also true for user interface design:

  • Reduction
  • Oversimplification

Reduction

Have you ever realized how difficult it is to recognize what is important or necessary, and what is superfluous when you enter a new domain? Often, things seem to be clear and pretty simple at the first sight. However, such a perception is based on experiences that were made outside of the domain. There is a lack of essential experiences in a majority of the cases. You may have to invest several years to get the whole picture and develop an accurate understanding before you come to an adequate decision.

If your new domain is user interface design, these findings can help you to understand your customers better. If you keep questioning the eye-catching solutions that come to your mind and try to slip into the customer's role, you  will get better results faster.

Oversimplification

Oversimplification makes user interfaces more complex to use. This phenomenon arises if the target group for a user interface is defined as less experienced than it is in reality. For advanced users, a beginner's design is more time-consuming to use.

In many cases, it is assumed that a bigger part of the users consists of beginners. However, reality shows us that advanced users make up the bigger part, whereas beginners and super users may have a portion of up to 10% each.

Designing a user interface for beginners that can be used by all users may be an intuitive idea at first sight, but it is not. You have to consider the advanced users if you want to be successful with your design. This is indeed an essential experience to come to an adequate decision.

User interface design principles

Besides the aforementioned recommendations, the following are the most influential principles for an adequate interface design:

  • Suitability for the task
  • Self-descriptiveness
  • Controllability
  • Conformity with user expectations
  • Error tolerance
  • Suitability for individualization
  • Suitability for learning

    Suitability for the task

    Although it seems to be a trivial requirement, the functionality of a web application seldom delivers what the user requires to fulfill his needs. Additionally, the presentation, navigation, or lingo often does not work for the user or is not well-suited for the function it represents.

    A good user interface design is based on the customer's lingo. You can write a glossary that describes the meaning of terms you use. A requirements management that results in a detailed use case model can help in implementing the adequate functionality. The iterative development of interactive user interface prototypes to get customer feedback allows finding a suitable presentation and navigation.

    Self-Descriptiveness

    Ergonomic applications have an interface design that allows answering the following questions at any time:

  • What is the context I am working in at the moment?
  • What is the next possible step?

The answers to these questions become immediately important when a user is, for example, disrupted by a telephone call and continues his work after attending to it. The shorter the time to recognize the last working step, the better the design is.

A rule of thumb is to have a caption for every web page that describes its context. Navigational elements, such as buttons, show descriptive text that allows recognizing the function behind it. If possible, separate a page into subsections that also have their captions for a better orientation.

Controllability

Applications have to offer their functionality in a way that the user can decide for himself when and how the application is fulfilling his requirements. For this, it is important that the application offers different ways to start a function. Beginners may prefer using the mouse to select an entry in a pull-down menu. Advanced users normally work with the keyboard because hotkeys let them use the application faster.

It is also important that the user must be able to stop his/her work at any time; for example, for a lunch break or telephone call, without any disadvantages. It is not acceptable that the user has to start the last function again. With web application, this cannot be fulfilled in any case because of security reasons or limited server resources.

Conformity with User Expectations

User expectations are, maybe, the most important principle, but also the most sophisticated one. The expectations are closely connected to the cultural background of the target group. So, the interface designer has to have a similar socialization.

We need to have a look at the use of words of the target language. Although target groups share the same language, certain terms can have different meanings; for example, the correct use of colors or pictures in icon bars is pretty important because we use these in contexts without extra explanation. However, there are cases when a color or an image can mean the opposite of what it was designed for.

The behavior of an application can also be a problem when it differs from the standards of real-world processes. The advantage of standardization is an immediate understanding of processing steps, or the correct use of tools without education. If an application does not consider this and varies, the standard users have to rethink every step before they can fulfill their duties. This needs extra energy, is annoying, and is pretty bad for the acceptance of the application in the long run.

If we look at the design itself, consistency in presentation, navigation, or form use is another important part. The user expects immutable behavior of the application in similar contexts. Contexts should be learned only once, and the learned ones are reusable in all other occurrences. Following this concept also helps to reuse the visual components during development. So, you have a single implementation for each context that is reused in different web pages.

ICEfaces 1.8: Next Generation Enterprise Web Development Build Web 2.0 Applications using AJAX Push, JSF, Facelets, Spring and JPA
Published: November 2009
eBook Price: £18.99
Book Price: £30.99
See more
Select your format and quantity:

Error Tolerance

User acceptance also suffers if a user model does not allow mishandling of the application. The trial and error process that the user follows during the study of an application's behavior has to be error-tolerant.

It is a fact that we cannot write error-free code. User interface designers have to respect this, else they will lose user acceptance and user motivation. However, even if you have a focus on this, you skate on thin ice.

Today, it is debated as to whether an application has to show error dialogs at all. The user's frustration grows with every presentation of an error. So, if you cannot give up certain error dialogs, keep in mind that the user cannot recognize why the error occurred until your dialog box presents corresponding information. It is also important to tell the user what the next step to do is. Maybe he has to retry a function or change the last input, but there are also cases in which an administrator has to be contacted.

For this, also deliver the contact data in the error dialog to keep the time to solve a problem as short as possible for the user. It is pretty annoying if the contact data has to be searched inside the application, or even worse, in printed handbooks or other kinds of documentation that are not in direct access to the user.

Basically, it is a good idea to use defaults where possible and assume certain standard behavior of users. This helps in avoiding error dialogs. If you combine this with the corresponding personalization features, the user will be quite happy with your interface design.

Suitability for Individualization

The user performance also depends on the flexibility that an application offers. The more the application can be adapted to individual solution strategies, the faster the user can produce a result. This helps to get even better results.

However, it can be problematic to understand how an individual should be interpreted. Quite often, this cannot be precisely described from the customer side. If possible, try to take on the role of a user and simulate work with the user interface like you would do it in production. Working with the user interface helps to recognize inflexibilities. If you add more flexibility to the user interface, keep in mind that it becomes more complex. Finding the right balance is a process. So, do not stop with the first iteration.

Suitability for Learning

Nobody really wants to read long essays about how to use a web application. So, mostly, the user chooses the trial and error process to learn a new application. For this, the application has to be intuitive in its usage. It has to use the user's lingo. Additionally, it has to offer answers to questions that may come up during the usage of the application.

Modern applications offer different concepts for this. The most well-known is the context-sensitive help. Press a function key and you get information about what you can see in the application. For this, the context is calculated by the application and a corresponding help is selected in the end.

With technical progress, the text-heavy presentation of such help systems changes to a more multimedia-based content. Flash technology has pioneered this trend for the Web. Today, it is possible to add video and audio to the help system. Audio-visual presentations are more natural to users, and so we get a better benefit in shorter time.

The advances in computer-based training in the past allow a location and time-independent self-study of applications today. You can learn anything where you like and when you like. This allows the user to invest a minimal amount of time to become productive with an application.

Interface Layout

Before we can implement a user interface, we have to create a design. We can differentiate between:

  • The layout design: Defines the logical output sections of a web application
  • The navigation design: Defines how to use the web application
  • The skin design: Defines how a web application looks

Create drafts with a mockup tool

A pencil and a sheet of paper are the right tools to create the first draft. However, with more than one iteration, the redesign process becomes tedious. Even if you scan your paperwork and re-edit your design with a graphical editor, the process is not really handy.

Alternatively, you can use a Graphical User Interface (GUI) designer. A lot of IDEs deliver one, but if the result cannot be used in development, you invest a lot of time  for nothing. Often, you do not need so many details for the ongoing discussion with customers and other stakeholders.

There is a new category on the horizon that allows you to create simple designs very fast: mockup tools. These offer simplified graphical elements representing user interface components you can combine in an image.

One of the most appealing tools in this category is Balsamiq Mockup (http://www.balsamiq.com). The presentation is similar to hand-drawn pictures, and the selection of user interface components and their customization is pretty fast. Best of all, the results are very useful to describe which components have to be implemented in a single web page and how the presentation (for example, position or size) will look. Experience shows that the additional text can concentrate on the backend communication to describe what has to be shown and managed in the user interface. It is seldom that the mockup design itself has to be detailed through additional text.

Layout design

The following screenshot shows a typical layout for a desktop created in Balsamiq Mockup:

ICEfaces 1.8: Next Generation Enterprise Web Development

The web page is separated into:

  • Header
  • Main navigation
  • Content
  • Footer

Although a lot of designers in Europe prefer to show the main navigation on the left, we choose to present it on the top. This allows the design to be more desktop-like.

Header

In most cases, the header is a part of a company's corporate design. For this, it is a good idea to manage a graphic that covers the complete section. When we talk about skinning, you will recognize that the header is an integral part of brand recognition.

Main Navigation

Although the header follows traditional web design, the main navigation is more similar to desktop design. We use a common pull-down menu that offers the functionality of a web application. Besides this, additional icons offer global functions that should have direct access. This is a bit like the icon bar in a desktop application. However, it is not positioned under the pull-down menu to save space.

Saving space is one of the main differences between web design and desktop design. The browser, with its controls, already takes a certain amount of space that cannot be used for a web application. Additionally, the controls you get with ICEfaces are not as flexible in presentation as those normally used in desktop development. Although scrollable areas can be implemented, this is not comparable to the flexibility and usability of similar desktop components. With the current architecture of the Web, even AJAX cannot work wonders.

Content

The content section is the non-static part in this layout design. It is used for everything that has to be presented to the user. It may present:

  • Forms to manipulate data of the backend; for example, for administration purposes
  • Informational pages that show, for example, tables of data records for certain system objects
  • More complex and interactive components that may allow a prompt result, such as a GoogleMap presentation

Web applications always present their content in the same window. The desktop, instead, allows us to use dialogs with a caption. This allows a better self-descriptiveness. Even modern web applications do not follow this presentation. There is no tradition in the web world for using dialogs, and user expectations are actually different.

Although the HTML <title> tag allows us to set a kind of caption, visually, it is never near the content it stands for. So, we need something better. There is the breadcrumb idea, a line of links that is a mixture between navigation history and caption. The caption is presented through the last link in the line. ICEfaces does not have a component for this, and managing this by hand can become a maintenance  nightmare. If you try to be as near to the desktop presentation as possible, using  a breadcrumb alongside a pull-down menu, this will deliver an inconsistent navigation. You may face some trouble with user expectations because of this.

A good alternative is to use a tabset. The caption can be set in the tab title. The tab frame itself delivers a visual grouping of your content just like a desktop dialog does. Although this kind of presentation may be a bit unusual, it becomes pretty useful if you recognize it for navigation purposes. It is easier for the user to navigate through web pages with similar context through a tabset than through a pull-down menu. For this, you can combine different menu entries into a single one that presents a tabset when it is clicked on.

Footer

The footer is primarily used for status information; for example, the release number of the current deployment. Additionally, you can add your copyright. If you are bound by law to show information, for example, about the legal form of your company, the footer is the right place for links that show the information in the content section. The same is true for important information that has to be shown on every page, like a privacy policy, the terms of use, or a link to an about page.

>> Continue Reading User Interface Design in ICEfaces 1.8: Part 2

[ 1 | 2 ]
ICEfaces 1.8: Next Generation Enterprise Web Development Build Web 2.0 Applications using AJAX Push, JSF, Facelets, Spring and JPA
Published: November 2009
eBook Price: £18.99
Book Price: £30.99
See more
Select your format and quantity:

About the Author :


Rainer Eschen

Rainer Eschen has a degree in computer science. He looks back on more than 20 years of programming experience. Since 1994 he works as an IT professional with a focus on consulting and architecture. He has also been part of “the source” for three years, working as Sun Sales Support Engineer and Sun Java Center Architect at Sun Microsystems, Germany.

Books From Packt

JBoss AS 5 Development
JBoss AS 5 Development

GlassFish Administration
GlassFish Administration

JBoss RichFaces 3.3
JBoss RichFaces 3.3

RESTful Java Web Services
RESTful Java Web Services

DWR Java AJAX Applications
DWR Java AJAX Applications

Spring Persistence with Hibernate
Spring Persistence with Hibernate

Pentaho Reporting 3.5 for Java Developers
Pentaho Reporting 3.5 for Java Developers

JasperReports 3.5 for Java Developers
JasperReports 3.5 for Java Developers

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software