Free online book: Dive into HTML5
Posted by Michael Gaigg
Free online book: Dive into HTML5 by Mark Pilgrim.
The paper version is titled HTML5: Up and Running (O'Reilly, via Amazon).
Table of Contents
- Introduction: Five Things You Should Know About HTML5
- A Quite Biased History of HTML5
- Detecting HTML5 Features: It’s Elementary, My Dear Watson
- What Does It All Mean?
- Let’s Call It a Draw(ing Surface)
- Video in a Flash (Without That Other Thing)
- You Are Here (And So Is Everybody Else)
- A Place To Put Your Stuff
- Let’s Take This Offline
- A Form of Madness
- “Distributed,” “Extensibility,” And Other Fancy Words
- Manipulating History for Fun & Profit
- The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything
- HTML5 Peeks, Pokes and Pointers
Dashboard Design
Posted by Michael Gaigg
Example of a dashboard (Google Analytics)
I'd like to summarize my notes from the excellent talk titled "Designing Infographics for Web Applications" (watch the 54 minute video).
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:
- CEO
- strategic view
- focus on long term
- high-level overview
- simple summary
- Analyst
- 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
- Sales
- Marketing
- Customer/technical Support
What are you trying to answer? Which questions are important?
- Average?
- Percent change?
- Totals?
- Popular?
- # sales?
Know your Data
Communicate single figure
Use when:
- 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.
Quantity
- Lines (length, width), that's the best
- Color intensity (shades of red,...)
- Size
- Quantity
- Speed (only useful in motion charts)
Category
- 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.
Closing
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
Free Map Controls for Balsamiq Mockups
Posted by Michael Gaigg
Map Controls for Balsamiq Mockups
Download the Map Controls for Balsamiq Mockups on mockupstogo.net.
The collection includes a wide variety of map controls like zoom bars, pan controls, scale bars, overview map, logos, pins, rings. All of them are symbols that you can add to your assets directory.
Enjoy and let me know if I missed something… and like it or re-tweet it
Successful Map App = Frame the Question
Posted by Michael Gaigg
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?
Design Implications
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
10 and 1/2 Lessons Learned from Forrest Gump
Posted by Michael Gaigg
Forrest Gump
Who doesn't remember Forrest Gump? One of the all-time greats in movie history, the comedy turned drama, the 'dumb' guy that teaches us lesson after lesson. You gotta love this movie, at least I can watch it over and over again and so it just happened and I started wondering, why do his stories touch us so much and what can we learn? Bruce Temkin puts it elegantly: "People relate to stories because it is part of their evolutionary makeup. Stories cause our mirror neurons to fire at similar experiences, helping us remember and relate." That's why.
And here are the 10 and 1/2 Lessons Learned from Forrest Gump:
Start small
That day, for no particular reason, I decided to go for a little run. So I ran to the end of the road.
You just start! Start somewhere, anywhere. Then you take one step, then the next, baby-steps to the elevator, right? Once in motion you take the next bigger step, one leads to the other and soon you hit the Atlantic Ocean
Have endourance
shit happens
Some could interpret this as 'get inspired', but whatever it is, it eventually boils down to... sh*&%$# happens! Don't give up, innovate and renovate.
Keep perspective
Jenny, it looked like there were two skies one on top of the other. And then in the desert, when the sun comes up, I couldn't tell where heaven stopped and the earth began. It's so beautiful.
Regardless of the circumstances, perspective can change everything. So don't loose perspective.
Move on
My mama always said you got to put the past behind you before you can move on.
What happened yesterday is over.......unless you choose to put it in your future!
Enjoy
And cause I was a gazillionaire, and I liked doing it so much, I cut that grass for free.
Enjoy what you are doing and greatness will be your harvest. Never become so obsessed that you loose touch with the little things in life, many times this is what counts most.
Care
I'm not a smart man... but I know what love is
Care about what you are doing, care about who will be using it. Don't try to be smart, follow your heart.
Learn
Momma always had a way of explaining things so I could understand them.
Find a mentor, learn from others, learn from yourself, learn from your successes, learn from your mistakes, whatever it is... learn!
Give and take
Jenny taught me how to climb. And I taught her how to dangle
It is ok to borrow ideas, to get inspired. Nobody needs to reinvent the wheel, but return the favor, contribute, share, help!
Appologize
I’m sorry I had to fight in the middle of your Black Panther party
Yes, bad idea hahahaha. Well, he got away with it that's why you could/should too. You screwed up? Be honest, be bold, appologize and explain!
Don't get distracted
Have you found Jesus yet, Gump? Forrest Gump: "I didn't know I was supposed to be looking for Him, sir."
Follow your believes, be true to yourself. Don't get side-tracked. It's good to expand your horizon, but stick to your plan.
Don't do stupid things
Stupid is as stupid does
Need I say more? Just don't do it!! And especially, don't do it again! KISS - keep it simple, stupid!
Bonus: Repetition helps remembering
My Mama used to say...'Life is like a Box of Chocolates'...you never know which one you're gonna get!
Repeat 100 times. Yes, it's nonsense. Just read the label and you know, but hey, repeat it often enough and you'll believe (and remember).
Further Reading
Some of the inspiration for this article (and good reads regardless) are the following links:
- Forrest Gump - A Metaphor for Realtors
- The Forrest Gump Guide to Becoming a Gazillionaire
- Lessons Learned From Forrest Gump
Redesigning my Personal Homepage using Balsamiq Mockups
Posted by Michael Gaigg
I've been working for quite some time with Balsamiq Mockups now and it truly made my designer life easier especially because I'm able to:
- Work through an idea and communicate it and iterate it
- Use incompleteness to identify holes and relationships
- Record and reflect what I am hearing and seeing
- Capture my results and document them
Sure, smaller projects - like my personal homepage - might not benefit as much from mockups than larger ones, but it still helps me to settle on a design quickly (and rather inexpensively) before I get into the hassle of coding.
What is a Sketch?
A simply or hastily executed drawing, especially a preliminary one, giving the essential features without the details.
Beginning
Step 1) Sketch after some initial iterations
First and foremost comes the concept. It grew in me over time, a little aha moment included.
I then sketched it using Balsamiq and refined it until I felt happy. Looks pretty much what I had in mind.
At this moment I'm not worried about color schemes, fonts or implementation specifics. I might have something in mind and almost certainly I know technical implications of my designs, e.g. can I include my tweets, even though I sometimes disregard them in favor of not limiting myself.
Most important at this time is that I sketch the WHAT I want to achieve, the HOW comes later.
Evolution
Step 2a) Including my tweets
Step 2b) Adjusting the tweet element to be less obstructive
I rolled out my personal webpage and was happy... until I strongly felt that my tweets need to appear to give the page some dynamic flavor.
So I went back to the drawing board (my Balsamiq) and sketched out some possible locations for the tweets on the screen.
My goal was to keep the page simple and uncluttered.
Well, something has to give (or maybe not?). I wrestled with myself and convinced the purist in me that tweets would actually add value to the page by showing who I am and what I have to say which in turn could be attractive to whoever visits my site. The objective stayed the same: KISS, keep it simple, stupid.
So I had to find a location and a metaphor to include the tweet section without obstructing the page and overwhelming the message. I found that a speech bubble pointing from my name to the tweets to be the best metaphor.
Result
Step 3) Implementation... the result
So this is what it boiled down to: http://www.michaelgaigg.com.
Ok, the mockups didn't help me to communicate ideas to my client or convince somebody of a better design choice, but they helped me to iterate through some samples before I dove into coding. It kept me from some of my frustrations of earlier days when I was more concerned about the looks before I actually knew where I wanted to go. It kept me on track and I hope that can be seen.
What do you think of my new personal homepage?
MS SketchFlow meets Sketchables
Posted by Michael Gaigg
What is SketchFlow?
Sketchflow (a feature of Microsoft Expression Ultimate) is a prototyping tool that allows designers to create sketchy looking mockups, publish them and in that way gather feedback from their clients/colleagues.
As SketchFlow is tightly integrated into Expression Blend, any sketched control is behind the scenes already a Silverlight control that can be styled and consecutively used by your .NET application in Visual Studio. Any SketchFlow project can be converted into a production project, so the path from sketch to production-ready solution appears to be paved...
Why you should use SketchFlow
Like any other prototyping tool, SketchFlow
- makes it clear that this is a prototype, it looks like drawn on paper or whiteboard
- is a fast, easy and cheap way of putting visual ideas in front of your clients
- allows you to link sketched pages together to create a navigable site structure
- provides SketchFlow player for easy way of navigation through your pages without building any code
- gives reviewers the ability to add comments directly from the SketchFlow player, making it easy to collect feedback
Why you should not use SketchFlow
During my research I found an article by Jag Reeha who argues that just because you can it doesn’t mean you should:
The aims and mindsets used to create a SketchFlow prototype are different from how you would go about creating a real world production solution.
- A designer doesn't (and if he does, he shouldn't) think in development details and best practices, code re-usability or testing. A designer should flat-out ramble on UI elements and workflow, navigation architecture and content. Any thought that is put into structuring the solution, creating reusable controls and resources or even laying the page out in a way it can scale are counter-productive and ineffective.
- The price tag is considerably higher (Estimated Retail Price $599 USD) than other prototyping tools like Balsamiq ($79 for a single-user, multi-computer license).
- Another big downer is the limited amount of available sketch controls, about 17 if I counted right. Here is where Sketchable comes in handy.
What is Sketchables?
Sketchables
Sketchables (by Philipp Sumi) is a simple framework complemented by a set of controls that allow you to quickly create common controls in a matter of seconds. Sketchable extends the limited set of out-of-the-box sketch controls offered by SketchFlow.
How to add mockup controls to your Expression Blend library?
Sketchable files to copy
After downloading the Sketchable libraries using the link above, copy the files (in the case of sketchables copy the complete /Sketchables/Build/SL/Debug directory, including the Design folder) to your Silverlight install directory. Well, while you are at it already, enable standard mockup controls for any SketchFlow project and copy them to the same target directory as well.
Here is how to do it:
- Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:
Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
- Add copied files (including Sketchables) to the following destination:
Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >
- Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).
Your experiences?
What are your experiences and opinions on designing with SketchFlow or Sketchables?
16 Color Schemes for Your Website
Posted by Michael Gaigg
16 Color Schemes
I love colors! I can't get enough of them actually. They inspire me, they give me good mood, they make me smile. So I started collecting them, first in real life - more about that later - and then online.
Now I want to share 16 color combination that are harmonic and that you can use for your next web project:
| F78D13 | |
| 73C8FE | |
| FEA5F4 | |
| DF43A4 |
| B9B9B9 | |
| CC2201 | |
| 0C34BB | |
| 747474 |
| 5E82EE | |
| FDE05E | |
| DD4D28 | |
| D5DCE4 |
| 225577 | |
| EE7722 | |
| 22AAAA | |
| 667711 |
| 1B325F | |
| EEF8FE | |
| F26C24 | |
| 3C89C8 |
| B49A73 | |
| 587A27 | |
| 2A7FD6 | |
| FFFFFF |
| FDBE21 | |
| FFFFFF | |
| 5E722E | |
| 3399FF |
| 79AEC0 | |
| C84630 | |
| DFB34B | |
| 8B7956 |
| 8E7CBF | |
| EACD89 | |
| C6C1C1 | |
| E2DFF8 |
| C12D1E | |
| 6F9EC7 | |
| 9E6744 | |
| F8DFA7 |
| 21708F | |
| BD1700 | |
| 0B394E | |
| E19314 |
| 2299CC | |
| 888888 | |
| 885599 | |
| FF9900 |
| F2DFBE | |
| A27F57 | |
| B6A666 | |
| 9C5B47 |
| 185A00 | |
| FFCC00 | |
| E70808 | |
| 08398C |
| E62D17 | |
| E8AC3C | |
| B12211 | |
| DD8E00 |
| A62B1B | |
| 7E8AAE | |
| 381211 | |
| 425F9A |
Redundancy is NOT bad!
Posted by Michael Gaigg
Traffic light hell
The original motivation for this article stems from a recent discussion with a customer who argued that UI elements must not be redundant, i.e. there must not be two links on any single page pointing to the same target.
His argument was that the link to the contact form - which was embedded in the content - already exists in the header, thus replicating the other link.
To me it seemed clear that this "redundancy is bad" theorem doesn't make sense. But how could I argue the opposite?
Be aware of the "Rule"
Over the time I've seen many so-called "rules" appear, most of them are really hard to counter and battle or even detect in the first place. Remember the "Everything-needs-to-be-reached-within-three-clicks" rule? Says who? Why? So the user can reach any target without dropping off? It's not about the amount, it's about the motivation to get there, it's like a bicyclist that needs more strokes uphill but still has enough motivation to get there.
I call those rules Lazy-Designer rule, or should I say, don't know better designer?
What is Redundancy?
Redundancy is the amount of information used to transmit a message minus the amount of information of the actual message. One might call this "wasted space" or "overhead".
Unwanted Redundancy
In information theory the amount of information is described in number of bits and data compression is used to reduce or eliminate unwanted redundancy.
Desired Redundancy
But communication over noisy channels with limited capacity pose possibilities of data loss and that's why checksums are added for the purpose of error detection.
Error Detection
Simply put, the basis of communication is sending and receiving a message from a sender over a channel to a recipient. Error detection is the detection of errors caused by noise or other impairments during transmission from the transmitter to the receiver.
Error Correction
Error correction is the detection of errors and reconstruction of the original data. This reconstruction can happen in either of two ways:
- Automatic repeat request (ARQ), sometimes also referred to as backward error correction, basically a request for retransmission of data until the correct receipt can be verified.
- Forward error correction (FEC), where the additional data (redundant data) that was added is used by the receiver to reconstruct the original information.
Translation into UI Design
The objective of user interface design (=sender) is to communicate a message via the internet (=channel) to the user (=recipient).
Importance of the Message
Without going into details of quantity (information theory and entropy) or quality (importance of a message) it can be said in general that the better message (=content) follows the lesser is more and more precise is better recommendations.
Methods of Error Detection
But how can one assure that the message has actually arrived? That the user found what the designer has intended to present? Or in other words, how can I (=designer) detect that a user has NOT received the message (=error detection) and what can be done to correct (=error correction) it?
- Traffic Log Analysis can help finding patterns in user behavior purely based on click-through rates and times.
- User Testing helps finding qualitative answers.
- A/B Tests compare alternative design choices and their effectiveness.
Methods of Error Correction
More important is how the UI can handle errors in data reception, i.e. the user "didn't get it".
- ARQ is almost impossible to implement. How would I know that the user missed our message? Maybe he/she simply wasn't interested (e.g. in clicking the 'contact us' link).
- FEC on the other hand seems to be a real alternative. Adding redundancy may help the recipient to overcome the missed message and despite having noise (ads, other UI elements, etc.) being able to continue the task in the most likely way the designer had intended to.
Right Balance
Like mentioned above, it seems natural to enhance the quality of content and balance the quantity between removing content (=data compression or unwanted redundancy) and adding content (=desired redundancy). It's like an intersection having two or more traffic lights (desired redundancy) but surely not traffic light hell like on the satiric image.
On a personal note
I wish Directv would ship all their receiver units with two remote controls. You can't imagine the sudden peace in our house since we ordered a second one. "Babe, where is f...in remote again?", "Will you finally shut down the volume honey?", "Come on, skip the commercials, or are you sleeping already?"
Job Posting: User Interface (UI) Engineer at ESRI
Posted by Michael Gaigg
We are actively looking for a full-time User Interface (UI) Engineer here in Professional Services (Applications Development Services) at ESRI.
If you feel qualified and are interested please send me your resume to mgaigg at esri dot com. I'm also happy to answer any kind of question (except payment) you might have.
My job here
A little bit about what you can expect here: In my daily job I consult, design and help implementing customized web applications that are for the most part based on our core mapping products and API's for JavaScript, Flex and Silverlight. Clients range from local and federal government to vertical markets like energy, water, environmental, etc. and reach local, domestic and international audiences - the challenges are never-ending, I promise You can become part of this group!
Job Description
Use your technical background and innovative visual design skills to simplify complex business processes through the creation of intuitive and visually engaging user interfaces.
Responsibilities
- 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 software developers and software testers 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
- 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 five 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
- Highly proficient with cross-browser/platform CSS, HTML, XHTML, and JavaScript; knowledge of browser compatibility issues and their workarounds
- Extensive experience using JavaScript libraries such as Dojo and jQuery
- Good understanding of user experience (UX) and user-centered design (UCD)
- 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 skills
- Passionate about novel user interface design and software development
Recommended Qualifications
- 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
Employment Fraction
Full-time
Work Location
ESRI Headquarters, Redlands, CA
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 (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
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
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 2012-01-09
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
