Tuesday, March 4, 2008

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:

text.jpg

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:

ltext.jpg
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:


picture.jpg
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:


lpicture-3.jpg
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:

lpicture_analyzed.jpg
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_lpicture.jpg
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

proposed_lpicture_analyzed.jpg
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.

0 comments: