Michael Gaigg: Über UI/UX Design

29Jul0

What is Good Design?

Posted by Michael Gaigg

Let's start with a warming up exercise: Which of these 2 examples do you think is the best design? A, the airplane cockpit of an A380? Or B, the all-too-familiar Google interface?

12Dec0

Job Posting: User Interface Engineer

Posted by Michael Gaigg

My team is looking for a talented UI designer with a solid technical background. Please refer to details below and contact me for questions.

Send your resume to mgaigg at esri dot com!

General

Use your technical background and innovative visual design skills to simplify complex business processes through the creation of intuitive and visually engaging user interfaces.

Department

Professional Services - Applications Development Services

Responsibilities

  • Create sophisticated, imaginative, efficient, and visually striking interfaces for front-end solutions
  • Design reusable UI components by utilizing or building UI framework components
  • Develop storyboards, mock-ups, and prototypes to communicate ideas for navigation and interaction models
  • Evaluate requirements and initial mock-ups; make technology recommendations that support optimal construction, maintenance, and performance.
  • Translate complex functional and technical requirements into detailed architecture and design prototypes
  • Ensure cross-browser/platform integrity of web designs
  • Work closely with the back-end teams to create a working end-to-end solution
  • Define, maintain, implement, and enforce style guides, standards, reusable templates, and best practices for client-side software development
  • Leverage the latest developments in Internet technologies
  • Serve as a technical resource and mentor

Requirements / Skills

  • Bachelor’s or Master’s in computer science, graphic design, visual design, human factors engineering, interaction design, information architecture, or other relevant field
  • A minimum of two years of experience in user interface design, information architecture, user-centered design methodology, and implementation in complex enterprise environments
  • Significant and proven experience demonstrating innovative UI visual design skills
  • Ability to balance designs with the understanding of technical constraints within a software development environment
  • Experience in utilizing user research to drive design decisions
  • Highly proficient with cross-browser/platform CSS, HTML, XHTML, and JavaScript
  • Extensive experience using JavaScript libraries like dojo and jQuery
  • Good understanding of User Experience (UX) and User-centered Design (UCD) methodology
  • Ability to take a concept from sketch to final implementation
  • Ability and willingness to take ownership of projects and help drive them to effective implementation
  • Exceptional attention to detail, organizational, communication, and presentation skill
  • Passionate about novel user interface design and software development

Recommended Qualifications

  • Experience with GIS/ESRI products and solutions
  • Experience with .NET, C#, Silverlight, and Expression Blend
  • Experience with JSP, Java web frameworks, Flash, and ActionScript
  • Experience with Linux, PHP, and MySQL
  • Proficiency with Adobe Creative Suite including InDesign, Photoshop, and Illustrator
  • Ability to interface with customers, gather requirements, and implement new solutions

Employment Fraction

Full-time

Work Location

Esri Headquarters, Redlands, CA

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?

7May0

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.

26Apr0

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.

Context

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

Culture

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.

Technology

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.

Cost

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.

Sponsor

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.

Lifespan

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.

Compliancy

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.

28Jan0

Redesigning our internal Team Site

Posted by Michael Gaigg

Paper sketch draft

Paper sketch draft

I could have titled this post "The importance of sketching" or "Paper and pencil are still hip". The truth is, I didn't even realize about the fact that I do a lot of sketching on paper, as a matter of fact I just recovered my beautiful drawing from going into the shredder. I think the beauty of sketching on paper is that the ink just flows. Sometimes you don't even know where it will lead you when you start. It keeps you minimalistic, not too much detail can be crafted on a tiny piece of paper (at least I can't).

Graphical Design

Graphical Design

Once I had the draft in hands, it was just a matter of whipping the right amount of bootstrap with some custom HTML and funky JavaScript, voila, our internal team site came to life... So you could say that prototyping can be done in HTML without the need for wireframes, I still doubt that. Without at least the genius idea on paper I wouldn't be able to code as efficiently as I did.

The coding part was only the cherry on the pie, a quick logo, a menu, a hero unit, some blocks and fancy graphics, tadaaaaa. I used PHP to create a 'controller' with content being included on the fly. Yes, good old content, still working on that piece, but no worries, I got it under control 😉

How do you design? Do you sketch/wireframe? Or straight to code?

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 🙁

27Mar0

Esri’s First Homepage – Esri.com Anno 1994

Posted by Michael Gaigg

Esri.com anno 1994

Esri.com anno 1994

Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):

1994 - www.esri.com launched

Gotta love this!

Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link.

Can't believe how far we've come in only 20 years.

5Mar0

Wireframing – what a waste of time… not!

Posted by Michael Gaigg

See my notes below the slides...

Slide 1

Wireframing is a planning tool.

Use it whenever you need to turn a concept into design.

As a direct implication: your design is only as good as your strategy/concept. That means: ask the right question!

Slide 2

Demo (no need to describe to you the benefits, just see)

Tips:

  • mockupstogo
  • mybalsamiq
  • don't have templates, but have stencils (symbols)
  • cropping
  • keyboard
  • 960 grid system
  • notes
  • from rough to detail
  • design to scale if possible
  • please no more lorem ipsum

Slide 3

Let me show you some case studies to illustrate how and when wireframing can help. While usually I recommend 2 or max of 3 rounds of mockups, during proposals where requirements are vague it’s more important than ever to kick around ideas and bring the visuals in front of key stakeholders and decision makers. So we might end up with 6 or 7 rounds.

Slide 4

And this is our final mockup that we felt confident fits the target audience of an executive.
You see the basic elements: header, navigation, dashboard, Maps.

Can you guess which technology this is based on?

Slide 5

Reviewer Server asked us to help designing the RS Health Check Dashboard which was used and presented at the User Conference 2011. This effort was designed (including screen comps) within 2 days and implemented within 2 weeks.

Validate your designs!!!

Slide 6

It will save you

  • Energy
  • Time
  • Money

Because the majority of UI changes made before coding begins.

Slide 7

A picture/sketch is so much richer than describing.

Communicate visually.

Different disciplines need to interweave/overlap (designer needs to influence the requirements and a pm needs to influence designs). I prefer a PM coming to me with a sketch of the design saying: "Oh, here's some requirements that I have, and here is sort of high level what I'm thinking about.“

Slide 8

Helps prioritize and add emphasis to the important user stories. Identify gaps/possible wholes and not needed functions.

Nail down scope and functionality.

Avoid building features that turn out to not be needed in the first place. Limit the amount of gotcha’s along the way, “ah, we need to be able to save this damn thing, let’s add another button”.

Slide 9

What I like about lo-fi wireframes is that it's obvious that design is not done, looks unfinished, and nothing is set in stone.

Don’t get hung up on discussions about design details.

Don’t loose focus of the main goal and core tasks!

Picture: Detail '57 Chevy

Slide 10

Unless there is a good reason – proposal work, research, marketing – max. 2 iterations!
‘Finalize’ and move on! There is plenty of room for fine-tuning along the way

Slide 11

A sketch is a sketch (after serving its purpose it’s still only a by-product, like a white-board drawing). Don’t end up spending more time updating all the sketches in all the places in all the documents – that’s not the idea of sketching.

Get sign off!

Slide 12

As simple as it looks (or I make it look) – sketching/prototyping is only as good as the person that does it. It doesn’t replace experience and hard work.

Slide 13

The two links mentioned during the demo:

Page 1 of 41234