Michael Gaigg: Über UI/UX Design

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

24Sep0

Free Materials from User Interface 16 conference

Posted by Michael Gaigg

Free Download! Get 9 featured talks (video/audio/pdf) and 8 workshops (pdf only) from last year’s User Interface 16 conference (by UIE).

Featured Talks

  • Culture You are Soaking In It - Steve Portigal
  • Design Challenges CSS Answers - Stephanie (Sullivan) Rewis and Greg Rewis
  • Designing for Mice and Men - Bill Scott
  • Experience Leadership - Kim Goodwin
  • Input Moving Beyond Forms - Luke Wroblewski
  • Meeting Design for the Design Process - Kevin Hoffman
  • The Business Case for (or Against) UX - Brandon Schauer
  • The Many Uses of Application Maps - Hagan Rivers
  • The Unintuitive Nature of Creating Intuitive Designs - Jared Spool

Workshops

  • Designing Rich Interactive Experiences - Bill Scott
  • Designing with Scenarios - Kim Goodwin
  • Good Design Faster - Brandon Schauer
  • HTML5 and CSS3 What Designers Really Need to Know - Stephanie (Sullivan) Rewis and Greg Rewis
  • Immersive Field Research Techniques - Steve Portigal
  • Kicking Off Projects Right - Kevin Hoffman
  • Mobile Web Design - Luke Wroblewski
  • Simplifying Complex Applications - Hagan Rivers

How to get the free recordings?

It’s easy. Just submit your email by Tuesday, September 25, 11:59 PM ET and you’ll get last year’s UI16 talks and materials for free. No tricks, no quantity limits. We’ll send you an email with details on how to access this bundle of goodness.

23Jul0

The World as we know it

Posted by Michael Gaigg

I just love the stereotypes used to create the world as we know it map of the world by Osama Haj jaj). True or not, that's what we associate with these countries and you better have a sip of Tequila and a Taco when you travel to Mexico or watch a soccer game when in Brazil.

The world as we know it

19Jul0

Job Posting: UX Designer & Visual Designer

Posted by Michael Gaigg

I'd like to forward two job postings by Sooriaraj Jeyaraman who is trying to fill two positions for the design team of the new Location Analytics initiative.

Feel free to submit your resume directly to Sooriaraj Jeyaraman. Thanks!

User Experience Designer

Overview / Job Description

Esri, the leader in geographic information systems (GIS) and mapping technology, is looking for an exceptional user experience designer.

Join a dynamic and energetic team working to bring Esri mapping and location analytics to the world of Business Analytics. Working alongside a focused team of product managers, developers and other user experience designers you will be responsible for setting new standards for the way users visualize their data on a map and perform analytics with maps.

The ideal candidate will be a practical-minded perfectionist who has the creative skills to grasp & simplify complex business processes through the creation of extremely intuitive user interfaces. While these are business systems, the user experience must be as easy and intuitive as the best consumer experiences.

You must be a natural collaborator who is used to develop designs in a team environment with multiple stakeholders. A passion for elegant design and incorporating new and innovative technologies is a must. Exceptional attention to detail and a good eye for aesthetics are crucial.

Requirements / Skills:

  • Strong, demonstrated understanding of User-centered design methodology
  • Experience in utilizing user research to drive design decisions
  • Solid skills in interaction design, user research, conceptual development, prototyping and usability testing
  • Experience in creating process flows, wireframes and mockups to effectively conceptualize and present detailed interaction behaviors
  • Experience in creating detailed user interface specifications
  • A strong working knowledge and experience in using tools such as Balsamiq, Axure, OmniGraffle, Photoshop/Illustrator, PowerPoint, Flash Catalyst at various design stages
  • Worked and designed Desktop, Web and Mobile applications & solutions
  • Experience with usability assessment techniques including usability heuristics, contextual enquiry and conducting lab-based usability testing
  • Worked in a cross functional team environment in an agile development process
  • Handled multiple projects at the same time
  • Experience collaborating and working closely with the UX team members.
  • Experience communicating effectively to the stakeholders
  • Experience in creatively solving complex problems within aggressive deadlines
  • A portfolio demonstrating past work experience and relevant User-Centered Design solutions

Experience:

  • A Master’s degree in Human Factors, Human Computer Interaction, Usability Engineering, Cognitive Psychology or such related field
  • Minimum two years of work experience in user experience design

Visual Designer

Overview / Job Description

Esri, the leader in geographic information systems (GIS) and mapping technology, is looking for an exceptional visual designer.

Join a dynamic and energetic team working to bring Esri mapping and location analytics to the world of Business Analytics. Working alongside a focused team of product managers, developers and other user experience designers you will be responsible for setting new standards for the way users visualize their data on a map and perform analytics with maps.

The ideal candidate will be a practical-minded perfectionist who has the creative skills to grasp & simplify complex business processes through the creation of extremely intuitive user interfaces and engaging visual and motion designs. While these are business systems, the user experience must be as easy and intuitive as the best consumer experiences.

You must be a natural collaborator who is used to develop designs in a team environment with multiple stakeholders. A passion for elegant design and incorporating new and innovative technologies is a must. Exceptional attention to detail and a good eye for aesthetics are crucial.

Requirements / Skills:

  • Strong, demonstrated understanding of User-centered design methodology
  • Experience in utilizing user research to drive design decisions
  • Exceptional skills in Photoshop, Illustrator and other layout and design tools.
  • Knowledge and experience using animation software such as Flash and/or After Effects
  • Good general understanding of web and mobile platforms and experience producing designs and assets for them
  • Excellent understanding of general design principles and practices
  • Ability to create balanced, well formed layouts in print and interactive projects
  • Strong background in typography and color theory
  • Familiarity and facility with icon creation and icon systems
  • Top-notch communication skills
  • Efficient time management
  • Strong design portfolio that shows great potential

Experience:

  • Bachelor's degree in graphic design, web development or an equivalent combination of education and experience
  • 1-2 years experience in professional interactive design capacity
Page 4 of 24« First...23456...1020...Last »