The Shape Of Firefox 3.0

Alex Faaborg has an awesome post on UI changes for Firefox 3.0. It’s a little lengthy, and most pics are wireframes but it’s a rewarding read for anyone in the browser space, or has an interest in user interface.

Overall I like most of the changes. I’ve been ranting about a need for a better bookmarking interface since 2005. Not sure if I was ahead of my time, or just impatient (likely the ladder), but it’s finally becoming a reality which I’m thrilled about. I’ve got some ideas on where it could go from here to make it even better, but that’s another post I hope to get to sometime.

One change that caught my eye is this:

-The lock is being removed from primary UI, and Firefox will now use a metaphor based on identity, rather than security, which will appear on the site button if an SSL or EV certificate is available. The super short explanation for this change is that the user might have an encrypted connection to criminals, so telling them that they are safe is a false cue. For an in-depth discussion of why we are moving away from the metaphor of a lock, watch Johnathan Nightingale’s Mozilla24 presentation Beyond the Padlock.

I’m not sure if this is really the best solution. I’d personally like to see the lock stay in the UI, but it’s meaning redefined. For a decade or more, the public has been told that the best way to tell if your information is safe is to look for the lock. I’d venture 99% of the general population doesn’t really know it symbolizes the use of SSL. They just know that it means your information is “safe”. My thinking is that it would be the most graceful transition to map that to the new identity system. Essentially the information it reveals would be the new identity information, but it provides backwards compatibility with previous versions, and other browsers. One less learning curve. Still in regards to safety, look for the lock.

Regarding the iconic form:
Iconic Form

Image from Alex Faaborg The Shape of Things.

I could make a rather infantile joke, but I’ll leave that as an exercise for the reader.

Overall it’s some great progress. I think these changes allow for a much more functional user interface with added features and less UI. The native appearance will also be excellent for Mac and Linux users who have longed for a UI that looked “right” on their systems.

Mac OS X 10.5 Leopard

I got my copy of Mac OS X 10.5 earlier this week. Bought it from J&R (via Amazon) since it was $99 + shipping, less than Amazon itself was selling it for. For some reason both of them are able to undercut Apple (even with a corporate discount) which seemed odd. Here’s my rundown of the new OS during the first 24 hours.

Continue reading

Identity Crisis?

Some real quick thoughts on UI this evening. This isn’t a very formal post but an attempt to get some thoughts out there.

So there’s talk of a new theme for Firefox on Mac OS X. According to some, it’s a clone of Safari. One must remember these are just early prototypes, not final UI by any stretch of the imagination.

I’m going to agree it’s got some similarities, but I don’t think there’s much choice if Firefox is to look like a native Mac OS X application. Originally Mac OS X preferred the “pinstripe” interface design. This is essentially what the current Mac OS X theme for Firefox is going for. I recall the pinstripe theme for Firefox even being considered a rip-off of other Mac OS X applications at the time. In more recent releases Apple has moved away from pinstripe and towards the “Brushed Metal ” interface. Apple in 10.5 is said to be moving away from Brushed Metal towards a “Unified” interface to address some perceived inconsistencies in the previous two UI schemes. There’s not to much on the web about Unified since 10.5 screenshots are forbidden under NDA, but you can catch a small glimpse via Apple’s Mac OS X pages for things like Mail and Finder. I’d consider it an incremental evolution from brushed metal, based on what I’ve seen thus far.

The application everyone seems to watch for cues to Apple UI standards seems to be iTunes/Quicktime. Which if you notice, even Safari resembles.

Consistency can be regarded as “boring”, but it does have an advantage. It’s becomes familiar quickly, and has less of a learning curve. It also makes applications seem more intuitive since UI elements are well understood. Apple wants this to encourage people to make the jump. Now more than ever (iPod effect).

That leaves the question: How do you blend in with the OS, while remaining unique? Especially one that’s looking to make things as simple as possible for the user by taking consistency to new levels. I personally think it’s all about making the easiest to use product out there, with the best features (not an easy combo). I don’t think most users are aren’t attracted to an “unique UI”. I think they are attracted to a clean, easy to use UI on an already great product. That’s not to say one shouldn’t be unique, or shouldn’t do a better job than others.

Perhaps it would be interesting to start a “user generated” brainstorm (yea, I threw in a “web 2.0 term”) similar to that of Gimp UI Redesign effort. Let users mock up what they think it should look like. If anyone wants to do so, feel free to do so (you can use free image hosting if needed) and leave a comment pointing to them. If someone wants to do so, I’ll gladly make a follow up post and put it on Planet Mozilla to get more eyes.

Edit [9/28/2007 @ 9:28PM EST]: Official wiki page for posting your mockups.

Google Reader Update

Google ReaderI don’t see any reference on their blog, but it looks like the Google Reader team did an update to allow more than “100+” to appear. In my opinion this was the worst UI mistake in the product. This little change means quite a bit. Other than that, I can’t see any other changes. Polish is always a good thing.

Update [9/6/2007 @ 5:15 AM EST]: Search was added too. I caught them in the middle of a big update.

FishEyeTabs

FishEyeTabs is an interesting way to make the situation of having many tabs open more usable. It’s not without it’s flaws (gets rid of the red “X” for example). I wonder if this would be beneficial or just annoying to users. I think personally the effect would be better on a longer delay so that it wasn’t so instant. You could just mouseover and see the title via a tooltip, but that’s not always intuitive especially for a casual user.

It’s always great to see innovative extensions like this.

[Via Lifehacker]

Theme Review

I was going to initially write this as a comment on Asa’s Blog, but decided to make a post out of it so can use some screenshots with ease. These are mainly opinions having tested the latest (20060911) on Windows XP, with a custom Windows theme. There may be bugs already filed on some of these, feel free to CC me. Feel free to file bugs against those which have none. Feel free to leave a comment on if you agree or disagree.

Some creative freedom was taken for the sake of me just not wanting to be 100% serious on this post.

First of all let me say it’s much better than it was previously. The previous revision looked pretty awkward, this is much smoother. So it’s clearly come a long way.

I’ve got the blues

BluesI’m really not fond of the blue folders. They have a Aqua-like feel (but not quite), and it just doesn’t seem right for XP. Vista seems to be sticking with the yellow folder icon to symbolize a directory. Mac OS X seems to stick with the lighter blue so far for Leopard. So what influenced the dark blue? It just doesn’t seem to feel right.

Edit: beltzner says this will change.

You crossed the line

The is just a small glitch, but looks like the menu’s highlight extends too high, in comparison to Windows Explorer. That should be fixed.
Menu BadMenu Good

Gradient Mouseovers

Looking around Windows XP, and Windows Vista RC1 Screenshots (I haven’t installed Vista RC1 as of yet). I don’t see much reflecting this gradient mouseover effect that Windows XP did with Windows Explorer. It seems the trend for Windows goes two ways (in the applications I looked at):

  • Dark thin border
  • Brighten icon

Gradient Mouseover

Is this really the right effect for Windows XP and Vista?

Along with this, there is a giant difference between when the mouse is/isn’t over an icon on the toolbar, but the Go button, and the Search icon in the search box don’t have the same contrast. It’s actually somewhat hard to tell, especially compared to how obvious it is for the back, forward, reload, stop and home buttons.

Ooh, shiny!

A friend in High School was admittedly attracted to shiny objects. He even covered a textbook in aluminum foil (presumably perfect for burning ants and/or household pets). But is the Web 2.0 effect on the icons a little overdone? Mouseover looks fine, but otherwise it looks like the effect was a little abused, causing the top left of the home button to look a little washed out. Personally I think it should be more faded than looking like Uncle Jesse‘s hair. But maybe that’s just me. The blue folders mentioned above have this same problem.

Good Sites Bad Design

This article tries to explain why some websites with really ugly designs do so well regarding usage. I think it dances around the reality of the situation. These sites are ugly because they weren’t professionally designed. They were implemented to be functional and to get into the marketplace (budget/time/resource limitations). The reason they are successful is because they were either: innovative, viral (word of mouth), or just plain useful.

Design doesn’t make or break a website, the ability to expose usability and functionality of your product in a way the user can grasp with minimal effort is what ultimately is important.

The sites mentioned (Craigslist, MySpace, and Google) all have rather humble beginnings. None were started by the big companies. They were created people with an idea, not a design.

I guess it’s all about how you view things. You can either be vein, or be functional. In my opinion the gifted are the ones who are rather balanced between the two.

Confusing Cross Browser UI Design

Most have heard by now that Internet Explorer is adopting the Firefox RSS icon to standardize and help users who hate having to remember what equivalent icons are. Of course this is great for users. Though I wish they were a bit more consistent with their practices. UI design cross browsers is important simply for security purposes (as I will demonstrate). IE has apparently made some great strides in combating Phishing. What I disagree with, is how they implemented the UI. I think it’s confusing, and could easily be fixed, should they decide to do so.

Their scheme essentially works by coloring the URL bar based on how suspicious the website is. Known scammers get red, suspected get yellow, and a potential good site would be green. This is obviously modeled after a traffic light.

What I dislike is how that can be confusing to the end user. Right now, the colored URL bar technique is used by Firefox and Opera to distinguish a secure website (since it’s more obvious than the little lock). Take a look at the little demo I have here:

Good Site Opera 9

Opera 7

Good Site Firefox 1.5

Firefox 1.5

Bad Site Internet Explorer 7

Internet Explorer 7

Screenshot from IE Blog.

For an end user, who doesn’t follow browser changes, and perhaps first encounters IE 7 at work, or in a public terminal. Seeing the yellow bar is familiar. We know that as being safe. I think many wouldn’t even notice the “Suspicious Website” text on the right side. The shield even looks a bit like the Lock icon in Firefox. Very confusing.

My suggestion is to use another color, in particular, one that I call “orange”. I release the color “orange” under a Public Domain License. Anyone may use it, however they may wish, no need to credit me ;-) (though I’d appreciate it).

Bad Site Internet Explorer 7 + My Solution

Internet Explorer 7

This would distinguish the site as a possible fraudulent website, but still avoid using Yellow, which many users now view as “secure” aka “safe”. This solution solves the problem of conflicting UI design between browsers.

Intelligent Bookmarking [Draft]

I consider this a draft at this time, and will likely publish a more finalized version at a later date. Please read with that in mind.

Bookmarks suck. There I said it [5 seconds for public outrage]. I rarely use them. Instead I use the auto-complete functionality of the URL bar, and I know I’m not the only one. I decided to take a little time and discuss why bookmarks suck, pinpoint the problem, and suggest a solution. Why? Because bookmarks shouldn’t suck. They should be useful.

Problem

The problem can be summed up to basically three points which cause many people (in particular people who spend lots of time in a web browser) to not use bookmarks. I will attempt to discuss them as briefly as I can:

  1. Bookmark lists are overwhelming – people like me who spend a bit of time on the net quickly accumulate a list of hundreds of bookmarks (if not more). The lists are so long they become meaningless. Granted it’s almost impossible to remember some of those giant URLs. It’s just as hard to find what i really want in that list. Then factor in that the title’s aren’t exactly great (since most sites prefix their page titles with the site name), and I don’t take the time to make them any better on my own. The list becomes unmanageable. The alternative is to be anal and nest them in folders, clean up the titles, etc. But that’s time consuming. Assume that takes a mere 15 seconds per bookmark. With only 300 bookmarks that’s 4,500 seconds, or 75 minutes (over one hour!). That’s not something I’m willing to spend time on.
  2. Auto-complete is very good – typically my browsing habits consist of under 75 websites. I visit them somewhat regular. So they are already in auto-complete. by simply typing in “we” I already get Asa’s Blog. “pl” gets me to Planet Mozilla. “sl” gets me to slashdot “fa” gets me to fark.com, “cdw” gets me directly to the order status page of my hard drive due for delivery. “fed” gets me right to the package I’ve been tracking. Why do I need bookmarks? Just a few keystrokes. No scanning menu’s for what I need.
  3. The Google Factor – Google has played a key role in this. I saw a 300 GB Seagate drive on sale the other day at circuit city (which I did purchase BTW). How did I bookmark it? I didn’t. I just remembered circuit city had it. Then googled for it. Why? It’s quick and easy. Again, no scanning through long lists.

All three of the above share a few common characteristics. First of all, they are attempts to avoid an unmanageable list. You can call it “work avoidance”, “laziness”, or what ever you wish, but that’s what it is. The second is that these alternate methods serve two distinct methods of how most people remember things:

  1. Repetition – most people remember things they see over and over again. How many here know a phone number off the top of their heads if they wanted to purchase a mattress? 1-800-MATTRES (leave off the last ‘s’ for savings). Yea, that’s right! How many here know Jenny’s Phone Number? 867-5309 (that’s 7 digits, most people don’t do good with more than 4 or 5 chunks). How many people can name at least 4 products on the McDonald’s menu, and have McDonald’s less than 4X a year (hint: just about everyone, regardless of if you eat there). What do these share in common? Well a few are catchy, or have a jingle, but the common theme is repetition. McDonald’s pounds their product line into the human consciousness. I’d bet more people know the McDonald’s menu than know what’s going to be discussed on the Senate floor after summer recess. Why? Because McDonald’s repeats their product line over and over in commercials, billboards, newspapers, etc. You see it dozens of times a day. To find out what’s going on in government, you need to find out yourself (Check CSPAN). Likely not as often. Repetition helps memory. Kids do it to study for spelling tests.”M-I-S-S-I-S-S-I-P-P-I” Mississippi. Ah childhood memories horrors..
  2. Accessibility – scrolling down a menu is a drag. It’s good for short menu’s but quickly becomes cumbersome. More than 20 or so items and a menu starts to become meaningless. Keyboards can quickly sort data very well. A menu and a mouse don’t sort very well. That’s all there is to it.

Solution

Is there a better way? I propose that there most certainly is. At least 1 better way, and likely many, some even better than what I’m going to suggest. My methodology involves a few specific ideas:

  1. Metadata – We’ll use the dictionary definition here:

    n : data about data; “a library catalog is metadata because it describes publications”
    Source: WordNet ® 2.0, © 2003 Princeton University

    The only difference here is our library catalog is our bookmarks, and publications are websites. Not really a difference eh? No, that’s not coincidence, that’s bonified logic. We’ll be working on this concept in a few moments.

  2. Machine Learning – Again we’ll use an established definition, this time from Wikipedia

    Machine learning is an area of artificial intelligence concerned with the development of techniques which allow computers to “learn”. More specifically, machine learning is a method for creating computer programs by the analysis of data sets. Machine learning overlaps heavily with statistics, since both fields study the analysis of data, but unlike statistics, machine learning is concerned with the algorithmic complexity of computational implementations.
    Source: wikipedia.com

    Again pretty simple right?

  3. Usage Patterns – This goes with that whole repetition thing.

So what’s the fix?

Bookmark Metadata

That’s right, bookmark metadata. More than just a title. Most websites use meta tags on them. The two most common are keywords, and description. An intelligent bookmarking system would look at the page being bookmarked, and extract that information if known, in particular keywords. Take for example this link to Crucial.com’s Memory options for a Mac Mini

<title>Apple Mac mini (G4 – 1.42GHz) upgrades from Crucial.com</title>
<meta name="keywords" content="crucial memory, memory, computer memory, USB flash drive, Secure Digital, Memory Stick, SmartMedia, card reader, USB, USB upgrades, memory upgrade, ddr memory, ram memory, pc memory, ram, memory upgrades, ddr ram, pc2100, buy ram, ddr sdram, belarc advisor, ram upgrade, micron memory, memory ram, buy memory, cheap ram, compact flash, cheap memory, memory chips, pc100, sdram, laptop memory, computer ram, pc2100 ddr, memory configurator, micron, ddr pc2100, ram prices, pc133 memory, ram upgrades, sdram pc100, computer memory upgrade, compactflash, memory selector, Radeon 9800, ATi Radeon, radeon 9700 pro, memory module, how much ram, micron ram, compact flash cards, pc2100 ddr sdram, sdram memory, computer memory upgrades pc100 ram, radeon, flash card, pc133, video cards, pc2100 memory, radeon 9700">
</meta><meta name="description" content="Purchase Mac mini (G4 – 1.42GHz) upgrades from Crucial to get factory-direct pricing and outstanding service and support. For a limited time, FREE shipping on qualified orders.">
</meta>

See that yummy data? We can use that. How? Something along the lines of bayesian learning, we’ll discuss a bit more later on.

Intelligent Filtering

I should be able to go the URL bar and simply enter mac and see all Mac related websites (Apple.com, and of course that crucial memory upgrade I noted above). memory should bring up crucial.com. Entering cruc should bring up crucial as well. To separate history from bookmarks, the browser should have an icon to the right of the URL (similar to Safari’s RSS icon) that indicates if it’s history, or a bookmark. Based on my usage patterns, it should give weight to the appropriate item. For example if I enter mac and apple.com, and that crucial memory upgrade page appears second, and I repeatedly revisit crucial, crucial should come up first. Why? Because that’s easier.

[ mac|                                                   ]
 |apple.com                               (Bookmark)  |
 |crucial.com/foo/bar                     (Bookmark)  |
 |macworld.com                            (History)   |
 | ...                                                |
 +----------------------------------------------------+

No giant menu’s to find where that crucial memory page is, I could type in mac or memory or something to that effect. The above illustrates how I no longer need to navigate that menu. It’s integrated right into auto-complete, making for a real easy experience.

Intelligent Views

Camino’s Bookmarks view is rather good. In fact, it’s really good. I should be able to create a folder called mac and put associated bookmarks in there. Then when I use that keyword, I get all the bookmarks in that folder, in a higher priority than the machine learned bookmarks. Ideally when a new folder is created, it should attempt to auto-file my existing bookmarks for me. The end result could go in the current bookmarks menu. A computer generated (human edited) list of websites sorted and organized. Useful and relevant.

Machine Logic

Machine logic for this new functionality can be simple, or extremely complex. At it’s simplest form, it’s using the title, meta-description, and meta-keyword data, stripping it of punctuation (comma’s and such), delimited it by spaces, and creating a searchable index. In a more complex form, it’s figuring out how to group them based on patterns, probability, and user input. It could even go as far as using a dictionary file to get like terms, so computer also checks for PC. It can go as far as natural language, or suggest corrections (similar to Google’s correction functionality).

What advantage does this bring?

It improves the end-user experience of course. The end result is really pretty subtle, but good. First the days of scanning through a list of scrolling bookmarks no longer exists. That’s wonderful. The days of simply typing what you want and let your browser find it will be here. Your usage patterns will provide the browser with the information it needs to create a relevant, insightful, and useful auto-complete list.

Implementation

I haven’t implemented this, nor do I have plans to do so at this time. I think the plan could use some refinement, and the project would be better handled by someone with more experience (and time) than I typically have. I put this idea out there in hopes someone else will finally admit bookmarks suck, and help do something about it. Because lets face it, bookmarks suck. I would love to see it implemented, and ideally expanded upon so that it’s results are more relevant. Lists are bad, very bad. Simple queries are good. I know what I want. Why do I have to search an entire list? That’s the bottom line. Bookmarks were a good solution for their time. But not anymore. We can do better. Oh yea, Bookmarks suck, did I mention that?