<?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>The UI Observatory</title>
	<atom:link href="http://uiobservatory.com/feed/?FB_request=1&#038;FB_feed=http%3A%2F%2Fuiobservatory.com%2Ffeed%2F&#038;FB_secret=905d2a" rel="self" type="application/rss+xml" />
	<link>http://uiobservatory.com</link>
	<description>Observing how we humans interact with our own artifacts.</description>
	<lastBuildDate>Thu, 25 Apr 2013 21:55:29 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>iOS-Style Menus on a Mac</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/ios-style-menus-on-a-mac/</link>
		<comments>http://uiobservatory.com/2013/ios-style-menus-on-a-mac/#comments</comments>
		<pubDate>Thu, 25 Apr 2013 21:54:24 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Computer Software]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=748</guid>
		<description><![CDATA[Apple&#8217;s official strategy for the future of OS X is transferring ideas and designs from iOS, the operating system that powers iPhone, iPad, and iPod touch, to the desktop. Apple&#8217;s own FaceTime video chat application1 is a more extreme example. Others are more subtle, like menus that feature the look-and-feel of their iOS counterparts. Unfortunately, [...]]]></description>
				<content:encoded><![CDATA[<p>Apple&#8217;s official strategy for the future of OS X is transferring ideas and designs from iOS, the operating system that powers iPhone, iPad, and iPod touch, to the desktop. Apple&#8217;s own FaceTime video chat application<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> is a more extreme example. Others are more subtle, like menus that feature the look-and-feel of their iOS counterparts.</p>

<p>Unfortunately, the results often deviate considerably from what Mac users are familiar with.</p>

<h3>How menus <em>should</em> behave in OS X</h3>

<p>Here&#8217;s how <em>standard</em> OS X menus behave:</p>

<ul>
<li>A menu is opened when you press the mouse (or trackpad, etc.) button while the pointer hovers over the menu&#8217;s title or icon.</li>
<li>If the mouse pointer hovers over a menu item, that item is highlighted.</li>
<li>When you release the button over a menu item, that menu item is selected, i.e. settings are toggled or commands triggered, and the menu item flickers shortly for visual feedback.</li>
<li>Menu items can represent sub-menus. These fold out automatically for as long as the mouse pointer is hovering over the item in the parent menu. Sub-menus have the same look and behavior as top-level menus.</li>
<li>If you single-click on a menu&#8217;s title or icon (i.e., you release the button while the pointer is still over the title or icon), the menu will stay open, so that you can select a menu item or other menu without having to hold down the mouse button. You just move the mouse around, and any menu that you hover over, will open, and any item be highlighted.</li>
</ul>

<p>To illustrate how iOS-inspired menus differ from this standard behavior, here&#8217;s a closer look at a context menu in iTunes 11, the toolbar menus in Safari 6, and the main menu of Dropbox 2.</p>

<h3>iTunes 11</h3>

<p>In iTunes 11, Apple introduced an iOS-inspired context menu for media tracks.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_iTunes.jpg" alt="The new iTunes context menu's appearance is very similar to that of an iOS menu." border="1" width="362" height="249" /></p>

<p>Regular context menus are opened by pressing the secondary button (also known as the &#8220;right mouse button&#8221;) while the pointer is on the item that the menu belongs to. In contrast, the new context menu is opened by clicking an icon that appears when you hover the mouse pointer over a track.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_iTunesHover.jpg" alt="The 'greater than' icon for the new context menu appears only for the track that the mouse pointer hovers over. The same applies to the five dots that represent the track's rating until you have actually given the track one to five stars." border="1" width="330" height="192" /></p>

<p>Unfortunately, there is a distinct lag between hovering over a track and the icon appearing. I assume that this is intentional to avoid too much &#8220;nervous flicker&#8221; on the screen while the user is moving the mouse around. It does feel odd in the context of an operating system, though, in which any similar highlighting instantly follows the pointer.</p>

<h3>iTunes 11 &#8212; Closing in on the (small click) target</h3>

<p>As you can see in the two screenshots above, the context menu&#8217;s icon is rather small, and so is the click area. If you miss it, you will select the respective track and reset any selections you may have made before. Conversely, if you intend to click a track to select it, you might open the context menu instead, because you inadvertently click its icon as it gets in the way.</p>

<p>Menus usually appear as soon as you press the mouse button; this menu, though, appears when you <em>release</em> the button, and this is the only available behavior. The menu does not support the more efficient click-move-release, so you must always click twice for making a selection from the menu.</p>

<p>So far, the menu feels a little bit unusual. Once you check out the sub-menu, however, it becomes downright odd.</p>

<h3>iTunes 11 &#8212; The sub-menu pushes its parent out of the way</h3>

<p>To open the sub-menu, you must click on its item in the parent menu, because it does not appear automatically. What&#8217;s more, in pure iOS fashion, the sub-menu shoves the parent menu out of the way and, thus, replaces it instead of appearing next to it.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_iTunesSubmenu.jpg" alt="The new context menu's sub-menu moves into the position of the parent menu, so you can only few either of the two at a time. A 'lower than' symbol in the top area above the actual menu items indicates that you need to click there to return to the parent menu." border="1" width="362" height="343" /></p>

<p>To return to the parent menu, you need to click the &#8220;lower than&#8221; character in the menu&#8217;s top right corner. By hiding the parent menu, you lose information about the context you&#8217;re currently in. Therefore, the sub-menu needs a title to remind you of where in the menu structure you are right now.</p>

<p>Such titles do not exist in regular menus, and there is no hover-over or on-click highlighting of the title region either, so you need to play the trial-and-error game: Will clicking the &#8220;lower than&#8221; character take me back to the parent menu? Is &#8220;Add To&#8221; just the title of the menu, or is it an active button? If both are buttons, do they have separate functions? What are their respective click areas? Or can I simply click anywhere in the top area to move up one menu level? (Hint: Yes, you can click anywhere in the title area.)</p>

<h3>iTunes 11 &#8212; Finder-like folders right inside a menu</h3>

<p>Another non-Mac-native design feature are Finder-like folders in the sub-menu. When you initially open the context menu, these folders are closed, and you open them by clicking on them. (Kudos to the designers for including standard, always-visible disclosure triangles…)</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_iTunesSubmenuFolders.jpg" alt="Folders in the Playlist sub-menu group tracks. Just like their counterparts in the Finder, they can be opened and closed by clicking on them." border="1" width="210" height="316" /></p>

<p>Once you&#8217;ve opened (or closed) a folder, it will retain its status &#8212; as long as you re-open the context menu on the same track, that is. Because if you open the context menu for <em>another</em> track, all folders will appear closed again!</p>

<h3>iTunes 11 &#8212; A new menu style with some benefits and yet more drawbacks</h3>

<p>The new context menu is a welcome addition to its original sibling which is still available. It is more discoverable thanks to the icon next to a track name. It has fewer items, making it more accessible for less experienced users.</p>

<p>That said, the new menu introduces additional, unusual methods of interacting with a user interface control as fundamental and well-established as a menu. Users need to learn and remember the different behaviors, and know which ones apply to which UI control, which may add unnecessary confusion and cognitive effort.</p>

<p>Experienced users may be alienated by having to interact with their machines in a way that is very different from what they&#8217;ve internalized for a long time.</p>

<p>When the new context menu&#8217;s sliding design originated on the iPhone, its functionality was born out of necessity: On the much smaller screen, sliding content in and out helps maximize the available screen real estate for actual content that the user needs right then and there.</p>

<p>On the bigger screen of a Mac, that necessity simply does not exist. In this case, it would be much more useful to provide full context by showing parent and sub-menus alongside each other.</p>

<p>As it is now, it feels as though the new context menu in iTunes was designed to show off iOS aesthetics on the Mac, even if it doesn&#8217;t make much sense in terms of interaction design.</p>

<p>Worse yet, not preserving the open/close state of the playlist sub-menu&#8217;s folders is a fundamental UI design flaw, no matter what you may think of the menu&#8217;s aesthetics.</p>

<h3>Safari 6</h3>

<p>On to Safari. Here&#8217;s the program&#8217;s toolbar with a number of buttons. <sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup></p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariToolbar.jpg" alt="From left to right, the buttons on the toolbar are: Go back in history, go forward in history (these previous two form a group), iCloud tabs, share, the regular combined URL and search field, and the downloads list." border="1" width="400" height="53" /></p>

<p>Quick question: Which of the five buttons (ignoring the Reader button for now) open menus when you click them?</p>

<p>Answer: All five!</p>

<h3>Safari 6 &#8212; Single-click for button vs. click-and-hold for menu</h3>

<p>Apple&#8217;s designers probably omitted the well-established downward triangle that visually indicates a menu control, for aesthetic reasons. That&#8217;s a very minor glitch when compared to the fact that these menus differ quite considerably in the way they work.</p>

<p>The two buttons on the left will likely look most familiar to you, as they let you step backwards and forwards in your history. If you hold down the mouse button for a while, a menu with a chronological list of visited sites appears.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariHistory.jpg" alt="A standard menu appears when you keep the mouse button pressed on either of the two history buttons." border="1" width="380" height="107" /></p>

<p>This menu is pretty much standard OS X faire with one minor exception: Since a simple click on that button steps through the visited sites, you cannot make the menu stay open after you release the mouse button.</p>

<h3>Safari 6 &#8212; iOS-style menu with weirdly broken undo</h3>

<p>The menu to the right of the two history buttons lists the websites that are currently open on any other iCloud-connected devices you have. This one uses the other method of opening a menu: The list opens when you <em>release</em> the mouse button. Just clicking-and-holding does nothing except highlight the button.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariCloudClick.jpg" alt="Clicking and holding the mouse button over the iCloud Tabs button highlights the button, but does not open the menu." border="1" width="380" height="107" /></p>

<p>The menu itself is completely non-Mac-native:</p>

<ul>
<li>It does not look native,</li>
<li>there is no highlighting of the item underneath the pointer,</li>
<li>the pointer is a hand instead of the usual arrow,</li>
<li>a menu item is only highlighted when it&#8217;s clicked, and</li>
<li>there is no flickering when you select an item.</li>
</ul>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariCloud.jpg" alt="The iCloud Tabs menu looks and behaves more like an iOS menu than a standard OS X menu." border="1" width="338" height="234" /></p>

<p>A truly weird aspect of this menu is that you cannot back out of a selection. Once you&#8217;ve pressed the mouse button over any of the menu items, you cannot <em>not</em> trigger it.</p>

<p>Yes, you can move the mouse pointer out of the menu before you release the button, but if you do, the most recently selected (i.e., still highlighted) item is loaded into the browser. Pretty strange.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariCloudSelection.jpg" alt="Only when you click on an item in the iCloud Tabs menu is that item highlighted." border="1" width="342" height="233" /></p>

<p>Stranger, still, is that if you move the pointer <em>upwards</em> out of the menu after clicking an item, none of the items will remain highlighted, or selected. And yet, as soon as you release the mouse button outside of the menu, the browser will load the site that you had originally clicked on!</p>

<p>If you&#8217;re compiling instructive examples for violations of the &#8220;<a href="http://en.wikipedia.org/wiki/Principle_of_least_surprise">Principle of Least Surprise</a>&#8220;, this is an excellent candidate. Do add it to your list now!</p>

<h3>Safari 6 &#8212; The truly OS X-native menu that is the exception</h3>

<p>Next up is the share menu, which behaves exactly as it should, i.e., as a completely standard OS X menu as outlined at the top of this article. Not much (new) to see here, so to speak.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariShare.jpg" alt="The Share menu lets you add a URL to the Reading List, bookmark it, email it, send it as an iMessage, tweet it, or share it via Facebook. And it is the one of the four Safari menus that behaves exactly like a regular OS X menu." border="1" width="209" height="174" /></p>

<p>Finally, at the right edge of the toolbar, there&#8217;s a menu with the list of downloads.</p>

<h3>Safari 6 &#8212; A formerly standard list window morphed into a non-standard menu</h3>

<p>This list used to have its own dedicated window in earlier versions of Safari. Now that it&#8217;s a menu tied to a browser window, you need to open such a window for accessing the list. If you hit the respective keyboard shortcut, Safari will open one for you if necessary.</p>

<p>No more stashing that list away in a corner of your screen if all you want to do is monitor a longish download.<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup></p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariDownloads.jpg" alt="The Download menu is another iOS-inspired menu. Similar to the iCloud Tabs menu, it does not highlight an item when the mouse pointer is over it." border="1" width="240" height="511" /></p>

<p>The menu behaves similar to the iCloud menu in terms of how you open it (click-and-release).</p>

<p>Only it doesn&#8217;t actually behave like a menu at all. Clicking on an item highlights it, and multiple selections are possible.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariDownloadsSelection.jpg" alt="More than one item on the Downloads menu can be selected, and thus highlighted, by clicking." border="1" width="240" height="511" /></p>

<p>Double-clicking an item or a (possibly multiple) selection, opens the respective files, but you cannot drag the icons out of the menu to, e.g., move the files from their current location to another folder.</p>

<h3>Safari 6 &#8212; A contextual menu inside a menu. Seriously!</h3>

<p>Heck, you can even open a contextual menu <em>inside the downloads menu!</em> Once you open that menu via a secondary click, only the clicked item is being selected, so you can only apply it to one item at a time.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_SafariDownloadsContextmenu.jpg" alt="A secondary click on the Downloads menu brings up a context menu for opening a downloaded file, revealing it in the Finder, copying its address (i.e., its URL), and removing it from the list." border="1" width="240" height="511" /></p>

<p>As an aside, I tried moving the downloads menu to another location (via the View > Customize Toolbar… command), but it always &#8220;flew&#8221; back to its original position at the right edge of the toolbar. No, I have no idea why it does that, or why that makes sense.</p>

<h3>Safari 6 &#8212; Consistency doesn&#8217;t live here anymore</h3>

<p>Five menus, three different looks, four different behaviors. And, frankly, the only reason for these design decisions that I can see is to desperately promote the iOS design aesthetic to Mac users.</p>

<p>Safari would not be any less useful or useable if it employed standard OS X menus only, nor if the downloads menu would be moved back to a dedicated window. Quite the opposite, in fact: Safari would most certainly be <em>more</em> usable that way.</p>

<h3>Dropbox 2</h3>

<p>Dropbox 2 is an example for third-party software whose designers have adopted the iOS design aesthetic, in this case for the application&#8217;s menu item.</p>

<p>This is what it used to look like previously:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxOld.jpg" alt="The original Dropbox menu item looks and feels exactly like a regular OS X menu. It offers commands like opening the Dropbox folder or launching the Dropbox website, but also contains staple items like Preferences or Quit, since this actually is Dropbox's only application menu." border="1" width="250" height="290" /></p>

<p>The old design behaved just like a regular OS X menu and didn&#8217;t leave its users with too many questions.</p>

<p>This is what the menu looks like now:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_Dropbox.jpg" alt="The new Dropbox menu item shows the items for opening the local Dropbox folder or the Dropbox website, the three most recently changed files, a status message, and a cog icon for another menu. Although it has fewer items, it takes up more room to a more generous, more spacious layout." border="1" width="325" height="292" /></p>

<p>It supports both methods to make the menu appear (click-move-release and click-and-immediately-release). If, however, you press-and-hold and then drag the mouse pointer over the menu items, there is no highlighting, and when you release the mouse button, nothing happens. In other words, opening the menu and selecting any of its items always requires two clicks.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxJustOpened.jpg" alt="None of the menu item's elements can be accessed immediately after opening the menu via the click-move-release method." border="1" width="325" height="292" /></p>

<h3>Dropbox 2 &#8212; An OS X first: menu items side by side</h3>

<p>The two main buttons are now arranged next to each other at the menu&#8217;s top. This may look fancy, but requires higher motor precision for making the selection than a simple one-column menu.</p>

<p>Also, there is no highlighting when hovering the pointer over either of the two buttons, so it is difficult to guess how far the clickable areas extend.</p>

<p>When clicked, the highlighting is very subtle, and it even persists when moving the mouse pointer outside of the menu. Consequently, you cannot tell whether your command will be canceled, or not.</p>

<p>It will be, but you have to try it out at least once to find out.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxHighlightPersists.jpg" alt="Confusingly, when you move the pointer out of the Dropbox menu, the highlight over the previously clicked-and-held button persists." border="1" width="325" height="292" /></p>

<h3>Dropbox 2 &#8212; Three file items is all you get to see</h3>

<p>The menu offers a list of the three most recently changed files in your Dropbox folder. This number of items is fixed, so all you get to see are exactly three files. Since there may be quite a few files in your Dropbox account, chances are that the list changes before you get to select, or share, the file you&#8217;re looking for.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxShareButton.jpg" alt="A handy Share button appears next to any of the three recently changed folders, but only when you hover the mouse pointer over that item." border="1" width="325" height="292" /></p>

<p>The highlighting works fine, though, with the exception that the Share button only appears when you hover over the menu. Which makes it difficult to guess if you can actually click the menu item itself, or whether the available actions are limited to sharing the file (it&#8217;s the former). And if you <em>can</em> click the item, what function will it trigger? (It will reveal the file on your Mac)</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxChangedRecentsList.jpg" alt="You can still click outside the Share button, in which case the button itself is not highlighted, but only the remainder of the line with the file's name." border="1" width="325" height="292" /></p>

<h3>Dropbox 2 &#8212; Same appearance, different functionality (consistency be damned)</h3>

<p>If someone has shared files with you, corresponding notifications appear above the list of changed files.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxNotification.jpg" alt="Notifications of newly shared folders appear, which above the recently the list changed files, have the same look like the latter. One would expect that they also behave in a similar manner." border="1" width="329" height="391" /></p>

<p>These items do not offer the Share button, which makes sense. But their behavior when you click them also differs from the list of recently changed files.</p>

<p>Instead of opening the file locally in your Dropbox folder, your web browser will come to the front and load the item in the Dropbox web front-end.</p>

<p>The items in the two lists look similar and essentially behave similarly. Why do they trigger different actions, then?</p>

<h3>Dropbox 2 &#8212; Splitting essential status information between two locations</h3>

<p>The original Dropbox menu displayed your total storage space on the Dropbox servers, the percentage used, and the synchronization status as disabled menu items.</p>

<p>The new menu has a status bar at the bottom, but it is now limited to the sync status. Right next to it is a cog wheel, as has become established as the symbol for a Tools or Settings menu. When you click it, you get almost all of the items that were on the menu in its previous design.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/iOSMenuStyle_DropboxTools.jpg" alt="The menu that hides behind the cog wheel icon is the same as the old Dropbox menu, less the things that are displayed in the new main menu." border="1" width="400" height="369" /></p>

<p>It&#8217;s here that you see your storage allowance and percentage used, although there is ample space to provide that information right next to, oder underneath, the new status line. Why hide it this way?</p>

<h3>An opinion on applying iOS design patterns to OS X software</h3>

<p>Despite the amount of criticism in this article, I do not generally reject the idea of applying iOS design patterns to OS X software. But such transfers must make sense. They must improve the interactions between the user and the operating system.</p>

<p>As it is now, there is still a lot of experimentation going on, and some new approaches will mature into useful, and usable, options for designing details of OS X software.</p>

<p>Nevertheless, the key is that new designs should not violate the usage patterns and behavior expectations that (especially long-time) OS X users have become accustomed to.</p>

<p>More specifically, they should go well beyond boasting visually pleasing new looks. In my humble opinion, it makes little sense to, for example, implement elegant iOS-style animations for flying in a sub-menu &#8212; as in the iTunes context menu &#8211;, if there is no fundamental need in moving the menus around in the first place.</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>Here&#8217;s what I think of FaceTime&#8217;s user interface: &#8220;<a href="http://uiobservatory.com/2010/face-to-face-with-facetime/">Face to Face With FaceTime</a>&#8221; covers the public beta of the application, &#8220;<a href="http://uiobservatory.com/2011/a-minor-face-lift-for-facetime/">A Minor Face-Lift for FaceTime</a>&#8221; looks at the changes Apple implemented for the release version.&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:2">
<p>I usually have more items on that toolbar, but for this observation I&#8217;ve focused on features that are built right into Safari and don&#8217;t rely on third-party add-ons.&#160;<a href="#fnref:2" rev="footnote">&#8617;</a></p>
</li>

<li id="fn:3">
<p>The downloads menu will close if you interact with its parent window, switch to another Safari window, or switch from Safari to another app. Yup, that <em>is</em> pretty crazy, no?&#160;<a href="#fnref:3" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/ios-style-menus-on-a-mac/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Button That Flees From the Mouse Pointer</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/a-button-that-flees-from-the-mouse-pointer/</link>
		<comments>http://uiobservatory.com/2013/a-button-that-flees-from-the-mouse-pointer/#comments</comments>
		<pubDate>Thu, 25 Apr 2013 20:37:02 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Computer Software]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=747</guid>
		<description><![CDATA[Apple is a company that, by and large, groks good design. Their teams&#8217; creations regularly constitute industry benchmarks, both in terms of industrial as well as user interface design. Like everyone who makes stuff, some of Apple&#8217;s design decisions may be debatable, but they rarely make choices that are outright, facepalm-inducing mistakes violating the very [...]]]></description>
				<content:encoded><![CDATA[<p>Apple is a company that, by and large, groks good design. Their teams&#8217; creations regularly constitute industry benchmarks, both in terms of industrial as well as user interface design.</p>

<p>Like everyone who makes stuff, some of Apple&#8217;s design decisions may be debatable, but they rarely make choices that are outright, facepalm-inducing mistakes violating the very foundations of design.</p>

<p>Unfortunately, just today, I happened to stumble over one of the latter.</p>

<h3>&#8220;Catch me!&#8221;, says the button, and runs</h3>

<p>If you synchronize your calendars in Apple&#8217;s iCal via iCloud and an error occurs, a little hazard triangle appears next to the iCloud label in the calendars list.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/FleeingButton_Icon.jpg" alt="The hazard triangle icon appears on the same line as the 'iCloud' group header, and sits at the right edge of that line." border="1" width="179" height="155" /></p>

<p>The moment you move your mouse pointer over that icon to find out what went wrong, the icon jumps to the left, because it happens to be in the location that is usually reserved for the Hide button. Which, ironically, is itself hidden and only appears when you hover the mouse pointer over it.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/FleeingButton_MouseOver.jpg" alt="When the mouse pointer is in the position that the hazard triangle is, or rather was, in, it shifts towards the center of the line to make room for the 'Hide' button, that takes its former place." border="1" width="179" height="155" /></p>

<p>I&#8217;m not sure why Apple&#8217;s designers got rid of the disclosure triangle, which has been a UI staple on the Mac for ages, and replaced it with a literal Hide button. This is one of those design decisions I&#8217;d consider &#8220;debatable&#8221;.</p>

<p>Placing another button directly on top of the Hide button, however, and making it jump out of the way when hovered over, is something I&#8217;d immediately list under the &#8220;what the heck where they thinking?!&#8221; heading.</p>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/a-button-that-flees-from-the-mouse-pointer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Case of the Mysteriously Missing iBooks</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/the-case-of-the-mysteriously-missing-ibooks/</link>
		<comments>http://uiobservatory.com/2013/the-case-of-the-mysteriously-missing-ibooks/#comments</comments>
		<pubDate>Wed, 24 Apr 2013 18:29:16 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Computer Software]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=723</guid>
		<description><![CDATA[Every now and then, I tidy up the media libraries on my mobile devices. When I sorted through the documents in the iBooks app recently, I noticed that two books &#8212; Aaron Cordova&#8217;s edition of The United States Constitution and the Little Snitch 3 documentation &#8212; appeared on the iPad, but not on the iPhone. [...]]]></description>
				<content:encoded><![CDATA[<p>Every now and then, I tidy up the media libraries on my mobile devices. When I  sorted through the documents in the iBooks app recently, I noticed that two books &#8212; Aaron Cordova&#8217;s edition of <a href="https://itunes.apple.com/de/book/united-states-constitution/id508811147?l=en&amp;mt=11">The United States Constitution</a> and the <a href="https://itunes.apple.com/de/book/little-snitch-3-documentation/id592132177?l=en&amp;mt=11">Little Snitch 3 documentation</a> &#8212; appeared on the iPad, but not on the iPhone.</p>

<p>It took <a href="http://twitter.com/IdeaMechanic/status/326488959695876097">a friendly reminder</a> from fellow-UX designer, Phil Suessenguth, to make me check whether these two titles were iPad-only.</p>

<p>Unfortunately, Apple makes that check surprisingly difficult.</p>

<h3>A hint on the iPad &#8212; if you can find it</h3>

<p>For starters, I searched for &#8220;little snitch&#8221; in iBooks on the iPad. It came up as the sole search result.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iPadSearch1.jpg" alt="iBooks finds one matching title for my search term, and lists it in the Results menu." border="1" width="400" height="299" /></p>

<p>When I tapped it, the book&#8217;s overview appeared. Because it was installed on the iPad, its status was properly displayed as &#8220;Downloaded&#8221;. This view does not indicate the book&#8217;s iPad-only status, though. For that, you need to dig a bit deeper.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iPadSearch2.jpg" alt="Now, the search shows the book's cover, title, author, release date, and ratings, but it does not state that this book is iPad-only." border="1" width="400" height="170" /></p>

<p>After tapping the item, and scrolling down the Details section, I finally found a Requirements field. It is in this field that Apple tells you that this book is only compatible with the iPad.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iPadSearch3.jpg" alt="Only the Requirements section in the iBook Store's Details view clearly state that 'This book can only be viewed using iBooks 3.0 or later on an iPad.'" border="1" width="400" height="533" /></p>

<p>On the iPhone, the user experience is much worse.</p>

<h3>&#8220;I ain&#8217;t telling you nuthin&#8217;!&#8221;</h3>

<p>Performing the same search on the iPhone, iBooks did find the book again. My expectation with search results like this is that if you tap on any of them, you will be taken to the respective product&#8217;s details.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iPhoneSearch1.jpg" alt="On the iPhone, the title appears in the search results list as well." border="1" width="400" height="710" /></p>

<p>Not so in this case: Tapping the single search result brought up a blank screen, even though the app clearly found the exact title I was looking for.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iPhoneSearch2.jpg" alt="While the search field does show the exact title of the book I was searching for, the results view beneath it is completely blank." border="1" width="400" height="710" /></p>

<p>At first, I thought I had run into a bug. So I terminated iBooks, relaunched it, repeated the search, and got the same result.</p>

<p>Worse yet, while the two books appear in the iTunes library on my Mac as well as in the Purchased Items list on the iPad, they are completely missing from that list on the iPhone. In fact, based on what you get to see on the iPhone, it&#8217;s as if I had never purchased the books at all, and I never could.</p>

<h3>A hidden hint in iTunes</h3>

<p>In the iTunes desktop application, you can see a book&#8217;s requirements when you view it in the Store.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iTunesStore.jpg" alt="This detail view shows the Requirements section with the iPad-only notice, as it is displayed underneath the book's cover shot in the iTunes desktop app." border="1" width="250" height="478" /></p>

<p>That changes as soon as you have downloaded the book: When you view it in the Books section of your iTunes library, there is no hint about a book&#8217;s iPad-only status. The Info dialog box on the book doesn&#8217;t help either, as the Kind field simply states &#8220;Purchased Book&#8221;, which applies to any book downloaded from the iBooks Store.</p>

<p>There is one place in the iTunes application, after all, where the compatibility information is displayed even for downloaded books: it&#8217;s the dialog box that opens when you double-click a book in iTunes.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iTunesWarning-iOS.jpg" alt="The warning dialog box states that 'This book can't be viewed using this computer. You can view this book using iBooks on your iOS device.'" border="1" width="400" height="133" /></p>

<p>Note how the ending of the second sentence changes if the book is iPad-only. Instead of &#8220;your iOS device&#8221;, it now says &#8220;your iPad&#8221;:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/MissingBook_iTunesWarning-iPad.jpg" alt="At first sight, this dialog box looks identical to the previous one. Its second sentence, however, ends in 'using iBooks _on your iPad_.'" border="1" width="400" height="133" /></p>

<p>This hint is so subtle, however, that I doubt it will be easily discoverable when you&#8217;re specifically looking for this piece of information.</p>

<h3>Tell me what&#8217;s going on!!</h3>

<p>If you missed the Requirements section when purchasing a book, or if you simply forgot about a specific book being iPad-only, the entire iTunes/iOS/iBooks infrastructure will leave you guessing why some books are synchronized to some, but not all, of your iOS devices.</p>

<p>Fixing this problem is easy:</p>

<ul>
<li><p>In iTunes, an icon in the Books or List views could indicate the iPad-only status. The &#8220;kind&#8221; field could say &#8220;Purchased book (iPad only)&#8221;.</p></li>
<li><p>In iBooks, an icon could indicate iPad-only books, similar to how the &#8220;+&#8221; icon in the App Store indicates universal iOS apps that work on both iPhone and iPad.</p></li>
<li><p>On an iPhone, iPad-only books could appear in the Purchased Books list with their download buttons disabled and labeled &#8220;iPad only&#8221;. The same design approach could be used in the Store&#8217;s Search results list.</p></li>
</ul>

<p>I find it baffling that this specific information is not provided in more prominent, more easily discoverable ways.</p>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/the-case-of-the-mysteriously-missing-ibooks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Embedding a Maintenance Schedule in Clever Packaging</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/embedding-a-maintenance-schedule-in-clever-packaging/</link>
		<comments>http://uiobservatory.com/2013/embedding-a-maintenance-schedule-in-clever-packaging/#comments</comments>
		<pubDate>Mon, 15 Apr 2013 19:29:32 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Simple Things]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=714</guid>
		<description><![CDATA[Modern vacuum cleaners are equipped with two air filters: One protects the appliance&#8217;s motor by filtering the air that is sucked in, and the other protects the user&#8217;s lungs by preventing fine dust particles from exiting the exhaust. These filters need to be replaced regularly, but much less frequently than dust bags. Manufacturers that sell [...]]]></description>
				<content:encoded><![CDATA[<p>Modern vacuum cleaners are equipped with two air filters: One protects the appliance&#8217;s motor by filtering the air that is sucked in, and the other protects the user&#8217;s lungs by preventing fine dust particles from exiting the exhaust.</p>

<p>These filters need to be replaced regularly, but much less frequently than dust bags. Manufacturers that sell filters and dust bags separately, place the burden of keeping track of these replacements on the user.</p>

<p>At least Miele makes their customers&#8217; lives a bit easier by bundling filters with dust bags into one retail box. The box contains four dust bags and one each of the two filter types.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/VacuumBagBundle.jpg" alt="A photo and the line '4 + 1 + 1' show that this box bundles dust bags with motor and exhaust filters." border="1" width="400" height="300" /></p>

<p>The manual for Miele&#8217;s vacuums states:</p>

<blockquote>
  <p>An [exhaust] filter is supplied with every box of Miele dust bags. It should be replaced each time a new box of bags is started.</p>
</blockquote>

<p>A similar statement addresses the motor filter.</p>

<h3>Make sure one box is completely empty before you start the next</h3>

<p>There is one flaw in this design, though.</p>

<p>Judging from the bundle, each filter should be good for use with four dust bags. By following Miele&#8217;s instructions of replacing the filters when you <em>start</em> a new box of dust bags, however, you would throw out the two factory-installed filters in a brand-new vacuum after filling just the one pre-installed dust bag.</p>

<p>The fix? Don&#8217;t replace the filters when you <em>start</em> a new box of dust bags, but when you <em>finish</em> it.</p>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/embedding-a-maintenance-schedule-in-clever-packaging/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hidden Dairy, Hidden Handle, Hidden Thermostat</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/hidden-dairy-hidden-handle-hidden-thermostat/</link>
		<comments>http://uiobservatory.com/2013/hidden-dairy-hidden-handle-hidden-thermostat/#comments</comments>
		<pubDate>Mon, 15 Apr 2013 17:06:59 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Appliances]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=712</guid>
		<description><![CDATA[While I hope to finally be done with writing about claiming missing airline reward miles, another travel-related area should provide many more interesting things to share with you: Staying at a hotel. Here are three new observations from that realm. What&#8217;s in that fridge? Whether you&#8217;re staying at a budget motel or pick luxury accommodation, [...]]]></description>
				<content:encoded><![CDATA[<p>While I hope to finally be done with writing about <a href="http://uiobservatory.com/2010/in-search-of-missing-airline-reward-miles/">claiming</a> <a href="http://uiobservatory.com/2010/more-on-missing-airline-reward-miles/">missing</a> <a href="http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/">airline</a> <a href="http://uiobservatory.com/2013/no-reply-emails-are-bad-this-is-worse/">reward</a> <a href="http://uiobservatory.com/2013/instant-airline-reward-miles-credit/">miles</a>, another travel-related area should provide many more interesting things to share with you: Staying at a hotel.</p>

<p>Here are three new observations from that realm.</p>

<h3>What&#8217;s in that fridge?</h3>

<p>Whether you&#8217;re staying at a budget motel or pick luxury accommodation, breakfast is almost always served as a buffet. At swankier places, fruit, dairy, cold cuts, etc. are presented on elegant porcelain plates, seated on piles of crushed ice to keep the products fresh.</p>

<p>Less luxurious hotels usually serve pre-packaged, (more or less) brand-name-quality items that you will find at any supermarket. Instead of the more elegant &#8220;iced buffet&#8221; setup, more perishable products are simply stored in a fridge.</p>

<p>The challenge for the restaurant management, then, is to make it easy for their guests to find the breakfast delights they are looking for.</p>

<p>The straight-forward solution is a fridge with a glass door.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_FridgeGlassDoor.jpg" alt="Two refridgerators side by side in a hotel breakfast buffet. One has a glass door, which lets you see what's inside without having to open its door." border="1" width="400" height="300" /></p>

<p>You can instantly see what&#8217;s inside that fridge. Before you open the door, you can conveniently make selection, which also benefits the environment as it preserves energy.</p>

<p>The second-best approach is to list the fridge&#8217;s contents on its door. Best intentions of the restaurant staff notwithstanding, I found the 90s style clip-art-sporting label on this fridge a bit lacking in design prowess, but also in terms if information architecture.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_FridgeDairyLabel.jpg" alt="A sheet of paper is affixed to the fridge with the opaque door, showing the Activia brand symbol, a generic milk carton sketch, and an Activia yoghurt cup. All in glorious gray-and-white, and rather fuzzy at the edges." border="1" width="400" height="300" /></p>

<p>The Activia logo at the top is only meaningful to someone who knows that brand, as is the somewhat obscure Activia-branded yoghurt cup on the right. The milk carton is more easily understood, but the &#8220;perspectivized&#8221; word &#8220;Milk&#8221; is difficult to read, especially from a distance, and especially for older eyes.</p>

<p>My guess is that simply placing the words &#8220;Milk &amp; Yoghurt&#8221; in large type on that fridge would be much easier to understand for the average guest.</p>

<h3>How (the heck!) do you open this thing?</h3>

<p>The much more painful challenge that almost every guest had with <em>both</em> fridges, though, was actually opening them. Here&#8217;s a shot from a somewhat different perspective.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_FridgeNoHandles.jpg" alt="While you can see -- and feel -- the hinge brackets that hold both fridges' doors in place, there is no handle on either door." border="1" width="400" height="300" /></p>

<p>See how both fridges lack an easily distinguishable handle?</p>

<p>Almost every person I observed was running their hands along the edges of the door to find a way to grasp it. The solution to this usability riddle is a groove that runs along the top of the door, and which you can grab &#8212; kind-a, sort-a &#8212; with the tips of your fingers.</p>

<p>Even after people had found that groove, they still struggled with predicting towards which side the door would open. Although the hinge brackets are visible, guests did not seem to notice them. No wonder, since the hinges&#8217; black paint &#8220;nicely&#8221; blends in with the rest of the enclosure.</p>

<p>How expensive would it have been for the manufacturer to add a plain, simple, and highly visible handle to the fridges&#8217; doors?</p>

<p>The position of such a handle would unmistakably indicate where and in which direction to pull, and on what side the door opens. They would also make it easier to get a good grasp on the doors, especially for older users or those with limited mobility in their fingers.</p>

<h3>One set of controls for show, another for functionality</h3>

<p>Moving from the breakfast buffet area into our room, this hotel features the typical, all-American, wedged-underneath-the-window air conditioning device. If you&#8217;ve ever stayed at a hotel with this kind of cooler/heater combo, you know that they can be ridiculously noisy. This specific unit was no exception.</p>

<p>Thankfully, its control panel is in plain sight right on the unit, and the controls themselves are simple enough to quickly spot the colder/warmer buttons, as well as the main power switch.<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_ACControlPanel.jpg" alt="The design of the control panel on the A/C unit is simple enough that it's easy to find the buttons for setting the temperature, or for switching the unit off completely." border="1" width="400" height="300" /></p>

<p>To my dismay, however, I kept pressing the buttons, but nothing happened.</p>

<p>My assumption was that, for some reason, guests were not allowed to change the machine&#8217;s setting. It&#8217;s that thing about &#8220;to the user, the UI is the system&#8221;. I.e., if <em>the user interface</em> does not seem to work, something in <em>the system</em> is either broken, or I&#8217;m not allowed to operate it or modify its configuration.</p>

<p>My assumption was wrong.</p>

<p>The next morning, after a somewhat sleepless night, we noticed a second control panel mounted to the wall opposite from the window, all the way across the room. You can see it in this photo, if you look very closely: It&#8217;s that minute silvery-white rectangle just below the floor lamp&#8217;s screen.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_ACThermostatHidden.jpg" alt="A tall floor lamp's screen at the other end of the room blocks the view of the thermostat mounted to the wall." border="1" width="300" height="400" /></p>

<p>Here&#8217;s a better view:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/Hotels_ACThermostatPanel.jpg" alt="The old-fashioned wall thermostat, ironically, has a less user-friendly user interface than the non-functional controls on the A/C unit." border="1" width="300" height="400" /></p>

<p>It took just a few button presses to verify that this control panel worked just fine.</p>

<p>To whomever designed that Activia-branded dairy label for the fridge: Can you please print out a sheet that says &#8220;Adjust via thermostat on opposite wall&#8221;, and scotch-tape it over the A/C unit&#8217;s built-in controls? And, yes, in every room in your hotel, please!</p>

<p>Thanks!</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>For something as simple as an A/C control panel, this is a really neat design: Note the correct mapping of the colder/warmer buttons, the helpful use of color, the application of the Gestalt Law of Proximity for grouping the controls on the panel, and the plain-language labels.&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/hidden-dairy-hidden-handle-hidden-thermostat/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Thinking (of Placing the Handle) Inside the Box</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/thinking-of-placing-the-handle-inside-the-box/</link>
		<comments>http://uiobservatory.com/2013/thinking-of-placing-the-handle-inside-the-box/#comments</comments>
		<pubDate>Fri, 05 Apr 2013 23:18:42 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Simple Things]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=705</guid>
		<description><![CDATA[Carrying large and heavy cardboard boxes can be awkward. In some cases (no pun intended), the very contents inside the box can inspire a solution to this problem. We recently bought a new vacuum cleaner. At first glance, the box that the appliance came in definitely was of the awkward-to-handle variety. The designers of the [...]]]></description>
				<content:encoded><![CDATA[<p>Carrying large and heavy cardboard boxes can be awkward. In some cases (no pun intended), the very contents inside the box can inspire a solution to this problem.</p>

<p>We recently bought a new vacuum cleaner. At first glance, the box that the appliance came in definitely was of the awkward-to-handle variety. The designers of the packaging had come up with an ingenious idea to make it much more convenient to carry this large and heavy box.</p>

<p>They had placed a little cut-out lid on the short side of the box right &#8220;above&#8221; the location of handle of the vacuum that was packaged inside. There is even a semi-circular hole to easily pull out the lid with a finger.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/CarryingHandle_Lid.jpg" alt="The lid on the side of the box is pre-cut on three of its four sides and bears a graphic that illustrates how to open it, and what to grab on the inside." border="1" width="300" height="400" /></p>

<p>By reaching through the opened lid, you can get a solid grab on the vacuum&#8217;s handle, and carry the entire box and its contents around without too much hassle or effort.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/CarryingHandle_GettingAGrip.jpg" alt="By reaching through the opening, you can grab the handle of the vacuum that's inside the box." border="0" width="300" height="400" /></p>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/thinking-of-placing-the-handle-inside-the-box/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Instant Airline Reward Miles Credit</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/instant-airline-reward-miles-credit/</link>
		<comments>http://uiobservatory.com/2013/instant-airline-reward-miles-credit/#comments</comments>
		<pubDate>Fri, 05 Apr 2013 22:46:15 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Computer Software]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=702</guid>
		<description><![CDATA[Claiming missing airline reward miles was covered in four previous articles on this website now, but here&#8217;s a twist to that process that makes me revisit this topic one more time. The first article in the series dates back to August 2010 and compared the workflows for claiming uncredited airline reward miles between Lufthansa&#8217;s Miles [...]]]></description>
				<content:encoded><![CDATA[<p>Claiming missing airline reward miles was covered in four previous articles on this website now, but here&#8217;s a twist to that process that makes me revisit this topic one more time.</p>

<p>The first article in the series dates back to August 2010 and compared the <a href="http://uiobservatory.com/2010/in-search-of-missing-airline-reward-miles/">workflows for claiming uncredited airline reward miles</a> between Lufthansa&#8217;s Miles &amp; More program and British Airways&#8217; Executive Club.<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>

<p>At the time, I did put in a claim for uncredited miles with Lufthansa, but did not have any similar request for British Airways. Thanks to my parents being on British Airways flights before signing up for BA&#8217;s loyalty program, I finally did get to test the entire process with an actual mileage claim.</p>

<h3>Method A: &#8220;Type a lot, wait a couple of weeks, and then we&#8217;ll see what happens.&#8221;</h3>

<p>As a quick reminder, here&#8217;s the online form that Lufthansa requires you to fill out for claiming yet-uncredited reward miles:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/InstantRewardMiles_LH.jpg" alt="The Miles &#038; More reward miles claim form has eight fields for entering data like airline name, date of flight, etc. Of these eight fields, no less than seven are mandatory." border="1" width="400" height="303" /></p>

<p>It is safe to assume that, like any other airline, Lufthansa keeps old booking records. With the ticket number serving as a unique identifier, why then are you required to fill in seven fields?</p>

<h3>Method B: &#8220;Enter one number. Done!&#8221;</h3>

<p>British Airways&#8217; form requests that you enter exactly one data item which is, of course, the ticket number.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/InstantRewardMiles_BA.jpg" alt="The British Airways form for claiming missing reward miles requires you to enter just the ticket number. Oddly though, this needs to be slit into two fields, one of which holds the first three digits, and the other holds the remaining ones." border="1" width="400" height="367" /></p>

<p>When I tried this last time with a ticket number whose associated flights had already credited to my account, the website listed the respective flights&#8217; miles as having been &#8220;[c]laimed previously through British Airways.&#8221;</p>

<p>My parents&#8217; newly created accounts had a mileage balance of exactly zero when I brought up the claim form this time. Entering a ticket number brought up a table of flights that was similar to the one I had seen previously.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/InstantRewardMiles_BAFlights.jpg" alt="After you enter the ticket number, and click Continue, the BA website will look up the flights that are linked to the number, and display them in a table." border="1" width="400" height="367" /></p>

<p>The status, however, was now given as &#8220;Gewährte Gutschrift&#8221;: &#8220;Credit Granted&#8221;.</p>

<p>Clicking the &#8220;Konto ansehen&#8221; (&#8220;View Account&#8221;) button took me back to the account&#8217;s main page, and the balance now showed a non-zero amount.</p>

<p>Not only was it enough to enter just the ticket number; the respective reward miles were credited immediately without any wait time!</p>

<h3>The possible impact of claiming miles from a partner airline</h3>

<p>The mileage credit I had requested from Miles &amp; More had been for a partner airline, and not for a flight with Lufthansa themselves. This may explain why it took a few weeks to see those miles added to my account.</p>

<p>It does not explain, however, why Lufthansa generally insists that you enter multiple redundant data items, whereas British Airways impressively demonstrates that this process works just fine if all you have is the ticket number.</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>The other three, in chronological order, were: &#8220;<a href="http://uiobservatory.com/2010/more-on-missing-airline-reward-miles/">More on Missing Airline Reward Miles</a>&#8220;, &#8220;<a href="http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/">Yet Another Attempt at Claiming Missing Airline Reward Miles</a>&#8220;, and &#8220;<a href="http://uiobservatory.com/2013/no-reply-emails-are-bad-this-is-worse/">No-reply emails are bad. This is worse.</a>&#8220;.&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/instant-airline-reward-miles-credit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>No-reply emails are bad. This is worse.</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/no-reply-emails-are-bad-this-is-worse/</link>
		<comments>http://uiobservatory.com/2013/no-reply-emails-are-bad-this-is-worse/#comments</comments>
		<pubDate>Tue, 26 Feb 2013 21:10:17 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Services]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=698</guid>
		<description><![CDATA[In yet another attempt at claiming missing airline reward miles, I had contacted Lufthansa&#8217;s Miles &#38; More loyalty program about some serious problems with their website. They responded via email a few days later, explaining that, in order to use the online mileage claim form, you must have purchased a ticket directly from their (partner) [...]]]></description>
				<content:encoded><![CDATA[<p>In <a href="http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/">yet another attempt at claiming missing airline reward miles</a>, I had contacted Lufthansa&#8217;s Miles &amp; More loyalty program about some serious problems with their website.</p>

<p>They responded via email a few days later, explaining that, in order to use the online mileage claim form, you must have purchased a ticket directly from their (partner) airline.</p>

<p>That, however, was exactly what we had done.</p>

<p>Hence, I wrote another email to provide them with more details and included a link to my blog post — just in case their developers would want to investigate this further.</p>

<p>The next email I received from Lufthansa was definitely not what I had expected.</p>

<h3>Forcing the customer onto a detour from email to web</h3>

<p>Here&#8217;s a screenshot of the original German email:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMilesFollowup_LHResponseError.jpg" alt="A Mail.app window with Lufthansa's response to my email inquiry." border="0" width="400" height="509" /></p>

<p>Allow me to translate for your reading pleasure:</p>

<blockquote>
  <p>Dear Miles &amp; More participant,</p>
  
  <p>thank you for contacting us.</p>
  
  <p>Unfortunately, we cannot answer your inquiry this way. Therefore, we ask you to use our feedback form at www.miles-and-more.com > Help &amp; Contact > Contact via E-Mail > E-mail the Miles &amp; More Service Team.</p>
  
  <p>Alternatively, you can enter your request in the top-right search field, and you will receive suggestions regarding the most commonly asked questions. Why don&#8217;t you just give it a try &#8212; with a keyword or even an entire sentence. See you soon at www.miles-and-more.com!</p>
</blockquote>

<p>When you contact a company for customer support these days, they often do not accept direct responses to their emails. Instead you&#8217;re being steered to another communications channel, like a web form.</p>

<p>Another tell-tale sign that you are not supposed to respond directly is a from: address that begins with something like <em>do-not-reply@…</em> .</p>

<p>With the original Miles &amp; More email, though, that was not the case: Nothing in it mentioned that I could not simply reply, nor was it sent from a no-reply email address. In fact, that email even had its reply-to set to its sender:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMilesFollowup_LHResponseHeader.jpg" alt="The email header of the original response from Miles &#038; More shows that it was sent from service@miles-and-more.com, and its reply-to field is set to the same address." border="1" width="356" height="75" /></p>

<h3>There&#8217;s a case to be made for online contact forms</h3>

<p>Generally, forcing customers to use an online contact form, makes things considerably easier for the company.</p>

<p>It ensures that a modicum of the customer&#8217;s personal data is collected via mandatory form fields; it allows routing the inquiry to the correct company department by making the user pick from a finite set of inquiry types; and it encourages the customer to keep their messages short by offering a fairly small text field for the actual inquiry.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMilesFollowup_LHContactForm.jpg" alt="The contact form on the Miles &#038; More website requires entry of personal details like name and address, and a subject must be picked from a popup menu that has twenty items. These menu items include 'PIN', 'Booking flight awards', or 'Technology'." border="1" width="400" height="586" /></p>

<p>That said, I had already provided all that information when I submitted my original inquiry via this very form. Linking the email exchange to that data would have been a snap, because a case number was included in the subject line of all emails going back and forth, including their eventual &#8220;can&#8217;t talk to us this way!&#8221; message<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>.</p>

<h3>Case closed. Somehow.</h3>

<p>The initial response did include a snail mail address for the Miles &amp; More support center. I have since sent paper copies of the tickets to that address and, hopefully, will receive the desired mileage credit.</p>

<p>Nevertheless, it does make me wonder what caused this breakdown in this communications process between Lufthansa and me. Was it an issue with the technical implementation, or is it actually intentional to make it as tedious as possible to keep a customer support case open?</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>I&#8217;ve blacked out the case number in the screenshots.&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/no-reply-emails-are-bad-this-is-worse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Progress Bar For a Bus Ride</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/a-progress-bar-for-a-bus-ride/</link>
		<comments>http://uiobservatory.com/2013/a-progress-bar-for-a-bus-ride/#comments</comments>
		<pubDate>Thu, 14 Feb 2013 22:06:36 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Simple Things]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=692</guid>
		<description><![CDATA[Progress bars are a staple of user interface design. They let you check the progress of a lengthier process &#8212; like copying a large file &#8212; with just a quick, cursory glance. And by observing how quickly the bar moves, you can intuitively estimate how long it will take for the process to complete. Progress [...]]]></description>
				<content:encoded><![CDATA[<p>Progress bars are a staple of user interface design. They let you check the progress of a lengthier process &#8212; like copying a large file &#8212; with just a quick, cursory glance. And by observing how quickly the bar moves, you can intuitively estimate how long it will take for the process to complete.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/BusProgressBar_OSXCopying.jpg" alt="Mac OS X's file copying progress dialog contains a prominent progress bar. Additionally, it displays detailed information about the name of the copied files, the copy destination, the amount of data already copied and remaining, and an estimate of the remaining time required for the process to complete." border="0" width="400" height="159" /></p>

<h3>Progress bars &#8212; they&#8217;re not just for digital devices</h3>

<p>At London&#8217;s Heathrow airport, you can find progress bars in an unusual setting: Namely, on-board the shuttle buses that run between the airport&#8217;s five terminals.</p>

<p>The buses feature monitors that display useful information on how to transfer between terminals. At he bottom of the screens, a progress bar visualizes the route from one terminal to another.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/BusProgressBar_EnRoute.jpg" alt="A monitor suspended from the bus' roof displays comic-style people on an escalator and states,'On arrival follow the purple connection signs'. The progress bar at the bottom shows that the bus has already gone three quarter of the way to its destination, Terminal five." border="1" width="400" height="300" /></p>

<p>The number of the destination terminal is shown at the end of the progress bar<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>. A nifty bus icon represents the vehicle&#8217;s current position along its route.</p>

<p>Although the bus icon does not move along its path all that smoothly, seeing it progress at all does help ease that infamous &#8220;Are we there yet?!&#8221; feeling &#8212; especially when you&#8217;re worried about making your connection flight.</p>

<h3>When (your users are) in a rush, stop cycling screen contents</h3>

<p>Here&#8217;s an interesting detail: While the bus is moving, the display cycles through several different information screens. Once it approaches its destination, however, it settles on a single screen, which announces the terminal you&#8217;re just arriving at.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/BusProgressBar_Arrival.jpg" alt="Once the bus arrives at Terminal five, the screen shows 'Terminal 5' in large type and displays a large icon that indicates connecting flights. As expected, the progress bar has completed, the bus icon is now hidden, but the T5 indicating the destination is still visible." border="1" width="400" height="300" /></p>

<p>By making the display static towards the end of the journey, all passengers immediately get off the bus, instead of possibly blocking the aisle while waiting for another screen-full of information to appear.</p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:1">
<p>Note how the direction of movement in a progress bar is from left to right, at least in our part of the world where we read and write from left to right. I wonder whether someone who grew up with a right-to-left script would consider the opposite orientation &#8220;more natural&#8221;.&#160;<a href="#fnref:1" rev="footnote">&#8617;</a></p>
</li>

</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/a-progress-bar-for-a-bus-ride/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Yet Another Attempt at Claiming Missing Airline Reward Miles</title>
		<link>http://uiobservatory.com/feed/?FB_go=1&amp;FB_url=http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/</link>
		<comments>http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/#comments</comments>
		<pubDate>Sat, 09 Feb 2013 02:30:45 +0000</pubDate>
		<dc:creator>Jochen Wolters</dc:creator>
				<category><![CDATA[Computer Software]]></category>

		<guid isPermaLink="false">http://uiobservatory.com/?p=688</guid>
		<description><![CDATA[Back in August 2010 I had tested how you can claim missing airline reward miles via the websites of Lufthansa and British Airways, respectively. Just recently I was on two flights with United airlines, for which I still need to claim my reward miles. This made for the perfect opportunity for a follow-up on this [...]]]></description>
				<content:encoded><![CDATA[<p>Back in August 2010 I had tested how you can <a href="http://uiobservatory.com/2010/in-search-of-missing-airline-reward-miles/">claim missing airline reward miles</a> via the websites of Lufthansa and British Airways, respectively. Just recently I was on two flights with United airlines, for which I still need to claim my reward miles. This made for the perfect opportunity for a follow-up on this topic.</p>

<p>Alas, in the almost one-and-a-half years since, almost nothing has changed.</p>

<h3>The same-old, same-old (both good and bad)</h3>

<p>British Airways rebranded their miles to &#8220;Avios&#8221;, so the wording of the link for claiming un-credited miles may just be that little bit less intuitive now. It is still in the same convenient location, though.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_BALink.jpg" alt="On the British Airways website, a link labeled 'claim missing avios' is located directly underneath the list of recent account transactions." border="1" width="400" height="116" /></p>

<p>On Lufthansa&#8217;s Miles &amp; More website, the previous text-only navigation menu has been replaced with a set of icons that mimic the look-and-feel of the iPhone&#8217;s Launchpad. In that menu, the &#8220;Request Miles&#8221; link/icon combo is a bit easier to find.</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_LHLink.jpg" alt="The Lufthansa Miles and More website displays a main navigation menu that consists of a number of icons with labels, one of which shows a loyalty card with a plane symbol and a plus sign, and labeled 'mileage request'." border="1" width="281" height="302" /></p>

<p>Unfortunately, my key complaint still applies: Where British Airways is happy to ask for just the ticket number to get the claim process started, Lufthansa still requires you to fill out this extensive form:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_LHForm.jpg" alt="The form on the Lufthansa website contains eight data items, namely airline name, date of flight, flight number, booking class, departure airport, arrival airport, ticket number, and name on ticket. Of these, only the latter field is optional. All seven others are required." border="1" width="400" height="358" /></p>

<p>Obviously, such minor changes alone would not justify writing about this topic again. The serious new problems I experienced with the Miles and More website now <em>are</em> well worth sharing with you, though.</p>

<h3>Unknown #1: The flight class</h3>

<p>The form requires picking a booking class. That information is not found on the boarding pass, but according to the confirmation email, the classes for my two flights were &#8220;G&#8221; and &#8220;K&#8221;, respectively.</p>

<p>Surprisingly, the popup menu does not offer the former at all:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_LHFormClassMenu.jpg" alt="The booking class menu contains five items for business class, thirteen for economy, and two for first, but none of these are of type G." border="1" width="328" height="358" /></p>

<p>Since the second flight was listed as a &#8220;K&#8221; class, I simply selected that class for the first flight as well.</p>

<h3>Unknown #2: The flight number</h3>

<p>On the boarding pass, the flight number is stated as &#8220;UA1555Y&#8221;. Nevertheless, the Miles &amp; More website considers this number invalid:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_LHFormInvalidFlightNumber.jpg" alt="The error message reads, 'Error with flight 2: Please enter a valid flight number'. The flight number field with the offending Y character is highlighted." border="1" width="400" height="63" /></p>

<p>Admittedly, this problem is not directly linked to the website&#8217;s design. In fact, the error message is displayed prominently, and thanks to the high-contrast highlighting, it&#8217;s easy to find the field whose entry needs fixing. Also, in the confirmation email, the flight number is listed without the trailing &#8220;Y&#8221;.</p>

<p>Nevertheless, this is something that the website could take care of automatically: it could silently discard the offending character, or at least offer via a dialog box to fix this, saying something like: &#8220;The flight number &#8216;UA1555Y&#8217; you have entered is invalid. Did you mean &#8216;UA1555&#8242;?&#8221;.</p>

<p>In this instance, it was easy to correct &#8220;my&#8221; mistake, but the biggest problem was yet to come.</p>

<h3>Unknown #3: The airline code (Say what?!)</h3>

<p>After hitting return, the form came back with the following error messages:</p>

<p><img class="centered" src="http://uiobservatory.com/media/2013/ClaimingMiles_LHFormInvalidAirlineCode.jpg" alt="For both flights, an error message is displayed, reading 'The entered airline code is invalid'." border="1" width="400" height="80" /></p>

<p>None of the form fields was highlighted, so it was impossible to tell which data item needed to be modified to make the website accept my input.</p>

<p>The only thing I could think of was to add the airline code to the flight number. Unfortunately, entering &#8220;UA268&#8243; instead of &#8220;268&#8243; did not help, as the site now complained about an invalid flight number.</p>

<p>If you think about it, the ticket number should be perfectly sufficient to verify a mileage claim. This is especially true if the ticket was purchased directly from a partner airline&#8217;s website.</p>

<p>Instead, you have to meticulously and manually copy a whole bunch of data from the boarding passes into the form. And once you did, you may very well be confronted with an error that you, as the user, cannot fix, but that stubbornly prevents you from submitting said data.</p>

<p>So I&#8217;m stuck now. And used the only option I had.</p>

<p>I&#8217;ve contacted Lufthansa via their website&#8217;s contact form and hope they will tell me what to do next. Who knows: Maybe they will even take the time to explain the problem to me.</p>

<p>As soon as I hear back from them, I&#8217;ll update this post. Stay tuned!</p>
]]></content:encoded>
			<wfw:commentRss>http://uiobservatory.com/2013/yet-another-attempt-at-claiming-missing-airline-reward-miles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

