Saturday, March 31, 2012

Hotmail Search Usability Issues

By Ahmed M.Orabi

Hotmail emails search provides us the required search capabilities that help us to locate the e-mails that we are interested in. However, the way that the search results are placed, and how we can navigate, make this feature unusable although its backend side is well-implemented.

1. Description of the problem

When you search for an e-mail in your hotmail account, you can use the quick search feature located on the right hand side of your current e-mails contents (input, outbox, etc):

And also, it provides advanced search features:

When you search for something, you can get a list of its related e-mails:

This is good. Now, the next step is that you want to navigate any of these e-mails to ensure that this is what you are looking for. When you open an e-mail, this will open that e-mail and the search contents will be taken away from the screen:

Given that you opened this e-mail and you found that this is not what you are looking for, what would be your next step? For my case, I used my browser back button assuming that it will return me back to previous page (which has the search contents). However, this took me to the MSN home page; I realized that the search operations do not update the URL and thus the back button won’t work in that case. As a next step to do, you will need to re-run your search again. Even at this point, what you typed is cleared out from the search quick input, or the advanced search. So, you will find yourself needing to type your search input all from the beginning to get all results again and make sure this time to ignore what you navigated before.
A user can think of as a workaround to avoid this issue by opening each e-mail in a new window using the control keystroke when clicking on a search result entry. This opens a new page (which is good); however, this will take then to the hotmail home page. This means that the user will need to run the search many times.

Generally, the way to return back to the search contents is by using the search tab in the side navigation bar:
So, if you would like to return back to your search results, you can simply click on that link. This way is not that easy to discover and also leads us to more number of clicks.

2. Suggestions

Using the breadcrumb way would be better for that case, and we can display at the top of each e-mail you open from the search contents. The label could be something like: Return back to search results.
We can improve this breadcrumb and make it even better by providing next and previous anchors. So, when we click next, this means we go to the next search entry in the search table, and previous takes us to the previous entry.  Also, we can still provide the pagination contents for that search results in place, so the user will know where they are at the moment. We can also provide a popup drop down to show the current subjects in the current search index, as well as next and previous. Here is a mockup:

Thus, we will be easily able to realize how to return back to the search results as this is shown at the top of the opened e-mail. In addition, this will reduce the number of clicks by using next/previous anchors, or using the popup navigation.
Also, make sure to update the browser URL value, so when we use the back/forward buttons, this will take us back to the search results or navigated e-mails.

3. Conclusion

Hotmail search support is well implemented in term of the backend side. However, its UI needs some work to provide better users’ end-to-end scenarios as search feature must expect the users to navigate between different e-mails till they reach their required entries. This can be done by replacing the search sidebar approach by a breadcrumb instead with some other features such as next/previous and rich hover support to have quick navigation to other fields.

Sunday, March 25, 2012

Usability Issues of Football website –

By Pratik Parikh is one of the largest football websites; I have been following it for the last 2 years. The site is famous for its articles, editorials and live match commentary. It supports 26 editions and 15 languages. It is also available in form of mobile apps for Android, iOS and Blackberry mobile devices. I am going to point out usability issues of the website. It offers same the experience on Internet Explorer, Mozilla Firefox and Chrome. The interface was updated recently and more features were added to it. This features deteriorated the usability of the interface. Let’s have a look at some of the usability issues which cannot be ignored.

1.      Match Events frames not organized

The Home page features Main events which gives information about recent match results, live scores (if match is already going on) and next fixtures. The feature is excellent; no other football website does it so comprehensively. It gives information about seven matches in one frame. You have to scroll back and forth to know about matches, already played and forthcoming matches. The left and right button scrolls the frame back and forth. Now, it’s very logical that the back button shows past matches and the forward button shows future matches. But user has to guess, which deters usability. Proper naming of these buttons would make it simple for users. In addition to this, sometimes it only features match details of the next day and the previous day. To find information of matches that will be played the day after tomorrow, the user has to select League, then go to fixtures and select the date. This becomes a long process.

One solution to this problem is renaming the back and forward button, loading match details for +/- 2 days and finally a button to redirect to the ‘upcoming matches’ page.

Figure 1 : Main Events

2.      Time-zone cannot be changed as per user needs has 26 editions as of today. When I came to Canada, I shifted edition to North America so I get all the match timings as per EST time zone. The problem is I don’t get any updates of Indian football, only few updates of English Football and all updates of American soccer. So I always have to shift editions to check match time and read news.


Figure 2 : Edition List

One potential solution is placing a small widget on home page to set time-zone. Hence a user in Canada or North America can follow English edition (because he follows English league), get match details as per his time-zone and avoid switching editions.

3.      Same option with different name in different menus

The transfer page provides information on players transferring from one football club to another.Under the ‘News’ menu in the Indian edition (menu headings and menu item names are different in different edition) it gives ‘Transfer News’ as pointed out in the figure 3. On clicking ‘Transfer News’ we will be directed to ‘Transfer Zone’.  The same page can also be reached by clicking the Transfers menu heading and selecting ‘Transfer Zone News’ as shown in figure 4. The same option is named as ‘Transfer News’ at one place and ‘Transfer Zone News’ at other place.

Figure 3 : Transfer News

Figure 4 : Transfer Zone News

If both options direct to same place, it should appear only once. Also, if there is a need to provide multiple entries, options should have same name all over the interface.

4.      Improper categorization of information on the live score page

On the live-score page, the user will expect options such as live commentary, team line-ups and strategies. A tab with name Formations will confuse user the with football player formation. The formation tab here is totally different. It gives options like all tournaments, top tournaments, playing now, filter by tournament and filter by country. This is a goodexample of improper categorization.

Figure 5 : Formations

It shows team lineups for upcoming matches. The tab heading does not relate with options under it. Also the name can be misinterpreted with the football concept. One potential solution is to name it Team Lineup.

Conclusion: In order to support more features, interface designers compromise with usability. The added features do not make tasks easy; in fact it makes tasks more difficult and confusing. Less information if provided in a better way can better help users. Interface designers should always test usability for every new feature added to the system.

Friday, March 23, 2012

The Usability Issues of Google Chrome

By Xuelin Ma

Nowadays, a large number of browsers are on the market. Since browsers are the most frequently used type of software and lots of companies regard browsers as key products, developing an attractive and usable browser becomes more and more important.

Chrome, the browser developed by Google, has lots of advantages, such as fast speed, high level of security, simple download operation and so forth. However, it also has several flaws.

Lack of Warning

The warning message is one of the most important heuristics that can prevent system from potential errors. Most software now provides this function when users make important decisions (i.e., delete data, close windows). However, as the second or third widely used browser, Google Chrome does not provide any message when users try to close the entire browser, which may lead to data lost if users just tend to close one single tab. On the contrary, Internet Explorer and Firefox will pop up a proper warning box asking for confirmation (See figure 1), thereby preventing unwanted operations.

To solve this problem, Google Chrome should give proper notification (i.e., pop-up warning box) to inform users the system process and the potential error. Besides, an approach to recover data from error should be given. For example, users can choose to start the browser with the web pages they were browsing last time (Figure 2).

Figure1: The pop-up warning box in Internet Explorer

Figure 2: Preferences setting of startup webpages in Internet Explorer

Tab Clutter

With the release of Internet Explorer 7 in 2006, all major web browsers featured a tabbed interface [1]. A study in 2009 shows that users switched tabs in 57% of tab sessions [2]. With this large proportion of users, web browsers should solve the related major problems thereby keeping and attracting potential customers.

However, Google Chrome frustrated users with invisible tab descriptions. Specifically, with the increasing number of opened tabs, Chrome automatically narrows down the length of each tab to save screen space, just like the other web browsers do. However, instead of at least showing a few words of the webpage’s title and hiding some tabs temporarily, Chrome will always narrow down all the tabs without giving any description of web pages, which makes them hard to be recognize (Figure 3).

One of the most used solutions for this problem is to hide some tabs temporarily and show them when needed (Figure 4). In addition, several words of the title description or the icon of the related webpage should always be shown. To give more user friendly feature, colorful tabs can be used to help users distinguish and navigate more easily (Figure 5).

Figure 3: Tabs with invisible title description in Google Chrome

Figure 4: Some tabs are hidden at the left of the tab bar in Internet Explorer

Figure 5: Colorful tabs used to help users distinguish tabs in Firefox


[1]Wikipedia Google Chrome
[2]Jeff Huang, Ryen W. White (2010). "Parallel Browsing Behavior on the Web". Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10).

Consistent with what? Tool and object consistency in Inkscape

by Dan Minor

Inkscape is a widely used open source vector graphics program. Like many graphics programs, Inkscape has a tool bar from which the user can select a number of different tools which create and modify graphical objects. Selecting a tool essentially puts the application in a particular mode. This posting will talk about consistency between tools and objects in Inkscape.

Jakob Nielsen's heuristics are a commonly cited set of guidelines for user interface design. One of these heuristics is that a user interface should be consistent with the user's expectations. Usability experts are consistent in their belief in the importance of consistency. In Getting Real 37 Signals argue that one should consider the context in which the interface is being used rather than being blindly consistent, which is pretty much the most negative thing said about consistency that I could find.

In an application like Inkscape where there are different tools that operate on different objects, in the interface designers had to choose between being consistent in how the tools operate, or how the objects respond to the tools.

For example, one way to edit text in Inkscape is to use the Select tool and double click on the text to be edited. Another way to edit text is to use the Text tool and single click on the text. Using the Node tool will not edit text with either a single or double click. In fact, double clicking with the Node tool does nothing at all.

The inkscape designers have emphasized tool consistency over object consistency. Rather than having the text object respond in the same way to a double click regardless of the tool selected, one has to remember which tool is selected and click accordingly, or change tools in the case of the node editing tool. This is one of the disadvantages of a modal interface.

To make objects behave consistently would mean that to edit text with the text tool selected, one would have to double click the text. This would be inconsistent with the expectation that the primary functionality of a tool can be accessed through single clicking.

I think the best solution would be a compromise, where an object has a certain set of basic functionality. Depending upon the tool selected, some of the basic functionality can be overriden. In the case of editing text, double clicking with any tool would enter the text editing mode. In the case of the text tool, single clicking would also access this functionality. Although this is redundant, it has the advantage of maintaining consistency across both tools and objects.

Wednesday, March 21, 2012

IBM Help Support Portal System usability issues

By: Habib Abid

Introduction: IBM Support Portal is the company customer’s gateway to all of their technical support resources. It is an integrated centralized outlook of all technical support tools and information for IBM systems, software and services all over the world.  IBM Support Portal provides new fix packs, software installation, technical resources, documentation, troubleshooting documentation, online service requests, alerts webcasts and diagnostic tools. The users of IBM’s support system want to get quick and quality technical support from the site. IBM’s customers visit the site to get self-assist support for different services such as installing a new fix pack for their products.

Findings of usability issues:

·      The site does not prevent certain errors: In the entry field of the “Find a product” dialogue, the user has to enter the complete input without getting any help from the system to remember the rest of the input.

·    The state and function of the icons are not properly declared: Two usability issues can be identified here. First, in the “Find a product” dialogue, although the list of the products is active, “delete all inactive” button is still not grayed out. Also, a “finish” button is used in this dialogue to save the content before leaving the dialogue; however, users are used to using an “apply” function for saving the content before leaving the dialogue.

·     The site displays a message that does no use user language: when user deletes one product from the list, the system displays feedback with a technical message that is not understandable by the user.

·     Return function is located in different places of the system: When users navigates through different windows in the system, they find the return functions in different places of the windows and in some windows the return function is missing.

·    Too much detail in the system feedback: when the user places the cursor on the exclamation mark to get information about  the “Find a product “ function, the system provide too much detail in a black background.

·      The icons are not located in the same place: In the “Find a product” dialogue, some edit icons are displayed in the end of the product’s name and some are displayed under the product‘s name.

·      No visual feedback about which link the cursor is on now: when the user places the cursor on a link, the link is supposed to be highlighted or underlined to show that this link is selected at this time. However, this feature is available in some places and missing in others.

     Conclusion: when I tried to compare the IBM support portal with another company’s support system such as Cisco, I found a big difference between them in terms of system usability. The IBM support system has a number of usability issues that need to be fixed to be more usable by


Monday, March 19, 2012

The Issues of CTV iPad's Application

By Chujia Wei


CTV is Canada's largest privately-owned network, and has consistently placed as Canada's top-rated network in total viewers and in key demographics since 2002 [Wikipedia]. However, the iPad’s application has some usability problems affecting the performance and the review of it shows that users are not satisfied with it (To download the CTV app for iPad:

Therefore, I found some usability issues listed as below, and some of them are really confusing and annoying. For most of the issues, I gave several solutions to solve.

Social Screen

When users try to post or reply a message on a social screen, they need to connect with the facebook or twitter first. The system will automatically pop up a message box to inform users to login these two social networking cites  (Figure 1). There is only one button that users can click: “OK”, which cannot lead users to login facebook or twitter directly. Moreover, after tapping on “OK”, the system will jump out the social screen and lead the user to a previous page (In the case of figure 2 shows, it jumps to the home page) and lose all the information the user was browsing.

(Figure 1: Social screen feature and the message box requiring users login facebook or twitter first.)

(Figure 2: The system jump to home page after tapping on “OK”.)

Leave or Back?

An application should follow users’ custom and convention. In CTV’s application, all the other pages use a “Back” button leading users to a previous page except the social screen page (Figure 3). In social screen page, the button which has the same function as “Back” is called “Leave” here. 

This inconsistency throughout the interface may lead to misunderstanding, especially for the novice. The meaning of “Back” is obvious: back to the former page. As for the description “Leave”, where is it heading after leaving could be vague.

(Figure 3: Inconsistency of the same function.)

The Use of Color

The CTV application uses different colors in the interface, which emphasizes the main functions and features. In the schedule page, the shows with red title can be clicked to browse detailed information, but not for the ones with black title (Figure 4).

According to a research, the colored links can call users’ attention, and the links in big lists do not have to be underlined [J. Nielsen 2008]. However, the color of links used in schedule page is red, instead of the typical blue. Besides, although underlining in big lists can decrease the usability, the layout and the space of the show list are not crowded and cluttered in the schedule page. Therefore, the lack of underline still makes users confused - What is the purpose of the red title? Does it mean the show is popular?

In the case of loose description layout, underlining really helps users recognize actionable areas. However, since the underlined links are not commonly used in iPad’s applications, a better solution here could be adding a small icon or short tip (i.e., “see details”) to the click-able shows, thereby distinguishing the actionable area and the common area.

(Figure 4: The shows with red and black titles.)

Edit the Favorite List

Providing a clear exit for jumping out from the current process is one of the most basic heuristics that an application should have. However, in CTV’s interface, users cannot find a proper button to exit the editing process. For example, as the figure 5 shows, the interface of “edit” has two related buttons: “Clear All” and “Edit”. Users can tap on the small red cross on the left-up corner of a wanted show to delete it from the favorites list. So which button should users tap on to finish or exit the edit? 

In fact, without other choices, users will finally find out that tapping on “Edit” again can finish the process. However, a good design should never let users guess which button for what. The description of the button should change along with the system status – in this case, the description should become “Done” during the editing process.

(Figure 5: The edit page with two buttons.)

Watch Videos On-line

The interface of watching on-line videos is quite similar among different iPad’s applications (i.e., YouTube, TED, BBC News). The issues of this kind of interface are common and obvious as well.

Firstly, users are quite familiar with double-click (double-tap) on the video to switch to full screen mode. However, this input does not work here – all you can do is to tap on a particular icon located at the right-down corner.

Secondly, in the full screen mode, there are two progress bars: one is on the top of the screen; one is almost at the bottom (Figure 6). Normally, as we are familiar, the progress bar controlling time should be located at the bottom of the video interface. However, when users try to control the time by scrolling the progress bar at the bottom, they will find out it is a volume bar. The real progress bar for time control is at the top, which is much less obvious than the bottom one. The solution of this issue can be high-lighting the time progress bar (e.g., using a bright color, extending the bar size) or changing the position of two bars following the convention.

(Figure 6: Two progress bars in full screen mode.)


Whereas CTV is one of the most viewed channels in Canada, some functions of its iPad’s application are not considerable, and some problems are shared in other similar applications. In addition, as an on-line TV application, it lacks sufficient information, for example: the details of cast, related news. There are some users suggest that a link to other website for more information should be provided (I.e., IMDb). However, the high consistency throughout the application (i.e., color design, layout) still brings users not bad experiences regardless of the limited number of shows.


[1] Wikipedia, CTV Television Network,
[2] J. Nielsen, Link List Color on Intranets, 2008,

Sunday, March 18, 2012

Eclipse Open Declaration has usability issue with upcast variables

By Mahmoud M.Orabi

When using Eclipse for Java development, we need to go through each method declaration at some points to see the implementation for these methods. Eclipse has several usability advantages with quick key strokes and proper hierarchy when navigating between super types. However, it is not that usable when it comes to the upcast variables delectation, as in all cases it will take us to the interface or abstract method definition

Download and use any eclipse with Java support from Eclipse website at:

Scenario Preparation:
Start a new Java project from File/New, and name it “”.
Create an interface ILogger, which is implemented by an AbstractLogger. And this abstract logger is extended by a Logger class. Finally, there is ExtendedLogger that extends Logger
The class implementations would be as follows:

public interface ILogger {
      public void start();
      public void end();
      public void log(String... args);


public abstract class AbstractLogger implements ILogger {
      private boolean started= false;
      private boolean done= false;
      public AbstractLogger() {
            this.started= false;
            this.done= false;
      public void start() {
            this.started= true;
      public void end() {
            this.done= true;
      public boolean isStarted(){
            return this.started;
      public boolean isDone(){
            return this.done;

      public void log(String... args) {

public class Logger extends AbstractLogger {

      public void log(String... args) {
            System.out.println("Start Logging");

public class ExtendedLogger extends Logger {

      public void log(String... args) {
            System.out.println("My extended Logger");

And then create a static class that uses your methods. Let's name it LoggerTest:
public class LoggerTest {
      public static void main(String[] args) {
            ILogger myLogger= new Logger();
            myLogger.log("Log1", "TesTLog");
            doLog(new ExtendedLogger());
      public static void doLog(ILogger logger){
            logger.log("This is a test");

Usability testing Scenario:

- Open LoggerTest class.
- Right click on the method called “myLogger.log”, and choose Open Declaration:
- This will take us to ILogger definition, which is just a definition with now implementation:
However, in my definition, I created an instance of “Logger,” but my upcast variable was an “ILogger”, so Eclipse will assume that we will open the declaration for ILogger – not the Logger – even if my instance is an instance of Logger.

Expected Usability Result:
When I need to navigate to “myLogger.log” declaration, I would like to get navigated to the Logger#log method declaration:

Challenges to apply the required usability changes:
This can be easily implemented if the variable is defined at the scope of the method. For instance, in the pre-mentioned example, the ILogger instance was defined in the same scope, so we can  track its required level of abstraction from that point.
This will more difficult if the instance is defined from a different scope. For example, if we receive the value as an argument for a method. For example:
public void doLog(ILogger logger){
      logger.log("This is a test");

In such place, this will make it difficult to determine where to exactly go. This method can be used and have any kind of ILogger passed.
For this, there could be two recommendations:

1) Prompt the user where to go:
For our example, the user will get prompted for choices: Logger, AbstractLogger, and ILogger. At  least we can decide which one to go to. For now, the workaround to do that is to accept that we will go to ILogger, and then show its call hierarchy, and see which classes are using it. However, this way is not that usable, as it will lead us to too many clicks. With the proposed solution, we will only need to choose which class to navigate to.

2) Better handling during Debugging session:
When debugging,and stepping into that method, we shall be able to hold the real-time instance for that objects. When we choose open declaration, the Eclipse must be smart enough to open the declaration for the active instance.
So, eclipse already has the required information on the logger instance class. So, when trying to open the declaration for logger#log, we must go to Logger#log definition.
And for example such as follows:
We will be interested in opening the declaration for ExtendedLogger#log method in that case. 

Eclipse “Open Declaration” is one of the commonly used features in Eclipse. However, we have usability issues when it comes to interface-oriented programming or abstraction. We are not able to open the delectation of the actual object method declarations, which makes it hard  for several occasions, especially when you are debugging.