Thursday, February 02, 2006

The problem with tab thumbnails

Why thumbnails are not enough, and how Opera's solution is already better.

The beta releases of Internet Explorer 7 have generated a lot of buzz, and one new feature that the browser has is the "Quick Tabs" function that allows one to view the contents of all open tabs onscreen at the same time. This is also possible in the Shiira browser, and is made possible in Firefox through extensions such as foXpose. Omniweb and Firefox (through an extension) also support page thumbnails in the sidebar/panel. There has been news that Opera 9 will have thumbnails displayed when you hover over the tab.

All of these solutions are interesting, but as far as I'm concerned, Opera already has a working solution that is very similar to and is even better than the ones I just mentioned. Opera has a leg up on the competition because of its MDI (multiple document interface) and ERA (extensible rendering architecture) capabilities. Before getting too technical, let's compare full-size screenshots of what can be done in Opera compared to what you can do in Firefox using the popular foXpose extension, which people say is very similar to the IE7 Quick Tabs feature. (I don't run XP on my laptop, so I can't install IE7). (The screenshots were taken on my computer running Windows 98 SE using Opera 9 technical preview 1 and Firefox 1.5.0.1. I'm using a 19 inch LCD monitor running at 1280 x 1024).

Using Opera, here is what it looks like when I have 9 tabs open and tiled:

Opera screenshot
(click on the image to see the full-size screenshot)

Here is what it looks like when I have 9 tabs open and thumbnailed using foXpose in Firefox:
Firefox screenshot
(click on the image to see the full-size screenshot)

Which is more useful? In my opinion, I would go with the Opera solution every time. Why? Unlike the thumbnails, which are just fuzzy and unreadable zoomed out versions of the webpages, Opera actually rerenders the pages to fit smaller windows sizes. That rerendering changes the zoom somewhat, but not equally for all elements. Opera, using its "Fit-to-window-width" feature, shrinks certain elements while keeping other elements large, especially text. Unlike the thumbnails in foXpose, you can actually read the text in the tiled Opera windows.

Also, it's important to note that Opera's rendering prevents or at least drastically reduces the need for horizontal scrolling. In addition to the text being readable, the individual windows are actually active, meaning that you can scroll through them in their tiled state, click on links, refresh, go back and forth in their history, fill in text fields, and even view video without remaximizing the tiles. Notice that foXpose cannot display Flash animations, whereas in Opera, you can view multiple animations simultaneously in the different tiles. I can't demonstrate it without the benefit of video, but Opera tiles windows much faster than thumbnails are generated in Firefox, at least on my computer. Even with fewer tabs, Opera's tiles are still better looking than foXpose thumbnails:

Opera screenshot
Opera (click on the image to see the full-size screenshot)

Firefox screenshot
Firefox (click on the image to see the full-size screenshot)

The advantages of using Opera's tiled windows instead of thumbnails:

  • Tiled windows are clear and readable, as opposed to fuzzy thumbnails
  • Tiled windows are active webpages, and not just static images
  • Tiled windows are generated faster

It's true that not every webpage will look perfect when rendered in a small window, but I consider that an acceptable tradeoff, especially considering the fact that switching from "Author mode" to "User mode" fixes most usability problems that occur.

Tiles versus thumbnails, in practice

You might ask, why do these differences matter? Do they really enhance the browsing experience? It's really about how a person wants to use tabbed browsing. Fuzzy thumbnails are enough if you just want to remember what pages you have open. Usually, though, when I keep several pages open for long periods of time, I can easily remember what they are just from reading the text on the tab.

Another way to use tabbed browsing is to open many pages at once (most modern browsers allow you to open many links simultaneously). When I do this, I don't actually want to read every page I just opened. I want to look through them quickly to decide which ones to read and which ones to close. In order to quickly scan the pages to make that decision, it is very useful to be able to read the text on each page. I think it makes more sense to evaluate a page based on its text rather than just an impression of its layout.

Also, with unreadable thumbnails, how do you distinguish between two different pages from the same site that have very similar layout? In the first two screenshots above, compare the two Digg pages I have open. Using foXpose, the only text that is readable is the page title, but anyone can already see that just by reading the text on the tabs. Using tiles in Opera, I can read the actual story and decide if it's worth my further attention.

How does Opera do it?

The technologies in Opera that make this possible are MDI (multiple document interface) and ERA (extensible rendering architecture). MDI is what allows Opera to display multiple pages simultaneously in the same browser window. Most Opera users use tabs most of the time, but MDI is still a feature of Opera, allowing the possibility of tiled windows.

ERA is what makes the tiled pages look good. Opera is well-known for its excellent mobile browser, and the strength of that product is its small screen rendering (SSR) feature--which is part of Opera's Extensible Rendering Architecture. Using the same technology, Opera can make small tiled windows on the desktop that are both good looking and usuable.

Here are some resources about ERA:
Opera's rendering modes
Setting the default rendering mode

How do I set it up?

The most important thing to do is to set the rendering mode so that "Fit-to-window-width" is always activated. If you use Opera 9tp1, you can type opera:config into the address bar to access the large list of preferences. Under "User Prefs", find "Rendering mode" and change it from 0 to something else. I typically use rendering mode=4, but 3 and 5 might also work [edit (2/3/06): see the first comment below]. Click "OK" at the bottom. When you open a new window, that rendering mode will be in effect for any page or pages you open.

If you use Opera 8.51, you have to edit the opera6.ini file which is found in the "profile" folder which is a subdirectory of your Opera folder. There, look for "rendering mode" and change it to 4. Make sure you don't edit the file while Opera is in use. [Note: ERA has been a part of Opera since November 2004, and MDI has been a part of Opera from very early on, so it should be possible to do the same thing in some earlier versions of Opera]

That's all the setup you have to do! To tile your tabbed pages, just right click on any tab, select "Arrange" and then click on "Tile vertically". When you want to remaximize the pages, select the page you want to be active, and then click on "Maximize all" (instead of "Tile Vertically"). As you can see in the screenshots above, I created a "Tile" and "Maximize" button to make this easier. You can use The Opera Custom Button & Command Creator. When creating the "tile" and "maximize" buttons, you want to use the "Tile vertically" and "Maximize all" commands, respectively.

As with other things in Opera, you can also use custom keyboard (and possibly mouse) shortcuts to do the same thing.

16 comments:

  1. Rijk at Opera Software sent me the following comment:

    "Just a quick note: in Opera 9, you can make FtWW the default, by setting 'Rendering mode=-1' in opera:config. This means you don't choose a specific mode, but instead let Opera pick the right mode for the window width, just like 'View > Fit to window width' does."

    Thanks, Rijk! We'll have to try it.

    ReplyDelete
  2. This is beautiful!

    I've had 8.5 with a tile vertically mouse gesture (and a maximize all mouse gesture) but I was missing the fit to window that could automagically determine if it's needed. I can't wait to play around with this!

    ReplyDelete
  3. Another cool thing you can do: Pressing Ctrl-F5 reloads all pages. If you do that with all your pages open in front of you as tiles, you can watch all of them reload at the same time. To facilitate this, I made myself a "Reload all" button.

    ReplyDelete
  4. You fairly and legitimately set up your discussion as applying to Windows, where a multi-document interface is, for some reason, fully accepted as the norm, but MDI does not work at all on Macs (it's specifically disclaimed in Apple literature) and many of Opera for Macintosh's problems stem from misapplying a Windows concept on another operating system.

    It would be interesting for you to test Foxposé and Opera on Macintosh and tell us which you prefer in that case.

    ReplyDelete
  5. Joe, you're right, I'm talking about this from the perspective of a Windows user. I don't have a Mac (though I'd certainly like one), so I can't do the testing myself, but I'd love to see someone else's comparison.

    Also, I don't want people to think that I have some kind of grudge against foXpose. For what it does, it's a well-written extension. I just used foXpose as an example because it's a popular extension that was easy to install. I tried some of the other tab preview solutions and I didn't like them either. I am even skeptical of Opera's tab thumbnail feature that is supposed to come out. I'm not against any specific implementation; I just don't find tab thumbnails to be very useful in general (except perhaps on really large monitors with the proper resolution that would allow the thumbnails to have readable text).

    ReplyDelete
  6. For those of you who want to try the tab thumbnail features built into the just-released Opera 9.0 Technical Preview 2, go here for more info: http://my.opera.com/Lawmune/blog/show.dml/134595

    Whether or not you like the idea of tab thumbnails, be sure to check out the other great new features. (Note: being a cutting-edge technical preview, there will likely be bugs. Download and use at your own risk.)

    ReplyDelete
  7. I'm not the only one who wonders about the usefulness of tab thumbnails. Further discussion here: The view-opened-tabs-as-thumbnails trend

    ReplyDelete
  8. Joe: Have you ever used a program for the Mac... it uses an MDI.... hmm, what was that called again? was it ... oh yes! Photoshop.



    So wait you are meaning the "ONE APPLICATION, MULTIPLE CHILD WINDOWS" is something that is commonplace on the Mac? YES.


    It is not that MDI doesnt work on the Mac, its just that opera hasn't approached it in the right manner, they just need to show the desktop background behind the windows instead of a grey background, and viola, photoshop style.

    ReplyDelete
  9. Eugene TS Wong2/07/2006 11:38 PM

    Thank you so much! I could never see the value of using tiling or cascading, but now I know. The secret is to adjust the rendering width, and switch off any unnecessary toolbars.

    [I saw you on slashdot, and decided to follow the link to this jounal entry.]

    ReplyDelete
  10. Why Thumbnails are generally better than tiles.

    The method of tiling is nice - if you only have very few tabs, as can be seen in your screenshots.
    My usual tab number is 15-30, at which point the tiling becomes quite unusable:
    - The visible part of each webpage becomes unrecognizable, especially if you have several pages with a similar upper left corner (e.g., any news site...)
    - Thumbnails give an overview of the page layout, which your mind can recognize very easily. You're not supposed to be able to actually read text in a thumbnail!
    - Tiling takes *ages*. It already takes 3 seconds for only 9 tabs. Mostly due to the fact that there is this stupid wondows animation when tiling each page...
    Thumbmnails can be generated for each page as soon as a page is loaded, so therer shouldn't be any noticeable delay, if done intelligently.

    So tiling is a nice solution for a situation where you have very few tabs. But thumbnails are the way to go.

    ReplyDelete
  11. Hi Cruncher,

    If you find that tab thumbnails work better for you, then of course I'm not going to say you are wrong. Like I said in my post, it's really a matter of how you use tabbed browsing and how you intend to use either thumbnails or tiles.

    I wanted to address a few of your points, however.

    You are correct that the tiling function starts to lose its usefulness when you have a very large number of pages open. For my system, I can display 20 tiled pages comfortably, but people with smaller monitors probably can't do that. (hint: if you use a dual-monitor setup, the tiling feature works great if you extend Opera to span both screens).

    My suggestion to Opera is that the maximum number of tiled pages per screen should be a user adjustable setting. For me, I would set 20 tiles as the maximum. Any tiled pages past 20 would be viewable by scrolling down using a master scroll bar.

    When you have "several pages with a similar upper left corner", I agree that identifying the contents of the page can start to get a little difficult. This is why I think being able to scroll through any tiled page is such an advantage. With thumbnails, especially for multiple pages on the same site (a news site, for example), the general layout for each page is the same, making the contents even harder to identify (since the text is unreadable/unscrollable). You'd be better off just reading the text label on each tab.

    You mention that thumbnails are easily recognizable, and that you're not supposed to be able to read the text. I understand that you're not supposed to read text on thumbnails, but that's exactly why I don't find them as useful. You're not supposed to see color on a black and white TV, but I want to see color, which is why I have a color TV. Again, it comes down to how you want to use tabbed browsing (see my original post).

    As for loading time, I find that page tiling happens very quickly, even on my 5 year old Thinkpad. Perhaps you can turn certain animations off? The various thumbnail extensions I tried in Firefox were all slower, but maybe that'll get fixed over time (or maybe it's a hardware/OS specific thing).

    Anyhow, Opera now provides both solutions: tiles and tab thumbnails (in the latest technical preview). I appreciate that about Opera; it doesn't take a one-size-fits-all approach. Even if I never use keyboard shortcuts, for example, they're available to the users who like them.

    ReplyDelete
  12. Well actually when I read about this feature I wondered what it would look like in Opera. Thumbnailed tiles too should not be difficult for Opera to implement, everything seem to be in place even in version 8.5. This is what I did to see it in Opera - pressed 7 followed by 1 for all pages. 7 reduces the size of the page to 20% and 1 takes you to the left tab. Then I tiled the pages. Presto!! You have tiled thumbnails - of not much use though :)

    ReplyDelete
  13. Hi Lawrence ,

    I was wondering if you could post
    the button you created as i tried
    to use the Opera custom button maker but i could only get it to
    tile vertically but not maximize.

    cheers
    blinkybill

    ReplyDelete
  14. I'm not sure how to help, but in case I wasn't clear, you have to create two separate buttons--one to tile and one to maximize. Since you made a button to tile (vertically), I imagine you won't have much trouble making one to maximize (all).

    ReplyDelete
  15. I couldn't get this to convert to swf without problems, but I made a video of tiling and scrolling...

    http://files.myopera.com/Eddie_Lopez/files/opera_mdi.avi

    I use mouse gestures as the trigger and show it in the video.

    I wish I could apply "enable fit to width" to all windows that get tiled. That would be the sweetest plum

    ReplyDelete
  16. I created this button, but it doesn't maximize the opened windows, what is wrong?

    Button2, "Quick Tabs"="Tile vertically, , , , "View" | Maximize all + Show popup menu, "Internal Window List""

    ReplyDelete