User Experience

UI Design Patterns: let’s clean up our language

I’ve seen several developers recently give or refer to presentations on “UI Design Patterns” and then proceed to talk about Model-View-Controller, Model-View-Presenter, and Model-View-ViewModel.

I think as an industry we need to push our language a bit.

MVC, MVP, and MVVM are UI Architecture Patterns; they refer how to organize UI-level code so that it is modular, cleanly separated, and easy to maintain.

On the other hand, UI Design Patterns, sometimes called UX Patterns, attempt to document common interaction challenges and the existing affordances or established design principles that have proven effective in addressing those challenges.

The difference, I would argue, is that architecture patterns focus on execution principles (how to organize code) while design patterns focus on experience principles (how to organize information, flow, visual cues, etc).

Here are a few examples to help illustrate the difference.

UI Architecture Pattern examples

UI Design Pattern / UX Pattern examples

User Experience

UX-related podcasts

Recently while at Prairie Dev Con 2010 I gave a presentation entitled “Designing for Success: Why User Experience matters for your app.”

Following that talk several people asked for a list of UX- and design-related podcasts, so here they are!

User Interface Engineering

Jared Spool and his crew at UIE are some of my favorite UX-minded folks these days.  Their conferences are great, their blog content is informative, and their podcasts are fun.

I particularly enjoyed the one on Interview-Based Testing as Jared succinctly describes why I instinctively lean away from statistics-based evaluation of user testing and towards experiential and insight-based evaluation.

Boxes and Arrows

This site has been a great source for me over the years for everything from UX to Information Architecture to process to funky diagrams.  Most of these podcasts I haven’t gotten to yet but the ones I have are great.

Adaptive Path

These folks are leaders in the field of experience design and well known for innovative thought leadership.  While I don’t know that I’ve listened to any of these, they are definitely on my todo list.

Web Directions

The folks at Web Directions have been running great conferences since 2004, and some of the material has been archived online as slides and/or podcasts.  I have found great design-oriented podcasts on the following sites:

dConstruct 2007

2007 seems to have been a great year for publishing conference proceedings.  The dConstruct 2007 conference was no exception.

Of these, I particularly enjoyed Leisa Reichelt’s presentation called “Waterfall Bad, Washing Machine Good[mp3] and, of course, Jared Spool’s “The Dawning of the Age of Experience[mp3].

Dot Net Rocks

At first glance this podcast might seem an odd place to look for user-experience oriented insight, but recurring guest Mark Miller of DevExpress and CodeRush fame has a passionate and expressive take on everything from discoverability to Tufte’s principle of least effective difference.

Don’t let the hosts patter during the intro put you off, and skip right over “Better Know a Framework” if you don’t work with .NET, but Mark’s content is a great look at UX from a developer’s perspective.

Uncategorized

Styling the Web for Fun and Profit: 5 things about CSS that every web developer needs to know

I just finished my first of two presentations at the Prairie Developer Conference here in Regina!  It went really well, and a big thank you to all who attended. 

As promised, here are my slides and some links to online resources, some of which were mentioned during my session other which I just find really useful for front-end engineering.

Cheers, and enjoy!

Presentation slides

Links mentioned during the session

Firebug
The firebug plugin for Firefox has changed the way that I develop web pages. This tool does adds so much interactivity to developing and debugging CSS-based pages it is unreal. Open the HTML tab, hover over HTML tags, and watch the content, padding, and margin areas light up on the page. This is a real-time, dynamic version of the background-color layout debugging technique I mentioned this morning. Incedentally, both Firebug and myself prefer changing background-color over adding borders when debugging CSS layouts because borders have width and break your layout!
Position Is Everything
Bless the folks who run and write for this site – they have saved me and many other web developers countless hours of frustration by compiling and maintaining this treasure trove of documentation on wierd, bizarre, corner-case rendering bugs across a variety of browsers; not a surprise that most of the articles cover IE quirks.
A List Apart
This site has been around a long time. Published generally as a two-article-a-month kind of online magazine, they cover the gambit of topics related to web development, mostly from the perspective of content authors, editors, and front-end engineers.
Doctype
A StackOverflow-inspired Q&A site devoted entirely to the wonders of HTML, CSS, and JavaScript.
Stuff and Nonsense
Andy Clarke works here…
Transcending CSS
…and this is that beautiful book that he wrote.
Super Awesome Buttons with CSS3 and RGBA
This is the tutorial for crafting the CSS3 buttons that I referenced in my session. Check it out in IE8, nice beautiful, functional, square-cornered links. Life is to short to hack complex rounded corners for IE<9. You don’t get the time back.
YUI CSS Reset
Version 2 and Version 3 of the YUI developer CSS libraries at Yahoo. YUI is a fascinating framework for Javascript development as well as CSS work. I used Version 1 of YUI’s Javascript bits before I discovered jQuery, and I still use their CSS Reset, Fonts, and even Grids framework for my CSS work.

Other useful sites

You might also find these sites useful; they were helpful resources for me while preparing this presentation.

Selectutorial
A great resource on CSS selectors from the ground up.
Floatutorial
The same thing for floats.
Why Containers Don’t Clear Themselves
Another useful post on the beautiful complexity that is clearing and containing floats.

I enjoyed prepping and running this session.

Many thanks to all of you who attended.

Regina rocks!

PS. to any of you who peek at the markup for my blog, have mercy. One of these days I’ll find the time to tune up this blog, so look for a complete markup and style overhaul with the next release of Spin the Moose!

Uncategorized

5 things to think about while you are at the office

I recently came across EF’s post entitled 5 Things to Think About On Your Day Off and started to comment; instead I thought I’d pull out some etiquette from before twitter and post a response on my blog.

I know, who blogs anymore?

Well, here it is, with my humble apologies to Opinion @ Large. Perhaps we can agree to disagree, or even realize that I’m only speaking to the other side because I do believe a healthy balance needs both.

5 things to think about while you are at the office

  1. Children don’t stop growing while you are working. And you never get the time back.
  2. Don’t ignore your family while you are working and developing your career; never assume that they will be there for you tomorrow if you are never there for them today.
  3. Instead of thinking about how many hours you work, think about how many hours you don’t work. Then think about how many of those are given over to sleep and commuting. Then think about how many of those waking, at-home hours overlap with time when your kids or spouse are awake.  It will certainly change your perspective.
  4. It’s much easier and satisfying to focus on what you have accomplished than what you haven’t, but success in business does not make people happy if it has cost them fulfilling, connected relationships at home.
  5. You will always be able to find a reason not to do something about your work-life balance; it’s just a question of whether you let yourself look for an excuse.

Uncategorized

How to ignore a pesky System.Configuration.ConfigurationErrorsException

According to this post on StackOverflow, a ConfigurationErrorsException in a .NET application means that

you put an element in your config that is not recognized and not able to be serialized from the custom configuration class.

While this can indeed be a legitimate error that you need to trap and deal with in your code, I have also encountered it inexplicably arising in an ASP.NET app that otherwise runs as expected. 

In other words, I am working on a solution with an ASP.NET web app and a WCF services project that launch separately when debugging so that they can talk to each other.  The site builds, deploys, and runs without issue.  All my tests pass as expected. 

Since moving to Visual Studio 2010 on Windows 7 x64, however, I am suddenly getting ConfigurationErrorsExceptions thrown when running my app w/ the Visual Studio debugger.

The Workaround

If this happens to you and you need a workaround, rest easy; it is possible to tell the Visual Studio debugger to ignore these exceptions.

  1. Open the Debug menu in Visual Studio and select Exceptions.
  2. Click Add
  3. Enter in “System.Configuration.ConfigurationErrorsException” and click Okay

Visual Studio will now ignore those exceptions.

Uncategorized

Winnipeg Code Camp is this Saturday

The 3rd annual Winnipeg Code Camp is coming up quick, this Saturday, February 27th, 8am – 5pm at Red River College on Princess St. here in the ‘Peg.  Attendance is free, though they are asking people to register to get an idea of numbers; breakfast and lunch will be provided.

I’m giving a session called Building a Bundl: Developing a real-world url shortener with ASP.NET MVC at 10:30am in the Classroom where I’ll be sharing my experience creating http://bundl.it/ with Sara J. Chipps and Lloyd Humphreys.

Also, it looks like I’ll be hanging around to join a panel discussion at the end of the day, with topics to be determined by agreement amongst those in attendance.  As anyone who knows me can attest, I am nothing if not opinionated when it comes to my work so it should be fun.

See you there!

Uncategorized

Google phases out support for IE6 – So what?

If you work with the web, by now you’ve probably heard that on Thursday afternoon Google announced they will be phasing out support for IE6 on some of their key web properties, namely Google Docs and Google Sites.

Tech writers are all abuzz over this development, and many of them are suggesting that this marks the final nail in the coffin for the much derided legacy web browser, but as a front-end engineer with 10 years of experience building web sites I really don’t see what all the fuss is about.

I often hear developers complaining about IE6 and I’ve certainly done my share of venting at the quirks of it’s rendering engine but supporting it is really not that hard anymore.

No, IE6 doesn’t do a great job of implementing web standards, but by now those deviations are well lamented and, thankfully, well documented

Besides, IE6 is still a common visitor to many sites. In fact, according to Net Applications IE6 still makes up nearly 25% of browser traffic during the week. 

1 in 4 weekday visitors to your site may be using IE6.

If that number seems high, go take a look at Much Ado About IE6, a post by Mark Trammell outlining the results of some research with people who visited Digg using IE6.  It turns out that most of the people they interviewed are using IE6 on the computer at their office because they have no choice; either they don’t have administrator access on their computer or they have been told by someone (corporate IT, I’m looking at you) that they are not allowed to upgrade.  As Mark rightfully points out, telling these people that their browser is not supported is “not only pointless; it’s sadistic.”

Now, if you’re Google, perhaps you can afford to ignore those users; the rest of us need to ask ourselves some hard questions.

  • How important to your business model are visitors from a corporate office?

Picture one of those customers using IE6 because they have no alternative.

  • What kind of experience is that person going to have when they dial up your website?

And

  • How will that customer’s experience impact their perception of your brand?

Finally

  • How is that going to impact your bottom line?

Those are the questions that actually determine whether or not you need to support IE6, and you can see that they have nothing to do with Google.

Uncategorized

Presenting at MS Tech Days in Winnipeg

I just recently received word that I’m presenting a session at Microsoft tech days in Winnipeg next month.

The conference will be held at the Winnipeg Convention Centre on December 15th and 16th.

I’ll be doing Session 4 on Day 1 in the Developing for the Microsoft-Based Platform track:

  • Optimizing Your Apps for the Windows 7 User Experience

Here’s the description:

This session will show you the Windows 7 APIs that will let your applications – and your users – get the full Windows 7 experience. Learn about new extensibility methods to surface your application’s key tasks. Discover how enhancements to the taskbar, Start Menu, thumbnails, desktop elements, the Scenic Ribbon, Federated Search and Internet Explorer 8 provide new ways for you to delight your users and help make them more productive. If you want to give your users the best Windows 7 experience, this session is for you!

.NET, ASP.NET

Synching an ASP.NET application to a local deployment folder with MSDeploy

In my recent quest to fine-tune the deployment process for bundl.it I’ve been investigating Microsoft’s new Web Deployment Tool, a.k.a MSDeploy.  Recently released into v1.0, here’s what the IIS site says about it:

The Web Deployment Tool simplifies the migration, management and deployment of IIS Web servers, Web applications and Web sites.

It sounded interesting so I started playing with it in earnest this past weekend.

My first step was to use the command-line tool to sync a staged ASP.NET application from a staging folder to a mock, local deployment folder to see how this tool would behave:

[bat]msdeploy.exe –verb:sync –source:dirPath=c:\dev\bundl.it\www\staged -dest:dirPath=c:\dev\bundl.it\www\deployed[/bat]

Note: when running this from Powershell 1.0 on a Windows XP machine I got an error that looked like Powershell was swallowing the –verb, –source, and –dest arguments as powershell parameters.  With cmd.exe it worked, and the issue seems to have gone away this morning with Powershell 2.0 on Windows 7.

In any case, this worked like a charm. The tool made changes to the destination path until it was a mirror of the source path, all the while spitting out diagnostic messages like:

[bat]Info: Updating filePath (c:\dev\bundl.it\www\deployed\bin\bundl.it.dll)
Total changes: 1 (0 added, 0 deleted, 1 updated, 0 parameters changed, 32452 bytes copied)[/bat]

This was encouraging! That Total changes line implied that it would do much more than a simple XCopy-style deployment, so I went to my staging folder and deleted my web.config folder then ran the sync again.  Here’s the output:

[bat]Info: Deleting filePath (c:\dev\bundl.it\www\deployed\Web.config)
Total changes: 1 (0 added, 1 deleted, 0 updated, 0 parameters changed, 0 bytes copied)[/bat]

That’s exactly what I hoped for; files removed from our staging folder will get pruned out of production.

Next up, I’m looking to verify that MSDeploy will work for me to syncronize to a remote folder over FTP. After that I plan to expand on Eric Hexter’s recent MSDeploy examples and integrate MSDeploy into our MSBuild script. I’ll share the result in a few days.

ASP.NET

Staging an ASP.NET application with MSBuild

I spent some time this weekend hacking around our build process for Bundl.it and wanted to share a small success.

We have three folks tending the bundl.it garden, one in Jersey, one in the UK, and myself in Manitoba. We mostly use Google Wave and twitter to stay in touch and have just started using http://agilezen.com to track our work items. All that to say that our communication is largely asynchronous which can make scheduling deployments a bit tricky so I’ve been working on a one-click (or one batch file) deployment for our ASP.NET MVC app.

bundl.it.dev

We’re using subversion for source control.  Those .svn files don’t belong on the server, though, and we don’t really need any .cs code files sitting around either so the first thing we do is use an MSBuild script to build our ASP.NET MVC project to a local staging folder.

First we include the Microsoft.WebApplications.Targets file:

   <Import Project="c:/program files/MSBuild/Microsoft/
                         VisualStudio/v9.0/WebApplications/
                            Microsoft.WebApplications.Targets"/>

The Stage target looks like this:

  <Target Name="Stage">
      <CallTarget Targets="Clean;Build;Test;"/>
      <Message Text="Trying to stage to $(StageDir)"/>
      <MSBuild Projects="bundl.it\bundl.it.csproj"
                  Targets="Build"
                  Properties="Configuration=Release;
                              OutDir=.\bin\;
                              WebProjectOutputDir=$(StagingDir)"
                  StopOnFirstFailure="true"
                  />
  </Target>

Let’s go over this one piece at a time.

      <CallTarget Targets="Clean;Build;Test;"/>

Calling the Clean, Build, and Test targets ensures that we have a clean build and all automated tests have passed.

      <Message Text="Trying to stage to $(StageDir)"/>

The message task logs our intention.

      <MSBuild Projects="bundl.it\bundl.it.csproj"
                  Targets="Build"
                  Properties="Configuration=Release;
                              OutDir=.\bin\;
                              WebProjectOutputDir=$(StagingDir)"
                  StopOnFirstFailure="true"
                  />

Finally, this MSBuild task is where the staging magic happens. The “OutDir=.\bin\” property tells MSBuild to compile our ASP.NET application into a DLL and place bundl.it.dll in our app’s /bin folder, then the WebProjectOutputDir property tells MSBuild to copy our project into the $(StagingDir) folder.

The end result in our StagingDir looks a lot leaner:

bundl.it.staged

Here you can see that all the .svn folders are gone, as are all the .cs code files.  In fact, only those items from the project that are designated as “Content” have been copied over.

The staging folder is now ready for a clean and simple FTP Sync operation to get our content into production.

Older Entries »