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.

Tagged as: , , , , , , , , No Comments
14Mar0

Highlights of Week 10/2011

Posted by Michael Gaigg

Tagged as: , , , , , , , , , , , , , No Comments
10Sep0

Highlights of Week 36/2010

Posted by Michael Gaigg

Tagged as: , , , , , , , , , , , , , , , No Comments
2Apr0

Highlights of Week 13/2010

Posted by Michael Gaigg

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , No Comments
23Oct0

For which generation are we designing for?

Posted by Michael Gaigg

I just came back from a webcast held by Human Factors International titled "Who Are We Designing For? The Generation Dilemma". It reminded me that even though most designers - me included - belong to the Generation X (or maybe especially because of that) we need to understand and recognize behavioral differences between generations when designing web sites.

Sidenote: This generalization must not prevent us from continuing to identify and define our target audience through personas or applying all the other UCD principles based on representative users. It is solely meant to raise awareness that we as designers need to be aware of these differences.

So, what are these generations?

"Baby Boomers"

  • 78 Mio (US) / 1.11 Billion (worldwide)
  • born between 1943-1960 (age 65-48)
  • think of technology as a tool
  • computer at work or at home (often not the latest model)
  • use computer mainly for email or work-related activities
  • use sites that help save time or serve relevant information

"Generation X"

  • 55 Mio (US) / 1 Billion (worldwide)
  • born between 1961-1981 (age 47-27)
  • are technology savvy and career-focused
  • keep their computer (desktop) in a separate room or office
  • start their day with practical activities like reading news or checking stocks
  • utilize computer for work but still keep balance of life and work
  • use sites for practical tasks like online banking, news, travel preparation

"Net Gen"

  • 80 Mio (US) / 2 Billion (worldwide)
  • born between 1982-2000 (age 26-8)
  • technology is inherent and part of life
  • have their computer (laptop) by the bed
  • start their day checking social activity online
  • look for and do things that make them laugh, might be silly
  • attention span is short, impatient
  • use social networking sites like Facebook

How does the knowledge about these generational differences affect our designs?

The same guidelines for accessibility and usability like consistency or efficiency hold true but it is to be emphasized that certain guidelines must be enforced stronger for some generations while others can be loosened up. Here is a rough overview:

Baby Boomers:

  • Simple look and feel
  • Safe to use, more error-prone than usual
  • Navigation in predictable places
  • Hierarchies of information
  • Step by step instructions
  • Provide options to enlarge font sizes
  • Things that don't move, flicker, or play automatically

Generation X:

  • Focus on quality content
  • Provide 'do-it-yourself' tasks
  • Give control and allow customization

Net Gen:

  • Content has to be attractive, innovative, can be quirky
  • Design can be highly interactive
  • Audio and video is not only accepted, it's expected
  • Entertainment is important
  • Avoid pictures of elderly people (yes!)

How can a design satisfy all generations?

The answer is (as always): it cannot. Designs have to be focused on and implemented towards your key audience. A university web site needs to satisfy its customers, the students. The press, teachers and parents are without doubt important as well, but without satisfied students the university doesn't even have to think about getting the press to visit the site.

There are ways to generalize your site's content though:

  • Identify the user (login) and present a customized UI
  • Identify the content (landing page) and predict its likely customer
  • Identify user preferences by explicitely asking
Tagged as: , , , , , , , , , , , , , , , , No Comments
21Oct0

Best Practices for accessible Content

Posted by Michael Gaigg

People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?

Basic Rules

  • Don’t rely on color alone
  • Identify the language used throughout the document and identify changes
  • Use correct markup to emphasize important content
  • Be clear and precise in the choice of wording and language

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Color Ensure that all information conveyed with color is also available without color 2.1 (c) Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Language Clearly identify changes in the natural language of a document's text and any text equivalents 4.1 n/a And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
she entered both the room, and his life, forever. <Q>My name
is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
he replied in impeccable Italian, locking the door.
Language Use the clearest and simplest language appropriate for a site's content 14.1 n/a n/a

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Blinking Avoid causing content to blink 7.2 n/a n/a
Movement Avoid movement in pages 7.3 n/a i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Text Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen 2.2 (c) For more information check the online paper about "Effective Color Contrast" at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/).
Abbreviations Specify the expansion of each abbreviation in a document where it first occurs 4.2 n/a <ABBR title="social security number">SS#</ABBR>

or ASCII art:<ABBR title="smiley in ASCII art">:-)</ABBR>
Acronyms Specify the expansion of each acronym in a document where it first occurs 4.2 n/a Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>
Language Identify the primary natural language of a document 4.3 n/a <HTML lang="en">

Templates

<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<ABBR title="social security number">SS#</ABBR>

<ACRONYM title="Geographical Information System">GIS</ACRONYM>

References

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , No Comments
20Oct4

Design Guidelines: Content

Posted by Michael Gaigg

When writing content for the web it is essential to speak the language of your users. Become a word detective, use google trends. Words are the basic elements of links, get them precisely right to provide strong information scent. Identify trends, don't invent them. Look at the evolution of language.

Get to the essence of the message! Stop 'waving' on your webpage ('Welcome to the webpage of our company. We are proud to blah-blah...').

Always remember that the user is in charge, the user is impatient, nasty, demanding, in a hurry and in control to spend its time somewhere else (according to Jakob Nielsen: 'Users spend most of their time on other sites'). Online marketing is about giving attention (versus offline marketing is about getting attention).

Design Guidelines for Content

  1. Make information easy to find with clear headings and meaningful sub-headings (not ‘clever’ ones).
  2. Break up the information into manageable pieces.
  3. Put the pieces in a logical order for your readers.
  4. Keep your sentences short and employ one idea per paragraph.
  5. Use the ‘inverted pyramid’ style: conclusion (context) first, results later.
  6. Talk to your readers. Use "you".
  7. Write in the active voice (most of the time).
  8. Put the action in the verb, not in the nouns.
  9. Use your readers' words.
  10. Use half the word count (or less) than conventional writing.
  11. Use bulleted lists where appropriate – for a list of items and for parallel "if, then" sentences.
  12. Employ scannable text like highlighted keywords.

Best Practices

See my blog entry for Best Practices for accessible Content

References:

Suggested reading:
Tagged as: , , , , , , , , , , , , , , , 4 Comments

About Me

Michael GaiggI'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.

I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.

Help me by sharing your thoughts, ideas and comments.

Categories

Popular Posts

Latest tweets

Posting tweet...

Tags

Accessibility analytics best practices book color content contrast css design esri examples facebook feedback free google guidelines html5 inspiration ipad jacob nielsen javascript Joel Reyes jquery map mobile navigation PHP requirements section 508 silverlight techniques tips tools trends tutorial twitter typography UCD ui usability user User Testing UX web Web Design

My Zazzle Products

Yes and No Tee Shirt
Yes and No Tee Shirt
User-centered Design Cup Mug
User-centered Design Cup Mug