MMMeeja

Blern is pretty cool, it’s a web-page recommendation tool that attempts to learn from your RSS subscriptions, social bookmarks etc. to provide you with articles that are likely to interest you. I’ve only just signed up and so far it thinks I have an unhealthy interest in subversion, but that’s OK because, compared to most people, I do.

So I got my email of my daily recommendations from Blern with four out of ten posts that covered version control systems (not a problem, I realise I still have to train it) and one post caught my eye. Jim Priest has posted a great article on SVN that I clicked through, read it and wanted to bookmark it for later in del.icio.us.

This was Blern’s first triumph! An article they had recommended that I wanted to read, then wanted to keep and share. Go Blern!

But Wait, It’s Wrapped In A Frame!

I don’t want to bookmark Blern’s recommendation, I want the recommended page itself.

This is the kind of trick that was used to build a “sticky site” in the 1990s and resulted in the kind of bloated portal pages that we still see at Yahoo today. Luckily, as a Mozilla Firefox user, I could right-click and select This Frame -> View Only This Frame to get to the page I wanted. Still very annoying, though.

There Are Lots Of Fixes...

The reason for the frame is obvious - Blern want to know what I like and dislike. So they put some buttons at the top of every page with voting options. I want to give them this information, otherwise they cannot improve their recommendations for me.

Using an IFRAME is not the way to do it. The typical Blern user must be web-savvy since they need OPML files and/or del.icio.us/FriendFeed data to get any hope of having a good guess at recommendations in the first few weeks. This is a demographic that is willing to experiment, it’s willing to give away personal data - it’s GOLD!.

Two obvious alternatives to the IFRAME are a Firefox plugin and cross-browser bookmarklets. Either of these could also be clicked to let Blern know when I like something that wasn’t recommended by them. More information makes for better predictions.

Blern knows which links I have clicked through a link on their email (or my Blern page) and from that it could infer that I like the title and snippet. If I do not click the like or dislike buttons, it could ask me next time - but only for a few items, please! This kind of feedback shows concern for the user.

Blern Learns

The tagline for the website is “Blern learns”, I hope they do. I want them to succeed. They seem to be aiming for the right results without being evil, and that’s exactly what the semantic web needs right now - results for the user.

This article is about a phenomenon that has taken me by surprise - auto-responders for blogs.

I first encountered these when commenting on a couple of blog posts and when the first email arrived I was suckered in - I thought the blogger had noticed that I made an inciteful comment and had sent me a personalised email to encourage me to participate more.

When the second comment elicited a similarly boilerplate email welcoming me to their blog, I got a bit sceptical.

Please don’t think that this post is an attack on either StayGoLinks or Mr Javo, it is merely a discussion of the technology used.

The Shock Of The New

The first email piqued my curiosity - I almost replied - but as always with unsolicited emails, I decided to wait. Maybe I shouldn’t have, have you replied to one of these emails? Leave a comment and let me know.

The second email also ellicited a sharp spike of excitement but it reminded me of the (now deleted) first email. The text was different, but the meaning was the same - “Thanks for your comment, please subscribe.”

I did a little research, not much, but some and found that for WordPress, there is a plugin that automates this sort of thing.

It me left feeeling rather disappointed, and not a little naive. I was very close to being suckered - feeling suckered by the individual attention.

It’s Not Mainstream Yet...

Thankfully.

If this plugin should become mainstream, it’s emails will be marked as spam very quickly and that can only hurt bloggers.

That’s not to say that I don’t like being welcomed to your blog, just make the welcome personal. Bloggers are well aware of generic spam comments saying things like “That is a very inciteful post, I wrote about this before on my blog v14gr4.com”.

Keep it personal and build a relationship with the 2% of your readers that bother to comment.

We all know that you should use visitor analysis tools like Google Analytics to investigate how visitors use your website, but there are a couple of more fundamental issues that need monitoring too.

This post explores those issues and shows two free services that provide simple, comprehensive solutions.

Is My Website Available?

Your web host may advertise 99.9% uptime but do you know whether they are actually delivering?

If you run an international business you need to check that your site can be read from all the major continents, even if you don’t, you need third-party verification if your ISP provides both hosting and your internet connection.

Mon.itor.us

This great free service will monitor a number of URLs and send you emails if one of them becomes unavailable for a period. They also send a monthly report on the availability of your sites.

Using this method shows that MMMeeja’s various sites get about 99.7% uptime - not great at first glance. However, since the top ten hosting providers provide between 99.5 to 99.8% uptime according to Mon.itor.us statistics, I don’t think that is bad at all.

The emailed reports are great, but even better value is provided by the Mon.itor.us dashboard. It provides useful graphs and statistics about the pages you monitor. There is a paid service too, providing robust, enterprise-level monitoring for mission critical websites.

Inursite

Another service that is incredibly useful, especially for fast changing sites like blogs, is Inursite.

Don’t be fooled by the unstyled web page, this service is delivered via RSS into your feed reader. You get an update each day with as simple “PASS” or “FAIL” for each of URL you monitor. It is then up to you to go to the W3C’s HTML Validator to find out why a particular site has failed.

I am sure that Inursite will be monetised and turned into a viable business before long, but for now it provides an excellent early warning of any invalid markup that creeps into your pages.

Google Alerts

Finally, Google Alerts provides a great way to keep up with what others are saying about your site or brand.

This is one of the great unsung tools from Google but I consider it to be vital. By setting up alerts for your site URL and name, you get daily email listing any newly indexed pages that refer to your site. Simple, but so useful.

Digg is pretty cool, and I’ve been a subscriber to their RSS feed for a long time. The feed always had one problem that I was prepared to put up with, but recently they have changed it to make me seek an alternative.

Every entry in Digg’s RSS feed used to point to their own page, making you click another link to get to the page/story they were promoting. I put up with this (just) becuase there were a handful of benefits:

• The Digg page has some useful comments
• If the dugg site went down, the comments would usually point to a mirror
• Digg showed me an advert (or nine, very slowly) which paid their bills

Then the change happended.

The straw that broke the camel’s back.

They made the Digg story page open a new bowser window. 100% of FAIL! Nobody messes with my browser. Digg, You are out!

An Alternative - Feedit

Luckily, there’s another service that is ready to provide Digg’s content without making readers pay through their blood pressure - Feedit.com provide a handy alternative to Digg’s RSS feed that takes you directly to the site being promoted. I am much happier and the number of clicks required to get where I want has been halved.

Of course, some of the benefits of the original feed have been lost - immediate access to comments etc. but the time saved across a hundred or more items per day is significant. Feedit’s feed includes links to the Digg page, comments and submitter so the information is readily available without much effort anyway.

Conclusion

Seemingly small inconveniences can annoy your readers and it’s easy for them to find an alternative. Designers and bloggers should always strive to improve the user experience and doing the opposite for the sake of a potential improvement in revenue (I assume that was Digg’s motivation) is always wrong.

This is the second post of my “nice touches” series of natty little pieces of web application design that really impressed me.

Colour Lovers Pattern Editor

A cool article by Ann at SEO Smarty ended with a couple of links to sweet tools. One of which is the Colour Lovers Pattern Tool.

This tool is easy to use and built to a very high standard, as I’ve come to expect from Colour Lovers. It uses loads of AJAX and the loading indicator caught my eye - it is a beating heart!

Annoyingly, the site is too quick for me to get a screen grab on my ancient ibook, so you will have to see it for yourselves.

Many other sites that use AJAX (including this one) have a spinning indicator like the Firefox page loading icon, or an oscillating bar which is quite techie and clinical. The use of a beating heart is genius for several reasons:

• It fits right in with the Colour Lovers branding - they already use hearts for their favicon.
• Heartbeats are often found in computer hardware, telling you that a headless server is working or a router is configured OK.
• Even if you’re not a techie, you know that the beating heart means that something is “alive” and working.
• It made me smile during a busy day.

So there we have, the tiniest of design touches but pure gold!

This is the first in a series of (hopefully many) entries detailing design decisions that have really impressed me. It is a complement to the annoyances series, and it will be interesting to see whether I find more nice touches or more annoyances.

Knowing my personality, there’ll probably be more annoyances.

Facebook Status Entry

There are loads of well thought out user interface items, but their status update window is a great example of a change that is not intrusive.

Many months ago, Facebook switched from forcing everyone to use “is” at the start of their status texts, to allowing anything. This was a welcome change for many people, but many others were used to just clicking on the edit link and typing.

There was a danger that people would forget that “is” was no longer mandatory and their statuses would make little sense or appear neanderthal, like:
Andy disappointed in United’s poor performance

The solution was pretty clever and one that I think many designers would not have thought of - if the previous status began with “is”, then all words except “is” would be automatically selected, otherwise the entire status would be selected.

This is great, for many reasons:

1. It gives people time to adjust to the change.
2. It visually emphasises the new functionality.
3. The editing process is just the same as before - click and type.

The whole Facebook site is awash with great usability features like this, although some features seem deliberately hidden (preventing application spam, for instance) so I’m sure they will be appearing in this series later.

Welcome to the first of a new series covering the little annoying features that crop up in web pages and applications. No doubt this will be a long running series, but it will be complemented by a series of “nice touch” entries covering those moments when I’ve been pleasantly surprised.

With this inaugural entry, I’m striking fearlessly at the heart of The Man...

Google Reader

Google Reader is a great tool. It’s my RSS reader of choice, but recently they added a feature that I instantly hated.

I subscribe to a great many feeds and typically get about 700 new items every day. A great many of these (probably 70%) are duplicates obviously irrelevant to me so I skip over them, get to the bottom of the unread items and hit “Mark all as read”.

There are loads of other ways to use the tool but this is the one that works for me. It saves me a ton of time and saves me from information overload. Scan, click, scan, click, read, comment, scan, click, read, done!

Then about a fortnight ago, this dialog popped up for the first time. I went to mark all as read and switch tabs but the dialog got in the way. I clicked yes and then went to the settings to try and turn it off - no joy there.

The next couple of times I used Google Reader, it didn’t appear. “Great,” I thought “it must have been an experimental feature that’s been ditched”.

Then it was back again. Then it was gone.

From my experiments, it seems that the warning is shown when you mark more than 50 items as read. Why 50? Who knows.

I cannot find any setting that will change the threshold, or turn off the warning permanently.

Inconsistency Is The Usability Killer

It is the inconsistency that makes the dialog annoying. I have no idea how many unread items I’ll be marking when I click the button. If there were few enough to count, the dialog would not appear!

It's hard to overestimate just how much consistency helps people to learn and use a wide variety of programs - Joel Spolsky

In web pages, consistency is key for your readers, just as it is vital in application design.

The use of a javascript alert is annoying too - it takes over the browser and prevents me from switching tabs.

A Better Solution?

I can see why the engineers have added this feature, but it’s just not right. A couple of changes could make it work for me:

1. Switch from a javascript alert to a GWT dialog box, then I can still use my other tabs.
2. Allow me to set the threshold. Fifty items is too few for me, it’s probably way too many for others. Let me choose.

I bet you have loads of suggestions for this series on annoyances, leave a comment and I might agree with you.

I read this post on the Google Blog today and my first thought was “Wow, cool”, my second thought was “I wonder if you could create a poll with that?”. It turns out that there are a whole bunch of problems displaying the results. Here is a quick proof of concept...

Note: for any readers subscribed to the blog via RSS, you need to view originating page, due to embedded IFRAMEs.

Read the full text of this article...

Web design is about more than typography, layout and aesthetics - it is about flow, interaction and increasingly about software design.

Coming from an object-oriented software background, I know that software diagrams can help get your thoughts in order and reveal under-designed or chaotic areas of your projects.

I don't want to advocate formalising the design process or get into arguments over agile processes, just to show you some tools that can be better than the back of an envelope.

Bubbl.us

This is probably the tool I use most often. It's a mind-mapping tool but it's free form nature means that it can be used to represent many things (at a fairly high-level).

Bubbl.us has a lot to offer. There are no onerous registration requirements and it is really intuitive. Both of which mean you can start working straight away, whilst your ideas are fresh in your mind.

It will happily save documents for registered users, export as images, XML or HTML and it has great collaboration options too.

It can be a bit limiting if you want to move beyond simple mind-map diagrams but it's a great tool within those limits.

SQL Designer

Ondřej Žára's excellent flash tool provides basic entity relationship diagramming, allowing you to model database tables, indexes and relations.

It isn't a patch on professional modelling tools (like Oracle Designer) but can really save you a lot of time. It can generate SQL/DDL for an impressive array of database platforms and can export and import XML representations of your diagrams.

The ability to maintain an agnostic copy of my database designs, then generate code for MySql and Oracle with a few mouse clicks really makes me love this free tool.

GModeler

GSkinner's GModeler application deserves a mention because it actually tries to implement proper UML class diagrams.

I must confess to not using this tool much, I find desktop applications to be far superior for modelling in the kind of detail required by UML.

I'm probably not the target audience though - one of the biggest draws for GModeler is its ability to generate Flash ActionScript code (including ActionScript 2.0).

It's good to see web developers embracing software engineering tools like UML though.

Conclusion

A picture is worth a thousand words and diagrams are incredibly useful for communicating what is happenning behind your web pages. Whether you're producing wire-frames for page transitions, object diagrams for Javascript or ERDs of database designs, give these tools a go.

Are there any other online diagramming tools you'd suggest to web designers? Let me know in a comment.

Blogs and Content Management Systems (CMS) usually allow readers to leave comments on articles. Most bloggers and webmasters are concerned about comment spam, follow/nofollow links and much has been written about the technical aspects of user comments - this article will look at the visual and functional design of comment creation and display.

Read the full text of this article...