Web Design News 26/07/10

This week: Why the fold doesn’t matter, big wins with quick changes and what’s the best size for a search box?

Life below 600px

If there’s one thing that clients mention that makes designers and developers see the red mist it’s the concept of ‘the fold’. A popular concept from the print era, when newspaper headlines were displayed at the top so that they could be read when the paper was folded, it migrated to the computer age and denotes where content disappears below the bottom edge of the screen. The majority of designers know that most users know how to scroll, and the increase in screen resolutions mean that the fold is a vague concept rather than a defined limit, yet we often struggle to explain this properly to our clients when challenged.

Graphic showing the location of a mouse scrollwheel

Paddy Donnelly has written a fantastic article which is a physical explanation why the fold doesn’t matter, and why designing for a fold may even damage your site goals in certain situations. It’s written in a way where you could send the link to your client and let them learn exactly why the fold doesn’t matter as much as they think it does. So the next time your client asks where the fold is, send them here!

Big wins with quick changes

Lather, rinse and repeat. If there’s one thing shampoo bottles have taught us, it’s that we shouldn’t just do something once, we should keep trying until we’re happy, or our shampoo runs out. In the web design world, iterative design is an effective method of ensuring your site is effective, and responds to user feedback.

Ryan Carson shares a recent iteration of the Think Vitamin Membership site, explaining how the original wireframes how they reworked the wireframes and the site based on this feedback and made some changes to their microcopy which resolved the issues they had in a reactive fashion in a short amount of time.

What’s the best search box size?

Search is an important component of any large website, especially online retailers, yet little thought really goes into how that search box works, and how many characters should be viewable. Luckily for us, Christian Watson has trawled the top 30 websites out of the Internet Retailers top 500 list, and determined the average number of characters that these sites use in their search boxes.

Search boxes from major online retailers

Wether this actually makes a difference or not is yet to be seen, but when that time comes when you have to decide how large to make that search box, remember this little piece of research which will help you make up your mind.

Web Design News 30/03/10

This week: Does the fold matter after all, 5 quick ways to improve your sites usability, how to blog when you’re not a writer and ensure your projects run smoothly.

Does the fold matter after all?

It is with much fear and trepidation that I include this story. Many website owners are obsessed with this mythical element called the fold (the point at which users start to scroll). As a result they often insist that content is crammed as near to the top of a page as possible.

Of course in reality there is no such thing as the fold. The point where scrolling begins varies massively depending on browser, screen resolution and plugins installed. Also, if you insist that too much content is above the fold, it will do more harm than good.

That is why generally speaking I have encouraged clients to ignore the fold. However, although users do scroll and so in a sense the fold is redundant, we do know they give more attention to content higher on the page.

Jakob Nielsen reinforced this fact in a recent post entitled Scrolling and Attention. He writes…

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

Eye Tracking image from Nielen's post

So in truth we should be looking to allocate important information as high on the page as possible. However, that does not mean cramming all information above the fold. Instead we should follow Nielsen’s advice…

The material that’s the most important for the users’ goals or your business goals should be above the fold.

This doesn’t mean the rest of your content will be ignored. As Nielsen goes on to say…

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Essentially the content above the fold has to draw the user in and encourage them to scroll.

5 quick and easy ways to improve your sites usability

So recently we had Steve Krug on the show talking about how we should all be user testing our websites more.

This is something that we all know but often fail to do. Part of the problem is that we are simply not in the habit of thinking about usability enough.

Well this week I stumbled across a post that shares 5 quick and easy ways of improving your website’s usability, while getting in the habit of thinking about usability.

All 5 suggestions are excellent. However, the one I particularly wanted to mention was a service called the 5 Second Test. As the post explains…

It allows you to create two different user tests by uploading a screenshot of your webpage. The first test is a memory test: users get 5 seconds to have a look at your screenshot and need to describe afterwards what they remembered. In the second test, the user can click on the screenshot for a period of 5 seconds and can give a descriptive text on each point.

The results are shown in a handy heatmap-like overview which can be downloaded for further analyses. It is free and you can share these tests with your twitter friends.

http://fivesecondtest.com/

What is so great about this service is that it provides an excellent way to establish if your design has the right visual hierarchy. Do users spot key elements and do they understand what those elements do?

Blogging when you’re not a writer

I have written a fair amount about the challenges of blogging (1)(2). However a recent article on pro blogger has identified another reason why so few corporate blogs succeeded… people are afraid of writing.

notepad

Image Source

Running a corporate blog can be an excellent way of increasing search engine visibility, attracting new customers and engaging existing users. However, many are put off because they feel they cannot write.

This post provides some excellent advice about on to start writing, and even how to blog without writing at all!

The author talks about how to structure posts, how to proof them and also looks at the use of imagery and video. It really is an encouraging place to start if you feel intimidated by blogging but want to try.

There is also some great additional advice in the comments too, so make sure you check them out as well.

Ensure your projects run smoothly

Simon Collison has written a superb series of posts on ensuring projects run smoothly.

There are nine posts in total covering…

  • Goal directed design
  • Collaboration
  • Audience
  • Methodologies
  • Roadmaps
  • Creativity
  • Conventions
  • Prototyping
  • Narrative

I have to confess I have yet to read all nine, but what I have read is absolutely spot on. I cannot recommend them highly enough.

My favourite so far has been the post on collaboration with your client. This is essentially what I was talking about this year at SXSW. He obviously takes a very similar approach. He writes…

I wholly believe that our processes should be inclusive, and that all members of a team can influence all aspects of the design and build of a product.

One of my most stringent rules as a creative director is that anyone, anywhere in the team can feel free to add value. They all have brains and common sense. Anyone, at any stage can contribute an idea, pose a question, throw a spanner in the works.

Amen to that. Best of all, he goes on to say he considers the client apart of that team…

I believe that the client team has an incredible amount to contribute. It’s easy to dismiss those new to the web who may be commissioning the project as “clueless technophobes”…

The danger is to dismiss the insight they can give you with regard to the organisation itself. The client can educate us about their sector, area, community or their place within it. Our job is to listen, discuss, and interpret this knowledge for a web audience.

client, designer and developer working together

I really could just quote from these posts all day, they are that good.

I know nine posts feels like a lot of information to read. However, I cannot recommend this series strongly enough. He should be packaging these as an ebook and selling it for an outrageous price.

196. Interview with Kevin Rose

This week on Boagworld: We interview the founder of Digg.com Kevin Rose, take a first look at Codeslam and plan the future of the show.

Play

Download this show.

Launch our podcast player

Housekeeping

200th Boagworld

On the 12th February Boagworld will have finally reached 200 episodes!

To mark this momentus achievement we are going to do a live 12 hour marathon!

The show will start at 10AM UK time and finish at 10PM in the evening. Guests will include:

  • Drew McLellan
  • Rachel Andrew
  • Simon Collison
  • Christian Heilmann
  • Sarah Parmenter
  • Dan Rubin
  • Paul Stanton
  • Ryan Taylor
  • and many more!

If you want to get involved with the 200th episodes you have 3 options…

  • Come and join us at the Barn for part of the day (drop me an email if interested)
  • Throw a Boagworld Party and dial into the show. To do this simply register a party on upcoming.org with the tag ‘boagworld’ and let me know by email.
  • Email me with why you would be a great guest on the show and we will pick the best to include.

Coming soon: Boagworld Bites

We have been putting some thought into the future of the show and have decided to introduce a new version of the podcast following the 200th episode.

This will not affect the current show that will continue to be released every Friday. However, we recognise that not everybody finds the current show to their taste:

  • Some find it too long
  • Others get annoyed by the banter (especially at the beginning)
  • Others are only interested in specific parts of the show (e.g. the interviews)

We are therefore introducing ‘Boagworld Bitesize (iTunes LinkRSS Link)’, which will be released three times a week. Each ‘Bite’ will be approximately 20 minutes long and will include one of the three sections of the main show. For example a ‘bite’ could consist of the news, an interview, a feature or a review.

This gives you the listener a choice. You can either subscribe to the existing show which is normally about one hour long. Or you can subscribe to the shorter ‘bites’. You also have the option of just downloading whichever ‘bite’ takes your fancy.

Hopefully this will increase our audience without alienating existing listeners :-)

Back to top

News

For those starting out

As this is our first podcast of 2010 it seemed only right to start from the beginning. I would therefore like to recommend a couple of sites that provide some excellent basic information for those starting out.

Now if you have really just started out in web design then I would recommend Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd or The Website Owners Manual if you are running a website rather than building it.

However, if you are looking for the next step, then check out the following two websites:

  • Web Design + – This site is an amalgamation of web-standards solutions for common web development issues and problems — a way to tackle development in the cleanest, most accessible and semantic way possible. It is a great starting point for anybody new to standards.
  • Getting started with jQuery – Six Revisions have recently posted an article providing an outline of jQuery. It asks why use a Javascript library before going on to explain the basics of how jQuery works. It’s a great starting point for any designer looking to move beyond HTML and CSS. That said, it is also good to understand Javascript itself and for that I would recommend DOM Scripting by Jeremy Keith.

That should be enough to keep you newbies occupied ;-)

User experience resources

Talking of useful resources, there have been a couple of new user experience ones worth mentioning.

The first is a post by Smashing Magazine entitled 25 User Experience Videos That Are Worth Your Time. To be honest it is somewhat overwhelming because all of the videos are so good. There is just too much content to watch!

It even has one of my favourite UX talks ever, UX Team of One by Leah Buley of Adaptive Path.

The second resource is a new website called 52 Weeks of UX. The site is the work of Joshua Brewer and Joshua Porter. It appears to be a 52 week project that has only just started. Each week they are posting user experience related articles and judging by the first two it will turn into a useful resource.

The posts are short and easy to digest. I also love the fact that they are not just focused on web based user experience. They are already talking about advertisements, call centres and any other contact point with your organisation.

Ambient user experience

While on the subject of user experience I would also like to briefly mention Ambient User Experience.

I recently wrote a post on stock photography. At one point I wrote:

Good imagery is about conveying a sense of personality and character, not a literal representation of what you do.

What I was talking about there was apart of ambient user experience.

As UX booth explain in their recent post on the subject, ambient user experience is about shaping how users feel about their experience. It does not necessarily make something easier to use and is not intrinsic to getting stuff done.

Instead it creates a tone and personality that influence perception. In my opinion this kind of subtlety sets apart a great site from a good one.

If you have a well established site that has overcome many of the basic problems of usability, accessibility and content, then you should be looking at ambient user experience. This is the area that will allow your website to move froward and not stagnate.

Explaining the fold

Let’s conclude by moving from advanced subtleties of design, to addressing a fundamental basic – the fold.

As designers we love to chant the mantra, “there is no fold.” However, although we know this to be true we are often bad at communicating it to clients.

If you are a website owner, you may well be wondering what us designers are talking about. After all when you load up your webpage you can clearly see the point at which users have to scroll.

What then is the fold and what does it mean to the design of our websites? How do you explain that it isn’t the issue it appears to be at first glance?

Well the guys at Clockwork have attempted to clarify the situation in “How to discuss the fold with clients.”

Although this is obviously aimed at web designers who struggle to explain why the analogy of the fold is fundamentally flawed, it is also useful for anybody unsure about the fold.

In short I would pretty much recommend this post to anyone.

Back to top

Interview: Kevin Rose, founder of Digg.com

At this years at Future of Web Apps I was fortunate enough to interview Kevin Rose, the founder of digg.com about running online community. To read the transcript of this interview go to: Kevin Rose On Community.

Back to top

Interview with Andreas from Codeslam

Stanton: Ok, so joining me today is Andreas Carlsson, and we’ve got him on tonight to talk to us about CodeSlam, Hello Andreas!

Andreas: Hello.

Stanton: How are you?

Andreas: I’m Fine. Fine thanks.

Stanton: Fantastic! Ok, so do you want to give us your elevator pitch, a really quick run down of what Code Slam is and what it does?

Andreas: Yea i’d Love to. Code Slam is basically an online code editor and a development environment and we like to think of it as like code development in the cloud.

The goal is to have a device and a platform independent coding environment where you have no setting up of local servers, no configuration, no installing apache or php or mysql, just log in and start to develop your web projects. Right now it supports php, and all that good stuff. We wanted to have a clean warm interface where you can access your web projects from anywhere, anytime.

The main target is front end developers and designers who do a lot of coding and developing and but also the tech savvy and pros can use CodeSlam as an extension to their existing development environment. You can sign up at http://www.getcodeslam.com and get started, and that’s about it.

Stanton: Fantastic, so do you see this being like a replacement for a normal desktop based editor, development environment, or kind of a supplementary thing?

Andreas: Somewhere in between. The phase we’re in right now is stable basic functionality, so we’re starting to poke around projects in CodeSlam. The only time you can’t use CodeSlam is when you don’t have web access, so it might be a good idea to have an offline version. We’re integrating SVN or Getintoit, so you can work on your projects when you don’t have internet access.

Stanton: Ok, so you’re integrating source control directly in the editor, so is that automatic, are you doing that for people who don’t want it, or do they have to set it up separately?

Andreas: Not actually sure how we’re going to solve it right now, but the basic idea is to have, we’re not going to have our repository on our CodeSlam servers, so people can have, use external repositories service like you do in Coda, or most other code editors, you just collect yourself to the repp and it automatically picks up changes from the repp and into CodeSlam.

Stanton: Ok, so if people already have a repository they can just tap straight into that. So if someone’s across the other side of the world at an internet cafe and they need to do some emergency fixes they can log into CodeSlam, connect to the central repository and start making changes straight away?

Andreas: Exactly.

Stanton: Fantastic. OK so their are other browser based editing environments, the first one that comes to mind is Besbin by Mozilla, how are you different from those, or what’s the feature of CodeSlam?

Andreas: I think where we’re different is we’re trying to focus on a little more of the user flow. Many of the other services similar to CodeSlam, their either imitating a desktop app on the web or their just real focused on getting as much technology and features into it. But we’re trying to have it really really simple. It’s very simple to create a project, connect to your live web server, and start the project. So I think the user flow, the logics of how you interact with it, is what sets us apart. Also I think we have a little more friendly interface and environment.

Stanton: Ok, so i’ve tinkered about the beta you’ve got up and running at the moment, and it seems to be quiet focused on collaboration as well, getting people in so you can collaboratively work on projects, I guess that’s another main focus of yours.

Andreas: Yea it is, and that’s also where the subversion thing come in to.

Stanton: And you’re in beta at the moment aren’t you?

Andreas: Yea, private beta actually. We have a few hundred people signed up, and we let, I think 50+ in to try it, because there’s somethings we thought would be greater use to us, that has been some pretty huge issues to solve.

Stanton: So what’s the ultimate road map, when are you aiming to go live effectively?

Andreas: The basic road map is public beta this first week in October, and then go fully live in the beginning of January. We were running a little late for the public beta, so I think January we can do.

Stanton: Ok so for anyone wanting to sign up for the Beta queue or find out more information where can they go?

Andreas: getcodeslam.com.

Stanton: OK, and you have a @codeslam as well?

Andreas: Yea, it’s @codeslam, yea.

Stanton: Alright well that’s great, so hopefully we’ll get some people interested and we’ll hear back from you soon as to how it’s developing.

Andreas: Perfect, thanks very much.

Stanton: Cheers!

Thanks goes to Chris Pasveer for transcribing this interview.

Back to top