A friend send me a link to a discussion. Besides the discussion, the website included a cool feature which I would like to see on other websites. The designers put a little box in the lower right edge of the screen which informs the users about the total number of comments and the number of the comment they are currently reading. It is not necessary to read the number. The progress is presented as a colored status bar in the background of the number as well, similar to the progress-bar that indicates the download process.
I like to read articles in the Newyorker. However, those articles are typically quite long (longer than my lunch break). It would be a nice feature if they would include a progress-bar to inform the user about the reading progress.
Light switches are an everyday object. Occasionally, they can be an object of frustration, if the design is inadequate. In the following I will describe an example from an office in which I worked. The image below shows the rectangular building. In the corners of the building, marked in red, are staircases. I worked in a large office that provided space for about 40 people. The room was designed to be used flexibly as either one large office or a set of smaller offices. There were two of those large offices in the building located on the left and right side of the building. In both offices were columns which could be used to separate the room into smaller offices. Those columns are marked as brown squares. Of course, in such a large room there were several lamps, I counted at least 12. I will describe three usability issues that I experienced with the light switches.
A first usability issue was that there was no clear link between a light switch its associated lamps. The lamps in the office were divided into sets and each of those sets could be controlled by a single light switch. The light switches were positioned seemingly random. Some light switches where installed on a column, but not on every column and not on the same side of the column, and others were installed on the walls. When there is more than one set of lamp and associated light switch there should be a clear link between the light switch and dedicated lamp, for example, a physical association. That could be similar to a control for the stove. Assuming there are four sets of lights arranged in a square, their controls could be positioned in a matching square formation at the entrance of the room. I remember running rounds in the office if the light above my desk happened to be switched off. A difficulty in this office was certainly its flexible usage (one large or a set of small offices). Taking the flexible design of the room into account a wireless light regulation with a pad could be a usable solution. The room could have different holders on the walls, flexible to the current physical layout, and the pad could be mounted on one of them. However, that solution would have been more expensive compared to the conventional light switches.
A second usability issue was that the status of the light switch was not physically visible. Below you can see a light switch from that office (top). With a click the light switch could be pressed down. On release of the finger the light switch returned into its original physical position. This meant that after turning the light on and after turning the light off the switch remained in the same position. Having one of such light switches in a room is no problem as the user can see the outcome of the interaction. However, as soon as there are two switches next to each other it can get confusing, particularly if it is not clear which lamp a switch controls. Additionally, I found the two icons on the top and bottom of the switch confusing, because appear to indicate that the switch changes its position (e.g.: "off" tilt upwards and "on" tilt downwards).
A third usability issue are the icons on the switch. The choice of icons is good, because they are standard icons for indicating an on/off status on electronic devices. However, those two icons are useless given that the switch does not remain in an altered physical position after an interaction. More exactly, they tricked me into thinking that the switch has two physical positions (see above).
Errors messages are a tricky part of the HMI design. An error message means that the user cannot reach the goal of an interaction and it therewith carries a negative emotion. However, the adherence of simple principles can improve the design of an error message and consequently brighten the user's mood. An error message should be simple, easy to understand, easy to locate, and, in the best case, instructive. Simplicity means that the message should be as short as possible and as long as necessary. An easy understandable message is communicated in a language that the user can understand, for example, avoiding technical terms and abbreviations, and clearly states a reason. Easy to locate means that the user can associate the message with the dedicated part of the interface. At best (and if adequate), the message should include instructions for the user. For example, that could be contact information if a service cannot be accessed. The messages below include an additional humorous element which further reduces potential negative emotions triggered by an error message.
Website content changes and links that a user saved as bookmarks are no longer valid. When the user then tries to open such an outdated bookmark, some sort of message must be communicated from the website to the user. There is a better design than stating "Website not found" or the display of a cryptic error code. The website Wetransfer uses pets to take responsibility for the message in a humorous way (image below). All those error messages take guilt away from the user, either in form of an apology for the error or in form of a funny note. There is a whole little series of thoughtful messages. Instead of being frustrated, one might be tempted to repeat the interaction to find yet another version of the error message.
Another example is the message from Duolingo. They employ their mascot to deliver the message. Comparing the design to the ideal, an improvement could be to change the title from "Error 404" to "Website not found". Positively, the message includes a descriptive text in easy to understand language and an instruction.
An example in a similar humorous design with a mascot is that from the online game website Kongregate
This usability story is about an experience with an online service for bike rental. For a weekend trip we wanted to rent bicycles and made a reservation at a website. The screenshot below shows the website and the bicycle that we rented. On the rightmost column and at the lower half of that website there is an orange button labelled "Reserve or buy". We wanted to make a reservation for this bicycle and so I clicked the button, and … nothing happened. There was no pop-up and there was no visible change on the website. My first thought was that it might be an issue with my browser and so I tried another one. Still, after trying to make the reservation two other browsers nothing happened. I got really frustrated.
After searching for a while, by accident, I saw a small icon appearing in the header of the website showing a "shopping basket" with a number in it. I clicked on that icon and there were my reservations for the bicycle. Each one of the many times that I tried to make a reservation had been recorded in the shopping basket. I thought I might have missed the shopping basket on the initial screen. However, when we tried the reservation process at another computer we found out that the shopping basket is invisible without a reservation.
There are several usability improvements that could be made on that website. Most importantly feedback to an interaction should be given where the user expects it and if a user interacted with a website feedback should always been given. The header of the website where the shopping basket appeared was not even visible from the reservation button. Also, if the action is a reservation why does it appear in a "shopping basket"? The cost of an unclear interaction, as in the case of our reservation, is a lost customer. If it had not been a good deal and I felt technically challenged, we would have long left that website and rented bicycles somewhere else.
Other things that could be improved on that website are for example: the general layout, the navigation menu, and bread crumb navigation. The general layout and organization of the content could be improved to guide users better through the content and separate the different areas of the website clearer (particularly in the middle area). Additional clearness could be achieved by reducing the visual clutter and reducing the various font styles to a minimum. Yes, different font styles can be used to emphasize specific content, though, if overused it looses its purpose. Breadcrumbs (top middle area) should be better matched with the navigation menu on the left side.
During my last holiday I was looking for an exceptionally postcard and found one that was designed as a jigsaw puzzle. The tiles were already pre-cut. Writing on the card needed to be done carefully as the surface was uneven due to the pre-cut tiles. So far so good.
However, after sending the postcard I noticed that the jigsaw puzzle postcard does not have a good usability for the recipient (sorry about that). The recipient needs to complete the puzzle twice - one time to read the postcard's message and a second time to see the image of the postcard. Additionally the card cannot be stored as whole. The designer provided the postcard and an envelope to send it, but it would improve the usability if the designer would also provide a transparent foil with glue on one side (similar to the protective covers for on mobile phones). The jigsaw puzzle parts of the postcard could then be stuck on the foil. By solving the jigsaw puzzle one time the recipient will be able to see both - the postcard's message and its image. This way the postcard could also be stored as whole.