BaseKit

5th August 2010

You can always focus on your proper execution of the design principles, but what about creating a rich user experience through the use of psychology? Understanding more about your viewer as an individual and meeting their needs is the core foundations in Maslow’s ‘Hierarchy of Needs’ as pertaining to design.

What I’d like to do is go through each level of the hierarchy to help you better understand what exactly your client needs or wants whether you are providing them a site, game, or application. Creating the base of our hierarchy ‘pyramid’ is functionality. What good is your product if it doesn’t work?  Having the basic functions of your website in place such as ‘Back’ and ‘Forward’ and you links hyperlinking to their correct destination. Because since the internet’s public induction, these are the core elements that are expected out of any website.

Reliability is the second tier of our hierarchy structure. Making sure that your site’s performance isn’t only stable, but it remains consistent, time and time again. People look for reliability in the products they use. If it worked fine yesterday, why not today? With little to no reliability you can also expect little to no people wanting to return to your site. It’s easier to get frustrated with unreliability and just walk away.

Is your site  or design over complicated? You don’t want to complicate things and confuse your user.  In addition to being easy to use, is your design forgiving? If the user messes up a portion of their sign-up form and it erases all of their previous entries or crashes the site, let’s face it, I would think it would be considered a usability failure. A usable website has a navigation system that is easy to understand and use, an organization that makes content easy to browse, readable text, and a layout in which orienting oneself is straightforward.

Designs regarded as proficient are perceived to function at a high level. A design that allows people to do things not previously possible and to expand on basic functionality is considered to be great. A proficient website might include advanced search options, the ability to combine data from different sources into more sophisticated levels of information and Web-based tools.

After all of the base needs have been met you can start to explore your creativity, which is the top of the hierarchy. Try to provide your user with a rich experience, give them options if need be. Think of fun ways to incorporate them and let them have a bit of fun themselves. You can add certain changes to your design to accomplish this. A creative website might include AJAX effects, aesthetic appeal and interaction through voice commands. Do we really have to get everything right at one level before committing resources to higher levels? Will a market tolerate a product that fails for no reason 10% of the time if it does everything beyond expectations the other 90%? Again, while the hierarchy intuitively makes sense, the needs and desires of the market will likely determine what is most critical to improve in the hierarchy.

Less is more – the simplest designs are often the best.  You don’t want to over-populate any one of your web pages with too much of anything (images, content, etc) and you certainly do not want to make your readers scroll down a page for 30 seconds to find what they are looking for.  Have a good balance, make sure everything is easy to access, and make sure your site looks neat.  When things have been laid out in a way that has some order to it, and is not just clustered together, it is more professional and is much easier to look at, both initially and for extended periods of time.

Do you think this process is a waste of time? Or does following these core design principles based out of psychology help you succeed online?

This post was written by Joshua Rapp of Rappsody Studios creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!

Read More

5th August 2010

Before you read any further, please realise that this post is in no way a dig at graphic designers! I have the upmost respect for talented graphic designers, some of the pieces they produce are truly amazing and I only wish I could be as creative and as talented as some of them. Now that the “disclaimer” is out the way…

There is an overlap between the skill set of a graphic designer and a web designer – creativity, colour theory, creating unique and visually appealing designs etc. However when it comes to web design there are an abundance of extra skills and knowledge needed by the designer.

I have recently taken on a project where the client told me that they had a graphic designer who they wanted to design the site and that they only needed me to code the site – sounded good to me at the time. It was only after looking at the mock-up of the site that I actually realised the big differences between the two trades. There was a lot in the design that I proposed we would have to change in order to make it usable, accessible and updatable via CMS with minimal pain. Here are just a few of the issues I found.

Screen Size and Browser Size.

Before a graphic designer plots their layout do you think they consider screen size or browser size? If they do, they have either done a massive amount of research or have designed web layouts before – making them a graphic/web designer.
In my case, the mock-up consisted of a “floating window” of the site’s content in the centre of the browser window. The “floating window” effect was the aspect of the design that client liked best.

Floating window effect

Now that is all well and good, providing that the site was to never have more content added and the existing content was minimal enough so not as to appear cramped inside the window. The design was for an ecommerce site – a site that would be updated regularly and new content added.

On the plus side, the width of the mock-up was based on a 960px grid – I’ll be honest I was surprised.
Maintaining the floating window effect was my major issue with this design, I almost cried when I saw it – being the guy who was building the site, I was fully aware of the problems this could cause, problems that a graphic designer probably wouldn’t have even considered.

The height of the window would have to depend largely on the end user’s browser and screen size in order to maintain the floating effect and to keep the base of the frame above the user’s fold line. As web designers we would be aware that there are massive differences in not just user screen sizes but also browser sizes, for example the fold line in Google Chrome is a lot lower than it is in say Internet Explorer.Add any toolbars to the user’s browser and the fold line moves again. Would a graphic designer have considered these things when designing the site?

Now this floating effect could be done using CSS and percentages, but what then happens to the content inside the window? This will need to change in size depending on the size of the window, will a much smaller window result in an unreadable font size, will content become too cramped etc? My big issue was that this is an ecommerce site – which tend to contain a lot of content, and new content added regularly. It would be almost impossible to maintain this floating effect for this type of website – ensuring the base of the window was always above the browser’s fold line.
However we came to a compromise on the window effect, we would include the frame in the site but not worry about the “floating” effect – as after all if you are building an ecommerce site some pages will invariably be much longer than others and fall way beyond the fold.

Usability & Accessibility

When a graphic designer is planning their latest piece of artwork, their greatest concern is how the piece looks and potentially any message it conveys, they don’t have to worry about whether it is usable. When a web designer is planning their latest design, as well as considering the look and feel of the site, they also have to consider usability and accessibility.

Fonts

A web designer will view the content of the site as the most important aspect and will generally design the site around the content. They will consider typography carefully, everything from font size, line height and line length to ensure the content is as readable as possible. They will tend to stick to web-safe fonts and are fully aware of which are the best to use.

It is unlikely that a graphic designer will be aware of web-safe fonts, or even consider them. In my experience, I find that graphic designers will tend to adjust the content to fit their design as opposed to designing the site around the content.
In my case, the graphic designer had used non standard fonts for all headings across the site. This left me with a choice – change them to a safe font or use images for all the headings – meaning larger file size and longer downloads plus an accessibility issue for visually impaired users.

Links

Does a graphic designer consider how hyperlinks stand out from content and headings within a site? I’m sure a lot would, but do they also consider the active, visited and hover states of links?

Updateability

Does a graphic designer consider any potential future updates to a site when designing a web layout? In my case, they had clearly not. The front end of the ecommerce store had allowed for four product categories, each with an image link to the relevant pages. I asked the client if it was likely they would be adding anymore categories to the store in the near future. Their answer was yes. Now based on the graphic designer’s layout, they would have had to have redesigned the store homepage completely to add any new categories – which they wouldn’t be able to do themselves via the CMS – meaning they would have to rehire me or another developer every time they wanted to add a new category.

This is not a Dig! As I mentioned at the very beginning of this post, I am in no way whatsoever having a dig at graphic designers or the designer I worked with on my project, just simply trying to point out some of the major differences between the two trades. The designer I worked with was clearly very talented, his work did look great; it just wasn’t great for the web.

In my case, the client absolutely loved the graphic designer’s layout – meaning I had to play the “bad guy” by picking apart the aspects that wouldn’t work online – this whole process in itself took more time than it would have done had I designed and coded the site myself.

I guess the point of the entire post was to not only point out some of the differences between web and graphic design, but to act as a note of caution to designers/developers who agree to code somebody else’s design before seeing it first.

This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!

Read More

4th August 2010

We have spoken before, dear reader, of the Internet’s focus on feline idols. We concluded that, from Maru to keyboard-cat, the Internet is in thrall to four legged, be-whiskered kitties.

But what of our four-legged canine pals? Our pedigree chums? Our doggy buddies? Are they represented in such staggering numbers?

In short – no. The ratio of dogs to cats on the Internet is impossible to establish unless you have an infinite amount of time and fingers on your hands, but it’s blatantly obvious to anyone who wastes any amount of time on the internet that there’s simply not a suitable number of pooches online to form even a vague assembly of competition for their opposite, mewling number.

Has the dog truly had its day? Is the Internet really so barren, dog-wise, that there aren’t even enough examples to scrape up for us to see how far they’ve come?

Again: in short, no. The Internet is a massive place, and whilst there might not be entire web zones devoted purely to dogs who look like infamous German dictators, there is at least plenty of fun stuff to look at.

Like the Daily Puppy, which is as good a place to start as any. This is a blog which does exactly what it says on the tin. If there is a hole in your life into which you could quite easily slot the viewing of a weblog in which each day brings a new, wet-nosed, floppy-eared infant dog, then look no further. The Daily Puppy takes the fact that even the hardest heart will melt at a decent puppy-pic, runs with it, then exploits it till traffic booms.

Moving on to less straightforward examples, I Haz a Hotdog is worth a visit, as it’s essentially I Can Haz Cheezburger but with a proliferation of dogs where its mother site would carry cats.  It’s chucklesome, for sure – but beyond that, it doesn’t have the longevity of the original site. Like it or not, the sight of a confused dog, captured in time, is simply not as amusing as a picture of a baffled cat. I’m sure this basic truth can be proved with science, if it were to come to it.

Perhaps more amusing than that is Fail Dogs, a Tumblr blog simply stuffed with dogs, failing at things. But it also features dogs winning at stuff, to even out the balance. From the failing pug struggling not to flush itself down the toilet to the westie who’s found a killer disguise, there’s enough here to while away a gloomy afternoon.

A slightly less successful site, Dogs Looking Like People is also worth a look. Even though, at times, it’s unbearably creepy. Another Tumblr blog, this one carries photographs of dogs in situations where they look uncannily humanoid, or have adopted humanoid poses. Where some of them simply make you smile and coo ‘awwww’, OTHERS will have you shifting uncomfortably in your seat as you start to question whether or not dogs might actually mean us humans harm.

Youtube obviously offers us a decent amount of doggy goodness, being as it has videos of everything under the sun, providing it’s legal. It’s also populated with animal lovers, so it’s no surprise that there are tons of videos featuring our furry pals.
Sadly, most of them are incredibly tedious.

But still, there are some delights to be had with the likes of this video, one of my particular favourites, which is nothing more complex than a stay dog mischievously vandalizing a car. The best aspect to this short clip is that the dog repeated the feat at a later date, in exactly the same circumstances. I salute that dog.

If you’re looking for fun on Youtube with dogs however, it’s best to search for a specific breed. Searching for a pug brings up this brilliant example of a fourway head tilt. Searching ‘westie’ will bring you this seemingly unironic video of a pensive West Highland Terrier as he looks out of the window and thinks deep thoughts, to a soundtrack provided by Sting. But really, on Youtube, once you get past the whistling and talking puppies, it turns into a bit of an entertainment hinterland. Apart from this talking dog, who can genuinely, actually, really talk.

Video’s great, but what about streaming live footage of dogs? One of the most popular live webcam feeds in the known universe at the moment is Shiba Inu Cam, which documents the daily lives of a pack of infant Shiba Inus – a small Japanese breed which is unutterably cute and slightly snappy. If you don’t have a dog of your own, the appeal of this realtime window into the development of some pups might, potentially satiate that need – though you will encounter problems when they all cavort away from the camera, which happens far more often that it ought to.

So – there are plenty about, but why such a lack of a buzz-culture around dogs whilst cats have an enormous and endlessly unsatisfied fanbase on the Internet?

What is it about dogs that make them so unappealing to web-users?

Probably the simple fact is that dogs are obedient and largely predictable creatures. And that’s why we like to have them around, and why they serve us well. Cats, on the other hand, are relentless free-loaders who would no more consider posing for the camera than they’d turn down the offer to chase a rodent that’s running away from them.

This, then, is why cat pics are so damn funny. A creature that’s highly disobedient, captured in time looking ridiculous is always going to be more amusing, and attract more of a cult following, than an animal like the dog, which frequently looks ridiculous anyway and couldn’t care less – and indeed would even make itself look as ridiculous as it possibly could if it meant it would get a cuddle.

Ultimately, it’s the cat’s petulance which turns its kind into internet gold.

This post was written by Liam Tucker of the excellent Watch With Mothers. Which is another great way to waste your day. – Want to write for the BaseKit Blog? – Drop us an email.

Read More

3rd August 2010

Writing for web is, in many ways, actually easier than writing for print. You can be a little more colloquial with your language even if working for a major company, simply because the general tone of the entire internet is a free-and-easy one, where everything tends to be approachable. It makes life easier, not being tied to the hard and fast rules of grammar and punctuation, and it makes for an easier read when that kind of starchiness is removed.

As a writer, you’ll have developed a digital style that’s perfect for readers familiar with the relaxed atmosphere of online copy and you’ll have worked on this by reading as many blogs, webpages and online articles as you possibly can, because that’s the way to get it right.

But when it comes to grabbing an audience, traditional means can often fail when viewed in the online environment. A catchy post header and follow-up strapline will work wonders to hook a reader in when they read a hard-copy magazine, but on a computer monitor or an iPhone display, a traditional layout can tend to look blocky and to some extent impenetrable. Because of that problem, your best solution is to break text up, bullet-point like a trigger-happy but coherent soldier and signal to your audience when you’re going to move from topic to topic.

Below are a few article layout ideas you can use to instantly make copy more web-functional, and provide an immediately appealing layout that should, if the copy is engaging, reel readers in like willing fish on a hook. They also provide a good starting point for writing, because going into a piece without an idea of how you’re going to structure it can be a nightmare, even at the best of times.

Lists

Everybody loves a top ten. It takes us back to our childhood, listening to the charts and deciding what singles to buy with our pocket money. We make lists of our favourite movies, we watch endless Channel 4 specials which create hierarchies of the best stand ups, the best sitcoms, the best whatevers… So take a tip from magazine editors and TV producers, and start making your own lists. If you’re working for a gadget company, avoid writing a rambling thesis on the best affordable digital cameras. Compile a list of the best on the market. Rate your findings to add value. Come up with an overall winner and make a sub list of the three worst.

When seeing a Top 10, a Top 20 or a Top 100, a reader’s instant reaction is to want to know what made it to the top – and by that point they’re already deep into your text.

News

A major flaw of many online arenas is a total lack of news. The value of updates on a chosen topic is very often underestimated. Which is baffling, because news stories can keep a website vital and vibrant, and online discussion is always easier to ignite if the topic is a current one.

These updates don’t have to be exclusives, or even from the same day’s morning papers. They can be your thoughts, or your company’s thoughts, on an ongoing issue in the news. They can be a reaction to an interview you saw in the paper at the weekend. They can be Youtube embeds of news videos that will affect your company or your customers. So long as it’s recent, fresh and worthy of discussion, it should go up as posting this stuff will boost your keywords, encourage discussion and keep your website fluid.

Galleries

Particularly good for sites looking to profit from traffic, galleries guarantee that viewers will click through from page one to page ten without even thinking about it. Add some commentary – wry, informative or link-heavy – alongside your piccies and you suddenly have a worthwhile article out of nowhere. The only possible issue here is one of image rights – so source responsibly and you’ll get results from a simple collection of jpgs.

Reviews & Previews

Where people love fresh news, they also increasingly look online before buying music, choosing a holiday destination or picking an evening movie. There are infinite numbers of review sites out there, but all the same, if yours are good enough you can get yours noticed. Whatever your chosen topic, write about stuff that is fresh and in demand. Ensure that what you write about has a guaranteed hoard of Google-happy fans and find ways to direct them to your post.

Even better, if you’re signed up to the right kind of press agencies, get yourself down on the CC lists of PR companies so you can actually get news of upcoming products at the same time as – or even ahead of – the competition. Previews of massively in-demand projects will always drive masses of traffic to a site, because when people are excited about something, they’ll always want to read about it and will trawl the web for even the slightest of information. If you provide even a grain of that information, you’ve guaranteed yourself some traffic.

Questions

Finally, if you have yourself a guaranteed readership and a crowd who regularly comment, it’s time to wheel out the total immersion social media interaction. By asking questions of your readers in a forum kind of way, you’re encouraging people to use your site as a medium for discussion and the importance of that is overwhelmingly huge. When they engage with one another in your backyard, they’re familiarising themselves with your branding. They’re actively aligning themselves with your state of mind and they’re telling you that they’re happy to be associated with whatever product or idea it is that you deal in.
So ask questions of your people. Open-ended questions are the best, because then – by offering no opinion yourself and by demanding that they expand on a vague proposition – you’re essentially inciting them to babble. So grab a newsworthy topic, fashion a very much wide-open query out of it and then wait for the answers to come. Chip in yourself in the comments area, then sit back and watch the traffic rise.

Read More