Michael Gaigg: Über UI/UX Design

24Jan0

Esri Cup 2013 – We are the Champions…

Posted by Michael Gaigg

Winners of the Esri Cup 2013: Red Bull Redlands

Winners of the Esri Cup 2013: Red Bull Redlands

Finally a team was able to break the spell, GiS (Geeks in Soccer) were beaten for the first time in Esri Cup history and I am glad to say that it was us that eliminated them in a strong semi-final game (7:5) just to pave the way into the final.

The trophy found its way to where it belongs: my office ;)

The trophy found its way to where it belongs: my office 😉

Once again the tournament was great fun and an amazing "work" event. For the first time we played indoors which is a whole different game that favors the technical, futsal-style players.

23Jan0

IIS doesn’t recognize .json file

Posted by Michael Gaigg

If you ever wondered why you get a nasty 404 page not found or your app is struggling retrieving a file of type .json, here is why and how to solve it.

Issue

IIS doesn't recognize file of type .json; That's because by default IIS won't serve files that aren't of a known MIME type.

Solution

Set MIME type

Set MIME type


Add a MIME type to IIS (either per site or at server level) to allow it to serve that type of file.

  • Open IIS Manager and select server properties
  • Click the "MIME Types" icon
  • Click "New"
  • Enter Extension = "JSON" and MIME type = "application/json"

You are all set!

Tagged as: , , , No Comments
17Jan0

The best way to predict the future is to shape it

Posted by Michael Gaigg

This is an off-topic post which is nevertheless close to my heart and should concern us all: Climate Change.

With explicit permission I will re-publicize the keynote speech given by Prof. Hans Joachim Schellnhuber (director of the Potsdam Institute for Climate Change) at the state dinner in Doha, Quatar as part of the World Climate Summit COP 18, in presence of UN secretary-general Ban Ki-Moon, UNFCCC-chief Christiana Figueres, and Qatar's head of state the Emir H. H. Sheikh Hamad bin Khalifa Al Thani, accompanied by his wife H. H. Sheikha Moza bint Nasser.

This event marked the beginning of the high-level segment of the negotiations. He talked about "the three convenient untruths" of the public debate on climate change - and about "the laws of nature" which was much applauded.

The Laws of Nature – and the Laws of Civilization

Your Highnesses,
Your Excellencies,
Ladies and Gentlemen!

If decision makers wish to adopt evidence-based strategies, they must not ignore the
evidence...

That is why I am most grateful to the hosts of this event for giving me the opportunity
to provide you with several crucial scientific insights regarding the climate-change
challenge. As you all know, the former US Vice President Al Gore disseminated in
2006 the famous narrative about an “Inconvenient Climate Truth”. Only two years
later, a dubious counter-narrative started to spread, propelled by an alliance of actors
interested in the vindication of inaction with respect to climate stabilization. This story
revolves around three “Convenient Untruths”.

The first one of these reads: “There is no global warming caused by mankind.”

What is the concrete evidence? Well, among the 13,950 peer-reviewed papers on the
subject which were published between 1991 and 2012, only 24 do not confirm that
there is a major anthropogenic greenhouse effect. In other numbers, the expert
information identifying mankind as the primary cause of contemporary climate
change outweighs the contradicting one by a ratio of

99.87 % : 0.17 %.

This is as far as objective research can get: only a lie could boast a 100 %
consensus...

Conclusion: Climate physics offers no excuse for inaction.

The second convenient untruth maintains: “Breaching the 2°C line will cause no
significant harm.”

What is the evidence? Well, a recent flagship report of the World Bank portrays the
dire consequences of our planet warming by 4°C or more. The Potsdam Institute was
heavily involved in this integrated state-of-the-art assessment, and even we, the
researchers, were shocked by our findings. One crucial insight is that there will be no
sound economic and social development in the tropics and subtropics in a world
without climate protection.

Expressed in simple numbers again, the thermal difference between

4°C and 2°C

might translate into the cultural difference between a failing and a stable global
society, between a fair and peaceful planet and a world torn apart by climate injustice
and the thence-triggered aggressions.

Conclusion: Moral philosophy offers no excuse for inaction.

The third convenient untruth is the most vicious one and goes like this: “It’s too late
for climate stabilization at an appropriate level.”

Various arguments – often rather bizarre ones – are put forward to underpin that
declaration of environmental defeat. One prominent line of reasoning refers to the
ratio

1 : 193.

These numbers reflect the fact that 194 sovereign nations are negotiating here in
Doha an international agreement under the UN Framework Convention on Climate
Change, and the cynics ask, why should one single nation make a constructive step
forward if the other 193 drag their feet? Because of this ongoing global “prisoner’s
dilemma”, we have already passed the climatic point of no return, they say.

What is the evidence? Well, as the latest scrupulous analysis shows, the 2°C line can
still be held if every country makes an ambitious, yet realistic contribution. It goes
without saying that disengagement will not save the world. This simple insight can be
expressed in a sentence that rephrases the legendary admonishment by John F.
Kennedy:

“Don’t ask what global climate protection can do for your country; rather ask what
your country can do for global climate protection!”

And there are indeed many nations that pioneer the transition to sustainability or try
to break the mould of business-as-usual. Let me mention just two of them:

Germany, my home country, has embarked on a bold journey that will make
renewable energy and resource efficiency the basis of its entire economy. And Qatar,
the host of COP18, has started now to massively invest into climate-smart agriculture
relying on solar desalination of sea water. These thriving nations move forward not in
order to reduce, but to enhance their prosperity.

Conclusion: Political economy offers no excuse for inaction.

Let me approach my bottom line now. As a physicist my work is guided by the laws of
nature. Extending these laws into the realm of civilization for the sake of climate
protection I can state the following principles.

The 1st Law of Capitalism: Don’t kill your customers!

The 1st Law of Socialism: Don’t kill your comrades!

And, overriding everything else:

The 1st Law of Humanity: Don’t kill your children!

Our generations will be judged by these laws in history. Please keep that in mind in
whatever you do – here in Doha and at home.

29Nov0

Welcoming Jayson Ward to our UI Design Team

Posted by Michael Gaigg

This week Jayson Ward (LinkedIn) joined our team as a UI Engineer.

Jayson earned his Bachelor degrees in Studio Art (summa cum laude) from the UC Irvine and in Geography from the University of North Carolina at Greensboro. In his previous jobs he worked as a web developer at the UC Santa Cruz and the County of Riverside. For the last two years he has been part of the Esri Design Center and we are lucky enough to transfer all his graphic design skills to our group.

I'm very excited seeing his design and web development skills being applied to designing map interfaces for Esri Professional Services now. Welcome on board!

6Nov0

HTML5 Boilerplate

Posted by Michael Gaigg

HTML5

When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy 🙂

This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!

The boilerplate bundle includes:

  • Directory structure (index file, img dir, js dir, css dir, etc.)
  • CSS reset using normalize.css
  • HTML5 feature detection through Modernizr
  • jQuery JavaScript framework (link to Google's CDN + local fallback)
  • Google Analytics snippet (just replace your own id)
  • Other really useful tips and tricks for better development
5Nov0

Happy 4th Anniversary

Posted by Michael Gaigg

I can't believe yet another year has passed and I haven't given up adding stuff to this blog - and this is only because of YOU! I'm excited hearing about your experiences and your ideas, reading your feedback and suggestions. Thanks so much and keep 'em coming!

Here is a short list of highlights from the past year and some of my personal favorites!

Highlights from last year

Personal Favorites

29Oct0

Immediate Window in VS 2012

Posted by Michael Gaigg

The immediate window is an essential tool during debugging, I use it all the time. Just now I accidentally closed it and couldn't find it anymore by looking in View > Other Windows.

Don't panic, there is an easy way to get it back:

  1. Press Ctrl+W, A
  2. This will open the command window
  3. Type "immed"
  4. Voila, you got your Immediate Window back

BTW: in the immediate window you can type "cmd" and you will get the command window 😉

26Oct0

Stop the Rotating Banner Sliders

Posted by Michael Gaigg

Stop

Stop

I'm not a big fan of the (auto-)rotating banner carousels but I have never been really able to articulate why. So I looked beyond my personal taste horizon and found two excellent points of view by my colleagues Neal Dinoff and Art Zippel.

Analytics

Neal Dinoff (Esri Marketing Analytics Manger) offers some quantitative insights:

Most people visit a website with a specific objective. They scan the homepage for any link they believe will get them closer to accomplishing their objective. Few stay on a homepage long enough to view a slideshow. Using the CrazyEgg analysis of click timing on the Esri.com homepage, the majority of visitors click a homepage link within 5 seconds. Our homepage slides rotate every 7 seconds. That means most visitors to Esri.com never see the second and third slide in rotation. At a conference I recently attended, IBM’s web metrics analyst confirmed their site had the same problem.

and Neal continues talking about organizational motivations of including carousels and explains that

Organizations like homepage slideshows because it's a way of placating everyone who desperately believes their special interest deserves/requires homepage presence. From the user's perspective, they are generally worthless. They don't solve a user problem or meet a user need. Homepage slideshows are usually the opposite of user-centered design.

User-centered Design

Arthur Zippel recently shared an article with a video (5 minutes) talking about how typefaces directly affect readability. As a result Art started looking at autorotating banners from the behavioral side and whether similar effects would apply and add to distraction and overall loss of comprehension:

Because my primary focus here at Esri is the website I'm curious if there is any correlation with the findings in their very specific study and comprehension. We know that website visitors scan content when they are on a web page even when they are on a desktop with no fear of crashing their chair into their coffee cup or being pulled over by the office texting police. We know that distractions play a large role in attention, and that attention plays a large role in comprehension. I think autorotation banners make it more difficult for users to focus on page content because they create a distraction away from page content.

Knowing this, it is worth considering that if, one of the primary reasons for autorotation banners are a desire to manage minimal screen real estate, then is it the most effective solution? From a user-experience perspective, it think the widespread use of autorotation banners is interesting. Based on specific content on a page (link) a user indicates a desire to see additional specific content only to be presented with a distraction (autorotation banner), this doesn't seem like a completely successful experience. And with Halloween coming up, might I say it could even border on diabolical and horrific 😉 Remember, this is an intentional action on the point of those who manage websites.

I am constantly reminded that a widespread, common, popular practice by very large companies has absolutely no intrinsic correlation to UCD best practices. If you believe that companies always conduct valid testing for what they put on a website and that what they deploy is transferable to all other companies and their goals, then I have a bridge for sale.

Solutions

  • Build a meaningful site structure and navigation architecture.
  • Provide relevant headers and content.
  • Use and show links that speak to the user's intention for visiting the site.
  • Spare the huge banner images in favor of smaller, more focused teaser pics.
  • Avoid thinking in organizational terms aka we need to satisfy manager XYZ and put up a nice banner image about his cause.
  • Stop thinking about what could be interesting to your users but rather identify the context in which your target audience looks for something on your page and how they arrived (through search engine, direct mailing, etc.)

Tim Ash offers even more reasons: Rotating Banners? Just Say No!

What are your Thoughts/Experiences?

22Oct0

10 MyBalsamiq Tips & Tricks

Posted by Michael Gaigg

After having used Balsamiq for some years now I was excited to try MyBalsamiq which is basically Balsamiq on the web which allows for better sharing and collaboration with your team and clients. This blog article intents to share my experiences and gotchas of using MyBalsamiq with you.

Tips & Tricks

Set expectations

Setting the stage is key to a successful use of MyBalsamiq. Explain to your team members and clients that wireframing helps to communicate ideas and the WHY and WHAT we are doing by intentionally stripping out visual fidelity so one doesn't get distracted with the HOW.

Create Versions

I typically create the first version of any design using Balsamiq for desktop. I then upload it to a project folder, dub it v1 (version 1) and share it with the team (and client) so they can start commenting or proposing alternate versions as part of the thread. After reviewing and discussing the proposed changes, missing items, misunderstood elements, etc. I create a revised version which instead of simply adding another comment/alternative I upload once again, this time naming it v2 (version 2).

Again I open it up for a round of comments. I strongly recommend finalizing the design at this point by creating a document that states the purpose of the screen, specifies any requirements and uses the final mockup as the proposed design. Move on! If you for whatever reason you cannot move on, then this might be a strong indicator that you might have a problem in your project structure.

Involve your clients

Yes, I create beautiful designs just to see them being destroyed by ignorant clients. Well, I guess it's the other way around, designers tend to be attached to their intellectual creation more often than they should. Well, chicken or egg, involving your client in the process is always a win-win situation. So do it, don't hesitate having your design dissected, your ideas challenged and your assumptions validated!

Notes are your Friends

Sometimes I start a wireframe with an empty frame and a bunch of sticky notes. I slowly fill the sticky notes with bullet points of requirements or anything I feel belongs into this space. Only later I start designing the actual components that make up the screen.
In the same way I ask my clients to use sticky notes to annotate anything they feel needs to be said about the design, missing items, assumptions that aren't reflected, new ideas, etc. It really helps commenting on concrete items rather than abstract word constructs. Remember, sticky notes are your best friends.

Use Assets

Assets are grouped items with a name that can be used like any other sketch control. Assets can range from custom frames, re-usable templates, industry-specific or device depended controls, etc. Spend some time creating assets and share them either site-wide or on a project by project basis. Have a look at the popular free map controls I've created some time ago to see what I mean.

Holistic vs. Focused

I almost never get into too much detail upfront. That's for multiple reasons:

  • It's really easy getting hung up in details
  • More often than not you will find yourself wasting precious time on something that is still in flux and bound to be thrown away anyway
  • You lose sight of the bigger picture (navigation architecture, overall layout)
  • It becomes harder and harder to make changes without rethinking your concept/layout

This tip becomes a rule when working in an agile environment. You need to design the holistic view upfront, have a solid concept in place that describes how you will integrate the pieces later. Think a lot and validate (e.g. usability testing on your wireframes)!

Start the holistic design as soon as you have a good handle on the available user stories and (ideally) have it done before the first sprint planning meeting - I've heard the term Sprint 0 used a lot.

Encourage the sprint master to create a "Design UI" task which will be added to each epic or even user story that requires user interface design - this is the place to design details.

Outline Workflows

Many times I create a concept sheet or experience workflow diagram directly in wireframes. I use simple sticky notes or window controls and connect them with arrows to show how a user will flow through the application. Very often these boxes later become pages that I need to design which is kinda neat because I can directly link these pages from the workflow diagram. Managers really appreciate this high-level view and are able to comprehend better the overall structure of the site/application. You will see the quality of questions improve as well 😉

Create Prototypes

Your clients and project managers love this feature: launch prototype. We've used it before on the desktop but now we have it available online using a private url. There is also a great article about how to integrate with the leading user testing tools (Usabilla, UserZoom,...).

History

Version history seems to be nice to have but it actually turns out to be indispensable. A designer makes decisions based on observations and changing requirements (and sometimes taste ;)). Being able to compare versions over time proves to be the best line of argumentation when it comes to explaining why we reached this conclusion?. Sometimes it is less the "how we did it" rather than the "how we got there" piece!

Get MyBalsamiq for (almost) free

Full disclosure: I'm not getting a dime for saying this. But here is how you turn your existing desktop licenses into an (almost) free subscription: "...existing Mockups for Desktop customers will be able to apply half of what you paid for Mockups for Desktop towards myBalsamiq credit."

Any invited user to myBalsamiq can use the online version for free basically saving on desktop licenses. While not as slick as desktop, it's a nice treat.

Wishlist

Check-in / Check-out

I'd really love to see a version control system that can be connected to your desktop version. Basic functionality would be:

  • Get latest version(s) from myBalsamiq (and synchronize with desktop)
  • Check-in a newer version from desktop (and propose as new)
  • Show me changes for all files (i.e. compare your desktop version to myBalsamiq)

Right now I find it really difficult to get the latest version from the web, modify on desktop and update existing thread with newer version. Balsamiq team: any plans for such an integration?

High-level (conceptual) view of all screens

Above I've talked about sketching the conceptual workflow. While starting in v2.2 the Balsamiq team added a 'site map' control (very cool btw), this doesn't really fit my need to show the workflow. I guess for now I need to stick to my connected notes 🙁

15Oct0

Imagine You Are Somebody Clever

Posted by Michael Gaigg

A Vision and Role-Model

One can argue about the scientific value of the space jump endeavor which without doubt was a big payoff for Red Bull and Felix Baumgartner. But one thing shouldn't be missed: somebody with vision worked hard, risked a lot and by combining skill and technology achieved something outstanding. The jump was well prepared, a team of engineers and specialists worked over 5 years to make it happen.

"I want to inspire the next generation. I want to be in mission control with someone younger than me wanting to break my record." Felix

What seemed to look easy was a leap to remember, especially in times when we feel overwhelmed or scared, disillusioned or tired. Take a step back, zoom out, breathe and jump...

Imagine you are somebody clever

But here is the real lesson: Try to be a hero, try to be a genius, try to be somebody clever! This isn't as crazy as you think, it's actually the outcome of a popular research study by Robert Hartley where he and his team split children into two groups asking them the exact same questions except one group of kids was asked to imagine they were somebody clever, to "act as if they were clever".

The outcome was that this group performed significantly better than the other, as Hartley states: "Adopting another's perspective enables one to explore other ways of acting, thus in one's imagination one can temporarily disengage from the habitual perspective one usually assumes. This allows the person the opportunity to give considered thought to what he might do (p. 191) and actively reconstruct the situation from this other perspective." And further "[...] the sense of identity exerts a controlling influence over the intellectual choices one makes, the mental abilities one is willing to reveal and what one feels one can or cannot do in particular circumstances."

The Lesson

Remember the following picture and how Felix must have felt. He did it, you can do it too!

Next time you feel nervous...

Next time you feel nervous...

Page 4 of 24« First...23456...1020...Last »