The site is the brain-child of Maura Donohoe, who’s got lot’s of experience in the area – she’s been a teacher for over 20 years, and running a school-book shop for over 6….so she’s going to be able to help anyone that runs into any school-book related problems.

They wanted the site to be a little different to the school-book sites that are out there at the moment. Be sure to keep an eye on the easyschoolbooks blog; they’ve also got a home on Facebook & Twitter, so check them out & say hello.

Spotify Playlists

One of the nice features is the ability to create and share playlists – it’s a great way of discovering new music. However, Spotify don’t (as far as I know) give subscribers a place to share their playlists. I’ve started using a Twitter search to find playlists, and it’s working great – because so many people tweet their playlists you’re never stuck for some good music to listen to. It’s how I’ve been starting my work day for the last couple of weeks: open spotify, search on Twitter for a new playlist to kick things off , start work…

Discovering Playlists via Twitter

To make the whole thing easier, I’ve done a little Twitter search app to look for Spotify listings (you can find it at spoteye.ambientage.com. If you check that out, you’ll get 100 playlists that people have shared through Twitter to keep you entertained. It’s storing playlists for about 10 minutes, so there is usually a good turnover of new music.

More features….maybe

This was a short project that solved one small problem for me (finding playlists), so there is some room for improvement. At the moment it’s displaying only the first 100 play-lists found.  I have a version running that loads more automatically from a database. It also collects the hash  tags people use to describe their playlists too – they could be published to give a way of narrowing down the playlists.

Building Small

Building this was a one day project that was part experimentation, but mainly just solving a small problem for myself.

Taking on small projects like that are a great way of learning things that may not come up in a paid project. In a way it goes against the fundamental idea of business (creating a product or service with a business model capable of generating revenue), but sometimes value can come in other ways. The experience of creating something new can sometimes be just as valuable. I’ve done a few small Twitter search applications, and the access Twitter give to huge amounts of real-time, user-generated content can lead to really useful things (this may or may-not be be one of them!).

I also want to credit longUrlPlease for providing a great service that expands the many shortened urls found on Twitter. Without it I would have been wary of publishing lots of shortened links without any way for the user to see where they went. I came across longUrlPlease when reviewing the applicants for Outvesting (I didn’t give them any of my points, but I wish I had now. Sorry guys!).

As always, any feedback & ideas for improvement would be great – leave a comment here or through the app’s form, or get me on Twitter @davkell

TwitEye is an outstanding app that can help you find ideas for new applications, services, software and plugins based on tweets looking for something to fill a need.

The UI scrolls with tweets from users. It would be great to have a pause feature! You also can find a selection of ideas plucked from the stream in the Ideas Blog.

The pause feature is certainly something I’ll be looking into adding.

You can see the TwitEye listing, and their full directory of twitter applications, over on the Twitdom site.

From looking at how it’s been used so far, there are return visits and people arriving through search. To make it easier to get at the good ideas, I thought an RSS feed with some of the better ones would be helpful. You can grab the feed, or look at the published ideas, on the TwitEye Ideas page. Over there you can also look at different categories of ideas, and search the daily archive to see if there’s anything of interest. Or, if you’re intersted in taking a look at the full stream, check out the TwitEye homepage.

When I started out, I spent quite a bit of time looking into the applications & services people were using. I tried out lots to manage different parts of the business; here are some of the ones I settled on:

Communications

There are lots of web-based technologies for staying in touch. Some I’ve found most useful are:

1. Google’s Gmail, which lets you manage a number of different email accounts and has Instant Messaging to others with Gmail accounts. Google Talk is a desktop application that gives you the same messaging options, with the ability to talk to contacts over the web.
2. Skype – while not web-based, it offers a handy service for messaging  & talking over the web. It also provides voicemail & lets you buy local telephone numbers.
3. Fring -again, not web-based, but it gives you access to Skype, MSN & Google Talk, Twitter and more from your mobile; handy if you’re away from your computer.

Project Management

After using the open source version of ActiveCollab for a while (which has now moved to a paid version), I’ve since settled into using BaseCamp. It’s a well designed, easy to use web app that makes managing a project (everything from setting up milestones & to-do lists, to collaborating with others) really easy. For times when tracking the amount of time spent on different parts of a project are needed I’ve used 1time online time tracking; it’s a handy Irish web app that I’ve talked about before as part of the Tuesday Push. Google Docs is also something I’ve been using from time to time when shared or remote-access to word-processing & spreadsheets is needed.

Web Stats

For analysing performance of websites, another Google product, Analytics, features. It’s free and has a wide range of reports available, with the option to schedule sending reports by email – a feature I’ve found really helpful for certain clients.  Another alternative to Analytics that I’ve been using recently is Irish-based StatCounter. I’ve found the level of detail in some of the reports to be great, although it doesn’t look as nice as Analytics, there is a paid version available for access to more information.

Code Management

I spent quite a while developing code on a local machine (while keeping an automated backup…always keep backups!). That was until I picked up on code versioning with Subversion and Springloops. Springloops is a web-based tool that allows you to manage your source code as you work on it, collaborate with others, and deploy it to servers when the time comes. It has made a huge difference to workflow when developing bigger web applications.

Client Management

When trying to keep track of who’s who and what needs to be done for them (CRM – Customer Relationship Management), I’ve been using another web app by 37signals, Highrise. As with Basecamp, it’s a simple & easy to use service that lets you manage contacts, tasks etc. I’ve found it an easy way of keeping on top of what I should be doing for everyone.

Staying in Touch

While not directly related to the day-to-day work, there are lots of other web-based services that are useful for keeping in touch with what’s going on. Doing so helps stay on top of trends, industry & competitor news, helps with learning new skills, and gives a way to plug into the various communies out there. Some of the most useful I’ve found are tools like Google Alerts, Google Reader, Twitter and LinkedIn .

Lots of Options

That gives a small picture of some of the web-based tools available for managing business. Some are most useful to web designers & developers, but many will be helpful to lots of others (and if you’re in the beauty sector, be sure to check out our newest app!). If you’re a linkedIn user you can also connect through LinkedIn.

Site Homepage

There are a number of things that struck me about this page:

• Firstly, why oh why would they use Comic Sans font (in <font> tags) as a header for the page? Given the clean look of the site, the choice of this header seems strange.
• My next thought was: “What is the big empty rectangle doing in the middle of the page?”. This doesn’t show up in Internet Explorer (only Firefox & Chrome). I’m assuming it’s for some type of banner, but testing the look of the page in multiple browsers would have been a good idea.
• Finally, the banner “Click Here to Purchase” is out of keeping with the look and feel of the rest of the page. While it is eye-catching, as it’s intended to be I’m sure, I think the colours used could be more in keeping with the look of the site.

Site Login

Security for any web application is important. In the case of the TV licence application, they’ve chosen to use a 17 digit reference number and a 5 digit PIN number.

Using a 17 digit number that is given to users on a printed renewal notice is not user-friendly. This is made worse because the reference number is presented in a single string, with no spaces. This makes it difficult to transcribe and leads to user input errors. There is a reason why credit card numbers are split into groups of four with spaces in between – it makes them easier to read.

Even more user-friendly would be to use something that makes sense to the user, such as a readable word, a contact number, or email address.

Payment Screen

This is the main focus of the application. It is why users are on the site. And it too, could have some work done on it user-friendliness.  A requirement of proceeding with payment is that you accept the terms and conditions of the service. To do so, you need to be able to access the terms and conditions. When you click on the link to view Terms & Conditions, the window opens in the top left of the screen (shown below), making it far too easy to miss.

Some other enhancements to usability on this screen could be to present form dynamically according to the type of credit card selected by the user. For example, a Mastercard does not have an Issue Number. Rather than doing this, they have included the text “(if present)” beside the fields. This approach forces the user to think about options (and leaves the door open for errors), rather than making it as easy as possible for the user to accomplish their task.

In one way having a service such as this available is an excellent idea that makes (my) life easier. On the other hand, with some small enhancements, it could be much more usable.

I try to regularly spend some time looking at new developments in web design & development. When I was evaluating the various frameworks (such as jQuery, Prototype, Scriptalicious) I found that jQuery best met my needs, so I jumped in.  It allows you to do everything from add animations to pages, to integrate AJAX within your site.

Their blurb:

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Some of my initial impressions were:

1. There was an active community around it. This meant that the documentation was well maintained, there where lots of tutorials & resources available to learn from, and the support seemed to be good in the user forums….all important considerations when learning something new.
2. The framework itself was small (16kb when minified & gzipped). Its small size means less impact on the performance of pages while the file downloads, again, something I would rate quite highly.
3. It is cross-browser compliant, meaning that it will run on all the major browsers without any problems. Again, allowing you to know your users won’t run into problems when looking at your sites.
4. I liked that it allowed you to write unobtrusive JavaScript, something I was always less likely to do when writing the code from scratch.

After reading the documentation for a couple of hours, it was extremely easy to jump in and develop something in a few lines of code that would have been a big job were you to write it all from scratch.

Plugins

A huge strength of JQuery is its use of plugins. The framework is easily extensible, meaning that if you need something that isn’t included in its core, you can either search the Plugin Library or, if you find nothing suitable, extend it yourself.  Using this approach keeps the framework small, by ensuring your not including things you don’t need, while giving you the flexibility to add functionality specific to your site.

There was a bit more of a learning curve when it came to writing plugins. There are some great guides out there for this (in particular, Learning jQuery: A plugin Development Pattern). One thing that I had problems with was realising the difference between Action & Utility plugins – after much searching the web (not knowing what I was looking for!), I found a good explanation of why you would use either in this blog post. That saved me a world of pain!

Resources

I do think that a good understanding of JavaScript is needed to make full use of any of the frameworks.  But, if you decide on jQuery, there are lots of resources out on the web for learning more. Google will help, but the ones I found most helpful when starting out were:

• jQuery Documentation
• jQuery Forums on Nabble
• Learning jQuery
• 51jQuery Tutorials & Examples
• Webdesigner Wall – jQuery Tutorials for Designers

There’s a simple example of jQuery in use over on the Portfolio page of this site. It’s jQuery that is handling the animations to change the screenshots when you click on the names of each of the clients. It’s also unobtrusive on this page; meaning that if a user has JavaScript disabled, the page will still be displayed, but without the fancy effects.

In certain areas, for example academic research, constructive criticism through the reviews of others working in the same area is how work is evaluated. Doing so allows those involved to improve their work based on the input of fresh ideas and perspectives. Weaknesses are identified, and in doing so, those producing the work (and those using it afterward) benefit.

I am often involved in offering advice on the redesign of existing websites. In such cases, and particularly when the site or content has been developed in-house, there can be the reaction like that you would expect if (not when!) you were to tell someone they have an ugly baby. Immediately adopting a defensive position in such cases is not always the most productive approach (when talking about websites, not babies, in which case it may be justified!).

Feedback is a good thing – use it wisely

It can often be difficult to get honest feedback on your website, or any aspect of your business for that matter. In cases where it is offered, it is often worthwhile to consider it. This is particularly true when it is unbiased or unsolicited, for example, through feedback from customers, discussion on unrelated websites (for example, message boards, etc.). There are numerous examples of discussion forums frequented by designers & developers (for example, in Ireland Creative Ireland, Irish Webmaster Forum). These forums provide access to experienced professionals who freely offer their time and opinions on new websites. Such objective feedback can often appear to be harsh, but it is rarely wantonly so. Taking such opinions on board can allow subtle changes to new sites leading to their improvement before a wider public launch.

Look at feedback objectively

Looking at the feedback you get objectively, and not taking it personally, are important steps in keeping your sanity. While a lot of time, money and effort may have been spent before you get suggestions, even small changes may be beneficial.

In situations where you are using external consultants, designers or developers, taking on board their opinions is important. While you understand your business in more depth than they will, they should understand their business better than you do. That is not to say that all advice should be followed without question, there should be a reason, and a business case, for all suggestions. In such situations, it is far worse to get no opinion than one with which you disagree. By looking objectively at the alternatives, you will be in a better position to make an informed decision.

Evaluate the Source – Wisdom of crowds?

While feedback can be found from many sources evaluating those providing it is important. The “wisdom of crowds” or “crowdsourcing” has gained traction in recent times with the emergence of Web 2.0 technologies. The idea behind this is that leveraging the knowledge of large numbers of people will provide more useful information than a small number of consultants.  While this may be true, and in many cases extremely useful, realising that not everyone is an expert should be considered.

Lessons

The availability of feedback on new web design and development projects can be of huge benefit to both small and large businesses.  By welcoming a fresh perspective improvements can be achieved before a wider public release of any site.  In accepting feedback it is important however, to look at the feedback objectively and to evaluate the source before accepting suggestions at face-value. It may just help your baby grow into something more beautiful!

Update – I’ve published a lower level guide to Gears over on my other site: you can view Part 1 here.

The opportunities presented by allowing users to access web applications off-line are huge. In situations where internet access is unavailable, or where connectivity can disappear without warning (such as with certain providers in Ireland), providing a consistent experience to users is important. Simply saying, “you can’t do work now” is not enough for users that rely on an application.

Thinking about potential barriers to (me) relying on web applications for “important” functions, reliability of access is quite high on the list. For certain applications, such as word processing, task management & time tracking, to be “primary use” availability needs to be guaranteed. There is a difference between it being inconvenient when something is unavailable (such as news in your RSS feeds), and it being a big problem (such as losing work because your Internet Connection drops and you can’t save it).

There are a number of ways that this type of offline functionality can be introduced. ReadWriteWeb have published a number of articles on this in the past (linked at the end of the post), including a very good one recently which looked at ways taking web apps out of the browser’s control can be achieved. In it, they linked to a very good video of a presentation on developments with Google Gears (video on Youtube, 54 minutes long) which looks at some of the options when providing offline accessibility in web-based applications.

Gears is an open source project which aims to :

• Let web applications interact naturally with your desktop
• Store data locally in a fully-searchable database
• Run JavaScript in the background to improve performance

One of the most interesting approaches discussed (and one that I hadn’t heard of before) was using functionality provided by the dojo JavaScript toolkit which allows applications to check what local storage options are available (it looks for Gears, Flash storage, HTML5), and use one of them. The options are presented through dojo Storage in dojo Offline.

Off-line web application access can help to overcome some issues facing widespread adoption of web applications. Whether this type of functionality is “sold” as a feature up front, or simply integrated into services to help provide a more complete user experience remains to be seen. As versions of applications that traditionally lived on the desktop make their way onto the web, users will expect to have a similar experience. If the experience is sub-standard, what is the motivation for moving?

Forms of Date Input

“Flat Calendars”

Many websites have relied on representations of “traditional” paper-based calendars, showing rows of days and dates which the user can click.

from Google Calendar

The screenshots above and below show two alternatives for the flat calendar approach: the first (above), displays the calendar on the screen so it is immediately visible to the user when the page loads. The second (below), is a “pop-up”, meaning they rely on user interaction (e.g. clicking on a button or link or in a text box) to make the calendar appear.

from Avis Car Rental

“Drop Down” Lists

A second option is a drop down list style date input. These are most commonly seen in forms where credit card expiry dates are asked for. The use a fixed list of dates, which minimises the chances of a user making a mistake.

from Budget Car Rental (…where I spent some time working long time ago!)

“Natural Language” Approach

The final option I am going to look at is a newer approach. It allows the user to type the date and (or) time into a text box. The application then interprets this and translates it from how the user has phrased it, into an “acceptable” (from a programming perspective) date format. An example of this is shown in the images of the (very useful) web app Remember the Milk.

which the application then interprets as:

Impressive eh?! This is particularly impressive because it promotes a more natural interaction between the system and the user. It does not force the user to rely on one representation of dates and times, instead, it adapts to how the user naturally expresses themselves. This should be the case, as highlighted by Cornelis in an article on the diversity of date input methods:

…it is hard to find any pattern or rationale why one website has chosen for model X [for date input] while the other has chosen model Y. The suspicion would rise that the date input method is often dictated by the way the backend would ‘like’ it. This is a situation which neither we, as interaction designers and consultants, nor the end user should settle for.

The (brief & slightly) More Technical View

Providing functionality like this is obviously much more complex than giving the user a drop down list to select from. There are Open Source JavaScript libraries that can provide much of the functionality for you (finding one of these stopped me from going past the paper planning stage of writing my own JavaScript Library to handle this…thankfully!!). Examples include Date.js (released under the MIT License), and Datetime Toolblocks (released under a modified GPL).

Choosing the best Date Input Option

Given the options, what should be considered when choosing how you ask your users for a date (edit: emm…not that kind of date, you know what I mean). Here are some points, which are all related, to consider:

1. Frequency of use. If the user visits the site / application infrequently, making how the input works as obvious as possible is wise. By providing a flat calendar, that is modelled on paper-based calendars, users do not need to adjust to new types of interaction. If the user visits the application frequently, they may be more responsive to learning how to use novel forms of interaction (if they are of benefit).
2. Trade off between ease of use and speed of use. With some of the date input methods, there is a trade-off between ease-of-use and speed-of-use. While the Remember the Milk model of date input is fast (I find it faster than a flat calendar because you don’t need to use a mouse), for users unfamiliar with it, it is not easy to use initially.
3. Type of user. The profile of your user will impact every aspect of your design; the date input method is no different. If your users technical awareness or skill level is not low, then as simple a means of interaction is required. If they are at a higher level, again more innovative and productive means of interaction can be used.
4. The design of you application. The overall design of the application can be of influence. Sometimes, it is not practical to include a flat calendar on the screen, instead, due to space constraints, or other design limitations, pop-ups may need to be used.
5. Cultural aspects. As date formats differ between countries, for example 10-3-08 means different things to users in Ireland and in the US. Making users aware of these differences, and ensuring that your application is aware of how to handle them is crucial in order to avoid inaccurate inputs.

The usability of any web application should be a key concern in web design & development. Reducing the amount that any user has to adapt, and making interaction requirements obvious, will improve usability. The innovation in date inputs outlined are one such way that this interaction can be improved for certain types of web applications.