Rolling my eyes at Goal.com's Scrolling System

Why have a Scrolling System ? 

The point of a scrolling system is to allow the user to effectively move through a passage of content that could not be displayed all in one go. It enables the saving of space and is commonly used for a passage of text. 

The point of a Scrolling System?

The beauty and effectiveness of a scrolling system is that users should be able to scroll at there own will. This meant they should not have to scroll at a standard speed but in essence they should be able to scroll fast or slow depending on the users. 

Giving this variety is key to users as all users are different. Some may want to scroll slowly as they might not know where the information they are seeking is. However other users might want to scroll fast as they might know that the information they seek is towards the end. 

These are things I would naturally think about when having a scrolling system. However its become apparent that some people do not even put that much consideration into it.

Goal.com Scrolling System

 

Goal.com (a football website) publish news reports associated with football. They give their users the chance to comment on the articles and generate a conversation amongst themselves. They hinder users use of the system by having a scrolling system that does not allow users to go through the comments efficiently and effectively. 

Example of Scrolling System (goal.com)

Scrolling System: The way it works is that users have to move the cursor over the up and down triangles that are in grey. When the cursor is on one of them it turns red and the comments on the left begin to move. 

The Neat Bit: The automatic behavior. All you have to do is move the cursor to one of the arrows and the text will automatically scroll. This is clever, smart and looks good. There is also the added bonus of the text moving steadily and efficiently.

The Problem: Users have no control over it. They can not speed up the scrolling they can not move to the bottom, top or middle instantly. If there is like 200 comments and they want to show someone there comment which is near the bottom. It would take them forever to get to it. They would have to leave the cursor on the arrow and wait. 

The Solution: Its simple, you just add a "bar" that shows you how far down the list you are. It can also be used to quickly scroll through manually. This will give users a different approach to scroll. The automatic behavior can still be kept for the arrows. Therefore users would have multiple ways of scrolling through the comments. 

Sometimes its just best to do the simple things, rather than be flashy and creative. To have a look at their system go to http://goal.com/en/Articolo.aspx?ContenutoId=641300

iCal's Icon

Sometimes there are little things in an application/system that make it very useful. The kinda features that we don't even notice but use them everyday. iCal has one of these features which in my opinion is a very cool one. iCal's icon on the dock auto updates itself and shows the current date! So the moment you see your desktop you see the date right there on your dock. It's a simple, yet useful feature.

Safari and Its UI Inconsistency

Yes. That's right. Even Apple makes mistakes!

Safari is the Apple's web browser which happens to be the fastest on the planet as Apple claims. Like all of the other products of Apple it looks and works amazing (Although it has some safety issues). But, humans make mistakes, and Apple hires humans to write its softwares. So Apple makes mistakes as well!

What I'm gonna talk about here is not a vital problem with Safari's interface or anything. It's just a tiny little inconsistency (or consistency) issue with the way Safari handles right clicks and shows the pop-up menus. I believe consistency in the user interface is a good thing as long as it's applied smartly and wisely (surprisingly not all the times IMHO!). But it seems that developers of Safari have a different opinion. I guess they think everything should be consistent all the times. Actually it could be just that they didn't pay enough attention to this little issue, because everything else seems to work fine (as of now).

Now let's get to the problem. For the purpose of this article firstly I'm gonna roughly categorize the elements of a webpage into four main groups:

1. Text
2. Linked text (linked means if you click on it, it takes you to another page)
3. Image
4. Linked image

Now let's see how does Safari handle right clicks on these four elements:

1. Text
By right clicking on a word which is simple text the following pop-up menu appears:

Safari's pop-up menu for text

It has four main sections: Search, Dictionary, Copy, Third party softwares (DEVONagent in this case).
Now let's take a look at pop-up menu's for linked texts.

2. Linked text
Right clicking on linked text would bring up the following menu:

Safari's pop-up menu for linked text

Again it has four main sections: Open, Download, Copy and finally Third party softwares.
Time for right clicking images on a webpage.

3. Image
If you write click on an image in Safari the following menu will appear:

Safari's pop-up menu for images

Once again four main sections: Open, Save, Copy, Third party softwares (Nothing in this case).

Ok, Now let's compare these menus. They all have four main sections:

First section: Open/Search; which opens the selected element in a new window or tab or searches for the element in a new window or tab. You can actually related these two items, Opening the linked elements (going to the relating page) or searching for the element (finding related pages)
Second section: Download/Save/Dictionary; which downloads or saves the element into your computer or looks up in the dictionary for simple text. Once again there's a logic behind this. No need to explain the relation between download and save but for dictionary, it will run the Dictionary (Mac's integrated dictionary) to find out more about the element. So it's sort of saving it in your memory for further reference.
Third section: Copy the element. That's text, link, image address or the image. Well it's almost the same across all of different elements.
Fourth section: Third party softwares. This section contains contextual menu items of all other applications.

Of all these four sections the first three are the default items but the last one differs from computer to computer depending on the applications installed on the system. So far Safari has got a very good consistency in its pop-up menus for different elements on a webpage. Fair enough till now. But let's check the last category which is linked images.

4. Linked Image
By right clicking on a image which is linked to another page the following pop-up menu appears:

Safari's pop-up menu for linked images

Surprise! there are seven sections! How is that? you ask. Well let's analyze the menu to see what are it's seven sections.

First section: Open (link)
Second section: Download (link)
Third section: Copy (link)
Fourth section: Open (image)
Fifth section: Save (image)
Sixth section: Copy (image)
Seventh section: Third party softwares

What's wrong with that? it doesn't follow the design paradigm of the other menus. Well, it actually does if you don't look at it as a whole and break it up into two sections. But no one does that, everyone sees it as one piece. So, Instead of having four main sections it has seven main sections. I can see why the developers have made it this way. Because they have followed the rules of consistency NOT smartly and wisely! They have sectioned the whole menu in two different sections, one for items regarding the link and other one for items regarding the image to keep each of these consistent. This is illustrated in the following picture:

Safari's pop-up menu for linked images

But this approach isn't smart. It makes average users to check all the items of the menu to get to the one they desire. This is because most of the people consider the menu to be one piece and that not all the users are necessarily aware of the structure of the menu (after reading this post you won't have any problems with it because now you know its structure). Even I didn't know the structure until I decided to see what's wrong with this menu!

Now, let's lift some weight with our brains! (yep, I mean think about it before you go to the next paragraph) how it should have been designed?

The best option I came up with was this: To have the same usual good old four sections in a different way. The default four sections should be there in order to maintain the overall consistency of the menus, but each section should be divided into to logical parts, one part for options relating to the link (or no options for unlinked elements) and other part for options relating to either text or image. Here's how this will look:

Proposed pop-up menu for linked images

First section: Open (link, image)
Second section: Download/Save (link, image)

Third section: Copy (link, image)

Fourth section: Third party softwares

Structure of the proposed linked images pop-up menu

This way the menu remains consistent with other pop-up menus. And in my opinion it won't be as confusing as the other one which Safari is currently using.

British Intelligence not so intelligent

I was browsing on the GCHQ website trying to get more information about what they have to offer when I came to a scrolling system which took me a while to get the hang of it. At first I was not sure how it working. I thought an area must had been designated where you move the cursor to move the options. In thinking this I started going around the circle - ipod like (I know it sounds stupid). This didn't work, however it lead me to the conclusion that if I moved the cursor up and down there was some logical movement. After a few minutes I just got bored and thought I'd try later. When I came around to it again today I was much use to it and had got the hang of using it. Whilst going through the site it became apparent that this for a first time user and who don't have patience are likely to go away from the site in a matter of minutes. This would be pretty concerning since this part of the site is meant to provide information for graduates. I always thought that when providing information to users it would she presented in the simplistic way and allow the users to navigate around it easily. 

There are a number of reasons for why this site makes it difficult for the users to view the information and navigate. Most of them were experience by me and will be outlined below.

The movement is erratic. Users are normally use to having scroll bars or something similar to the MAC dock(which enlarges the icon when you scroll over them. This indicates which one you have highlighted.). The way GCHQ have done it is have the movement of the mouse determine the way in which the menus move. So if you move up then the menus move in a clockwise. If you move down then menu options move anti-clockwise. I could not get the hang of it as it either scrolled to fast or to slow. When my mouse cursor reached the end of the screen, the menu options had not been all the way round, so I had to be careful when scrolling up wards that the menu options did not start moving the other way round.

The background of the menu options are kinda see through. This means you can see the options that are in the foreground. This is really distracting and makes it harder for you to focus on the option you would like. It also makes the options look clustered. There is the use of a different colour that shows the user what you are clicking on, but the option is still transparent. 

The fact that this area of the site focuses on obtaining information which is important and useful. It its quite strange to have such a erratic approach. I would have assumed to have something familiar that users would have been comfortable using. 

In some cases the visual aspects can be more eye catching that they cast a shadow on the content. For me this was the case in this situation. I could drawn into the visual aspects

trying to work out what the best approach was try and use this part of the site. I think I must have spent a good few minutes looking over and messing with the scroll, when in fact I should have been reading up on the content. The objective of this part of the site was to help you find out more. I don't believe that it achieved this as well as it should have. To have such a visually appealing site does little to the company. I mean GCHQ is not about effective and state of the art web development or flash development so it would make little sense to use visual and animation to try and outline opportunities. I think such a approach would be best served for companies that are promoting film such as Spider-man 4, Cloverfield and other blockbuster hits. 

I believe that the theme of the "Graduate Opportunities" part of the side is to encourage exploration. The idea is to encourage people to move the cursor around the different parts 

 the side and see the areas they can click on. Example of this is the main page. It shows a laptop with different items around it. There are no label outlining what they might be. There is information just before indicating how to use the interface. However it is only there temporary and relied on you having to remember. If you scroll over the items, information is presented. At least this makes up for the lack of information currently on the screen.  Also an important note is that with there be high emphasis placed on animation, it would be interesting to see how the site would work if running on a lower speed. But then again in this day and age with there being more than 10-million board-band connections in UK[1], there might not be a major issue.

Note for designers: I think the lesson or note to be taken from this is that when designing for users you should take into account what is important the actual content or the way it is presented. In some scenarios the way information is presented takes precedent, however on more occasion it is the content that is precedent. Therefore care should be taken that the approach taken to present the content caters to present the information in the most effective way possible. 

Web site can be viewed on following link: 

http://www.careersinbritishintelligence.co.uk/Default.aspx?ID=4

The section I was discussing is the Graduate Opportunities NEED TO KNOW MORE bit. 

Please go and view it. It would be good to know if other people experienced issues with it or if they even liked it.

[1] BBC News, 2006, BT goes after Broad-band glutton,http://news.bbc.co.uk/1/hi/technology/4841132.stm

Is it click, click, tic toc or click, click, click?

I liked the "Every Click Counts!" concept as I believe it to be true in most situations in designing effective interfaces. However I do not believe this to be true when it comes to shutting down your computer.

I prefer to have 3 clicks,where the 3rd click gives you a chance to continue with your action or retreat - meaning cancel to be useful. Some people might disagree with me, however I believe it to be a necessity. 

The whole thought behind Apple's 2 click approach was to speed up the process of shutting down. However what they had failed to take into consideration was people's tendency to 'miss' click on the odd occasion. I know that we all have experienced 'miss' clicking at some point when on a computer with Windows, Mac OS X, or Linux. It is one of those rare things that is natural for people that is applied to all operating systems.  

I think it is this issue which has lead to Apple adding the possibility of a 3rd click.

The above screen shot illustrates a message box that appears once you click shut down in the pop-up menu displayed in Mac OS X Leopard section in  Every Click Counts! by Mehdi. 

The purpose of this is to give the chance to the users who may have accidently clicked shut down and do not want to, the chance to click cancel and stop them from seeing their Apple Mac shut down. What I believe to be ingenious is the fact that Apple has a 60 second count down. So those who in fact wanted to shut down there computer can just walk away and leave the count down to finish and  'hey-presto' your Apple Mac is shut down(thats your 2 click to shut down a Apple Mac). They have also taken into consideration for those who like to switch off their Apple Mac from the mains to abort the count down by simply clicking on shut down button and their Apple Mac shutting downs in a matter of seconds. 

In my opinion I believe this is the perfect structure to have to shut down your computer. Its the best of both worlds. You have your 2 click or 3 click possibility, and it gives users the chance to cancel if they do not want to shut down which is critical. If Bill Gates is reading(which I doubt he is), he best be taking notes because this is another one of Apple's approaches he could do with plagiarizing! if it already hasn't been done by them - if my memory serves me right I do not believe Windows Vista incorporates this approach. Windows Vista users please let me know if I am mistaken. Thank you.

Advice for designers: Users are not perfect and it is important to take note that they are prone to make mistakes. Therefore in an actions that could be critical they should always have the option to cancel it.