Peter and I had a blast at MIX09 in Las Vegas, and I'm happy to report that I did not require medical care this time around.

Day One kicked off with the first keynote presentation, featuring Bill Buxton (Principal Researcher), Scott Guthrie (.NET Product Manager, aka “The Gu”) and several other speakers from the Expression Blend team, Stack Overflow, Rolling Stones and other organizations. Bill Buxton talked about the value of design and creativity in product development and UX design, and the Gu talked about many Microsoft product features, which will be available in their entirety by the end of the year if they are not currently in beta. Some of these features were demonstrated by the other speakers as well, and included some really cool stuff:

• Platform Installer (“PI”) is a new program that allows you to see what programs are available to download and install, and automatically manages them, along with any dependencies they might have. For any developers that have needed to install betas in the past, you know the pain this single program will alleviate. (http://www.microsoft.com/Web/)

• Silverlight 3 (http://silverlight.net/getstarted/silverlight3/)

  • GPU acceleration takes the burden off of the CPU (around 55% of the cost) and makes Silverlight applications run much faster.

  • Pixel Shaders allow for custom graphical effects, and some built-in ones like blur and drop-shadow.

  • 2.5D allows for perspective skewing of flat objects.

  • Bitmap API allows for the manipulation of pixels in a bitmap image, and also allows the developer to “snapshot” pieces of the UI into a bitmap. (Often used for “ghosting” a draggable object, or taking screen shots of a video.)

  • Deep-Linking enables the developer to offer specific URLs for each screen or panel of their application. This is great for simply sending someone a link to a certain part of a Silverlight application, or just for allowing search engines to pick up more of the “pages” of your site.

  • Text quality will be improved, and a “clear text” will be an option the developer can control, for animation purposes.

  • Multi-touch support, which currently is only really useful for the HP TouchSmart.

  • You can run Silverlight as a desktop application, independent of the web browser. This can be directed by the developer, or left up to the user.

  • There was also so talk of client validation, databinding and server-side CRUD management which sounds completely insane. Basically they provide a framework which manages the client data model and when you “push” any changes to that data model, it handles merging all the changes with the server/database. Yah.

• Expression Web 3

  • SuperPreview is a new feature which renders your web page in each browser installed on your system, and also previous version of IE. You can see them side-by-side or even overlay one on top of the other, or the web page over a JPEG preview. It includes tools to select elements, and examine the pixel offset of elements if they are not lining up correctly. (http://www.microsoft.com/expression/try-it/superpreview/)

• Expression Blend 3 (http://www.microsoft.com/expression/try-it/blendpreview.aspx)

  • Sketchflow was the biggest deal; people were going batty over it. It basically combines sketching, UX prototyping, flowcharting and documentation in one. I can't even do it justice here. Go to http://live.visitmix.com/ and view the “Day 1 Keynote” and click the playback bar under the “e” in “Other Videos”. Everyone should watch this.

  • Integration with Adobe products like Photoshop.

  • XAML and C# Intellisense.

• .NET MVC shipping now

After that, I got the opportunity to go to a session by Group Program Manager Joe Stegman on the new Silverlight 3 features. It was great talk which offered several demonstrations and showed some code in action. http://videos.visitmix.com/MIX09/T14F

That day I also went to talk by Dan Harrelson of Adaptive Path on wire framing and prototyping, and when to decide which to use (if either) on your projects. It also contained tips to speed up the process and find design patterns that will best fit your needs. http://videos.visitmix.com/MIX09/C10F

That night we went to the TAO nightclub (http://www.taolasvegas.com/) for a private party. Well, “private” for the 2,000 people that attend MIX. It's a great club that contains many floors and rooms, and we spent most of the night on the rooftop “beach” section of the club, eating, drinking and chatting with various Microsofties while trying not to fall in the pool.

The Day Two Keynote included a lot of IE8 announcements...

• Standards-compliant, with a front-end option for the user to display in “IE7 mode,” and a special tag for developers to turn this feature off on their site.

• Web slices, which basically allow you to bookmark a specific part of a webpage, and view that “slice” as a pop-up panel in your browser without having to visit the whole page again and again.

• Accelerators give you fast right-click access to various services we manually access all the time via copy-and-paste. You might be able to highlight “352 Media Group” on a web site and right click to search for those words on Yahoo, or simply rollover the “Google Map” option to see a map to our office instantly.

• Malware blocking up to 70%, which is twice as high as the next most secure browser.

• Color-coded tabbed browsing, which groups and highlights the tabs of an identical domain all the same color.

• http://www.microsoft.com/windows/internet-explorer/

… and a talk by Deborah Adler, who took an medicinal accident her grandmother had experienced, and turned it into an opportunity to revolutionize the package design of pharmaceuticals. When she started her project she was a lowly graphic design student, but eventually Target picked up her ideas and her concept can now be seen in their stores. This was a great talk, and I highly recommend that everyone who cares about user experience design watch it. http://live.visitmix.com/

Later, I went to session by Silverlight Product Manager Seema Ramchandani on Silverlight 3 graphics, and the specific usage of pixel shaders and 2.5D projections. This session provided insight into how the graphics engine works, and offered some great tips for improving performance on any Silverlight project. http://videos.visitmix.com/MIX09/T17F

Last was a session by Charles Duncan of AKQA, a digital advertising firm behind the Fable II and Gears of War II web campaigns. He showed off some projects and talked about the benefits of “iterative work flow,” which functions in a cyclical format of ideation and development, as opposed to a linear “waterfall” approach, which most software companies (including 352) fall into. http://videos.visitmix.com/MIX09/T31F

Afterwards, Peter and I went to a Silverlight partner get-together at Lavo (http://www.lavolv.com/), but it was completely packed. We met up with a few people and chatted, then went over to Show-Off, which Brian Keller and Dan Fernandez were running. Around fifteen people had submitted their top projects, which were voted on by the audience for a prize. Most notable were a Commodore 64 emulator built in Silverlight, and a photo gallery you could control with your mind.

On Day Three I went to absolutely fantastic talk by author/consultant Dan Roam on “persuading with pictures.” He talked about the way the mind works, and how simple sketches can be the most effective form of communication. He referenced how some of the most influential men and the decisions they have made were impacted by sketches. I highly recommend that everyone watch this talk. http://videos.visitmix.com/MIX09/C16F

Next I want to a talk by Ambrose Little of Infragistics on UX design patterns. His whole talk revolved around a community project he has worked on called Quince (http://quince.infragistics.com/). I highly recommend that everyone in our development teams check this out, and the session if you have time, or don't understand what Quince is about. http://videos.visitmix.com/MIX09/T30F

I wrapped up Day Three with a session by Peter Eckert and Jeff McLean of projekt202 on UX design for Rich Internet Applications. They demoed some projects they have been working on, and reiterated much of the points I'd heard about the value of simplicity, creating UI as a reflection of the real world, and the absolute necessity of understating the needs of the people using your product. This was also a great talk. http://videos.visitmix.com/MIX09/C11F

Afterwards I met up with Brian Keller for goodbyes, and he introduced me to a few people including Mike Harsh (http://blogs.msdn.com/mharsh/), who's been working on Silverlight since the days of yore, writing some books and doing some interviews along the way. I felt pretty cool until he introduced me as “hospital boy”... ah well, I'll take what I can get.

A special thanks to everyone at 352 who got me set up at MIX09, especially PVR.

Share:

Post a comment (2) | Permalink | Trackbacks (0)

rating:

I recently started noticing small glyphs next to user names in various places online. In a list of blog comments, or a discussion board, there might be a series of multi-colored shapes, and it was all a mystery to me. So, I did some investigation.

Many of the Web sites displaying these glyphs utilize a service called Gravatar (http://en.gravatar.com/). This service hosts small images for people's online profiles, which can be accessed by any number of Web sites. The idea behind Gravatar -- or "Globally Recognized Avatar" -- is that you only need to create one profile image, and it will follow you where ever you go online. (There may be other similar services I'm not aware of.)

Some Web sites utilize this services, and then require all of their members to create Gravatar profiles in order to contribute content to their site. Many users, not having a photo ready to upload, simply create a profile and use the default image. For the Gravatar service, the default image appears to be what is called an Identicon (http://en.wikipedia.org/wiki/Identicon). This is symmetrical, geometric shape -- looking similar to a kaleidoscope design.

Why use these patterns? It turns out that the shapes and colors in any Identicon are generated by a number (think of the number as the image's DNA). Since every user's computer has a unique IP address, a man by the name of Don Park forged the idea of using IP addresses as the DNA of Identicons, thereby generating a unique pattern for each user online.

So, instead of using a uniform image such as a smiley face or a silhouette for each user who did not upload a profile photo, Gravatar generates a geometric icon as a placeholder. While the image doesn't have much personality or tell you anything informative about the user, it does have a unique design which can help you quickly spot comments and posts by the same user.

Identicons have been proposed for other uses, such as to communicate a visual representation of a rating system (green triangles=good , red squares=bad, etc.). Personally I think this requires the user to learn how the icon system works in order to gain any information from it. I'd like to see the same concept applied to familiar icons, perhaps with a layering system. For example, a gold star on an red background means the product is approved by experts but has a poor feedback rating, while a dollar sign on an green background might mean that a product has a high rating, but that it's more expensive than it's competitors.

Perhaps I'll suggest something like this on my next project.

Share:

Post a comment (1) | Permalink | Trackbacks (0)

rating:

I can never seem to find an appropriate category for my posts. We don't have one for "Games"? I'll have to make some calls about that.

Anyways, I just signed up for an Xbox Live account last night (finally) and set up my avatar in the New Xbox Experience (NXE). The NXE avatar system is very similar to the Wii's Miis. You can choose your facial features and clothes, skin color and so on, and then play games with your avatar. There are some detailed articles out there comparing the two systems, like this one by Matt Casamassina of IGN (http://uk.wii.ign.com/articles/932/932455p1.html). Basically you'll find the NXE avatars to be more realistic and hip, while the Miis are more customizable, but highly stylised caricatures.

Another item that sets the NXE avatars apart is the ability to view your avatar online. I thought this was awesome:

If you have an NXE avatar, go ahead and find your own picture at http://avatar.xboxlive.com/avatar/yourgamertag/avatar-body.png (replacing "yourgamertag" with your gamer tag).The picture even has a transparent background, so you can place your avatar in whatever background you prefer.

You also have access to your gamertag photo. This is great for blog profiles or forum signatures. Microsoft welcomes you to deep link these avatar pics, so whenever you update your avatar, all the pictures will be updated as well. (Find this one at http://avatar.xboxlive.com/avatar/yourgamertag/avatarpic-l.png or http://avatar.xboxlive.com/avatar/yourgamertag/avatarpic-s.png, for large or small versions.)

Microsoft also exposes other Xbox live data like high scores on your favorite games. For example, here's my gamercard, which is still at zero because I'm apparently terrible at video games:

Personally, I love extensions like this. Suddenly it's not just your video game avatar, but your online persona. This is just one more way Microsoft is connecting the gaming experience to the web, and I hope to see even more of this type of thing in the future.

By the way, you only need a free Windows Live account and access to an Xbox in order to create one of these avatars, so give it a try!

Share:

Post a comment (3) | Permalink | Trackbacks (0)

rating:

A gallery of past work can be the most powerful weapon in a firm's promotional portfolio. Especially in the design world, where often, what you see is what you get. Having conducted a few interviews in the past, I can tell you that a designer's portfolio is almost all I care about. It doesn't matter if the guy is neatly shaven (few of us are), or if he's a bit nervous (many of us are). Can he produce great work? That's what I care about.

That being said, it's important to find out whether a designer's portfolio actually contains work he was involved in. This seems obvious, but let me give you a little example (which I just found five minutes ago, thanks to Declan's inquiry):

Visit the web site of "hagane agency" (http://hagane.us/) and you'll see a nice, clean portfolio of design work. Scroll over to the right, and you'll see a neat Flash menu for "Secure Path," and a summary of its usage of ExternalInterface and AJAX. Now, I don't want to step on... "Aleksandar Gvoden's" toes, but I'm pretty sure ExternalInterface wasn't used in this project. I'm fairly certain of this fact, because I built this menu from scratch by myself.

Now, I'm trying to remember how Aleksander helped me out on this project, but I just don't seem to remember him. Of course, it's possible that the good folks over at Secure Path entered the two of us into a memory-wiping program (like Ben Affleck in Paycheck), and I don't remember working alongside Mr. Gvoden, deep underground in a secret lab in Serbia. It's possible that we even toiled on this Flash menu for years, and even made promises to eachother if we ever got out. Aleksander may have even asked me to send word to his family in Belgrade, should he perish in our steely tomb. "Tell them I love them" he would say, "and that I am sorry."

But what with the memory-wiping and all, I've tragically lost his message. I'm just glad Aleks got out of there alive. He is so strong.

So this type of rip-off happens all the time. In fact, 352 Media's entire web site has been copied before, every page stolen without permission. Of course, the thieves forgot to change the phone number on the "contact page," so we got a few leads out of it. Too bad they were all from Singapore.

My advice is to shop around on the web, but make sure you speak in person with the experts, and make sure you can trust them with your project before moving forward. Form a dialogue with a firm who understands your needs. Otherwise, tell Aleksander I said "hello".

Share:

Post a comment (0) | Permalink | Trackbacks (0)

rating:

Dear Sir and/or Madam,

Greetings! I am the Prince of the Internet. It has come to my attention that all of your personal information has fallen into the wrong hands. Do not be alarmed though, I can quickly remedy this problem. You need only send the following information to info-can6896.af.jz@sztarzawa.ws:

• Full Name
  
• Date of Birth
  
• Mother's Maiden Name
  
• The name of your favorite pet
  
• Address & Phone Number
  
• P.O. Box (please include a penciled outline of the postal key so that we may verify stolen copies)
  
• Social Security Number
  
• Any uncashed Social Security cheques (we will return them at no cost to you)
  
• Bank Account Number (and Routing Number, please. I will not be able to deposit my deceased father's fortune into your bank account without the Routing Number)
  
• 4-digit PIN
  
• 5-digit PIN
  
• 8-digit PIN
  
• Go ahead and send us all the PINs you have
  
• Online banking username/password
  
• iTunes username/password
  
• Webkinz username/password
  
• Any locker combinations and the location of your secret diary
  
• The details of where you were last night and who that girl was you were talking to

Share:

Post a comment (4) | Permalink | Trackbacks (0)

rating:

Technology is all around us. As evidence, witness my eighty-five year old grandmother mixing a beat on my Roland drum pad:

Look at Grandma Jean check her mic like a pro.

Even just a few years ago, you would have never seen something that awesome. But now we find ourselves using some pretty amazing devices every day, and unfortunately also dealing with their inefficiencies. While the technology companies come up with greater advances each year, it's often up to us consumers to handle the finer details of usability.

Witness the Bluetooth headset. Or, for iPhone users like myself, the more obscure ear-bud headset. When I'm talking on my cell phone, most people don't know I'm even using a phone at all. And so I end up making some awkward "I'm on the phone" gestures to my friends and co-workers.

This is even worse in public, when someone has one of those miniature earpieces. People think you're talking to yourself. Best case, you look rude. Worst case, insane.

Solution: The "I'm on the phone" hat.

A simple knit cap and a couple dollars worth of fabric and Velcro and you can be fashioning this lovely contraption. Simply pull over the "I'm on the phone" flap, secure it in place, and there's no question that "you are on the phone".



I hope you've enjoyed the first issue of "Innovative Solutions for the 21st Century" by Lincoln Anderson. Stay tuned for more great ideas. I have a lot of them.

For access to structural blueprints and licensing information, please contact sales@352media.com.

Share:

Post a comment (7) | Permalink | Trackbacks (0)

rating:

People always seem surprised to find out that I do all my icon work in Adobe Fireworks, but it affords some handy vector design tools as well as the bitmap utilities for tweaking pixel graphics.

Start large, and start with basic shapes. For example, when you're making an icon of something like a camera, you wouldn't start with the tiny buttons or worry about the colors first - instead you'd make a large box, exaggerating the proportions of the camera and draw a fat circle for the lens. The larger those recognizable features are, the quicker your illustration is going to tell people what the icon is all about. Drill down on details, adding shapes until you can sit about three feet away from your screen and think the basic concept looks good.

Once you've got the basic shapes down, shrink the vector illustration and add more details and color. Use 2-color or 3-color gradients to make things shiny or shaded, and tweak them around until they look right. Single pixel outlines can "contain" your icon. In Fireworks, you can change the stroke to be "centered", "inside" the fill or "outside" the fill, and you can check "fill over stroke". Normally these options don't impact Web design too much, but they make a HUGE difference in a tiny illustration, bringing out or hiding important details. Try using a double-outline on your icon to make a finished edge. For example if you're icon is of a yellow banana, give it an orange-ish outline and then a white outline outside that, then a little drop shadow. The contrasting edge will make the icon pop out.

Very slight drop shadows can add a lot of depth, either inside your illustration, or on the completed icon. At a small scale, adding tiny things like reflections is super easy and can make a big impact on the gloss of the final icon.

While experimenting, duplicate your icon and toy around with it. Compare the new version with the old one before deleting the one you don't like.

The best part about using Adobe Fireworks for this stuff is that it combines vector and bitmap editing. So don't be afraid to use some vector art from Illustrator, or some Bitmap art from Photoshop, combining and adding the finishing touches in Fireworks before optimizing. I've even seen Tim do some great icons in Flash, which has a very unique freeform drawing toolset.

Share:

Post a comment (4) | Permalink | Trackbacks (0)

rating: