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?
The airplane cockpit is an example of a great design for its intended target audience. Sure, a pilot will need some training and I don't pretend to be able to understand it, but I don't think we could simplify the interface without removing important functionality, would you agree?
The Google interface is clean and simple with lots of white space, but the real reason why it is a great design is because it meets google's business need of selling advertisement. Google does not want any distraction or even waste of bandwidth.
Strategy: End-User Needs
So in order to create a great design we have to invest time to define our UX strategy. First we need to ask
- who our users are,
- what these users are trying to accomplish or in other words what is in it for them and
- then how successful they are doing that.
This typically requires research.
Strategy: Business Needs
The second aspect is to understand what the business needs are.
- Where are we now?
- Where do we want to go?
- How do we get there?
- And most important of all how do we define success?
This is really essential for later stages in a project in order to make objective design decisions. We capture all the answers in a short document that we call the UI Strategy OneSheet (Download Word Template (.dotx)) which is literally only one page.
What is good Design?
So what is good design? What is the meaning of life of your application?
Good design is when it has a purpose, when it is useful to somebody.
Defining the UX strategy and capturing what success means is the basis for creating purpose.
This is the coolest thing I've seen in a long time. A real-time integrated augmented reality system to physically create topography models which are then scanned into a computer in real time, and used as background for a variety of graphics effects and simulations. #gottahave
More info about this project: http://idav.ucdavis.edu/~okreylos/ResDev/SARndbox/
Here the video for my talk about best practices for designing map applications on the web from Esri DevSummit 2015.
Every map application has two characteristics in common: it tries to solve a problem, and it needs a user interface (UI) to do so. This session presents best practices for solving well-known design problems and how to create easy-to-use and compelling interfaces. - See more at: http://video.esri.com/watch/4316/user-experience-and-interface-design-for-web-apps
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!
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
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
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.
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
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.
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!
Use your technical background and innovative visual design skills to simplify complex business processes through the creation of intuitive and visually engaging user interfaces.
Professional Services - Applications Development Services
- 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
- 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
- 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
Esri Headquarters, Redlands, CA
Thanks once again for encouraging me to write this blog, this really keeps me going! THANK YOU!
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
- Web Mapping Application Interface Design Best Practices and Tools | Slides | Follow-up
My Tech session talk at the Esri DevSummit 2013 in Palm Springs, CA
- 10 Design Lessons learned from my Sons
- Top 10 Design Influencers
- The best way to predict the future is to shape it
Map UI Patterns
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!
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.