Some sugestions for better app design By James Robert Watson, PhD A new medium Application (app) design for mobile devices is still in its infancy. Like web design, it will go through a transition shake-down as app designers learn and embrace the needs and limitations of the medium and how best to satisfy the users, especially those paying for an app. Designers shouldn't just translate web or print to small screen. App design objectives & considerations • Short download time • Minimal link access to pages • One finger/thumb operation • Easy navigation • Maximize live area • Minimal scrolling • Consistent layout on pages • Legible, readable typography • Visual appeal • Provide convenient links: map, website A better Weather Channel app 1. Make the low temperature timeline more visually accurate. The format to display temps in the app is a left-to-right sequence of time. However, the low temperatures don't adhere to this theme. The low temps are directly below the high temps (which is impossible - to have 2 different temperatures at the same time). Often, the low temp is in the early morning hours of the next day. Thoughtful: The Weather Channel color codes the temps - yellow for day/high/warmer and blue for night/low/cooler. But, to better convey the passing sequence, the low temps should be between the highs, as in the altered example on the right. The example below from another weather site conveys the high/low temps more clearly and more accurately. Lessons: Color coding information is an effective way to improve clarity. Consistency among graph timelines on a page enhance rapid communication. 2. Waste less space on the screen. On the site, when you tap a date, it expands to show the hourly temps and precip. But it only shows 3 hours worth. Notice how much space is wasted and used for useless information, primarily the unnecessary photo in the background at the top. Reducing that space and some at the bottom allows 7 hours to be displayed at once - over twice the number. This allows less scrolling by the user. Tip: Layout web/mobile sites to require minimal scrolling. Lesson: Assess the use of live area to see if its being used efficiently. The New York Times crosswords app The Times has established itself as a leader and authority in crossword puzzles. Its app for the iPad provides archives of puzzles and a user-friendly navigation on the puzzle page. However, the menu pages are not as well thought out. There are at least 6 pages of menus on the existing site: Notice how much space is wasted on several of those pages. The photo of the skyline is unnecessary as the Times is basically a national paper and the puzzle app is sold world-wide. The banner The New York Times doesn't need to be quite so large - the user already tapped the app and saw the loading screen. The user must also tap to other pages to get info. Improved app layout Those 6 pages shown above could be combined into just one. Here are two layout options: On the left is the app in a newspaper style layout with columns, photos, and text. The example on the right includes a column of menu items on the left. App users soon learn item and menu placement and procedures. They scan the menu to find what they are seeking. The single menu column makes that quite easy and comfortable. On the right side of the page are the puzzle calendar and a window for info from the various links: Putting all the links on one page minimizes links to other pages. Some of the menus can be combined to also reduce the number of links. While both options are an improvement over the existing app, the one on the right better exploits the medium of apps. It doesn't include gimmicky references to a newspaper: grey background and selvaged edges. Lessons: Embrace the new medium and design apps that reflect the technology. Avoid simply transferring the design principles from other media to the app medium. Side by side comparisons How to make the Red Roof app even better: minimize scrolling Two apps for motel sites. Well done. The main menu is contained within the home page. The Red Roof app home page: The main menu has two primary links, like in the two examples above, but, with Red Roof, the user must scroll down to see the second option. There is much wasted space: about 40% allotted to a useless photo of clouds and too much white space among all the elements. This one long page (requiring scrolling) could easily be tightened up to allow all the info to be contained on one home screen, as shown on the right. Lesson: See the design through the eyes of the end user. Consider their needs, desires, and habits. Tip: Determine the hierarchy of information. Make sure that unimportant elements don't hog too much space. The Voice Memos app With the introduction of the 3GS phone in June, 2009, came the new included app of Voice Memos. This app allows the user to record messages, edit them, save them, and play them back later. What a great idea. Especially in situations when one doesn't have pen and paper handy. I found this function to be a very useful app while in the car - just grab the phone and record. Problems with the app screen • The two red areas, emphasized in the image on the right, are the only functional interfaces on the entire screen. The rest of the space sits idle - just useless decoration. About .12% of the available screen space is used to perform the functions, 99.88% of the screen is wasted and nonfunctioning. The retro microphone and the VU meter serve no practical purpose. These function buttons are so small that one has to search and focus on the screen to operate the app (dangerous while driving, walking, or doing just about any activity other than staring at the screen of the iPhone). • The functions of the button, once tapped, change to a different function. The red dot is record, but, while recording, it becomes a pause function. The 3 line button accesses the list or recorded memos but, while recording, it becomes the stop button. But these functions are not apparent when looking at the screen. The user has to figure them out. Improved version Here is an option for an improved version that addresses the issues raised above and has an interface that is much easier to use. This version has no unnecessary graphics that take up valuable space within the limited available area for function controls. On the right is a home screen showing the appropriate small icons in the lower right. Note: these are rough renderings - the elements should adhere to iPhone visual and textual iconography and the colors need to be of more appropriate value and intensity. A few features 1. Large buttons that are easy to see and easy to reach with one finger or thumb for one-handed operation. 2. Color-coded buttons for immediate recognition. Red means stop, green means go, and yellow means caution, wait, pause. Blue is used on national highway signs to represent information. 3. The user can see all 4 functions on one screen - none of the basic functions is hidden. 4. Buttons are labeled in familiar and comfortable iPhone style and lettering. These features allow a more intuitive understanding of the app and a very short learning curve due to the primary colors, familiar capsule button shapes and labels, button functions, and orderly alignment. Comparison of two versions Which version looks easier to use? Quicker to understand? More convenient? Safer to use? Lesson: Successful utility apps should be easy for the user to understand and operate and they should help make the users life easier, more productive, and more efficient. Other Voice Memo apps The App Store now offers many options for recording your voice on the iPhone. The high number of apps for a function that comes free and pre-loaded with the phone seems to be testament that Apple didn't get it quite right with the included Voice Memos function. One of the app options is the Shake It Recorder. It has easy-to-read, color coded buttons. The user can even shake the iPhone to begin and stop recording - that would be great for recording thoughts while driving. Numbrix A fill-in-the-blank number game created by Marilyn vos Savant and published in PARADE magazine, Numbrix is a great game. However, there are just too many screens the user must get through to play a game, all shown below. Improved screen sequence The number of screens shown above can be reduced from the above 11 to these 5: The loading page FROM: The first 5 screens could be combined onto one screen, like a title page, that lists the 3 contributors to the Numbrix game. Ideally, there should also be a rotating symbol or bar that shows that the game is of loading. That could be built into the blue Numbrix icon, similar to the movement shown when a puzzle is completed. The user is often more comfortable seeing verification that the game is loading and not having to read 5 separate screens. The menu page FROM An easy and effective improvement is to combine the two menu pages into one. Currently, the user taps on Puzzles on the first screen but then gets a second screen that also asks the user to select a puzzle. There is enough room to combine the menus from both screens and not have to repeat the heading of Puzzles. The line, Choose puzzle difficulty level, is unnecessary. The levels are obvious by the listings Easy Medium Hard and the box containing those options with the words All Puzzles. The start puzzle page FROM Tapping the selected puzzle from the list should be enough to state 'Start puzzle'. There is no need for the intermediate screen step to repeat the request of starting the puzzle. The Puzzle page has a button at the top to Pause or return to the Menu. Lesson: One of the goals of good web design - and now app design is allowing users to get to their destination in a minimum number of screens. Suggested new screens Marilyn vos Savant Listed in The Guinness Book of World Records Hall of Fame as the person with the highest IQ, Marilyn vos Savant has been writing the popular “Ask Marilyn” column for PARADE since 1986. “I like to grab people’s attention and show them how to think in exciting, new, and different ways,” says vos Savant. “The emphasis always is on surprise.” The author of several books, as well as short stories and essays, vos Savant is married to Dr. Robert Jarvik, the inventor of the Jarvik 7 artificial heart. Note: Numbrix, PARADE magazine, and Ask Marilyn are trademarked. PARADE website Date: October 2009 Improving clarity of text copy Above are images of an announcement about an estate sale showing the before and after copy. Here are some suggestions to reduce the number of characters and increase the clarity of the message: 1. For directions: replace n. and w. with N and W. 2. After the day there is no need for both a period and a comma - the comma can accomplish the task of both the pause and the abbreviation. In this case, however, a semicolon works even better. 3. Replace the fr. with a simple dash between the times. 4. For the A.M. & P.M. - there is a trend in communication design to set the designation with lower case letters, no spaces, and no letter M. The M does not convey any clarity since both AM and the PM have an M; the periods are no longer necessary - am and pm (or a and p) have become acceptable just as ad no longer needs the period (ad.) as the abbreviation for advertisement.   April 22 2009 Usable space within an app This app, for The Dallas Morning News, only uses about 50% of the allotted space within the screen of the app. There are 3 bands of info at the top and 2 bands at the bottom - an ad and navigation tools. That doesn't leave much room for the content info. The white rectangle above is all that is available for content - the very thing that consumers want from their smartphones. Some of the info in the bands could be minimized and combined in order to decrease the space needed for these bands. Maximize live area, minimize scrolling The highlighted area shown on the right can be increased: • Decrease leading (the space between the lines of copy) • Group all symbols together in top bar Side by side comparison Redesign iCal column spacing to gain more usable area The screen layout for iCal, the calendar function on the iPhone, wastes valuable space. The user wants and needs the maximum amount of space for the display of information. In the middle image below are grey columns showing the wasted space - about 25% of the allotted screen space. Redesigning the screen can gain enough space to display 9 additional characters. This is beneficial because it minimizes the need for the user to tap and select the item to read the rest of the info. Users want and need the allotted space to display the maximum amount of information. The existing format allows 17 numerical characters in one line. The proposed format allows 26 characters. How to improve the iCal display screen 1. Decrease the spacing between the time numbers and the AM or PM. 2. Delete the M after the A & P. The M is useless info - it serves no function since both the AM & PM have an M. It doesn't help distinguish morning or afternoon - the A & P do that. The M wastes valuable space. 3. Decrease the spacing between the A/P and the list of tasks and events. The purpose of spacing here is to provide a visual pause and a separation between elements to enhance comprehension. However, those objectives are accomplished by setting the A & P in a smaller point size, in grey, and in ALL CAPS. That's enough to create a clear separation. Additional spacing is not necessary. 4. Allow the task/event info to be set all the way to the right of the screen. There is no need for a margin along the right side. Larger buttons in an app The two buttons in the middle of the band at the bottom toggle back and forth between solid-fill and the vacant X but they're a bit too close and too small. While playing fast, it is too easy to hit the wrong button. An improved version is on the right. 1. There is enough room in the lower bar to enlarge both buttons. 2. They can be spread apart to minimize hitting the wrong button. 3. The buttons are all centered under the live game area. Home • Email Jim Watson • Filename to share: http://www.jamesrobertwatson.com/appdesign.html