Tag Archives: Good/Bad Interface Design

An Important Usability Issue of Purdue Recreation Sports Website

In the final report, I found that many important issues were caused by unclear information and missing of important words. They confused users and made them very uncomfortable. When we design the interface, a very important point is making each link clear and clickable. Use proper link names and keep them consistency. I don’t like the website for Purdue Recreational Sports because of the misinterpretation of link names.

For example, when I click Fitness Centers in the Facilities menu, I go to this page.

first page

When I click Indoor Facilities in the Facilities menu, I also get the same page just like before.


Why the designers use two links to show the same information? It is redundancy of links. We can use indoor facilities as the link name instead of both.

This is not the only problem of link redundancy. Here is another same issue.

Equipment and Sales and Rental link to the same page.



I think maybe the designer was so careless that he used the same content in two different links.  Since the problem is very easy to solve, I really suggest the designer could delete the unnecessary links.

Leave a comment

Posted by on December 10, 2012 in Good/Bad Interface Design



USPS Website-A Good Design Example

Recently I want to mail some things to my parents. So I found USPS website and really love it! It is user-friendly and very helpful. I can find what I need effectively. A successful web site should be user-centric design and do not make users think.

Clear Navigation Menu

There are five navigation menus on the homepage-ship a package, send mail, manage your mail, shop and business solutions. They all have drop down menus which present more concrete information. On the left area of the page, a toolbar grabs my attention quickly. The four quick tools are most frequently used functions. This makes me think of our usability test for CGT website. If we test the USPS website, I am pretty sure that most participants have no problem with primary tasks on the website.


One page, one primary function

When I clicked one drop down menu such as schedule a pickup, the page is very simple instead of complex. All the information on the webpage is related to schedule a pickup. Apparently, I can achieve my goal in 1 minute and even don’t need to scroll the page. A perfect example for a user-friendly service! I feel unobtrusive and comforting.

Screen shot 2012-12-06 at 10.53.12 PM

The two points really make sense to me. I think that is why I feel comfortable because the website meets my expectations and lets me achieve my goal easily and efficiently.  However, I have a suggestion for the interface of the website. Customer service is critical to But the designers put this information on the upper area of the website and use small fonts to show that. Why not add a menu of customer service to the top menu so that user can find it quickly? By doing so, I feel a sense of belonging to USPS.

usps 3


Posted by on December 6, 2012 in Good/Bad Interface Design



Some Bad Design Examples of Login Forms

Logging into website is a very usual way for us in daily life. It has been part of our daily routine. However, some login forms often frustrate me and make me confused.  For a clear and user-friendly interface, these login forms should be redesigned. I list three bag design examples. All the three websites are very familiar for us and we need to log into them almost every day.

Purdue Federal Login Form

Everytime when I log into my Purdue Federal account, I feel very uncomfortable because the login form separates user name and password. First, I need to enter my user name and click login.

purdue fed

Then I arrive at the web page which asks me to enter my password.

Screen shot 2012-12-06 at 10.43.36 PM

I understand that the designer wants to verify users’ names before they enter their password. However, this interface is very inconvenient for a customer who frequently uses the website just like me. For a member who usually logins his or her account every other day, it is a small probability event to forget the username. Login Form

I love Amazon and buy things from the website regularly.  However, I don’t like its login form. The problem is that there is a sign in button for customers who already has an Amazon account and a start here link for new customer in the drop down menu of sign in your account. However, when I click sign in, first the webpage requires me to enter my email address and then it asks me a question: do you have an password? The radio buttons below the question grasp my attention. I need to make a choice between a new customer and a returning customer. I don’t know why the designer makes such a simple login form so complicated. As an old friend of Amazon, whenever I click sign in button, I don’t want to see the option and make a choice because I have already registered. Instead of using radio button option, I think a secondary sign up button can be considered.  As a user-centered design, ease of use is critical for users. Just make things easy for us to do that.  Remove distractions, any unnecessary fields or whatever confused stuff.



Comcast Login Form

I still remember the first time I paid my Internet fee. I am so frustrated and annoyed just because I can not find the login page! I think there should be a menu or link or button of signing in but there is nothing like that.  Am I stupid or the website is stupid? The blue navigation menu is prominent so I hovered my mouse and looked for the keyword such as pay, register, and login. However, the top menu is all about their products and service. Even the customer menu doesn’t have a login form.  Accidentally I moved my eyes toward the upper top of the page and found another white menu. Thus I clicked my account and found the login form.


I also noticed that when I scrolled down, there was a sitemap at the bottom of the page.


I think the login form is very important for the customers who use Comcast. Why not use clean and concise field labels to present the form? It can help users to access their account more quickly and easily. Making users feel comfortable is always a goal for a website designer. So we need to constantly ask what we can do to make users achieve their goal more simple and efficient. By doing so, we can get high rates and more users.


Posted by on December 2, 2012 in Good/Bad Interface Design



Some Good Examples of User-Friendly Navigation Menus

A good navigation menu is user-friendly which can help users to locate and find where they are. If users can’t find their way around the interface, they will be frustrated and the navigation menu is not user-friendly. Good navigation menu is simple and reduces cognitive overload.  Users don’t need to stop and think about relationship between objects.  What’s more, providing feedback on users’ location is essential of any navigation menu.if users can’t get feedback from a navigation menu, it is not user-friendly.

Below I present some beautiful and user-friendly navigation menus.

1. Visually appealing icons

A great menu is clear and transparent but in a visually appealing way. Once arriving at the navigation page, users can be very picky about icons. Beautiful menus are always simple and intuitive enabling users to feel completely. Some UI designers use large and image-based icons on the web page and grasp users’ attention quickly.  Users are amazed by these icons but still immediately know where they are led and how they interact with the website.

One  example of clean menus with icons is Fishing Cactus. The icons are very cute and aid users in recognizing each item’s function.

Another example is Viviledish which using handwriting and a piece of paper to guide users in the website.

One more example is Neochic and the navigation options are very simple but very attractive. On the right bottom of the web page, there is a man who behaves as the meaning of the keywords listed in the options. Such a creative idea!

2. Be active, not silent

A new trend of designing an effective navigation menu is to be active and speaking, not serious and silent.  Instead of a list of options, the navigation menu of the website has a beautiful layout with great effects. With good UI design thrown in, the menu is outstanding and impressive differentiating with other plain websites. The designer can use different approaches to present options from the traditional header menu to side bar menus and much more.

Thibaud’s Portfolio -A beautiful layout navigation menu with great effects and active communication with users

Cassys Design-the navigation menu uses smart sidebar with consistency and unique features

3. Provide effective feedback

Remember to provide effective feedback and let users know where they are in the web site. It is a terrible thing if users are lost in the navigation page. There are some useful methods here. For example, we can use ’glosses’ to help users select correct links.  Also, we can differentiate and group navigation elements which requiring the shifting of attention so that users can be led into a new context. Moreover, animation and visual feedback are great ways to assist a user finding where they are in the webpage.

I found a good example of effective feedback navigation menu-BubbleNavigation. This is an example from a tutorial. Once users hover the mouse over the navigation option, a drop down menu surrounded by a blue circle pops up and let users make a choice. We can learn a lot of useful tips from the example.



Posted by on November 25, 2012 in Good/Bad Interface Design



A Comparison between Dealnews Website and Dealmoon Website based on information foraging theory

With Black Friday just around the corner, I am looking for convenient ways to get great deals. Prior to heading to the mall, it is better to search for these advertisements first online and do some homework. I found that both Dealnews and Dealmoon have a separate feature section for Black Friday Deal Ads. But they use different ways to present the same topic. I prefer Dealnews to Dealmoon for the following reasons based on information foraging theory.

Make it easy for user to find what they need

Dealmoon only uses vertically arranged layout and users need to scroll to get from one item to the next. The website displays some specific information about the ads such as downloading flyer, searching deals and store locations.

Dealnews arranges brand logos three in a row and each thumbnail contains a button which allows users to browse specific ads.

According to information snacking theorem, users always go online briefly and look for quick answers. When it is hard to find useful information, users will leave your website quickly. In a sea of information about deals and coupons, I think it is easier to scan through brand logos and find what I need. There is an issue of excise. For Dealmoon, vertical-arranged ads mean more mouse movement and more navigation from one item to another. However, with brand logos presented both vertically and horizontally, we can move our mouse at a higher speed towards the items and get more information at limited space and time.

Exhibit cues directly related to the desired outcome

Users are lazy and goal-driven. When seeking information they always do cost-cost-benefit assessment. I want to get specific information of deals and Dealmoon just gives me some pictures of the flyer and a vertical display of texts. Please see the following figures.

When I click the button of browsing ads on Dealnews,the website offers me a list of screenshots of products and their detail information. Even I can get an alert of the product.

A good design interface is that it can provide clear navigation cues, effective content grouping and rich data sources for users. The designer should give cues directly related to users’ desired outcome. Dealnews offers clear path and helps users to find what they really need, while the designers of  Dealmoon are lazy and allow users to spend a lot of time in information foraging.  The key of cost and benefit model is to get more results in less time. The website need to present massive amounts of data in an effective and efficient ways so that users perform the embedded task easily and happily.

1 Comment

Posted by on November 18, 2012 in Good/Bad Interface Design



Some Good and Bad Points of An Alarm Clock App For IPhone

Several days ago I wanted to download an alarm clock application on my IPhone to wake me up. When searching in App Store, the first application was Alarm Clock HD designed by Alarm Clock Company with 4.5 stars. Then I installed the application.

The home page of the alarm clock is shown in the screenshot below. Current hours and minutes are above the fold surrounded by the information of local weather, date and battery level. At the bottom, it posts some news and advertisements. When I click the title, it leads me to another page which contains specific information of news and advertisements. I am confused about the application. Is it an alarm clock or RSS feed? It displays a lot of information but lack the one that I need-the alarms. As a first time user, I can’t find where to set my alarm at first glance. When I touch the current time area, two small icons are shown on the top of the page which tends to be ignored. The one at the right corner is used for setting alarms. The reason why I choose the app is that it is an alarm clock. If it is not very easy for me to find the alarm settings, why should I use it? The user will become annoyed and discard it. I understand that the designer wants to design a full-featured product which allows users to do a lot of things, even post our Twitter or Facebook! By doing so, the alarm clock becomes a social application. I don’t think a lot of features is a good idea for an alarm clock because we use the application only to wake us up! Since I have my IPhone to help me do these things, who cares the alarm clock can remind me to check my RSS feed or Facebook?

Well, let’s see the most important feature of the application-Alarms. The function is quite simple and user friendly. At the bottom of the page, we can swipe the virtual calendar to choose our alarm time. There are a lot of alarm clock features to customize alarms and connect with social media (which I don’t like). We can play our own music or the music that is provided for us on the app. The application also allows us to set as many alarms as we want, either one-time alarms or repeating alarms. We can use a text field in the label option to write a note or the alarm’s purpose. What’s more, if you update to a new vision, the app will come with no ads.

As a deep-sleeper, I do not wake up to the alarm in the morning if the volume is not very high. Even when I get a rude awakening to the alarm, I always turn off the alarm and snooze. This alarm application is pretty the same with other alarms. I just need to touch the stop icon in the screen to turn it off. It can’t force me to get up. I really need a different one to force myself jump out of the bed. Maybe it will not stop ringing until I am out of my bed and awake. I think it will be a pretty cool feature to have and stand out in these normal applications.


Posted by on November 4, 2012 in Good/Bad Interface Design