Aug 5th 2010

Opera’s Interface

For the longest time I’ve provided my opinions and criticisms of Opera’s interface on the Macintosh. Lately I wrote about my disappointment in how the design started with Opera 10 wasn’t made to be even more native-looking for Opera 10.5. Opera 10.5 and 10.6 in my opinion have major problems which are more important to tackle than the interface right now such as its volatility (especially on PPC) and not being able to reliably print, but the interface’s appearance is still quite important.

On the Macintosh an application will live or die by its appearance. Aesthetics and platform integration are imperative as those two are what drives people to use the platform to begin with. Opera for the longest has been thrown aside by the masses on the Macintosh as a laughing stock, and it will continue to be such until the application is given due attention to detail — both externally and internally — by the developers. There’s a drastic difference in quality between the Windows builds and the Macintosh and Unix builds. Opera is advertised on its sheer speed today, and while it’s extremely fast it gets spanked on the Macintosh performance-wise by both Safari and Chrome. In my opinion it can’t be advertised as the fastest browser when performance isn’t somewhat consistent across platforms. Time is taken to make Opera’s visual appearance blend in with Windows Aero while on other platforms something somewhat usable is slapped together for those users to use.

I’ve attempted for quite some time to create something that might be useful to show the powers that be what Opera would look like provided it was designed with Mac OS X integration in mind. I started work on a long and exhaustive document which included everything from screenshots to diagrams detailing precise dimensions items on the screen needed to be. Unfortunately that document was started during the transition from Tiger to Leopard, and as we all know Apple made some welcome enhancements to the Macintosh UI in 10.5 which pretty much required me to restart my effort. I stopped my attempts all-together in a show of faith because of my immense respect for Jon Hicks who spearheaded the design improvements we see and enjoy today in Opera. He’s since left, and because of such I think it’s time to show what else needs to be done. When I wrote my last review it was my intent to eventually show visually what I meant by my criticisms of the interface, and I’ll start on that here.

This is a joint effort between myself and Ralf Demuth, a fellow Opera user who is equally as interested as I am in securing Opera’s rightful place as a first class citizen of the Macintosh. While I did all of the pixel pushing he provided his opinions on what he would personally like to see. What I am about to show is the result of such collaboration. Neither of us have any clue as to what direction Opera plans on going with its application. We’re just trying to show what Opera should look like now with its current set of features. The skinning system within Opera is powerful and gradually gets better with each release, but it’s not powerful enough yet to create what is necessary to make Opera Mac-like in appearance; it would be a waste of our time to attempt to skin Opera to look like these mockups. I hope to do multiple posts on the topic as there’s a lot to cover. In this one I’ll cover just the initial default interface and Speed Dial. For the sake of simplicity I’m not going to provide screenshots of Opera’s present interface. It’d be best when reading this document to compare my mockups with a local install of Mac Opera instead.

This document will be rather straightforward. An image or a series of images will be shown followed by ordered lists of points which correspond to numbers placed in the images themselves. If an unadorned image is necessary each image is also a hyperlink to a version without the numerals.

  1. On Windows and Unix the Title Bar and Menu Bar are collapsed by default. The Menu Bar on the Macintosh is on the top of the screen disconnected from the window, so there isn’t a need to collapse it on the Mac. However, for consistency across platforms it would be advisable to collapse the Title Bar on the Mac as well. It’s also my suggestion to make this customizable where the user can choose to toggle the appearance of the Title Bar through the preferences just like is possible today with the Menu Bar even if it is only in opera:config.
  2. The present Mac Opera Address Bar is too large. One exactly the size users are accustomed to would be much preferable. I assume the larger size of the present one is for accomodating the progress bar in the input box. I’ll address that later.
  3. The Address Bar input needs a physical button on the side. This is standard in Mac OS X. Also when clicking in the Address Bar the text “Enter Address or Search” SHOULD NOT jump to the right side of the input box. It’s ridiculous, confusing to users, and has no precedence on Mac OS X. This goes for every input box in the application.
  4. The Search Box doesn’t require a search icon on the right side of the input box. Search input boxes differentiate themselves by their rounded appearance. For searches without a favicon the magnifying glass icon should be used in place. Currently this search box in Opera is nearly native. It even shows a clear button on the right when text is typed within, but every other search box in the application is different from this with the dropdown arrow on the right. All of them should be consistent, and all of them should appear somewhat like what I’ve mocked up.
  5. Presently Speed Dial items have a Windows-like appearance because of the Vista and Windows 7-like drop shadow. Everything on Mac OS X is lit from a top light, producing drop shadows which are heavier on the bottom than the top. Even icons and menu bars are lit the same way. To produce something that would fit in with Mac OS X it would be preferable to use a drop shadow which is the result of the item’s being lit like the rest of the system is. In addition, I’ve chosen a few appropriate Web sites which would be more useful to users than what is provided presently. These are identical to the default ones on Opera Mini with the exception of Bing.
  6. Since Mac OS X Leopard it’s not appropriate to use Aqua buttons in the user interface. They’re used instead only on dialog boxes (and presently as widgets in Web pages). Using a rounded toolbar button appearance would be preferable here. However, what I’ve mocked up isn’t exactly like the standard toolbar button. Exactly how it is different will be showcased later on. The “About Speed Dial” button should be reduced to a button with just a question mark on it. It still instantly reads as a help button, but it isn’t as obtrusive as the button is presently. After you know what Speed Dial is there’s no need to be reminded there’s a button there that will tell you what you already know about the feature. The buttons are floated left to make way for the search input box instead of being distributed evenly horizontally across the document.
  7. Presently the Speed Dial Search Box is at the top of the document. It wastes space up there when the majority of the space should be utilized for the Speed Dial items themselves. Placing it on the bottom next to the buttons would make it less obtrusive and less likely to be disabled by the user. One of the first questions I receive from new Opera users is how to remove the Speed Dial search simply because it’s nothing more than an eyesore placed at the top. In addition to all of this I’ve personally made it a history search. At the top of the window there is a default Google search input box. Having a Bing one on Speed Dial as well is stupid and not the least bit useful to users. It’s only useful to Opera as another attempt to get money from users’ searches. I chose a history search simply because I couldn’t think of any search that would be more useful to users. Instead of using a search input box to advertise Bing I chose to place it in the center Speed Dial item instead. Bing is still being given screen space.
  8. The Status bar is being shown with rounded corners. Not all Macintosh applications use this appearance, but aesthetically Opera would benefit from doing such. The panel toggler is on the left while the Opera Turbo, Opera Link, Opera Unite, and View buttons are all aligned to the right. My reasoning for this is that if all on the left they are given precedence over the status itself — which is what needs to be the most important bit of information on the bar. The Status Bar isn’t a toolbar. It’s a Status bar.
  9. The Opera Turbo, Opera Link, Opera Unite, and View buttons all are combined on the right side of the toolbar. Like stated earlier moving them on the right side leaves breathing room for the status itself. They’re also easier to recognize because they’re not dark icons thrown on a dark bar.
  1. Since Opera 10.5 most dialog boxes in the application were made modal only to the document they were associated with. On Windows and initially in early builds of Opera on the Mac those dialog boxes were given a unique appearance, giving users an easy way to recognize that the dialog box’s being shown isn’t modal in the regular sense. However, the appearance of these dialog boxes were changed in the Mac builds to look exactly like modal dialogs. End users aren’t given any indication whether they’re allowed input outside of the dialog box unless they have prior knowledge of such or accidentally discover they could. My suggestion is to do exactly like what the Windows builds do except make the dialog box appear look more Mac-like. The Speed Dial Information dialog originally had its own special appearance. I’m suggesting make it use the non-modal dialog box appearance. There’s absolutely no reason for just one dialog box in the entire application to have some sort of special appearance. Additionally, I’ve fixed some grammar mistakes and have used the symbol to designate the shortcut described within the prose as it should be used instead of writing out the word “Command”.
  1. Speed Dial’s configuration dialog should use the dialog box appearance as well. Presently the customization of the layout of Speed Dial is handled by a series of confusing radio buttons that don’t offer any flexibility in layout. The user is limited to only a few configurations and if the user itself wants anything else they have to manually edit speeddial.ini in their preferences folder. What I propose here is a preview with an addition and subtraction button. The user can clearly see what their Speed Dial configuration would look like. Even their chosen Speed Dial background and tiling method would show up in the preview.
  2. Presently the checkbox states “Disable Speed Dial” and is unchecked by default. Having negative names for checkbox items are confusing. It should be “Enable Speed Dial” and be checked by default. When unchecked it’s disabled, and when checked it’s enabled.
  3. The background image is changed, displaying that the preview would also display to the user somewhat of a preview of what their chosen background image would look like.
  4. Speed Dial is shown with a darker background image. The rounded interface buttons now appear darker because of a semi-transparent effect in the buttons. It allows for the same graphics to be used for a wide range of image and color possibilities.
  5. The individual Speed Dial item configuration dialog is being shown. The list box has items in it which conform to Mac OS X standard margins and dimensions instead of Windows-classic ones as Opera does presently. The dialog box has a pointer attached to it which points directly to the item which is being edited. The current item is also highlighted by not being darkened. It’s completely obvious to the user which item is being edited.
  6. A Web page is chosen in the list box, and the Speed Dial item is in the process of being updated to show the new selection.
  7. The new selection is displayed.
  8. Speed Dial has been updated to show cnn.com in the 7th Speed Dial item while the hover status of a Speed Dial item is shown on Number Five.
  1. Since Opera 10.5 Opera’s tab previews have become less useful simply because the preview image gradually fades to nothing, losing information which sometimes can be used to identify a document. In my version the image doesn’t gradate, and the box it is contained within has similar dimensions to what are found on tabs and Speed Dial items in my mockups. The box also doesn’t have a Windows-looking drop shadow — instead sporting a drop shadow which fits with Mac OS X.
  1. Opera is being shown in the progress of loading a Web page. Opera has multiple ways to display page loading progress, but the default method is for it to be displayed within the address input box. Presently it uses a default progress bar, but not the inset one as would be appropriate in this situation. It uses the raised one, complete with drop shadow. It’s quite ugly. In this situation it would be preferable for Opera to deviate and use its own. The one I’ve mocked up hugs the edges of the address input and is placed in precisely the same location as the current one is. However, it doesn’t look like a fish out of water. It looks like it belongs there. My thoughts are that it would change depending on whether the Blue or Graphite appearance is chosen in the System Preferences. I use Graphite, so I’ve mocked it and other things like it in that manner.
  2. While the progress bar shown previously was an indeterminate one this one shows a definite completion time. The appearance is similar and looks as if it belongs there.
  3. The page is loaded. The feed and widget icon is shown in the Address Bar. The widget icon has an appearance that’s more similar to the standard feed icon.
  1. Opera Turbo has been enabled, and the document is being shown with heavy image compression usually associated with the feature.
  2. Opera Turbo, Opera Link, and Opera Unite all have been enabled and are designated as such by the buttons’ icons appearing to be lit by a green light. The Opera Turbo button, however, is toggled by having a green pressed state. Everything is obvious and fits within Mac OS X’s interface design while retaining Opera’s already established conventions.
  1. Opera Turbo has been set to Auto mode, and the green pressed state of the button has been replaced with the typical grey. Right now Opera uses “A” to denote Auto mode, but in my opinion it’s not the best choice. “A” can mean a lot of things while “Auto” is usually associated with “Automatic”.
  2. The View button popup menu is shown with an appearance similar to the Speed Dial item dialog box. Padding and Margins are consistent with menu dropdowns in Mac OS X and not made up. The ugly-looking 100% button that’s in Opera right now has been replaced with a simple “Default” push button. The Zoom slider is given a more native appearance consistent with its actual behavior. The limitations of the slider is clearly shown to the user where he/she can only zoom from 20% to 300%.
  1. Currently in Opera the address bar dropdown has quite a similar appearance to what I have mocked up. The only difference on the surface is that I’ve used standard system margins for all the contents. What Opera has right now is quite functional and appropriate.
  2. In fact the only big change I would make is to make the “Search Bookmarks”, “Search History”, etc. into actual buttons but only designated such by a hover status.
  1. Last but not least I’ve mocked up visual tabs. I’ve made the margins consistent between regular tabs and visual tabs so when the Tab Bar is expanded the tabs don’t change shape horizontally. It creates a smooth transition when resized.

I’m throwing a lot of criticism toward Opera. I’m not doing such in any sort of malcontent. Opera’s my favorite application, and I use it far more than any program on my computer. That’s surprising considering I’m a graphic artist and really enjoy working in Photoshop and Illustrator. I’m doing this out of my love for the application and my respect for the excellent developers Opera has around the world. Like I’ve said before I plan on doing more posts like this. Hopefully the following ones will be a lot shorter. This one is quite the long one. Ha.