tag:blogger.com,1999:blog-354026502009-06-26T16:58:41.941-07:00Re: Cognition* - Usability, Information Architecture, and Good DesignThanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-35402650.post-78014511255854653602009-06-26T15:11:00.000-07:002009-06-26T16:58:31.780-07:00Accessible Websites Don't Have to be UglyFor those who think accessible websites are ugly websites, think again. Here is a list of my top 5 favorite accessible websites (in no particular order) that are not just pretty to screen readers but also pretty to look at for those of us who are not vision impaired.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-3-50-17-PM-755287.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 233px; height: 320px;" src="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-3-50-17-PM-755268.png" alt="" border="0" /></a><span style="font-size:130%;">1. Orion House B&B</span><br />This bed and breakfast site fares well when it comes to accessibility. This site not only utilizes a lo graphic / version of the site, it has skip links as well as mobile versions. The site is pretty to look at but highly accessible when the images are turned off. Check out their <a href="http://bed-breakfast-port-isaac.co.uk/accessibility">accessibility page</a> as it details all of its extensive accessibility features.<br /><br /><div style="clear:both;"></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-06-41-PM-700963.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 182px; height: 320px;" src="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-06-41-PM-700049.png" alt="" border="0" /></a><span style="font-size:130%;">2.Chef Seattle</span><br />It seems pretty random that a site such as Chef Seattle would focus on accessibility but they make it clear that they<a href="http://www.chefseattle.com/accessibility.html"> redesigned with accessibility in mind. </a>Their site makes use of dynamic font sizing (using ems instead of fixed pixels) and ensuring the website works in even 800x600 resolution. Not only that, their site is highly informational and makes good use of graphics that enhance the information, not detracts from it.<br /><br /><div style="clear:both;"></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-19-48-PM-746929.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 226px; height: 320px;" src="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-19-48-PM-745535.png" alt="" border="0" /></a><span style="font-size:130%;">3</span><span style="font-size:130%;">. T</span><span style="font-size:130%;">he White House Website</span><br /><br />Even though the White House website has to be accessible per section 508, it didn't have to be monumental as setting a gold standard for accessible websites. From the successful implementation of a non-flash marketing showcase to ensuring sure every image has an alternate text, this website is one of my favorites.<br /><br /><div style="clear:both;"></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-37-52-PM-788243.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 167px; height: 320px;" src="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-37-52-PM-787441.png" alt="" border="0" /></a><span style="font-size:130%;">4. The BBC</span><br /><br />The British news network focuses many of its efforts on accessibility. Even though this is an information rich site, it gives many display options for its users to choose a comfortable browsing setting . On top of that, a huge section of the website is dedicated to <a href="http://www.bbc.co.uk/accessibility/">educating about accessible design</a>. They even created an <a href="http://www.bbc.co.uk/cbbc/newsreader/">accessi</a><a href="http://www.bbc.co.uk/cbbc/newsreader/">ble news reader</a> for those who want their news quick and easy. A footer sitemap also makes it easy for screen readers to jump deeper into the site without much hassle.<br /><br /><div style="clear:both;"></div><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-40-46-PM-717026.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 265px;" src="http://www.businessol.com/usability-blog/uploaded_images/6-26-2009-4-40-46-PM-717020.png" alt="" border="0" /></a><span style="font-size:130%;">5. Mozilla Firefox Website</span><br /><br />Mozilla employs many of a well designed accessible website: big fonts, text links that are descriptive, as well as a skip to main content link (yes, even if your website fits above the fold, a skip link is needed since screen readers do not "see" folds). However, the one thing it doesn't have is an "Accessibility" page that describes its efforts. Although such a page similar to the other 4 previous websites is needed, it is definitely a good way to ensure users know they are being kept in mind during the web design process.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-7801451125585465360?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-43901607821710551172009-04-23T16:15:00.000-07:002009-04-23T17:06:23.214-07:00Websites I Don't Understand, and Users Certainly Won't Either<p>Sometimes I come across major brand websites targeted towards consumers that I just don't get. They're hard to use, lack any type of branding, and don't relate back to the product. What's the thinking behind these sites?</p><br /><p>Last month, we had the <a href="http://www.businessol.com/usability-blog/2009/02/bad-friday.html">Skittles Social Media Experiment</a>. At least in that case, I could see what their goal was.</p><br /><h2>Cheetos.com</h2><br /><p>This time, I happened across the <a href="http://cheetos.com/" rel="noindex,nofollow">Cheetos.com</a> website. I saw the commercial for <a href="http://www.youtube.com/watch?v=GeOdls2lpZg" rel="noindex,nofollow">Giant Cheetos</a> on TV, and wanted to see if they were for real. The reason being that I love Cheetos, and how could you go wrong with a GIANT Cheeto?</p><br /><h2>Supporting Browsers</h2><br /><p>First, the site is completely in Flash, and it took a minute to load on our T1 connection. After that, you're greeted with a carousel looking thing with a bunch of TV screens on it playing video clips. At first I could not click on anything, and I realized the site only works on Firefox... no IE7 or Chrome support. When I re-opened it in Firefox, it "worked", but that's really a relative term.</p><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/screenshot-722986.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 171px;" src="http://www.businessol.com/usability-blog/uploaded_images/screenshot-722983.jpg" alt="" border="0" /></a><br /><p>Occasionally, a clown will walk by, a marching band will march across the screen, a man with Cheeto nunchucks will perform on screen, or a masked wrestler will scream. Um... okay. </p><br /><h2>Navigation / Interaction Controls</h2><br /><p>The internet, of all places, is where a lot of people have short attention spans. The reason being is users visit most website with a goal, and only in certain situations for leisure. It is important to provide intuitive controls and allow users to navigate easily and focus on your messaging, products, and content. The main problem with a lot of these types of websites like Cheetos.com, is that they are introducing new ways (often unintuitive) to navigate and interact. Do you want users to consume your content, or spend time trying to learn how to get to that content? Usability is often sacrificed on these type of websites.</p><br /><h2></h2><br /><p>It turns out the site is mostly a collection of games. The only mention of a "Giant Cheeto" is the "Giant Cheetos -Pet," which doesn't give me the information I was looking for. Ultimately, I give up after a couple minutes, which is probably a couple minutes longer than most visitors will spend on this site.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-4390160782171055117?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-5999113600601184922009-03-12T09:53:00.000-07:002009-03-12T10:29:24.016-07:00Common Usability Problems<p>The Usability team has a featured article in the March Issue of BusinessOnLine's Newsletter, <a href="http://www.businessol.com/news/main-newsletters/default.html">OPTIMIZED</a>. Here's an excerpt:</p><br /><blockquote><br />"The usability team here at BusinessOnLine recently took some time to reflect on our projects from the past year in preparation for our upcoming whitepaper, Top 10 Usability Problems of 2008. Many of the websites we encountered were redesigns, and even though they looked good aesthetically, the underlying usability problems plaguing these sites and hindering their success are problems we’ve seen year after year."<br /></blockquote><br /><p>Read the Article: <a href="http://www.businessol.com/news/main-newsletters/my-site-looks-great-but-it-still-doesnt-work.html">My Site <em>Looks</em> Great...But it Still Doesn't Work!</a> </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-599911360060118492?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-55200216440406529372009-03-12T09:05:00.000-07:002009-05-26T11:30:15.227-07:00HFI Recognizes Thanh Nguyen as the CUA of the Month!<p>Congrats to <a href="http://www.humanfactors.com/training/thanh_nguyen.asp">Thanh on being recognized by Human Factors International (HFI) as the Certified Usability Analyst of the Month!</a></p><br /><p>Each month Human Factors International (HFI) highlights the successes and achievements of a different member of their Certified Usability Analyst (CUA) community and our very own Thanh Nguyen, Director of Website Usability, was selected for the Month of April. This featured spot was given to her based on her extraordinary ability to successfully design interfaces for the end user, and the incredible thought leadership role she's demonstrated within the industry.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-5520021644040652937?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-5027672806728889102009-02-27T12:57:00.001-08:002009-03-13T09:44:59.548-07:00Bad Friday [updated 3/10/09]<p>A couple of terrible websites we noticed today that we had to blog about.</p><br /><h2>1. Skittles.com</h2><br /><p>I'm not sure when this site launched, but it's definitely unconventional.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/skittles-homepage-723480.jpg"><img style="margin: 0px auto 10px; display: block; width: 320px; height: 214px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/skittles-homepage-723388.jpg" border="0" /></a><br /><p>No, that's not the wrong screenshot... that's the actual Skittles.com homepage. It looks like a Wikipedia page and has a bunch of different instruction / disclaimers bombarding the user right away. Will someone recognize this as the Skittles website and take the time to read the instructions?</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/skittles-prompt-796126.jpg"><img style="margin: 0px auto 10px; display: block; width: 316px; height: 320px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/skittles-prompt-796106.jpg" border="0" /></a><br /><p>An age requirement for reading the Skittles.com website? I'm sure a lot of kids eat candy, and they'll be trying to look at this site. I hope there's no adult content on a candy website. The prompt also asks for the user to "Accept the Terms and Conditions," which there is no additional information provided besides what you see in the box.</p><br /><p>So essentially the entire site is made up of social media websites and other online resources, with an overlay navigation at the top left of the page.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/skittles-nav-783103.jpg"><img style="margin: 0px auto 10px; display: block; width: 313px; height: 288px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/skittles-nav-783090.jpg" border="0" /></a><br /><p>Here's how the navigation maps out:</p><br /><ul><br /><li>Home -> Wikipedia</li><br /><li>Products -> a mix of Skittles.com's own pages and Wikipedia</li><br /><li>Media -> YouTube and Flickr</li><br /><li>Chatter -> Twitter</li><br /><li>Friends -> Facebook</li><br /><li>Contact -> Skittles.com website</li><br /></ul><br /><p>Most of the pages take the user to social networking websites, and a few take the user to Skittles.com's own webpages. This ends up being a confusing experience, especially for users who do not have any idea what Flickr or Twitter is. For those who do know what each of those social networks are, is embedding those social networks onto the Skittles website really going to provide additional value for them? On top of that, the experience is not unified which does not lend itself to be seen as trusted content. <span style="font-weight: bold;">Skittles has missed its opportunity to be the authority on skittles.</span><br /></p><br /><p>The Skittles.com website exemplifies what happens when usability is not a priority and the user is considered last. Skittles may have conducted a focus group and found out their customers use social networks, but they took that information and built a site that didn't incorporate usability testing to see how users actually use and accept this website.</p><br /><p>UPDATE: Apparently if you're younger than 13 years old, you get this error message and all links on the page are disabled. I didn't know that people under 13 were too young to read nutritional information about their favorite flavor of Skittles.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/skittles-error-735244.jpg"><img style="margin: 0px auto 10px; display: block; width: 320px; height: 145px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/skittles-error-735232.jpg" border="0" /></a>If one was to say their strategy was unique, one would be wrong. <a href="http://www.modernista.com/">Modernista! </a>was the pioneer- skittles merely mimicked them.<br /><br />After launching the site, they have had to change their homepage 3 times:<br /><br /><span style="font-weight: bold;">Day 1</span>: 2-27-09 Homepage redirects to the wikipedia page. Over the weekend, wiki tells skittles to stop it: <a href="http://cli.gs/6BuhJ4">http://cli.gs/6BuhJ4</a><br /><br /><span style="font-weight: bold;">Day 2:</span> 3/2/09 skittles changes its homepage to twitter. Tweeters hijack the brand and has its own opinions: <a href="http://cli.gs/L0qrXj">http://cli.gs/L0qrXj</a><br /><br /><span style="font-weight: bold;">Day 3:</span> 3/3/09 Homepage change #3, Facebook page is now the homepage. They should have learned from Modernista's mistakes.<br /><h2>2. ign.com</h2><br /><p>This one will be short and sweet. When the user searches for IGN (a leading gaming site), they see this:</p><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/Capture-750814.JPG"><img style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 122px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/Capture-750810.JPG" border="0" /></a><br /><p>When a first time user clicks on this link, they user are then presented with this page:</p><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/step2-753022.jpg"><img style="margin: 0px auto 10px; display: block; width: 400px; cursor: pointer; height: 147px; text-align: center;" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/step2-752901.jpg" border="0" /></a><br /><p>No, I am not kidding you- this is their homepage. They immediately serve up an ad before the user even reaches the homepage. This strongly violates the user's mental model of:</p><br /><ol><li>Step 1: Click on main link on search engine results page</li><li>Step 2: Get to IGN homepage with IGN logo and branding and links deeper into the site</li></ol><br /><p>If the user waits around for about 5 seconds or so, the ad automatically redirects to their homepage. I doubt a user would even wait that long, considering studies have shown users have a 4 second limit on what they are willing to wait for.</p><br /><p>At least IGN cookied it so that if you search for IGN again, you won't be presented with the ad first. However, I doubt a first time user would try to go back a second considering they were thoroughly confused the first time around. </p><br /><p>And I thought our days of <a href="http://en.wikipedia.org/wiki/Splash_screen">Splash Pages</a> were over, that usability has become at the forefront of every marketer's mind. Instead, now we have <span style="font-weight: bold;">Splash Pages 2.0 </span>where ads are the new splash screens.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-502767280672888910?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-78807261086538419642009-02-03T10:22:00.000-08:002009-02-03T16:08:03.407-08:00T&TT: Dissecting a Super Bowl Commercial Website<p>During Super Bowl XLIII, there were a few terrific and a few terrible commercials. Pretty much every advertisement was tied into a website address, so we decided to take a look at them and use a couple as examples in today's Terrible and Terrific Tuesday (T&TT). There were plenty of terrible websites, and few terrific ones (if any). The two sites we've chosen for today are: Audi.com and Teleflora.com</p><br /><h2>Terrible: Audi</h2><br /><p>Overall, there are some basic usability principles that the site is violating, from the right aligned primary navigation and logo, to the mismatching calls to action (continue the chase vs. participate in progress), and the appearance that the video is too large for the layout, but I'm not going to get into those problems.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/audi-701334.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 222px;" src="http://www.businessol.com/usability-blog/uploaded_images/audi-701254.jpg" border="0" alt="" /></a><br /><p>What really prompted me to use the Audi site was the use of the horizontal navigation menu to browse through cars.</p><br /><p>We recommend against horizontal type fly-out or hover menus in most cases and this is a great example of why. Users typically move the mouse towards a target on the page in somewhat of a straight line. Acceleration is fastest at the beginning of the path (meaning the path is more like a straight line), and then slows down when the user gets closer to the target (more possibility of path change since mouse movement is slower). The problem with this navigation example is that when the user hovers on a series model (A5 for example) and then moves the mouse toward the actual vehicle picture to click on it and learn more, the mouse accidentally hovers over the neighboring series model (for example, A4) and displays vehicles of the other model.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/screen-1-724770.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 50px;" src="http://www.businessol.com/usability-blog/uploaded_images/screen-1-724763.jpg" border="0" alt="" /></a><br /><p>This can become a frustrating experience for users, as they are expected to make unnatural mouse maneuvers in order to click on a specific vehicle picture. The space to move the mouse down after hovering over A5 is extremely small, around 40 pixels wide, or about 2 widths of the mouse icon. This detracts from what the user really wants to do (learn more about the A5 models) and forces them to make an effort to move the mouse in a specific path in order to continue.<p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/screen-2-724785.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 50px;" src="http://www.businessol.com/usability-blog/uploaded_images/screen-2-724781.jpg" border="0" alt="" /></a><br /><p>If we ran user testing on this navigation, I am certain almost all users will experience this same frustration. Try it out for yourself.</p><br /><h2>Terrific: Teleflora</h2><br /><p>By far from being a perfect website, out of the bunch of Super Bowl commercial websites, the Teleflora website was one of the better examples. The website does a few things right.</p><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/teleflora-761024.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 279px;" src="http://www.businessol.com/usability-blog/uploaded_images/teleflora-760979.jpg" border="0" alt="" /></a><br /><p>The marketing message on the center of the page has a clear call to action associated with the images. To the bottom left, there is a link tying back the Super Bowl advertisement to the website. The primary navigation categories are easy to understand and are relatable to customers visiting the site.</p><br /><p>I can see plenty of usability problems with this site as well, but this was one of the few sites that were not Flash based and achieved a clear and specific goal for customers: Buy Flowers.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-7880726108653841964?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-12628728390145434572009-01-05T13:23:00.000-08:002009-02-03T16:06:29.751-08:00Auto-Loading SlideshowsWhile recently reading an article on Digg, I noticed one of the most popular comments on the article was one that actually "Buried" the article because of the auto-loading slideshow. Users didn't even care about the content because the interface of the slideshow was frustrating and apparently many users agreed. The particular article was from Forbes.com, and this is an example of one of their slideshows: <br /><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/forbes-example-702968.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 245px;" src="http://www.businessol.com/usability-blog/uploaded_images/forbes-example-702879.jpg" border="0" alt="" /></a><br /><br />Why are these slideshows frustrating to users?<br /><br /><h2>Making Users Responders Instead of Initiators</h2><br />One of Ben Shneiderman's famous Eight Golden Rules of Interface Design is #7: <br />Support internal locus of control. This means giving users the sense of control over what they are using or doing. <br /><br />To use a car for example, let's say a driver slams on the brakes to avoid an accident and the car stops. This gives the user the impression that they are in control of stopping the car, even though it was really the hundreds of microprocessors and sensors controlling the anti-lock system and automatically pumping the brakes a hundred times a second to stop the car without skidding. <br /><br />Now imagine a new technology that senses accidents and modulates the brakes by calculating and monitoring the chances of an accident. In the same situation as before, the driver slams on the brakes but the car slows down at the same pace no matter how hard the brakes are being stepped on. The microprocessors and sensors do not detect an accident occuring, so the car does not respond to the user stepping on the brake pedal harder. The user has to disable the automatic crash sensing system in order to have the car stop. This implementation of technology would make the user feel out of control of the car and think that the car is not safe (even though in reality it is safer).<br /><br />The Forbes.com slideshow is similar to the second situation in that by default it takes the user out of control of the interface and expects the user to become respondants to the situation, rather than being the initiator of the action. If a user wants a slideshow to play, they should have to click play first, or navigate normally through the slideshow by clicking next. By automatically loading the slideshow and playing the slides, it takes the user out of control of the page, and also brakes the expectations of users. Currently if a user is in the middle of reading a paragraph, it is likely that the next slide will load and result in a frustration user-experience.<br /><br /><h2>Obscure Icons</h2><br />There are controls for the user to stop the slideshow or control the speed in which the slideshow changes. The problem is these controls are obscure and not conventional:<br /><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/controls-705395.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 201px; height: 29px;" src="http://www.businessol.com/usability-blog/uploaded_images/controls-705390.jpg" border="0" alt="" /></a><br /><br />If you take a look at the icons, its a left-pointing arrow, a square, a right-pointing arrow, and a slider for "speed". The left-pointing arrow goes "back" one slide, the square "pauses" the slideshow, and the right-pointing arrow goes "forward" one slide. The confusing part about these icons is that the square stops the slideshow, but when you click on the icon, it still shows a square. When that happens, it's possible for users to be confused and assume the right-pointing arrow stands for "play" instead of "forward". The square acutally now stands for "play", and relies on the chance that the user remembers if the slideshow is currently playing or stopped. This can easily be fixed by a better choice of icons and icons that respond to show the current status of the slideshow (playing/paused). The slider for the slideshow does not indicate how fast or slow the slideshow will play, so having the arbitrary slider does not help users at all.<br /><br /><h2>Auto-Loading New Slideshows</h2><br />After a slideshow is done playing, another slideshow loads automatically and this continues infinitely. I accidentally left a slideshow playing, and when I came back the next day it was playing a slideshow of something completely random, not to mention my browser was using 90% of my computer's RAM. The content that loads subsequently is not even relevant to the content of the initial slideshow. If there is one thing that can make your users leave your site instantly, it's providing the user irrelevant content.<br /><br /><h2>Simulatenous Video Advertisements</h2><br />When multiple animations appear on the page, it makes it difficult for users to focus on one area. In this example, the slideshow plays, and occasionally animated video advertisements play simultaneously alongside. This may cause cognitive overload for the user, leading them to close the browser window.<br /><br />I could go on about the usability issues pertaining to the slideshows, but the bottom line is users hate them. The concept of a slideshow is not the problem, but rather the particular implementation of the slideshow which affects the overall user experience.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-1262872839014543457?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-82247289084835458502008-10-03T08:54:00.000-07:002008-10-06T13:33:11.697-07:00Credibility on the WebAdding on to the Terrible and Terrific Tuesday post on credibility, today we'll look at how credibility on the web is established and what the different factors and layers are that affect how people perceive your website's trustworthiness.<br /><br /><h2>First Layer: Claim Credibility</h2><br />As professionals in the web industry, we often associate credibility with specific pages or content on a website that talk about the history of a company, privacy policies, awards/certifications, testimonials, and other self-promoting words. Statements like “Quality widget manufacturer since 1701” or “Privacy Policy” pages were the standard go-to techniques to help increase credibility and distinguish the company from others. These became commonplace because that’s what users said they wanted, and for some time, they worked.<br /><br />However, these techniques became diluted and are now expected on a website as a standard. They are still very important to establish credibility, but they don’t serve as unique differentiators any more. I refer to these techniques as the first layer of my Credibility Cake(™).<br /><br /><h2>Second Layer: Visual Appeal</h2><br />The second layer of establishing credibility is the visual design. Almost half of all consumers assess credibility based on the visual appeal of the design. The interesting thing is that there is a mismatch between what users think is important to them versus what their actual behavior is when browsing a website. Users claim that the first layer information was most important to them (such as having a privacy policy page), but when actually asked to evaluate credibility, users used the site’s design and never bothered to even look at a privacy policy page (Consumer WebWatch, <em>How Do People Evaluate a Web Site’s Credibility?</em>). From our experience, it is not only important to have a visually appealing website, but to also make sure that design is consistent throughout the entire website. Often with third party applications, websites have varying designs and layouts due to different technical restrictions. These types of design inconsistencies due to technology choices can have a huge effect on website credibility, especially if these pages involve the transaction of personal information (such as request forms).<br /><br /><h2>Third Layer: User Experience</h2><br />This leads us to what I call the third layer of credibility, which is the overall user experience. After the first two layers are established, once a user begins interacting with a website, the experience ultimately defines credibility. If the site is an e-commerce website, and the shopping cart is clunky or slow, these are greater problems for credibility than something from the first layer such as not having a “Hacker Safe” logo on the site.<br /><br />By considering these three layers, we can make sure we are covering any areas of the website that may be affecting the site's credibility. The important thing to note is that it is all about the <strong>perceived</strong> credibility of the site. You could be the oldest, respected, trusted business in your industry, but if your site is lacking in any one of these areas online, it can be hard to compete with smaller, newer businesses with a stronger established sense of credibility and trust online.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-8224728908483545850?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-31326236652813028222008-09-30T17:17:00.000-07:002008-10-06T13:24:06.632-07:00Introducing Terrible and Terrific Tuesdays!Today we’re introducing a new weekly feature on our blog called “Terrible and Terrific Tuesdays.” Each Tuesday, we choose one usability topic or concept, and discuss one terrible and one terrific example of that topic.<br /><br /><h2>This Week’s Topic: Credibility</h2><br />Credibility on the web is something that is challenging on different levels for small companies and large companies alike. Small companies need to build credibility and establish themselves on the web to gain user trust while large companies need to reinforce their well known brands online. Usability issues on websites can harm credibility for both causes. On the web, we need to really think about how user experiences affects how the user perceives the credibility of the website.<br /><br /><h2>Terrible</h2><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/AA-722047.jpg"><img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/AA-721990.jpg" border="0" /></a><br />Blatant advertisements, overwhelming homepage, fly out menus, and other strange violations of usability best practices make this site our first Terrible Tuesday. Although the brand itself is strong, the design of this website does not give the impression of something that is updated, secure, or reliable. A good place to start would be to fix the most basic usability issues, such as the three level fly out navigation menu.<br /><div style="CLEAR: both; DISPLAY: block; FONT-SIZE: 0px; LINE-HEIGHT: 0"></div><br /><h2>Terrific</h2><br /><a href="http://www.businessol.com/usability-blog/uploaded_images/South-West-745898.jpg"><img style="FLOAT: left; MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://www.businessol.com/usability-blog/uploaded_images/South-West-745829.jpg" border="0" /></a><br />A simple homepage that looks clean, updated, and follows basic usability standards helps reinforce a simple flight booking process and user experience. Rather than overwhelming the user with too many choices, the site uses a task-based information architecture that helps guides users to the right place.<br /><div style="CLEAR: both; DISPLAY: block; FONT-SIZE: 0px; LINE-HEIGHT: 0"></div><br />Check back on Friday for our post talking more about how to establish trust and credibility on your website, and also for something I like to call the Credibility Cake!(™).<br /><br />In the mean time, let us know what you think about the Terrible and Terrific of the day!<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-3132623665281302822?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-49313877927749705352008-09-26T16:40:00.000-07:002008-09-26T16:49:02.023-07:00Usability News Roundup - September, 2008Every month I try to give a roundup of useful and important articles happening in the user experience domain. Here are some of the good article roundups for the month of September:<br /><br /><a style="font-weight: bold;" href="http://www.boxesandarrows.com/view/design-for-emotion">Design for Emotion and Flow</a><span style="font-weight: bold;"> </span> - <span style="font-style: italic;">September Issue, 2008, Boxes and Arrows</span><br />This article addresses how to appeal to user's emotion as well as creating better flow on your website.<span style="font-size:85%;"> </span><br /><br /><a style="font-weight: bold;" href="http://www.webcredible.co.uk/user-friendly-resources/web-usability/online-videos.shtml">Using Online Videos to Engage Your Users</a> - <span style="font-style: italic;">September Issue, 2008</span>,<span style="font-style: italic;"> WebCredible</span><br />From OMS yesterday, I had an in depth conversation about how online videos will shape the future of the web as bandwidth becomes bigger and bigger, as computers move from our desktops into our pockets, and as the web becomes more ubiquitous.<br /><br /><a style="font-weight: bold;" href="http://www.useit.com/alertbox/location-finders.html">Store Finders and Locators</a><span style="font-weight: bold;"> </span>- <span style="font-style: italic;">September 15, 2008</span>,<span style="font-style: italic;"> Jakob Nielsen's Alertbox</span><br />A good article by Jakob on how users forage for location information. Essentially, users rely on search engines for this task reaffirming my prediction that SEO is becoming more pervasive in Usability.<br /><br /><a style="font-weight: bold;" href="http://alistapart.com/articles/lookatitanotherway">Look At It Another Way</a> - <span style="font-style: italic;">September 09, 2008</span>, <span style="font-style: italic;">A List Apart</span><br />As usability practitioners, this is what we do almost every day- we embrace the user's life. The only way to really understand a user is to breath the same air s/he breaths, to dig down into the nitty-gritty in order to convey the right messaging and providing the right content. This article hits close to my heart as it really sheds light on how we approach problem solving as usability practitioners.<br /><br />I hope everyone enjoys these articles and have a great weekend.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-4931387792774970535?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-31752575058708738892008-09-19T10:31:00.000-07:002008-09-19T17:05:53.851-07:00The Most Usable WebsiteAt conferences, a frequent question I get is “What is the best website?” or “What is the most usable website?” When faced with this question, it’s always difficult for me to give a direct answer. The reason? I don’t think there is one.<br /><br />Usually In response to that question, I take the Socratic Method, asking, “For what?” For every website I’ve seen I can point out at least a few things that could be a minor or major usability issue (guess because it’s my job), but a usable website goes far beyond the best practices and minimal standards and heuristics that I can assess from looking at a website for five minutes. <br /><br /><h2>Not One Size Fits All</h2><br />If I tell people that site “XYZ” is a good website, I’ll end up seeing a hundred “XYZ” copy-cats coming back and asking me why their conversion rates are not higher and why their customers are not finding the site easier to use, even though all they did was slap their logo on site “XYZ” design.<br /><br />The reason for this is because the factors that make one website usable may not necessarily work for another website (excluding the minimal standards and best practices). We like to refer to the minimal standards and best practices as the foundation for the site, but user testing is what refines the site and makes it unique and usable for that site’s specific users. The foundation is of course is extremely important, but the refinement is what sets the site apart from others. However, one without the other results in an incomplete site, which explains why taking the foundation from one site and implementing it into another does not magically result in a usable website.<br /><br />Every website has different goals and different audiences, and building a website without considering these factors is a flawed but common mistake. It is important to determine the <a href="http://www.businessol.com/usability/default.html">personas</a> of users visiting your site and to tailor the nomenclature, information architecture, design, functionality, and content to these audiences.<br /><br /><h2>Technology and People Change </h2><br />Another reason why one website will never be the “most usable website” is because technology and people’s experience with technology is ever evolving. Ten years ago we were concerned with 800 x 600 pixel monitor resolutions, “web safe” colors, frames, scrolling text, blue hyperlinks, and pop-up windows.<br /><br />Some of these concerns still exist today, but technology has advanced to a point where 800 x 600 is no longer the norm, and “web safe” colors are not really a concern. Online behavior and experience has reduced the need for links to be blue (they can just be a distinct color), and pop-up windows are actually preferred for non-web documents such as PDFs (Jakob Nielsen, <a href="http://www.useit.com/alertbox/open_new_windows.html">http://www.useit.com/alertbox/open_new_windows.html</a>). <br /><br />Designer and developer awareness of usability has also almost completely eliminated the use of frames and scrolling text on the web. It is because of these reasons that usability focuses have changed over the years and will continue to in the future.<br /><br />Do you think there is a website that is “perfect” in terms of usability?<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-3175257505870873889?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-78248679991673777982008-09-11T14:49:00.000-07:002008-09-11T14:58:57.840-07:00How to Sell Customer Experience to Your Execs and Upper Managers<p>This is a question I get asked most often during my speaking engagements- h<span style="font-weight: bold;">ow do you make a case for improving the user experience?</span> Today, I’m going to provide you all (ok, well, not <em>all</em> but enough) resources and techniques to help you affect this change. </p> <p>1) Demonstrate ROI for Usability and social media to improve the customer experience. There are many resources and papers that demonstrate ROI for usability:</p> <p>ROI 1 - <a href="http://www.upassoc.org/usability_resources/usability_in_the_real_world/benefits_of_usability.html" onclick="javascript:pageTracker._trackPageview ('/outbound/www.upassoc.org');">Business Benefits of Usability</a></p> <p>ROI 2 - <a href="http://www.upassoc.org/usability_resources/conference/2002/kelly_braun_upa2002.ppt" onclick="javascript:pageTracker._trackPageview ('/outbound/www.upassoc.org');">How Ebay Measured ROI </a></p> <p>ROI 3 - <a href="http://www.upassoc.org/usability_resources/usability_in_the_real_world/case_studies.html" onclick="javascript:pageTracker._trackPageview ('/outbound/www.upassoc.org');">Usability Case Studies </a></p> <p>ROI 4 - <a href="http://www.amanda.com/resources/ROI/AMA_ROIWhitePaper_28Feb02.pdf" onclick="javascript:pageTracker._trackPageview ('/outbound/www.amanda.com');">24 Page White Paper Full of Case Studies </a></p> <p>ROI 5 - <a href="http://dsmj.com/support/Aaron/MarketingSherpa.pdf" onclick="javascript:pageTracker._trackPageview ('/outbound/dsmj.com');">How the American Council on Exercise Improved Their Conversions 43%</a></p> <p>ROI 6 - <a href="http://www.useit.com/alertbox/roi-first-study.html" onclick="javascript:pageTracker._trackPageview ('/outbound/www.useit.com');">Jakob Nielsen’s Alertbox Article on Usability ROI</a></p> <p>Here are resources and papers that demonstrate soft ROI for social media:</p> <p>ROI 1 - <a href="http://dsmj.com/support/Aaron/barry-tallis.pdf" onclick="javascript:pageTracker._trackPageview ('/outbound/dsmj.com');">Barry Tallis’s Presentation: How Nike, CNN, and Bank of America Measured Their Social Media Success</a></p> <p>ROI 2 - <a href="http://www.web-strategist.com/blog/2007/01/31/roi-of-business-blogging-is-not-a-myth-reviewing-forresters-calculating-the-roi-of-blogging/" onclick="javascript:pageTracker._trackPageview ('/outbound/www.web-strategist.com');">General Motors’ ROI on Blogging Case Study</a></p> <p>ROI 3 - <a href="http://www.web-strategist.com/blog/2008/03/24/case-study-dissecting-the-dell-regeneration-graffiti-facebook-campaign/" onclick="javascript:pageTracker._trackPageview ('/outbound/www.web-strategist.com');">Dell’s Regeneration Graffiti Facebook Campaign</a></p> <p>ROI 4 - <a href="http://www.web-strategist.com/blog/2008/01/29/case-study-how-sony-leveraged-a-popular-vampire-facebook-widget-to-reach-its-community/" onclick="javascript:pageTracker._trackPageview ('/outbound/www.web-strategist.com');">Sony’s Facebook Widget Vampire Campaign</a></p> <p>One of the reasons you won’t see an abundance of papers explicating the ROI of social media is because it is still very new. If you imagine how long it takes to fully roll out a website (from 6 months to 2 years), putting together a social media plan and executing on it takes about the same amount of time. On top of that, you have to accurately track the success of your website or social media plan. In order to do this, you have to wait another year to get accurate tracking data. All in all, this process takes anywhere between 1.5 years to 3 years. Those who have demonstrated success so far are the early adopters of social media, allowing them to create informative white papers like the ones I’ve linked above.</p> <p>2) Send your execs and members from other departments (ie. engineers, designers, and web team, etc.) to an educational conference. This method accomplishes two things:</p> <p>First, it allows your engineers to get on the same page as you are regarding the vision of the website. This way, those internally are also defenders of the initiative thereby making it harder for an executive to refuse when so many are on board with a certain plan.</p> <p>Second, they are hearing it from someone other than yourself. When someone hears the same information from industry experts, it lends more credibility to your position, takes away animosity from yourself, and lastly allows them to ask the questions directly to a credible source.</p> <p>3) Hire an outside consultant to conduct a usability / social media analysis. The reasons for this are very similar to that of sending your execs and other departments to conferences. However, it might be more effective since it takes less traveling and less time commitment.<br /></p><p>It’s easier to get a CEO to sit in on a 2 - 3 hour presentation at their office than getting them to drive or fly to a conference. Also, a diagnostic / analysis will be catered to your company’s specific needs versus a general presentation that might or might not apply specifically to your situation. And lastly, in some cases, it might be more cost effective. For example, our company charges anywhere between $10k to $20k for a usability diagnostic. Most conferences cost about $1,500 for registration plus another $1,000 or so for flight, hotel, and meals. Therefore, if you want to send about 5 people, it will cost $12,500 for the full conference. Of course there are exceptions to this rule such as the <a href="http://www.onlinemarketingsummit.com/">OMS Tour</a> in which the conference is local and very inexpensive for 5 people to attend.</p> <p>So, these are all the techniques that I have come up with. Do you have any other techniques to justify a business case for increasing the customer experience? If so, please share it!</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-7824867999167377798?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-63768859120958158062008-08-26T09:20:00.000-07:002008-08-26T09:49:28.092-07:00Usability Factors Associated with Firefox's "AwesomeBar"After using the latest Firefox version (3.0.1), I realized I’ve been using one of the newest features a lot without even noticing it. The feature is convenient for me, but what are the potential usability issues that come along with it as well?<br /><br /><h2>What is It?</h2><br />Dubbed the “AwesomeBar” by the <a href="http://www.mozilla.com/en-US/firefox/features/">Mozilla team</a>, the new Smart Location URL Bar for Firefox 3 displays suggestions from pages in your history when you type any keywords into the browser bar. Taking factors such as frequency of visits, time of last visit, bookmarks (and / or tags), and other things, it suggests pages that you might be looking for. It serves like a little search engine just for your browsing history.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/awesomebar1-799118.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/awesomebar1-799113.jpg" alt="" border="0" /></a><br /><br /><h2>Usability Issues</h2><br /><h3>Learned Conventions</h3><br />If a user has become accustomed to typing in the URL of pages to find it in their history, the new AwesomeBar definitely breaks those learned conventions and will cause frustrations for users.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/awesomebar2-787649.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/awesomebar2-787640.jpg" alt="" border="0" /></a><br /><br />Typing in “businessol.com,” you can see from the example that the main businessol.com website does not even appear first within the list. Somehow, the algorithm is choosing the businessol.com/staff page as the most relevant result for me. If a user is used to typing “businesso” and then hitting the down arrow and hitting enter on their keyboard, they will be taken to the staff page rather than the homepage. This wouldn’t be so bad, but…<br /><br /><h3>You Can’t Disable the Feature</h3><br />There is apparently no easy way to disable the AwesomeBar. This violates some of usability’s basic core principles: letting users feel in control of the system, the ability to reverse actions, and consistency of interactions (see: Ben Schneiderman’s Eight Golden Rules of Interface Design). Do a Google search for “disable Firefox smart bar” and you’ll get over a hundred thousand results with no “official” way of disabling it. Some users are obviously frustrated with it because it disrupts their learned behavior with how a URL history bar should work.<br /><br /><h2>How This Affects Your Website</h2><br /><h3>Title Tag & URL Structure</h3><br />I’m going to start blurring the lines of Usability and SEO, but it seems like the main factors that contribute to the results in the AwesomeBar are the Page Title and URL structure. Caught up in the Olympics fever, I did a search for “Usain Bolt.”<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/awesomebar3-715624.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/awesomebar3-715608.jpg" alt="" border="0" /></a><br /><br />As you can see, the pages with the keywords showing up early in the Title Bar and the URL structure are coming up first before the other pages. I visited each of these pages once, so frequency should not be a factor, and they are not displayed in the order in which I visited the pages.<br /><br />We have always suggested making descriptive Page Titles and URL Structures from a usability and accessibility standpoint because they allow users to know where they are, identify the pages easily in their bookmarks/tabs/links, and quickly come back to the same page. The examples we see with the AwesomeBar make it even more important than before, and also suggest that having the keyword appear at the beginning of the Title gives it more relevance.<br /><br /><h3>If Title Tags are Not Optimized</h3><br />Below is a screenshot of pages I visited from a Google News search. The links in purple indicate that I’ve visited those pages before. I purposely visited most of the ones without optimized Titles and URLs.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/awesomebar4-753499.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/awesomebar4-753460.jpg" alt="" border="0" /></a><br /><br />Now take a look at the AwesomeBar results. The only one that shows up out of those six is the “Usain Bolt gets Kingston dancing.” You may be wondering why the “Usain Bolt has three golden reasons…” page is not showing up in the AwesomeBar. .. It’s because when you click on the link, the page redirects to another page without an optimized Title Tag.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/awesomebar5-785776.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/awesomebar5-785737.jpg" alt="" border="0" /></a><br /><br />I also checked it out with Benj, one of our <a href="http://www.businessol.com/seo-blog/">SEO Gurus</a>, and here’s what he had to say:<br /><br />“hmmm I’ve got nothing to say about it. Just SEO the titles and you’re good.”<br />-Benj Arriola, SEO Guru<br /><br />So as long as you have been optimizing your page titles and URL structures, you should be in good shape to have your site usable and AwesomeBar Optimized.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-6376885912095815806?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-88630503646586265222008-08-22T15:56:00.000-07:002008-08-22T16:30:00.987-07:00Navigating Oprah.comWhile doing some research for a project, I happened across the Oprah.com website. I stared at the site for a while, trying to figure out what all the sections on the homepage were about, but ended up being a little confused and overwhelmed. I tried to think why this site was so hard to use, and came to the conclusion that Oprah.com was breaking a few crucial learned conventions for the web.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/home-720664.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/home-720659.jpg" alt="" border="0" /></a><br />The first thing I noticed was a lack of a primary navigation (that and that Oprah’s name appears on the page 100 times). Other than serving as a navigational tool, having a primary navigation area helps users gain a sense of comfort with a site. Without it, the site felt overwhelming to me, like I didn’t know where to go or where I was going to end up on the site. All sites should have orienting tools- tools which help users ground themselves in the nebulous virtual space.<br /><br />The Oprah.com site actually does have a primary navigation, but it’s hidden at the top-left corner of the screen under a little plus sign. Very unconventional, and likely to be missed by the site’s users.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/home2-783550.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/home2-783545.jpg" alt="" border="0" /></a><br />When the primary navigation is expanded, it’s more of like a sitemap rather than navigation. There are too many options for users to sort through, although the second column looks like a good candidate for the site’s primary navigation. Too few choices and users think you don’t have what they want. Too many choices and users do some of the following:<br /><br /><ol><li>Have "analysis paralysis" - they have too many options so they end up not making one.</li><li>Their decision quality suffers – they "satisfice" and make the simplest choice, not necessarily the best.</li></ol><br />Personally, I think that the primary navigation Oprah.com is using is an easy way out for the IA and designers who couldn’t decide on what to use as their primary navigation links. It’s better to have higher level categories for the primary navigation than to hide it altogether because then, you are setting expectations correctly.<br /><br />A solution for this? Run a <a href="http://www.businessol.com/usability/default.html">card-sorting exercise</a> and some <a href="http://www.businessol.com/usability/default.html">user interviews</a> to figure out what your users are looking for specifically, and what’s more important to them. That will help determine what the primary navigation on the site should be.<br /><br />Out of curiosity, I took a look at some of the other day time talk show hosts’ websites, like Rachael Ray, Martha Stewart, Tyra, and Ellen. All the other sites look like they’ve done a good job at identifying what their audience is looking for and provided those categories as the primary navigation. If Martha Stewart and Rachael Ray can create a primary navigation, why can’t Oprah?<br /><br /><h2>Update</h2><br />Looks like the all-seeing and all-knowing powers of Oprah somehow telepathically read my mind. As I wrote this blog post, it looks like the Oprah site has been completely redesigned, addressing this primary navigation issue. The site looks a lot better, but there are still some pretty basic usability issues (non-clickable headings to start), but I'll save those things for another day... unless she beats me to it again!<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-8863050364658626522?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Jegan Chenhttp://www.blogger.com/profile/06691259518073911346noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-44400727963553112192008-07-11T09:05:00.000-07:002008-07-11T09:45:54.051-07:00International UsabilityThis topic has been on my mind as of late, and I wanted to record my findings regarding international usability. Here are some points that might come in handy when preparing a site for the international audience:<br /><br /><h2>International Ecommerce</h2><ol><li><!--[if !supportLists]--><!--[endif]-->Ensure your website allows users to switch between languages. Most of the time, a link in the native language or a flag icon is best. I would recommend using the flag icon over the link since 785 million adults worldwide are illiterate (CIA, World Factbook, July 2008).<br /><br /></li><li><!--[endif]-->Make sure your website allows the user to view your products in different currencies. In the image below, an international retail site allows your users to change all the product prices from Hong Kong Dollars (HKD) to many other popular forms of currency as well as including different flags (from my previous point). However, they unfortunately only create 1 flag icon to represent an English speaking country. Ensure that you always include flags for the regions you serve, even some of those regions speak the same language.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/blog1-737340.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 483px; height: 304px;" src="http://www.businessol.com/usability-blog/uploaded_images/blog1-737320.jpg" alt="" border="0" /></a><br /><br /></li><li>Have an international shipping / ordering page. This page should explain to the user how to order internationally. There are websites out there that ship internationally but since they do not inform users whether they do or not, users are left in the dark with their own questions. On top of that, create an FAQ on how the international shipping works. A lot of manufacturers / retailers do not have sophisticated ecommerce shopping platforms because their budgets do not allow for it or the platform does not support international currencies. These retailers must then place the orders manually so some of them might take the orders by email. Creating a step by step guide of how to do so helps users understand the process easily. Also, make sure to describe to the user exactly how much international shipping might be as well as any customs, duties, or taxes that the user might accrue before placing their order. The last thing a user wants is a $50 shipping fee with a $200 customs fee, and a $10 bank transfer fee for a $40 tea set they bought overseas. Lastly, let users know that you might not be able to ship certain products to certain countries due to differing country laws. Prescription medicines are allowed in some countries but might be illegal in others.</li></ol><br /><h2>International Web Forms<br /></h2>When creating forms that would work for most overseas countries, your forms should use the following labels:<br /><br /><span style="font-weight: bold;">Family Name</span> – “Last Name” or “Surname” is not generally understood and can cause confusion. For instance, in Vietnam and China, your last name is said first and your first name is said last.<br /><span style="font-weight: bold;">Given Name</span> – In place of “First Name”<br /><span style="font-weight: bold;">Address 1</span><br /><span style="font-weight: bold;">Address 2</span><br /><span style="font-weight: bold;">City</span><br /><span style="font-weight: bold;">State / Province</span><br /><span style="font-weight: bold;">Postal Code</span><br /><span style="font-weight: bold;">Country</span><br /><span style="font-weight: bold;">Phone</span> – Some international retailers require phone numbers to be able to look up shipping prices.<br /><br />This by far is not the end all be all, but will likely be least confusing to international users.<br /><br /><h2>International Cultural Differences</h2> <span style="font-weight: bold;">Emoticons </span><b><br /><br /></b>In Japan, Western emoticons are viewed upon as not usable because they have to tilt their heads to actually see the “smiles.” Therefore, here are the differences in emoticons between western countries and Japan.<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.businessol.com/usability-blog/uploaded_images/smile-760818.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.businessol.com/usability-blog/uploaded_images/smile-760814.jpg" alt="" border="0" /></a> Image and more information can be found here: <a href="http://www.nytimes.com/library/cyber/week/0812smile.html">http://www.nytimes.com/library/cyber/week/0812smile.html</a> <br /><br /><span style="font-weight: bold;">Colors </span><br />Red<span style=""> </span>in America is used mostly as a color of warning . However, red is interpreted differently by different cultures. <span style="font-weight: bold;"><br /></span><span style="font-weight: bold;">China</span> - symbol of celebration and luck, used in many cultural ceremonies that range from funerals to weddings.<br /><span style="font-weight: bold;">India</span> - color of purity (used in wedding outfits).<br /><span style="font-weight: bold;">United States</span> - Christmas color when combined with green, Valentines Day when combined with pink, indicates stop (danger) at traffic lights.<br /><span style="font-weight: bold;">Eastern cultures </span>- signifies joy when combined with white.<br /><br />More on other colors and what they mean to different cultures: <a href="http://http//www.myuniversalfacts.com/2005/12/meaning-of-colors-color-symbolism.html">http://www.myuniversalfacts.com/2005/12/meaning-of-colors-color-symbolism.html</a><br /><br /><h2>Other Elements to Keep In Mind</h2><ol><li>Words in some languages do not always exist in others. For example, in Asian countries, a dress is called a “one-piece” and to denote that is “one size fits all,” it is labeled as “free size.”</li><li>Nomenclatures are different. For instance, a “shopping cart” is a United States specific term. In Europe, a “basket” seems to be more widely used.</li><li>Keep in mind that certain countries have slower internet access speeds than we do in the United States. Therefore, technologies which take time to download such as Flash should be kept to a minimum. </li></ol>So, before you decide to merely translate your website, keep in mind your visitors and think about their differences. What are the differences in culture, color, and metaphors? What are their access speeds? What other elements must I be aware of such as certain government internet restrictions, taxes and duties? Keeping all these differences in mind will ensure that you will design a website catered to your audiences' needs.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-4440072796355311219?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-36576670084588466132008-03-03T14:18:00.000-08:002008-06-16T13:10:05.723-07:00Affordances: Instructions Not Included<p>Thanks to everyone who signed up for a lab and spoke with me during this year’s <a href="http://www.onlinemarketingsummit.com/">Online Marketing Summit</a>.I hope the sessions were helpful and that you got some takeaways to implement and improve the usability of your website.However, the things we discussed in those 15 minutes are really the very tip of the iceberg when we talk about usability but I am happy to see you are all headed in the right direction.</p><br /><br /><p>One thing I noticed during quite a few of the labs was many websites had instructions telling the user what to do on the page. I am not going to quote specific examples, but instructions such as “Click on a link to the right to navigate” or a tool that has a small help icon saying “How does this work?” are telltale indications that something is seriously wrong with the site. A lot of times these instructions are added on after customer support receives call after call asking how to find something or how something works on the page.</p><br /><br /><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://usability.businessol.com/uploaded_images/a-739561.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://usability.businessol.com/uploaded_images/a-739554.jpg" alt="" border="0" /></a></p><br /><p class="MsoNormal">If your site requires these instructions, it means your users are spending more time figuring out how to use the site than they are actually browsing, consuming information, and ultimately, buying from your site.<span style=""> </span>Navigation and tools should be as intuitive as possible, and we can achieve this by taking advantage of affordances.<span style=""> </span>Affordance basically refers to how an object’s appearance suggests how its method of action or function is.<span style=""> </span>If something looks like a button, its affordance tells users that it can be clicked on and that there is a specific action that will occur with it.</p> <p class="MsoNormal">Whenever I talk about affordance and intuitiveness, I am always reminded of a recent <a href="http://www.cbsnews.com/stories/2007/01/26/60minutes/main2401726.shtml">60 Minutes story</a> about why our society is becoming more dependent on not only technology, but also the Geek Squad / Tech Support services of the world.<span style=""> </span>In the story, Tom Magliozzi from NPR’s “Car Talk” talks about why expensive cars have so many buttons and complicated features, and says, “If you’re buying a $50 or $60,000, or more, car, you don’t want pedestrian-looking buttons.<span style=""> </span>You want something sophisticated…”</p> <p class="MsoNormal">Basically, complicated interfaces and overwhelming features equals sophistication. This is probably the best explanation to poor usability and the worst mentality to have when designing a product or a website.<span style=""> </span>This is also probably why there are so many “iPods for Dummies” or “TiVo for Dummies” books out there which are pretty much instruction manuals for products that already have instruction manuals!</p> <p class="MsoNormal">When a product or website takes advantage of affordances, it helps reduce or eliminate the need for instructions.<span style=""> </span><a href="http://www.amazon.com/Diamond-Engagement-Rings-Loose-Diamonds/cyor?%5Fencoding=UTF8&sequenceStep=step1&pipelineID=cyor&sequenceID=sequence1">Amazon.com’s Ring Creator</a> does a good job at taking advantages of the affordance of sliders and checkboxes to help facilitate action with their tool:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://usability.businessol.com/uploaded_images/b-789604.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://usability.businessol.com/uploaded_images/b-789600.jpg" alt="" border="0" /></a></p> <br /><br /><p>The checkboxes in this case clearly indicate a filtering function, while the sliders indicate the ability to set a range. You will notice that Amazon did include instructions on the page, which is okay as long as the instructions are serving as a backup and not as the sole primary cue. There are a few things that could be adjusted with this page, such as adding numbers 1, 2 and 3 at the top where the process-steps are indicated, so while this tool is a great example of affordance, it is still definitely not perfect in terms of general usability.</p><br /><br /><p>Always keep affordance in mind when designing a web site.Do links look like links? Do buttons look like buttons? Are checkboxes or radios more appropriate? Can someone use this site without instructions? While there are plenty examples of poor usability in the real world, determined users can usually compensate by learning and adapting to them. But just because someone will take hours to learn how to use all the buttons in their $60,000 car, it doesn’t mean that they will for your website. Users view the web as a tool, as a means to reach their end goal, and interactions are fast and short. So take advantage of affordances and get rid of all those instructions, unless you plan on releasing a “My Website for Dummies” book, too.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-3657667008458846613?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-26071678184571270002007-10-01T16:37:00.000-07:002007-10-15T09:49:29.431-07:00Top 3 Methods to Increase Engagement on your Web 2.0 MicrositeMore and more companies are creating social networking or Web 2.0 microsites in hopes of gathering large scale distribution channel that is highly engaged or increase brand awareness. What sets your social network out from the rest and what will keep it alive? If you've done everything from allowing users to comment, rate, review, and email each other articles within your website, what other methods can you employ to get those users back to your website?<br /><br />Well, here are the top 5 methods to get users to return to your website that will ultimately lead to increased engagement:<br /><br />1) <span style="font-weight: bold;">Create a question of the week. </span>Whether your social network revolves around baseball players, musicians, writers, or activists, there is always something to talk about. Users love sharing their opinions and being heard. Sometimes, they just need a little inspiration to spark their creative juices. Posing a question to be answered will surely generate a lot of talk within your social network.<br /><br />2) <span style="font-weight: bold;">Have a rewards system. </span>Many theories of engagement revolve around game theory. Why is it that video games are so engaging aside from the immersive experience? It's because users are constantly working toward something and they are handsomely rewarded along the way as well as at the end. Therefore, your social network should have a short term and long term reward system.<br /><br /><span style="font-weight: bold;">Examples of Short Term rewards systems:<br /><br /></span><ul><li>Fill out this survey and get 10% off your next order</li><li>Buy this featured book and receive a 25$ off coupon</li><li>Fill out your profile and receive 25 points</li></ul><br /><span style="font-weight: bold;">Examples of Long Term rewards systems:</span><br /><br /><ul><li>Create a list of rewards that can be obtained once a user has gathered a certain amount of points (ie. 100 points get a pen, 200 points get a T-Shirt, etc.)</li><li>Statuses / Class systems. If your social network has a discussion forum, let users who are active obtain levels of badges depending on how active they are (ie. trainee, patrolman, captain, seargent, etc.). This will give them bragging rights as well as credibility within your community.</li></ul>3) <span style="font-weight: bold;">Create a community leader. </span>This leader is <span style="font-weight: bold;">not</span> an admin. This is an avid user who truly wants to help the community out. This user could be part of the admin team but they actively participate in the forums, the first to comment on user generated content, comments on user's profiles, and sends personal messages to users within your community. If a user hasn't revisited the community in a while, this community leader could send a message saying something to the effect of: "Hey! I read your comment about the movie, Toy Story. It isn't just a movie for kids, but definitely for adults as well. How many times have you seen the movie?"<br /><br />These tactics should definitely help you boost the return visitors to your website. If you've employed any of these strategies, please comment about them. I would love to hear individual accounts of success (or not).<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-2607167818457127000?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-23313730988268799752007-09-12T16:17:00.000-07:002007-09-12T16:21:03.000-07:00How To Prioritize and Plan a Successful Web Site Redesign (Part 1)<p class="MsoNormal">When stepping into the forefront of revamping a site for a client, I always receive the same question: I have a lot of things I need to fix on my site, but I do not know where to start. Can you help me? <span style=""> </span></p> <p class="MsoNormal"><span style="font-size:130%;">Here is a starting checklist for your redesign efforts:<br /></span></p> <p style="font-weight: bold;" class="MsoNormal">Business</p> <ul type="disc"><li class="MsoNormal" style="">What is your goal in doing this redesign?</li><ul type="circle"><li class="MsoNormal" style="">Increased sales</li><li class="MsoNormal" style="">Redefine brand</li><li class="MsoNormal" style="">Disparate sites</li></ul><li class="MsoNormal" style="">Resource constraints</li><ul type="circle"><li class="MsoNormal" style="">Budget</li><li class="MsoNormal" style="">Time</li><li class="MsoNormal" style="">Manpower</li></ul><li class="MsoNormal" style="">Policies</li><li class="MsoNormal" style="">What has been working / doing well? </li><li class="MsoNormal" style="">What hasn’t?</li><li class="MsoNormal" style="">Are you measuring it?</li><li class="MsoNormal" style="">What can you afford now, and what can (or must) you wait for in the next redesign?</li><li class="MsoNormal" style="">Vendor selection<br /></li></ul> <p class="MsoNormal"><span style="font-weight: bold;">User</span> </p> <ul style="margin-top: 0in;" type="disc"><li class="MsoNormal" style="">What has been working for them?</li><li class="MsoNormal" style="">Complaints?</li><li class="MsoNormal" style="">Features requested? </li><li class="MsoNormal" style="">Navigation paths clear?</li><li class="MsoNormal" style="">Find what they are looking for?</li><li class="MsoNormal" style="">Shopping cart abandonment?</li><li class="MsoNormal" style="">Type of user</li></ul> <p style="font-weight: bold;" class="MsoNormal">Technology</p> <ul style="margin-top: 0in;" type="disc"><li class="MsoNormal" style="">What is currently being used</li><li class="MsoNormal" style="">Migration?</li><li class="MsoNormal" style="">Content Management System</li><li class="MsoNormal" style="">Third Party Tools</li><li class="MsoNormal" style="">Browser, Color, Page Size constraints<br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></li></ul> <p style="font-weight: bold;" class="MsoNormal">Content</p> <ul style="margin-top: 0in;" type="disc"><li class="MsoNormal" style="">What is currently there and works</li><li class="MsoNormal" style="">What is currently there and doesn’t work</li><li class="MsoNormal" style="">What needs to be there </li><li class="MsoNormal" style="">Is it unique?</li><li class="MsoNormal" style="">Is it useful to the user?<o:p></o:p><o:p><br /></o:p></li></ul> <p style="font-weight: bold;" class="MsoNormal">Prioritize by:</p> <ol style="margin-top: 0in;" start="1" type="1"><li class="MsoNormal" style="">User</li><li class="MsoNormal" style="">Business</li><li class="MsoNormal" style="">Content</li><li class="MsoNormal" style="">Technology</li></ol> <p style="font-weight: bold;" class="MsoNormal">Why Users First?</p> <ul style="margin-top: 0in;" type="disc"><li class="MsoNormal" style="">User drives design</li><li class="MsoNormal" style="">Business will not succeed if user doesn’t succeed</li><li class="MsoNormal" style="">Content can be created once user dictates what they need</li><li class="MsoNormal" style="">Technology is always last- it should meet the users’ needs, users or business shouldn’t have to suffer or cater to the technological confines. When the computing rate doubles every 18 months, there is bound to be a technology that will suit your need, otherwise, if it must be created, that could be a possibility for a new business venture.</li></ul> <p class="MsoNormal"><o:p> </o:p></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-2331373098826879975?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-80294638364344800582007-02-27T11:08:00.000-08:002007-03-01T14:16:06.185-08:00User driven everything.<p>To continue my discussion about <a href="http://usability.businessol.com/2007/02/future-of-usability.html">The Future of Usability,</a> I will further elaborate upon my first point, that being the evolution of the <span style="font-weight: bold;">user as the core focus of the future of online marketing</span>.</p><br /><h2>"Let's Razzle Dazzle 'Em" Metaphor</h2><br /><p>Before we discuss the future, let’s talk about the past. In retrospect, technologies have been designed with the mindset of "Let’s show them what we can do." This conception pushed the <span style="font-weight: bold;">objectives of business onto users</span>, and oftentimes, users didn't care for the technology, product, or site. Thus, businesses went about creating the most graphically heavy site with the flashiest technology. This was somehow mistakenly equated to a better user experience. </p><br /><p>However, this idea proved to be a big flop when Flash technology made its appearance and then failed miserably in increasing a user’s ability to find information online (as with all new technology, it's always abused by engineers and business owners). Of course, back then, users' expectations were low, so they masochistically struggled through the poorly implemented technology.</p><br /><h2>"Let Them Razzle Dazzle Us" Metaphor</h2><br /><p>Presently, we are progressing into an era where technology is designed to facilitate a user’s behavior. The paradigm has shifted from a "Let’s show them what we can do" perspective to a "<span style="font-weight: bold;">Show us what you are doing, and we will cater to you</span>," conception. </p><br /><p>In the future, users will drive everything: user driven SEO, user driven EMAILs, user driven CMS, user driven ECOMMERCE, etc. (you get the picture). We are starting to see a trend in which users are the ones dictating what is important and what isn’t. In many ways, the online space has allowed everyone a voice to express their frustration (support forums) and authority (blogs) about specific subjects.</p><br /><h2>User Driven SEO? </h2><br /><p>A good example of the shift to user-centric online marketing appears in the SEO space. Search engines will strive to integrate all aspects of a user’s information foraging behavior into their algorithms (if they haven’t done so already). <span style="font-weight: bold;">Users will be the ones dictating to the search engines what information is important or relevant, and conversely, what isn't</span>.<br /></p><br /><p>We’ve seen this idea gain momentum with the creation of <a href="http://search.wikia.com/wiki/search:About">Wikia</a>, a user edited search results wiki . I wouldn't be surprised if the search engines start to integrate links from tagging communities such as del.ic.ious or flickr into their algorithms, fueling user behavior into their results. Search engines may start scouring related tags within these communities and filtering those into their results (similar to what <a href="http://www.technorati.com/">Technorati</a> does on its site).</p><br /><h2>How To Prepare For The Future </h2><br /><p>Since the future is all about the user and their respective needs, your site needs to be as user friendly as possible. Other sites that give users a better customer experience will become your biggest competitors. Even if you have a well known brand offline, the online space has become a place where smaller businesses can still become a contender. Here are some useful suggestions to help you prepare yourself for the future: </p><ol><br /><li>Know your users. Let them drive your site.<br /></li><li>Put some web analytics tools on your site to see what users are currently doing on your site (Hitbox has worked pretty well for us).<br /></li><li>Make sure your content is:<br /> </li><ol><li>Organized<br /> </li><li>Of quality<br /> </li><li>Searchable<br /> </li><li>Scalable<br /> </li><li>Has a community aspect to it (allow your users to talk about your content)<br /></li></ol><li>Get a benchmark usability evaluation. This will identify your site’s biggest usability problems.<br /></li><li>Test, test, and test some more! I cannot stress this enough. The only way to get invaluable data from your users is to test your site design, architecture, or new functionality with your users. With this data, you can then respond to users' needs and provide a better overall user experience. Usability testing has never been so crucial, especially for the online space. </li><br /></ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-8029463836434480058?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-90681424306088196762007-02-26T11:07:00.000-08:002007-03-06T13:49:44.977-08:00The Future of UsabilityI recently spoke at the <a href="http://www.onlinemarketingsummit.com/">Online Marketing Summit (OMS)</a> about the ROI of usability, as well as sharing some usability best practices. During the summit, I was supposed to be part of a panel, entitled "Ask the Experts." But, because I could not plow through the mass of bodies in front of me, I did not end up on stage. During the session, some good questions were posed about the future of the online space and its direction. One question in particular stood out from the rest: "<span style="font-weight: bold;">What is your prediction for the future of online marketing as it pertains to your respective discipline?</span>"<br /><br />Interestingly, the way the panel answered this question provides tangible insights into the future of online marketing. Each member of the panel included an increased focus on "<span style="font-weight: bold;">the user</span>" in their assessment of what the future holds. Furthermore, the fact that all 5 panelists represented a specific sector of the online marketing space (PPC, CMS, SEO, Web Analytics, and Email Marketing) is indicative of the fact that this new user-centric approach to online marketing is not confined to any single discipline. Rather, the user is set to become the central component in the evolution of Web 2.0 and the future of online marketing.<br /><br />From the human-computer interaction perspective (the parent discipline of usability), there is always a "people" problem and a "technology" problem when it comes to the user experience. Therefore, these predictions will either pertain to a people problem, a technology problem, or both. Here are my predictions for the evolution of the Internet.<br /><br /><ol><li>User driven everything.</li><li>AJAX will be misused.</li><li>Technology scaffolds.</li><li>Contextual information becomes more important.</li><li>Trust, Authority, and Popularity become pillars of information organization.</li><li>Offline and Online user behaviors become enmeshed into one another.<br /></li></ol><br />I will create a post for each of these items shortly...<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-9068142430608819676?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-1161980148630654862006-10-27T13:12:00.000-07:002007-03-01T11:43:08.652-08:00The Benefits of Usability and SEO<h2>Why You Should Care About Both </h2><br /><p>As a web site owner, there are many investments that should be made in order to ensure your web site is both attractive to search engines and easy for users to navigate. Making the web site attractive to search engines involves a process commonly called Search Engine Optimization (SEO). In this process, there are numerous ways to enhance your site with respect to on-page factors (title, meta data, on-page linking structure), off-page factors (who is linking to you and where those links are coming from, directory submissions), and site wide factors (duplicate content, intra-linking of site). When SEO is implemented correctly, it should make your site rank higher on search engines, thus driving more traffic to your site. <strong> More traffic means more conversions, and more conversions means beating out your competitors for the same user market as well as the obvious, more ROI.</strong></p><br /><h2>The First Benefit of Usability: More Potential for ROI</h2><br /><p>Now that you've got the users onto your site, you must convert them from faceless visitors to a lead, or better yet, a sale. But before your users convert, they must be able to find what they are looking for on your web site. This is a critical concept. Most businesses will invest primarily in the graphical design elements of a web site or new functionality, which isn't necessarily a bad investment (you still want users to have a pleasurable visual experience). However, the truth is that it doesn't matter how good your content is, nor how pretty your web site looks, or even how cool the new Flash functionality works. <strong>If users can't find it, it doesn't exist</strong>. <strong>If they can't find it, they cannot convert.</strong></p><br /><p><strong>When $25 billion in potential profit is lost every</strong> year due to web site usability issues (<a href="http://www.keynote.com/downloads/Zona_Need_For_Speed.pdf">Zona Research</a>, 2001), it seems practical to recommend that usability be a central component in every process of building or redesigning a web site. </p><br /><h2>What Exactly is Usability?</h2><br /><p><strong>Usability </strong>is focused upon three simple concepts (among many others):</p><br /><p>1.<strong> Discoverable </strong>- Can users find what they are looking for? </p><br /><ul><br /> <li> If so, how fast? </li><br /> <li>How efficiently? And can they do it again, but quicker the second time around?</li><br /></ul><br /><p> 2. <strong>Satisfaction</strong>- Are they satisfied? </p><br /><ul><br /> <li> Does your web site follow conventions that users have grown to expect?</li><br /> <li>Did they accomplish the goal they set out to satisfy?</li><br /></ul><br /><p> 3. <strong>Usefulness</strong> - How useful is the site? </p><br /><ul><br /> <li> Does it serve its purpose? </li><br /> <li>Will users want to revisit to obtain their objectives?</li><br /></ul><br /><p>If your site is built with a customer centric focus versus a business centric focus, you will satisfy all of the above mentioned principles. </p><br /><h2>The Second Benefit of Usability: Reduced Training and Support Costs, Increased Productivity</h2><br /><p>If employed correctly, the usability process can reduce telephone and email support as well as user training. One case that comes to mind is that of a login feature which resides on an arbitrary page on your web site. The user then has to dig through many links, often with no success in finding what they’re searching for. Frustrated, they call up a sales representative. After waiting 10 minutes on the phone while listening to drab elevator music, the user’s frustration only increases. After jumping through what seems like a million hoops, the user is finally greeted by the account rep, who then has to guide the user through the sinuous forest of links until finally reaching the destination where the user can log in successfully. Sure, this exchange can be completed within 1 or 2 minutes of the rep's time, but that time can be better utilized closing deals than supporting customers. In addition, these few minutes do not include the time it took to train the rep on the operating functions of the company's site. <strong>If a web site (or any other product) is easy to use, it will require less training.</strong></p><br /><p>Another scenario that comes to mind is all too typical within any organization. Imagine that your company’s site has an intranet (which it probably does) that employees utilize to help them understand the policies and procedures associated with their work. Imagine how much productivity would be wasted if employees are busy trying to hunt down information due to a poorly planned information architecture. If the site was laid out with usability principles in mind, the employee would be able to find the information needed immediately and be able to do their work instead of <strong>wasting their time searching for information</strong> in order to perform their work tasks, or worse, disrupting a co-worker’s or manager’s valuable time to ask for that information.</p><br /><h2>The Third Benefit of Usability: Stronger Brand </h2><br /><p>Another reason to invest in usability is the increased positive brand image. <strong>Your brand extends the marketing materials disseminated to your end users;</strong> it is also the experience the user has with the people, products, and services of your company. Your web site is a facet of this engaged user experience. If the user has a negative experience with your web site, 58% will not return to the web site (<a href="http://www.forrester.com/">Forrester Research</a>). Moreover, any marketing materials (email campaigns, newsletters, brochures) later disseminated to the user will also be associated with the negative experience and will ultimately be rejected as spam. Not to mention the negative ‘word of mouth’ viral marketing that will be generated from just one negative experience. </p><br /><h2>Usability and SEO Go Hand In Hand</h2><br /><p>Now that both the positive and negative implications of Usability and SEO have been explored, you may be wondering: How and when should these two potential investments be implemented? As with all plans, timing and execution are essential components of any good campaign. Luckily, usability and SEO should be implemented in tandem with one another. </p><br /><p>For example, let's say you invest only in SEO. If you get more traffic to your site but your site is still a mess, it doesn't matter how many visitors come to your site because your conversion rate will still be low. Now, let's say you invest only in usability. Well, now you have a functional site, but not enough traffic is being driven to your site in order to convert users. Thus, the best way to improve your site is to invest in both these elements simultaneously. When done correctly, improving your site will ultimately improve your bottom line. </p><br /><h2>Take Aways</h2><br /><p>1. Usability benefits not only the users but the business- increased ROI, reduced training costs, stronger brand among many others.</p><br /><p>2. To obtain the maximum results for your investment, an SEO and SEM strategy should be integrated with your Usability strategy. </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-116198014863065486?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com0tag:blogger.com,1999:blog-35402650.post-1159819630529880012006-10-02T13:07:00.000-07:002007-03-01T12:21:26.561-08:00The Machine that Fried Its Patients<p>In March of 1986, something phenomenal occurred at the East Texas Cancer Center. At the time, the significance of this event went unrealized, but as time passed, the implications became clear. Looking back, this event forever changed the way systems are designed and programmed.</p><br /><br /><div style="text-align: center;">* * *<br /></div><br /><br /><p>The day began just like any other as a cancer patient was receiving his normal radiotherapy treatment from the Therac-25 machine. The machine had two distinct modes, “e” for electron and “x” for X-ray. Despite the obvious problems which could arise from having both an electron beam and a high powered X-ray beam programmed into the same machine, the operator assumed she could use the machine without encountering any problems. She began to input the prescription data, and due to her previous experience, she was able to input this information very quickly.<br /><br />After double checking her inputs, the operator (a trained radiology technician) noticed that the mode was in X-ray instead of electron. Realizing the problem that this created, she hit the “cursor up” command in an attempt to correct the mistake. Then, after pressing the “return” key several times, the treatment was administered to the patient. Yet the technician was completely unaware that her actions had triggered a bug in the software. </p><br /><p>During the course of the treatment, an error classified as “Malfunction 54” occurred, informing the technician that an underdose had been administered.<br /><br />Following standard operating procedures, the technician hit “P” to proceed with the treatment. However, upon doing so, a second dose of treatment was administered to the patient, who immediately realized that something was wrong and began screaming. The operator, who was isolated in another room separate from the patient, heard nothing. There were audio and video monitors in the room which allowed the patient to interact with the operator, but that day, none of the equipment was working.<br /><br />Five months later, the patient was dead. His death was directly attributed to the radioactive overdoses he received during his "treatment."<br /><br /></p><br /><div style="text-align: center;">* * *<br /></div><br /><br /><p>So, this story is both sad and interesting, but what does it have to do with usability?</p><p><strong>Usability deals with the ease of use (intuitiveness) of designs.</strong> More specifically, good design encompasses numerous factors, many of which were overlooked or ignored by the programmers of the Therac-25 system. Below is a list of what constitutes "good" design.</p><ul><li> Superior designs allow for the <strong>exploitation of human behavior</strong>. As cognitive beings, humans are natural pattern matchers and button pushers. If prior research or usability testing had been performed on this machine, test results would’ve revealed the rate at which an experienced user could input parameters. Yet after the recall of the Therac-25 machine, its makers discovered that the notorious “Malfunction 54” error would occur when keys were pressed successively under an 8 second time frame. An experienced user, I would imagine, would have the skill necessary to input such parameters at a rate that would fall below this time frame.<br /></li> <li> Efficient designs ensure the <strong>clarity of the system through immediate visual clues</strong>. In the case at hand, there was no connection between the patient’s room and the operator’s room. Although audio and monitoring equipment existed, there was no backup system allowing for redundancy.<br /></li><li> Operative design provides <strong>informative descriptions of errors</strong> which occur in the system, allowing the user to gain not only an understanding of the malfunction, but a possible solution to correct it. "Malfunction 54" is neither descriptive nor correct. Rather, the system should have specified that an underdose had been given, allowing the technician to identify the problem and improvise a solution. Had this occurred, the patient’s life could have been saved.<br /></li><li> Effective design creates a <strong>clear differentiation between two completely distinct modes of operation</strong>. An "e" and "x" design doesn’t provide any substantial visual feedback to the operator, as the letters are not physically displaceable. A better alternative would have been to create two different looking beam heads for the machine, allowing the operator to discern when they were using the wrong beam on a patient.</li></ul><br /><h2>Take Aways</h2><p><br />Mission critical system errors like those of the Therac-25 system illustrate the consequences of both bad design and the lack of user testing. In this case, the cost of poor usability was quite unfortunate; it literally became a matter of life and death. In fact, two other patients died from the same machine. Thus, in the end, we are left with some pressing questions: <strong>What is the cost of poor usability? How much is it really worth to you and your business?</strong></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/35402650-115981963052988001?l=www.businessol.com%2Fusability-blog%2Fdefault.htm'/></div>Thanh Nguyenhttp://www.blogger.com/profile/13800729489341953416noreply@blogger.com1