Name: Michael
Email:
Posts by mike:
- TextWrapping=True will make sure that any text entered will actually wrap to the next line
- Height is important
- AcceptsReturn is useful to avoid accidental submission of the form
- Horizontal and Vertical scrollbars are set to "auto", but feel free to set to "Visible" if that's your preference
- Where am I now?
- Where do I want to go?
- How do I get there?
- How do I define success?
- 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
- Energy
- Time
- Money
- Mockups to go: https://mockupstogo.mybalsamiq.com/projects
- MyBalsamiq: https://www.mybalsamiq.com/
- Design Principles - Understand the basic principles of great Metro style app design.
- UX patterns - Learn how to correctly implement common patterns in Metro style apps like navigation, commanding, and touch interactions.
- UX guidelines - Discover recommendations and requirements for building Metro style apps with the proper look, feel, and user-interaction model.
- Downloading design assets - Get started designing apps quickly with a portfolio of reusable wireframes, redlines, fonts, and other useful design resources.
- Assessing usability of apps - Assess your app's design to ensure the user experience is outstanding, and that users will find it useful, usable, and desirable.
- 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)
Mapping Stereotypes: Europe according to Americans
May 8th, 2012
Europe According to USA
...and other stereotypes by Yanko Tsvetkov (thx to Rob for pointing me to this site)!
Working under the pseudonym "alphadesigner" which (according to him) makes people usually think that his work is really important. Regardless... Yanko hits the nail right on its head when it comes to stereotypes.
You gotta love the European map as seen by different states/cultures. And if you really think that everybody in Austria eats Apfelkuchen for breakfast and Italy is infested by Godfathers... then you either watch too many movies or ...are American LOL.
Amazing Paintings with inlaid Maps
April 29th, 2012
Patriarch (original), 2006 Inlaid maps on panel
What an amazing find (once again thx to Nick Furness).
Matthew Cusick created these astounding paintings and collages using inlaid maps.
I love map art (does this word exist already?) - do you guys know more? Send it to me and I'll post it here, can't wait for maps to enter urban culture, maybe some map graffiti or street map painting on a sidewalk...?! 
Multiline TextBox control (TextArea) in Silverlight
April 4th, 2012This is one of those things that can drive you crazy. There is no 'TEXTAREA' equivalent in Silverlight. One needs to use the TextBox control with some tweaks instead. I'm terrible in remembering details like these, so here for my records:
<TextBox TextWrapping="Wrap" Width="300" Height="80" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" />
Some remarks:
Enjoy!
Esri’s First Homepage – Esri.com Anno 1994
March 27th, 2012
Esri.com anno 1994
Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):
1994 - www.esri.com launched
Gotta love this!
Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link.
Can't believe how far we've come in only 20 years.
The 4 Questions of Strategy
March 19th, 2012
4 steps of strategy
Just described 'strategy' to a consultant and thought to share my awesome whiteboard drawing
The 4 questions of defining strategy are:
The success criteria is crucial. It's the metric for any decision you need to take along the way, it will help you determine which design is 'better'.
Proposing: Feature Spotlight
March 13th, 2012
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
March 10th, 2012Yes, 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!
March 5th, 2012See 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:
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
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:
Windows 8 UX design guidelines
February 29th, 2012The Windows 8 UX design guidelines are out. They are part of the Dev Center for Metro style apps and provide some nice learning resources that include
Highlights of Week 02/2012
January 10th, 2012Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 
Cheers!
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (10)
- Conclusions (4)
- Design Guidelines (12)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (20)
- Here and there (23)
- Map Applications (9)
- This Week's Highlights (53)
- Usability & UCD (23)
- Web Design (23)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- 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
Latest tweets
- Esri's main auditorium by richie http://t.co/4xhaiklf #esri 5 hrs ago
- Mapping Stereotypes: Europe according to Americans - http://t.co/E8VKHrq6 #map #europe #americans #stereotype 1 week ago
- Amazing Paintings with inlaid Maps http://t.co/ZZUKS836 #maps #mapart #art #painting 2 weeks ago
- @wodi79 lecker!!! in reply to wodi79 2 weeks ago
- amazing story #map of the Titanic Centennial http://t.co/t4reGvzb #esri 2012-04-13
- More updates...
Posting tweet...
