web design « motigo magazine

Posts Tagged ‘web design’

Is your website user-friendly? Test yourself!

Wednesday May 27th, 2009

Usability is such an important factor for the success of your website that it should be on your mind from the beginning on. The rule for the usability test is: The sooner the better. The best is to start testing website usability before you start working on your website: Ideas, concepts and drafts are easier (and cheaper) to change than existing websites. But, of course, it is never too late to start optimizing your website and make it more user-friendly. The only things you need to conduct the usability test are five test persons and some time.

5 Methods to check usability:

Card Sorting for user friendly navigation and menu structures. Write the name of each of the main items (products, topics) of your website on paper cards. Give each user a set of cards ask him to sort them thematically. This will help you find out which topics belong together in the eyes of your users and tells you where they expect to find the information they’re looking for. Use this information to determine the menu and navigation structure of your site.
Paper Prototyping helps you test if your site structure makes sense. Draw your website on paper. Do not concentrate on design issues, but only on the structure: How are website pages organized hierarchically and how are they linked to each other? Let your test users perform real tasks with the paper prototypes and watch their reactions. Ask them also for feedback and suggestions.
Interviews to find out more about user-experience. Ask your test persons about one aspect of your website. If you conduct written interviews, it is recommended to use closed questions with predefined answers (yes/no, I agree totally/ I agree partially/ I disagree). If you interview your test users personally, you can use open questions where users can reply freely. Interviews will give you important feedback and will help you look at your website through the eyes of your users.
Thinking aloud will give you high quality feedback during testing. Let your test user perform a task and ask him to explain his decisions. What is he doing? Why did he choose this option and not another one? How is he feeling? What is his opinion? Thinking aloud will give you important information about the user’s mental and emotional interaction with your website and can give you many good ideas for improvement.
The Five-Second-Test is a fast and easy way to test the functionality of your website. Here, you let your test user perform a certain task again (for example, if you sell products, ask the person to tell you how he would go about buying a certain product). Let the person look 5 seconds at your website without scrolling or clicking on links (you can also use a screenshot). After that, ask the person to tell you what he remembers from the website. This will show you what catches the user’s eye and tells you if your images, titles and banners are sending the right message to the users. On the next step, ask the test person to perform the task. If he has difficulties or takes too long, this means your site is confusing and needs restructuring.

Tags: homepage, usability, usability test, web design
Posted in Tips & Tricks | 8 comments »

Adding effects to your website

Tuesday October 16th, 2007

This post might be a little over the standard in terms of technicality. But then, this is a developer’s blog, so why not enlighten you. In this episode, we are going to teach you how to add very simple effects and animations to your page.

Over the last few years, the term AJAX and web 2.0 have become synonym with bleeding edge web software. Although we are not going to show you how to do AJAX, we will show you how to use some of the really nice javascript animations that are available in today’s web 2.0 world. This short tutorial DOES require that you know of some HTML and that you have put your eyes on javascript before. So let’s get this started.

We’re going to take our starting point in the Scriptaculous javascript library (which is an extension of the prototype library). The combination of Scriptaculous and Prototype is what we have used at motigo from the beginning.

We start out by having a <div> layer, which is a standard element in HTML. Our <div> looks like this:

<div id="my_element" style="width: 200px; height: 50px; background: red; color: white; padding: 5px;">
  This is the content inside the DIV
</div>

The code above produces this: (a box with the dimensions of 200×50 pixels, a red background, white text, and an inside margin of 5 pixels)

This is the content inside the DIV

Now - we can begin to manipulate it. Notice that the ID of the DIV is my_element. That means that we can do this (with scriptaculous and prototype loaded):

<a href="#" onclick="Effect.toggle('my_element', 'blind'); return false;">Toggle blind effect</a>
<a href="#" onclick="Effect.toggle('my_element', 'appear'); return false;">Toggle appear effect</a>

This produces this:
Toggle blind effect
Toggle appear effect

Try to click the links and see what happens with the red box.

Pretty neat. Pretty simple!

The reason why we say return false; in the end of the onclick="" attribute, is that we don’t want to redirect the browser to the link of href="".

What allows us to do all this, is because we have Scriptaculous and Prototype loaded on this page. We have done so, first by downloading the Scriptaculous and Prototype files over on the Scriptaculous website, uploaded these files to our server, and including the following HTML code at the top of our page (inside the <head> tag):

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>

The downside of using Scriptaculous and Prototype is it’s large size (in kilobytes). Other smaller libraries include Dojo, MooTools, and Ext JS.

Let us know if this is too advanced, or if you would like to know more.

UPDATE: This article seems to have hit a too high level of complexity. We are sorry if all this doesn’t make much sense. The primary problem our readers have experiences is that they are not aware that they need to upload the javascript files from Scriptaculous and Prototype to their own server - and that it is those files that allow us to do the effects.

NOTICE: The effects work in the most popular browsers. Some older browsers are not supported.

Tags: web design
Posted in Tips & Tricks | 10 comments »

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:

UI-patterns.com
A rather new, but also rapidly updated website focusing on combining theory with practise with the goal of providing tutorials for each pattern.
Designing interfaces
A veteran in pattern libraries. The contents of this site has even been published in book form
Welie pattern collection
Perhaps the largest design pattern collection out there.
Yahoo! design pattern library
Design patterns used at Yahoo!

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

Tags: design components, web design
Posted in How we work, usability | No comments »

New account overview

Friday June 15th, 2007

Things are really starting to get better at motigo!
We are very happy to announce the launch of the new account overview. A feature that was both widely requested, but also extremely important in bringing the motigo services together.

When we first launched motigo in the end of March this year, the most important thing for us was just to get motigo up and running. It is now - a few months later - that we can actually start to tweak motigo into being what we actually want. The new account overview and the recent frontpage redesign are some of the more visual steps we have taken in this direction.

As usual, we will give you an insight into the design process.

As opposed to earlier redesigns, we actually didn’t have anything to redesign! The account overview has been non-existent until now. We wanted the new page to fulfill a list of things:

First of all, the overview should bring all motigo services together: giving an overview
The page should function as the natural “home page” - the page you always end up on when you want to do something new
We wanted as much of motigo to be accessible from only one page
We wanted to communicate the colour scheme of motigo, where each service has its own color

Our first thought was to reuse the toolboxes we have so far used for the forum/guestbook/shorturl admin pages as these had the color of the respective service in the header. The result came to look like this:

We chose to take the approach of designing everything straight and only in HTML instead of taking the usual photoshop way that many designers choose. Doing the design in HTML only gave us several benefits:

The actual interface is at the center of the attention at first. There is no spec: the interface is the spec.
An interface is not a wireframe that we can just slice up and magically transform into an HTML document. Neither is it a photoshop mockup.
Creating a mock-up of the interface in photoshop will produce a design that matches the constraints of photoshop - not the constraints of HTML. We should therefore embrace the constraints of HTML.
When we build it only in HTML, we can actually use real and live data while building the design. This helps surfacing problems that photoshop would otherwise hide
The interface is at life from start. You can click it, try it out, and feel it.
You will get something that works very soon in the design process
There is no monster integration in the end.

Although the new and colorful proposal was better than anything we had before (we didn’t have anything) - it was too much. Too colorful and tivoli like. Plus - the boxes approach to showing each service did not always line up nicely, when a user had services in one category than the other.

The next approach was to list the services in one big list and now side-by-side. We removed the colorful header of each service and give it a more settled look:

This however proved to be a little too settled. This meant that we didn’t get to indicate any of the colors of the services. So we added a little bit of color:

Again - this was too much. The final solution would be just to have a small box indicating the color of the service:

Account overview - proposal 2.2

We also wanted to add several things to the overview page, so that the user would go there as a natural thing to find just the information he wanted to see. These things included basic information about the logged in user: his name and email, but also the current time in the timezone he had selected. As we have users in many different countries, setting the timezone of your account has huge importance as it will determine the time of your forums and guestbooks as well as the base time in your statistics. We also added links to often used and important documents such as FAQs, terms of service, and of course the developer blog ;-).
All this provided the necessary detail to make the Account overview feel like a real motigo home…

Along with the overview, we’ve also added a toolbox that is placed in the same spot on all admin pages, so that you can always find your way to the most important pages of motigo.com. This continuity was greatly missed in the old version of motigo, why we are relieved that we finally got it online.

We also got rid of the top bar with the list of our services, as we now have this list a more natural place: in the account overview. Instead we added a search bar that we plan on expanding to be able to do more in the near future.

We really hope that the newest updates has helped your experience of motigo.com. We are extremely happy about the release ourselves and hope that you will be as well.

Now, go enjoy the new motigo.

Tags: account overview, layout, motigo, web design
Posted in How we work, New features, usability | 3 comments »

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:

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.

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:

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

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.

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.

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:

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.

Tags: layout, motigo, web design
Posted in How we work, usability | 3 comments »

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:

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.

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.

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).

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:

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.

Tags: motigo, usability, web design
Posted in How we work, usability | 9 comments »

motigo magazine