Creativity is just connecting things.
— Steve Jobs

Tag Archives: icon

Multitasking on iOS

It always starts with three little letters, right?

W h y

To manage your running apps on the iPhone, you must hit the home button twice. That triggers an animation that dims the screen and slides up everything on the screen to reveal a row of full color icons, sitting at the bottom of the screen.

At this point, it would appear to the average user that only 4 apps are currently running on the iPhone. If the user slides to the right from the starting position, iPod controls are displayed.

To manage the running apps, the user is expected to swipe the row to the left to reveal another set of 4 active apps. Swiping from right to left can continue for quite a while if numerous apps were running.

This design decision made me wonder why Apple chose to display only 4 icons?

Finder vs. Dashboard

In the Mac, Finder allows users to quit processes many different ways:

1. Force Quit via command-option-escape
2. The Dock via control-click on an icon
3. Command-Tab then Q on any icon in the floating row of icons.

Finder, however, is not the only app management service on the Mac.

Another was added a few years ago: Dashboard. Dashboard runs widgets, mini-apps that are technically not considered to be apps. Widgets are not affected by the Finder process termination methods. Dashboard functions in an entirely different way.

After activating Dashboard, users may click a “+” icon in the lower left corner of the screen. This brings up a row of icons that fill up the width of the screen and include pagination. These icons represent all available (not running) Widgets. Dashboard also places an “X” button at the top left corner of all running Widget “windows” that float above the row of icons at the bottom of the screen. Click an “X”—terminate a process/close a Widget.

Skinning the Cat

There are many ways the iPhone iOS allows users to delete one item at a time while viewing multiple items.

1. The list view with the either left aligned red circle with the white “-” inside.
2. The list view with a right aligned red “Delete” button.
3. The “Edit” button found in Mail that triggers a new set of actions (select then delete).
4. The Camera app does away with a “delete” button and uses the trash can icon.
5. The Photos app uses a curving arrow in the top right corner that, upon activation, transforms itself into a “Cancel” button also while revealing a new row of buttons at the bottom of the screen that includes “Delete”.

However, NONE of those solutions were used in the multitasking UX. Why?

I think the Dashboard has become extremely useful to iOS UX designers when solving for multitasking support on the iPhone. However, it still doesn’t answer the question of why use a single row of four icons at the bottom of the screen.

My Turn

If I had the ability to mock something up, I’d modify the experience to this:

When a user double clicks the home button, the display would use the 3D flip animation. Whatever screen you were looking at when clicking the home button would flip over and reveal a full screen using the existing textured background behind the single row of icons. All running apps would be arranged into rows of icons like the current home screen, however, the bottom row will be replaced with the iPod controls. If the user wants to kill a process, they could simply swipe vertically or diagonally across an icon to trigger the poof effect. Icon sorting will ensue, but it will make the running processes screen more functional and intuitive to the user. It will remove excessive swiping and remove the need for the Delete button or a row of control buttons.

iPhone 3.0 Nits

Some quick notes on what I think can be improved:

1. Why do we now have two separate applications for note taking? One is verbal (Voice Memos) and the other is textual (Notes). I could easily imagine a Notes interface button with the old style microphone as its icon that brings up the audio recording interface.

2. Why does SMS get renamed Messages and still stay separate from Mail?

3. The idea that swiping to the left to get to a simple search function is a sad solution. The ultra tiny magnifying glass icon tucked into the list of open windows blows that UI metaphor apart. Why not have the user pinch the screen? We do* have more than just left/right swipes at our disposal right? The pinch could use the same zoom+fade in motion as found on the desktop OS.

4. Why does the Contacts app support screen rotation and re-orientation but the Phone app doesn’t?

5. Because Mail is such a monstrous piece of shit, I’ll tackle that in a separate post when I have time to redesign the whole fucking thing. I’m tired of that app and wish it was more useful than it is.

6. Can we please have more information in the top status bar throughout the OS? Why do I have to back all the way out to the home screen to see if any Pushed emails are present? Why can’t I tap the battery icon in the top right and get a percentage? I know it’s there because it was shown to be so in a hack. Obviously, don’t repeat info shown when on the Springboard but that goes without saying.

7. Is YouTube still so fucking important that it needs to reside on the home screen? Why can’t this be on a second page of lame apps like Stocks or the Weather widget?

8. Why can’t we hide apps from the Springboard? Sorry Apple but not every app you make is something everyone wants. Let us decide please.

9. Why doesn’t the Calendar app icon on the Springboard display a badge when an appointment is nearing?

10. Why in the iPod app’s Artists and Songs screen do you hide the search field at the top? Same goes for Audiobooks, Composers, Genres.

11. If you don’t have a certain type of content on your iPhone, wouldn’t it make sense to provide a button to the iTunes store from the iPod’s Videos, Audiobooks, and Podcasts screens instead of just saying “You can download something from iTunes.” Guess you’re really not trying to sell content to users.

12. Why not share the same iconography from the iTunes store when browsing Genres in the iPod app? Reading text lists in the iPod app is not sexy or fun.

13. At what point in the future will you standardize the placement of the Edit and Create New Item buttons in your apps?

Messages: Create New is top right and is a Pencil icon in a button.
Calendar: Create New is top right and a Plus icon in a button.
Mail: Create New is lower right and a Pencil and “paper” shape – no button.
Notes: Create New is top right and a Plus icon in a button (but it’s brown!)
Contacts: Create New is top right and a Plus icon in a button.
Clock: Create New is top right and a Plus icon in a button.
Voice Memos. WTF

14. Photos. Why can’t I create a photo album on the phone and assign photos to it from the camera roll? And why is the “Photo Albums” header background transparent? What is the benefit of doing this?

15. Mail, can we please mark a message as read without having to literally tap into it? One would think that the Edit button would offer this option, but it doesn’t.

So how’s that for a 15 minute evaluation? 😉

Safari 4 Reaction

I’ve been using the Safari 4 beta since the day it was released and I have a few comments to make.

1. The page loading UI device is just too hidden. The current spinner approach is worse than the previous aqua background animation in the address bar. Users look at the page itself to see if anything is happening, not the right end of the address bar. I suggest Apple consider either layering something on top of the center of the page (dimming it a little and showing the spinner).

2. The Top Sites feature is neat but not terribly useful. It’s basically a graphical bookmark folder. I’d suggest adding a tracking feature to the bookmarks menu that lets you identify URLs that you haven’t visited in X months/days so you can prune your list.

3. The history page just doesn’t need a cover flow UI. It’s totally useless because pages from the same site can look almost identical, therefore forcing the user to jack up the cover flow icon view to full size. I’d rather have the history break things down by hour if possible. I frequently try to recall pages in terms of time: “I saw that yesterday around 9am.

4. The new tab button in the top right corner is just not useful. It’s dimmed to a darker gray and makes the user think they will get a new window, not a new tab. If the new tab glyph must be there, why not add “New Tab” to it as well?

5. The tab bar at the top of a window was very jarring at first. I think it would be interesting for Apple to allow users the option to revert functionality and then track it (with the user’s consent) to better evaluate major changes like this.

You Say Tomato and I Say Tomahto

Me thinks Apple needs to have a group hug at some point and discuss this whole “create/add/write” function. You think they would have standardized this by now.

In Notes, the “create” note or “add” function is represented with a + in the top right corner:

In Calendar, it’s a + sign in the top right corner:

In Mail, it’s a pencil and paper icon in the lower right corner:

In the SMS app, it’s the pencil and paper icon in the upper right corner AND in a button:

And finally, in the clock application, it’s a + in a button in the top right corner:

iPhone 2.0 Map Feature

I don’t have the 3G model but that didn’t stop Google Maps from being super useful when using their targeting function. If you are in Maps and press the targeting button in the lower left corner, the usual blue circle with inward facing blue tick marks will appear. What’s new (to me at least) is that if you keep driving around, the blue circle will move to reflect your new position. This mode is also shown to be active when the targeting button in the lower left corner stays the bright blue color. Tap that icon once more and the “following mode” turns off. I did notice that I had wi-fi on while I was driving around as well.

I don’t recall this being in the 1.0 Maps app. Maybe I’m wrong. Either way, it’s a pseudo GPS function that is really helpful.


From the newly released iPhone manual it states:

If you have an iPhone 3G, a blue marker indicates your location when GPS is used
to find your location. Otherwise, a circle is used to show your approximate location.
As you move around, iPhone updates your location, adjusting the map so that the
location indicator remains in the center of the screen. If you tap again or drag the
map, iPhone continues to update your location but stops centering it, so the location
information may move off the screen.

I’m not sure if that entire paragraph applies only to the 3G model or both.

Tiny Safari Hint

This is really just an odd thing I stumbled upon one day…

In Safari, open one window and then create a new tab so you have 1 window with 2 tabs beneath the address & bookmarks bar.

Open a URL in the first tab. When it’s finished loading, you can drag the url’s Favorite icon to the second tab to load it there without having to bring that tab to the front. I think that’s kinda neat.

iPhone 1.1.3 Bits

So I restored my phone and upgraded to 1.1.3 with the hope that the upcoming SDK will bring many of those back in the fold. However, before I restored, I had already performed several minor hacks that seem to have been retained in the aftermath of the 1.1.3 update.

Specifically, this hidden preferences hack still allows me to touch the battery icon in the top right corner and the numeric battery level is displayed in place of the icon. Also, the custom carrier name was not touched at all. I used this phone app to modify it.

ICON Quotes

I’ve had the great opportunity to work with some really funny people in my career and found it entertaining to record things overheard in the office. I’ve been saving this list until I left ICON and I think it’s safe to let them run free now. I’ve abbreviated the names to protect the innocent.


JR: So what could you do for another thousand dollars? Well, I could go out and buy a big hand and smack you with it.


JL: Oh come on, they’re not urge overkill ugly.


JL: Hey what kind of candy bar is that?
JR: None-of-your-f’ing-business-bar.


JR via email: Hi [client name], I just sent you an email detailing why you aren’t receiving my emails.


JR (to client): We have an aggressive vitamin C application policy with sangria as the delivery vehicle.


Homeless Man to SP outside SP’s apartment:
HM: I’m from the Big Apple, I’m from Detroit, I’m from Philly. Basically, I’m international!


SP: Another disconcerting meat form is the kabob in England.


JR’s friend gets a photo of an ugly nascar driver and is asked to “make him look normal.” To which he replies, “I’m a retoucher, not a geneticist.”


Paraphrasing client’s purchasing dept: “Um, your rates are just 20% higher than others.”
RC: You know, if i could just reach through the phone


JR: Like I told my english teacher, “lady, i’m an artist. you can’t restrict genius.”


RC: The client is so far up my ass right now I can see him when I brush my teeth.


SP on The Melvins: It’s like drinking robitussin but at least robitussin makes you better.


MB on Ryan Adams: Is his tour sponsored by Kleenex?


Sp on JR’s wedding return cards not having return addresses on them: What are you? Friends with the unabomber or something?


JR: We need to get some good shin guards for [coworker] so we’re not so afraid to kick him in a meeting.


RC: Everyone got their weekend liver in? When I’m done with mine I transplant it back in the baboon I keep in my basementand I only feed it grain.


After PW received a new Lenovo laptop, it quickly crashed itself beyond a blue screen of death and resulted in his 1+ hr tech support call/argument about wanting to return it immediately. This conversation followed:

on JL reporting that Macenstein’s report of Safari slowing down your cpu down 76%:
SP: I’d rather have a browser that slowed my machine down temporarily than having one that fucked itself to death.


SP: I wish there was a conspiracy channel. I’d watch it all the time. Even the reruns. Anything that has the words exposed or revealed in it, I’d watch it.


MB: You know my friend claims to have downloaded an entire copy of CS3.
JR: Well give him a call and let him know after the FBI shows up that you’ll stop by his house and make sure his kids have enough to eat.


SP via IM after viewing the promo video for Fair Warning, a Van Halen tribute band:
“what a pussy.
get a life.
what a fucking looser
he should go die in iraq.”


SP: was u2 ever playing small gigs? jesus.
SP: even in like 86 they were playing stadiums.
MB: bono’s mother’s uterus was a stadium.


SP on using an iPhone to pick up women: Oh I’m just sitting in a coffee shop, using my iPhone, trying to pick me up some Tiguana Tail.


JR: He basically told me that he wasn’t going to try to do his job, so I should get used to mine being real shitty.


It’s not your fault. It’s Comcast!


MB: Irritable is the new happy.
SA: (laughter)
MB: Thank you, I’ll be here all weekNOW F OFF!

Leopard Dock Shadows

Every dock icon automatically gets a cast shadow that is in perspective with the dock when it’s positioned at the bottom of the screen. But hang on. I just noticed something kinda weird. They also have a drop shadow that is projected behind them so they stand out from the background. Is someone going a little nutty with Photoshop here?

I mean, now there’s a reflection of the icon, a cast perspective shadow, a drop shadow from the front, and the see through quality of the shelf?

Pixelmator First Impressions

I don’t have the time to write a full review of this new app but I thought I’d share my initial impressions. I didn’t reposition the windows in this post. I just happened to read the review on TUAW, downloaded the trial and this is how the app appeared on my screen.

The bottom line is that the negative UI + transparency is really really not made for pros. It’s probably really tempting to go after all the Apple UI Candy they produce in every app but sometimes you have to deviate in favor of increased usability. Case in point, here’s the New Document window:

Here are some more:

This next one really got me. I have to use the built-in OS Fonts panel to handle type? That’s a big deal breaker for me because it offers very little control over type layout. If you create a text object in Pixelmator, it’s a line by line deal, not a resizable text box. A big piece of most design work requires the fine handling of type, and this app wouldn’t be able to do the job for my work.

This screen shows that the Type tool is active. Again, the dark background with the dark icon + transparency makes it very hard to quickly identify which tool is active. This goes for the Move, Crop, Magic Wand, and Magnifying Glass tools as well.

This last item is somewhat strange. I can’t believe this is considered acceptable by their dev team. To have the unnecessarily large graphic overlay the title bar of the palette is beyond me. It looks like such a mistake.