Yesterday MeYou Health launched a new health game called Community Clash. Our mission: Take Community Health Data (recently made publicly available) and turn it it into a fun engaging experience. After 6 weeks of code, coffee and beer this is what we came up with: http://www.communityclash.com

After you play, you can share a replay of the game with your friends. Here are a few of my favorites: (these are all real cities)

Troy vs. Athens – http://bit.ly/bqzzWv
Dogue vs. Cat Spring – http://bit.ly/9IC8At
Partridge vs. Brady – http://bit.ly/d5FV8U
Angels Camp vs. Devils Lake – http://bit.ly/demkR3
Tornado vs. Hurricane – http://bit.ly/aUp9Y0
Vader vs. Luke – http://bit.ly/aQZcKK
Hercules vs. Medusa – http://bit.ly/afjnmw
Dorothy vs. Tornado – http://bit.ly/aKzFUe
Napoleon vs. Waterloo – http://bit.ly/cQ7iR5
Mars vs. Venus – http://bit.ly/asKcTH

Play your own cards!

As many of you know, I left Iron Mountain in November to join a new start-up in South Boston called MeYou Health. Since then, we’ve built a really solid core team and are jamming everyday on creating fun user experiences for the Web and mobile devices designed to help people improve their well-being.

Spoiler Alert: Here are a few products in the works that will be available soon.

Daily Challenge
Small daily activities that wil lead to big healthy outcomes.

Stair Climbr
An iPhone application that alows you to virtually climb the world’s greatest heights.

Health Tennis
A Facebook game that connects you with your friends through small daily actions designed to improve your well-being.

Twitter Tracker
Real time tracking and analysis of the collective well-being of the Twitter community.

Monday is a big day. We’re opening the private beta registration. We’ll allow friends, family and other interested geeks a sneak peak at our Daily Challenge application. We’re even working on a contest to reward one lucky private beta user for helping us out (stay tuned for that)

In the meantime if you want to be know with what we’re doing you can follow us on Twitter or fan our Facebook page

If you’re like me, you spend a good deal of time mocking screens. If you are working in an application with users then you often need to create fake user names for your screens. Since I can’t stand using John Doe and quickly run out of names I decided to create a list I can pull from as needed. I took the most popular first names from the US Census and the most popular last names and randomized the two columns to create a list that looks real. Also available as a txt file

Here is the list:

Jackson Turner
Megan Perry
Ryan Harris
Mason Edwards
Noah Jenkins
Stephanie Hayes
Caleb Scott
Morgan Wood
James Parker
Austin Jackson
Jose King
Stephanie Foster
Mia Bennett
Ella Flores
Jordan Rogers
Victoria Sanders
Alexis Brown
Matthew Jones
Ashley Thomas
Jacob Smith
Gabriel Wright
William Taylor
Victoria Griffin
Elijah Adams
Mason Brooks
Samantha Murphy
Rachel Jenkins
Madison Sanchez
Brooke Alexander
Grace Cox
Sarah Cooper
Savannah Hughes
Robert Green
Madison Ramirez
Kaitlyn Powell
Logan Young
Zachary Lewis
Elijah Young
Tyler Martin
Sydney Wood
Andrew Wilson
Abigail Johnson
Anthony Anderson
Thomas Baker
Alexander White
Isaiah Roberts
Angel Perez
Andrew Davis
Samuel Walker
Emma Morris
Rachel Powell
Jonathan Martinez
Savannah Butler
Cameron Robinson
Hannah Rogers
Angel Moore
Samantha Hughes
Jackson Phillips
Chloe Clark
Joshua Williams
Jacob Campbell
Abigail Cook
Christopher Brown
Isaac Evans
Dylan Rodriguez
Hannah Nelson
Ethan Wilson
Logan Torres
Destiny Hall
Kayla Ramirez
Megan Sanders
Thomas Alexander
Olivia Perry
Morgan Ross
Isaiah Roberts
Brandon Martin
Hailey Baker
Noah Lee
Ryan Patterson
Evan Scott
Lauren Howard
Jordan Gonzalez
Luke Campbell
Ava White
Ethan Hill
David Walker
Kevin Cox
Alexander Williams
Gabriel Green
Jasmine Barnes
Taylor Bryant
Michael Bennett
Brianna Torres
Hunter Carter
Daniel Lee
Evan Phillips
Jason Parker
Justin Hernandez
Haley Gonzalez
Austin Lopez
Christian Clark
Alexis Rivera
Zachary Hayes
Joseph Moore
Allison Simmons
Jose Reed
Lily Ward
Isabella Perez
Kaylee Richardson
Jennifer Patterson
Mia Price
Jennifer Collins
Samuel Flores
Kaitlyn Bailey
Cameron Nelson
Maria Watson
Jessica James
Nathan Allen
Christopher Lewis
Kaylee Griffin
Katherine Long
Aaron Collins
Taylor Ward
Anthony Anderson
James Thompson
Ashley Bell
Makayla Russell
David Jackson
Alyssa Miller
Hunter Carter
Nicholas Henderson
Nicholas Thomas
Nicole Gonzales
Ella King
Justin Murphy
Kevin Hill
Grace Adams
Brianna Thompson
Michael Johnson
Isaac Mitchell
Jonathan Morris
Chloe Brooks
Joseph Cook
Tyler Russell
Aaron Smith
Brooke Garcia
Sarah Washington
Benjamin Hall
Julia Bell
Elizabeth Bailey
Emma Lopez
Emily Wright
Isabella Morgan
Hailey Price
Nathan Ross
Anna Taylor
Ava Gray
Lauren Peterson
Christian Rodriguez
Sophia Simmons
Jack Turner
Luke Peterson
Emily Stewart
Kayla Cooper
Jasmine Evans
Alexandra Washington
Julia Henderson
John Garcia
Caleb Martinez
Mackenzie Bryant
Sophia Howard
Alyssa Richardson
Allison Davis
Olivia Reed
Destiny Coleman
Anna Kelly
Lily Diaz
Natalie Barnes
William Diaz
Maria Foster
Matthew Kelly
Benjamin Harris
Jack Mitchell
Dylan Allen
Mackenzie Gray
Makayla James
Katherine Rivera
Nicole Coleman
John Sanchez
Brandon Robinson
Elizabeth Hernandez
Robert Long
Haley Butler
Natalie Watson
Jessica Stewart
Alexandra Jones
Jason Edwards
Daniel Miller
Joshua Morgan
Sydney Gonzales

At work as part of the employee planning and performance initiative, we have these things called GAOs. It’s an acronym. For what I have no clue. It’s basic goal setting and tracking. Every review period I put the same goal. Goal: Establish myself as a world class interaction designer.

I keep that goal there to remind me there is a lot to learn. There are a bunch of great designers out there who could put me to shame in their respective design category. I like to set the bar high even though it means I’ll either jump right through it (or sometimes under it). I expect my manager to keep my feet to the fire and grade me fairly based on how they think I’m progressing.

Sometimes it’s the humility of failing miserably, sometimes it’s the reward of getting it right but for me it’s the learning along the way that makes me a better designer. So far I don’t think I’ve quite reached the peak but I’ll keep climbing.

What motivates you?

Use visual hierarchy as a method to guide the user. It should show relationships and priorities between elements on the page. If communicated well, it should be clear to the user what the preferred course of action should be. Without visual hierarchy the user is left trying to decide what information is more important. Not all hierarchy is based on size. Here are some other methods to indicate to the user what is most important.

Focus:. The layout indicates where users need to look first.

Flow: The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use.

Grouping:. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items are separate.

Emphasis:. UI elements are emphasized based on their relative importance.

Alignment: The UI elements have coordinated placement, so they are easy to scan and appear orderly.

Previously I wrote about how to shorten your CSS rules with padding and margin. Here are two other ways of reducing your rules and making your stylesheets less cluttered.

Border

If you have a container with a border that is one pixel wide, black and is the same for all four sides you can write it like this:

.myborder {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

Or you can shorten the rule by writing it like this:

.myborder {
border: solid 1px #000;
}

Since all the values are shared for all four edges it is much easier to write the rule for all four at once.

Color

You may have also noticed that I shortened the hex value for the color from #000000 to just #000. Hexadecimal colors are written using six numbers or letters to declare the color. The 1st and 2nd are the red value. the 3rd and 4th are the green value and the 5th and 6th are the blue value. If the character is the same within these pairs then you can just write the one value and omit it’s identical twin.

I’ve been designing a new CSS framework the last few months and thought I’d share my thoughts on how I set it up to be both useful and flexible. I’ve tried to take best practices from some of the

reset.css

This negates most of the CSS rules written by the default.css built into the browsers. Gets everything back to a level playing field so your new rules are more predictable.

layout.css

All the containers, columns, navigation etc. This is the largest sheet and contains everything that doesn’t fit in any of the other sheets.

colors.css

This is where all your colors live. It helps with consistent usage. If you are responsible for maintaining brand this is the best place to control that effort. You can also use this sheet to define a high contrast style as well. Just add another sheet and conditionally point to it in this one’s place.

forms.css

Forms are always a bear to design. This is where I keep all the form elements and different form layouts.

type.css

All typography is in this one. H1, H2, H3 etc. are defined here. Font-family.

iehacks.css

Where I make IE act like a modern browser.

debug.css

During development I like to tun on certain styles to help me. (ex. div {background-color: pink;}
) This helps me see all the divs on a page so I can work on floats etc. I use a JavaScript to toggle this sheet on and off.

The folks at Balsamiq provided me with a no strings attached license for an honest review of their software.

Balsamiq is a tool for creating wireframes. It’s an Adobe Air application that loads fast (providing you already have Air installed). I installed it on a Friday morning and decided to see how quickly I could learn to use it. Since I wanted to test it’s complexity and flex it’s capacity, I chose a complex interface randomly from the web. The Expedia.com last minute deals page had a lot going on (probably more than it should) and would be a good test. Below is a screen capture of the original:

Getting started was fairly easy. Not a ton of menus and I’m familiar with most design applications. I got started drawing the big objects, browser window, columns etc. Which turns out to be helpful since the application supports layering. I didn’t need much “bring to front” type of editing. After about 35 minutes I completed the wireframe.

Some tools I’ve used previously to wireframe/paper prototype include: Quark, Illustrator, Photoshop, Fireworks, HTML and pencil on paper. Balsamiq felt much faster since many of the interface elements were already created (dropdowns, chekboxes, tables etc.) Only the things you’d find in an interface. Very simple.

Pros:

The interface is simple and easy to use. It uses many of the design application standards so it’s quick to get started. The sketched look of the wireframe ensures no one will mistake it for a “mock” or visual design. The focus of wireframes is to indicate structure not style. This tool does that extremely well. You can easily export your designs as PNG files for easy sharing or printing.

Cons:(Some of these may be “newbie” type problems since I’ve only had the application for a few days.)

Some of the constructs allow for font/text resizing while others do not. I would like to determine font size for all elements. Also it wasn’t clear to me how or if I could add my own elements to the application or if there was a community of users contributing to the app. Grouping shortcut made sense [Ctrl + G] where ungroup [Ctrl + Shift + G]. I’d prefer [Ctrl + U] (Quark Standard).

Overall, I was quite pleased with Balsamiq and would recommend (and have) this tool for any designer who wireframes as part of their day to day activities.

I was using Outlook the other day and something caught my eye. The email notification in the lower right corner when I get new email. I’ve been using Twitter for well over a year and have tried a few different applications. Most of them send some notice to the screen when you get a new Tweet. Since Twitter is gaining users buy the boatload I imagine Microsoft, Google and the like have been trying to integrate the simple idea into their applications.

Now, let’s say for argument’s sake, the 140 Character thing is the key to all of this hype. Not too short, not too long. What would Microsoft need to do to mimic this behavior? Simple, just extend the character count in the notification. It currently only allows 80 characters.

Here’s what it would look like with a little visual change and a new category I’m calling “Announcements”. These could be company announcements, group announcements (“Cake in the 2nd floor kitchen for Bob”). Imagine if you could avoid all those kinds of emails from your inbox?

Here’s how I imagine it would look:

And all these little Announcements could be placed in outlook under their own category in Outlook so you can manage, search etc.

Oh and if that doesn’t work, you can always follow me on Twitter

In just about every job there are philosophies people follow when they approach their work. It occurred to me that developers fall into the same categories as the our friends the Three Little Pigs.

The Hacker

This little pig loves to get stuff out fast. He hates structure, documentation and often works best by himself. He puts off any re-factoring and leaves a mess for future developers to clean up but on the surface appears fun and fast. Executives love this guy.

The pragmatist

This little pig understands time constraints as well as the value of delivering some quality. It pains him to let product out the door with less quality but knows the business needs to focus on time to market. He builds for scale but not to the moon. His code is generally clean. He believes in light documentation for future little pigs who follow.

Th Purist

This little pig needs to have everything done “the right way” (whether or not he truly understands what that means is irrelevant). Everything needs to be designed and documented before he’ll start anything. He believes in preparing everything for scale. (even without evidence the product will need to scale). He’s often late with his projects but the final product is very high quality.

So what kind of pig are you?