Visual Direction and Balance in MiniApp Design

By Esther Blankenship, SAP User Experience, SAP AG – August 1, 2000

Disclaimer: Please note that this edition was written in 2000. Therefore, statements in the articles, particularly those regarding SAP's products, product strategy, branding strategy, and organizational structure, may no longer be valid.

"Men say that a thing is beautiful when its parts are related to each other as they ought to be, because pleasure results from their harmony."

- Dante Alighieri, from the Convivio

Many of the rules of interaction and visual design that apply to web sites and other applications are also applicable to the design of MiniApps. Because space is an especially precious commodity, and because screen changes are not allowed, MiniApp design has some special requirements. In this article, we will examine visual balance and interaction flow, that is, how a developer can group and arrange elements on the screen to create an intuitive, effective, and attractive design.

 

An Example from the Web

Recently, I was reading an article online from a leading news organization in the United States. Included in the article was a link to a photo gallery. The following is a schematization of what I saw:

Schematic illustration of the original design

Figure 1: Schematic illustration of the original design

I looked at the photograph for a while. Then, ready to check out the next photo in the gallery, I instinctively moved my cursor to the bottom right-hand side of the photo, but there was no link there. I glanced at the left-hand side; I found a "Back to Article" link, but I didn't want to go back yet. I wanted to see the next photo. I tried clicking on "Contact Sheet," but it was an overview of all the photos. I wanted to view each photo individually. Where could it be? I looked to the upper right-hand portion of the screen, but there was no link to be found there either. I almost gave up when I finally spotted it - hiding underneath the logo at the top left! I was a bit uncertain - "Next," well, I guess that means "next photo." Finally, that was it.

By simply repositioning the elements on the page, the design would be much more intuitive. In my example of a better layout for this web page, I've placed the "Next" link to the bottom right-hand side of the photo. And, because like things should be grouped together unless there is a compelling reason to do otherwise, the other links, "Back to Article" and "Contact Sheet," should be located near the word "Next".

 

Giving Your MiniApp the Right Direction

One of the tasks of interface design is to group elements effectively. In most cases, the direction of the interaction with these groups of elements should imitate the act of reading and flow from left to right and top to bottom (assuming that the language of the target audience reads in that direction).

A Simple Example

The following interface for a MiniApp that translates text from one language to another applies this "reading rule." The interaction starts at the top left. Once there is no more room to the right, the interaction continues below the previous "row" of elements and begins again at the left.

Text translator MiniApp

Figure 2: Text translator MiniApp

Translator MiniApp with interaction steps numbered

Figure 3: Likely user interaction with the text translator MiniApp

Here is a scenario for the steps indicated in figure three: The user has some text in English that he wants to translate into Spanish.

  1. Since the text is foremost in his mind, the first thing he does is type or paste the English text into the entry box. (The statement in the entry field, "Enter your text here," disappears as soon as the user places the cursor in the field.)
  2. Since the user wants a source and target language other than the ones that appear by default, he chooses English to Spanish from the dropdown box. (Most people tend to translate to and from the same two languages. It makes sense, therefore, to allow the user to personalize the MiniApp to propose a certain language combination by default.)
  3. The user indicates that he has entered all the necessary information by clicking "Translate."
  4. Because there is no more space to the right of the "Translate" button, it is natural for him to look down and to the left for the results.

Some of the most popular translation applications on the Web (see Systran or Babel Fish, for example) offer steps one through three on the initial screen. The results (step four) are then displayed near the top of the page in a new view, and the entry and selection fields reappear, but this time below the results. Because MiniApps do not permit this kind of view change, your design must allow for the results to appear directly in the MiniApp after the user has finished the main interaction. Since the result is the last step of the interaction, it is natural to place this information at the bottom of the MiniApp.

A Slightly More Complex Example

Let's look at our second example, a MiniApp that converts measurements.

A measurement converter MiniApp

Figure 4: A measurement converter MiniApp

Measurement converter with interaction steps numbered

Figure 5: Likely user interaction with the measurement converter MiniApp

Here is a scenario for the steps indicated in figure five: the user needs to know the equivalent of 12 square meters in square yards.

  1. The user chooses "Area" from the tabs at the top.
  2. Then she chooses "square meters" in the "Convert from" dropdown box.
  3. Moving the cursor to the right, she chooses "square yards" in the "Convert to" dropdown box.
  4. Moving down to the "Enter initial value" field, she enters 12.
  5. She is now finished entering all the necessary information, so she clicks "Convert."
  6. At the bottom of the MiniApp, she can read the entire calculation from left to right (including the initial measurement and value she entered) without having to shift her focus back up to the top of the MiniApp.

 

Doing a Balancing Act

In addition to directing the flow of the interaction appropriately, you should also consider the visual balance within your MiniApp. A well-designed MiniApp not only allows the user to work unimpeded from left to right in a downward trend, but also conveys a sense of equilibrium and proportion.

A Bottom-Heavy MiniApp

Clustering elements at the bottom of the MiniApp gives the impression that they are about to slide off the MiniApp at any moment. As the perceptual "center of balance" is somewhat above the middle of the vertical axis, a slightly higher concentration of screen elements in the middle and upper portions of the space available will create the impression of lightness and proportion.

A Lopsided MiniApp

Entry and output fields, text, graphs, charts, buttons, etc. should be distributed as evenly as possible on the left- and right-hand sides of the MiniApp. This is not to say that you must strive for perfect symmetry, but you should try to avoid large patches of empty space. The following example shows the same functionality as the translation MiniApp we saw earlier, but it is a bit heavy on the left-hand side and has a lot of empty space on the right-hand side. (Click here to compare both designs.)

Alternate design for text translator MiniApp

Figure 6: Alternate design for text translator MiniApp

Abstraction of alternate design for text translator MiniApp

Figure 7: Abstraction of alternate design for text translator MiniApp

A Balanced MiniApp

An abstraction of the measurement converter reveals that it is well balanced in terms of the distribution of screen elements on the left- and right-hand sides. Meanwhile, the bottom section has enough elements so as not to seem empty, while the slightly denser concentration of elements in the middle and top sections makes the MiniApp seem light.

The measurement converter MiniApp

Figure 8: The measurement converter MiniApp

 

Is Your MiniApp Headed in the Right Direction?

Design First, Code Later

A carpenter once told me to always measure twice and cut once. That was pretty good advice - before doing something that's hard to undo, make sure you're doing it right. I like to apply this idea to interface design - design first, code later.

If you are designing an application that has similarities to other applications, by all means try out those applications first. Look at them critically. Find the good and incorporate it into your design. Find the bad and avoid those same mistakes. Do everything you can to make your design the "best of breed."

Before you being developing a prototype for your MiniApp, get a stack of paper and some colored pencils. Sketch a few designs. Experiment with all the possibilities you can think of. Don't hold back! Number the steps the user has to perform right on the draft as done in the examples above. Then take a look at the direction of the numbers on your draft. The numbers should flow from left to right and top to bottom. If not, some reposition may be in order. Draw blocks around the elements on your MiniApp to find out if it is lopsided or bottom heavy. If your MiniApp has too much empty space, try using a smaller MiniApp frame or rearranging the elements. If you do not have enough space, first try reducing the functionality. Remember, MiniApps are supposed to be simple; they are not full-blown applications. If you still do not have enough space, then consider using a larger MiniApp frame.

Ask the Experts

It is crucial that you have other people look at your design sketches and discuss with them the benefits and drawbacks of each design. Once you have decided on a preliminary design, test it on end users. As much as you might like to believe the contrary, end users are the real experts on the usability of your MiniApp.

We tested both the translation and the measurement converter MiniApps on five end users. Both came out with 100% usability for those testers. Some of the other MiniApps we tested didn't fair quite so well, so they went back to the drawing board.

 

top top