Category: Computer Software

Mobile Safari currently supports three search engines, Google, Yahoo!, and Bing. All three of these present their search results on web pages that have been optimized for viewing on mobile devices. Also, all three can show search results on a map. The are differences in how easy these maps can be navigated, however.

For testing, I used the search term “market street san francisco,” which has two interesting characteristics: first, the search engines should easily recognize this as a geographical location, namely Market Street in SF; and second, there is a good chance of also finding businesses that refer to Market Street in their name, or that are simply located along that road.

Here’s what I — quite literally — found.¹

Google

Discovering the map: A map preview appears directly on the search results page. It’s just below the fold on an iPhone and shows a number of location markers.

The frame around the map has the same color as standard Google text links, indicating that the map itself is tappable.

Navigating the map: You move the map around via tap-and-drag. Double-tapping zooms into the map by a fixed ratio, and the pinching/spreading gestures zoom out of, and into, the map, respectively.

While these interactions may be difficult to discover because they are invisible, they do follow the standards defined by the Photos and Maps apps.

Finding search results on the map: Information about the locations that are marked, appears below the map.

If there are multiple search results, you can step through them with left/right buttons. When you do so, the map is automatically re-centered around the selected result. This also works the other way ’round: tap a location marker, and the information below the map will change to the corresponding location. All of this works without the map page being reloaded.

One detail I miss is a dedicated “Re-center” button to get back to your marked location in case you moved the map so far that the marker ended up off-screen. As a workaround for a search with multiple results, you can step to the next result, and then right back to the previous one, to find that location again. This won’t work for single search results, however, as you can see here:

Noteworthy details: The two buttons in the top corners of the map open the currently selected location in the “Search” and “Directions” views in Maps, respectively. In the case of “Directions,” the location is entered into the “End:” field for quickly looking up the route to get there.

Yahoo!

Discovering the map: The search results on Yahoo! include “local results” (“Lokale Ergebnisse”), but these are not displayed on a map (pre)view. To show the results on a map, you have to click a “Map” (“Karte”) link in the “local result” section’s header.

Navigating the map: Yahoo! uses static images for the map, and displays it on a scrollable page.

To zoom in or out, or to move it, you have to tap on one of six buttons shown below the map. The only gesture you can use on the map is double-tapping, which will vertically center the map on the screen.

The map’s navigation buttons are tiny. Although there is ample horizontal room on that button bar, the designer chose square buttons over wider, rectangular ones that would be easier to hit. There is hardly any room between the buttons, either.

The page is reloaded every time you move or zoom the map. Unfortunately, the vertical scroll position of the page may shift slightly between reloads. E.g., when I tapped the down arrow on this screen…

… the map’s position moved slightly upwards after loading the new map image:

Finding search results on the map: The list of search results is displayed below the map. Markers on the map show their corresponding locations.

There are no links between the two, though, so you have to manually correlate the list items with their respective location markers.

The page lists up to ten search results at a time. On the small screen of an iPhone or iPod touch, this means you will likely need to scroll back and forth quite often to fully grasp which map location belongs to which description.

Noteworthy details: Sometimes, Yahoo! will display ads as overlays at the bottom of the map page. These hide automatically while you are scrolling, but still feel more intrusive than the ones that Google sometimes displays right on the map.

Bing

Discovering the map: Bing displayed the shortest results list by far, with only two webpage links and three images. A map may also show up on the results page, unless the location it found extends over multiple ZIP code regions.

In that case, you only see a “Map” (“Karte”) text link, which takes you to a list of ZIP codes.

Imagine being in an unfamiliar city and running a web search similar to “market street san francisco.” Would you feel comfortable picking a neighborhood of that city to limit your search on, based only on a ZIP code?

I think that filtering a geographical search should happen via selecting a region in a map view, but not before you have even seen that map for the first time.

Navigating the map: The way in which Bing displays the map is similar to Yahoo!’s: the map itself is a static image on a scrollable page, buttons are used for zooming and moving the map, and (single-)tapping the map image centers the page.

It reloads the page to update the map image, and it also shares the flaw of not preserving the vertical scroll position between such reloads.

The buttons below the Bing map are even smaller than Yahoo!’s, and are placed even closer together. The location of the zoom buttons — one each to the left and right of the “cursor” buttons — is unfortunate, because it breaks up proper grouping of the controls for zooming and navigation. (Yahoo! gets this right.)

I do like the arrangement of the navigation buttons in a compass dial for its natural mapping. This one even features a “re-center around location marker” button at its center, whose functionality neither Google nor Yahoo! offer.

What I don’t understand is why the entire assembly isn’t at least twice as big. As you can see in the following screenshot, the reason for this design is not a lack of available space.

Finding search results on the map: Interestingly, Bing comes up with much fewer search results overall. For “market street san francisco,” it only found the actual street, but none of the results — retail stores, hotels, etc. — that Google or Yahoo! found.

Some searches found a single correct match each, while other perfectly reasonable search terms like “apple store san francisco” or “cha am restaurant san francisco” came up empty. Yet other searches like “florinda’s market street grill san francisco” (as found by Google earlier) made Bing deliver “matches” that are surprisingly out of line:

Noteworthy details: The results page itself is somewhat zoomable, i.e., its width is not fixed to that of the screen. When I first tried the spread gesture on the Bing map, I initially thought I could zoom the actual map this way, until I realized that I had zoomed the entire page.

Show me the way, Google!

In general, using buttons for zooming and moving a map might work almost just as well as direct manipulation — albeit with a much smaller dose of “touch-screen magic.” The way that this approach has been implemented by Yahoo! and Bing, however, is plagued by a number of flaws.

The buttons are too small, their spacing is too narrow, reloading the page for every zoom or move operation feels disruptive, and manually correlating location markers with particular search results is tedious.

Google’s direct-manipulation map is not only more intuitive and more convenient to use. It also makes great use of the available screen real-estate, displaying all related data in a single screen-full that does not require any scrolling.

Being able to move and zoom the map without reloading the page gives you a great sense of direction: you can easily see where you are “going” while dragging the map’s contents around.

In short, despite being “optimized for mobile,” Bing’s and Yahoo!’s map web pages still feel like, well, web pages. In comparison, Google’s map feels like a veritable application: if it weren’t for the browser chrome, you might think that it’s a native iOS app.

When I recently followed a link from a tweet, I ended up on the Display Blog, a weblog dedicated to the display technology business.

The site’s super-simple appearance immediately appealed to me. There is nothing on the page that can distract you from actually concentrating on reading the blog’s articles.

Page navigation is simple, too: there’s a title banner linking back to the site’s entry page, and the standard pair of Previous Entries/Next Entries links. That’s it. No chronological archive, no tags, no keywords, no blog roll, …

Wonderful!

There is an unusual one-line “instruction” right beneath the title banner, though, according to which you can also search the site. The way to do so sounds almost magical:

To search, type and hit enter

To see if that would actually work, I followed these instructions in the most literal way: I just started typing a few letters, and hit the Enter key.

Nothing happened.

That’s, of course, because you first have to click on that very line of text to activate a search box which is hiding in the same location.

Now, when you type, you can also see what you type, and hitting enter does bring up a page with search results.

Analog or digital: simple things should not require instructions

Within the realm of websites, a search box is a “simple thing.”

Average users have a basic understanding of how to perform a search on a website. At least, as long as the search field is easy to find, provides sufficient visual cues that say “I’m a search field!,” and operate in a standard manner.

The only reason why “instructions” are required on the Display Blog page is simply this: it’s because the search field does not look like a search field.

It’s just a small box drawn in a line that is so thin and light, you can hardly see it at all in the top-most screenshot above. It does not have a “Search:” label, it does not display a loupe icon, it lacks the inset shadow that has become fairly common for text entry fields, there is no button labeled “Search” — nothing about the search box itself says “I’m a search box!”

Even worse, the instructions that are provided, are incorrect since they omit the very first step in the process, namely “click here.”

If it ain’t broken…

The easiest way to fix this search box is to simply use a standard design. And that design does not even have to look dull or lack more extensive features. Just have a look at this search box on Lukas Mathis’ blog, Ignore the Code.

It looks like a standard OS X Aqua-style search box, has a cancel button, and a menu with search history. And yet it is easy to find even for non-Mac users, because its label explicitly states what it is: “Search.”

There is an equivalent to “if it ain’t broken, don’t try to fix it” in user interface design, and its essence is:

If users are familiar with a de facto standard way to use a certain feature, stick with that standard in your own designs.

If you break this rule, you will most likely create unnecessary usability problems like the ones I ran into with this search box on the Display Blog.

Playing games on a touch screen device can be a delightful experience: being able to directly manipulate objects with your fingers on the screen without having to go through a “control intermediary” like a joystick makes for immersive and engrossing gameplay.

With the entire screen being used as a game controller, however, game designers must pay special attention to the placement of on-screen menu navigation controls: your enjoyment of a game will decline rapidly if you’re repeatedly catapulted back to the main menu screen, just because you inadvertently hit the wrong button while tackling a difficult game level.

Aim… fire! — Aim… fire! — Aim… RESET LEVEL?!?

In the physics-based puzzle game Ragdoll Blaster 2, your aim is to hit a target with ragdolls, which you shoot from a cannon. To clear the ballistic path towards the target, you shoot the ragdolls against objects like boxes, wheels, etc. to move them out of the way, make them spin, and so on. Inertia for the win!

Your finger’s position on the touch screen aims the cannon and also controls the force with which the poor ragdolls are sent on their trajectory — the farther your finger is away from the cannon, the stronger the blast.

In the level shown below, you need to set the big wheel in motion by shooting the cannon that is mounted to the wheel’s rim (it’s the weird contraption seen at the wheel’s apex). The rebound from shooting a ragdoll applies force to the wheel, and if you aim it right so that the force is tangential to the wheel’s circumference, the wheel starts turning.

The crosshairs on the screen indicate the position of the player’s finger, which, in this case, is very close to the two on-screen buttons, “restart level” and “menu.” It’s way too easy to hit either button while feverishly tapping the screen to get that big wheel rollin’. Consequently, getting through this difficult level is extremely frustrating.

The buttons’ default position is the lower right corner of the screen. In a few levels, the designers have placed them in other corners, thus showing that they are aware of the issue. Nevertheless, in some of the game’s levels, the buttons still do get in the way, adding the kind of difficulty to solving those levels that goes well beyond what the player perceives as “pleasantly challenging.”

Ragdoll Cannon, which is one of two games found in Physics Gamebox, works off the same game idea, and it also features similar “reset level” and “menu” buttons. In this game, however, the buttons are not always tucked away in a corner of the screen, but sometimes show up nearer the screen’s center, too.

Even with the buttons being moved out of harms way as best as possible, there is a more robust approach: a slider.

When a simple tap shouldn’t do

The music performance application MorphWiz uses most of the screen to display an x/y-“keyboard:” the horizontal axis represents pitch, the vertical is used for modulation such as morphing between two different waveforms.

MorphWiz’ user interface displays only two controls that are not related to actually performing with this instrument: the sound preset selector (the two arrows) and the slider in the top left corner to bring up the app’s main menu.

The slider works just like the one that you use to unlock your iPhone or iPad: to go to MorphWiz’ main menu, you have to consciously move the slider upwards — it’s not enough to casually brush against it with your finger, whether intentionally or by accident.

What’s more, if your finger happens to end up on the menu slider while you’re playing MorphWiz, it will ignore the finger press: if you hold down a finger to play and then move it over the menu slider, nothing happens. MorphWiz just continue to play the sound.

In true multi-touch fashion, you can access the slider while playing, but with another finger: if you operate the slider with a “new” finger in addition to the one(s) you’ve been playing music with, it does react to your input. The same applies to the two preset selector arrow buttons.

This behavior of the slider makes it virtually impossible to leave MorphWiz’s performance screen and dive into the app’s configuration mode unless you really want to do so.

Such a slider, when used for navigating away from a game screen, could also go a long way in preventing gamer frustration.

Menu navigation controls don’t always get in the way

Not all games require work-arounds for on-screen buttons, though. They work just fine as long as they are not positioned within the area of the touch screen that is used for controlling the game.

In the game Flight Control, you direct airplanes and helicopters to their respective landing strip or pad by drawing a flight path from the aircraft to the color-coded destination right onto the screen.

In this game, the button to go to the game’s main menu is positioned in the screen’s lower right corner and indicated by the “pause” symbol.

Even when the screen gets crammed with aircraft and you frantically try to keep them from crashing into each other — which, very obviously, ends the game –, the focus of the game is near the center of the screen and the risk of hitting the “pause” button by mistake is all but non-existent.

When you do hit the pause button, a dialog screen comes up in which you can choose to continue playing the current level of the game, or continue to the main menu, which will also reset the level you just played.

Consequently, unlike the Reset Level button in Ragdoll Blaster, even if you do hit the Pause button in Flight Control by accident, you will not lose any progress you have made in the game.

In other words, the worst that can happen is that you literally pause the current level, but you can always return to where you were in the game.

Also note how two key preferences options, namely sound effects and music, are accessible via the pause screen, as well, so you can adjust them without having to leave your current game.

A final example, the shoot-at-orbs game Orbital uses the entire screen as its fire button — with the exception of the miniature-sized “PAUSE” text in the screen’s upper right hand corner.

Operation of this button is similar to the Pause button in Flight Control: the chances of hitting the Pause button unintentionally is very slim, and even if you do, the current level is paused, not reset.

You only lose your progress if you continue from the Pause screen — which, of course, also sports a “Return to Game” button — on to the main menu.

When do you need to go beyond buttons?

The most reliable way for designers to decide whether to use plain buttons, and where to place them on the touch screen, is to simply play the game for a while: if you’re accidentally thrown out of the gaming action a few infuriating times too many, try to find an alternative solution. Like, for example, the Menu slider found in MorphWiz.

Applications that do use buttons should always Pause the game, instead of resetting the current level or going straight to the main menu. This adds an extra level of protection against losing game progress versus the simple buttons found in Ragdoll Blaster 2.