Rivers of Southeast Asia

Maps are so ubiquitous that we sometimes ignore the craft involved in clearly presenting this enormous quantity of information. To succeed, maps must clearly describe the data they are presenting, fit it into a surrounding design language, and be readable at a variety of different scales, sizes and presentation modes.

How is a designer to tackle these challenges? What follows is a rundown of a few tools that can make the task of designing, deploying or just visualizing a map a little bit easier.

World Happiness Index (source:Gallup World Poll)

Targetmaps allows you to create and share any kind of datasets in a global- or country-specific map. All you need is an excel spreadsheet with some kind of geo-coded data and the tool does the rest for you. While Targetmaps provides limited control over your map’s overall appearance (the underlying map data is google maps), the pleasure of this site comes from the easy-to-use tools for customizing your data ranges and presentation in order to communicate your data most effectively. In fact, using this tool, we were struck by how easy it is to ‘massage’ the appearance of data to tell a specific story, highlight or diminish a disparity or conceal poor data. We were pleasantly surprised to see that Targetmaps uses our favorite presentation tool prezi for its tutorials. Check out my map of Fixed Line Broadband Subscibers by country!

While the ability to easily put geo-coded data into a map format, it can also be useful to have the ability to customize the look and feel of a map. For this kind of task, two tools stand out.

Cloudmade Map Styles

Cloudmade is a commercial product built on top of the open source openstreetmap project. They offer hosting, APIs and data sources for a fee to developers of locative apps who want to develop, deploy and run maps on devices and websites. If you’re building a commercial mapping app, definitely check them out. However, what drew me to cloudmade was their style editor, an easy-to-use tool that lets you customize the appearance of openstreetmap data hosted on Cloudmade. With it, you can create a low-contrast grayscale graphic map, a street-centric map for navigation, or a nighttime-style map. The editor is fun and easy to use, but unfortunately, unless you are a paying customer, there is no way to share, export, embed, or otherwise make use of the map styles you create with it. It is included here because it’s an interesting example of a commercial mapping tool built on an open source project, and it’s easy and fun to use.

If you find yourself needing more control over your map data, or if visual appearance and flexibility is an important factor, consider an alternative.

TileMill Editor

TileMill

Tilemill is an open source tool developed for use with MapBox, which describes itself as a system that “radically lowers the barrier to entry for making custom base maps and overlays.” They go on to echo our sentiments when they claim that “data analysts can become mapmakers without GIS expertise, and GIS experts can become cartographers without first mastering design.” Our kind of people indeed. Mapbox offers similar hosting services to cloudmade, but in contrast to the Cloudmade editor, I found Tilemill to be a much more useful tool for the map generalist or designer.

Tilemill takes some configuration to set up and run, and it helps to have some knowledge of GIS systems and data formatting to get the most out of it. However, after some initial configuration, you find yourself at the helm of a powerful map-creating and design tool. Not only can you import GIS datasets and overlay them on top of the variety of physical, political and cultural map data that comes bundled with the system, you have complete fine-grained control of the appearance of the maps at various scales, thanks to a CSS-like markup language called Carto.

The really great part about TileMill is that in addition to being able to host maps on Mapbox, you are given complete creative control over your work. You can export any map you make as a vector pdf, raster image or in the MBTiles format (for true GIS folks.) This kind of flexibility and openness could make TileMill a valuable addition to any designer’s toolbox. For a terrific example of the fusion of design and content that’s possible with MapBox, check out this extraordinary site that maps out US drone strikes in Pakistan.

A referee signal quiz app made with AppInventor

Increasingly, free tools are becoming available that allow designers to prototype and test rich applications for mobile devices without developing fully-realized apps. In this post I give an overview of an example for each of the three major platforms.

Windows Mobile – Microsoft TouchStudio
TouchStudio allows you to develop simple apps directly on your phone. While it might seem a silly idea at first, the concept of a mini-app developed with TouchStudio as an ‘intant mashup’ or ‘multimedia smart playlist’ is an intriguing one. The would-be-developer still has to write some ‘code,’ although the app does help you along. Unfortunately Microsoft Research dropped the ball with support – little documentation exists and it’s difficult to share code, so it’s doubtful that a thriving community will rise up around this project. TouchStudio is free on the Windows Phone Marketplace.

Android – App Inventor
Rather than develop a mashup directly on your phone, App Inventor takes a different tack. It begins with an intuitive web-based interface and allows you to build a simple app using a layout editor and patch-style programming interface for programming behaviors. App Inventor seems much more powerful than TouchStudio, and a bit less programming-centric. App Inventor runs in your browser after you run the free setup program

iPhone – Touch Application Prototypes (TAP)
Apple is notorious for guarding its ecosystem of apps and phone features, so it’s no surprise that no equivalent development tool exists for iPhone. However, a Dutch design firm called Unitid has come up with TAP, an interesting alternative. It allows designers to develop and test interactions within a semi-functional click-through prototype from within Safari. With a full suite of transitions and effects, as well as the ability to use most browser functionality (compose email, initiate phone call etc,) TAP could be a valuable tool for a visual designer or information architect who wants to experiment with the look and feel of a mobile app before developing full functionality. TAP requires you to use Fireworks and is available for download at Unitid’s website

Got a budget? These three solutions are free of charge. If you find yourself with a working with a large team or needing a solution for ongoing work, consider a paid prototyping tool such as JustinMind, Axure or ProtoShare.

UPDATE: 04/28/11

Blueprint Screenshot

TouchOSC also includes a companion layout editor. This free desktop application allows you to define custom screen layouts of UI elements and then upload them to your iPhone. Unfortunately there are only a limited number of UI widgets, and because the software was designed to control realtime sound apps, they naturally tend toward realtime control- knobs, faders and toggles as opposed to forms, dropdowns and checkboxes of more rich interfaces. Still, if all you need is a few buttons and a slider to control an interactive system and you aren’t able to develop a native iPhone app, TouchOSC offers some enticing potential. See below the jump for some examples of unexpected uses.

This guy uses TouchOSC to control a robot!

You can even access the iPhone’s accelerometer and send that data over OSC (warning:video has loud sound).

osc, processing and an iphone accelerometer from codingnature on Vimeo.

If you’re using Flash, I recommend flosc for parsing and sending/receiving messages. There are many resources out the for using OSC with Python, Processing and a variety of software packages. So build you UI, teach your software prototype to speak OSC and you’re set!

TouchOSC homepage
TouchOSC @ iTunes Store

Read More for excerpts

See Also :
Microsoft SketchFlow
Visio Sketchy Wireframe Tempates
Web-based iPhone collaborative mockup maker

(Via Boxes and Arrows)

Having used computer-based sketchy wireframes on a number of projects, I’ve found many ways that they can decrease confusion with teams and stakeholders:

* Clients and Executives – People in this group typically want to push projects forward as quickly as possible. Consequently, the more “finished” the wireframes look, the faster they will expect to see the finished product. You can do yourself a disservice by making your wireframes look more complete than they are. To quote Kathy Sierra, “How ‘done’ something looks should match how ‘done’ something is.”

* Programmers – Programmers who see traditional wireframes too early in the process may misinterpret their functionality as “signed-off.” Don’t be shocked if you hear frantic questions like “Did we agree to this?” Programming requires meticulous attention to detail, so programmers read wireframes with an eagle eye. Consequently, they may expect a level of specification from wireframes that isn’t appropriate in the early stages.

* Designers – Designers make their living with their visual creativity, and they resist anything that could constrain it. Consequently, in situations where designers must work with wireframes created by someone else, designers can perceive them as a creative straightjacket, or worse, as a threat. A sketchy representation can help reduce friction by removing unnecessary details and adding a certain amount of “fuzziness” to the wireframes, thereby giving designers more leeway in interpreting the look and feel of the interface.

* Users – In my research, I’ve found that users who are asked to comment on traditional wireframes can be intimidated by an overly finished look and feel. This is mirrored by a general consensus in the usability industry that the “less done” a demo looks, the more comfortable users feel with giving feedback. Where traditional wireframes can elicit comments like “I don’t like the font on those words,” sketchy wireframes are more likely to elicit comments like “I don’t know what those words mean.”

Comics are effective not only because they are essentially narrative, but also because they are unpretentious, easy to follow, and accessible. Whereas a functional specification document uses words and often “tech speak” to communicate functionality, comics use pictures and interactions to get ideas across.

Can’t draw? Don’t have time to draw? Check out the comments at the bottom of the article for a link to designcomics.org, where the folks at Sun Microsystems’ web team have built a repository of free stock scenes and characters that you can use to build storyboards with little effort. The ‘examples’ section, which has tips for how to use narrative techniques to describe design choices, reads like an introduction to Aristotle’s Poetics:

Another common format is a three-act play: (1) A hero… (2) has a problem… (3) and solves it (or not)

The act of designing a user experience can be compared to developing choreography for a user to enact. Writing like this in sometimes-dry forums like Boxes and Arrows validates my belief that telling a story is a valuable way to describe interaction to a broad audience.

SEE ALSO – ComicLife : A Story Machine

@Last Software had created a plugin for Google Earth that allows SketchUp users to add their own models to a Google Earth application. Like the models shown above, this means that anyone could place their 3D design into the Google Earth application and users who subscribed to that ‘layer’ of data could see your building on their desktop.

This could be for architects and designers what Google’s purchase of Blogger was to writers. Google continues to expand the average person’s ability to create and share content. Of course, it could also mean endless 3D blogging of peoples’ doghouses, office buildings and summer homes, but some good may come of it regardless.

@Last Software

Link to Post

Update: This guy has a catalogue of notable real, imagined or proposed buildings that have been modelled and placed in Google Earth. A good indication of things to come.