Michael Gaigg: Über UI/UX Design


10 Design Lessons learned from my Sons

Posted by Michael Gaigg

Take a bite out of geography...

Take a bite out of geography...

The following lessons are based on my observations and experiences with my sons. I left out explaining the design meaning or how a lesson may get translated into design practice which I believe is mostly obvious but also left to ones imagination and situation.


My kids grow up in a time when content and interaction is omnipresent. Watching TV is starting a DVR recording. On-demand, RedBox, YouTube are only additional channels that allow content to be streamed at will. The "new generation" will demand immediacy, waiting isn't part of their vocabulary.

Forget the Theory

The tips won't stop, everybody seems to have their own solution and books just make it harder. Just one thing is certain, all the book-smartness won't help you raise your own children. You need to get your hands dirty, learn the hard way, improve and adjust. Become street-smart, do it and do it again. And after years you still cannot add 'Father' to your resume (unless the fact that your DNA got duplicated is enough for you) because it's not a skill or attribute, it's a state of being, you will never end learning and it will never end (hopefully).

Answer the obvious questions

I get the same questions over and over again. "Are they identical?" - People tend to ask/need to know what is most obvious. It's like walking into a personal library, you just gotta ask if the person has read all the book - of course not, it's a library, it's there to look up something when you need it. But still, people need to ask the first thing that comes to their mind and that's most often the obvious. And yet you will need to answer. Get over it and free these poor souls. Answer the obvious question to get to the juicy ones.

Stop and recognize beauty

Last summer we were walking the beautiful streets of old town Salzburg, Austria. My son stopped in front of a violinist to listen to her street performance. Having had the plan in mind to get to the ice cream store before sunset I dragged him away. Only later it settled that sometimes we overlook the true beauty of everyday things, our life is too fast. Children have this innate, pure sense, plenty to learn!

Terrible two's

It's not about the tantrum or hissy fit, that sudden outburst of temper, often used to describe anger at something else trivial. Sometimes something - like feeding pizza to the cat - makes perfect sense to him but doesn't necessarily fit into our world. We have to observe, understand the meaning of the situation and decide how far we can go and when to cut it (or sometimes just let it be).

Touch is in

If something doesn't respond to touch it is broken. Having learned to operate my Android phone my 2 y/o son was frustrated and without understanding that the monitor of my workstation didn't react to touch AND swipe. Mouse? WTH...


I want to have his patience, repeating the same video, sequence, word, or task over and over again. But one can only master something through practice, and that requires diligence and patience. Both can be (re-)learned and remembered. Or like golfing legend Arnold Palmer used to say: "The more I practice, the luckier I get".


Should be a no-brainer, but my sons laugh and enjoy the small and simple things, but mostly the words, sounds and interactions that come across pure and authentic. They feel when I'm "into it", not distracted, bored, absent, etc. This passion translates into good designs, make your users feel special. Priceless!

Feedback / Responsive

Kids want feedback, a simple repeat of whatever they were mumbling helps already to show them that we 'understood' them. It's like ordering at McDonalds where the clerk at the window repeats my order, it helps me feel at ease that the other side will actually stack my burger without pickles. Kids will continue asking for you until you answer, and believe me, they will make their voices heard if you don't answer immediately.


Imagination is basis of creativity and innovation. Being able to imagine situations is essential to understanding problem spaces and situations. "Pretending to be" is the current #1 game of my son. He is so into imagining to be "somebody else" that he can start crying when something conflicts with something that is meant for "him". Zooming into my office, bystanders probably think I am crazy when they see me staring at a blank wireframe for 1/2 hour. I'm not the type of guy that starts sketching the heck out myself, I prefer deliberating all possible situations, workflows, alternatives (at least the ones that I can come up with) in my mind first. It's like a chess player that thinks multiple moves ahead and then takes the 'best' move according to the current situation and knowledge.

What are your thoughts and experiences? Anything else to add?


Video: Map App UI Design

Posted by Michael Gaigg

Here is the video from the tech session I held at the Esri DevSummit 2013 in Palm Springs, CA.

The session teaches participants best practices for reviewing, conceptualizing, designing and building user-centered mapping applications in a competitive business environment. Methods, techniques and tools for improving the user experience and designing useful and appealing front-end interfaces will be discussed.


Top 10 Design Influencers

Posted by Michael Gaigg

Design Influencers

Design Influencers

Designing user interfaces isn't about sexy graphics, shiny buttons or slick navigation (alone).

It's about taking care of the influential factors that make or break the success of a web application or website.

It's a delicate balance of user needs and business requirements, deeply understood and carefully melted into a design that is loved by all stakeholders (the end-user included ;) )

The sum of all the design influencers are the constraints that will box your design decisions. That's not a limitation, it's liberation!

The Design Influencers are:

User Needs

Whatever it is that you are planning to build, it needs to be useful to somebody and has to solve a real-world problem. This end-user need is the reason of existence, it's the meaning life.


In which context will your users access the site? Is it through mobile devices on the road? Then a shopping cart will be less important than driving directions or store hours and screen elements need to be more prominent.
Do users typically enter your site through search? Then your landing pages need to convey who you are and what you do because users won't have seen your fancy homepage (and probably never will).


Even though cultural difference across the globe become really important if you build an international site, I rather mean business or sociological culture, i.e. if you plan on building an intranet site but the company's culture doesn't encourage to report failure or spending time helping other employees, then a forum probably isn't the right choice to offer.

Business Needs

While your client is ideally well informed about their end-user's needs, they also have to run a business, satisfy stakeholders, fulfill legal mandates etc. And that's when compromising your perfect usability is sometimes necessary and important.


What's the available technology? Very often the vendor or client platform of choice dictates the choice of technology, e.g. a Microsoft shop will prefer .NET and Silverlight (oh, long time I haven't mentioned Silverlight so I mention it again) or Flex.

Market Opportunities

If something isn't viable or possible today that doesn't mean it won't be in a year. So think ahead and design your site accordingly, i.e. extensible, modular, maintainable.
What I've found is that sometimes it's worth including an "upsale" item into your mockups, something that the client hasn't explicitly asked for but may open their eyes and hopefully wallets ;) Mostly you may defer these items to a later phase but it gives everybody a long-term vision and as a side-effect supports designs that are extensible.


It's been said that anything can be done if you only have enough time and money, but the real world doesn't spin like that. Your design is constrained by a budget - and that's a good thing because it forces you to stay realistic finding the right balance between innovation and familiarity.


If the main sponsor is Esri (my current employer) I better make sure that there is a map on the interface. What sounds like a designer's nightmare is the name of the game.


How long will your design need to stand the test of time? Is it 1 year or 10? A demo doesn't need to be as polished or thought-out as a content-management system that will take over the client's communication platform. It is the classical "let's get it done" versus "let's think about this a last time". I've written a more detailed article about Lifespan as an important Design Decision.


Accessibility is a law and therefore cannot be removed from the equation. Your fancy design elements might just not be (or too expensive to be) compliant with the law. Acquire knowledge about accessibility laws (e.g. section 508 in the US), their implementation specifics and know how that translates into your design.


Touch Event Support for jQuery UI

Posted by Michael Gaigg



Problem: jQuery UI doesn't support touch gestures

We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!


Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...

Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.js"></script>

Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)

Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)


Recommended usage of Dojo Topic (Publish/Subscribe)

Posted by Michael Gaigg

Communication between multiple object instances can be implemented using the global messaging mechanism of dojo/topic. It's like a centralized hub for publishing and subscribing to topics that are not bound to a particular object.

While the dojo reference guide documents a good usage example, I believe and strongly encourage you to implement pub/sub with the following signature:

// widget:
require(["dojo/topic"], function(topic){
	topic.publish("/filter/changed", this, { title: "My Blog", author: "Michael Gaigg" });
// controller:
require(["dojo/topic"], function(topic){
	topic.subscribe("/filter/changed", function (sender, args) {
		console.log("Title: " + args.title + " by " + args.author);

While the topic.publish allows you to define any combination of parameters I found passing two parameters - sender and args - the most consistent and useful:

  • The first parameter is the sending object, i.e. the widget instance (this) that originates the publish
  • The second parameter is an object literal of arguments

One could use the sender to implement conditions within the subscriber. But the biggest advantage by far is that the signature is always the same and the amount and order of the arguments can be neglected. The code becomes more readable and easier to maintain.

One more note: Any widget can publish topics but only the controller should subscribe to these topics and then redirect actions back to the appropriate widgets, that is without introducing widget-specific logic at the controller level.


T-Shirt: Trust me I’m a Designer

Posted by Michael Gaigg

Here is a must-have for all design geeks out there: Trust me I'm a Designer Tee Shirt!

And believe me, it's not only a vision test, it's a test in your faith as being a designer :)

Btw. I'm a designer and I approve this message.

Trust me I'm a Designer Tee Shirt

Trust me I'm a Designer Tee Shirt


Follow-up FAQ from my Talk

Posted by Michael Gaigg

I've received many questions after my talk about Web Mapping Application Interface Design – Best Practices and Tools at the Esri DevSummit in Palm Springs.

Following I try to answer them a little more in depth:

I'm a one-man-show, what can I do?

It's very common that one doesn't have the means to build up a UI/UX team that covers all skill sets needed for a comprehensive coverage of all design methods. In that case I recommend focusing on your strengths (what a surprise!) and trying to grow into the area you see the highest chances for adaption and integration.
Generally wireframing is a good choice because it's easy to learn, cheap to implement and gain high interest, it's also a fundamental step in any design.
Rapid prototyping is really important too. Get to know JavaScript frameworks like jQuery and dojo, familiarize yourself with CSS and CSS preprocessors.

When is Community Maps going to go live?

Community Maps is currently in private beta, planned to be released this month (April 2013). We are working on improving the registration pages next, then potentially expanding to other programs (Community TIGER, Community Hydro, ...)

Why should I use Balsamiq for wireframing

There are plenty of wireframing tools out there - you can even use PowerPoint (download my free PowerPoint stencils) - Balsamiq just happens to be very cost-effective (US 79.- per license), easy to handle and with a boat load of controls that can even be extended (download free map controls).
I love Balsamiq for other reasons as well, see some tips and tricks that make my designer life easier.

Why not use MS SketchFlow?

Besides some pros and cons I think the biggest no-no for using SketchFlow is the tight integration with MS Blend and therefore MS Visual Studio. A designer doesn't (and if he does, he shouldn't) think in development details and best practices, code re-usability or testing. Read more of my thoughts on that subject on MS Sketchflow meets Sketchables.

Why are 3 wireframe iterations enough?

Usually I recommend 2 rounds of wireframes (more rounds are ok during proposals). If you still cannot move on after 3 rounds of wireframes this is typically a good indicator that your project has some sort of underlying problem that you should detect and address right now.
Typical problem areas include:

  • No real user need
  • Too many cooks in the kitchen
  • Poorly defined requirements
  • Undecided project manager
  • Problematic client
  • Missing domain knowledge
  • Bad designer
Filed under: Conclusions 1 Comment

Web Mapping Application Interface Design – Best Practices and Tools

Posted by Michael Gaigg

These are my slides from the tech session held at the Esri DevSummit 2013 in Palm Springs, CA.

The session teaches participants best practices for reviewing, conceptualizing, designing and building user-centered mapping applications in a competitive business environment. Methods, techniques and tools for improving the user experience and designing useful and appealing front-end interfaces will be discussed.


Innovative Interfaces: Future of Farming

Posted by Michael Gaigg

John Deere has done a very nice job with a video called "Farm Forward – Future of Farming". The subject is directly related to design work I'm doing right now and it's fascinating to see that - futuristic features aside - most of the capabilities like combining weather data with GIS and field scouting exist already. Love it!



Posted by Michael Gaigg

When moving domains there will be a need to replace old url's and other strings to reflect the new names.

In my case the images of my blog articles were still pointing to the old domain which didn't physically exist anymore. Result: broken images and links.

Quick Solution

A quick SQL replace does the trick:

UPDATE blog_posts SET post_content = REPLACE(post_content, 'old-server.com', 'new-server.com') WHERE post_content LIKE '%old-server.com%'

This SQL statement is perfect for updating wordpress blogs that moved to a different domain/host.

Easy and efficient :)

Page 2 of 2312345...1020...Last »