Michael Gaigg: Über UI/UX Design

4Jun0

10 Design Lessons learned from my Sons

Posted by Michael Gaigg

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...

Patience

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".

Joy

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

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?

24Apr0

Touch Event Support for jQuery UI

Posted by Michael Gaigg

Swipe

Swipe

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:

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)

29Feb0

Windows 8 UX design guidelines

Posted by Michael Gaigg

The Windows 8 UX design guidelines are out. They are part of the Dev Center for Metro style apps and provide some nice learning resources that include

  • Design Principles - Understand the basic principles of great Metro style app design.
  • UX patterns - Learn how to correctly implement common patterns in Metro style apps like navigation, commanding, and touch interactions.
  • UX guidelines - Discover recommendations and requirements for building Metro style apps with the proper look, feel, and user-interaction model.
  • Downloading design assets - Get started designing apps quickly with a portfolio of reusable wireframes, redlines, fonts, and other useful design resources.
  • Assessing usability of apps - Assess your app's design to ensure the user experience is outstanding, and that users will find it useful, usable, and desirable.