Michael Gaigg: Über UI/UX Design

24Aug0

Design Fail #01 – Floor Picker

Posted by Michael Gaigg

So I'm starting a new series on design failures and plunder - send me your findings if you come across something and I will publish it here (giving you full credit 😉

First of are two "Floor Pickers" - thanks to Michael Wilburn for sending them over!

Who knows what's wrong with those designs??

Floor Picker #1

Floor Picker #1

Floor Picker #2

Floor Picker #2

11Aug0

How to mark optional Form Fields?

Posted by Michael Gaigg

Mark Mandatory or Optional fields?

This is a question that seems to re-surface every year or so. Should we mark mandatory fields or optional fields? And how?

Examples

Here are 2 examples:

Version 1

Version 1

Version 2

Version 2

Version 1 marks optional fields (with the language 'optional') and Version 2 marks mandatory fields (with an asterisk).

Solution

Version 1 is the clear winner. While in the past it might have been a common practice to mark mandatory fields we now know that users generally tend to assume that a form field presented to them needs to be filled out (i.e. is mandatory). Therefore we don't need to mark them as mandatory but instead let the user know that a field does not to be filled out (i.e. is optional).

The only exception to this rule is if the majority of form fields are optional; in this case it's ok to reverse the rule but to me this also bears the question if the form could be improved. Why would all these optional fields need to be presented to the user? Can we get away without them? Or progressively disclose them?

One more hint, the word "optional" works really well, definitely better than an asterisk that needs to be explained somewhere (actually missing in our Version 2 above), and still be ambiguous at first.

7Aug0

Accessibility Resources Summary

Posted by Michael Gaigg

Let me know in the comments if you feel anything is missing!

Getting Started

Documentation

Validators & Tools

Communities

  • Slack: a11y
  • The A11Y Project - A community-driven effort to make web accessibility easier
  • WebAIM Community - Email discussion list, newsletter, blogs by WebAIM (Web Accessibility In Mind)
16Jun0

Job Opening: UI Engineer

Posted by Michael Gaigg

We are hiring for a position on our team in Professional Services at Esri. Please ping me directly mgaigg AT esri DOT com. Please include a link to your online portfolio or samples of recent work.

Job Description

Join our team of UI engineers and UX designers and accept the challenge to discover new ways of solving complex business problems by still meeting the end users needs. Work with top consultants and back-end developers in our Professional Services division to generate concepts and design solutions that are focused, unique, innovative, and represent the best in GIS business applications. Use your unique combination of visual skills and technical background to inspire design and create groundbreaking user experiences that have a direct impact on our user community.

Responsibilities

  • Design, architect, and develop innovative, engaging, and visually striking user interfaces.
  • Solve complex business problems and communicate through wireframes and high fidelity mockups.
  • Implement rapid prototypes and business application front-ends using latest web technologies.
  • Work closely with software developers and consultants to ensure a working end-to-end solution.
  • Serve as a resource and mentor to members of the design team and our Professional Services division.

Minimum Qualifications

  • BA/BS degree in Computer Science, Human-Computer Interaction, Human Factors, or Graphics Design.
  • 2 years of practical experience in a related field.
  • Experience in JavaScript, CSS and HTML.
  • Proficient with web and mobile development, including responsive design and interaction patterns

Preferred Qualifications

  • Ability to interface with customers, gather requirements, and apply design best practices.
  • Solid understanding of user experience (UX) methods and a keen eye for graphical design.
  • Experience taking a concept from research to sketch and final implementation.
  • Excellent problem-solving skills and familiarity with technical constraints and limitations.
  • Proven ability to collaborate, communicate, and defend your conceptual ideas and design rationale.
  • Proficient with industry standard design tools (e.g. Photoshop, Illustrator, Sketch)
  • Must be self-motivated to prioritize and manage workload and meet critical project deadlines.
Filed under: Uncategorized No Comments
25May0

VIDEO: User Experience and Interface Design for Map Apps

Posted by Michael Gaigg

Recording from Esri Developer Summit 2017 (Palm Springs) - Tech Session

This session will cover design principles specific to mapping applications. Real-world examples serve as a guide to creating solutions that are more useful, compelling, and easy to use. You will receive first-hand insights into our design methodologies, techniques and processes and learn tips and tricks on how improving the cartography of your map will make your application truly stand out.

Tagged as: , , , No Comments
23Mar0

UI/UX/Carto/DataViz Community for Maps on Slack

Posted by Michael Gaigg

So we’ve started a slack community for Maps UI/UX/Carto/DataViz. The group was born after organizing the UI/UX special interest group (SIG) meeting at 2017 Esri DevSummit in Palm Springs. 38 participants - partners, distributors, users – came not knowing what to expect but with questions that go beyond what Esri offers or teaches. So I thought: it takes a community to raise a child...

This slack community is a great place to:

  • listen to our partners and users (be interested, not interesting)
  • network and share with designers/developers from other mapping companies
  • show our great work and cool stuff AND get instant feedback
  • help others with their problems

Request an invite at http://www.designingmapinterfaces.com/patterns/join-maps-ui-ux-community-on-slack/ and feel free to forward to your buddies 😉

Please join https://maps-ui-ux-community.slack.com/ and participate. Hope to see you there...

Cheers
Mike

7MarOff

Esri DevSummit 2017 – References

Posted by Michael Gaigg

Here the references mentioned during the talk "User Experience & Interface Design for Map Apps":

Map UI Patterns
UI Patterns & Best Practices for Map Applications
http://www.designingmapinterfaces.com/

Demo: Durango Trail Finder
https://github.com/alaframboise/durango-trail-finder

Calcite Maps Styler Template
An ArcGIS configurable application for creating, styling and sharing modern 2D and 3D map apps. Built with ArcGIS for Javascript API v4, Calcite Maps and Bootstrap
https://github.com/Esri/calcite-maps-styler-template

Calcite Maps
A Bootstrap theme for designing, styling and creating modern map apps
https://github.com/Esri/calcite-maps

MDL (Material Design Lite)
https://material.io/

Canvas Flowmap Layer
https://github.com/sarahbellum/Canvas-Flowmap-Layer

Leaflet Migration Layer
https://github.com/react-map/leaflet.migrationLayer

Basemaps on ArcGIS
http://www.arcgis.com/home/search.html?q=basemap

USA Media Basemap
http://www.arcgis.com/home/item.html?id=228eaa6a4cd34528b443fb71178c8545

User Experience and Interface Design for Map Apps from Michael Gaigg
Filed under: References Comments Off
13Jun0

Welcoming Ryan Watkins to our UI Design Team

Posted by Michael Gaigg

I’m very pleased to announce that Ryan Watkins has joined our UI Engineering team at Esri.

Ryan earned his BS in Computer Science from University of California Riverside and attended the Art Institute in Los Angeles for Game Art & Design. His previous jobs equip him with an extensive background in front-end development (full stack) and hands-on experience in game design (unity).

Ryan is the author of the book "Procedural Content Generation for Unity Game Development"

He has a keen eye for application and graphics design and we are looking forward having him as integral part of the team, division and company. Welcome on board!

5Feb0

Use FontAwesome font in WPF apps

Posted by Michael Gaigg

What seems to be so trivial on the web feels like jumping through hoops in WPF. But yet again, it's actually that difficult really. Here is how to do:

Custom Fonts in WPF

  1. Download the TrueType font (.ttf) you are interested in, e.g.
    WPF_fonts_FontAwesome01

    Find system name

  2. Find the system name of the font which is most likely different to the filename
    WPF_fonts_FontAwesome02

    Find system name

  3. Add the file to your WPF solution preferably in its own directory like 'fonts'
  4. Check the properties of the font file and make sure the Build Action is set to 'Resource'
    WPF_fonts_FontAwesome03

    Check properties

  5. Add the style reference to App.xaml

Here is how this little snippet will look like:

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?

Page 1 of 2412345...1020...Last »

About Me

Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.

He has been designing map applications for 15 years and is author and curator of UI Patterns for Maps.

Categories

Popular Posts

Error: Feed temporarily unavailable.