Michael Gaigg: Über UI/UX Design

4Jun3

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.

Immediacy

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

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?

28Nov0

Asking for Feedback

Posted by Michael Gaigg

Generally it's not a good idea to listen to your users; it's better to observe their behavior and actions. When you do ask for feedback though, be careful to not end up with a sack full of new requirements.

Some phrases (from the hilarious video) that I'm only too much familiar with:

  • I'm just throwing things out there
  • You are the author (designer), you know best
  • I am making sense, right?

from Asking for Feedback

7Jun1

Highlights of Week 22/2011

Posted by Michael Gaigg

12Oct4

MS SketchFlow meets Sketchables

Posted by Michael Gaigg

What is SketchFlow?

Sketchflow (a feature of Microsoft Expression Ultimate) is a prototyping tool that allows designers to create sketchy looking mockups, publish them and in that way gather feedback from their clients/colleagues.
As SketchFlow is tightly integrated into Expression Blend, any sketched control is behind the scenes already a Silverlight control that can be styled and consecutively used by your .NET application in Visual Studio. Any SketchFlow project can be converted into a production project, so the path from sketch to production-ready solution appears to be paved...

Why you should use SketchFlow

Like any other prototyping tool, SketchFlow

  • makes it clear that this is a prototype, it looks like drawn on paper or whiteboard
  • is a fast, easy and cheap way of putting visual ideas in front of your clients
  • allows you to link sketched pages together to create a navigable site structure
  • provides SketchFlow player for easy way of navigation through your pages without building any code
  • gives reviewers the ability to add comments directly from the SketchFlow player, making it easy to collect feedback

Why you should not use SketchFlow

During my research I found an article by Jag Reeha who argues that just because you can it doesn’t mean you should:

The aims and mindsets used to create a SketchFlow prototype are different from how you would go about creating a real world production solution.

  • A designer doesn't (and if he does, he shouldn't) think in development details and best practices, code re-usability or testing. A designer should flat-out ramble on UI elements and workflow, navigation architecture and content. Any thought that is put into structuring the solution, creating reusable controls and resources or even laying the page out in a way it can scale are counter-productive and ineffective.
  • The price tag is considerably higher (Estimated Retail Price $599 USD) than other prototyping tools like Balsamiq ($79 for a single-user, multi-computer license).
  • Another big downer is the limited amount of available sketch controls, about 17 if I counted right. Here is where Sketchable comes in handy.

What is Sketchables?

Sketchables

Sketchables

Sketchables (by Philipp Sumi) is a simple framework complemented by a set of controls that allow you to quickly create common controls in a matter of seconds. Sketchable extends the limited set of out-of-the-box sketch controls offered by SketchFlow.

Download Sketchables Preview

How to add mockup controls to your Expression Blend library?

Sketchable files to copy

Sketchable files to copy

After downloading the Sketchable libraries using the link above, copy the files (in the case of sketchables copy the complete /Sketchables/Build/SL/Debug directory, including the Design folder) to your Silverlight install directory. Well, while you are at it already, enable standard mockup controls for any SketchFlow project and copy them to the same target directory as well.

Here is how to do it:

  1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug

  2. Add copied files (including Sketchables) to the following destination:

    Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >

  3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

Your experiences?

What are your experiences and opinions on designing with SketchFlow or Sketchables?

6Jul0

Highlights of Week 26/2010

Posted by Michael Gaigg

10Oct0

What is Usability?

Posted by Michael Gaigg

Before I dive into guidelines and tips of designing and implementing usable websites I feel it is important to define and outline what Usability is. Please allow me at this point to cite several sources that I find essential.

Usability is the

  • Effectiveness (accuracy and completeness to achieve goals)
  • Efficiency (resources expended in relation to the accuracy and completeness)
  • Satisfaction (comfort and acceptability of the work system to its users)

with which specified users achieve specific goals in particular environments. [ISO9241]

Basic Principles

Alan Dix formulates in his book 'Human-Computer Interaction' that above definition can be concluded into three basic principles:

  • Learnability (the ease with which new users can begin effective interaction and achieve maximal performance)
  • Flexibility (the multiplicity of ways the user and system exchange information)
  • Robustness (the level of support provided to the user in determining successful achievement and assessment of goals)

Five Quality Components

Jakob Nielsen uses human characteristics to extend these principles by saying:
Usability has five quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?

with the addition of 'utility' (functionality): Does it do what the user needs?

Implications for Usability Design

Implications drawn out of above definitions are that pages shall strive (devote serious effort or energy) to provide:

  • Consistency of presentation and controls across the site
  • Logical and natural organization of information (clear structure, systematic, clear and meaningful labels)
  • Contextual navigation (how much information is given for providing a context for the user; where is he/she in the site? Where can he/she go? How can he/she go back?)
  • Efficient navigation (the amount of time and effort the user needs to exert in order to move around the site)
  • Adequacy of feedback (are user interactions clear, are requests answered, do commands elicit the right response?)
  • Searchability (how effectively the site content can be sought in search engines?)
Suggested reading: