Accessibility

Table of Contents

Designing for Flex – Part 3: Structuring your application

Entry points

In well-designed Flex applications, the first screen your users see communicates how they can accomplish their primary goals. To do this, your application must have good entry points. To return to the house analogy, your application’s entry point is its front door. It’s critically important that it be both inviting and immediately straightforward to use.

All users come to applications with a certain goal or set of goals in mind. The best entry point, therefore, is a clear, uninterrupted pathway towards that goal. Anything that gets in the way of the users’ goal, whether it’s a “skip intro” movie, a difficult-to-navigate home screen, or any other distraction results in a poor initial experience.

checkmark

Design your application’s entry point to present useful tasks or information that clearly relate to your users goals with no interaction required on their part.

The best way to reveal this pathway depends partly on your application’s primary structure. For applications that are primarily information-structured, use a meaningful display of the application’s content as your entry point. Most online stores get this right; they display a sampling of their wares immediately rather than forcing visitors to provide filter criteria on the type of product they’re looking for. Never show a blank screen and demand filter criteria before showing users one bit of content. Imagine an online store that forced you to fill out a long form or navigate a deep store directory before showing you anything. Such a system would be annoying to use; you came to find products, not to wander around the website. (Imagine if a physical store hid its goods in a back room and required you to describe what you want to the shopkeeper. Would you shop there?)

checkmark

Immediately present relevant content to your users for an information application’s entry point.

Amazon.com displays a set of relevant products as soon as you arrive at its home page. Although your application may not implement a relevance engine as complex as Amazon’s, consider how you can display more relevant content immediately, without asking the user to provide any information before seeing it.

Figure 9. Amazon.com displays a set of relevant products as soon as you arrive at its home page. Although your application may not implement a relevance engine as complex as Amazon’s, consider how you can display more relevant content immediately, without asking the user to provide any information before seeing it.

Whenever possible, tailor the type of information you present based on the context the user is in. For example, if you are designing a mapping application and the user has frequently expressed interest in nightclubs before, you might display nightclubs on the map by default. In some cases you may need to ask the user to provide some additional context using a process structure before you can display anything useful. For example, airline booking systems typically need to know some details of your travel plans before they can show you a meaningful list of flights. Keep these details as few as possible and infer as much information as you can from context (for example, the airline system could guess at the user’s home airport based on their IP address or previous entries). More information is available in the Providing starting points section of Designing for Flex – Part 8: Making your application fast.

Yahoo! Maps infers the location of the city you live in from the addresses you provide it with. Once you’ve given it your home address, it uses this information to provide an even more specific entry point.

Figure 10. Yahoo! Maps infers the location of the city you live in from the addresses you provide it with. Once you’ve given it your home address, it uses this information to provide an even more specific entry point.

Well-designed information applications provide information in a form that is easy to understand and draw inferences from. The entry point is your application’s first chance to show off this value. Be as informative as possible as soon as possible; this will invite your users to provide you with more information to get more detailed results.

If your application primarily takes a process approach, make it easy for users to locate the task flows that interest them. Your entry point should provide a clear list of the tasks the application supports, described in the user’s language. For example, the automated teller kiosk of a bank generally allows you to withdraw money, deposit money, and check your account balance. So the first screen you see after inserting your bank card prominently lists each task; you simply select the one you wish to perform and you’re on your way.

checkmarkClearly list the tasks your application supports for a process application’s entry point.

The Fidelity Mortgage Search application uses a task list as its entry point.

Figure 11. The Fidelity Mortgage Search application uses a task list as its entry point.

Some applications must merge process structures with information structures. For example, many online banking websites display an account summary alongside a list of tasks such as “pay bills” and “transfer money”. These two can co-exist, but ensure that your information display requires minimal interaction, or that the interaction is performed in-context and doesn’t require lots of extraneous controls. This chrome distracts users from the tasks themselves, which may be the primary reason they visited the site.

If your application primarily follows a creation-structured approach, you have a difficult job to do. Like information applications, the first thing the user sees should be the content they will be working with. But this is a chicken-and-egg problem; the user hasn’t created anything yet. If the user’s goal involves manipulating some existing piece of content, load up this content as a starting point, either by pulling it automatically from an available database or asking the user to provide it. For example, a document editor may display a list of recently edited documents for the user to choose from. If your user has no existing content of their own, consider providing pre-existing content for them to start with—a template or sample for them to modify. Building on top of pre-existing work is always easier than starting from scratch.
.

checkmark Provide a way to start with existing work for a creation application’s entry point.

Regardless of your chosen structure, ensure that literally the first thing the user sees upon loading your application is a viable entry point that points them towards the completion of their goal. Perhaps the most common entry point is a log-in screen, but log-in screens make horrible entry points from the user’s perspective. They communicate “identify yourself or I refuse to deal with you.” Some applications must be so secure that they can do nothing until the user proves his identity. However, most applications, although they may contain some sensitive information, can do many things before asking the user to log in. Defer log-in requirements until they are absolutely necessary, such as if the user must save data to the server (even then, consider using a browser cookie instead) or access sensitive information such as credit card or address data. Fortunately, most e-commerce sites have figured this out already and never require a logon until it’s needed. You should strive to ensure that your applications follow their good example.

Kuler allows you to browse other users’ color schemes and even create your own without ever asking you to log in. You only need to log in to an account to publish themes for others to view.

Figure 12. Kuler allows you to browse other users’ color schemes and even create your own without ever asking you to log in. You only need to log in to an account to publish themes for others to view.

Another example of a poor entry point is a “Loading…” screen that stays up for several seconds, which is unfortunately all too prevalent in Flex applications. Avoid long loading screens by delaying the download of unnecessary application sections and data. More information appears in the later article, Designing for Flex, Part 7: Making Your Application Fast.