‘User Experience’ Blog Entries
The introduction of Google Maps provided a major push in innovating the online maps and directions services, which in turn has opened up new avenues for further innovation in this sector. Introducing visual representations of landmarks within directions can hopefully improve the success rates of correctly following directions.
Cognitive Maps
Research in cognitive psychology suggests that the way in which humans determine position and get around their environments is based upon a construct known as cognitive maps. Such maps can be seen as a mental representation of a person’s surroundings, typically loosely constructed and centering on relationships between landmarks (i.e., buildings, unique objects, etc).
It is not surprising then that a friend might tell you how to get a particular location based around landmarks rather than street names. For example:
To get to the Fenway, drive straight, take a right by Flann O’Brien’s, and then a left by Mass Art.
Directions such as these are based off a person’s cognitive map of the area. Identifying, categorizing, and remembering landmarks is far easier than attempting to read and remember street signs which have weak relationships to the environment. An exception to the case may be areas which have a structured naming convention for streets (e.g., New York City).
This is not to say that specific directions are not needed, but that they can be augmented to reflect how people actually travel and think about their environment.
Improving Google Maps based upon Cognitive Maps
Figure 1 displays a modified version of Google Maps featuring support for landmarks. Using the example provided earlier, the user is now able to get a visual representation of the landmark, Flann O’Brien’s. Thus allowing the user to create relationships between elements of the enviroment.
Figure 1. Google Maps with Landmarks
Potential Revenue Source
The addition of landmarks also provides a potential revenue source. Many landmarks are places of business, which could possibly pay to have additional information displayed. Surprisingly such advertising could actually be useful to the user. They will be traveling to an area which they may be unfamiliar with but may wish to stop at a restaurant or store on the way.
Related Links
03.25.05 — User Experience
Competition is stiff in the online travel site business and usability innovations will be a great factor in determining the top sites. AOL has recently released a beta version of its new Pinpoint Travel service. With the user in mind they have developed a simple and easy to use Web site which effectively works with the user. Highlighted are areas of novel design strategies.
Goal-Oriented Design
Users come to a travel site such as Pinpoint Travel with a specific goal in mind, find cheap flights, quickly and easily. Pinpoint Travel brings this goal to the foreground with an interesting technique. As can be seen in this Accompanying Screenshot, once a user has focused on the flight search box all other elements are faded into the background. Conveying to the user that this is the primary area to be interacting with.
Persistent Feedback
The more aware a user is of what an application is doing the more comfortable they will feel using it. Incessant stopwatches or blinking lights leave the user unaware of what the application is doing or how long it will take. Pinpoint Travel puts it all out there for the user, as shown in Figure 1. Search status is continually updated with which airlines have been searched and what is the current lowest fare. A progress bar also conveys to the user an estimated point of completion. Additionally, if a search is taking longer than expected Pinpoint Travel asks the user if they wish to stop searching and use what results have been found.
Figure 1. Pinpoint Travel’s effective use of persistent feedback
Minimalist Design
Give the users what they want. Thankfully, more and more sites are stripping the clutter and giving the users what is they are looking for. As stated, users have a goal-oriented approach when using sites such as Pinpoint Travel, do not hinder them from achieving their goals. This Accompanying Screenshot provides a look at how Pinpoint Travel gives the user a simple and easy to use results matrix. The user’s attention is not distracted by other offers or advertisements. Additionally, while other sites just present an excessively long scrolling list of results, Pinpoint Travel provides useful short, paged results. This shouldn’t be surprising; the most frequently chosen flights will most likely be within the top twenty on the first page.
Friendly Language
All too frequently, applications put users in the subordinate role, where the user is working for the application. In reality this should be the other way around. It is not uncommon for applications to demand input from a user. Would you shop at a store in which employees always acted in a demeaning nature? Probably not, or at the least you would avoid it. The same goes for Web applications. With the multitude of online travel sites, most users will pick the one they feel most comfortable with. A site where they feel like they are in control.
One method for achieving a good rapport with users is friendly language. Speak to the user on their level in a casual tone. Remember, the Web application is working for the user, not the other way around. This is especially relevant for e-commerce sites that want users to purchase a product or service. Figure 2 shows a good example of how Pinpoint Travel utilized friendly language. “OK, you’ve got…”, is simple, concise, and natural. PinPoint Travel provides casual banter, which more closely resembles communication between people.
Figure 2. Pinpoint Travel’s effective use of friendly language
Conclusion
AOL spent a lot of time researching how people use travel sites and what they want out of them, and it shows. In a market with many big players innovation is the only way to differentiate. Next time I am need of a flight I’ll be sure to check out Pinpoint Travel.
03.22.05 — User Experience
Various research has proven that people do not read the Web in the same manner which they would read a book or a magazine. In the fast paced Web, people are task oriented, relying on quickly scanning Web pages to find their desired information. Conveying information in a visual manner can help augment this form of information retrieval.
37Signals’ Ta-Da Lists, a Web-based to-do list application, provides users with a simple visual cue to show approximately how many items are in a particular list. List bullets enlarge in accordance to the amount of items contained. Figure 1 shows how a user can quickly attain useful information merely by glancing at the page.
Figure 1. Ta-Da Lists
The social bookmarking service, Del.icio.us, uses visual cues to convey information about the amount of people who have also bookmarked a particular link, shown in Figure 2. As more people bookmark the link, the element, which states how many other people have bookmarked it, becomes a darker red. Unfortunately, the dark red does make it difficult to read the information.
Figure 2. Del.ico.us
The Flickr photo sharing service uses variations in font sizes to convey information about the popularity of photo tags. As popularity in a tag increases so does its font size. Simple, but effective. This method is also implemented here at Losing Context.
Figure 3. Flickr
Methods such as the ones discussed here show the trend towards minimalist design, which provide great benefits. As Web professionals, we must cater to the needs of the users. That is to say, it is imperative to develop in accordance to how they use the Web.
03.12.05 — User Experience
Web applications are becoming more and more prominent, as are the html forms which comprise the method of interaction for these applications. Through the use of a simple example, I’ll discuss some of the good and bad points behind this example’s form design in terms of instructions and form actions. Additionally I’ll cover some tips on how to identify and avoid these problems.
I recently came across a simple example of inconsistent form design at the SallieMae website. Due to that I rarely login to this particular website I needed to find out what my user ID and password were. To attain this information it is necessary to access both their Forgot user ID and Forgot password forms. Two very simple forms, let’s take a closer look into the components of the forms.
What They Got Right
The forgot user ID tool, shown below in Figure 1, is extremely straight forward. Clear instructions are provided to the user conveying what is needed from them and what will occur upon completing the form. The form’s action buttons located to the lower right give the user not only the ability to commit the request for retreiving his user ID by pressing Submit but also an exit strategy with the Cancel button.
Figure 1
What They Got Wrong
The forgot password form, shown below in Figure 2, unfortunately fails to follow the precedent set by the forgot user ID form. One of the main problems with the form is that it does not provide the user with instructions or information about what will occur upon submitting the form. Will the password be emailed? Will the user be asked to enter a new password?
The user is then presented with two possible form actions, both of which do not correspond to those presented in the forgot user ID form, Clear and Next. Upon pressing the clear button the contents of the form’s text field will be erased. This would be considered an extremely weak exit strategy as the user is still positioned at the form. Typically clear buttons are frowned upon as it is not likely that a user will fill out an entire form only seeking to erase it all, at least in this form there is only one field. In the case of using a clear button, even a cancel button for that matter, the user should be prompted to confirm the action. Additionally, on a broader note, the page offers no link back to the home page, not even the SallieMae logo, which could have been seen as an exit.
The use of Next as a form action is usually reserved for forms which have multiple form pages. While that may be the case for this form the user has no knowledge of that. If multiple form pages are going to be used, the user should be provided with such information. This can be in the form of stating that the form process has, for example, three steps.
Figure 2
What This Can Lead To
The user not knowing what is required of them can lead to frustration and form drop outs. As for this example, a user could possibly end up calling SallieMae’s phone support, which ultimately can lead to increased costs.
Lessons Learned
The best way to minimize these types of problems is sticking to the conventions which are used by countless developers. At the least, stick to your own conventions. That was the problem with SallieMae, they got some things right but failed to implement those methods across their other forms.
Another thing to consider is that whether you use submit, enter, or send be consistent throughout your forms. As users become more familiar with your site they will become more comfortable if there is a coherent voice. You don’t want users second guessing the meaning of your form buttons.
Most importantly, provide users with clear and proper instructions. As the developer, a form’s use seems idiotically clear but that is a horrible assumption to make. If possible test the form with users, even if they are just co-workers or friends.
01.05.05 — User Experience
The PDF format has many merits for its use–standardized formatting, easy production and publishing. But it seems that today it is being abused as a means of bypassing having to write a web page formatted in HTML. More and more frequently I see companies forgoing this task of writing a web page and just tossing up their content in a downloadable PDF file. It is now so prevalent on the web that search engines such as Google have opted to add PDF content to their index.
When I worked at Harvard we frequently had clients ask us to just publish PDF versions of their Word documents because they didn’t want to foot the bill for us to convert it to a web page. Much of the time it was just a client liaison who didn’t want to spend more money but was told the information needed to be online. I can not fault them for not knowing how PDF files severely affect the user experience.
Organizations and/or web teams need to create and enforce a policy on the proper use of PDF files on the web. This is becoming a rampant problem which instead of attempting to promote awareness and manage it we are succumbing to defeat and poorly adapting to it.
11.07.04 — User Experience
In user interface design icons play a major role, as they provide the user with a simple visual cue intended to easily convey the meaning of a feature or action at a glance. Icon design in web applications is especially paramount as web users typically scan pages as opposed to actively reading them. The choice of icons can greatly affect how users interact with a web application and ultimately the usability of such an application.
The recent design update of MyNeu brings a new set of icons for the web application’s utility navigation (Email, Calendar, My Account, Logout, and Help). Unfortunately these new icons are a step backwards for MyNeu and I’ll take a look at each one to examine the pros and cons.
Email
The email icon luckily has not varied much since the previous design. The icon of an envelope has become a fairly common standard on the web as a representation for email.
Calendar
Typically we see calendar icons represented by their physical form, that of the wall-hanging or desk calendar. The previous MyNeu design used such an icon but the new design takes a more disconnected approach by using an icon with the representation of a sun. This breaks away from the standard conventions we see on many other major sites such as Yahoo! or MSN. When using standard conventions the user has less to learn about how to use a particular site and in turn increases the ease of use. MyNeu took a major step backwards on this one and failed to capitalize on what users already know.
My Account
There are times when it can be difficult to represent a feature in a simplified icon representation and My Account is one of those times. The previous design represented the feature with an icon of a key hole which in many ways is a fairly close mapping to the feature’s function, that of changing your account’s password. The new design utilizes an icon representation of a treasure chest which unfortunately is severely lacking in comparison to the key hole’s mapping.
Logout
MyNeu’s previous design showcased a lock as its icon representation for logout which provided the user the with a mapping of security when clicked. The new design has one of the worst icon representations I have ever seen, that of a pinwheel. It can be said that this icon provides the user with ZERO help as to what its function is. In more cases it probably hinders the user’s perception of the site as he looks for the logout feature.
Help
The question mark is without a doubt one of the most common web conventions used in representing help. Luckily MyNeu managed to carry that icon over from their previous design.
Related Links
10.28.04 — User Experience
I recently ordered a few books from Amazon and like many people have found them to be a great online store. While waiting for my packages to arrive I decided to check the status of my delivery. A lagged page load brought to my attention a few problems with Amazon and subsequently others upon investigation.
There is an ALTernative?
Amazon has been praised by many critics as providing users with one of the best user experiences and I agree with this statement on most levels. But there are still many major problems which have simple solutions that lurk throughout the site, even the home page.
On this occasion I simply wanted to quickly get to the package tracking page. Unfortunately Amazon uses an excessive amount of images as their action buttons. Typically if this is the case the designer can at least aid the user by using image alt attributes. But for Amazon, the use of alt attributes is sporadic and provide little information if any at all. (Accompanying Screenshot)
Helping to provide little help
For such a major online retailer I found it shocking that Amazon had little care for accessibility. Users with disabilities may be a small demographic in terms of sales but there are simple measures which can be taken to provide this user base with the ability to actually use the site and make purchases. Not to mention the fact that in this case, accessibility features can help the “average” user as well.
This revelation brought me to Amazon’s help section, in search of finding their accessibility features, if any even existed. At first glance the information I sought was not in their list of common questions or categories. Luckily there is a prominent search box for me to search Amazon’s help section. Upon searching for the term “accessibility” I was left with no results. The lack of results wasn’t my main problem, it was more the fact that Amazon provided little help in trying to get me back on track. Also at the same time attempting to get me to purchase their top selling wares. At this point I’m a confused user and Amazon has led me off course of finding the help I need. (Accompanying Screenshot)
37Signals spoke of this matter in their book Defensive Design for the Web:
Critical content shouldn’t be obstructed by ads or promotional offerings. This is especially true for error message screens and other crisis points. Ad revenues are important, but your site will lose money if they come at the expense of driving customers away for good.
Amazon has done a lot of innovate work with the web medium for e-commerce, but there is still a lot that can be done. In order for Amazon to remain the top online retailer they need to cater to their users in the best way possible.
08.16.04 — User Experience
The web is rampant with crude looking URLs largely due to the increase of dynamically generated web pages. Not only do these URLs look poor visually they decrease a site’s usability and become less attractive to search engines for ranking.
I’ll take a look at why these URLs are a problem and how they can be fixed to present a friendlier user experience and improve your search rankings.
Usability of URLs
Ever try to tell someone a URL over the phone or attempt to write down a specific URL? Aside from the domain name, things can get real hairy after that first trailing slash. Somewhere along the line, we as developers have seemed to forget what the URL is supposed to tell the user.
In basic terms, the URL is an address and we can learn a lot from comparing a URL to a street address. The street address has a structure which for the most part has been standardized and shows meaning in it’s presentation. I can read it off to a person over the phone and they too will understand it. I can also easily remember a street address as well.
I’m not saying that we need to standardized our URL structure across the board but to remember that there is meaning in structure. The URL presents a hierarchy which informs users about the information which they are viewing.
In working on TheDatingFile.com we had to deal with this very problem in particular. For example we used to have the URL shown below:
http://www.thedatingfile.com/info.php?id=4&file=straight
What does that mean? Not much to the user. Forget about attempting to type that in yourself from memory. Actually forget about even looking at it. Once the question marks and ampersands begin to appear it looks less like information and more like code.
After implementing web server features, which I’ll discuss later, here is the result:
http://www.thedatingfile.com/straight/yahoo/
This URL now actually provides the user with some information. The hierarchy is used to present the user with not only a simple overview of the content of the page but also their location in the web site.
Further Reading:
Search Engines and Friendly URLs
Google says it best in their Information For Webmasters:
We are able to index dynamically generated pages. However, because our web crawler can easily overwhelm and crash sites serving dynamic content, we limit the amount of dynamic pages we index.
Many search bots see dynamic pages as endless loops of links or blind alleys. Which many times is not the case. From a developer’s stand point, making dynamic pages can save tons of time but unfortunately search engines impose a penalty for that. Luckily there is a solution, Apache’s mod_rewrite.
Make Your URLs Friendly
Mod_rewrite has a lot of features ranging from easy to implement to the more complex. Shown below is how we made our URLs for TheDatingFile.com more user-friendly and optimized for search engines.
The following code is contained In our .htaccess file stored at the root level of the site:
RewriteEngine On
RewriteRule ^(.*)/(.*)/$ /info.php?file=$1&shortname=$2 [L]
A brief explanation of what is actually going on here. We start off by telling the Apache web server to turn on mod_rewrite. The RewriteRule is what will do all the work in transforming our URLs. “^(.*)/(.*)/$” is the format in which we wish to have our URLs displayed. “(.*)” will match anything and put the contents, starting with $1, into the variable (file=$1) of our real dynamically generated page.
Further Reading:
08.05.04 — User Experience
The guys over at 37Signals always seem to come up with some good work. Their latest topic is about implementing Epicenter Design. Which they describe as:
Epicenter design involves focusing in on the true essence of the page (the “epicenter”) and then building outwards.
Many times I feel that as designers we lose sight of the main goal of a particular page. We get so wrapped up in creating the right color scheme or layout that the true purpose of the page is lost. The Epicenter Design approach revolves around maintaining the goal of a page during the design process.
I realize that sometimes this can’t always be done due to the constraints of the marketing team, the company president, or even the manager of the project. But I think that even at the least keeping the ideologies of Epicenter Design in mind while designing will improve the usability of any page.
07.01.04 — User Experience
A year ago I wrote a paper on improving the usability of Northeastern University’s student portal known as MyNeu. I sent this paper to the people in charge of MyNeu in hopes that they would hear the message from the people and maybe even implement some of the suggestions which I had made.
Unfortunately I can only assume my paper fell on deaf ears as since the time of that writing MyNeu has only become worse. I feel it is my duty to provide an addendum to my paper because of the latest changes which have been made on MyNeu.
For this entry I am focusing on MyNeu’s “Co-op / Career Services” section. This section is to provide students with a central location to find information on the co-op program for their particular college in the University.
Figure 1. Co-Op Services section design [View Full Size]
What this section suffers from most is information overload. I had outlined in my paper stating that a major goal Northeastern needed to take on was to discover and understand its users. The user group of students is just too vague and really needs to be more broken down. The user groups need to be drilled down to components such as what college the student attends or even whether the student is a student living with disabilities. Much of MyNeu is too generalized and not geared to the correct demographics.
From the provided screenshot of the Co-Op section we can see a multitude of major problems just at face value. The fact that MyNeu does not cater to their users properly becomes severely apparent by the presentation of Co-Op information for every college in the university. The majority of students at Northeastern belong to only one college which means that roughly 70% of the information displayed is useless to all users. The presentation of useless information increases the cognitive load of the user and ultimately makes the service that much more difficult to use. Much of the screen real estate is also wasted on this useless information. Thus the user is left to work in a tiny space rampant with scroll bars and pop-up windows in order to find the information which they are looking for.
I spoke heavily in my paper about how users on the web read and one of the greatest points I mentioned was that users prefer to not have to scroll to find the information which they seek.
The lack of screen real estate posed a problem for MyNeu on how to actually display the information, so they resorted to utilizing an excessive amount pop up windows. The majority of the site is contained in a series of pop-up windows. Strategies such as these make it difficult for users to find their position in the site and make it difficult to navigate easily especially when pages have non-descriptive titles such as “Campus Pipeline” and simply “Northeastern University”.
What can be done to solve this problem?
MyNeu already knows what college you attend and with that information it can present the user with the proper information which pertains to that user. Some may ask what if a user wants to find out about another college. Providing simple text links to those sections solves the problem for cross browsing other college information.
Related Links
06.18.04 — User Experience