Great background website: Pojeta.cz

This is a seriously gorgeous website. very simple but I felt immersed in the lively colours and didn’t want to leave.

http://www.pojeta.cz/

There isn’t very much there, but something about the space and ocean theme really moves me. Don’t forget to scroll up.

Posted in: Design notes

Accounting tools comparison (Part 2): ClearBooks

Continuing on from my last post, I am evaluating ClearBooks today as a series of reviews on web-based accounting tools.

I had a need for an accounting application which meets my needs for invoicing and tax returns but also dumbs it all down to my level of understanding.

I found that Xero was fairly easy to use but seemed to tailor to people in the accounting profession. I myself have very basic accounting knowledge and am looking for a simple and attractive tool that doesn’t make me feel like an ape.

ClearBooks

Set up

It was very quick to set up the business account. Most of the details I’m sure will be required later but it’s nice to only fill out 8 or 9 fields and get straight to the dashboard, even if all the dashboard showed were zeros.

Using the tool

One thing that becomes immediately clear as an advantage is that ClearBooks is a UK product, and therefore has specialised fields as used by HMRC, the UK tax office.

I have added my company and VAT registration numbers now, and am looking forward to importing my bank statement (that was the nicest experience in the Xero tool). I clicked to add a customers but am redirected to add VAT details. I thought I had made a mistake and tried it again but no, ClearBooks does seem to want my VAT (like a goods and service tax) details in order to add a customer. That doesn’t make sense but okay, I’ll follow along and see what happens.

Similar jumps in navigation is happening quite often and is somewhat confusing. It seems slower and less efficient because I haev to figure out what just happened, and why I was taken to a different page to what I had expected.

The UK specific structure is super important, and the overall IA seems more novice-friendly, I haven’t encountered any terms too technical, but the navigation is really bringing the usability of this tool down.

Posted in: Tools and resources

Tags: , ,

Accounting tools comparison (Part 1): Xero

I am trialing out a number of web-based accounting tools for my business. It’s great being able to wear both the user experience and consumer hats. As I’m using theses web applications part of me is focused on my needs and requirements, and at the other time I’m very aware of how intuitive and user friendly the tool is.

Here are the tools I have identified for review:

  1. Xero – www.xero.com
  2. Clearbooks – www.clearbooks.co.uk
  3. Kashflow – www.kashflow.co.uk
  4. Intuit Quickbooks – www.intuit.com

I chose these four (out of about a dozen) because they have a web-based interface (so I access it from different computers), looked simple and intuitive, worked with UK businesses, and offered free trials.

As usual, it wasn’t clear to me what my requirements were until I started to compare the features. The situation that inspired me to look for an accounting tool was frustrations with my books. Years ago Icreated a Google spreadsheet, which was a quickest and simplest solution for a business just starting out. However years later, I am struggling to keep up with the transactions and tax returns required. I do have an accountant but prefer to keep an eye on the accounts and generate invoices myself.

So before I begin the evaluation, I want to make a note of my ideal system, untainted by the constraints of reality. I want to:

  1. Click a button to update bank transactions
  2. Submit VAT returns, linked to my HMRC online account quickly and easily
  3. Reminders of what I need to submit to HMRC (VAT, other taxes, reports etc)
  4. Generate invoices with a button
  5. Add expenses as I go, being able to keep a digital copy or scan of my recepts would be amazing
  6. See my bank balance, and profit/loss statement at any time

That about rounds up what’s on my mind now. Of course I will think of more as I go.

Xero

Sign-up

This was simple enough. No credit card details required. Xero offers a free trial up to 5 invoices, 50 bank statement lines (I think I know what that is), and 180 days.

There is a demo business set up so I can immediately have a go at the different features. This is a great approach as setting something up could take time and effort, and it is unlikely the “shopper user” is going to have all the information required on hand.

Set up

The next step was set up my business. It wasn’t too painful, and the information flowed in a logical manner. First I added business registration details and address. Then I had the option of adding VAT (Value Add Tax, like Australia’s GST, Goods & Services Tax), and continuing the numbering used on invoices. I have a different invoice prefix code for each client, I don’t think that is supported on Xero.

I can also invite my accountant, and give him access to the account. Next I am asked to customize the Chart of Accounts, this is where my knowledge fails me. There are a bunch of codes next to various Sales, Income, Revenue and Expenses items. Luckily I can skip past this step. I am warned to add a bank account, which I do, and am asked choose a conversion date, when Xero will begin processing all transactions.

Accounts payable and receivable then need to be set up, this is at the very edge of my knowledge and I make a brave attempt to calculate some numberse from my online bank statement. Next, I can add invoices to balances out the accounts. Generating an invoice was surprisingly easy.

Overall, there were 10 steps in the set up process, and took about 45 minutes. And I don’t have a headache at the end of it so that’s a bonus.

Using the tool

So far I have spent about 15 minutes trying to change the invoice I added while setting up the business account. I made a mistake but apparently I’m not allowed to fix it, only the financial adviser (a non existent entity at the moment) can do it. I fiddled around with it and found out how to change my access permission, setting myself up as the financial adviser and was able to fix up the earlier error. Would have been nice not to have to guess and waste the precious time figuring it out however.

I have also imported the statement from my business bank account, which was surprisingly easy once I understood what a .qif file is (Quicken). There was plenty of help instruction along the way so felt well supported throughout the process.

One of the things I look at most frequently is my invoices. I am finding it is a little difficult to navigate to invoices (Accounts -> Accounts Receivable -> Awaiting Payment -> Select invoice).

The other problem I am noticing is the format at the invoice. I typically put the address and contact details of the client on the invoice, but Xero’s invoice template does not allow me to add this information.

Conclusion

While it is a rather simple tool to use, and provide all the functionality I need, there are some awkward parts in the navigation. The IA is pretty intuitive, however I don’t know what most of the reports and adviser features do and have not tried them out. For now however, I am content with the 10% of the tool I have tried, and feel that I won’t use the rest 90% of the features available.

Overall the language and structure of functionality is oriented towards accounts professionals, not business people like myself with very rudimentary understanding of accounting. While useful and fairly user friendly, I don’t think this is the accounting tool for me.

And so the search continues. Do stay tuned, I will be looking at Clearbooks next.

Posted in: Compare and review, Tools and resources

Unsubscribe/manage email address for mailing list

One thing that has often frustrated me is getting non-direct, non-personal emails to my direct personal email address. I use several email addresses for different purposes: A) emails for work, B) emails from friends/family/social networks, C) email for mailing lists/what’s on/shopping sites.

When I make a purchase I often use my B) email, which is my Direct Personal address. Yet afterwards if I would prefer mailing list emails to go to my C) email, which would be filtered past my Gmail Inbox and will only be seen when I have time to look in All Mail. This is how I manage my emails, and I must get at least a hundred a day.

Today, I decided to unsubscribe to a mailing list that was sending it to my B) email, and encountered a lovely little functionality.

[image to come]

So you are able to change the email address used for the subscription list. SO simple, and exactly what I needed. Now every mailing list manager in the world need to incorporate this feature and this would make my life as a user that much sweeter.

Posted in: Design notes

Tags: , ,

iMac touch

Very excited about this. An iMac with a touch interface, switching from Mac OS to iOS smoothly when the screen is tilted. It would mean a completely different way of working for me. I currently use a Wacom for the design work, but the “iMac touch” would  make it a more immediate process and improve my efficiency. Not sure about the ergonomics however.

It seems so obvious, and the touch screen display technology is there, but unfortunately very expensive (the Wacom CINTIQ costs US$2000 at the moment). But coupled with Mac OS, all I can is: Wow.

It’s all hypothesis at the moment of course. A bunch of people scouring patent filings has found these documents, so no promise it will become this exact product, and certainly no indication of when. I just hope soon.

http://mashable.com/2010/08/23/imac-touch/

Switching to touch interface when the screen is tilted

Posted in: Future UI

Tags: , , ,

Quick, make your own WordPress theme

Randomly stumbled upon this website. A simple tool for generating a very basic WordPress theme of your own. You can choose your colours, the layout of the page, what widgets to include etc.

It doesn’t look so pretty at first glance but I thought the controls were intuitive, and it’s objective well delivered. It would also be a great tool for people just learning HTML and CSS.

http://www.yvoschaap.com/wpthemegen/

screenshot of website - wordpress theme generator

Posted in: Design notes

Tags: , , , ,

SydneyDesign.com.au – Pulling my hair out

www.sydneydesign.com.au – I am finding this website very frustrating.

I heard about an event on for Sydney Design for tonight, I even got the address – the PYD Building in Waterloo – and starting time – 6:30pm. I am trying very hard to find the name of the event, and whether or not reservation is required.

I am looking on this page, going into each event for today, and I must have seen every one but still not feeling confident I have explored all avenues. A search for “PYD” yielded no results.

It is overall a lovely looking website – look and feel, content, images, calendar feature etc. The problem is in the information architecture. The above screenshot is for events on 4th August, the title of the page is a rather curt “4″. The page being poorly labelled caused me a few moments of confusion: did I click on 4th August on the calendar correctly? Are these events relevant to that date?

Having verified I am on the right date, now I want to find the event about sustainability: nope, no filters for subject/topic. Next I try to find the event by time: I need to go into each item to check its time and location. Finally, I try the TALK, and EVENTS navigation links, but again, I would need to delve into each item to find out its location and time; far too much effort, I am giving up.

For best usability, this page should show at the top the events that occur only on the selected date (i.e. the most relevant results), followed by a heading and list of events that run over a period of time but are also open on that date . It would also be useful to be able to search by date and event type (4th August, Talk), subject/topic (in the form of a tag cloud perhaps), and keywords.

For an festival with a 124-page programme, and atleast 50 events, it would be great if I could find the information I want without too much headache.

Posted in: Websites

Tags: , , , , , , ,

Just explore (the no frills recipe finder)

Great concept website. The kind of stuff I’m always promoting; limit the choices, keep the user moving through the website.

(I’m talking only about the UX, interaction paradigm and navigation here, I have no opinion on the expletives used.)

http://www.whatthefuckshouldimakefordinner.com/veg.php

This is simplicity and minimalism (in terms of UX) at it’s prime. 3 options, the same on each page, no frills. The designer could have added images, buttons, other bits of and pieces but that would have taken away the impact.

I’m a major fan of this website now. Such a simple concept in terms of service offering and interaction design! I want more websites like this.

Posted in: Design notes, Websites

Tags: , ,

How NOT to design a homepage

Martin Lewis’ website Money Saving Expert provides excellent advice to consumers on how to spend their money wisely. I don’t take only any contracts, or make large purchases without consulting this website first. Which iPhone contract to take up, utilities companies, car insurance, rewards programs, flight promotions, weekly savings newsletters; I’ve used them all.

http://www.moneysavingexpert.com

Luckily most of the time I deep link in from the weekly newsletter, but whenever I must go via the homepage I find I am almost reluctant to look at the page because it is just so cluttered and messy.

Every inch of the area above the page fold is filled with words and colours. I always go immediately to the search box at the top right. This is one website I would like to have a stab at. Such great content, and a big reader base as well, the pages just need to be tweaked to look cleaner and more professional, and make it easier for visitors to find useful information.

So, what is there to learn about what NOT to do in designing a homepage? Here are some quick thoughts:

  1. Page content needs to be organised under headings, such as: Current promotions, Signup to the Newsletter, Deal Comparisons/Reviews (for banks accounts, flights etc).
    Organising the information under headings is important so users know which section to look under and be able to ignore the sections that do not interest them. Without this type of Information Architecture (IA), users will need to read everything on the page to find the item of interest, this usually takes a bit of time and can cause frustration, or even worse people can give up and leave the website, never to return.
  2. Reduce visual elements – most of the content on this page should be in plain text with a heading. In fact lots of the could be  reduced to links, which will take the user to another page to find out more about the current promotions.
  3. Need clear visual hierarchy – tell users where to look first, second, third, etc.

Another thing I would like to do, is to get some metrics before and after a website re-designer. How much improvement in number of visitors, and length of each visit can be brought about by a redesign? If we can track retention, and re-visits, it would be a great help to illustrate the ROI of user experience.

Posted in: Design notes, Websites

Tags: , , , , ,

From analog to digital

A few close friends have tried to explain to me their love for vinyl, how reluctant they were to switch to mp3. The feel of the record, the packaging it comes in, the way they look all stacked together on the self, the whole experience of going to the store to buy it, not to mention the quality of the audio output. There was so much to loose in giving up vinyl for mp3s. But, cost and convenience overweighted sentimentality and “beauty”, and many DJs and musicians have switched to the digital format.

Now, with the release of these e-readers like Amazon’s Kindle, and Apple’s iPad, a similar thing will happen to book lovers and readers. One can’t deny the attraction of a shelf full of books; each is like a memorabilia of a time in one’s life, and has a story to tell beyond the narrative printed within. A few people I know dream of one day having a library in their home where they may retreat to, away from the world.

I personally embrace the era of digital media, happy to switch from the weighty physical version to the sleek and shiny gadget that promises to contain 3000 times it’s weight in knowledge/entertainment. I’m sure I’m not the first person to have drawn this comparison, but the thought was a self-inspired one, and I just wanted to comment on it before I forget it.

Posted in: Future UI

Tags: , , , , , , ,

Boomkat.com: revealing controls on mouseover

I have already discussed this in a couple of other posts; hide controls until mouseover . I think it’s a great design technique and just couldn’t help myself when I saw another example of it in practice.

This time it was on www.boomkat.com. There is a recommendation feature, and on mouseover you see the actions. Here the controls overlay the text information, and is given a more graphic treatment. I think it works very well.

Update, 1 hour later…

I’m noticing a very irritating issue now. I want to select the text under one of these recommended tracks, but I am not able to because as soon as my mouse hovers over it, the actions pop up and the text I want is hidden.

A better design would be to let the actions overlay the image, rather than the text. The text holds vital information – artist name, track name, format – and should be visible always.

Posted in: Design notes

Tags: , ,

4 column layout

It can be scary to divide the page up into skinny columns. You might ask: “what if I want to put a big picture in there?”

I found an example of 4-column layout which presents the contents of the website very well. It has a very sensible structure; two levels of navigation on the left, then a column for text, and the last column on the right for images.

When you think about it, you don’t want large images that span the most of the page width anyways; large image file which means slow load time, people would prefer a small quick preview first to decide if this was something they were willing to wait (a whole 3 seconds) for.

http://www.sherman-scaf.org.au/exhibitions/

Another lesson to learn from this website is the confident use of white space. People who don’t regularly deal with design often want to fill up every inch of space with something. The result is clutter, busy-ness, and users who want to get out as soon as possible. This website allows for plenty of white space, keeping the text column width small for better readability. The text size is small but we have fairly good browser features and accessibility tools for managing that now.

sherman scaf gallery website uses 4 column layout

The homepage of this website is interesting, and unusual. There isn’t a lot going on there, just the name of their latest exhibitions. It appears that after about a 5 second delay, visitors are automatically taken to the Exhibitions page. I don’t have an opinion on this at the moment and don’t know where else it should be applied, but it seems to serve their purpose well; a homepage that directs users to the most relevant content.

Posted in: Design notes, Websites

Tags: ,

Cute 404 pages

We seem to show a lot of pessimism when computers screw up. Plenty of things go wrong in life that end in a few laughs and pats on the back. Why can’t we do that in the digital world?

The BBC and Northface websites have it right. Error messages don’t have to be gloomy and serious. It could be a pleasant surprise instead.

fear not the clown that welcomes you to the error page

error page with a bit of humour

Update: I just updated my 404 error page after reading this webpage: http://www.alistapart.com/articles/perfect404/

Posted in: Design notes

Tags: , , , ,

Web based music players

There’s been rise in the number of web-based music players, and it’s a super interesting design challenge. How do you keep users coming back again and again, keep them on the site, and ultimately make it addictive and profitable.

Deezer is a cool little player, great for exploring music while listening to your selected tracks.

Deezer does a good job of keeping users exploring the site. The best thing I find, and is missing from many other sites, is the ability browse music without loosing the track that is currently playing. I find it very frustrating when I click on a similar artist and the page reloads, loosing the player and the song I was just enjoying. Deezer overcomes this problem very well. The challenge is to remind the user they are in two different places; the song they are listening to is one thing, and different from the songs they are looking through.

One of the biggest players in streaming music on request is Last.fm. I have been a long time user and big fan of Last.fm, from when they first came to being as a total pioneer in this field. There has been good incremental increase in the services they provide, but the whole recommendations feature remains strong and is one of the main reasons I keep going back to these guys. The other good thing is their artist’s “On tour” information, which has led to some great times for me.

Another long time player is Pandora, however they are no longer offering the service outside of the U.S. I thought the Pandora music player interface was intuitive, but a big slow and gluggy. It also rarely found the music I wanted, skewing towards popular artists. Nevertheless they did make a splash when they first appeared on the scene.

Now my favourite music player at the moment is Grooveshark. This application, I think, bypasses all the other in many ways. It is basically a web-based music library, and doesn’t offer recommendations, buy-now, or similar artists features. If you know what you want, type in the name, and it will find the music for you. You add it to the player queue, which you can then save in to playlists.

I have been using this application for my musical entertainment at work for 2 months now, and I use it almost every day. It occasionally has trouble loading the song, and you get silence on your headphones for a good while until you manually skip to the next track – a little auto-skip feature would be a real improvement.

These guys have recently added a bunch of ads (pictures only), but so far there are no annoying audio music breaks or a strong push to sell their VIP service. However, for $30 a year it’s more a matter of “why not”. As a VIP, Grooveshark also integrates with Last.fm’s scrobbling feature so there’s a nice record of your listening habits.

Are there any other music players out there I should have a look at? Please leave me a comment to let me know.

Posted in: Design notes

Tags: , ,

Annoying mouseover behaviours

For a while I was looking for examples of panels that pop-up on mouse hover over. Here’s one from http://andpluckyourstrings.wordpress.com/

I hate it, please don’t do it!

Posted in: Design notes

Tags: , , ,

“Show more” instead of pagination

Everybody is pretty accustomed to pagination links nowadays (next, previous, page 1, page 2 etc). However, how often do you skip ahead to a page? I find that 99% of the time I patiently go through the pages sequentially, not wanting to miss something and having to jump back and forth.

Therefore, it’s nice when the most likely option is also the one and only option when you get down to the bottom of the page.

This screen is from the Sydney Community College website. There is a “Show more” link, which expands the page with more results. I love it, it works great in this context, and I can’t wait to apply it elsewhere.

Posted in: Design notes

Tags: , ,

What to put on the right-hand side

When I design websites, I always put in features that will help people continue moving through the website. It’s important to tag pages so links to related pages are placed at the bottom of the page so when the user finishes reading the page and scrolled to the bottom, there’s something else to to do aside from the “oh, is this all” response footers elicit.

Another important thing is providing context sensitive help. Sure, it’s great to add a link to the FAQ and leave it up to the user to find the relevant help, but so much already expressed by the fact that the user is on the current page, so rich in contextual information we would just be throwing away! Sorry – I get a little excited about trying to predict users behaviours.

Here’s an example from easyjet.com, one of their account pages. Notice the right hand side column with key questions and answers. When I was trying to change my flight, this information helped me a great deal.

Posted in: Design notes

Tags: , , ,

Navigation on the right

Traditionally navigation menu has always been on the left, as a sign post to where the user is.

On this website, the navigation is placed on the right. The page is structured roughtly like this:

  1. Left half – content
  2. Next 1/4 – related links
  3. last 1/4 on the right – navigation menu links

I think it works quite well. Took maybe a few seconds to get used to but i wasn’t even that lost when I went deep exploring the website.

Posted in: Design notes

Tags: , ,

Good e-commerce design: threadless

As well as selling awesome t-shirts, their website rocks.

I found it attractive, easy to navigate, great graphics. Best of all, once you add a tshirt to basket, it takes you back to the list page, save you a single click but when you’re adding multiple t-shirts to basket it does amount to good efficient design.

Threadless – you rock.

Posted in: Websites

Tags: , , , ,

Bug tracking in Software Development: Zoho Projects

Used Zoho Projects briefly to track UI bugs with a working prototype of a website.

For most of the tasks it worked quite well, in particular entering new bugs was quick and easy. If you made a mistake however it’s a few clicks to move the bug to another category.

This shows a hover over effect, hiding repeated actions under each item until the mouse hoveres over it.

Posted in: Design notes

Tags: , , , , ,