It is not easy to describe my ideas of consistent user interface. So I will write a bit more provocative to give you the imagination of the things I’m thinking of.
First the user interface should be simpler on first sight and be more intuitive for new and old users at the same time. I do not prefer the way of Microsoft Office 2007 Ribbon – I think the big toolbar thing is nice to learn all the features but not to work efficiently. Although I will grab some details from the new MS UI and try to improve them (ie the big icon on the top left replacing the files menu). …
1. Let’s make the interface simpler and clean up
Remove the long URL from address bar (deep links) and just show the (sub)domain without the leading http://. Example: www.opera.com instead of http://www.opera.com/operabits/06/04/interview.dml. This is enough and easier for most users.
Show the page-title after the URL and place both in the top bar which is normally used by the OS and only contains the title.
On the left side of the URL there is back, stop/reload and the favicon. Between domain and title there are the symbols related to the content of the site (security-status, RSS, wand) – they are displayed only if there is an related option on the current page.
On the right side of the title will be the browser related icons, most right the normal windows handlers.
There are:
Information icons
- question mark for help about the current page and the browser.
- email-icon is showing different colours / symbols for new / unread / no emails / checking emails / error occurred while checking emails. If something happens a popup could be displayed for a certain time.
- system status icon showing different colours / symbols for all ok (maybe different for idle / busy with download) / warning and error (esp for stopped or error in transfers and as opt in related to system or rendering of the page, ie signalling the content of current console) / offline (should be detected automatically and is not necessarily an error – there might be a small continuous popup signalling the displayed page is a cached version). If something important happens a popup could be displayed for a certain time.
- There could be 1-2 further icons. More could easily confuse the user and will take more space.
Multiple pop ups should have a smart handling. Messages about the same topic should just count up a number besides the text. Messages about different topics should be combined in one box with one line for each message and maybe a concluding line with something like use symbols for further information
Error could be displayed by a red exclamation mark together with the special symbol, warnings by a yellow triangle (as altered icon). With small icon sets it could be just a change of the background colour instead of exclamation mark or triangle. Icons could automatically switch between narrow/small and wider/big icons depending on width of or spare place on top bar.
Following is a (incomplete) list of mouse actions on the different parts of the main/top tool bar.
Mouse actions anywhere on the toolbar except windows handlers:
- Click hold and drag in windows mode (not maximized) should drag the Opera window
- Double click on any free space switches maximised / window mode
Mouse actions on domain:
- hover the domain will display the full URL selected in an input field – either above the title, or moving the title right, or in a second row toolbar-like line below (above anything what is there). On click the URL has to be selectable and has to allow further action (copy, paste, edit …). Additional in a second row below the address field there is shown something like the current start bar including a multi search field or several search fields.
- single click: similar to hover, cursor is placed in the address field for editing, URL selected
- double click on the domain will show the input field with the URL and select the URL – further click will act allow editing etc – this could be replaced to switch between full screen and windows mode
- right click will show further options for editing (as on address bar in O8+9), settings / customising (etc?)
Mouse actions on title:
- hover will show full title if not already displayed (in two lines if necessary, maybe in a second row popup)
- if labels for tabs are introduced: some action could change the title or user can define a label
- tbd.
Mouse actions on page icons:
- RSS, security and wand icons similar to current behaviour
- favicons tbd (if any)
Mouse actions on back and stop/reload icon:
- hovering icons will enlarge the box to show the missing icons fast rewind, forward and fast forward (or something like that; actually I would prefer a combined button for back and fast rewind but yet I haven’t found an intuitive way for that – maybe double click on the button, with an hint displayed when someone is doing two single clicks in a short time and a question at the first double click if this feature should be used and maybe an undo for this rewind).
- tbd
Mouse actions on question mark:
- question mark hover will show some page information (tbd) – the mouse pointer could hover + click this items and start further action (hover should show extended information or explanations and a click should go to the expected place)
- question mark single click will offer the current help items and information about the page – hovering the entry will already show some information
- question mark double click and right click could lead to some settings and a wizard for showing the user how to handle the page, don’t know details yet, tbd
Mouse actions on email icon:
- email hover shows a list of the unread emails (if any) with sender + subject (or label or account or just number of unread emails), error summary (if any) and the status – the mouse pointer could hover + click this items and start further action (hover should show extended information or explanations and a click should go to the expected place)
- email single click opens a menu like the actual Mail menu, although it should be refined – hovering the items will show related items if possible (ie read mail will show the unread emails) and set up and edit accounts should go in this place
- email double click opens the two or three panel view (users choice, default should be three-panels)
- email right click will have options to check emails, view emails, view errors, stop automatic checking of emails (kind of offline mode but only for emails – useful to avoid being interrupted and for privacy/security with insecure WLAN-connections), set up and edit accounts, preferences, etc
Mouse actions on system icon:
- system icon hover will show a short status, ie just the error places / all ok in one line or always display same several lines with status of different things (would be nice with colours – green for ok, yellow for warning, red for error or coloured icons) – the mouse pointer could hover + click this items and start further action (hover should show extended information or explanations and a click should go to the expected place)
- system icon single click will open menu with all system related items – this is different to the current tools menu, as mail accounts should go to mail settings (with the mail icon), contacts + notes + transfers + history + links will go to the user generated data place (see below). There will be the preferences, appearance, quick preferences, the advanced stuff and additional work offline and check for updates (could be within question mark / help instead, but only because other applications have it there). Furthermore the menu should give access to more information about the system status (like hover).
- system icon double click will open preferences (quick preferences on users choice)
- system icon right click could give access to quick preferences
Customisations
- full URL is shown all the time (left of, above or below title)
- space dynamic behaviour showing as much from URL+title as possible in one line (maybe optional in two lines if needed)
- user defined options for information pop ups (yes, no, only errors etc), which icons and which states of the icons should be displayed
- …
Other toolbars
The default progress bar is a pop up on top inside the page.
The tab bar will be the only default toolbar in the current sense (the top bar and the bottom are partly misused with toolbar like functionality).
On the bottom of the browser there will be a toolbar with view options on the right (zoom, fit to width, maybe the option to show the view bar etc) and search related items on the left. In the middle there could be the default status bar (or it could be displayed as popup inside the page).
The scroll bar can be enhanced by additional symbols for page forward + page back and or top of page + end of page similar to text processing applications like OO Writer or MS Word.
Special places
Still missing are most of the places for actions that are currently in the plenty of entries in menus and additional toolbars in current Opera. Well the toolbars will be user defined and can be shown or hidden – nothing new on this point (also panels could behave pretty much like they do now).
Most of the menu entries are just to find in several alternative places. The information icons deliver those places for all email related stuff and all the system things. With the view stuff on the toolbar on the bottom there could be access to other view options (while character encoding will be more logical at the help icon as the page information should be there or maybe with the system icon). I just ask myself whether performance would allow a live preview for viewing options while hovering above appropriate entries (having the view menu on the bottom will give a better view towards a page preview).
Besides the minimal toolbars I’m thinking about two special places as main access points. One is like the new big file menu-entry replacement button of Office 2007 and the other is something similar for all the places of user generated data of browsing (URLs, history, notes, transfers etc). Actually it will be similar to the idea of places of future Firefox but this time it could be / is only the description of a common starting point and not necessarily mixing the content (ie simultaneous search in bookmarks and history). This My places button seems best to fit into the left bottom corner (as corners are easiest to access with the mouse pointer and the bottom left place seems to be a good point to start with new not current page related actions). On hover the most important menu entries could be displayed, on click there will be all options available.
As the two big icons (File replacement and Places) should be bigger (two toolbars high) it is to be thought about what will happen if there is only one (or on the bottom maybe no toolbar) and no panel open – the icons will reach into the page. Most times this is no problem on the lower end of a webpage but it might happen that there is a small link under the icon. And on the top of the page it would be more disturbing. We could limit customisation or take methods of auto sizing (ie to one line high and double width on reducing to one toolbar or increase size on hover), maybe even transparency could be useful. Place and size of the icons should be customizable in any way (at least with skinning).
There are a lot of more questions and I have a lot more answers but it is already quite a lot of lists, ideas and options and there are additional topics related to UI for end users. It should be enough to imagine the direction of the interface design.
2. Let’s be more intuitive and have shorter ways
This part is about interacting with the user interface. I will be a lot shorter compared to the prior part although it could be described with similar details.
I found the example of the refined UI with Version 2.2. of TV-Browser really appealing (which is a German TV guide application and they got some help for this version by Björn Balazs from OpenUsability.org). Especially I like the information displayed with right click on the tray icon: you can directly see your favourites and the current broadcasts for the (customisable) most important channels and besides some other important options you get submenus by hovering, especially for the broadcasts running next. There is a point customize this leading directly to the according settings. What I like: it is intuitively simple, takes little space and gives the most important information for the user.
For example the tab-preview of O9 deliver no possibility to copy the text or anything else. In fact they are even too big, especially for the given information is probably needed pretty seldom. I think of a two level hovering: showing the preview with the essential information like title and URL above or below. Hovering the preview will show additional information that should be more related to end users and not only for technical people (UTF8 and MIME will probably unsettle some and be irrelevant to most users). This information could be size of page, number of images, date and time (of last loading or last change of the page if possible) and of security status. I am sure you will find more. As often it would be nice to have the possibility to customise the displayed items. There could be further action on click, double click and right click.
Besides pure optimising of the current stuff I like to have two more innovative (although not new) strategies: to reduce mouse clicks and the length to reach the most used actions.
Hover instead of click
I already gave some examples of hovering to show the most relevant information or some explanation of what it means and what could be done. With information on hovering I don’t think of the current one line tooltips. They are too small and lack in capabilities of interaction.
One problem has to be handled with this: don’t make the information boxes be in the way like current tooltips on the webpage (esp links that are luckily removed in O9 when status bar is activated). The easiest way (besides customisation) will probably be hide at click for tooltips generated on the webpage, while click and drag could move the still shown tooltip and right click on it can make displayed text selectable (or copy all), give quick access to the tooltip preferences and maybe a submenu relating to the original trigger of the hover box.
Additionally hovering information has not necessarily to be displayed next to the mouse pointer. The Opera Skin Editor demonstrates what could be done in a small box in the upper right corner of the page that appears on mouse contact with appropriate UI or page content.
The point is: hover to get the most needed very short information and hover the hovered box (or menu entry) to get more detailed information and the possibility to get to the related settings and actions.
Click where you are
Something different I found with applications for PocketPC. Do a call with Skype for Pocket PC and just hit the screen anywhere (especially useful when backlight turns off): there appears a menu box with 6 icons to access the most needed actions without the need of searching menu entries or small icons somewhere on the screen.
I discovered on (normal) click on a web page somewhere with no link (and no other active element) nothing happens. What a waste of possibilities. There are a lot of things a user could want just where he is – quite similar to Pocket PC. Close the page, going back …
Similarly sometimes I ask myself why some context menus in Opera have just one or two entries (ie customize on toolbars). Maybe we can find something additional useful things on places like this (and others). Just ask: what could a user expect on a place (keep in mind it has not much to do with the technical thing beneath).
Of course, there are other possibilities like mouse gestures and keyboard shortcuts. But this is not intuitive as long as you are not used to it. They have to be learned. If you say it is perfect for you then it is fine. There are a lot of people I know that have not made their way to use mouse gestures, some are using basic keyboard shortcuts. A lot of people use right click + back (esp with IE), what has the advantage of something visible: you see what you do.
We can make it simpler and more intuitive by just visualise some most needed basic options with a single click somewhere on a page. Just ask the question what could users want, clicking somewhere.
Opera is already pretty good in a lot (most?) of this points, especially in comparison to other browsers. But making people astonishing could make them believe in Opera doing miracles. At least it will be great matter in browser reviews and make people stick with this comfortable mystic thing Opera (I just discovered I really like those Merlin, Magic, Miracle, Mystic stuff).
Control Widgets
The technical way the chrome on click can be done is just another kind of widgets. Have widgets that interact with Opera (funny, it will be chrome widgets without chrome 😉 ). And for security reasons they don’t have a connection to the internet themselves. Imagine the possibilities: there could be a small control box in or besides the browser windows where you can navigate on (scroll) and between tabs (go back, switch tab etc) and close pages with very short mouse movements. If control widgets have the possibility to dock they could possibly replace most of standard chrome (by the way the panels are already called widgets in shortcut settings – I wouldn’t be too astonished if most of UI already is pretty much like widgets in technical terms, now they just need the look and flexibility of those new O9 widgets). Besides control buttons there could be information widgets related to current page, the transfers etc, what will probably be welcomed by a lot of people that could have those stuff on desktop level or besides the normal Opera window if in window mode (I’m astonished how many people don’t use maximised browser windows). And I ask myself whether Moose will still think widgets are useless with those control and information widgets (even more and easier customisable as current Opera chrome).
Assistance and hints
To have the user know about advanced features we could tell him to use some manual or to keep track of the community forums. MS Ribbon tries to go a different way and show almost every possible action as icons in one oversized toolbar (indeed it are 7-8 toolbars and I suppose there will be more in future, but at one time there is always shown only one). In fact I think Ribbon is really neat as learning tool, but as it far away from offering sensible workflow. And it will probably generate lots of happy people with even more kind of pretty and meaningless documents as there already are with many power point presentations.
For the task to assist the user I think of something more like the already mentioned right top information box of the Opera Skin Editor. Also on tooltips and hover boxes there could be information about how to do things more efficient (current keyboard shortcuts are only the minimum).
Another possibility is showing hints with certain actions, for example telling something about Fast Rewind after two or more back actions on the same page. It should be a short note and some option tell me more, that doesn’t require user action and can easily be ignored. But there should be the possibility to get access to the messages although the hover box is gone.
3. Easier and more capable preferences
Another important point for end users to make the browser looks and acts as wanted. This point is especially important for semi advanced users. Also advanced users will profit from more capable and easier preferences instead of editing ini files (or somewhat easier but still kind of cryptic :config pages). For beginners it is much more important to have properly working default settings as they probably don’t change anything (or at least don’t want to do it). Probably it is more correct to speak of categories like 1) just work 2) customize on some points and 3) very special needs or preferences.
The requirements for preferences UI are similar contradicting like the general UI: have easy access to a lot of features. Have one click setups AND have the ability to change each detail. And of course everything has to be easy to find and intuitive to understand.
Profile matrix
One way to have a lot of options that are easy and kind of intuitive and optionally have quick groups of preferences is organizing preference settings in a matrix. One dimension is for every part the preferences belong to and another dimension is for the name of this special setting (this name is pretty close to labels but in the easy way it has no semantics and therefore no complexity from itself).
This is not about the technical background and settings still can be saved in about the same ini files etc as it is done now. It is about presentation and accessibility in the UI.
Example:
As example there could be predefined option sets for fastest possible and most comfortable browsing. Actually this could be a good way to have all the new features for powerful computers and the core browser still rocketing on old machines (and maybe sub settings for broad band connection and modem usage).
There could be a table design or drop down lists for every setting.
There could be a hierarchical folder like structure. On the top there is Opera with the options fastest, comfortable etc (in the list box or in tables, the wording has to be refined). Unfolding the tree will reveal the main topics like appearance, network etc having the same options. On powerful computer with slow modem connection user can now decide to have fastest network and comfortable appearance. Unfolding the main topics gives access to subtopics (ie skins, toolbars, name completion, connections), unfolding subtopics will reveal the details. In the options of subtopics or the details user could select more specific settings, ie changing skin with Opera and Appearance set to fastest from default to something else. The options will have to be more specific in the details but can have the main group given with the name, ie skin: default (fastest) and changing a subsetting will lead to a renamed option group for the superior category (subtopic, topic, Opera), ie fastest (modified).
Of course there should be different ways to get access to the single preferences
- Labels
- Search
- Direct jump from point that is object to change via properties or customize in context menu
- With a folder structure as in the example (I’m not sure whether it would be preferable to have some items in two folders, as not every detail is one to one towards the topics)
There should be hints and clickable links to related topics inside and outside the preferences itself, ie with selection of skins the link to http://my.opera.com/community/customize/skins/
With every reasonable part (Opera/topic/subtopic/detail) there should be a function to load/save (or import/export) settings (actually adding skins belongs to load). The saved settings will be shown as option to choose again with the given name. The simplest way is to use the current way to save a new version of toolbar.ini, menu.ini etc.
Auto save and undo would be great additions which can be realised by a settings history.
Opera may make the number of some settings flexible (add and remove item), especially for toolbars. Another option for toolbars would be to have an easy possibility switch the settings on single toolbars. In the UI this could have similar effect like Rijk's Ribbonesque Opera setup Twelve but allow to change the content of a single toolbar while the others are still usable. There should be a way to add additional setups for single toolbars to have the possibility to add predefined settings without destroying own customisations (ie for web developer setup).
Preferences on web-pages or: all settings in advanced and sophisticated Opera:config
IMHO there should be local web pages for the preferences. Some advantages above of OS driven dialogs:
- More possible room, but room restricted to user defined browser-size
- Rendering web pages is the strength of Opera and this is present on every platform
- Advanced CSS, JS or even AJAX techniques give great possibilities
- Possibility to have a consistent look and feel, mainly towards Opera itself but according to the different OS pretty easy with different OS styled pages
The opera:config page could be enhanced with information about the settings and the possible values and their meaning. And soon the page will be usable for all the other settings, too. The settings to find in opera:config today will hide in an expert settings area that could be activated after a warning towards the user that wrong values could mess the whole browser. Searching a subject (selectable to search only the setting names or additional in the related information texts) will reveal all settings towards the search term – today you have to know there is a setting somewhere in preferences that is related to another setting in opera:config.
And now to something completely different.
4. Have fancy stuff for the end users
Fancy stuff is something which is not really my topic. Suppose I’d never thought about widgets. Nevertheless it’s a good idea to have something to attract attention and make people speak about Opera besides it is just the most simple to use and most powerful browser you can get.
HTML Email is another point towards this topic – already on the roadmap of Opera will it give a better impression of Opera especially for people receiving emails from Opera M2 users – especially a lot of forwarded or redirected HTML-Emails are most ugly and sometimes even unusable in the original HTML message part.
5. Conclusion
The target of the strategy is increasing market share, and Opera's market share is built by end users using the Opera browser to browse in internet. Opera has always focussed on end user. Nothing new so far. But the current Opera users have estimated 1-2% market-share (different with countries, sites and statistics used) and there is not a lot to increase inside the old crowd of Opera users. Therefore the focus has to go towards new end users.
As I wrote before in my post about targets:
And therefore it is reasonable to have the people in mind that are using IE now, without forgetting those people that love Opera now … it is thinking of what IE users want additional to IE. And thinking of how they will know they can use Opera to get what they want. And making them to overcome the obstacle to download, install and use Opera. In the best case it will be things that will help the old Opera users and attract new ones.
This end user focus items will give good reviews in the magazines but they will not have the power to attract a lot of people to try Opera. But they will probably keep those who took the hurdles (know about Opera, find, download, install and start it) will have a higher probability to stick with Opera.
And for a last word I want to say Opera already has a lot into the direction of the things I propose. That’s one of the reason Opera already is this great application.
