Author Archives: Bill Wilder

Unknown's avatar

About Bill Wilder

My professional developer persona: coder, blogger, community speaker, founder/leader of Boston Azure cloud user group, and Azure MVP

Jared Spool on what makes a UI Intuitive

Leave a reply

Jared Spool spoke at a Refresh Boston user group meeting on Thu May 28 in Cambridge, MA. During his talk, which was titled What Makes a Design Seem Intuitive?, Spool delved into some common ways User Experience (UX) goes wrong and some ways to make sure this doesn’t happen to you. My personal notes/interpretations follow; if you think I got it wrong or want to offer alternative interpretations, feel free to comment.

Executive Summary

  • Understand your users and their levels of skill/knowledge 
  • Understand the skill level needed by users of your software
  • Identify any gaps between the actual and needed skills (see two points above)
  • Design the software to bridge these skill gaps (which may vary from one user to the next)
  • Test your assumptions with real users to make sure you did everything right (Yogi Berra was right when he said You Can Observe A Lot By Watching!)

How to Create Non-Intuitive User Interfaces

First, some counter-examples – easy paths to UX Failure – how to be Non-Intuitive:

  • Do the unexpected: Spool showed an example of a site that used * (asterisk) to indicated those field “not required” which is opposite of popular convention. UX Fail.
  • Implement non-standard & sub-substandard behaviour: Spool showed a beautifully designed (visually appealing) site  with custom scrollbar that didn’t work right (pretty but not functional). They had implemented their own scrollbar functionality to get the look they wanted – but a fully-functional scrollbar is really hard to do well – theirs was jerky and unpredictable. UX Fail. (Plus a bonus Form Follows Function Fail.)
  • Be non-intuitive: Spool showed “Hay Net” – a very simple site to help sellers and buyers of hay find each other. This site had two main choices on the front page – “have hay”, “want hay” – but user testing showed that about half the time “have hay” was chosen to find someone who has hay, and the rest of the time chosen when I am the one who has the hay. (This might qualify as what my old friend Julianne would call “Escher words” – where the meaning flips back and forth in your mind between alternative viable interpretations much like certain of M. C. Escher‘s artwork). Wording was not intuitive, even though it was very simple. UX Fail.
  • Add non-core features until your application is large and complex: The larger and more complex an app, the harder it is to keep it intuitive. This was a general comment from the Q&A, supported by examples in his talk [Wang dedicated word processors were very complex (requiring 1-2 weeks of training to use), supplanted by WordStar, supplanted in turn by simpler Word Perfect, later supplanted itself by simpler Word (after Word Perfect had grown more complex), and now Word is really complex – tens of toolbars, including one for editing 3D graphics]. But simple does not imply intuitive (see “Hay Net” example above). UX Fail, again and again.

Different Kinds of People

  • Key point: Intuitive is personal – maybe it works for me, not for you — it is unlikely that all possible users have identical knowledge
  • Prior experience of the user matters – where are the on the Knowledge Continuum?

What is this Knowledge Continuum you speak of? Imagine a continuum where the left-most end is “No knowledge” and the right-most end is “Full knowledge” and your UI is designed for users somewhere on that continuum. If the user’s current level of knowledge is less than the level to which you target your design, your software has a problem – there is a gap that needs to be overcome.

A design is intuitive if the Current Level of Knowledge = Target Level of Knowledge, or if the gap is small enough such that it can be bridged with good UI design. If the gap is too large, you may need training (whether online on in-person).

Two types of Knowledge

  • Tool Knowledge (for a specific tool – Word, Visual Studio, TurboTax)
  • Domain Knowledge (independent of this (or any specific) tool – writing, developing in C#, creating personal tax return with weak tax-code depth)

Techniques for Creating Intuitive Designs

  • Field Studies (watch your users in action)
  • Usability Studies
  • Personas
  • Patterns (reuse known good patterns)

Specific Examples for Creating Intuitive Designs

  • Bring Target closer to Current w/o resorting to training or help. This means your software needs to target the right knowledge level – find that target using the techniques listed above – remember: Developer/Designer does not have same knowledge level as User (at least mostly true).
  • Wizards can reduce target knowledge requirements (bridging that knowledge gap).
  • If your user base consists of very different Current Knowledge levels (e.g., home tax preparation vs. professional tax preparers) you can create two (or more?) specialized/targeted applications.
  • Every six weeks, every member of design team needs to watch users using the design for two hours.
  • Don’t hire an agency to design your experience. (Spool thought it was fine to have an agency implement your application, but you need to design it first if you want to be successful.)

Further Information

Here is an older article by Jared Spool on the same topic as this talk: http://www.uie.com/articles/design_intuitive/ (thanks Joan).

UIE Resources

Is “UTF-8” case-sensitive in XML declaration?

3 Replies

At the beginning of an XML document, the XML declaration can optionally declare the document’s encoding format. This typically looks something like this:

<?xml version="1.0" encoding="UTF-8"?>

Sometimes you’ll see the encoding as “UTF-8” or “UTF-16” (all caps), sometimes as “utf-8” or “utf-16” (lowercase). Which is correct? Or are both correct? The short answer is that the uppercase variant is preferred, but both are allowed, though that does not ensure that both variants are widely supported. This suggests the following recommended approach:

Be forgiving when reading, strict when writing. When consuming XML, you are fully standards-compliant by supporting case-insensitive parsing of the encoding format. When producing XML, you are still standards-compliant by generating an uppercase encoding format, while also more likely to be readable by potential consumers.

Often the journey is more interesting than the destination when it comes to deciphering Internet standards; read on for the gory details.

Hmmm... is "UTF-8" in upper case, or lower case?

Hmmm… should “UTF-8” be in uppercase, or is it lowercase?

At first blush, the lowercase usage appears consistent with XHTML (which requires elements and attributes to be lowercase) – but does this convention apply to an XML Processing Instruction (which is metadata, not content)?

According to the W3C Recommendation for Extensible Markup Language (XML) 1.0 (Fourth Edition) section 4.3.3 Character Encoding in Entities:

“XML processors SHOULD match character encoding names in a case-insensitive way and SHOULD either interpret an IANA-registered name as the encoding registered at IANA for that name or treat it as unknown.”

Looking up the values in the Internet Assigned Numbers Authority (IANA) registry for the official spellings of the encoding values, you will find “UTF-8” and “UTF-16” – listed in uppercase. IANA also cross-references RFC-3629 which also goes with all caps. And all of the examples around the XML Recommendation seem to use uppercase exclusively.

So the uppercase versions appear to be the “right” ones.

But are the lowercase versions actually wrong? They might be. The meaning of the word “SHOULD” in the above quoted text is governed by RFC 2119 where it is defined to mean:

“… that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.”

If the writers of the XML specification wanted to insist that processors always treat this in a case-insensitive manner, the word “MUST” would have been used from RFC 2119.

So a processor can choose to ignore the part of the XML Recommendation where case-insensitive processing is suggested, and still be within the standard. A processor must always support uppercase; further, a processor only supporting uppercase is perfectly legal. Even if an uppercase only processor seems unlikely, I’m going to standardize on all caps when I create XML files.

What about other character encodings, or what if one is not specified?

A character encoding need not be explicitly specified; if it is not specified,  UTF-8 is default.

UTF-8 and UTF-16 are “universally” supported by XML parsers (by standard requirement); ISO-8859-1 is also often supported, but that char set is less complete (e.g., euro symbol missing).

Wikipedia says:

“The root element can be preceded by an optional XML declaration. This element states what version of XML is in use (normally 1.0); it may also contain information about character encoding and external dependencies.

The specification requires that processors of XML support the pan-Unicode character encodings UTF-8 and UTF-16 (UTF-32 is not mandatory). The use of more limited encodings, such as those based on ISO/IEC 8859, is acknowledged and is widely used and supported.”

These details and conventions are important to anyone generating XML files, such as for bloggers and podcasters publishing in the RSS and ATOM formats.

In summary, if you are producing XML files, it is best to output uppercase “UTF-8” and “UTF-16” since that is always known to be supported. If you are consuming XML files, it is advisable to accept both uppercase and lowercase variants since both are permissible within a strict interpretation of the, uh, “letter” of the standards. And if you are consuming XML files, be sure to handle the case where the optional encoding is not specified at all; the default value is “UTF-8” if nothing else is specified.

Also of interest:

Note added 29-March-2011:

Above it states “Be forgiving when reading, strict when writing.” This is similar to Postel’s Law (aka Robustness Principle), which states:

Be conservative in what you send; be liberal in what you accept.

Since mine is consistent with this, while also more specific, I will consider it simply an appropriate specialization of Postel’s Law and leave it as is.

Blogged with Flock

Tags: ,

Prism Talk – Slides and Code

3 Replies

I have spoken a few times recently (NH Code Camp 1 on 28-Feb-2009, Beantown .NET User Group on 05-Mar-2009, and Boston Code Camp 11 on 28-Mar-2009) on building composite applications for Silverlight and WPF using Prism (which is officially known as Composite Application Guidance for WPF and Silverlight). The slide deck and sample code are essentially the same in all cases, so I am only posting them once.

Recall from the talk that the Save As Podcast code was a (partial) demonstration of moving from “old school” code-behind WinForm pattern into Silverlight and WPF using a newer, cleaner pattern called Model-View-ViewModel and going on to leverage functionality specific to Prism. This code is a partial transformation of that code. To compile, you should first install Prism (aka Composite Application Guidance for WPF and Silverlight) and then essentially replace the “Hello World” QuickStart with this code – that will make your life easier since the projects will retain the relative links to other libraries.

A generic error occurred in GDI+ when reading from MemoryStream

Leave a reply

I am playing with TagLib#, an Open Source library that supports reading and updating ID3 metadata from MP3 files. I ran across the following error — “a generic error occurred in gdi+” — displaying a bitmap image I pulled from the MP3 file.

   TagLib.File file = TagLib.File.Create(@"foo.mp3");
   int pictureCount = file.Tag.Pictures.Length;
   System.Drawing.Bitmap bmp = null;
   if (pictureCount > 0)
   {
      System.IO.MemoryStream pictureBitstream = new System.IO.MemoryStream(
                                                    file.Tag.Pictures[0].Data.Data);
      bmp = new System.Drawing.Bitmap(pictureBitstream);
      pictureBitstream.Close();

      string fn = "foo.jpg";

      // create thumbnail
      using (System.Drawing.Image thumb =
                      bmp.GetThumbnailImage(10, 10,
                               new System.Drawing.Image.GetThumbnailImageAbort(
                                        delegate { return false; }),
                               IntPtr.Zero))
      {
         thumb.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
      }
   }

The “a generic error occurred in gdi+” message is not very helpful. I did some googling and came up with a few helpful posts on the matter, including several that appeared to be different problems. Looks like 4 Guys from Rolla have functional code.

My problem was in closing the stream too soon, which was not obvious to me at first, though makes some sense. The fix is to defer

      pictureBitstream.Close();

until after the Bitmap object is done with its work. I was initially under the illusion that once I’d created the stream for the image it read the whole image; of course that’s not true – it is not read in until it is read in.

I would submit this is a confusing UI design. Developers deserve better affordances. Good thing an exception was thrown; otherwise, this may have blown up later in a less obvious manner or at a less convenient time.

Coding Out Loud begins

Leave a reply

“If one advances confidently in the direction of his dreams,
and endeavors to live the life which he has imagined,
he will meet with a success unexpected in common hours.”
Henry David Thoreau from Walden

I am embarking on a coding adventure – and I plan to blog as I go. In effect, Coding Out Loud – thus the name of this blog. I do not know whether anyone will read this blog or follow my adventures, but I will give it a try anyway. I expect many of my posts will be the kind I would personally like to find – the kind I may even refer back to from time to time for reference – because it will in part be a repository of useful information, hard-won insights, interesting approaches, and documentation of thought processes for making trade-offs. My technology orientation right now is ASP.NET 2.0.

I have been a blog reader for a long time and a big fan of podcasting since its early years. For podcast listening, since September 2007 I have owned a sixth-generation iPod Video with 160 GB of space (bigger than hard drives on most of my computers – including my work computer – and I am a professional developer!); I do watch some video on this (e.g., TED), but I do like me some big hard drive (my older iPod nano constantly ran out of space from too many podcasts).

Since I am now embarking on blogging for myself the first time, I will try to make sense of features of WordPress (categories or tags?), technorati, feedburner, and others of the many technologies & services out there. Which should I care about – and why. This process may spawn blog posts.

I also do have a day job but I will not blog on it. So my adventures will be “off hours” – mornings, nights, weekends mostly – on my solo projects.

So, in summary, this blog will encompass my adventures coding + my adventures blogging (or podcasting someday..).

So the journey begins…