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...
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
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
These are my slides from the tech session 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.
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.
Flickr has a very slick way of showing the geolocation of a photo (thanks to Nicholas Furness for sending me this finding!). As you move your mouse towards the center of the map on the right panel of a photo page, the map zooms in a couple of times.
<div id="photo-story-map"> <a data-ywa-name="Location, Taken in, Map" class="photo-story-geopanel-trigger ywa-track" onclick="return F.actionQueue.queue_click(this.id);" id="photoGeolocation-smallmap" href=""> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&clat=58.276828&clon=13.602856&zoom=4&imh=100&imw=300&mflags=YKM" id="photo-story-map-zoom-out" style="opacity: 1;"> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=7&z=7&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011" class="defer" id="photo-story-map-zoom-in" style="opacity: 0;"> <img width="300" height="100" alt="" src="http://gws.maps.yahoo.com/MapImage?appid=FlickrDev&v=2&clat=58.276828&clon=13.602856&lat=58.276828&lon=13.602856&zoom=14&z=14&imh=100&imw=300&h=100&w=300&mflags=YKM&year=2011" class="defer" id="photo-story-map-zoom-street" style="opacity: 0;"> <div id="photo-story-image-dot" class=""></div> <canvas id="photo-story-dot" width="16" height="16"></canvas><canvas id="photo-story-copyright" width="300" height="100"></canvas> </a> </div>
I dubbed this feature "Progressive overview map". If anybody knows the real name, please let me know, this is a cool feature!
In a recent discussion it occurred to me that there are really only 3 ways to trigger "edit mode", i.e. tell the map that I want to add/edit/remove something:
The edit mode is either turned on or off. Turned off is the default mode and requires explicit action by the user to turn it into edit mode with the advantage that user is aware of this switch, which might also trigger other behaviors to be turned off (map tips,...) or removed from the map (scalebar, overview map,...)
Use "binary" if editing is a major part of your app so that this distinction becomes crucial.
On is a subset of the binary case where the edit mode with all its functionality is always on by default and any interaction with the map allows users to select features to be edited or deleted, or add something new.
This case might conflict with other mouse events (e.g. a left mouse button up event usually triggers a map tip) and therefore needs to be very well thought-through before implementing.
Use "on" if you can fit it into your workflows and you can oversee and have control over most/all map functions.
Selecting an edit tool through a toolbar for example is the classical way of setting the map into edit mode. It speaks very loud GIS expert to me and seems to not being familiar to the average map user, i.e. it may be difficult to find the right tool from the sway of icons, learn (and remember) that this action is required AND know that the mode needs to be turned off again after being done.
Use "selection" if your map app already has a toolbar and you want to be on the safe side.
How do you prefer doing it?
What are your preferences/experiences?