Michael Gaigg: Über UI/UX Design

16Jul1

Welcoming Kevin (Yuan) Gao to our UI Design Team

Posted by Michael Gaigg

This week Kevin (Yuan) Gao (LinkedIn) joined our team as a UI Engineer.

Kevin earned his Master of Science (MSc.) degree in Human Computer Interaction (HCI) from the University of Michigan. He also received a Bachelor of Business Administration (BBA) from the Shanghai Jiao Tong University.

I'm very happy that Kevin decided to join our team and am looking forward to seeing his HCI and design skills being applied to designing map interfaces for Esri Professional Services. Welcome on board!

16Feb2

Proposing: Spatial Dashboard

Posted by Michael Gaigg

Dashboards are everywhere, they can be found in business apps, management information systems, administration tools. They all have the following in common, they show summaries, key trends, comparisons, and exceptions. Usually all of above relate to key performance indicators or to derived (rolled up) data.

The "traditional" Dashboard

Traditional Dashboard (published by directionsmag)

Traditional Dashboard (published by directionsmag)

In the spatial space the data is rolled up to geographical (mostly political) units like continents, countries, or states and therefore provide a graphical presentation of the current status (temporal) in relation to its geographical location. This is typically displayed as a thematic map side by side with summaries, charts, gauges, graphics, or tables.

While this approach is completely valid its biggest weakness is the disconnect of visual perception to visual presentation of information, i.e. the intent of communicating geographical information isn't clear or at a minimum ambiguous. How do the data charts relate to the data shown on the map?

The proposed "new" Dashboard

Spatial Dashboard, Example 1

Spatial Dashboard, Example 1

The approach is simple: instead of disconnecting data visualization from geography (which is why you have a map in the first place) roll up the data (metrics or key performance indicators) by geographic boundary (high level strategic area) and create and place visuals right on the map. All this will lead to an at-a-glance view of the strategic needs and relation to their geographic location.

Spatial Dashboard, Example 2

Spatial Dashboard, Example 2

While there are no general guidelines on how to visually design a spatial dashboard - every dashboard is unique and driven by business needs and data capabilities - the following are considerations and elements of good design:

  • Keep it simple with minimum distractions: lightweight or no basemap
  • Show current status and trends of key performance indicators using easy to understand visuals
  • Adjust visuals to current scale and consider to limit zoom levels to 2 or 3 (global, country, detail)
  • Utilize charts to support interaction (drilling down) with the data

Next Steps

I highly recommend reading my blog article about that outlines considerations about your target audience, domain, data, and visuals to be used.

I hope this article inspired you so please let me know what you think and anything else that comes to mind after reading this article.

11Feb1

Download: User-centered Design Menu

Posted by Michael Gaigg

User-centered Design Menu

User-centered Design Menu

Welcome back!

This time I literally have a special treat for you: the User-centered Design (UCD) menu. It's like a menu that your clients can choose from and range from inexpensive ($) to rather expensive ($$$$).

Tip: Please digest slowly and most importantly: ENJOY!

Download: UCD Menu (PDF)

Entrees

Every Proposal is the entrance to something great.

Paper Prototyping $$

Hand-drafted mockups and sketches, carefully selected and laid out, sautéed with your ideas.

UX Storyboarding $

A portion of your end-users and their needs
topped with their stories and actual problems.

Heuristic Evaluation $

Draft designs, wireframes or fully implemented systems
evaluated by a choice of 2-3 hand-picked experts.

Survey $

Freshly picked set of questions, sliced to identify
your users and their needs, served with lots of insights.

Main Courses

Let us delight your users with our house specialties.

Rapid Prototyping $$$

Lightly functional demos or prototypes,
served in high or low fidelity, grilled to perfection.

Usability Testing $$$

Home-made end-user observations that feed
right into the next design iteration, served by 3-5 users.

Focus Group $$$

Choice of nutritional opinions and beliefs,
shared and discussed by a group of people.

Field Study $$$$

Real end-user behavior observations collected by
following people in their daily job and environment.

Card Sorting $$$

Delicious index cards sprinkled with individual
concepts, tossed into meaningful piles, served hot.

Server Log & Search Log Analysis $$

Crisp log statistics piled high with insights of
user’s navigation and search behavior. Very tasty!

Chef’s recommendation:

Make the User a stakeholder!
Involving the user early and throughout the cooking process will improve the experience and usability of your app and save you and your client money.

18% gratuity added to projects of 250k or more.

Please ask your server for the recommended selection of user-centered design methods that suits your project.

12Dec4

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

30Nov1

Happy 5th Anniversary

Posted by Michael Gaigg

Thanks once again for encouraging me to write this blog, this really keeps me going! THANK YOU!

The last year was amazing. We were fortunate enough to hire two outstanding and very talented individuals, Jayson Ward and Cody Lawson, which made the team stronger and better than ever before :)

I also started a blog about Map UI Patterns where I summarize and publish my experience by describing common patterns, principles, and practices when working with map apps.

Highlights from last year

Map UI Patterns

29Jul1

Welcoming Cody Lawson to our UI Design Team

Posted by Michael Gaigg

This week Cody Lawson (LinkedIn) joined our team as a UI Engineer.

Cody earned his Bachelor degree in Web Design & Interactive Media from the Art Institute of California. As a freelancer he has helped many clients with his skills in web & graphic design as well as ecommerce & user interface development.

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

Tagged as: , , 1 Comment
26Jul0

The Future of Travel Sites?

Posted by Michael Gaigg

What an amazing 2 minute video presentation of What a Travel Site Should Look Like (thanks to James Killick for sending this link) as featured in Wired magazine.

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?

7May2

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.

26Apr1

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.

Page 1 of 2312345...1020...Last »