Proposing: Feature Spotlight
Feature Spotlight
Let's say you want to highlight a feature on the map, e.g. a user has searched for a landmark, typically one would place a marker on the map and zoom to that location. The downside is that the user still needs to 'search' for the visual clue (the marker) on the map.
I think the missing link here is to 'black out' the whole map and only highlighting the area surrounding the landmark. This provides a natural focus on the feature and is a really elegant alternative I believe.
Optionally one could use the modal area to add a description or even photos (get creative for yourself). And yes, leave the marker also for browsers that don't support CSS3.
The code is as simple as could be, here is the CSS class called 'spotlight':
.spotlight { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; border: 0; pointer-events: none; /* this is the sweet spot */ background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to (rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0))); background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px); } |
And here the HTML defining the spotlight container:
<span id="spot" class="spotlight"></span> |
Implementation inspired by CSS3 Spotlight.
Amazing: National Geographic World Map by Esri
Yes, I'd rather be skiing in the Austrian Alps as well... 
Amazing map!!
This map is designed to be used as a general reference map for informational and educational purposes as well as a basemap by GIS professionals and other users for creating web maps and web mapping applications.
The map was developed by National Geographic and Esri and reflects the distinctive National Geographic cartographic style in a multi-scale reference map of the world. The map was authored using data from a variety of leading data providers, including DeLorme, NAVTEQ, UNEP-WCMC, NASA, ESA, USGS, and others.
Link to map contents on ArcGIS online: National Geographic World Map
Wireframing – what a waste of time… not!
See my notes below the slides...
Slide 1
Wireframing is a planning tool.
Use it whenever you need to turn a concept into design.
As a direct implication: your design is only as good as your strategy/concept. That means: ask the right question!
Slide 2
Demo (no need to describe to you the benefits, just see)
Tips:
- mockupstogo
- mybalsamiq
- don't have templates, but have stencils (symbols)
- cropping
- keyboard
- 960 grid system
- notes
- from rough to detail
- design to scale if possible
- please no more lorem ipsum
Slide 3
Let me show you some case studies to illustrate how and when wireframing can help. While usually I recommend 2 or max of 3 rounds of mockups, during proposals where requirements are vague it’s more important than ever to kick around ideas and bring the visuals in front of key stakeholders and decision makers. So we might end up with 6 or 7 rounds.
Slide 4
And this is our final mockup that we felt confident fits the target audience of an executive.
You see the basic elements: header, navigation, dashboard, Maps.
Can you guess which technology this is based on?
Slide 5
Reviewer Server asked us to help designing the RS Health Check Dashboard which was used and presented at the User Conference 2011. This effort was designed (including screen comps) within 2 days and implemented within 2 weeks.
Validate your designs!!!
Slide 6
It will save you
- Energy
- Time
- Money
Because the majority of UI changes made before coding begins.
Slide 7
A picture/sketch is so much richer than describing.
Communicate visually.
Different disciplines need to interweave/overlap (designer needs to influence the requirements and a pm needs to influence designs). I prefer a PM coming to me with a sketch of the design saying: "Oh, here's some requirements that I have, and here is sort of high level what I'm thinking about.“
Slide 8
Helps prioritize and add emphasis to the important user stories. Identify gaps/possible wholes and not needed functions.
Nail down scope and functionality.
Avoid building features that turn out to not be needed in the first place. Limit the amount of gotcha’s along the way, “ah, we need to be able to save this damn thing, let’s add another button”.
Slide 9
What I like about lo-fi wireframes is that it's obvious that design is not done, looks unfinished, and nothing is set in stone.
Don’t get hung up on discussions about design details.
Don’t loose focus of the main goal and core tasks!
Picture: Detail '57 Chevy
Slide 10
Unless there is a good reason – proposal work, research, marketing – max. 2 iterations!
‘Finalize’ and move on! There is plenty of room for fine-tuning along the way
Slide 11
A sketch is a sketch (after serving its purpose it’s still only a by-product, like a white-board drawing). Don’t end up spending more time updating all the sketches in all the places in all the documents – that’s not the idea of sketching.
Get sign off!
Slide 12
As simple as it looks (or I make it look) – sketching/prototyping is only as good as the person that does it. It doesn’t replace experience and hard work.
Slide 13
The two links mentioned during the demo:
- Mockups to go: https://mockupstogo.mybalsamiq.com/projects
- MyBalsamiq: https://www.mybalsamiq.com/
Highlights of Week 02/2012
Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 
Cheers!
- Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
- 15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
- Profiling CSS for fun and profit. Optimization notes (by kangax)
- Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
- Password strength verification with jQuery (by Jim Nielsen)
New Year’s Resolution: Gift Books (don’t lend them)
I used to have a rule (you know, a rule helps you solving a problem in your life that you then never have to worry about anymore) that said: never lend a book, always gift it!
I don’t know why or when I stopped applying this rule but my thinking behind it is:
- You value the book but somebody else values it more at this time
- Lending it will consume your energy remembering who you lent it to end when
- The other person constantly feels bad for not returning the book to you up to a point when it becomes real guilt and shame
- The other person cannot really enjoy the book in fear of marking a page or paragraph or leaving coffee stains
So the solution is: Gift the book! In that way both parties feel good.
Highlights for Week 48/2011
- 15 Responsive CSS Frameworks Worth Considering (by Paul Andrew)
- Complexity and User Experience (by Jon Bolt)
- Origins of the Apple Human Interface
- Internet Visionary Paul Otlet - Networked Knowledge, Decades Before Google (by Meike Laaff)
- The Anatomy of an Experience Map (by Chris Risdon)
- A Complete Color Spectrum of Web Design Inspiration (by Chris Spooner)
Minimalist Web Design: How Minimal is Too Minimal? (by Delwin Campbell)
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
