Delivering training through the iPad is a recent trend, which scores high in coolness but low in standards. While the instructional design community is working hard to give us a set of rules to hold, and to break when appropriate, let’s borrow some tried-and-true conventions from other instructional media that have been around for decades, such as e-Learning.

Many criteria define online instruction effectiveness. For this article, I’ll focus on just one: the interface. Effective interfaces for online instruction elegantly balance navigational and orientation devices (such as headings and screen identification numbers) in such a way that the flow between screens feels natural and users know their options within the program at all times.

Effective interface design for the iPhone or iPad: Five questions

If you are now transferring content from existing e-Learning to the iPhone or the iPad (or maybe designing from scratch), it is worth taking the time to ask some serious questions about interface design. How do we create a learning mobile app so the interface is transparent and does not interfere with the learning process, but rather enhances it?

Effective interface design implies deciding what you need to show at one time and what you can withhold, de-emphasize, or obscure. Using industry-based standards for interface design (e.g., Jakob Nielsen’s design principles), the layout you build for your mobile learning app must enable users to answer these five questions:

  1. Where am I? You should answer this question via clear screen titles and subtitles and by emphasizing menu items that were already clicked (either by changing the color or attaching bookmarks).

  2. How did I get here? You should answer this question by enabling the presence of a visual trail between different content components. For instance, highlighting a section already clicked on a menu, or a screen that opens in a new window that still allows the previous window to be visible, or a “breadcrumb trail” to show the progress through several linear screens.

  3. How can I return to where I once was? Enable movement between learning units via navigational links. Some navigational menus are visible all throughout the course. Other interfaces provide Back buttons or Menu buttons to return to a map of choices. A simple tap on the screen can also reveal additional navigation options.

  4. How far have I gone? A screen ID such as “Screen 2 of 24” informs users how far they have progressed through a lesson and, even more important for some students, how much there is left to do. Refrain from using the word “page” as in “Page 3 of 15.” Pages are what you find in books; screens are what you offer online. Consider building small modules. Seeing “Screen 3 of 55” may be harder on the modern students’ gentle psyche.

  5. Where else can I go? Navigational buttons, when labeled clearly and placed conveniently, will serve as orientation tools throughout the mobile app.

Examples from real apps

The screen shots below exemplify screens from mobile apps that have a learning tint (they are available either in the Educational or Reference sections in iTunes). I’ve selected them with a simple research goal in mind: given a random screen in a learning app, how well (and how fast) could I find answers to the five navigation questions. To stay focused on navigation and not distracted by the content, I even selected apps in languages I don’t speak.

 

Example 1. Learning app on philosophy

tablet with e dropdown menu and choice of items

(Editor's note: Click on images to enlarge)

  1. Where am I? There is a screen title right above the video (right underneath the menu; it is obscured in this graphic).

  2. How did I get here? I clicked on one of the menu options available from the button titled Capitulos.

  3. How can I return to where I once was? I can click the menu button again and pick something else.

  4. How far have I gone? Looking at this one screen, I cannot tell whether there is anything else going on after this … so I assume there is nothing else. The standard for announcing multiple pages is to use tiny empty dots at the bottom and there are none on this page (Capitulos).

  5. Where else can I go? I can either click the menu button or the info button in the upper right corner. It’s fast to make decisions. Users appreciate designs that take about three eye movements to complete and comprehend.

Lessons learned: Keep the app simple, with few user-decision points. Title each screen with the exact title used in the navigational menu for consistency.

 

 

Example 2. Book app on Stockholm culture

tablet showing page of instructions

  1. Where am I? No idea. While this “app” is more like a book, there needs to be at least a chapter title.

  2. How did I get here? I clicked on the book icon in the upper left corner. The icon appears only when I touch the screen, and it already looks as if it’s been “depressed” or pushed in.

  3. How can I return to where I once was? I can click the book icon again to go to another chapter, or page back by touching the screen.

  4. How far have I gone? This is page 148 out of 248. Very useful information for the busy learner.

  5. Where else can I go? I can click the book icon to select another chapter.

Lessons learned: include at least a chapter title, if you’re creating learning apps in the shape of books (a trend I’ve seen increase lately). Include progress information (screen x of y). Design buttons so that they indicate whether they are depressed or have not been touched.

 

 

Example 3. Learning app on business and finance

tablet showing button and navigation controls

  1. Where am I? No idea. While this “app” is more of a promotional app, users should be able to tell quickly what sections they are viewing.

  2. How did I get here? I clicked on a “Test” button on the main screen.

  3. How can I return to where I once was? At first, I did not see the Stop Test button so I thought the only way to view the main page is to close the app and return. Then I realized that the Stop Test button did the same. A more intuitive label, such as Main Menu works much better.

  4. How far have I gone? I can tell there are 34 steps, (Why “steps” and not “questions?”) and I’ve completed five of them.

  5. Where else can I go? I can click the View Description button or the blue area at the bottom. Both options open a pop-up window.

Lessons learned: include a Back button or Main Menu option for all screens, and use an intuitive label. Reserve 80% of screen real estate for content and 20% for navigational options. In this instance, the navigation takes too much space compared to the content. If you click any of the answers in the question, you receive feedback for each of the four distracters in the same area, which means you have to scroll to view the feedback for option D. If you’re promoting your learning app by giving out free content (which is a great idea), ensure that the emphasis is on well-designed content and the navigation is transparent in the experience.

 

 

Example 4. Learning app on Java

tablet with a long dropdown menu and many selections

  1. Where am I? I am viewing a section on Variables (see title at the top).

  2. How did I get here? I selected this from a very large menu of options.

  3. How can I return to where I once was? I can click the button conveniently titled “Select a topic.” Notice that the topic I’ve selected is already highlighted, which can speed up new topic selection.

  4. How far have I gone? Not sure. It is not clear how much I’ve completed or to which main section this belongs.

  5. Where else can I go? I can go back to “Select a topic” and pick something else. Or I can click the icon with the arrow to print, or the cogwheel to change some settings (e.g. font size), or the down arrow to view more apps from the same company.

Lessons learned: It is advisable that the title of each page match the title listed in the navigation menu (e.g. Variables at the top and Variables in the menu). When you have a longer menu, invest in better programming so that the hierarchy displays in a more visually appealing way. In this example, there are three levels in the menu, denoted first by Roman numerals (I, I, III, etc.), then by 1, 2, 3, etc., and then by A, B, C, etc. It would be nice if the design used indentation correctly to show that at least the A, B, C, D were sub-sets. In the current version, that indentation is not available and the formatting is not proper (hanging indentation would be best). To decrease psychological burden on the learner, consider building a collapsible menu so that the main sections display first, then upon selection of a main topic, additional ones display. The menu in this current app has seven main sections and tons of sub-sections. Scrollable menus such as these look more like an index than a manageable and approachable menu (Oh, and always check typos, the one in this app has two number “VI” sections).

 

 

Example 5. App on … something…

tablet with Chinese characters

  1. Where am I? There is a title at the top, centered above the text (right where I was expecting to see one). I know it’s a title because I went to a different section and that title text changes.

  2. How did I get here? I clicked on a main interface, which had six different books or manuals.

  3. How can I return to where I once was? I can click the icon in the upper-left corner, which is where I was expecting to find a Back button.

  4. How far have I gone? Not sure.

  5. Where else can I go? I can use the arrows at the bottom to go from one page to another or pick the menu icon in the lower-left corner to view other chapters. If I bookmarked a page using the icon in the upper-right corner, I can use the Favorites icon in the bottom menu to view those pages.

Lessons learned: Indicate visual progress. Let’s try harder to find ways in which we can show not only screen numbers within a module or a chapter but progress within the entire course or context. One of the frustrating things for many learners in the online space is physical orientation: the feeling you have when you enter a store and you can tell how much of it you’ve covered and how much more there is to discover. “Feeling” the volume of an instructional offering is an area of research opportunity for all of us instructional designers.

 

Compromise when necessary – but wisely

As you can see, some screens provide answers to all five questions and some do not. Even if an app screen does not provide all the answers, it does not necessarily mean that the design is faulty. Remember: there is no such thing as an optimal layout. The ultimate interface of your learning app is likely to be a compromise between available time, money, content type, learner preferences, and design expertise.

Once you design an interface, it is wise to measure its effectiveness in quantitative terms. Gather a group of five to eight users (research shows that feedback after the eighth user is redundant). Ask them to use your app and monitor their performance in terms of these behaviors:

 

Criteria for mobile app interface efficiency

Time to complete a task

Relative efficiency compared to an expert user

Time to learn the navigational features

Time spent on correcting navigation errors

 

Repeat until finished

Fix issues that your feedback group reports and use an iterative design approach: gather another group of five to eight users and test the app again according to the same criteria; repeat until you’re satisfied with the progress and reaction.

As you embark on mobile app development, please treat any opportunity of content conversion as a scrutiny opportunity. Refrain from merely dumping electronic content into an app shell. This way, we all avoid betraying the mobile app’s potential as an instructional medium.