Twitter avatar trends – in a grid

Posted on May 18, 2011 by Adam Kinney

After looking at a few of the avatars of people I follow on twitter, I noticed a few of the common patterns for avatars and captured them in a grid, organized by columns.

Twitter avatar trends

The trends, as I found them:

  • column 1: something slightly distracting in the foreground or background
  • column 2: black and white
  • column 3: illustrated
  • column 4: blue background
  • column 5: close crop (sometimes too close)
  • column 6: void background
  • column 7: not the person
  • column 8: iconography or logo
  • column 9: something very distracting in the foreground or background
  • column 10: photoshopped

Certainly not scientific, maybe not even interesting information, but the bits can be used for others things, such as a never ending photo mosaic.

Twitter avatar trends - ongoing

Originally, I was researching avatars after watching the TED video Ron Gutman: The hidden power of smiling.  As the title suggests, Ron let’s loose the secret power of the smile.  If Ron is right: Nishant and Kelly you’re going to be happy and successfully for years to come, Shawn – it’s not looking so good.

Posted in VisualComm | Tagged , , , | 2 Comments

Grid by Example – WP7 design

Posted on April 29, 2011 by Adam Kinney

I opened a PSD file today which contained a WP7 panorama design and this is what I saw:

intense grid lines for a WP7 app

Metro, the design language for Windows Phone 7 is all about the grid.  At least that’s where you start; then you break the rules to help enforce brand and the intent of your app.

If you’re involved with Windows Phone 7 app design and you haven’t already watched Megan Donahue’s MIX11 talk Advanced Application Design, watch it now. It takes a step beyond, “what is Metro” and moves to “how do I apply it and make something memorable”.

Then once you’ve watched that, check out Ward Bell’s talk All Thumbs: Redesigning an Existing UI to Suit Windows Phone 7.  Ward takes the concepts and inspiration designs from Metro and applies a business application perspective.  Its all about “Jetro” and its more about experience design than i think Ward even knows.

Posted in Client Technologies, Storytelling | Tagged , , , , , | 1 Comment

My MonoGame logo contest submission

Posted on April 28, 2011 by Adam Kinney

I’ve always been a big fan of the Mono monkey logo, so when I received a notice about the MonoGame logo contest from ChrisNTR I was inspired.

In a short bit of time, this came out:

My idea was to build off the existing Mono logo and a little bit of game playing energy. I wanted the monkey to appear in motion as if playing a “monkey-ish” game, but I also wanted a strong focus on his hands and thumbs which are often a big part of our “human” games.

While the motion itself can portray the idea of portability, it could also be interpreted as if the monkey is about to pick up the text and carry it somewhere else (perhaps yet another platform, even).

And the nice thing is starting off with a base shape, its pretty easy to add extra chrome for special events.  Here’s the logo trying to blend in with the current Mono logo.

Now to take a look at the actual MonoGame project:

MonoGame is a free OpenGL implementation of the XNA Framework for MonoTouch, MonoDroid, Mac OS X & now Windows. Our goal is to allow XNA developers on Windows & Windows Phone 7 to port of their games to the iPhone / iPod / Android / Mac OS X (visa versa), with minimal hassle.

Oh nice, I like the sound of that. This calls for more reading, less drawing…

Posted in Client Technologies | Tagged , , , | 3 Comments

Throwing Stars – a new HTML5 game

Posted on March 24, 2011 by Adam Kinney

Throwing Stars Sampler

Throwing Stars is a new HTML5 game where the goal is to throw a star across the sky and collect all of the sparkling tokens before you run out of stars. Of course it’d be too easy if there were just tokens out there – watch out for walls, planets that will try and get in your way or black holes looking to swallow your star .

We, at Pixel Lab, were given the chance to work together with Ze Frank’s star.me team to build this game as a way for people to win an invite to the new star.me site. It was a fast and furious project, but we were inspired by the site’s whimsical feel and we had a hard deadline to make it to the star.me and IE9 launch at SxSW.

Throwing Stars Instructions
Throwing Stars Instructions pg 2
Throwing Stars blackhole hint

Here’s a few of the tools that helped us out:

  • Google Closure Tools – not only does it provide wonderful compression and compilation, but the inheritance and dependency feature are great
  • box2D physics engine (PixelLab edition) – a cleaned up compiled version of the original JavaScript version of box2D
  • EaselJS – a great sprite library from gskinner for working with Canvas, similar to Flash movieclips
  • Zoë - a tool for exporting swf animations as EaselJS sprite sheets, ended being a really nice workflow

One more thing to point out, we also enjoyed the much acclaimed openess of it being another HTML5 game. We were able to use Mac or Windows for development, with everything safely stored on github.  And the game runs on multiple browsers, OSs and devices. Of course its not perfect across the board yet, but its exciting to see the potential.

I’m looking forward to our next HTML5 project, which I believe starts right now…

Posted in Client Technologies, Storytelling | Tagged , , , , , | Leave a comment

Back button training wheels for WP7 users

Posted on March 16, 2011 by Adam Kinney

One of the interesting features that you find with Windows Phone 7 devices is the addition of the Back and Search buttons to the Home button area.

My first impression of this choice was not a good one. Users would need to learn to depend on the Home row buttons and wouldn’t see any buttons within the bounds of the current app itself. And depending on the specific device, the hardware buttons may be pressed accidentally which could cause confusion for the user.

It appears I was not crazy as both of the issues came to light in public forums after release.

It is a new concept and users need to be helped to see how it works and to start depending on it.  The good news is that the whole OS works this way so it shouldn’t take too long before the design feels right to the user.  After using the device myself for awhile, it actually becomes a nice familiar safety button I can use to get of different screens.

The only time I seem to trip on it still is when I back out of the app on accident.  This normally happens when I press the button too many times in a row or when i forget what the Home screen of the app looks like.

But App developers will prevail in this world of Back button singularity!

Here’s how the Facebook app deals with the Home screen/Back button/kill my app issue.

They’ve added a warning dialog, that can be turned off when the user feels comfortable with the behavior.

Although the accidentally backing out of the Home screen is the most destructive because it kills the app, which means you then have to sit through the app loading again which on WP7 is almost always noticable (can’t wait for the update!), cancelling a screen can still be an issue.

Users are used to the seeing a cancel or Back button and some app developers still add them into their screens. This may go away eventually, but at this point most 3rd party app developers don’t feel like footing the education bill. You’ll notice that even in the Outlook New Mail screen there is an “X” button to cancel the New Mail creation.

Back Button Training Wheels - Extra Icon Button

Overall the important part when designing your WP7 apps is to remember the Back button guidance so your app behaves like users expect:

  • Pressing the Back button from the first screen of an app must exit the app.
  • Pressing the Back button must return the application to the previous page.
  • Pressing the Back button in a game should only be used to pause and exit.
  • If the current page displays a context menu or a dialog box, pressing the Back button must close the menu or dialog box and cancel navigation to the previous page.
  • The Back Button should first close the SIP keyboard if it is visible.
  • You should only implement Back button behaviors that navigate back or dismiss context menus or modal dialog boxes. All other implementations are prohibited.

Finally only break the guidance when you feel like you really need to, and then hope you still make it through the submission process.  ←

Posted in Client Technologies | Tagged , , , | 4 Comments

See you at MIX11, and hopefully the Windows Phone 7 Boot Camp, too

Posted on March 15, 2011 by Adam Kinney

Less than a month to go for the big MIX11 conference and the buffet of sessions and events looks tasty and they haven’t even released the official sessions yet.  Presently you can peruse the site and find the Boot Camps, UX Lightning Talks (hooray!), R&D sessions, Open Source Fest and the Open Call talks.

This will be my first time attending MIX not as a Microsoft employee and I’m looking forward to waiting in the registration line, avoiding the glare form Ward’s shirt, huddling in awe after Robby’s talk and getting my MIX11 grocery bag.

For more tips on attending MIX, I’d forward you to @TommyLee‘s Field Guide to MIX but it appears to be a 404 now.  If you’re interested keep an eye on his twitter account.  I’m sure once SxSW is over he’ll start talking about MIX again.

Another good source of the haps at MIX is the official Countdown to MIX11 show.

Now on to this Boot Camp business…

app logo sketch

The above sketch is a preview of the app the Grant Hinkson and I are working on for the Windows Phone 7 Boot Camp for MIX11.

Here’s the official blurb:

In this workshop you’ll see a complete Windows Phone app built from the ground up. We’ll walk from File > New Project all the way through app submission in the marketplace. You’ll learn all the tips and tricks required to make your app feel like a native app, from smooth page transitions to highly performant progress bars. You’ll leave with a fully functional app that you can start customizing with your own data and submit to the marketplace for instant global reach.

Grant and I are both programmer nerds who are also nerdy about design, so we’ll be presenting a pragmatic and design attentive way to build an app for Windows Phone 7.

- How easy is it to build a Windows Phone 7 app?

- How do you make an app feel native, but stand out enough to be memorable?

- What kind of development decisions are needed to work well with the environment?

- What is the submission and update process like?

We’re really looking forward to the Boot Camp and we hope to see you there.  If you haven’t registered already for MIX, do it now, before its too late- MIX11 Registration.

I hope to see you there, if not in the Boot Camp, at least in a hallway or two.

And now a parting gift…

Posted in Client Technologies, Storytelling | Tagged , , | 2 Comments

Golf Tracker and DailyAwesome – New WP7 tutorials on the Toolbox Site

Posted on March 14, 2011 by Adam Kinney

The Microsoft Toolbox site has been updated with extra credit. The new material covers Widnows Phone 7 and includes 4 apps with source code, video and written tutorials.

You can see a few shots from Andy Beaulieu’s Air Hockey app, and below you’ll find apps from the two tutorials I worked on – Daily Awesome (a hard rock to do list) and Golf Tracker (a Metro extreme app).

DailyAwesome Screenshot

GolfTracker Screenshot

You can find all the material and the rest of the free, design-oriented training content on Microsoft Toolbox.

Posted in Client Technologies, Tutorials | Tagged , , , , , | 1 Comment

Presenting at the Expression Blend online group in February

Posted on February 2, 2011 by Adam Kinney

Puppet Show Sketch

Next week I will be presenting at BlendSIG -Blend’s first virtual Special Interest Group.

Here’s the abstract:

Pulling Graphics and Media into Expression Blend
The graphics department has emailed you a file, you purchased a new icon, or you created a piece of art in your favorite design tool.  Now that you have this fresh new graphic or media asset, the question is how do you bring it into your Silverlight or WPF application?  The simplest answer is Expression Blend. This session will cover the full gamut of importing existing assets, starting with the simple drag and drop of files, peaking with the new FXG import and ending with bits of hackery and shenanigans.

Its free to join, listen and watch.  I hope to see you there.  Register to attend

Posted in Client Technologies | Tagged , , , , , , , | Leave a comment

My Top 10 Interaction Developer picks for MIX11 Open Call

Posted on January 26, 2011 by Adam Kinney

The MIX11 OpenCall voting has begun and the call to action is simple:

We need you to tell us which sessions you’d like to see at MIX11. Voting is open to everyone (no registration required). Vote for up to 10 of your favorite sessions.

Commence the sifting through 207 submissions!

(Thanks to Jason Alderman’s fancy filtering bookmarklet for making the job a little easier).

Looking through the list of many wonderful submissions, I decided to choose my top ten as if I were building a personal day of edutainment for myself. And as the title suggests, I did this with my Interaction Developer hat on.

Here’s the imaginary schedule and top 10 sessions that I’ve selected.

  1. Winning Hearts & Minds: A Field Manual To Guerrilla User Research
    Jason Alderman
    “start the day off right with some prototyping and user research”
  2. Designing for WP7: Metro and Beyond
    Guido Rosso
    “dive into the main topic of WP7, design first”
  3. All Thumbs: Redesigning an existing UI to suit Windows Phone 7
    Ward Bell
    “have Ward remind that not all Silverlight experts are WP7 experts”
  4. Using Metro Motion Design To Improve App Performance
    Matthais Shapiro
    “dive into theory and trickery behind the motion”
  5. Deep dive MVVM
    Laurent Bugnion
    “time for the secondary topic: real-life big apps”
  6. Ensuring a Consistent User Experience for Enterprise Software: Merging a Pattern Library with Silverlight Styles and Custom Controls
    Kevin Silver
    “…and how to maintain the style of those real-life big apps”
  7. Going All In With Silverlight, Kinect, IIS Media Services and HTML5 For Live Interactive Multimedia Performance
    Robert Tuttle
    “something fun with audio and visuals for the after-lunch session”
  8. Wave, Touch, Pen, Speech, Mouse and Keyboard
    Neil Roodyn
    “and the third topic: prepare to open your mind”
  9. Coding Animation Across Silverlight, WPF, XNA and HTML5
    Rick Barraza
    “yes, on to the singularity!”
  10. The Microsoft Surface MVPs present: Natural User Interfaces, Today and Tomorrow; an interactive discussion and demonstration
    Joshua Blake; Neil Roodyn; Dennis Vroegop; Rick Barraza; Bart Roozendaal; Josh Santangelo; Nicolas Calvi
    “and the big finale, the coolest thing from Microsoft this year which will encourage me even more to order my own Surface v2 for the house…”

Congrats to all who got their proposal together for the open call…
Now go vote for your own top 10 sessions!

Posted in Client Technologies | Tagged , , , , , , , , | 1 Comment

Microsoft Class of 2010

Posted on December 31, 2010 by Adam Kinney

Since putting in my notice at Microsoft this year, I’ve been paying attention to others who have left the company as well. This is not a “canary in a coal mine” list; rather its just a reflection on the inevitable changes in a large company and the lives of individuals.

It’s a pleasure to have been in the (self-appointed) class of 2010 with these folk and a reminder of the amazing talented people flowing in and out of Microsoft.  Cheers to new directions in careers and for the company.

I’m looking forward to Windows8, Windows Phone 8, IE9, Surface 2, Xbox 720, Silverlight 5 and Yet to be Named Product 1 and 2*.

The list is organized alphabetically by name which links to their farewell post or a related article. Following the name are highlighted areas of work and the last few words from their link.

Adam Kinney – Channel9, Silverlight, Expression Blend
“…so I won’t be going too far.”

Anand Iyer – Evangelism, Windows Phone
“Stay tuned…”

August de los Reyes – Surface, Design Research
“I’m done! :-)  ”

Brad Abrams – .NET Framework, ASP.Net, Silverlight
“I’d love to stay in touch:”

Chris Burrows – C#
“Thanks!”

Chris Smith – F#
“You can reach me via my new blog”

Chris Wilson – Internet Explorer
“*** sheesh.  Seriously, just kidding.”

David Crow – Evangelism
“make sure you follow up with John.”

Gary Flake – Live Labs
“I have resigned from Microsoft.”

Ian Ellison-Taylor – Visual Studio, WPF, Silverlight
“Cheers”

J Allard – Father of the Xbox
“Decide. Change. Reinvent.”

Jean-Luc David – Evangelism
“Thanks everyone!”

Jim Hugunin – IronPython, DLR
“So long and thanks for all the fish”

Jimmy Schementi – IronRuby, DLR
“Stay tuned, and thanks for all the support thus far.”

Noah Coad – Visual Studio
“Cheers!”

Lauren Cooney – Web Platform
“Happy Holidays!”

Michael Lehman – Evangelism
“More details to come at the beginning of the new year!”

Phillip Su – 12 Years of Randomness
“Individuals are the sole cause of anything that’s ever happened.”

Ray Ozzie – Chief Software Architect (transitioning)
“… clearing a path to the extraordinary opportunity that lies ahead for us, for the industry, and for our customers.”

Robby Bach – President of Entertainment & Devices Division
“my decision is about things I want to do, not about opportunities for the company”

Sara Ford – Power Toys, CodePlex
“Or to quote Lost, ‘See you in another life, brotha!’”

Simon Guest – Architect Evangelist
“Time to think of something new, perhaps”

I’m sure I missed others who have left the company this year.
Who else should I add to the list?

*All of the product names are completely made up and hold no real weight with the exception of IE9 and Silverlight 5 which have been announced.

**UPDATE: added Anand Iyer, Chris Smith, Gary Flake and Simon Guest

Posted in Client Technologies, Storytelling | Tagged | 7 Comments