Better screen design for websites, apps, and emails
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.

Web and app design objectives & considerations
• Short download time: minimal graphics, no Flash gimmicks
• Easy to navigate and access: constant menu on the left side
• Minimum number of pages to get to destination: use menus or search index
• Provide convenient links: map, website
• Easy to read: legible point sizes, common simple fonts
• Maximize live area
• Minimal scrolling
• Consistent layout on pages
• Visual appeal
• Collapsibility to adapt to a variety of platforms
• One finger/thumb operation

Target audiences
• Seekers: someone accessing specific information
• Users: someone specifically exploring this site
• Browsers: surfers accidentally hitting site

Some objectives (From the Plain Language.gov website)
Users require three things when using a website:
1. A logical structure so they know where to look for information (information architecture).
2. An easy-to-use interface to get them to that information (usability).
3. Information (content) that is easy to understand (plain language).

Tips for better web design

Please don't make the web user scroll too much
I was seeking info on the annual Christmas dinner in downtown OKC, so I went to their website. The left image is what a surfer sees on the home screen. Of all the screen space allotted, this site uses only the blocks in yellow - the rest is wasted and of no value. The user must scroll down to get more info. The image below on the left shows the entire site, that took about 4 screen scrolls to access. The photos appear in a random slideshow sequence.
Reminder: People now go to the web primarily to watch cat videos and to seek information. Ignore the cats, but, please, provide info for users in an easy to navigate format. The less scrolling, the better.

Above right is a redesigned home page - in fact, it's now the only page. All the information and menu links can be seen on the page with no scrolling. All the type point sizes remain the same. The pertinent info is in the top red banner, the photos have been cropped and can now be seen all at once, and the explanatory info and links are towards the bottom. Now, the eye can scroll around the page to find the desired info, rather than the finger or mouse having to scroll down.

Side by side comparisons


Another example of wasted white space - requiring too much scrolling



Example below: Nobody cares much for pretty pictures - the visitor wants information and easily accessible. Better: minimize the size of the picture (even more than I show here) and decrease the excessive white space.


Avoid additional unnecessary webpages

Above: the webpage of Donor Centers on the OK Blood Center website. To find a Donor Center, a list appears, but the locations in the OKC metro area are grouped within an additional menu (middle photo below).

There is no need for the additional menu - all of the locations can be listed in one menu (as in the blurry example on the far right). The list is alphabetized. Putting OKC first in their names allows the two locations to be next to each other in the list. People living in Norman or Midwest City would more likely check a list for Norman or Midwest City, rather than as a subset of Oklahoma City.

Below: two screens/pages needed to access one list of Donor Centers.

Below: one screen/page to access one list of Donor Centers.

Many people today seek information immediately and easily. Adding unnecessary links or pages bogs down the process of using the web to access info.
Lesson: websites are more efficient when there are fewer links to open or pages to access.

The component of proximity
Proximity refers to grouping bits of information or elements close enough to form an association. This grouping provides some comfort through familiarity. We humans like change but only if we can experience it from a foundation of something comfortable. Grouping like elements also aids clarity of understanding of information by creating a hierarchy of information.
From the essay, Design Components
On the website for Fetch, a file uploading service, the home page (on the left below) requires the user to scroll down to access more information.

There is generous leading and much wasted space. I tightened it up as shown on the right. The text point sizes are all the same, no information is lost, and there is no need to scroll down.
One objective for effective web/app design: minimal scrolling and swiping.
Lesson: The experience of visiting a page and seeking info is enhanced if there is less need to move to other pages. People have evolved past being intrigued by artistic web design - we want information and we want it efficiently. Phone apps, Facebook, and email programs have acknowledged this and often let us get right to the content.

The graphic elements of a bar, rule, or line can serve as an organizer to separate disparate images and text. We are conditioned to seeing lines as separators. But, in the above example, the lines are in the wrong places. Lost Your Serial Number? is separated from its accompanying text. The text copy, "If you already purchased . . ." is closer to the heading Need Help Getting Started than to Lost Your Serial Number?
Below is the improved version - the line separates the two sections of different thoughts. Each heading and its accompanying copy are in closer proximity. making it easier for the reader to comprehend.

Lesson: Group together associated elements (text, images) to create a single visual unit.

Setting text blocks for better readability

Notice the block of text copy in the lower right of the page, enlarged above and below:

On the left: The body copy as originally set. Copy that is set justified (both margins aligned) creates inconsistent letterspacing and word spacing - notice the line:
through       education       and       the
Those differing gaps annoy the brain and slow down readability. Above, on the right: How it would look if it was set flush left, ragged right. Now, there are no inconsistent gaps - all letter and word spacing is the same, providing a more comfortable flow for the brain to read efficiently.

Even better: Copy block set FLRR but with the margins manipulated so the lines are of a more consistent width. The punctuation also hangs outside the margin - notice how much better the left margin looks when the quote marks are not inside the margin. Another example:


I had to change my password.
On the Oklahoma City Museum of Art website, this dialog box (middle) came up, asking how I could be reached.
How may we reach you? Yes, do not e-mail or No, Do Not E-mail. (?) Better solution above right.

Design criteria to consider:
• Convey a positive attitude, not a negative one.
• Align the baselines of the media and the options.
• Align the media to a flush right margin, closer to the options.
• Remove white space from within the box - tighten up the info.
Lessons
• Strive to convey positive requests and information, rather than emphasizing the negative.
• Design should be user-friendly. Consider the user when making design decisions.

Another poorly worded dialog box:



Tips for better app design

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.

A better way: all the same info, with the important info on a single home screen. More on app design

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.


Why do so many web and app sites still cling to old-school journalism?
The story below was on some news feed. The headline was intriguing - funny PortAPotty stories. When I click on the link, I want to begin reading the stories. Instead, the author felt a need to bore us with an intro story about how shit stinks. And this crap: "What follows are six of the funniest, most disgusting, and horrifying real stories we could find." Yes, we got all of that just by reading the headline. No need to repeat it.

Look how much junk there is to scroll through (3.5 screens) before getting to the disgusting stories. Without the junk, the reader would see the first story on the first screen (below). This is a different era in info consumption. Give us the info, skip the flowery j-class crap.


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.


Organizing text copy for easier comprehension:
• Put all time info on one line: 9:00a to 10:30a.
• Abbreviated 'AM' as 'a' (and PM as p, if included).
• Deleted the unnecessary CDT.
• Placed 'Downtown Oklahoma City' on one line.
• Tightened up the initials EK.
• Decreased leading between the two blocks of text copy.
• Increased leading between the map and the copy.
• Increased the blue space in the left margin.

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
Abovwe right 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.

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 perimeter shape

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.
Too busy: Fuzzy's Tacos and DHL shipping: existing on left, improved on right.


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 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.

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.

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
• Objectives:
      Easy to use
      Convenient
      Intuitive
      Fast
• Target audiences:
      Those seeking a new route and willing to accept random directions:
            Fitness walkers (timed, goal, pace)
            Recreational walkers (fun, enjoy)
• Features:
      Shake to get new direction
      Hit button to get new direction
      Other functions: timer, randomizer, pedometer, calories burned
• Options:


A better text message layout

• Includes the day of the week.
• Each appt time info on a separate line.
• Places action info in text block at the bottom.
• No one needs to arrive an hour early.





How to make the phone screens better
I don't often love gadgets, but this one - the iPhone - has changed my life. Mostly for the better. I love that this device helps me keep better track of my schedule and calendar, access email and texts, and gets me online easily. But, remember, design can always be made better.

I am not a fan of swiping to multiple pages in search of an app or a folder. I created folders so that all the apps would fit on the home page. The look is more industrial - this is, after all, a machine. A hand-held phenomenal machine. It seems more honest to let it look industrial and serious. And more useful and efficient.

Features
• I can access every app from one page - no more swiping along multiple pages to access an app.
• Along the bottom row, I placed the 4 apps that provide connections to others: phone calls, text messages, email letters, and Facebook updates and messages. Update: I rarely access Facebook any more so I moved the icon to the Fun Stuff folder and moved the Safari icon to that spot on the bottom row.
• The top row - I placed the camera app in the upper right - to minimize taps to access it and to remind me that the camera lens is positioned in that corner on the back. The rest of the row contains apps I use frequently. Update: I placed the Maps icon where Safari used to be.
• The middle 3 rows contain the app folders. If a folder had less than 9 apps in it, there would be blank voids in the folder window. To fill those voids, I added photos of my dogs.
• With the additional busyness, its even more important to create a black background to minimize the visual noise. Below are 2 bad examples and 1 good - iphone 8plus.


A better wallpaper for the iPhone & iPad
Wallpaper is the background screen that shows up when you turn on the iPhone/iPad and when you make a phone call. It has no useful function, no practical purpose. It is simply a backdrop for other functions.

Designers who follow trends without intelligent assessment and consideration of the user place images behind text. Often, poor design results when the decision maker doesn't adequately consider the needs and wants of the end user - the reader, viewer, consumer. Too often, designers make decisions based on their own biases and preferences and not based on research of the psychological characteristics of the user. Text over an image is one example. If you want the reader to understand the text, don't dilute it with an image and if you want the viewer to see the image, don't hide it behind type.
This logic applies to print ads and to the wallpaper on an iPhone. The wallpaper is visible behind the home page of icons and the page of functions used for making phone calls.

Below are 3 columns of iPhone screens. On the left is the default globe image, the middle is a user photo, and the right is a black screen. Notice how much easier it is to see and use the phone functions when the screen is black. Especially when making phone calls while driving or during boring meetings or other situations where time and concentration on performing the task is limited. We rarely view the home screen anyway - as soon as we slide to unlock, the image is gone. The iPhone is a marvel of function and productivity. The all-black wallpaper enhances the efficiency of function.




How to make a better wallpaper

1. Go in a dark room or closet, cover the camera lens, and shoot a picture.
2. Access the Photos page.
3. Tap the black image.
4. Tap the button in the bottom left corner.
5. Tap Use as wallpaper; tap Set Wallpaper.

My home screens



iOS7: lots of good, a little bad
The visually flatter screens and icons with less depth and detail are very nice - they state that this is now a respectable medium that has grown up and is able to stand on its own. Mimicking former media (notebook, calendar, watch, etc) was probly necessary at first to help the user make the transition and to more easily adopt the new methods of accessing information. But, not anymore.


The new look and operations are more functional and utilitarian. iPad: I have the most-used app icons accessible on the home screen and towards the bottom, where my thumbs can reach easily. I forfeited the JRW banner logo - the convenience of opening fewer folders is worth it. The background screen is just grey. Without demanding focus away from the icons, grey provides a better contrast to both the light and dark apps. I placed just 4 icons on the bottom band to align with the 4 columns above. The new look is more technical and utilitarian.

A little good: For those people who insist on putting crap on their home screen behind the app icons, ios7 will blur the image when the focus should be on the icons. Note: the focus should always be on the icons - that's the purpose of the screen. If you want to see or show a photo, open up photos and show the image without crap obscuring it.

Below: A little bad: A folder only holds 9 apps. The new OS has additional folders, but you have to swipe. Notice how much unused space there is on the screen. A folder could hold 20 apps (16 on the phone). Why just 9? The previous system held 16 apps. Having only 9 means swiping to the next screen instead of being able to see up to 16 apps in a category on the screen at once. The new pad home screen groups only 4 across even though the home band at the bottom contains 6. The home screen could hold 36 apps or folders rather than 26.


The worst from ios7
1. The Apple Calendar app no longer has a List option that can be updated and edited - the user must return to a different view. The blogs are full of comments disliking this one, so I think Apple will fix this.

2. The cute animations, screens that zoom home, and the moving boxes in messages. It is disappointing that creating cute - completely useless - gimmicks were how the coders spent their time, rather than on building more efficient functions and visuals.. After the ios7 user gets used to the animations, they are no longer cute or cool, just annoying.
3. Inability to remove apps (stocks, newsstand, etc. This didn't make sense with the first iPhone in 2007, and it still doesn't.
4. Camera burst. The user should be able to turn off that feature.
Apple has moved its phone past an initial wow to an efficient useful tool. The cutesy gimmicks are no longer appropriate for such a sophisticated device.

I asked an Apple Store 'Genius' how many people had a folder labeled Unused - he showed me his and we agreed it would be almost all iPhone users. I asked, "Why design an OS that results in a folder labeled 'Unused'." He spouted some corporate bullshit, but didn't disagree when I commented that it was a poor system design to force a product user to have useless and unwanted apps on his/her phone.

A few app observations
Minimiza spacing to minimize scrolling:


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.


The calendar function is worse - there is no easy link to the list format. It is hidden in the search symbol. Once there, there is no way to add a new event - you have to go back to the previous screen to find the + symbol for 'add an event'.

There is also still a lot of wasted space on the screen - notice the columns of white space between the times and the events. There is no need for the M in AM & PM. That M provides no additional clarity.

The mail program includes new outline symbols, except for the solid VIP star. Notice how awkward it is in the column of symbols. It would have been so easy to use an outline star so it would match the others in the set.
Lesson: Consistency within a set or series often aids association inclusion, communication, and comprehension.
The phone screen (below) uses an outline star - why not be consistent and match that. Maybe it's just an oversight and will be updated soon.


At least, you can now edit the mailbox list and turn off the VIP box so it doesn't show.

Message screen: Nice features. The flatness motif works well here - no light glare at the top of the message box and no outlines. Downside: the low contrast of white type on light blue is not as good as the previous black type on light blue. But, increasing contrast and setting text in bold makes this issue much better.
Weather: Much worse than the previous. Very poor contrast - white type on light blue. Fortunately, I never use the Apple weather app (it sits - with stocks, reminders, voice memos, and others - in a folder labeled Unused). I use Weather Channel and Wunderground, each of which has better screen visuals.


The iFlask

What do we do with old iPods and how can we sneak alcohol into stadiums and arenas that don't sell beer or allow it to be brought in? Put the two together. I removed all the inner hardware from an old iPod, sealed the holes (except for the earbud input which I use as the opening to the flask) and ended up with a hard-to-detect flask that holds about a jigger (oops, sorry, I mean the j-word). March 2009
Several years later, I noticed products on Kickstarter (left) and Fancy (right) for flasks made from iPhones:


A few other suggestions
Design the back to be less slippery
The case is too slick - it can easily slip out of one's hand. There are numerous cases and add-ons available - suggesting this is a common problem that needs to be addressed. To make my phone easier to hold, I have tried numerous options - rubber decals, cases, bands around the phone, plastic stick-ons, and the solution now in use - I just sanded the case. Yep, I sanded my iPhone. It gives the metal case some 'teeth' that make it easier to hold and grip, although it drives the Apple Store employees nuts when they see it.
Update: That phone broke and I promised not to sand the new one, so I bought a case at Staples. Months later, I took it off (I enjoyed the slim uncased phone) and simply put some duct tape on the back.

Design a hardware solution to minimize tangled earbud cords
When I mention this to the staff at an Apple Store, they respond, "Yeah, I hate that." or "Isn't that frustrating?" These are Apple employees disgusted with the products they sell. The earbud cords look cool in the ads but not so cool when on a subway car or on the street trying to untangle them. There are third-party products available but that shows the design flaw of the iPhone - when other companies market products to address weaknesses in the Apple product.

Train 'Geniuses' better
Many of us have examples of Apple 'Geniuses' not being so. Of course, human error is to be expected, especially with innovative technology. But, there is pressure on Apple to be at the forefront and convey that they are the trend-setters (they even presumptuously named their helpers Geniuses). Here are two examples , of several, that I have experienced recently.
• At the 14th Street store in Manhattan in June, 2008, I mentioned to an orange-shirted concierge that I enjoyed the book, iWoz.
   "Woz? What is that?"
       "Steve Wozniak" (one of 2 founders of Apple and the engineering brains behind early Apple computers)
   "Who is that?"
• On Sunday evening and Monday morning, June 29 & 30, 2008, my iPhone slowly died, finally freezing up for good about 10am. I took it to the Apple Store in SoHo, Manhattan. An Apple 'Genius' who checked with others in the back, returned and said, yep - it's dead. This happened exactly 1 year and 10 hours after I bought it - 10 hours after the warranty expired. The bad news: it would cost $199 to repair the phone (it would cost $199 to get a brand new phone that is faster and better - but, I'd have to wait until July 11). So, I took the phone home and did a 'Restore' to erase and install new software. Nope, didn't help. So, I made an appointment to go back to an Apple Store 'Genius Bar' for a last shot before giving up. But I went to a different store. Previously, I was at the SoHo store because its the easiest to get to from my apartment. This time, I went to the newest store - on 14th Street in the Meatpacking District.

The Genius assigned to me seemed to be new and naive. The Genius next to him even bitched at him for asking him too many questions. Jeez, I felt sorry for the guy. But, it showed me that I might need to persist with this one. He told me that when he did a restore it would wipe everything off the phone, including the layout of the home page. To the left is the photo of the home page that we shot from the store computer and emailed to me so I could rebuild the home page later. He tried to do what he could with the phone and then said, Sorry, its dead, out of warranty, and there's nothing else I can do (he didn't offer the repair option like the SoHo store did). I pushed him to explain further - it was out of warranty by just a matter of hours. So, he went to his supervisor, Roger - Lead Mac Genius. Roger pulled up my record, looked up from the monitor and said, "We'll give you a new phone." I was glabberfasted. I didn't want to ask what had changed, or why I would now get a new phone; I just said, "Thanks". I have a theory that Roger pulled up my record and saw that I have bought numerous AQpple products. Roger may have thought, Damn, this guy has spent a lot of money with us. Let's keep him happy.
And they did. When I got home (after a celebratory slice of pizza in the Village) I synced and restored the phone. It was seamless, quick, and everything was in place just as it was on the busted phone - even the layout of the home page.

At least 3 different times at both Apple Stores, I almost accepted their prognosis that I was out of luck, but something kept me pursuing the matter. I'm sure glad I did as I ended up with a working phone.

Lessons learned and hereby shared
• Buy an iPhone.
• 'Genius' is sometimes just a title, not a descriptor.
• Push for explanations. Don't feel stupid - just ask for clarification until you better understand.
• Get a second opinion. Go to a different Genius if dissatisfied with the first.
• Supervisors have more knowledge and authority to make things right.
• Be nice. Persist.

The name
iPhone, just didn't seem like an appropriate name for a product that is a mini-computer, music player, map machine, camera, email checker, and web browser. I assigned a graphic design class to develop a better name. They conducted research and talked with friends about some options. Factors considered were spelling, pronunciation, graphic adaptability, clarity of meaning, and legal availability. Some suggestions: iCon since the product would be icon-driven, iCom or iComm since it will be a tremendous communication tool, iPhone since we have already redefined the word phone to include cameras and texting, and several others that I can't remember - but they were good ones.
Note: the 'i' stood for Internet when the original iMac was introduced as a truly user-friendly model for those who were still a bit afraid to use a computer. It was very simple to set up and operate. The prefix of the i became so connected to Apple Computer that they adopted it as a prefix for a variety of products, no longer representing 'Internet' but serving as an icon for Apple. This project was completed before the iPhone came out and now that it has become the new standard for such devices, the name is irrelevant. We have accepted the name, as inappropriate as it might be, and put it into our collective vernacular.

Names: Apple pocket computer
• Generic - Apple or Android
• Easy to say, pronounce, remember
• Appropriate
Clear - convey device, make sense

Telecom, iCom, iConn, iConnect
MicroMac, MiniMac
PocketMac, PocketCom, Pocket Computer
Handtop, Palmtop (desktop, laptop)
Compette: (disk, diskette)
ComputerPod, PodPuter, Telepod, TriPod
SmartFone, Fone: New meaning to familiar name, funky + phone, 
Mobi (already taken)
iPad

Telecom: telephone + com - communication, computer, or both
Former Apple advertising lead Ken Segall - Jobs decided on iPhone.
Cisco had iPhone trademark and sued Apple over the name. They reached a settlement - they could both use it.
Tripod - phone + iPod + internet communications device - as Steve Jobs said several times when he unveiled the gadget. But, iPhone is much more than that.
iPad later used for tablet. They started work on the iPad before the iPhone.
Teleport was a front runner as it sounded similar to telephone.
Apple was keen to keep pod in the name due to the success of iPod. Telepod a futuristic twist to telephone.
Mobi: play on mobile. Shortened - creative name with personality.

Better email content and screen layouts

I get this email newsletter, Times Insider, each week. All I see on the screen is a standard format old-school letter. Not appealing nor does it pique my interest. Click, Delete. Done.
Instead of a letter that I don't want to read (who does?), they could easily jump right to the lead story - the headline and the visual are much more interesting.
The letter is ego-driven - the editor tells us what she likes and is putting in this issue. Does the reader care who the editor is and how she introduces stories? Old-School Journalism - copy to read linearly. Today's readers scan, they jump to what is appealing. Repeat: letters of text only are no longer appealing.
Below: Because of the useless letter and the large photo, look how far down the reader must scroll to get to the first headline. More about design in the NY Times.


Better email newsletters - less ego
I support what this organization does - the Richard Dawkins Foundation. But the regular email (left below) I get from them looks like a letter (and an appeal for donations). I didn't realize until after the first few emails that there were interesting stories below the letter. The editor, Robyn, puts her picture and an intro to the stories first in the email newsletter. That is just a bit too much ego (like, who cares?) I also question the value of the letter - it just repeats what is in the stories that follow. The newsletter should be about stories, not the editor. Why not just get right to the info? We each get so much stuff in our Inbox - I appreciate those items that provide clear info with easy access. Which example below looks more enticing to read?

Below is another email newsletter link - this one from The New York Times. The intro letter just lists the stories below. Useless information. It seems both of these editors have some ego issues (they like to see their name in print) and both are from old-school Journalism - today's reader scans to topics of interest. We do not want to read letters with no useful info in them.

Below: From an organization that wants to restore the USA National Motto to E Pluribus Unum. The email posts are visually overwhelmed by the big black box with redundant information. It becomes so dominant, its tough to see the lead story headline. I softened up the box (blue on white) and reduced it. And made some other tweaks. I emailed them and included the two images above and told them to use the suggestions as they wished.
Their reply: Thanks for the suggestion. We think we will make a change.


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.
5s: 2013, 6: 2014