Category Archives: UX

Perception verses Reality

One of my first mentors, Denny Williford, told me a story. Over the years, I’ve retold this story dozens of times and I’m sure that some of the details have changed over time but here’s my current version. 🙂

The management for an expensive high rise apartment complex had an issue. Their tenants who lived in the upper and most expensive floors were complaining that the elevator was “just too slow”.

Continue reading

How People with Disabilities Use the Web

W3CWeb Accessibility initiativeI was doing some research for a project and ran across this bit on the W3C website titled How People with Disabilities Use the Web. I love this section as it goes into something I’m really a fan of in user stories as they not only crisply get across a set of requirements, it personalizes a cold sterile set of requirements that seem fairly arbitrary to a warm and living set of requirements that make sense.

The other great thing about this set of user stories is that it challenges people to think about a different set of disabilities than they would normally thing about. For example, most people immediately think of screen readers when thinking about accessibility but forget about things like color blindness, epilepsy, hand tremors, cognitive disorders, short term memory, dyslexia and the like.

For example, as a confession here, I’m ADHD and mildly dyslexic. Captcha’s drive me up a WALL!!!! It takes me a long time to work through them especially if they have a series lower case of Os and Es. I have other friends who are much more dyslexic than I am and I have no idea how they sign up for anything on today’s web…

But the really hard one for me is when there’s a lot of text with no paragraph breaks or other things to break up the text. It’s really tough to get through and I have to work through it sometimes 10-15 times to get it. If it’s important, I’ll copy it into a text editor and break up the text and then read it.

Here’s the list of user stories that they have put together to date:

I really like this list and am hoping that it continues to grow and refine over time.

Anyone can write games for Kinect with Scratch

imageThat’s a bold statement but it’s true – any kid even can write games for Kinect with Scratch. Scratch is a programming language for kids out of the MIT Media Labs. Steven Howell saw the potential of combining this with the Kinect and connected them together. Kids all over the world can now write natural user interface games with the Kinect.

This project is not for you to write XBox games at the moment but rather it works with the Microsoft Kinect SDK BETA 2. There are a lot of awesome projects that are using Kinect for the PC. I talked about the stuff that Von Bismark is doing the other day. I’ll dig into that more in an upcoming post.

imageI love this because it captures the imagination as to what’s possible if you can quickly and easily create a natural user interface by dragging and dropping code snippets.

Scratch and Kinect from Stephen Howell on Vimeo.

Full instructions on how to set it all up and get started writing games is on Steven’s site at http://scratch.saorog.com/.

For lots of information about the Scratch project:

Educators – Information for educators using Scratch

News – Stories about Scratch in the media

Research – Papers and presentations about Scratch

Donate – Support the Scratch project

Voice Control with Amulet Devices

logoOne of the things that gets me excited is working with new forms of user interaction. Or rather old forms of user interaction that humans use being used with our users.

Amulet devices are doing just that. They are a BizSpark startup based in Dublin, Ireland. They are a device and software company. The software does voice control of Windows Media Center which can be the hub of your home entertainment.

Amulet_Detail_0246[1]Their remote is a universal remote that has a very clever microphone that is activated by a gyroscope. When you tip up the remote, it activates and allows you to control your media center by voice. It means that the remote won’t accidently pick up your voice and start changing channels on you right before the winning goal or the bad guy gets the bad guy. It also means that it’s you can use it in a crowded and noisy room as the mic is right next to you.

They are, unfortunately not available for sale in Europe but they are available all over North America.

Microsoft UX Kit

image Have you ever wondered what was possible with Silverlight, WPF or any of Microsoft’s User Experience (UX) technologies? Well, Christian Thilmany has answered that question in the form of the Microsoft UX Kit.

From his blog:

Today at SXSW, of which Microsoft Silverlight is a major sponsor of the Interactive Festival,  Microsoft User Experience Kit is targeted at technical and creative leads who want to better understand the tools, technologies, and scenarios that span Microsoft’s User Experience ecosystem.  Key topics range from “Building Immersive Multi-channel Solutions using Expression Studio” to “High fidelity and high Performing Desktop Touch Applications using Windows 7” to “Web Branding and Audience Targeting using SharePoint”.  The kit’s contents can be browsed online and/or downloaded for offline use.  It includes videos, presentations, sample code, and much more. Get the kit at http://uxkit.cloudapp.net!

It’s done a lot for me in helping opening my eyes to new ideas around media publishing, audience marketing, how to leverage the 3 screen types (Desktop, TV, Mobile) and a lot more. It’s really excited my imagination.

That and there’s a ton of good code that you can download from the site as well so you can get some really god jump starts on the code.

 

Microsoft User Experience Kit launched today at SXSW

When to use what Microsoft Client Technology

I was asked earlier when to use what Microsoft client Technology. I thought about just sending a link to Michael Schroeder’s post but decided I should put in my own thoughts on the matter first.

At the heart of Michael’s post is this table.

WPF WPF XBAP Silverlight ASP.Net + AJAX
Client Windows XP SP2 (With .Net 3.0), Vista and obviously Windows 7 Internet Explorer + Windows XP SP2 (with .Net 3.0) & Vista FireFox, Mac Safari, Internet Explorer Any Web Browser
Deployment Downloadable Installer or ClickOnce Runs in Internet Explorer secure sandbox One-time install of Silverlight plug-in Web Page
When to use Programs that need access to Windows desktop files. Intranet applications for Windows-oriented companies. Rich Internet Applications for public-facing web sites General-purpose public-facing web sites

Here’s my 2 cents on the subject.

WPF

WPF is a fantastic choice for applications that need full access to the desktop for any number of reasons. That could be full 3D support, access to desktop files and the like. You can install these applications through XCopy, a full downloadable Installer or a ClickOnce installer. Where possible, I like to leverage the ClickOnce installer as it gives some amazing benefits around auto-update and keeps my application in a secure sandbox so deployment becomes really easy.

WPF XBAP

Just don’t use XBAPs anymore. This was an attractive option for Intranet applications back before Silverlight 2 and to a lesser degree Silverlight 3. However, now that Silverlight has the power that it does with .NET and OOB options and the like, opt for Silverlight anytime you would have considered XBAPs.

Silverlight

Silverlight is the right choice for any external facing Applications. But that’s the key. I really look at Silverlight not as an HTML replacement but a true application layer. That’s one of the central points in the talk that James Ward and I did at Web 2.0 Expo last year – http://www.slideshare.net/joshholmes/best-and-worst-practices-building-ria-with-adobe-and-microsoft.

ASP.NET + AJAX

ASP.NET + AJAX is the right choice for external facing, or even internal facing, web sites where the primary focus is information dispersal. That said, there are some amazing applications built with JavaScript in the browser.

Overall

The reality is that there are a lot of grey lines. WPF is getting a lot easier to deploy breaking down the traditional decision points between desktop and web applications. Rich Web Applications blur those lines as well and the reality is that they could be used to build a lot of applications that have historically been either written as full desktop applications or as web applications. Then on the web application side, JavaScript and the browser are getting faster, strong and easier to develop all the time so it’s becoming more of a viable application building set of technologies.

Above the Fold and how It Really Should be Used

Chicago 080I’ve come to realize that many web designers don’t understand what “Above the Fold” and how it really should be used. Above the Fold is an old print newspaper layout term for what’s on the top part of the page, the part that is displayed in the window at the newspaper stand. In web design, the term is used for the bits that the user can see without having to scroll. I’ve talked and ranted about this before as It’s point number 23 in 32 ways to keep your blog from sucking

<update>It was brought to my attention that it’s often not a web designer but rather an Information Architect or a Developer who is updating the layout on the page. Completely agreed and this is yet another reason that you should look for competent web designers for the layout and design of your page.</update>

What’s bringing it up now is that CX Partners recently blogged about The myth of the page fold: evidence from user testing | cxpartners and it concerned me a little. CX Partners does a lot of user testing and one of the things that they have tested for is whether or not the “Fold” mattered to users and out of 800 users, only 3 were unable to find content because they would have to scroll to find it. They are right, users are used to scrolling and are willing to do so if they know that there’s more content below. We just need to give them visual hints that there is more content that they will have to scroll to see. What they are trying to fight is the urge to put all of the content or at least all of the *important* content Above the Fold and design pages so that users do have to scroll. I’m on board with that fight. Cramming all of the content into cramped margins and smashing things together just so that it can be seen without scrolling is horrible design.

Here’s the part that concerns me as an old school print layout guy. There’s a fundamental miss on what the “Above the Fold” content is supposed to be used for in your layout whether it’s print or web design.

How does print layout treat above the fold?

The above the fold content is not meant to be the meat of the content or really even the most important content. It’s meant to be eye catching. It’s the lure for people to pick up the paper or magazine.

100th Anniversary of the Seattle P-I NewspaperWhen thinking about the fold in a newspaper, think about the old school newspaper dispenser with the top half of the top page displayed in the little window. There is a deliberate attempt to put a catchy photo and headline in that window so people buy the paper. Is that the best thing in the paper, not even close. That’s the picture that’s going to look good on someone’s coffee table when they toss down the newspaper.

New York 1st day. magazine standsOr better, think about the magazine stand and how there are potentially hundreds of magazines there and you need for yours to stand out enough that people will buy it. Think this through – what can they see in the magazine stand? Typically they can see the top edge of the magazine and part of the picture. I was amazed once when I was talking to a freelance sports photographer who told me that he’d net $40k-$60k for one photo if he could land the cover picture on Sports Illustrated. But it makes a ton of sense. This concept of trying to stand out on just a headline and a photo is not lost on the smart people at Sports Illustrated. The right picture could make far more than $40k worth of a difference on the stand.

How does this apply to web design?

Honestly, it’s the same exact concept. The fold or scroll line is the area of the page that people can see without having to scroll down the page. This area needs to catch people’s attention correctly because they may only be on your page for a few seconds. If you look at the statistics on any site that gets a decent amount of traffic and the average page view length is measured in seconds, not minutes.

When people are browsing through and they get a link from another site or from a search engine, what’s the first thing that they see? Imagine that as if they are glancing past your page among the potentially hundreds of others that they are looking past which is really not that much of a stretch because they are looking to see which pages are more likely to fit their needs than others. They may not be paying for your content but they are investing their time.

The problems come in two sizes. First, there are designs that try to shove as much content as they can into that above the fold area because there’s an assumption that if it’s not there, their users won’t see it. Second, there are other designs that completely shun the idea of scrolling and end up with these horrid wizard style pages where the user has to click through to see the next page and the next page and so on. Either of these are poor choices.

Back to the article for a moment – I really liked CX Partners’s “Design tips to encourage scrolling”. What was missing is the “How to hook them and keep them” bit.

Let’s look at Jeff Blankenburg’s blog for a good reference here.

image

You know exactly what you are going to get on his page. The disk in the middle, which is what most people see first cycles through all of the social networks that he frequents. The tweets across the top express his last several publically blasted thoughts while the little bird that flies around them draws eyeballs to them. The menu shows you that he’s delivering Code and Slides through this blog in addition to other posts. The RSS tag that hangs down and swings a little definitely captures the attention and draws people to subscribe. Finally, the title of the blog and the first blog post start drawing eyes down the page to see the meat of the content. But what real content is above the fold on Jeff’s blog? Honestly, there’s none. All of the real content is below the fold so the user has to scroll for it. Going back to the CX Partners post, that’s fine. Users know how to and are willing to scroll for content if they find the page interesting. The *only* thing that I dislike about his header is that it’s a fairly large chunk that takes 3-5 seconds to load the first time. This is a killer if the use
r is only on the page for 3 seconds.

Another great example is any Amazon product page. They have the picture of the product, average user rating and price right at the top. The product detail, related products, the actual reviews and all of the rest of the content is below the scroll line. Obviously, it’s successful for them.

Wrapping up…

Above the Fold is widely miss-understood. You need to realize that this critical section of the page is not about shoving as much content as you can the user. It’s about effectively giving the “Elevator” pitch on your site and getting that longer look that will likely involve scrolling down to see the real content.

Guard the above the fold content and keep it to the essential bits that will tell the user what your site is about rather than trying to give them everything in one big drink from the fire hose. Whenever anyone talks to you about moving a certain section of content above the fold, turn the question on them by asking them how that keeps people on the site over all.

Glimmer – A jQuery Designer

I had heard about this effort a few weeks back but I’m thrilled that it’s public and I can talk about it now. Karsten Januszewski and some of the other whiz kids on the MIX team have put together a visual designer for jQuery called Glimmer.

Right now, they’ve got a number of design wizards that you can leverage but they’ve built a great plug-in model so that you can write your own for your favorite jQuery UI plug-in.

Check out their video on how to leverage Glimmer and how it all came to be.

Get Microsoft Silverlight

I’m really geeked and am looking forward to using this in my next web dev projects…

Three Essential Expression Blend Add-ins

image Expression Blend, believe or not, has an add-in model. It’s highly unsupported but it exists. The unsupported nature of it means that you have to do a little Red Green style patching to get them to run in the first place and if they cause instability, don’t call Microsoft support. However, there are a couple of really cool ones that are out there.

There are three that I think that you have to have – Unify, Colorful Expression and BlendSense: XAML Intellisense for Expression Blend.

Getting a Blend Add-in to run

Because it’s not a supported add-in model, there’s not a built in add-in manager that does the heavy lifting like the Visual Studio Add-In manager.

imageWhat you have to do is open up Expression Blend (or Design) passing in your add-in as a command line option. This starts up blend with that add-in enabled. The good news is that you don’t have to do any type of COM registration or anything to get it to work. The bad news is that it’s a hassle for those of us who don’t live on the command line like some people.

imageAnother other option, is to alter your Blend Shortcut to include the –addin parameter. This accomplishes the same task as the command line, it just does so without all the hassle of opening a command line.

There are multiple problems with both of these solutions.

First, it is only able to handle one add-in at a time. Second, that only loads the add-in when you specifically click on that shortcut but doesn’t work from a lot of other places, like launching from Visual Studio.

The great news about the first issue is that it can be solved by another add-in.

Unify Add-in

imageUnify is an add-in manager. It’s going to do all of the heavy lifting of loading and launch a number of different plug-ins such as the Xaml Intellisense for Blend and Colorful.

When Unify installs it automatically gives you a prompt that starts the Unify add-in. However, that still only solves the first problem of getting the add-in loaded when we deliberately set out to do so.

Launching Blend with Unity from Anywhere

The second problem, as mentioned above, is a little harrier. It’s that the shortcut is not the only way to run Blend. What you have to do is fix all of the different ways that you can run Blend. That includes selecting a project file from Windows Explorer and clicking Edit in Blend in Visual Studio.

This, unfortunately requires some registry hacks and the like but you can get there from here. The first registry hack to fix is the opening a solution from Windows Explorer. To accomplish this, the following code copied into a reg file works on a 64X machine. You’ll have to remove the (86) on a 32X machine.

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Expression.Blend.ProjectFile\Shell\Open\Command]
@=”\”c:\\Program Files (x86)\\Microsoft Expression\\Blend 2\\Blend.exe\” \”%1\” /addin:Unify.dll”

The second registry hack to fix is the launching from Expression Blend by right-clicking on a XAML file in Visual Studio and selecting “Edit in Expression Blend”. To do this requires understanding how the right click in Visual Studio works. The list of available commands comes from the registry. When selected, it passes in two parameter. The first is the path to the actual solution and the second is a /file:filename.extension parameter. It looks as follows:

“C:\Program Files (x86)\Microsoft Expression\Blend 2\blend.exe” “C:\Projects\QuickNavigation\QuickNavigation.csproj” /file:”Page.xaml”

What we have to do is redirect this in the registry to a bat file that will pass in our /addin parameter. Personally, I created a BlendWithUnify.bat file in the /Blend directory as follows:

start “Blend” “C:\Program Files (x86)\Microsoft Expression\Blend 2\blend.exe” /addin:Unify.dll %1 %2

Technically, we could have used the .bat file with the first mechanism as well. We need to fix the registry key as follows:

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Expression\Blend\VS]
“BlendLaunchPath”=”\”c:\\Program Files (x86)\\Microsoft Expression\\Blend 2\\BlendWithUnify.bat\””

Now we are cooking with gas and are ready to investigate a few more add-ins.

Colorful Expression Add-In

imageColorful Expression was directed to me by Jared Bienz after the Expression Design tutorial that I talked about recently. It’s a sweet add-in to Expression Blend (or Design) that gives you access to a ton of different color swatches that are out there on the web. Specifically, it taps into Kulor on the Adobe site. These are mostly swatches put together by pro-designers. These are also rated so you can pick the higher rated groups to be sure. In any case, they are definitely better than the ones that my color-blind self can choose.

imageJonas Follesø saw that Kulor has a open restful API and couldn’t resist playing with it. Combine that with the (unfortunately unsupported – see below on how to get it to actually run in Blend…) add-in model for Blend and magic happens.

What it does is that it shows up as a tab in Expression Blend (or Design) and alls you to browse color pallets from Kulor for use in your application. There are a couple of slick ways that you can do that.

First, if you are running Design, you can hit the down arrow looking thing under a swatch and save it as an Expression Design Color Swatch. The next two work in either Blend or Design.

First, you can click the # button or select the swatch and hit Ctrl-C to copy the swatch to the clip board. If you paste that on a Page or UserControl, you get the swatch, but more importantly, you get the colors created as static resource brushes. You can also just go into the XAML in either the UI surface or the app.xaml and paste them that way.

Second, you can use the color picker from the normal color picker to select an individual color. This is pretty cool as well as it allows you to be very selective about your colors.

You can also run it as a standalone application if you want to pick a color swatch for use in something other than Blend or Design. I can see using to figure out color pallets for my CSS style sheets. I’m also going to contact Jonas and see if he has thought about building it for Expression Web. But that’s just me wishing and hoping until I hear back from him.

Check out Colorful Expression and give it a whirl. I’m interested to see how you use it.

BlendSense: XAML Intellisense for Expression Blend Add-in

image Just yesterday I was on a call with a guy who was frustrated by the fact that there’s no Intellisense in Blend for XAML. Well, ask and you shall receive. There’s a skunk works project called BlendSense that was put up at http://code.msdn.microsoft.com/BlendSense but it was only for the Beta versions of Expression Blend 2.5. They haven’t updated it for the release which was actually called Expression Blend 2 SP1. So, the good folks at http://www.rhizohm.net recompiled the code for us and posted it at BlendSense: XAML Intellisense for Expression Blend.

There are a couple of limitations on it’s functionality. right now, it’s using the WPF namespace types and the like for it’s Intellisense. That means that it’s not ideal for Silverlight as the Intellisense might be lie to you – but that would just take me back to my MFC days… The second limitation is that it doesn’t handle custom namespaces and the like so you’re out of luck if you are using a custom control or third party components.

Technically, it’s using an XSD file that is built for Intellisense so you could edit it to fit your needs.

Conclusion

These three add-ins are fantastic and I’m thrilled that they are here. Both of them have already, in the day that I’ve been using them, saved me time and energy in some things that I’m working on. It’s a little bit of a frustrating process to get Unify running for every scenario but it’s worth it and hopefully I’ve done the leg work on figuring it out for for you.