Tips for better app design
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
Making the Starbucks app better: 4 pages into 1
The user taps PAY on the black home screen - a new page opens and the user must tap PAY again to get to the code for scanning at the register. The 4 pages above can easily fit onto one page (below). Now, all the pay tasks are seen on one screen. Easier to understand, easier to use, and quicker to access.
A better Walmart app: no scrolling - 2 screens into 1
On the Walmart app home screen, the user has to scroll to access all the options. i use Walmart Pay and can't even find the icon on the home screen - I have to scroll down.
The screen has a lot of wasted space, the layout is too open, and there is not enough visual hierarchy to guide the user. Improvements (image above right):
1. Enlarged Sign In text/button.
2. Tightened rows of text/Icons so all info fits on one screen - no need to scroll.
3. Moved labels closer to their image icons.
4. Enlarged the Walmart Pay icon.
5. Separated the main categories with Walmart blue lines.
Making the Red Roof app even better: less 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.
Another example from the Bank of America app:
A page from The Week app:
Above left: reader must swipe copy up to continue reading. Right: all text copy fits on the screen.
Solution: Delete unused white space to tighten up blocks of info - decrease the amount of scrolling.
Please design pages for less scrolling and swiping.
The TVGuide app for the iPad is one of the best apps for television schedules. In landscape orientation, when you tap a program, its details and description open in a window on the right. Cool. But, in portrait, that info comes up in a window too small to contain all the text:
There is not enough dedicated space to display the entire program description - the user must scroll up that window. But, notice how much blank space is to the right of the photo.
Simple solution: group more of the program details on less lines, as shown below. This frees up enough space for the entire program description to fit within the allotted space. No scrolling necessary.
Comparison of the live area in Google maps to Apple maps on the iPad
The new Apple maps app had plenty of problems with labels, accuracy, and distorted 3D images, but it did do a better job of using the available live area to provide the largest map image possible.
Lesson: Don't waste the finite allotted real estate that is available for information.
A better layout for Google Currents
Google introduced a new news reader app. There are lists of stories in a variety of categories. On the iPad page, there is a given amount of 'live area' - the screen space that can be used to display information, as shown on the left. On Google's site, a large amount of space at the top is devoted to a collage of often-meaningless photos. Some photos repeat, some are just filler, and almost none have value to any of the stories. Taking up that much live area requires the user to scroll more to run down the list of articles. On the right I built a layout without the photos to allow the page to list 8 stories instead of 4. I hope in a future update, they provide a setting to allow the user to turn off the photo band at the top.
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.
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.
Apps should cluster at the bottom, not the top
Left: the way apps cluster on the screen. Right: the better way - cluster down towards the bottom.
It can be tough to reach apps at the top of the screen when using the phone with one hand. Apple recognized this and built a feature called Reachability that lowers the apps to the bottom of the screen. But if the screen is not full of apps, they cluster up towards the top. They should cluster at the bottom, putting them within reach for more people using one hand. Better.
App buttons that exploit their perimeters
There are several app icons that convey books or reading. But, the samples below have an added dimensionality while staying within the given confines of the rounded rectangle. These are symptomatic of a designer who sees possibilities, has a good eye for design detail, and stays true to design objectives while exploring appropriate options.
App buttons that are clearer
App buttons do not need much detail. The available real estate is just not big enough to include much minor info. Simplify for the button. Observe the clarity of those that are simple and only 2-color.
Fuzzy's Tacos and DHL shipping: existing on left, improved on right.
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 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.
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.
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.
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.
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
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.
Why is the Calendar on the new iPhone so spaced out?
Why not tighten it up and allow more weeks to show. There seems to still be ample room for a finger tap on a specific date.
How to make the Fantastical calendar app better
The new ios7 Apple Calendar has so many shortcomings that several apps of better calendars are now available. One of the best is Fantastical2 Calendar. But, on the event page, there is not enough room devoted to characters in the event titles. On an app screen, there is a finite amount of 'real estate' to convey information. The app designer's objective is to maximize and increase the available space: Here are some ways to improve and allow the user to opt out of some features, thereby increasing the space allotted for event names:
• Remove the M in AM & PM - useless, the M doesn't help clarify morning or evening.
• Delete 'all day'. If an event is 'all day', there is no specific time.
• Move the time down to line with smaller text, freeing up more room on top line.
• Allow the user to delete the colored bars of tasks in the top band. Not a worthwhile use of the space taken up.
• Allow the user to select 'None' for dot color. Deleting the dots increases available space for task description.
Note how much more info is on the line Flight UA738 EWR to CLE
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.
See more ways to make the iPhone better.
Tips for better web page design.
A better Weather Channel app
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.
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.
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
An idea for a walking app
I try to take a 30 minute walk each morning. I'd love to have an iPhone app that gives me random directions (straight, left, right) to vary the route of my walk. A random generator like the old Magic 8-Ball.
• Purpose: break a routine, provide options for discovery
Easy to use
• Target audiences:
Those seeking a new route and willing to accept random directions:
Fitness walkers (timed, goal, pace)
Recreational walkers (fun, enjoy)
Shake to get new direction
Hit button to get new direction
Other functions: timer, randomizer, pedometer, calories burned