He earned his master from the University of Michigan specializing in Human Computer Interaction (HCI) and has a BS in Computer Science and a background in graphic design.
I'm very excited knowing that we can now further improve our ability to designing map interfaces. Welcome on board!
- User-interface, user-experience & usability explained (by Bernard Schokman) - I think the title is misleading, it's more about "Practical design principles for UI/UX/Usability Design"
- 10 Important UI Design Considerations for Web Apps (by Marc Gayle) - try polishing the little things to make your app truly awesome
- Tools for Facilitating Feedback on Prototypes and Wireframes (by David Leggett) - What's your favorite? Why?
- How to Identify the Best Design Problems (by Joshua Porter) - About the importance of prioritization.
- A Guide to CSS Colors in Web Design (by Alexander Dawson) - Once again a great guide by Alexander; contrast, shades, hues, transparency and co.
- 40 Beautiful and Elegant WordPress Themes of May 2011 (by Madalin Tudose) - very nice collection, wordpress has come a long way and so did its front-end designers
- HOW TO: Add the +1 Button to Your WordPress Site (by Christina Warren) - if you like it or not, here is the +1 Button integration...
- Why You Should Buy Your First 5000 Twitter Followers (by Rohit) - ethical or not... love or not love... with a little help from your friends
- So you think you can build a website? (by Vitamin in Talent) - a really handy flowchart to determine if your idea will result in a great website
- The ultimate HTML5 resource guide (by Cameron Chapman) - what else to say? ultimate resouce guide!
- (More) Useful Web Usability Testing Tools (by hongkiat) - What are your experiences with these tools? Which one is your favorite? Why?
- HOW TO: Get Started With Google Analytics (by Meghan Peters) - Helps you monitor and analyze visitors, traffic sources, content, goals, e-commerce,...
- Usability Testing: What You need to Know? (by hongkiat) - read about how to structure tasks and questions
- 30 Inspiring “About Me” Pages (by Stephanie Hamilton) - yes, get inspired!
- Designing Effective FAQ Pages (by Mohammad Moradi) - use them as a last resort, but most important: make them helpful and not require another FAQ page to decipher 😉
This talk was given by Des Traynor at the MIX 2011 and is a must-see for anybody deciding to implement a dashboard or even designing one. It explains the goals of data visualization and the benefits for the business.
While the original talk is about infographics I named this article Dashboard Design because this was my big take-away and I see you guys applying this knowledge mostly to dashboards as well.
Know your Audience
For which role is the dashboard designed for?
Typical roles are:
- strategic view
- focus on long term
- high-level overview
- simple summary
- query driven analysis
- precision required
- emphasis on trends
- emphasis on correlations
- Operations & Logistics
- focus on current status
- issue & event driven
- are things ok?
Know your Domain
What is the area (domain) of your audience?
Domains could be
- Customer/technical Support
What are you trying to answer? Which questions are important?
- Percent change?
- # sales?
Know your Data
Communicate single figure
- context is obvious
- precision is required
- past & future is irrelevant to the user
Can have different states (red, green,...)
Single figure with context
Use to ask:
- How are we doing lately?
- Any problems on the horizon?
Sparklines help (trend up or down?)
Analysis of a period
Use to show:
- ...all the key moments of this month
Line chart needs lots of data points to be good, but then they are really good!
Analysis of a period versus target
Use to ask:
- Did we hit our sales figures?
- Are we fulfilling our quota?
- Is performance ok?
Actual versus target chart; focus on delta! Use bar chart.
Breakdown of a variable
Use to ask:
- What age groups are buying our stuff?
- What countries are we big in?
Pie chart becomes bad when too many entries; sorted bar chart is better; avoid decorating with colors.
Breakdown over time
Use to ask:
- How has the composition changed over the last year?
Line chart is good; stacked bar chart is really difficult to read.
Know your Visuals
Visuals are broken down into two categories: Quantity and Category.
- Lines (length, width), that's the best
- Color intensity (shades of red,...)
- Speed (only useful in motion charts)
- Line type (dashed, dotted,...)
- Color (red, blue, green,...)
- Shape (triangle, rectangle,...)
- Location (map)
Know your Style
Remove the junk (= stuff that doesn't change, e.g. gradients, noise,...). There is no reason to fight for impact, this is not a shiny print population, it's a dashboard.
The process of designing a dashboard should follow these rules (in order of importance):
- They have to say something and be meaningful
- Dashboards & Visuals evolve, i.e. a lot of data is necessary to make sense
- Start with the basics: Rows from the database
- Add insight as you need it: Sorting, comparison,...
- Add a yearly view only after a year has passed 😉
- Include insights and actions
- Consider adding projections
I design map applications for the web. I talk a lot about it but I just don't seem to find the right term for it. Should I call these applications "Web Map"? "Web Map Application"? "Mapping Application"? "Map Application"?
I decided to let my decision be driven by the people and what they are used to. Therefore I turned to Google Trends to match the terms against each other.
Mapping Application vs. Map Application
First I compared "Mapping Application vs. Map Application" (Figure 1). The shorter Map Application was the clear winner. The term mapping just doesn't seem to fly.
Map Application vs Web Map
So I decided to match the winner (Map Application) with the common term Web Map (Figure 2). While Web Map is clearly the favorite it's also evident that the term itself is on the decline which made me think whether another term is actually on the raise.
Map Application vs Map App
If Map Application cannot hold up, how about the short term "Map App"? As Figure 3 shows this expression has only been around since 2008 but it really seems to have taken off in Q2 of 2010 and has outranked the longer brother (Map Application) quite considerably ever since. I wonder how "Web App" would match against Web Map.
Map App vs Web Map
Now this comparison looks very similar to Figure 2 (Map Application vs Web Map) - just a little closer. We did expect that since Map App measured better than Map Application. The comparison (Figure 4) already hints us towards the term Map App, but let's zoom into the past 12 months to have a closer look.
Map App vs Web Map (past 12 months)
That's a really close call. It seems like the two lines in Figure 5 are converging. Is this good enough to call a winner?
Map App vs Web Map (past 12 months, USA only)
By looking at the individual regions though, I saw that the USA - which is our main market - looks slightly different. Figure 6 shows that the term Map App is actually already more popular in the USA than across all countries and languages.
At this point I think it's too close to call it a clear winner, but what we've learned is that
- it's safe to remove the term "web" from map
- the term "map" is better than "mapping"
- the trend leans toward Map App, so let's start calling your Web Map "Map App".
What do you think? How do you call your map apps?
- Using “Preventive Medicine” Against Bad Clients (by Maria Malidaki) - Love the section about useful documents
- Accessibility and web innovation – a talk (by Christian Heilmann) - Chris makes a case for deeper involvement in the actual development of cool technology that is accessible (or cool development that makes technology accessible)
- Architecture v. Web Design (by Dmitry Fadeyev) - Dmitry on the essence of architecture to create space and how this is (or is not) applied to web design
- What’s new for web designers – Apr 2011 (by Cameron Chapman) - Once again, great collection of apps for designers, thx Cameron
- Are your users S.T.U.P.I.D? (by Stephen Turbek) - Get Smart (and download the info poster)
- Essential Facebook Etiquette: 10 Dos and Don’ts (by bellefoong) - Funny how we need to learn social etiquette again, huh?
- How To Design The Perfect Form (by Brian) - Extensive collection of examples and best practices for forms
- Integrating UX into Agile Development (by Janet M. Six) - State your requirements as user stories: As a [role], I want to [action based on a feature], so [user goal].
- Mobile Application Development: Web vs. Native (by Andre Charland, Brian LeRoux) - Excellent research on web versus native development for mobile. Sooner or later we all need to understand the ins and outs of mobile dev.
- A new micro clearfix hack (by Nicolas Gallagher) - updated hack to clear floats without resorting to using presentational markup
- Web Developers vs. Web Developers (Infographic Remix) (by Cassie McDaniel) - nice remix of the original web designers vs web developers infographic by Shane Snow
What makes a Map App successful?
It sounds so easy and obvious. It's the basic, the 101 of analysis, Input-Analysis-Output. Usually I skip over introductions of books and that's especially true when I know the subject matter like GIS, but for some reason I started reading "The Esri Guide to GIS Analysis, Volume 1" (by Andy Mitchell, Esri Press) and it struck me like lightning, this is exactly what we should be doing:
You start an analysis by figuring out what information you need. This is often in the form of a question. Where were most of the burglaries last month? How much forest in each watershed? Which parcels are within 500 feet of this liquor store? Being as specific as possible about the question you're trying to answer will help you decide how to approach the analysis, which method to use, and how to present the results.
Other factors that influence the analysis are how it will be used and who will use it. You might simply be exploring the data on your own to get a better understanding of how a place developed or how things behave; or you may need to present results to policy makers or the public for discussion, for scientific review, or in a courtroom setting. In the latter cases, your methods need to be more rigorous, and the results more focused.
Frame the Question
Framing the question correctly will tell you:
- The problem you are trying to solve
- The approach of the analysis you want to use
- Which methods to use
- How to present the results
Who & How
Other factors that influence the analysis are:
- Who will use it?
- How will they use it?
- How are the results being used?
All this will impact your design, on what you should focus and how to lay the elements out on the page. Consider:
- Get the user to the location they are interested quickly
- Create clear call to action that allows the user to get answers to his/her question
- Simplify the methods on how to do analysis
- Provide means to use or export the results