I already wrote in my last posts that I am working on a startup project. Over the last months we developed silently a big part of the application and set up Tagcrumbs Limited. I co-founded the company with Sascha (IT) and Ben (Business). A cool team with all core competencies on board so we can exactly design and build the product we love and that is framed in our minds. So far working on this project was fun and I am looking forward to the next months.

From now on you can read more about Tagcrumbs, the startup experience or our mobile lifestyle under blog.tagcrumbs.com. Feel free to contact us if there are any questions related to Tagcrumbs.

With the release of iTunes 7.7 you can browse through the new iPhone application store which presents more than 500 free and commercial iPhone applications.

With the announcement of the iPhone everyone was happy to have a large screen (480×320 Pixels) that makes it possible to easily access and use mobile applications and web sites. Thus, the iPhone brought mobile applications to the main stream and more and more application developers are recognizing the potential of the mobile web and change their focus from web to mobile.

Extending your web applications to become mobile aware can be done in several ways. Adapting your design or stylesheets to become better accessible with mobile browsers like Opera Mini or Safari is one way. Completely restructuring your content and creating a separate mobile web application or a native mobile application another way. The latter provides the advantages of a better support for the target platform and its characteristics. For example, it is now easier to access standard web pages with your iPhone but for a better ease of use and usability a reorganization of content elements is necessary because the screen size limitations are inherited in the mobile world and require adaptions. To conclude, developing separate mobile applications should be the preferred way, although a lot more effort is required for the implementation.

Going through the iPhone app store I recognized that there are no standard ways of designing an application. Presenting a consistent feeling like in the desktop world is hardly achievable. To get some impressions I created some iPhone application screenshots that show a variety of possibilities to present your web application on the iPhone.

What are the best practices for iPhone applications?

• Present your logo at the top of the application on every screen?
• A search icon at the top right next to the logo? A search bar at the top in the standard Apple style?
• Main navigation at the bottom with text and icon?
• Content items in a vertical list form with arrows at the right pointing to more details?
• A horizontal simplified navigation?
• Wisely chosen default values and an advanced settings section to make adjustments?
• Using standard iPhone design elements? E. g. iUI tries to simulate it.
• Simplified content elements, one column, avoid scrolling?
• Avoid borders surrounding content?
• Content overlays for full screen maps?
• Sign in, log in, log out, profile links at the top right?

Of course, all web applications are different and mobile applications can be different too but facilitating standard methods of designing an application and using typical layouts can provide a consistent feeling between applications on the target platform. This makes your users happier, too.

Integrating a nice-looking map in your web application is a painless task with the help of powerful APIs like the Google Maps API. Within minutes you can present your geospatial information on an interactive web map and everything should be fine but let’s dig a little bit deeper in this issue to find the best practices and to avoid some obvious mistakes.

I created a set on Flickr with over 50 screenshots of web maps to provide a quick overview of ways to integrate them in your application.

If you have to handle spatial data, first, you should ask yourself the following questions (Source: M. Hockenburry).

• Who is the user?
• What is the task?
• What technologies are appropriate and why?
• What is the role of spatial information and location?
• How do we represent that information and why is that representation effective?

There is no universal solution to present spatial information and the goal is to find the best suited for your application’s needs. Let’s do a classification to distinguish the different integration methods.

Static vs. Interactive

A static map does not provide any kind of interactivity (e.g. moving around, clickable interface or mouse wheel support). By clicking on a static map, a full-screen interactive map can be presented for advanced features.

Content

Is a plain map view without additional information sufficient? Does it makes sense to use a single marker or multiple markers to show data on top of the base map?

Distribution

If multiple data items are shown, how is their distribution? Is it even or are there hot spots with many items on the same place and thus a clustering is required? E. g., maps can get messy and unusable if dozens of geotagged photos refer to the same place.

Screen size (full screen vs. partial)

A map can be shown in a full screen mode or as a small additional page element in a sidebar or within the main content area.

Fixed width / flexible width

Is the map resizable and adaptive regarding different browser screen sizes?

Content overlay

Is content presented dynamically as an overlay on top of the map or in an area next to it?

Controls

Is it necessary to provide controls for different layers or zoom options? For example, offering a satellite, a hybrid, a street and a terrain view.

Consistency

Do all the maps behave in the same way? For example, zooming can be done with the mouse wheel on every map.

Technology

What kind of technology is used? A static image, a JavaScript-powered map or a Flash map?

In my opinion it is often the best way to show a static fixed-width map in a sidebar that can be used as an entrance point for a bigger (full screen) map that is interactive, provides many controls and eventually content overlays. A static image of a map is good to quickly highlight the geospatial nature of the information while a large map can deliver the full power of web mapping, enabling to aggregate, search and filter geo data.

If you want to learn more about spatial applications, check out the excellent course notes “Design of Spatial Applications” provided by Mathew Hockenberry of the MIT Media Laboratory. He makes aware of the fact, that it is not always the best idea to present geospatial information on a map. Often it is clearer for a user and better to understand if a textual representation is used.

| View | Upload your own