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.

23Apr0

Highlights of Week 16/2011

Posted by Michael Gaigg

4Dec0

Highlights of Week 48/2010

Posted by Michael Gaigg

18Sep0

15 Outstanding Examples of Braille in our World

Posted by Michael Gaigg

Braille can be found everywhere. Some findings are real gems, love the McDonalds braille lunch menu which is even advertised on drive-through windows in corporate locations - yes, exactly, didn't know they had driving test in braille yet. I'd actually opt for scratch and smell menus at McDonalds - ok, that's just me 😉

Love the braille bikini as well. Enjoy!

Hong Kong Disneyland (by tandaleo)

Hong Kong Disneyland (by tandaleo)

Wine label (by adactio)

Wine label (by adactio)

Japanese beer (by preetamrai)

Japanese beer (by preetamrai)

Medication (by Thijs van Exel)

Medication (by Thijs van Exel)

Graffiti (by John Kannenberg)

Graffiti (by John Kannenberg)

Monopoly (by Tostie14)

Monopoly (by Tostie14)

Google (by johnbullas)

Google (by johnbullas)

McDonalds braille menu in drive through (by John C Abell)

McDonalds drive through (by John C Abell)

McDonalds lunch menu (by nothingedifying)

McDonalds lunch menu (by nothingedifying)

Bike racks (by alex_lee2001)

Bike racks (by alex_lee2001)

Cake to celebrate the bicentenary of louis braille (by moirabot)

Cake to celebrate the bicentenary of louis braille (by moirabot)

Playboy (by 1980Andrew)

Playboy (by 1980Andrew)

Playing cards (by beerboxerboy)

Playing cards (by beerboxerboy)

Map of Cambridge (by DrNick3)

Map of Cambridge (by DrNick3)

Don't touch (by mako)

Don't touch (by mako)

Bikini (by tussenpozen)

20Apr0

Excellent read: Quality in Web Design

Posted by Michael Gaigg

Stumbled upon this blog entry by liam, loved it, shared it: How to Spot Quality within Web Design: Examples & Tips.

One can truly see the effort that went into all the visual examples (thanks, love that most) and compilation of useful tips!

Here the outline:

  1. Spacing
  2. Pixel Perfect Detail
  3. Well thought out Typography
  4. Organization of Elements
  5. Restraint & Subtlety
  6. Using Colour to it’s Full Potential
  7. Doing something Nobody else has done

Got an interesting article or blog entry?

I'd love to read and eventually share your content. Please feel free to add your links to the comments section so I can 'stumble upon' them too 🙂

28Oct0

Best Practices for accessible Links

Posted by Michael Gaigg

It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.

Basic Rules

See also my Design Guidelines for Links.

  • Contrast link text color and regular text color
  • Underline link text
  • Ensure link text is descriptive of its destination
  • Make visited links change color
  • Limit link text to a maximum of four words
  • Place important words at the front of link text
  • Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
  • Use meaningful pathnames when creating directory structure

Best Practices

Level 1

No Level 1 requirements.

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Clearly identify the target of each link 13.1 n/a <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,

<A href="my-doc.txt" title="My document in text">plain text</A>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Create a logical tab order 9.4 n/a <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>

<A tabindex="3" href="link3.txt">Link 3</A>

Links Provide keyboard shortcuts to important links 9.5 n/a <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>

<A accesskey="3" href="link3.txt">Link 3</A>

Links Include non-link, printable characters (surrounded by spaces) between adjacent links 10.5 n/a [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A>

Templates

Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.michaelgaigg.com/">IT Solutions</a>

References