User Interface
| Red Links on Webpages – Avoid them? I was catching up on Firefox 3 (which is an awesome browser by the way) today when I stumbled across a blog post about smooth image scaling in Firefox 3. The blog post actually flagged something up to me that was really interesting. The web page in question styles all of its hyperlinks in red text without underlines:
As I read through the article, I noticed that I had a certain reluctance about following any of the hyperlinks referenced in the article. I couldn’t work out why but I realised it was due to Wikipedia which uses the same styling for it’s non-existent articles:
I noticed that I purposely avoided red hyperlinks on Wikipedia because it never led to any useful information. And it was slightly strange that the same behaviour then extended to a totally different web page which I had never visited before. Of course, it’s common knowledge amongst web designers that people expect hyperlinks to be blue and visited hyperlinks to either be purple or a more saturated blue, but I’ve never heard of any expectations regarding red links. It’d be interesting to know whether any of my readers had the same feeling about the links on this page or whether it’s because I spend too much time on Wikipedia. Another interesting experience recently… one of the posters at school used red wavy underlines for all the titles. Again, it was one of those things which just annoys you and you can’t work out why. Eventually I figured it was because Microsoft Word would highlight incorrect spellings with a red wavy underline and that I’d developed some kind of “learned behaviour” in Word to correct typos and remove the red wavy underlines as soon as they appear. | |
| Google Calculator If you told me a few years ago that I’d be sending simple math calculations to a bunch of supercomputers in Mountain View, California rather than reaching for the calculator next to me on my desk, I’d probably have laughed. I’ve noticed that increasingly I’ve been using Google’s Calculator. Why? There are three reasons:
You might have found yourself doing this too. Type a number into your Firefox Google Search Box and have a look at the autocomplete entries. When I enter the number 1 into this box, I get whole pages full of maths queries. I wonder: if we’re sending such basic things such as basic maths equations to computers across the world, isn’t it just a matter of time before grid computing takes off and we send all kinds of tasks over the internet? | |
| Personas for Firefox Personas for Firefox is a really nice extension for Firefox which adds lightweight theming without having to restart your browser.
I’ve been using it several months now and it’s really nice so I really recommend having a look. There are a dozen Foxkeh themes which are pretty cute too. Personas was recently updated so the theme could be dynamic web content. People have started to play around with this feature: for example theming the browser with a live webcam from Germany. Find out how to create your own Personas. The team hope to release the final version of Personas in time for Firefox 3. | |
| ProtoFlow: Coverflow for Javascript You’ve probably all seen “coverflow” in the new iPhone and iPod Touch. It shows your album covers in a “carousel” kind of format, where you can flick between different albums.
ProtoFlow is a script which implements this on your website using Javascript. It generates the effects and interface using Prototype.js and Scriptaculous, and the image reflections using Reflection.js. The interface dragging through the different albums is really nice. It doesn’t distort/angle the albums at the side (this could possibly be achieved using Christian Effenberger’s amazing reflex.js , albeit with additional licensing restrictions). It also doesn’t seem to work in IE. I think it’s a fantastic example of what Reflection.js can do anyway (also notice the reflections of the album covers show through each another). A script to watch! | |
| University Admissions Website University admissions in the UK are handled by the University and College Admissions Service (UCAS). I’ve recently had the displeasure of the opportunity of using their website. First of all, the first screen presents you with 10 million different titles:
Titles include HRH (Her Royal Highness), Lady, Lord, Duke, Rear Admiral, Father, Colonel, Prof (would you really be applying to a university undergrad course?). Security QuestionsYou’re asked to provide a secret questions. Now I never saw the point of secret questions: “What is your favourite food?” is one of those questions which good acquaintances should know the answer to. My password is fairly secure and I’m not going to forget it, so secret questions simply increase the attack surface of my account. UCAS doesn’t ask for just one secret question, but four. Out of the provided questions, there were probably one or two questions which nobody else would have known the answer to. Four of them? No way. The worse thing is, a random secret question comes up when you try to recover a password. So all four secret questions need to be secure. That’s not gonna happen. UCAS CardThe UCAS website allows you to import your registration details from your UCAS card. This is kinda like a student card which offers you discounts in shops and things (in exchange for loads of junk mail). During the registration process, you can enter any UCAS card number and it’ll fill in the address of the owner of that card. The thing is, your UCAS card number is displayed on your card. So anyone can type in your UCAS card number on the registration form and find out your address. That’s a security issue. I don’t normally rant about these kind of things but seeing as everybody who is applying to university in the UK needs to use this website, things should really be changed. | |
| Microsoft Licenses Office 2007 Interface Office UI designer Jensen Harris reports on his blog that Microsoft has decided to license the Microsoft Office 2007 user interface to other developers under a royalty free license. This includes the Ribbon, galleries and mini toolbars. Developers will have to get a license from Microsoft and it’ll come with several restrictions – for example it must change it’s layout when the window is resized, must include a quick access toolbar and the ribbon should disappear if the window gets below 300×250.
At first glance it seems like Microsoft is simply licensing this out of the goodness of their heart. But it does make a lot of sense – people have already tried to imitate the Ribbon in their own products, without a license from Microsoft. Microsoft probably knew people were going to do it anyway so this way gives Microsoft a bit more control over how the UI is used in other programs. There is a 120 page booklet of guidelines which developers must adhere to. Says Jensen Harris, "There’s tremendous value in making sure that we all use these models in a consistent way, because it helps to ensure that people have predictable user experiences moving between Office-style user interfaces." To get a feel for what the guidelines look like, see this preview which shows the guidelines for ribbon resizing. You can use the Office 2007 UI on other operating systems but you can’t obtain a license if your product directly competes with Office 2007. So is Microsoft’s license going to hinder or encourage the implementation of ribbon-like interfaces in other programs? Could we soon be seeing Firefox with a ribbon-like interface? Ribbon "Widgets" for your website? A whole GUI based on Ribbon? See the licensing web page or the press release for more information. Via Inside Microsoft. | |
| Graphical Sparkline Microsummaries A while ago, I wrote about Sparklines and how I implemented some sparklines into Geneone. To recap, this is how Wikipedia describes Sparklines:
Theres an interesting proposal at the Mozilla Wiki which will combine sparklines with microsummaries. Microsummaries or "Live Titles" allow you to show a succint "summary" of the bookmarked page in your bookmarks menu and toolbar. Together, the two go really well. This is what graphical microsummaries could look like:
Although it’s just a mockup, the screenshot looks absolutely beautiful and graphical microsummaries really could be a lot more useful than text-based ones. The wiki page goes through some of the background to the idea and has some images of sparklines which give an indication of what graphic formats designers may choose to use. This feature gets a +1 from me. Addendum: Unicode already has special "block characters". e.g. ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏▐ ░ ▒ ▓ ▔▕▖▗▘▙ ▚ ▛ ▜▝ ▞ ▟ Sometimes people use these characters on Digg like ▀█▀ █▬█ █ ▄█▀ or MSN Messenger for special effect. Can we emulate graphical microsummaries using unicode and text? | |
| Chromatabs for Firefox There is a really interesting extension called Chromatabs at Mozilla Labs today. Mozilla Labs is Mozilla’s ongoing project to develop some innovative and new techniques of presenting information to users and to investigate new technologies.
Chromatabs is an extension developed by Justin Dolske which aims to make tabs a lot easier to locate by colourizing tabs to provide a strong visual indication. To demonstrate the concept, there is an example on Mozilla Labs which asks you to locate all letter Ks and all red letters. Locating red letters is a lot easier. The blog entry also discusses existing solutions and problems. At the moment, tabs in Firefox all essentially look the same, so finding that page when you have 20 tabs open requires a deep visual inspection of all your tabs. Favicons can help, but not all sites have them. Mozilla Labs also points to Colourful Tabs which attempts to implement a similar concept:
Chromatabs is different. Rather than giving each site a different colour each time, it’ll take a hash of the sites domain. This means every time you visit a site, it’s tab will be the same time. The idea is that as we visit these sites again and again over time, we’ll develop a strong connection between the colour and the site. At the moment, it’s still a proof of concept extension. One of the concepts discussed in the further work section:
I do see several problems from Chromatab’s current implementation. Probably about half the sites I visit I’ve never actually been on before, or don’t visit very frequently. I won’t have any mental relationship between that site and the colour of the tab. Various sites can also end up with the same colours e.g. my blog and Mozilla. If you want to try it out, download the extension from Firefox Add-Ons. This extension is definitely one to watch. If you’re interested in finding out about how the extension was developed, check out this blog entry. | |
| Ease of use goes wrong An interesting post over at Creating Passionate Users about when ease-of-use goes wrong. I really like the infographic at the top of the article and it gets across the point really well – sometimes people are looking for a dog but instead end up with a toy dog – more user-friendly and does it’s job well, but not what we wanted. The article describes how user interface designers do need to think about end of use and usability but at the same time shouldn’t cripple their software or dumb it down. A program could be really powerful but too hard to use such that no one can find what they want to do. On the other end of the spectrum, it could be dead easy to use but also feature-less; once again the user can’t find what they’re looking for. The whole "ease of use" thing has spread through the open source community recently after the huge success of Firefox. Firefox, for me, hits the nail on the head – it’s both powerful and easy to use. It doesn’t contain the esoteric features that only a few geeks are going to ever use. It contains enough features such that one can use Firefox without extensions and get their job done. I’ll admit to jumping on the whole bandwagon – I’ve been a big fan of making open source software as easy to use as possible. I’ve made several posts critiquing the user interface of phpBB 3 and how it is overly-complicated and esoteric: You’ve then got Vanilla which is on the other side of the bulletin board spectrum – it’s so simple and uncluttered. And the chances are that it’s got enough features for many people to run a forum happily. But at the same time they make the mistake of asking people to install extensions during the installation process. This shouldn’t be necessary. In the world of Linux, I’ve always considered KDE applications to be too complex and many GNOME applications to be too simple. Creating Passionate Users suggests a few ways of how we can make sure the user interface is targeted at the right audience:
It’s a really interesting read and very well explained. The following quote summed it up well for me:
| |
| Web 2.0 Animated Loading Icons I’m not Mr. Techcrunch and I don’t spend my time checking out every cool new Web 2.0 site. But I’ve been on my fair share of them to know what this icon means:
To me, that icon means the browser is busy doing something. Today, I decided I’d give Google Analytics a go. I added the HTML to my site, returned to the Analytics page and clicked on the link to check the status of the site. Then I sat there stone-faced for several minutes waiting for something to happen. Tick. Tock. Tick. Tock.
Why? This icon is used by everyone else to show that some AJAXy goodness is being done behind the scenes. The message is also not clear and makes it sound like data is being generated on the server and being delivered to the browser. The loading indicator is the wrong icon for the job and the message only supports the expectation that something AJAXy is supposed to happen. I think this is a great example of confusing non-standard use of icons and misleading the user into thinking something is going to happen. |
