<?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>ronny.haryan.to &#187; Usability</title>
	<atom:link href="http://ronny.haryan.to/archives/category/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://ronny.haryan.to</link>
	<description>Print: $9.50 -- Online: free</description>
	<lastBuildDate>Thu, 04 Feb 2010 13:05:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Bad Usability: IndosatM2 Member Site</title>
		<link>http://ronny.haryan.to/archives/2009/01/23/bad-usability-indosatm2-member-site/</link>
		<comments>http://ronny.haryan.to/archives/2009/01/23/bad-usability-indosatm2-member-site/#comments</comments>
		<pubDate>Fri, 23 Jan 2009 09:26:55 +0000</pubDate>
		<dc:creator>ronny</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://ronny.haryan.to/?p=161</guid>
		<description><![CDATA[Many people mistakenly think that &#8220;web design&#8221; means making a website looks nice. Well, that&#8217;s only half of the equation. It&#8217;s so much more than just layout. One of the major elements in web design is usability, which roughly means making a website feels nice. The other half of the equation that many people tend [...]]]></description>
			<content:encoded><![CDATA[<p>Many people mistakenly think that &#8220;web design&#8221; means making a website <strong>looks</strong> nice. Well, that&#8217;s only half of the equation. It&#8217;s so much more than just layout. One of the major elements in web design is usability, which roughly means making a website <strong>feels</strong> nice. The other half of the equation that many people tend to forget. A successful web design normally requires balancing of these two major elements.</p>

<p><span id="more-161"></span></p>

<p>Bad usability, especially obvious ones, is one of my biggest pet peeves in web development. So when a website that I &#8212; and probably many others &#8212; frequently visit has a terrible usability, I have a mixed feeling of anger and frustration that I can only hold for so long. In the spirit of positive thinking, I&#8217;d like to channel out that anger and frustration through this (hopefully) constructive criticism.</p>

<h2>A Closer Look at the Problem</h2>

<p>Let&#8217;s take a look at <a href="http://www.indosatm2.com/">IndosatM2</a>&#8216;s <a href="https://www.indosatm2.com/my-account.php/login">member site</a> as an example.</p>

<p>First, I&#8217;d like to ask a question. What&#8217;s the main reason people go to their own ISP&#8217;s website? I bet checking their usage is one of them. It&#8217;s probably and arguably the number one reason, if not the only reason. It is for me at least, since my ISP doesn&#8217;t provide a Dashboard widget and no one has yet to write such widget to work with <a href="http://www.indosatm2.com/">IndosatM2</a>.</p>

<p>The most commonly used function should be as easy to reach and as quickly displayed as possible. It wouldn&#8217;t make sense to force the user to jump through many hoops just to get to the most frequently wanted information. So let&#8217;s count how many steps are required to check the usage for an IM2 subscriber.</p>

<h3>Step 1: Logging In</h3>

<p>The login form is not on the main indosatm2.com website, requiring users to click a link that goes to a separate login page. (Of course, one can bookmark the page for quicker future access.)</p>

<p><a href="http://ronny.haryan.to/wp-content/uploads/2009/01/1-login.jpg"><img src="http://ronny.haryan.to/wp-content/uploads/2009/01/1-login.jpg" alt="IM2 Login" title="IM2 Login" width="450" height="230" class="alignnone size-full wp-image-164" /></a></p>

<p>Things to note:</p>

<ul>
<li><a href="http://en.wikipedia.org/wiki/CAPTCHA">CAPTCHA</a>. On a login form? What&#8217;s the point?</li>
<li>The size and the location of the login form compared to the text on the side.</li>
<li>The order of the points in the text. The &#8220;Usage History&#8221; point is last.</li>
</ul>

<p>How to improve:</p>

<ul>
<li>Remove the CAPTCHA. To prevent or deter brute force login attacks, use
  delayed response on failed login attempts within a short period of time.
  Block the IP address (either temporarily or permanently) after 50 repeated
  failed logins within 5 minutes, or whatever is reasonable.</li>
<li>Make the login form bigger and place it in the center of the page. It <strong>is</strong> a login
  page after all, so the login form should be the center of attention. Move the text
  below the login form. Show the Usage History as the first item.</li>
</ul>

<h3>Step 2: Closing Useless Popup</h3>

<p><a href="http://ronny.haryan.to/wp-content/uploads/2009/01/2-popup.jpg"><img src="http://ronny.haryan.to/wp-content/uploads/2009/01/2-popup.jpg" alt="IM2 Useless Popup" title="IM2 Useless Popup" width="450" height="224" class="alignnone size-full wp-image-168" /></a></p>

<p>Things to note:</p>

<ul>
<li>Needs to click on OK to make it go away.</li>
<li>It serves no useful purpose.</li>
</ul>

<p>How to improve:</p>

<ul>
<li>Remove it altogether. We would know if the login is successful or not. Only tell us
  when something is <strong>not</strong> working, not when something is working. It&#8217;s like
  a little child yelling proudly everytime they managed to accomplish the smallest
  things: it&#8217;s cute at first but it gets annoying after 3 times. Yes,
  Mr(s). Programmer, I know you have mad Javascript skills, but who are you
  trying to impress? Let me guess, you got the inspiration from Windows&#8217;
  popup balloons?</li>
</ul>

<h3>Step 3: The Home Page</h3>

<p><a href="http://ronny.haryan.to/wp-content/uploads/2009/01/3-firstpage.jpg"><img src="http://ronny.haryan.to/wp-content/uploads/2009/01/3-firstpage.jpg" alt="IM2 member home" title="IM2 member home" width="450" height="268" class="alignnone size-full wp-image-170" /></a></p>

<p>Things to note:</p>

<ul>
<li>The size of the image.</li>
<li>How the image serves no useful purpose.</li>
<li>Needs to scroll down to see the actual contents.</li>
<li>How &#8220;Last Invoice&#8221; and &#8220;All Invoice&#8221; (sic) functions are highlighted in the home page.</li>
</ul>

<p>How to improve:</p>

<ul>
<li>There&#8217;s already a menu on the right side. Make it hierarchical so that the user
  can get straight to the function they want rather than requiring them to see
  an extra page that only contain the submenus.</li>
<li>The &#8220;Last Invoice&#8221; and &#8220;All Invoice&#8221; (sic) buttons can go away. They are no longer
  necessary. Instead, put the contents of step 4 and 5 directly into this page. Read
  more below.</li>
<li>Remove the obnoxious image. At least, don&#8217;t make it so big, or move it somewhere
  else, don&#8217;t make it the first thing I see when I log in.</li>
<li>This step can be eliminated.</li>
</ul>

<h3>Step 4: The Usage Page</h3>

<p><a href="http://ronny.haryan.to/wp-content/uploads/2009/01/4-usage.jpg"><img src="http://ronny.haryan.to/wp-content/uploads/2009/01/4-usage.jpg" alt="IM2 Useless Usage Page" title="IM2 Useless Usage Page" width="450" height="276" class="alignnone size-full wp-image-172" /></a></p>

<p>Things to note:</p>

<ul>
<li>It already knows what month and year it is now (they are shown as the default).</li>
<li>Needs to click &#8220;OK&#8221; to get the information for that month.</li>
<li>Hmm. What does &#8220;Cancel&#8221; do?</li>
<li>The obnoxious image that serves no useful purpose.</li>
<li>Needs to scroll down to see the actual contents.</li>
</ul>

<p>How to improve:</p>

<ul>
<li>Show the month selection box straight in the home page, instead of in a separate page.</li>
<li>Make last month as the default value. See &#8220;How to improve&#8221; in step 5 for the reasoning.</li>
<li>This step can be eliminated.</li>
</ul>

<h3>Step 5: Finally</h3>

<p><a href="http://ronny.haryan.to/wp-content/uploads/2009/01/5-finally.jpg"><img src="http://ronny.haryan.to/wp-content/uploads/2009/01/5-finally.jpg" alt="IM2 Usage" title="IM2 Usage" width="450" height="277" class="alignnone size-full wp-image-175" /></a></p>

<p>Things to note:</p>

<ul>
<li>Again, the obnoxious image and the scrolling down.</li>
<li>The inconsistent use of English and Indonesian.</li>
<li>There&#8217;s no easy way to see data for other months, must go back to step 4.</li>
</ul>

<p>How to improve:</p>

<ul>
<li>Show the results for the current month straight away in the home page. This is
  what most people want to see. And since you already know what month it is now,
  why don&#8217;t you just show me right away?</li>
<li>The system can detect what day of the month it is now. If it&#8217;s still early in the month
  the system can also show the total usage for last month in this page.</li>
<li>The month selection box in step 4 is always shown at the top (and optionally at
  the bottom) of the page with the default value set to last month.</li>
</ul>

<h2>Conclusion</h2>

<p>The steps can be reduced down from 5 to only 2 without sacrificing any functionalities. The most useful and frequently used features are highlighted and shown as reasonable and sensible defaults. Logging in should be easy (username and password, that&#8217;s it). Then the home page, containing the current month&#8217;s usage (probably the most commonly requested information), is shown right away, without any annoying popup. If the user needs to see data for other months, then the month selection box should already be accessible from the same page, showing the next commonly wanted information (last month&#8217;s usage).</p>

<h2>Other Examples?</h2>

<p>There is another public website that I use quite often and I find that it has plenty of rooms for improvement in terms of usability: <a href="https://ibank.klikbca.com/">KlikBCA</a>. But one can write a whole book on that website alone discussing what&#8217;s wrong and how to improve it.</p>

<p>Have you seen other public websites that can be improved in its usability?</p>
]]></content:encoded>
			<wfw:commentRss>http://ronny.haryan.to/archives/2009/01/23/bad-usability-indosatm2-member-site/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>A designer must also be a user</title>
		<link>http://ronny.haryan.to/archives/2008/05/19/designer-must-also-be-a-user/</link>
		<comments>http://ronny.haryan.to/archives/2008/05/19/designer-must-also-be-a-user/#comments</comments>
		<pubDate>Mon, 19 May 2008 04:50:12 +0000</pubDate>
		<dc:creator>ronny</dc:creator>
				<category><![CDATA[Indonesia]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://ronny.haryan.to/archives/2008/05/19/usability-nightmare-atm-bca-klikbca/</guid>
		<description><![CDATA[Pop quiz, hotshot. How do you navigate to the previous screen in a BCA ATM? If you&#8217;re like me and most people, you press &#8220;Cancel&#8221;, reinsert your card, punch in your PIN again, and navigate to the screen that you want. Try repeating that while finding a menu item and a few people line up [...]]]></description>
			<content:encoded><![CDATA[<p>Pop quiz, hotshot. How do you navigate to the <strong>previous</strong> screen in a <a href="https://ibank.klikbca.com/">BCA</a> ATM?</p>

<p>If you&#8217;re like me and most people, you press &#8220;Cancel&#8221;, reinsert your card, punch in your PIN again, and navigate to the screen that you want. Try repeating that while finding a menu item and a few people line up behind you and you keep reinserting the card back as soon as the machine pops it out.</p>

<p>I saw there were at least two buttons on the keypad that were unassigned and could have been programmed as a generic back button. Even if implementing a generic &#8220;back&#8221; button is too much effort, the &#8220;back&#8221; function could have been easily assigned to one of the side screen buttons.</p>

<p>And if you want to pay for a ticket, do you go to &#8220;Pembayaran&#8221; or &#8220;Pembelian&#8221; first?</p>

<p><a href="https://ibank.klikbca.com/">klikbca</a> is not any better. They seem to enjoy torturing their user. OK, rather than just complaining, I&#8217;ll straight away give one possible improvement to their balance checking interface. Merge the &#8220;Informasi Saldo&#8221; and &#8220;Mutasi&#8221; as one menu item called &#8220;Informasi Saldo&#8221;. Then, show the balance at the top and all the transactions for the past 31 days below it by default while still allowing the user to filter the transactions by date. Don&#8217;t ask the user to <strong>manually count (today &#8211; 31 days)</strong>, just show it. If the range I put is more than 31 days, then just show what you have up to 31 days, don&#8217;t ask me to correct the starting date if you can easily fix it for me. If the info is too much and I don&#8217;t want to see that much info, then I&#8217;ll filter it later. If it&#8217;s too much info to show in one page, split it up into multiple pages. This is common sense. Why force the user to jump extra hoops <em>every time</em>?</p>

<p>The default should be sensible, and the default should be chosen because most people use it that way, NOT because it&#8217;s easier to program it that way. In order to understand the user&#8217;s pains, a designer must see from the user&#8217;s perspective and use the things they&#8217;re designing themselves. My girlfriend pointed out to me that most of these usability idiocy is because the people who designed/created it don&#8217;t use it themselves very often, and I agree with her.</p>

<p>All these big companies providing services to the public must hire at least a usability expert rather than wasting their money on paying half-assed so-called &#8220;designers&#8221; (that is if they even hire designers, they probably just let the programmers do the design). I mean just look at their websites. If any of you is an Indosat M2 subscriber, you would know how terrible their website is when you check your internet usage, it looks like it&#8217;s designed and written by a high-school kid who just learned PHP. Who the hell in this Web 2.0 age uses pop ups to notify the user that the login was successful?! Yes, successful, <em>not</em> unsuccessful.</p>
]]></content:encoded>
			<wfw:commentRss>http://ronny.haryan.to/archives/2008/05/19/designer-must-also-be-a-user/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
