Tag Archive / UX

• (How) Geocaching Taught Me To Visualize Information

  (Originally published on CDG Interactive/Innate blog)

  Earlier this year I attended the IxDA Interaction 11 conference in Boulder, Colorado, one of most important in the field of interaction design. At this conference, I’m both an observer of the field and a student, gleaning ideas I can use to improve my own skills.

  In my three years of attendance, I’ve learned that interaction design is not just about building products — it’s also about how to visualize information. One of my jobs is taking HTML/CSS code and making the content not only visible but easily accessible to the user. At a time when massive amounts of data are freely available, finding ways to making information not only understandable but also easier to use and manage has become its own field of study.

  Making Information Visual

  So what does “visualizing information” mean? For example, take a basic weather map we see on the local evening news. Apart from the physical location and geographical borders, information about air pressure and temperature are shown in graphics, instead of a straight list of numbers and statistics. This same information is given some sort of context (work, travel, agriculture) for viewing. From this, we make judgments about what activities we want to do at a certain time period (going to work, growing crops, flying on vacation).

  We can use maps to overlay any information we want, depending on what we need or want to do. But one use of a map is something that we have been doing since childhood: using a map with information to find something.

  And that’s just what I did at IxDA in Boulder. Each year’s conference has a different twist, depending on the location. Home to The University of Colorado, Celestial Teas and a growing tech/design area, Boulder is nestled near the Rockies and has a reputation as being eco-friendly. Well, when looking at the list of Friday activities, I found one that caught my attention: Geocaching: Treasure Hunt.

  The “Treasure Hunt”

  Geocaching is a hide-and-seek game where finders use GPS units or GPS-enable mobile phones to find caches. These caches are containers that have various items inside. They can be as large a small Tupperware case. Or they could be micro caches, which can be as small as a 35mm film canister. Either one, these are located in publicly accessible areas and are hidden from view. However, the owner of a cache will leave some clues (text, title name, or images) for the finder to locate it. Of course, having a GPS unit does not mean it will be easy to find. If you have ever used one, you know that there is a certain range of accuracy depending on the signal and location.

  Occasionally, these caches will have a travel bug, a type of GPS-enabled tag with a unique ID that the finder/owner can move to any location and place inside another cache. Once the cache has been found, the finder must leave something of equal/higher value in the cache, especially if something is taken from it. The finder marks that she/he found the cache via paper/app/website and replaces the cache in the exact spot for others to find.

  Hmmm. Hide and seek with GPS tools. Exercise with actual pay off. Sign me up!

  Following lunch on Friday, the group got together. I was matched up with Jill, one of the advisors, due to the fact that we both we the only ones in the group who had Android phones. (BTW…interaction designers luv iPhones. Just an observation… ) I downloaded an app (there are a number of apps for iPhone and Android) beforehand and played around prior to the trip. It also helps if you have the latest upgrade of Google Maps on your phone with navigation abilities.

  We traveled to an area in Boulder where we separated into three groups. The group I was in located a micro cache about 0.7 miles north and we walked down some streets to the location. This was located in a parking lot (caches need to be in a public place). The GPS trackers got to about a couple of feet nearby. However, it had snowed a few days prior and the parking lot was covered in snow mounds about a few feet thick. I tried digging with gloves to see if I could find it but to no avail. Everyone searched around the area but no luck. Considering the area was still snowbound and we were finding a small micro cache, we decided to search for another one.

  Looking at the geocaching app, we found another micro cache only a few meters away north. Unfortunately, we came up empty again – a snowbound area with little clue to finding it.

  We decided to move to another one, this time a regular sized cache. This one was about 0.3mi west from our present location. Crossing streets and more parking lots later, we finally got to the location. Many of us recognized the location because of the clue given in the title. Like I mentioned before, the GPS only gives you a close proximity to the location; you still have to figure out where it actually is. Another clue pointed to its actual location. That’s easy enough.

  Well, almost. Now, you have to try to get it out. Remember, these caches were not meant to be easy to find in the first place…

  Finding the Prize

  The tallest of the group reached in and pulled out the prize – one round metal candy tin. After a few hours of searching and coming up with the third choice, needless to say we were all ecstatic (judging from the group picture afterwards). Then we opened our prize.

  Caches contain any sort of object left over from the previous finders or owner. (There are rules to what can or cannot be put there). This one had a simple log book, with list of names and dates, referring when the cache was discovered. One of the more interesting items is a small tale/story in two small pieces of paper, folded in the cache. It also had a squashed penny. This cache had a travel bug, which was taken by our advisor to be placed in another cache. As the custom, we had to put something back into the cache. A few items were put into the cache from other but someone shouted out “Does anyone have a coin?” I had some Canadian coins on me and threw in a “toonie” or a 2-dollar Canadian coin into the cache.

  [By mentioning this, everyone here in the Innate office will automatically reply “Of course, he has one!” Needless to say, I take a lot of trips to Canada.]

  Well after the celebration and signing of the small log book, everything was sealed up and the cache was place back in the same location before. The adviser marked the find on the site, along with the items that we placed in the cache.

  Mission completed. Smiles but tired walking back to the bus and then back to the hotel. For me, the day was complete.

  Now, when I work with information and its display, I’ll remember the connections between data and discovery that are made when geocaching.

  P.S. I mentioned the travel bug earlier. Beforehand, it was revealed that one of goals, besides finding the caches, was to have at least one of the travel bugs moved bit-by-bit to the location of the next conference – Interaction 12 in Dublin, Ireland in February 2012. If this one makes it, it will no doubt be very well received.

  For more information

  • Geocaching site
  • YouTube GoGeocaching channel

  Your turn:

  • Have you ever been geocaching?
  • What are your favorite examples of interaction design?
  • How about visualization of information?

• Why Design Now?

  

  Last week, I finally escaped DC for NYC. Got the chance to finally see the Cooper-Hewitt Museum, which is part of the large Smithsonian family. This museum’s focus is on design, whether functional or artistic. I got the chance to look at the exhibit Why Design Now? – part of the National Design Triennial.

  This exhibit reminds me of MoMA’s Design and the Elastic Mind a few years ago but on a smaller scale. In this case, the various themes were grouped into areas such as communication, mobility, and energy. I was very interested in the Materials section, looking at some very beautifully crafted items made with processes that had little environmental impact. For example, packaging or dishware that used local materials (paper/plant material) while being easily biodegradable. And then, there are the eyeglasses…

  I spend most of the day at the museum, soaking in all the design and getting recharged again after three months of work. Anyways, the exhibit is open until 1/9/2011. Enjoy.

• What One UI Developer Learned at the Opera

  (Originally published on CDG Interactive/Innate blog, edited by Jennifer Mayne Hoppe)

  Images of the Met production of Shostakovich’s The Nose, produced by William Kentridge –
  Google Search

  A lot of people think of user interface (UI) developers as “tech guys,” but I see myself more as a designer. At its base, design is about solving problems. So I’m really a designer who solves problems through programming. Like any designer, I have to think creatively—and I often find inspiration from the wide world OUTSIDE of my cubicle. (Yes, despite appearances to the contrary, I can function away from the office from long periods of time, like a cubical lungfish…)

  Take, for example, a recent Saturday I spent at The Metropolitan Opera. I watched a performance of an opera titled The Nose. Composed by Dmitri Shostakovich, in 1930, the opera is about an official who wakes up and find his own nose missing, only to find out that it has full life of its own (as well as higher status than he does). The music and the singing were well done, but was really got my attention was the production’s design.

  The design was conceived by South African artist William Kentridge, who is well known for his work with stop animation from drawings and paper cutouts. In this production, Kentridge melds his own aesthetic with historically appropriate references from the 1930s. Specifically, the set design follows the artistic strain of Russia a movement was about breaking and re-interpreting of artistic conventions like the revolution that spawned it.

  Kentridge enhanced the on-stage elements by projecting stop animations into the production. Projected onto the back of the set, the animations looked like early abstract shape animations of the same period in which the opera took place. Then Kentridge mixed the animations with live film and archive film footage. Rather than distracting from the action on stage, these elements truly enhanced the satirical nature of the opera.

  And that’s what really good design does. It frames the content for maximum impact and engages your attention. Great design happens when someone examines a problem thoughtfully and creates a solution that fits so well, it seems like the only solution.

  So now that I’m back “home” in my cube at Innate, I’m taking inspiration from my afternoon at The Met, and striving to find the most elegant, effective, and engaging solutions to the design and technical challenges that I’m working on.

  Such is the life of a UI developer!

• The Well-Dressed Submit Button

  (Originally published on CDG Interactive/Innate blog)

  Hello, again. This is CDG User Interface Developer Ivan Wilson with another lesson gleaned from the top of the snowy, white-capped mounds of work that keep me busy every day. As I explained in my last post, my job is about building the bridge between design and technology. I need to create things that function perfectly, look good, and are useful for users. Here’s how I tackled a recent challenge on-the-job.

  One of our clients, Mondial Assistance, is a large multinational provider of travel insurance. We’re in the midst of revising each of their national B2C sites—more than 20 sites in all, in a variety of different languages. Our core website needs to work as well for consumers in Germany as it does for consumers in Japan—and everywhere in between. And as every web pro knows, content is key.

  But what does content have to do with me, a developer who doesn’t deal (directly) with the spoken language? Allow me to explain!

  The truth is, content is inextricably tied to both design and technology. Think, for example, about the humble button on a web form, like this one. As a UI professional, I need to make sure that this button looks right from a design perspective, and also functions perfectly regardless of the browser or language.

  The simplest solution would be to just take that graphical image and turn into a submit button via HTML code. Or would it? Remember, this little button has to function across 20 sites and in multiple languages. Just imagine the following conversations…

  “Nice button. Nice style. Can you add it to the German site? Oh, don’t forget. The French site is launching next month. We need to use the same buttons there as well.”

  OK, open up Photoshop (or insert your preferred graphics program) and change the text to German. Done. Fine.

  Repeat again…this time in French.

  Repeat again…this time in [insert local language here]

  Before you know it, you’re creating 20 versions of the same button. And that’s just one button on the site. Take into account all of the other buttons that reside on the site, and it becomes an algebra problem: (# of buttons) x (# of languages) = massive headache.

  Let’s take a step back and look at the problem again.

  We need a submit button that is:

  1. Editable – It needs to be easy to translate and manage across sites
  2. Usable – We do not want to create problems or lock out the user, preventing them from finishing their task

  Graphical buttons are out. Sure, I could always use a linked image with a Javascript function to submit data upon clicking. But what if Javascript isn’t switched on? (Surely it won’t be on screen readers and mobile phones). Not good enough.

  The challenge is creating a default state for the button, which functions for everyone, and an enhanced state that looks perfect for top browsers.

  In the end, here’s what I did:

  1. Used an old fashionedHTML submit button
  2. Along with the button, I added an extra bit of code that displays the enhanced state:<span class=”startquote submit”><span>Start Quote</span></span>In this code, I’m using CSS to turn two tags (spans) and enclosed text to appear as the prior graphical button. And by adding Javascript, I can make this “button” act like a regular submit button.

  OK, but now we have two “buttons”. Here is where the magic comes in…

  If you load up the page (without CSS or Javascript), you are the “default” state and the standard HTML submit buttons shows up.

  Now, if you are using a top-of-the-line browser, you have Javascript and CSS well supported. That means that you are ready for the “options” state. When the HTML button loads up, you will get this functional stylized button. All along, the “default” button is still around, just hidden from sight.

  And as the topper, since the text is only text, it can be changed with a couple of keystrokes. Done right, it can stretch to accommodate different word lengths due to translation or editing. As seen below:

  Why only the Latin alphabet? What about Cyrillic? Japanese? Chinese?

  Everything works beautifully. (Well, actually, IE6 has problems with hover states…but it’s IE6, of course.)

  So, there it is. Highly stylized yet functional submit buttons – well dressed for any occasion. And best of all…useful.