<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>esmithy.net &#187; User Interface</title>
	<atom:link href="http://esmithy.net/category/programming/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://esmithy.net</link>
	<description>Stuff Hammered Out by Eric Smith</description>
	<lastBuildDate>Fri, 02 Jul 2010 20:35:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>MessageBox: Just Say Nein</title>
		<link>http://esmithy.net/2010/06/14/messagebox-just-say-nein/</link>
		<comments>http://esmithy.net/2010/06/14/messagebox-just-say-nein/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 03:28:41 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[User Interface]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://esmithy.net/?p=374</guid>
		<description><![CDATA[The Windows MessageBox is really convenient to use. A single line of code gets you a dialog box with a caption, a message, an icon and a set of available buttons that cover a lot of possible input scenarios. Unfortunately, the text on the buttons is supplied by the system, so if you&#8217;re building an [...]]]></description>
			<content:encoded><![CDATA[<p>The Windows MessageBox is really convenient to use. A single line of code gets you a dialog box with a caption, a message, an icon and a set of available buttons that cover a lot of possible input scenarios. Unfortunately, the text on the buttons is supplied by the system, so if you&#8217;re building an application that is intended to be localized, you invariably end up with something that looks like a bug.</p>
<p><span id="more-374"></span><img class="aligncenter size-full wp-image-375" title="Semi-Translated MessageBox" src="http://esmithy.net/content/messagebox.png" alt="" width="358" height="197" /></p>
<p>You&#8217;re pretty much guaranteed to get an entry in the bug database for this. My typical response, over many years of writing Windows apps, is something like this:</p>
<blockquote><p>Dear QA engineer,</p>
<p>This dialog&#8217;s buttons are provided by the system &#8212; we don&#8217;t have control over the text. If you were running a localized version of Windows, the &#8220;Yes&#8221; and &#8220;No&#8221; buttons would be in the appropriate language. Thanks for the report, though!</p></blockquote>
<p>I&#8217;ve written that more times than I care to admit before finally thinking, &#8220;Why don&#8217;t I just write a MessageBox where the buttons are localized?&#8221; I&#8217;m starting to feel that just the savings in QA/development back-and-forth time would make the little effort worth it. And if someone wants to run your application in German, shouldn&#8217;t it all be in German regardless of the Windows settings?</p>
<p>Unfortunately other common dialogs, like file dialogs, suffer from the same problem and aren&#8217;t so easy to replicate.</p>
]]></content:encoded>
			<wfw:commentRss>http://esmithy.net/2010/06/14/messagebox-just-say-nein/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>&#8220;It&#8217;s Just UI&#8221;</title>
		<link>http://esmithy.net/2010/01/30/its-just-ui/</link>
		<comments>http://esmithy.net/2010/01/30/its-just-ui/#comments</comments>
		<pubDate>Sun, 31 Jan 2010 05:41:32 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://esmithy.net/?p=348</guid>
		<description><![CDATA[Maybe I&#8217;ve just imagined this &#8212; created my own straw man to take down &#8212; but I&#8217;ve sometimes sensed some disparagement of user interface programming. &#8220;It&#8217;s just UI,&#8221; the architect will say. &#8220;It&#8217;s not like it&#8217;s a hard or interesting part of the system.&#8221; As I&#8217;ve done more and more UI development lately, I&#8217;ve had [...]]]></description>
			<content:encoded><![CDATA[<p>Maybe I&#8217;ve just imagined this &#8212; created my own straw man to take down &#8212; but I&#8217;ve sometimes sensed some disparagement of user interface programming. &#8220;It&#8217;s just UI,&#8221; the architect will say. &#8220;It&#8217;s not like it&#8217;s a hard or interesting part of the system.&#8221; As I&#8217;ve done more and more UI development lately, I&#8217;ve had to consider if this is the direction I want my career to go.<br />
<span id="more-348"></span><br />
Some UIs amount to binding a data grid to a database. In fact, based on Microsoft&#8217;s tools and examples, there are apparently a lot of those. In such cases, I agree, the UI isn&#8217;t terribly interesting. But to build a user interface for more sophisticated applications is a real challenge. Here are some of the reasons why.</p>
<p><strong>Graphic design</strong> &#8211; Even when you&#8217;ve got a talented graphic designer helping out, you usually don&#8217;t get handed everything you need, or everything exactly perfect. You&#8217;ll need to fill in the gaps to get a complete, attractive interface. Being able to fire up Illustrator to tweak and extrapolate, or layout a clean window are  good skills to have. Modern UIs also include animations, which are hard to get from a static &#8220;comp&#8221;.</p>
<p><strong> Validation</strong> &#8211; It is reasonable for the model to establish preconditions for methods. When user input is involved, there are few preconditions. Welcome to the wild west. Sure, you can insist that users enter phone numbers without any dashes, spaces, dots, parentheses or other corruptions of data purity, but if I&#8217;m the user, that just ticks me off.</p>
<p><strong> Error reporting</strong> &#8211; The buck stops here. The model can just throw an exception if something goes wrong, but presenting a meaningful and actionable error message to the user is hard.</p>
<p><strong> Threading</strong> &#8211; For Windows applications, all interaction with a window must happen on the thread that created the window. Yet to keep the UI responsive, you shouldn&#8217;t do time-consuming operations on the UI thread, forcing the introduction of other threads. You can see something slightly at odds here.</p>
<p><strong>Usability</strong> &#8211; Small design and implementation decisions can greatly impact usability, and what is easiest to code is frequently not what is easiest to use. Most applications involve tasks with a fair amount of complexity, and making them as simple as possible is way harder than laying all of the complexities at the feet of the user.</p>
<p><strong>Testability</strong> &#8211; There is  a gulf associated with what it means for UI to work. On one side, you have &#8220;functions as specified without defects&#8221;. On the other, you have &#8220;effectively supports the user in his/her goals&#8221;. Furthermore, it is really hard to unit test UI code, which sort of leads to the next challenge&#8230;</p>
<p><strong>Pattern ambiguity</strong> &#8211; I remember reading once (I wish I could remember the source) that if you ask 10 developers what the Model-View-Controller pattern is, you&#8217;ll get 11 different answers. While the most touted pattern in UI development, Model-View-Controller has so many variations that it can be daunting to figure out what it even means, and a fair amount of experience to begin to understand when a particular variation is most appropriate.</p>
<p><strong>Localization</strong> &#8211; Model code needs to be culture-sensitive, but the biggest impact of localization is in the UI. Some frameworks make it easier than others, but having a UI that lays out equally well with &#8220;Archive Video on PC&#8221; and &#8220;Archivierung aufgezeichneter Videos auf dem PC&#8221; is tricky.</p>
<p><strong> HCI priesthood</strong> &#8211; If you have a CS degree and actually write <em>code</em>, just give up now, you&#8217;ll never get it. Or so I&#8217;ve been told, but I still believe in the enlightened engineer.</p>
<p>I&#8217;m thinking that there&#8217;s enough challenge here to be interesting and skills that will continue to be in demand.</p>
]]></content:encoded>
			<wfw:commentRss>http://esmithy.net/2010/01/30/its-just-ui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Transparent WinForms Label</title>
		<link>http://esmithy.net/2009/11/28/transparent-winforms-label/</link>
		<comments>http://esmithy.net/2009/11/28/transparent-winforms-label/#comments</comments>
		<pubDate>Sat, 28 Nov 2009 18:40:41 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://esmithy.net/?p=315</guid>
		<description><![CDATA[Easy control transparency isn&#8217;t exactly a hallmark of Windows Forms. If you have a form with a background image or a gradient, the stock controls paint with a solid background to give a criminally egregious aesthetic. If you search the web for a solution, you might come up with a couple of proposed solutions: WinForms: [...]]]></description>
			<content:encoded><![CDATA[<p>Easy control transparency isn&#8217;t exactly a hallmark of Windows Forms. If you have a form with a background image or a gradient, the stock controls paint with a solid background to give a criminally egregious aesthetic.</p>
<p><span id="more-315"></span>If you search the web for a solution, you might come up with a couple of proposed solutions:</p>
<ul>
<li><a href="http://support.microsoft.com/kb/943454">WinForms: How to create a control transparent to other controls</a> &#8211; The official word from Microsoft, the solution is presented in several pages of poorly formatted VB code that makes you immediately want to look for something simpler, such as&#8230;</li>
<li><a href="http://www.doogal.co.uk/transparent.php">C# Transparent Label</a> (also <a href="http://www.west-wind.com/WebLog/posts/247977.aspx">referenced</a> from Rick Strahl&#8217;s blog) &#8211; This solution is much simpler; it&#8217;s just a Control subclass that doesn&#8217;t paint a background and draws the label text in OnPaint.</li>
</ul>
<p>After working with the second solution for a while, I discovered that it doesn&#8217;t handle updating the text very well. Just changing the Text property itself doesn&#8217;t do it, and if you invalidate the control, you get the new text painted over the old text. If you&#8217;re the kind of person who fusses about minutiae like <em>legibility</em> and such, this isn&#8217;t ideal.</p>
<p>So here&#8217;s a solution that has worked reasonably well for me, and that scores high marks in the simplicity category:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #008080; font-style: italic;">/// </span>
<span style="color: #008080; font-style: italic;">/// A label that is transparent.</span>
<span style="color: #008080; font-style: italic;">/// </span>
<span style="color: #0600FF;">public</span> <span style="color: #FF0000;">class</span> TransparentLabel <span style="color: #008000;">:</span> Label
<span style="color: #000000;">&#123;</span>
  <span style="color: #008080; font-style: italic;">/// </span>
  <span style="color: #008080; font-style: italic;">/// Paints the background with the parent's background image.</span>
  <span style="color: #008080; font-style: italic;">/// </span>
  <span style="color: #008080; font-style: italic;">///</span>
e
  <span style="color: #0600FF;">protected</span> <span style="color: #0600FF;">override</span> <span style="color: #0600FF;">void</span> OnPaintBackground<span style="color: #000000;">&#40;</span>PaintEventArgs e<span style="color: #000000;">&#41;</span>
  <span style="color: #000000;">&#123;</span>
    Rectangle rect <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Rectangle<span style="color: #000000;">&#40;</span>Location, Size<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
    e.<span style="color: #0000FF;">Graphics</span>.<span style="color: #0000FF;">DrawImage</span><span style="color: #000000;">&#40;</span>Parent.<span style="color: #0000FF;">BackgroundImage</span>, <span style="color: #FF0000;">0</span>, <span style="color: #FF0000;">0</span>, rect, GraphicsUnit.<span style="color: #0000FF;">Pixel</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
  <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>It basically scoops up the correct part of the parent&#8217;s background image and uses it as the background for the control. Yes, it still isn&#8217;t transparency, just a much better job of &#8220;camouflage&#8221; than the default behavior. If you&#8217;re painting the parent&#8217;s background, with a gradient brush for example, you can paint that into a bitmap instead and set the parent&#8217;s BackgroundImage to the bitmap for this solution to still work.</p>
]]></content:encoded>
			<wfw:commentRss>http://esmithy.net/2009/11/28/transparent-winforms-label/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>UI Horror: Birthdays</title>
		<link>http://esmithy.net/2008/06/28/ui-horror-birthdays/</link>
		<comments>http://esmithy.net/2008/06/28/ui-horror-birthdays/#comments</comments>
		<pubDate>Sun, 29 Jun 2008 03:48:12 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://esmithy.net/?p=135</guid>
		<description><![CDATA[Last year I wrote about my dislike for cell phones. Despite that, I actually have one now. Maybe I&#8217;ll write more about that at some point, but I was just recently reminded (irony to be revealed later) of a particularly sloppy user experience associated with adding birthdays to contacts and I couldn&#8217;t help rant a little. [...]]]></description>
			<content:encoded><![CDATA[<p>Last year I wrote about my <a href="/2007/09/01/them-newfangle…llphone-thingsthem-newfangled-cellphone-things/">dislike for cell phones</a>. Despite that, I actually have one now. Maybe I&#8217;ll write more about that at some point, but I was just recently <strong>reminded</strong> (irony to be revealed later) of a particularly sloppy user experience associated with adding birthdays to contacts and I couldn&#8217;t help rant a little.</p>
<p><span id="more-135"></span></p>
<p>This is Windows Mobile I&#8217;m talking about (version 6), and the feature is the ability to enter someone&#8217;s birthday in their contact entry. When you do this, it automatically adds an all-day event in the calendar application. Ooh, cross-application interoperability!</p>
<p>There&#8217;s only one problem: Newly added calendar items automatically get a reminder 15 minutes before the start. When does someone&#8217;s birthday start? Midnight, of course. So, by entering a birthday, you&#8217;re inadvertently scheduling yourself opportunity to celebrate it at 11:45 PM the night before! Since I use my phone as my alarm clock, it&#8217;s right there on the nightstand so I&#8217;m sure not to miss it.</p>
<p>By the way, I hope you had a nice birthday, Todd. </p>
]]></content:encoded>
			<wfw:commentRss>http://esmithy.net/2008/06/28/ui-horror-birthdays/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Matches and Bulk Actions</title>
		<link>http://esmithy.net/2006/05/26/matches-and-bulk-actions/</link>
		<comments>http://esmithy.net/2006/05/26/matches-and-bulk-actions/#comments</comments>
		<pubDate>Sat, 27 May 2006 00:00:00 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://esmithy.net/wp/?p=68</guid>
		<description><![CDATA[I noticed again this morning that Quicken was still unable to download my credit card transactions online. It hasn&#8217;t worked since some time in February. The error message said that my PIN or Customer ID was wrong. I know I&#8217;ve double-checked the PIN previously, so I figured it must be the user name that was [...]]]></description>
			<content:encoded><![CDATA[<p>I noticed again this morning that Quicken was still unable to download my credit card transactions online. It hasn&#8217;t worked since some time in February. The error message said that my PIN or Customer ID was wrong. I know I&#8217;ve double-checked the PIN previously, so I figured it must be the user name that was the problem. This led me to think about a few ways that the Quicken user interface is deficient.<span id="more-68"></span></p>
<p>First a general gripe, though. Does it seem unprofessional to anyone else to have software that you paid for constantly try to up-sell you on every imaginable financial service that Intuit has to offer? And in that vein, I should also add the disclaimer that I&#8217;ve resisted the up-sell sufficiently that this is Quicken 2004 Deluxe that I&#8217;m talking about.</p>
<h4>How do I change my customer ID?</h4>
<p>After looking around through the PIN vault, the account information screen and the online help, I couldn&#8217;t find any way to change the &#8220;customer ID&#8221; originally provided in the online account setup. So I just deactivated online access and set it up again, which worked just fine except&#8230;</p>
<h4>Why can&#8217;t you download only the transactions I don&#8217;t have?</h4>
<p>Resetting the online access also caused Quicken to forget which transactions it had already downloaded, so it got an entire year&#8217;s worth. Well, OK, bandwidth is cheap, and Quicken should at least be able to match all the transactions it had downloaded previously, right?</p>
<h4>How is this not a match?</h4>
<p>The requirements for a downloaded transaction to be a match for a transaction in the register are beyond me. I&#8217;ve got two transactions with the exact same date, payee and amount. Even the case of the payee matches because, after all, both transactions were downloaded from the same place. They are <strong>the same</strong>. But still, out of 9 months of transactions I already downloaded, there&#8217;s not a single match in the lot. Everything is &#8220;new&#8221;.</p>
<p>I had figured out previously that Quicken only checks &#8220;memorized&#8221; transactions for matches, which is kind of an interesting thing. Why doesn&#8217;t it &#8220;memorize&#8221; everything that made its way into my register? A full index of everything doesn&#8217;t seem like a lot to ask. I can spare the disk space. In any case, at some point I actually bothered to go through and suggest, one by one, that Quicken remember the transactions that were already in my register, in a vain hope that it might successfully execute a string compare.</p>
<p>Oh, well, I&#8217;ve got something like 200 duplicate transactions in the download list. I&#8217;ll just multiple select those, hit Delete and&#8230; wait a minute.</p>
<h4>I have to delete each transaction individually?</h4>
<p>There is no multiple select in the downloaded transactions list. You can accept all the transactions, or you can give each the special individual attention it obviously craves. It takes three clicks to delete a transaction from the list. First, you click the &#8220;Edit&#8221; button, which pops up a menu. I note ruefully that &#8220;Unmatch&#8221; is one of the items on the menu, which I&#8217;m sure was really easy for the programmer to implement:</p>
<pre>
EnableMenuItem(unmatchMenuItem, false);</pre>
<p>&#8220;Delete&#8221; is another menu item, which is click #2. Then of course comes the confirmation dialog. I was pleased to note that &#8220;Yes&#8221; is the default button in the message box, so that last click can actually be hitting Enter instead. Click, click, Enter. Click, click, Enter. Click, click, Enter. OK, I can&#8217;t do this another 197 times.</p>
<p>Hmm, what if I just click &#8220;Accept All&#8221;. Maybe deleting the duplicates of out the register is fewer clicks. Of course, then I would have to select every other transaction, which might offset any efficiency gain. Maybe I could write an <a href="http://www.autoitscript.com/autoit3/">AutoIt</a> script to do this&#8230;Â  But that&#8217;s kind of tricky when there&#8217;s no keyboard interface in the window for doing deletes. Oh, well. It&#8217;s a hack, so relying on exact mouse click coordinates is OK.</p>

<div class="wp_syntax"><div class="code"><pre class="autoit" style="font-family:monospace;"><span style="color: #000080; font-style: italic; font-weight: bold;">WinActivate</span><span style="color: #FF0000; font-weight: bold;">&#40;</span><span style="font-weight: bold; color: #008080;">&quot;Quicken 2004 Deluxe&quot;</span><span style="color: #FF0000; font-weight: bold;">&#41;</span> 
<span style="color: #0000FF; font-weight: bold;">For</span> <span style="font-weight: bold; color: #AA0000;">$i</span> <span style="color: #FF0000; font-weight: bold;">=</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">1</span> <span style="color: #0000FF; font-weight: bold;">to</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">20</span> 
  <span style="color: #000080; font-style: italic; font-weight: bold;">MouseClick</span><span style="color: #FF0000; font-weight: bold;">&#40;</span><span style="font-weight: bold; color: #008080;">&quot;left&quot;</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">900</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">808</span><span style="color: #FF0000; font-weight: bold;">&#41;</span> 
  <span style="color: #000080; font-style: italic; font-weight: bold;">MouseClick</span><span style="color: #FF0000; font-weight: bold;">&#40;</span><span style="font-weight: bold; color: #008080;">&quot;right&quot;</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">900</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">808</span><span style="color: #FF0000; font-weight: bold;">&#41;</span> 
  <span style="color: #000080; font-style: italic; font-weight: bold;">MouseClick</span><span style="color: #FF0000; font-weight: bold;">&#40;</span><span style="font-weight: bold; color: #008080;">&quot;left&quot;</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">910</span><span style="color: #FF0000; font-weight: bold;">,</span> <span style="color: #AC00A9; font-style: italic; font-weight: bold;">860</span><span style="color: #FF0000; font-weight: bold;">&#41;</span> 
  <span style="color: #000080; font-style: italic; font-weight: bold;">Send</span><span style="color: #FF0000; font-weight: bold;">&#40;</span><span style="font-weight: bold; color: #008080;">&quot;{ENTER}&quot;</span><span style="color: #FF0000; font-weight: bold;">&#41;</span> 
<span style="color: #0000FF; font-weight: bold;">Next</span></pre></div></div>

<p>That let me whack them in 20 transaction chunks (I didn&#8217;t want to bother counting exactly how many to delete). Not a long script, but what do &#8220;normal&#8221; people do? I guess maybe their carpal tunnel syndrome isn&#8217;t as advanced as mine. Click, click, Enter. Click, click, Enter.</p>
<p>I&#8217;m not sure if Intuit has added any actual features to Quicken over the past few years. It seems like they mostly just redesign the UI, which maybe explains why it hasn&#8217;t matured into something highly usable.</p>
]]></content:encoded>
			<wfw:commentRss>http://esmithy.net/2006/05/26/matches-and-bulk-actions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
