Archive for the ‘usability’ category

Build your website from reusable components

Tuesday October 9th, 2007

Building an entire new website from scratch is a large task. To ease the task, we often tend to fall back and reuse parts of old websites we have created. This is how you evolve your own look-and-feel. As we develop more and more websites, our vocabulary of possible outcomes of a website designs increase. We thus become better at building websites over time, as our over time larger design vocabulary lets us pick and choose exactly what we want. Our designs in this way become more and more refined as we develop more and more websites. Our experience grow.

We are all in the same boat! What separates us is the magnitude of our experience: the number of websites we have created. You, the reader might just have created your first website, or you might be a veteran – either way you are in quest for the same thing: to expand your design vocabulary.

Fortunately, we are all in luck. Several individuals and organizations have been jotting down their experience in website design, and put it out for free on the internet for you to use. These websites hold collections of user interface design patterns. In formal words, design pattern are:

“…recurring solutions to solve common problems…”

Source: ui-patterns.com

Jennifer Tidwell continues:

“Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems. They’re common problems, and there’s no point in reinventing the wheel every time you need, say, a sortable table — plenty of folks have already done it, and learned how to do it well.”

Source: Designing Interfaces

At motigo, we find design patterns extremely useful. This is why we would like you to get started using them. Why not harvest the knowledge of many experienced designers before you? Start out by checking out these sites:

How have you used design patterns? And have you been using them without knowing about them?

Designing events view in motigo calendars

Wednesday August 15th, 2007

As we had built the recently launched motigo calendar, we quickly realized how important the events view was. You can add events to your calendar in two ways. One is subscribing to a news feed, the other is through the events overview page.

The events view is the page where all of your own events are listed (feed-events aren’t listed here, as you cannot edit them). The list provides edit links, so that you can alter the details of your already added events. So the primary purpose of the event view is to let the user browse through all of his events in a quick way, in order to find the exact event the user is looking for.

The peculiar thing about a calendar is, that you can both have events in the future and in the past. The most relevant events for the user will most likely be centered around today’s date, and not in one of the extremes: past or future. This also means that it does not make sense to sort events by their extremes (by the event with the oldest date or by the event with the most future date), but rather by the center: today.

Version 1

At first we had just chosen to list the events ordered by id – that is ordered by creation time. This would put the most recent added events on top, and thus provide feedback for the user to let him know that his event has been added (as he could see his newly added event on the list). For feedback purposes, this list worked great. But if you wanted to find that specific event you to either edit or delete, the browsing through pages of events sorted by creation date was not acceptable. You could of course search for the event, but then you would need to know what the title of it was.

Ordering the events by start date does not make sense in itself either. The most relevant event is not one that starts in 2012 and not one that happened in 1995.

When looking for a specific event, you always know that it either hasn’t happened yet (in the future) or that it already happened (in the past).

Introducing today’s date as the center of the events view:

Version 2, unfolded

Adding today as the center means that you can know browse in two directions: either further back in the past or further ahead in the future. We therefore introduced two paginations: One for pages in the future and one for the past.

This view works much better as the most relevant events (the ones closest to now) will always be shown on the base page of the events view. You can then choose to browse toward either of the extremes (past or future).

Having to pagination directions is all nice, but if you haven’t filled your calendar up with that many events yet, you don’t want to be bothered with information about how you can browse the future or past- you just want the few events you have to be shown.

Version 3

So the last thing we added was that. The fancy pagination arrows in the left margin are hidden when you just start and will get shown once you have use for them.

We also added the capability of looking up a specific date as a nice shortcut to finding the events you are exactly sure when is.

Developing software is not always straight forward, if you want to deliver a nice user experience as well. We hope that his insight into how we conduct iterative development will help you continue your progress in developing the perfect website of your own.

Redesigning the frontpage, step 2

Monday June 4th, 2007

We earlier described the long iterative process it was to redesign just a banner on the front page of motigo.com. We recently launched the last part of the front page redesign, which was a result of an even longer iterative task of trial and error.

The starting point for the front page redesign in the start of May 2007 was:

Front page of motigo.com - start of may 2007

We had several things that we wanted to change in the old layout

  • We wanted to promote the Developer blog
  • We wanted to get rid of the bottom “how it works” box that explained that you could signup and get access to our services – only through icons. It was an idea that looked good in the eyes of our designer, but confused more than did good in the eyes of our users
  • With the new front page top banner, it did not make sense to have the signup box so close to the signup-button of the top banner
  • The graphics that showed how the blind-down worked was outdated – and is soon to be irrelevant (oops – did I say too much?)
  • The static content explaining what motigo.com was all about was more confusing more than explaining.

As soon as we had the change, we changed what we could and removed the bottom “how it works” box, put in a box printing an excerpt of the latest developer blog post, and moved the blue signup banner down lower on the page.

"Front page of motigo.com - mid-may 2007

But, what is motigo?

When conducting “heuristic evaluations”:http://www.useit.com/papers/heuristic/heuristic_evaluation.html on motigo.com or in other words: When letting potential users browse motigo.com in order to find usability issues, the most often heard quote was: “But what do you do? What can I use the site for?”. Admittedly, this is far from the result we wanted to hear, why we took immediate measures to improve the general usability of motigo.com. The frontpage is only the first of many great changes to come.

Even though we in clear text explained what motigo was on the front page, users answered that they didn’t understand what our concept was. They admitted that the new frontpage banner had helped dramatically on their understanding, but that they could still use some more guidance. It came clear to us that our visitors did not all visit our about pages to find out what motigo is, but sometimes gave up on the front page, when they could not find an immediate answer.

We needed to more clearly communicate what motigo is about – without too many unnecessary distractions. Based on heuristic evaluations and what our analysis told us, we agreed to concentrate on showing:

  • Screenshots of our services
  • Explanations of each service and motigo.com that make sense
  • An excerpt of our Developer blog, as this communicates who we are and what we stand for
  • Easy access to sign up

Finding a way to show screenshots of our services in a manner that matches the cleanness of our general look and feel was a dificult task. We had several solutions up on the table:

Screenshots proposal 1

Proposal 1: Looked clean, but did not give room to explanations of each service.

Screenshots proposal 2

Proposal 2: Trying out the bubble layout from our about pages. It unfortunately did not fit all of our services in the way we wanted.

Screenshots proposal 3

Proposal 3: Showing the screenhots alone without too much extra graphics turned out to be a good solution. At the same time, we could put in explanations of each service neatly together with each screenshot.

Screenshots proposal 4

Proposal 4: Adding the color code of each service gave the final touch that added the right amount of style and nice feel to our front page that we feel suit motigo. It also helped show that we use colors to distinguish between our services and what those color codes are.

When inserting the new screenshots and accommodating explanations of each service, the frontpage came to look like this:

New frontpage of motigo.com - ultimo May 2007

We are very happy with the result and have now started working on a redesign of the webmaster administration area, that will bring coherency into play and give a great overview of all your motigo services.

We also have plans to create tutorials and guided tours for each of our service.

Redesigning the front page step 1

Friday April 27th, 2007

We are constantly trying to make small tweaks to make motigo a better place for you to spend your time. We strive for a usable yet aesthetic website. The fine balance of aesthetics and usability can however be tough to find. It is a often a result of a long iterative process of trial and error rather than a magic splash of geniality from our designers. For each little change you see in our products, such long process of trial and error lies behind. Creating the perfect website for you to use requires much effort and energy.

As an example, I will take you through the process of redesigning the front banner on motigo.com. It is a part of a total redesign of the front page – just a part of yet another iterative process.

When we first launched motigo in beta, we had a flash banner showcasing motigo and our main products. Although this banner was pretty, flashy, and had some “wow” effect to it, it did more wrong that it did good. It left visitors saying “nice site, but what is motigo?” Of course, our egos could not live with this, why the process of designing a new and more friendly welcome page (and banner) began.

The starting point in the beginning of April 2007 was this:

motigo.com - April 2007

We had several goals for the redesign, although becoming aware of these we just as much an iterative process as designing the graphics itself.

The goals for the redesign were:

  • The less reading required, the better
  • The clearer the statement, the even better
  • Simplicity over featuritis
  • What motigo can help you with needs to be clearly stated
  • We wanted to clearly state what services we provide and what they are
  • To start take advantage of our free services, you need to sign up
  • A very important selling point of motigo needs to be stated: it’s free

The frontpage banner looked as this:

motigo.com -front banner v0

It didn’t really fulfill any of our goals.

It had a lot of text that was too small and too long to read (and too boring as well). The flashy effects of the banner gave the page a severe featuritis. When you moved your mouse pointer to click a service, the banner moved into something different. When you finally clicked anything, you were just taken to the sign up page instead of being presented with a proper page that could elaborate on the service clicked. It obviously didn’t work.

motigo.com -front banner v1

The first redesign captured a lot of our goals. The reading had been drastically reduced. The message was getting across much better. We now state what we can do for you, and with what tools we can help you kick ass. The featuritis was gone.

The banner was however one big piece of graphics, all linking to one page. We also needed to state that you need to sign up to get access to our services. It was however much better than the prior banner, why we put it up on the page immidiately. After a few days, we had ideas of making it much better.

motigo.com -front banner v2

The next redesign first and foremost included a sign up button. The background color of the banner was made brighter, and to illustrate that a signup would give access to all of our services, we made a gradient background becoming brighter towards the sign up button.
We also had an overuse of the motigo font (Yup, we have our own specialized font. Pretty cool, huh?), why the Tahoma font of the rest of the site replaced the subtitles of each service and of the main message (to the left).

motigo.com -front banner v3

Next, we realized that we left out the most important selling point of our services: it’s free!
This is why we added a banner showing that motigo is free. Realizing how important this actually is for how we help you kick butt, we made the “FREE FREE FREE” banner even bigger and darkened the font:

motigo.com -front banner v4

Tadaa! And that concludes the trivial task of designing a new welcome banner. On an after thought, we are aware that we shouldn’t bloat the banner too much with extra small banners and small gizmos. Then we’ll just end up creating a “parody”:http://video.google.com/videoplay?docid=36099539665548298 of the starting point.

Much work goes into the smallest task. In this way, we are slowly moving towards a better motigo that will help you make your website kick some serious butt.