Monday, February 15, 2010

Building a website using wireframing

Can you believe that this is the THIRD time I am writing this? I always have a bajillion tabs open at once and when I'm closing some of them, I always accidentally close the one I'm working on. SIGH!

Anyway, in class we learnt about attention-mapping and wire-framing. Both are techniques which are used to assist in laying out a page effectively to achieve particular goals, namely usability, and in the case that the site is used to market a good or service, the purchasing of the product!

In class, we used attention-mapping in order to rank each element of a fictional dog grooming site in terms of what would 'best help to put food for grandma on the table' (love my multimedia class), and then we used this website, Go Mockingbird, to assist in wire-framing, which is the actual physical process of laying out each element on a page and deciding where each should go, how big each should be, etc etc.

I'll admit that when planning my version of the dog site, I worked backwards. I'd already envisioned the way I'd like it to look based on some sites I frequent that sell goods/services that I think are already very well-designed. Examples of these are 3rd Ward (awesome art facility in Brooklyn that hosts the best events, like Wednesday's Drink n Draw), and the clothing sites Nasty Gal Vintage, Style Stalker and Shop Cuffs (see? shopping can be educational too).

What I noticed for all these sites is for the homepage, there's always a really huge attention-grabbing picture as the main focus, which advertises the site by showing which promotions or events are currently happening to grab potential customers. Our class rated sales/current events as pretty low on the list of information to be displayed, but I disagree, as even before a person knows much about a product, he/she'd like to know whether it's affordable, or what events the company is having that he/she can go to that are possibly free, before they click further on into the site to only waste their time.

Something we didn't talk about in class that I learnt during my internship at BurdaStyle is how much internet businesses value the user's clicking habits. They use programs like google stats to see whether a user 'bounces' off the first page, or which pages they continue to on the site before they lose interest. This is especially important if the site is going to earn you revenue (through google adsense, for example).

A homepage is tricky business, therefore, as it plays special importance. You want enough information there in order to pique interest, but you don't want too much so that the reader will glance and become overwhelmed, or won't be tempted to navigate through the site and be convinced by doing so to purchase the service. Usability is also super important, otherwise the potential customer will become frustrated and decide to go with another service.



In the end, I decided that if I were building a site, I'd go with 3rd Ward's idea of using a flash banner to display any exciting promotions/events which are ongoing or coming up to first lure the potential customer. I'd make the first frame a picture with a very brief (2 lines at most!) description of what the dog grooming service is, exactly, and it would be clickable so that the other pages lead to the exciting sales/promotions offered on the site. I'd have clear instructions for how to use it, "click on the arrows to see more events!", because it would make the site more user-friendly.

Woo this post was long, that's it for now!

No comments:

Post a Comment