Michael Gaigg: Über UI/UX Design

18Jul0

Proposing “Sparkmaps”

Posted by Michael Gaigg

This is my proposed definition of "Sparkmaps":

Sparkmaps are small graphics that are embedded in a sentence, table, or listing to enrich its content with spatial information.

What do I mean by that?

Any geographic feature (=piece of information that has location information) becomes more relevant in relation to other (fixed or derived) features, e.g. mentioning a place makes more sense if I can see its location.

It's not always feasible to show a full-blown map or even only an image of a map as a figure on the side. All I want is to show the spatial information right where it is needed and without being taken out of the context.

Characteristics

The main characteristics of #Sparkmaps include that they are

  • embedded in (textual) content
  • small in size
  • simple (in terms of data)
  • comparable
  • value adding

That means that all irrelevant content is removed, leaving only the essential data.

When to Use / Examples

I believe that Sparkmaps can be used in many cases, especially to enhance understanding of:

  • Reference
  • Detail
  • Relation

Example 1: Mention of a location

An article is mentioning a location, e.g. Austria, Europe Austria. Yes, got it?

Example 2: Type-ahead Search (Gazetteer)

Auto-complete search using Sparkmaps

Figure 1: Auto-complete search using Sparkmaps

A user searches for a location. The application could offer type-ahead results with Sparkmaps to show the location in the context of the search, e.g. searching for "salem" would return a candidate list as the user is typing. Figure 1 shows an example with and without Sparkmaps/ Hey Google, you could learn something here!

Example 3: Preview when tabular data is side-by-side with a map

Map and Grid side-by-side

Figure 2: Map and Grid side-by-side


A search for "Colorado" returns rivers in Colorado. Identifying a single river is easy, one just needs to click on the table row to highlight the feature on the map. Sparkmaps reduce the physical effort by providing a preview of the feature (see Figure 2) hinting its location without the need to identify each and every row.

Example 4: Features not visible in current extent

A spatial search for US cities with a crime rate above 10% returns the results list but at the same time the map is already zoomed to a certain extent that does not include all the search results. The name of the city might be meaningless without the spatial content and one might only find out about the actual location by zooming to it and therefore loosing the current extent, which is undesirable. Sparkmaps provide this context without zoom-hell.

Example 5: Tabular data without a map

Bookmarks using Sparkmaps

Figure 3: Bookmarks using Sparkmaps


Sparkmaps can help providing contextual info when showing geographic data in tabular form, e.g. a list of bookmarks (Figure 3).

Example 6: Printing tabular data without a map

Let's assume a user has chosen to print out a results list (e.g. derived like in Example 3) but this time there is no map and therefore the spatial reference is missing altogether. Sparkmaps could provide this information right within the data table. Recipients of the print-out will be thankful also 😉

More examples could answer questions like:

  • What are the surrounding street names?
  • Is the house on the left or the right side of the street?
  • Does the pipe run underneath the street or next to it?
  • Which other relevant features are close-by?
  • Etc.

How to Use / Considerations

While creating the examples I realized that it is challenging to keep Sparkmaps legible and meaningful.

Usability

Like with any other user interface element, the value and downfalls of using Sparkmaps depend greatly on its use and abuse. It is really important to only use Sparkmaps when necessary or important for completing the task on hand. Sparkmaps should not be used just "because we can".

Cartography

We will need to improve our cartographic and content selection capabilities to meet the need for creating small-sized maps. I'm not only talking about Sparkmaps here but also about map display for mobile that typically feature smaller resolutions than web or desktop.

Size

The size of Sparkmaps can range from 24 pixel to 32 pixel. I found 16 pixel not being sufficient and 48 pixel too big in most cases.

Creation

Right now I'm not aware of any API that meets the need for the creation of small-sized maps. This needs to change either through explicit specification of Sparkmaps REST attributes (e.g. &sparkmaps=true&size=24) or through server-logic that is able to translate the request of a small-sized map into a meaningful cartographic layout.

Special case: On-demand Sparkmaps

On demand Sparkmaps

Figure 4: On demand Sparkmaps

Users might not be interested in each and every geographical detail, so we might not want to show Sparkmaps on every line of our data grid. Instead we could choose to display this information on demand, meaning that users can show/hide spatial content where needed. This is particularly useful when printing directions (see Figure 4) or similar. In this special case the maps can be of higher resolution because they would only consume real estate if really needed and requested by the user.

Your Opinion / Implementations

I want to hear your opinion on this subject, improvements and experiences greatly welcome. I suggest also to use hashtag #Sparkmaps when posting anything related to Twitter.

References

Update: Having done some more research I found an article by Andy Woodruff written on 16 March 2009. He is contemplating about Sparkmaps based on the same idea of having tiny, non-intrusive supplemental maps - in his case suggesting to embed them in the margins along the text or as popup windows.

31Mar0

Steps to improve User Experience for Government

Posted by Michael Gaigg

In my daily work I'm constantly confronted with developments for government sites. Often I hear confusion in what needs to be achieved, who needs to be served and especially why it should matter.

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Listening into a Webcast by Human Factors International (download white paper on Designing the e-government experience through citizen-centered usability, March 2008) gave me additional insights that I want to summarize and present here:

Goals of eGovernment

The web offers governmental sites the potential for increased operational efficiency and cost reductions while improving access to information and services for their citizens.

Levels of interaction between these two actors (government & citizens) include:

  • Connect citizens with legislative offices
  • Communicate faster and more targeted
  • Leverage access to public services (enhanced productivity with reduced effort)

Steps to improve eGovernment

Traditionally the government has three main functions:

  1. Report
  2. Transact
  3. Interact

What can be done to improve these functions/processes?

Get it out there

  • What information is interesting?
  • What is already available?

Make it useful & usable

  • Pre-digest the information (e.g. into charts, comparisons, …)
  • Understand the citizen’s needs (e.g. Spanish language, search, text size, …)
  • Assist citizen’s in finding the information (sometimes they don’t know it exists)
  • Avoid: limited business focus, internal focus, lack of shared resource

Provide self-service

  • Assist citizens to walk through business logic (avoid unnecessary pages, forms, fields, …)

Track improvement

  • Establish a baseline (best practices review, scorecard, usability testing success rates, web analytics, call center volume, server logs, …)
  • Validate improvements (success rate, task time) & seek for support within your organization for doing this
  • Continuously track usage
  • Why? Avoid falling back in national ranking, reduce costs for service calls, …

Make it engaging

  • “Will? Can?” Will citizens use the service? Can they find it?
  • Make it exciting
  • Use experiences or technologies that are current and up to date (videos, gadgets, …)

Embrace the future

  • Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)
  • Encourage citizens to interact through social tools

Erase boundaries

  • Integration of “Report”, “Transact” and “Interact” means to remove the disparity between organizational structures of governments and the mental models of the citizens
  • Understand and channel the motivation of citizens to use online services
  • Integrate offers from multiple agencies into one comprehensible user experience

Start a movement

  • Create a community by involving State & Agency Leadership, Agency CIO’s and Webmasters
  • Recognition and adoption are key aspects
  • Embrace the chaos
  • Provide useful & usable tools
  • Reward contributions & demonstrate progress
  • View webmasters as a partner, not as recipient

Transparency

  • The user’s perspective of the organization and the actual organizational structures are mostly very different. Citizens should not need to know how an agency is organized or be familiar with its terminology.
  • Focus on the citizen means to understand how they look for information!
  • Integrate internal processes into one intelligent solution (iGov = integrated Government)
  • Understanding the level of literacy is key to success. Easy language assists citizens in filling out bureaucratic forms.

Government must view itself as a business

  • Attract and satisfy citizens. Beware of competition and consider concepts like ‘brand loyalty’. Effective interaction adds benefits to citizens.
  • Convert visitors into customers meaning that citizens become active online users of the services.
  • Broaden the focus onto international audience which is important to attract entrepreneurship and investment capital and is a good indicator of a strong technology market and research and development environment.

Assistance through technology, tools and continuous improvement

  • Support CIO’s and webmasters through tools like design templates, standards, guidelines and an effective means of governance.
  • Adjust technology to changing market conditions, population demographics and the user’s level of expectations.
  • Create a culture and long-term commitment (=institutionalization) of usability within the agency!
  • Establish a baseline of improvement and continuously validate and improve through benchmarks.

Your thoughts?

I'd like to hear your feedback and if you have applied one or many of above techniques in your agency and what your experiences were.

References

  • Straub, K., Gerrol, S.; Designing the e-government experience through citizen-centered usability; Human Factors International, Inc.; White paper; March 6, 2008