Top Page Layout mark 2

I probably should have done a wire frame for the sub-sections but I got carried away with the top level css layout. I’ve got mark 2 coming along nicely now. Here’s a screenshot:

Obviously the header image is only a scrappy one I threw together for this layout. We will need to get that redone – I will enlist the help of Emma in the Business Office for that one I think I will have to stop poking at it now though – I’ll spend weeks tweaking and poking and prodding if I let myself!

I’m now going to make a basic wire-frame layout for the sub-section pages, or what I’m calling layer 2. There are four main sub-sections in layer 2 – one for each of the coloured squares, and they’re each going to use the colour from the square to let you know you are still in that section. I need to work out how to have the tabs showing at the top and make it clear which page you’re on by making sure the tab appears attached to the page, while the other tabs are obviously behind the page.

Layer 2 also contains things from the links at the bottom – About, Contact, Jobs, Publications, Links and Sitemap. I’ve not decided yet how these sub-sections should look … probably like the other layer 2 pages, but without a tab being selected – just showing them all behind the page.

Layer 3 will be for delving deeper within the main layer 2 sections – eg on layer 2 for Visitor Centre, there will be links to various topics – these topics will each be on a layer 3 page with the Visitor Centre colour branding.

Back to work!

CSS Layout

I’ve created a CSS layout for the top page of the site. Now be warned, it doesn’t look very exciting! It’s just a wire-frame kind of thing – positioning the elements in the right places. It took quite some time to get my head round it – I’ve done some css before but had always relied on tables for my layout, but I decided this time it had to be CSS only – no tables at all. So, without further ado – presenting the first layout page.

Next job is to layout sub-pages I think, before I move on to prettifying it!

Scribblings

Today’s work has been mainly away from my computer screen, hence the silence until now. I’ve been spreading out my papers and thinking and scribbling!

One of the things I’ve been thinking about is that all that dialogue between Wendy and Aeron yesterday was a bit crazy! I suppose it helped me to think through what the user is wanting, but it was slightly mad! If you based the whole design of our site on what I said yesterday it would just be a search button – that was all Aeron apparently wanted So I think it needs a bit more thought. Instead of writing out a dialogue, I’ve tried drawing the interactions this morning, and included alternative ways it could go with Aeron, as well as a sketch for John and Jane:

Sketches of possible scenarios for some site visitors (pdf file)

I’ve realised today that I’ve left out someone from my personas. I used John the scientist as a potential collaborator, but he was more interested in the research we are doing and not really getting into how we can work together. Perhaps I could develop John’s persona or create a new one which represents individuals or companies who are coming to our site to see how we can help them achieve something. They want to see what expertise we have, what we are offering in terms of potential consultancy, and how we’ve worked with other companies in the past and currently. This has lead me to think we need an area something like “work with us” with relevant information in it.

This afternoon I’ve been thinking about how the front page might be laid out, bearing in mind the various types of visitor. I’ve used our current web stats and the site map on our existing site to work out which pages are used regularly, and which are most popular, to give me an idea of what the real users are wanting to see on our site, not just what I think they want (via my personas). I’ve completed my first sketch of what it might (or might not!) look like:

 First sketch of possible site layout (pdf)

I didn’t note on that sheet that part of the visitor centre’s job would include presenting information for media types, but info for them will obviously also come in the news bar on the right hand side. Press releases would contain links to relevant further information, contact details and relevant photographs.

It’s quite exciting to have a first sketch drawn. I know it’s still very early days but it’s fab to see what might be the look of the new site! In fact I’m not content with that pdf link – I want a jpg of the sketch right here:

Comments please, anyone who is reading this? Is there anyone?!

To do list

I should have put this up at the beginning of the blog. This is Ben Hunt’s (WDFS) list of the main points of the design process:

1. Know what you’re doing
2. Know what the site needs to do
3. Know what the site’s visitors want
4. Get a good picture of the personality and style of the web site
5. Sketch out highly successful scenarios
6. Organise views into a site map
7. Sketch the essential features & look
8. Map your visitors’ attention
9. Arrange the visual elements to work together

You can probably gather that the ones with lines through are the ones I’ve worked on. I’m not sure I’ve worked on them thoroughly enough, but that’s about where we are in the process. Still early days.

More tomorrow!

Dialogue

Ok, here’s where the sceptical readers (Tony, if you’re still reading!!) have to suspend the disbelief … the next stage (according to Ben Hunt of Web Design from Scratch, and Alan Cooper in About Face 2.0, and others I’m sure) is to look at the dialogue between the primary user persona and the site persona. Yes, I am talking about a fictional user talking to a fictional, capable of speech, piece of html sitting on a web server. Suspend that disbelief!

So Wendy, our friendly bubbly scientist site persona (I’ve just named her) is ready and waiting for someone to come along and ask her something … and here comes Aeron our farmer … what happens next?

Ok, Aeron is today thinking about silage … he’s wondering if he should carry on as he always has making it the usual way. He’s heard talk of some new-fangled way of doing it (bear with me, I have no idea if this is really new-fangled or not, but it’s an example I’m working with!). So he thinks that IGER might be able to shed some light. He types in our URL and Wendy springs to life on his PC.

Wendy should now be conveying an impression of being ready to help, not jumping up and down shouting what do you want to do today, but poised and ready for Aeron’s first question.

Aeron scans the page looking for somewhere that looks like a good place to start. He spots a box with a button marked Search next to it and types silage. So he’s asking Wendy a question – “Wendy, what do you know about silage?”. Aeron is not particularly interested in the links on the front page of the site, but he is made to feel comfortable by the way the site looks. The way Wendy looks I should say (I’m finding this quite bizarre!!)

So the search results come back quickly. Wendy presents Aeron with some possible options and he scans through looking for what he needs. He can’t find exactly the right thing so Wendy asks him if he wants to add a search term or perhaps search within his current search results (which probably is the same thing really) – he adds the word “milk” because he is looking for silage making methods which increase milk yield. The number of search results is reduced and he finds a likely option. Clicking the link takes him to a page which explains that bicrop silage feeding results in higher milk production despite containing less protein. Aeron is pleased to see this information and wants to find out more about how to go about this. Somewhere around on the page, Wendy has provided a list of “related pages” - intelligently anticipating that he might want to delve deeper, while not throwing too much information at him at once. Wendy is subtle about this.

So Aeron gets the information he needs – he prints of a few pages of info on setting up to produce bicrop silage, and goes away happy

Primary Persona(s)

Before we leap off into some really weird territory involving imagining an inanimate object having a conversation with you, I need to stop and look at the personas again.

If you have several personas, it’s not easy to design for all of them and maintain a coherent product. The solution Cooper developed is to identify which persona or personas you have to design for, and then to design for them alone.

The trick is to identify ‘primary’ personas. These are “personas whose needs must be met, but whose needs cannot be met through an interface designed for any other persona.”

Primary personas provide you with test cases that you can be sure deliver the desired results for the complete breadth and depth of use contexts. In simpler projects, they can give you a “lowest common denominator” whose needs you need to meet, but deliver a lot more besides: a way to model positively your site as it will be used in the real world, and to test design decisions with confidence.

[from ... guess where? ... Web Design from Scratch - yes it is my very favourite site at the moment!]

This looks like a tricky business to me – how do I decide which of my personas is more “important” that the others? We have John, Aeron, Jane, Sam and Jez – who should I focus on?

Firstly, is there anyone who, if they couldn’t use our site successfully, would not cause the site to be a failure? I guess the one person on the list we could put in this category is Sam. I would be very sorry to see Sam go, as I really believe that we could make a difference and create a fantastic resource for children and young people if we really try, but I guess it is not of paramount importance. If Sam came to our site looking for help with his GCSE coursework and didn’t find anything – would that be a failure for IGER? Probably not – it would be a shame though.

I don’t think I can drop anyone else off on that point. So we’re left with John, Aeron, Jane & Jez.

Next we pair up personas and compare them – “Consider their typical contexts of use, and imagine that there is a solution that works for each persona in their own context … Ask, ‘Will a solution designed for the Persona A also let Persona B achieve her goals?’” (Ben Hunt, WDFS)

I’m going to compare Jane and Jez - they’re both probably coming mainly about items that are either in the news already or are newsworthy. So both of them could be made happy by the same sort of content – interesting newsworthy information aimed at non-scientists. Jane has more time, and Jez is on a deadline, so we could please both of them by offering the required information quickly and efficiently. Jane could take her time over it, but she won’t mind if it’s really quick At this point I think we can drop Jane – by pleasing Jez we will also please Jane, so we can concentrate on pleasing Jez.

Right so now I have John, Aeron & Jez. Perhaps I should pair up John & Aeron.  John is looking for scientific information and contact details … Aeron is looking for information about the science, but not necessarily in quite the same format as John. I don’t think I could satisfy both of them with the same piece of content, but they are both busy people – if I can find a way to get them to the information they need quickly and efficiently they will be satisfied. But which persona is primary? Now, I don’t want to cause debate and argument (not that anyone is reading this anyway!) but I am leaning towards saying that in this instance I think that Aeron the farmer is more important. It’s a close run thing, but our mission statement says:

To determine viable options for grassland-dominated landscapes and land use systems that lead to a sustainable rural economy, a multi-functional healthy environment, and a safe and high quality food chain.

The whole point of what we do is to improve the rural economy and environment – so farmers have to be satisfied, don’t they? I’m not ditching John the scientist completely as I think we will end up with different sections of the site aimed at different personas, but in order to find the primary persona for the overall design, Aeron wins.

So we are down to Aeron and Jez. They both want information fast, and they want it to be relevant and accurate. Snap! Aeron wants things to be simple and obvious, and this will not cause problems for Jez despite the fact that he may well be more web-savvy than Aeron. Jez might enjoy bells and whistles (ie flashy stuff) but it’s not essential to him getting satisfaction from the site.

So … the primary persona is Aeron the farmer. Bizarrely this surprises me somewhat! I’m the one who just worked it through, but before I started I wouldn’t have guessed Aeron, although I couldn’t have told you who I thought it would be!

I have 1 major secondary persona whose needs must be catered for in terms of content though and that is John. He is a scientist and needs content of a more technical and scientific nature – he needs details of publications and papers to refer to and perhaps more in depth information about the research we do.

Site Persona

Now we have some site goals and some users’ goals … let’s bring them together.

Not only can you create personas for the people who are visiting your site, but you can also create a persona for your site itself. This seems a bit weird at first … it’s a site, it’s not a person! But the more you think about it, the more it makes sense – when you visit a website you often find yourself talking to it or yourself as you interact – “oh very flashy, but where is your search box?!” or “where am I going to find the jobs section – under About Us or Our Company?”. You form some kind of a relationship with the website, albeit a rather superficial one! Sites you come back to again and again are the sites you like, and feel comfortable with – they are friendly and familiar. So how can I define my site’s personality? Or at least what I would like it to be like?

In Web Design from Scratch, Ben Hunt lists some points to consider when thinking about the characteristics of your site:

• Relationship to the consumer (e.g. guide / assistant / professional advisor / companion)
• Overall quality (e.g. value / class / high-fashion / workmanship / trashy)
• Relative positioning to other brands (e.g. up-and-coming / challenger / established / old-school / hyper-modern / reliable / edgy)
• Personality (fun / quiet / safe / logical / aloof)

Here’s some characteristics I’ve come up with for the IGER site:

informer, guide, helper, professional, reliable, trustworthy, faithful, established, lively, safe, fun, friendly

This is what I am imagining while putting the characteristics together:

A young, confident female scientist. She’s bubbly, nice, smiley & fresh-faced. She’s keen to help and is polite and knowledgeable. She’s intelligent but doesn’t patronise. She’s excited about science and ready to share that excitement.

She sounds like a good person to know! I’m not sure why she’s female – maybe it’s because I am? But it just seems to suit the ideas I have about the site’s personality somehow.

Personas

Firstly a little latin … should it be Personi in the plural?!

Back to the topic (I’ll stick with personas for now) – what are the personas I’ve come up with for the IGER site?

John is a potential collaborator – he’s a scientist working in a different company who comes to the IGER site to find out what research we are doing and who is doing it. He doesn’t want any fuss and nonsense with flashy pages, and doesn’t have time to search for ages for the information he needs. He wants information to be up to date, and doesn’t want to waste his time contacting the wrong person, or asking about research which isn’t going on any more. He’s comfortable with technology and impatient with things that don’t work as they should.

Aeron is a farmer – he runs a farm and is extremely busy. He’s trying to keep up with all the new technology and is keen, but it’s quite new to him so he gets confused at times. He’s a bit fearful of the internet and afraid of giving personal information over it. He wants to find out about specific research that will help him make decisions about how he works, such as what is the best silage to use. Because he is so busy he needs to find the information quickly – he doesn’t want to be searching through pages – he wants to type a keyword into a search box and get the relevant information quickly and accurately.

Jane is a member of the public – she has older children and is concerned about the environment. She works in an office and is quite comfortable with using the internet – she reads news items and has bought a few things from Amazon. She wants to know what kind of research IGER is doing – is any of it dangerous or harmful to the environment? She’s looking for information on hot topics in the news like global warming. She is not on a deadline and can browse the site, but doesn’t want to get confused or feel stupid – she dislikes being patronised, but doesn’t understand scientific jargon. She also wants to find out if there are Summer jobs available for her teenagers.

Sam is a young person, aged 15, doing his GCSEs at school. He’s studying science and wants to get some help with an assigment about photosynthesis. He’s very internet-savvy and expects to find information quickly – he may arrive from a search engine as he usually starts with Google. He doesn’t want to be patronised with very basic information, but on the other hand he is only at GCSE level so the information he’s looking for needs to be guaged at the right level. He likes fun web sites with cartoons and flash – boring sites put him off. Sam’s younger sister Molly is aged 7 and not so interested in science – Sam wants to show her how much fun it is – he’s looking for fun flash games or activities to show her.

Jez is a media-type – he works for a newspaper and is on a tight deadline most of the time – if he can’t find what he is looking for quick enough, he will give up and go onto another story. He comes to the IGER website in response to a press release that the paper has received and wants further information on the topic. He needs to find contact details for the people involved. He likes clear, concise information, and doesn’t want to have to scrabble around for the information he needs. He wants to find appropriate images to go with the news item so is also looking for images.

Now, how can I please all of these people?

By the way, if you are an IGER site visitor and you would like to give me input into what a real person is looking for and likes/dislikes, please let me know! Especially if you think my persona is way off!

Users’ Goals

Once you have decided what it is exactly that you (or the people you are working for) want the new website to achieve, you next need to think about what the users who visit the site will want. Obviously the 2 goals are intertwined – if one of your site goals is recruitment, then you are also aiming to fulfil a job-searching user’s goal while fulfilling the site’s goal. In an ideal world the goals of your users will fit perfectly with the goals of your site – ie there will be no opposing goals. This doesn’t happen much in real life!

So how can we work out what our users’ goals are? Well, we can start with trying to think about who might come to visit our site – for example, these are some people who might visit the IGER site:

• potential collaborators
• scientists
• companies
• ordinary members of the public
• media
• funders
• farmers
• stakeholders
• students
• job-seekers
• politicians
• children

Now I need to look at the major types of people on that list and get a little deeper. In About Face 2.0, Alan Cooper says:

The most powerful tools are simple in concept, but must be applied with some sophistication. The most powerful interactive design tool used by the authors is simple on the surface: a precise descriptive model of the user, what he wishes to accomplish, and why. The sophistication becomes apparent in the way we construct and use that model.

These user models, which we call personas are not real people, but they are based on the behaviors and motivations of real people and represent them throughout the design process.

 User personas have different types of user goal – life goals, experience goals and end goals. The ones you need to focus on in designing your website are generally the experience and end goals. Experience goals might be:

• don’t feel stupid
• don’t make mistakes
• feel competent and confident
• have fun (or at least not be too bored)

(from About Face 2.0)

End goals might be:

• find the best price
• find a specific piece of information
• find a job
• find out how to contact a specific person

(My own suggestions relevant to IGER)

At this point I got a bit lost in About Face 2.0 so returned to Web Design From Scratch, where I found this description of how to create personas:

Creating personas

You should base your personas’ characteristics as much as possible on facts you know about your target market or actual user base. The best way to do this is to carry out prior research to interview a number of actual or typical site users.

Personas are more effective when they represent the likely preferences, goals, and contexts that your real users will have. Ideally, you should speak to people who fit the target audience right now, who are in the right position or have the right experience.

• Picture what your persona looks like. Are they male or female? Are they working, studying, or out of work? How old are they? Give them a name, because a persona is a (pretend) real person. Maybe find a photo to represent them.
• Think about their cultural background. What’s their language? What time of day is it when they access your site?
• What skills do they have? IT skills and familiarity with using computers? What about other technical skills, maybe industry-related?
• Are they likely to be challenged by any impairments, such as difficulty with sight or reading? Do they have any special needs, such as accessibility issues?
• Next, write down what they are trying to achieve in general. What goal, or goals, do they wish to reach? For example, if they’re a consumer using the web at home, what are their goals for them and their family? If they’re a work user, what are their professional goals?
• What specific goals will drive them to use your website? There may be more than one, if they are likely to use your site at different times for different things.
• What are their personal priorities? What kind of thing will they appreciate? What kind of thing would insult, annoy or upset them? What kind of thing might make the difference between a tolerable experience and a pleasant experience? What about a delightful experience? What do they expect as a minimum? What do they hope for? How do they like to feel? What kind of things help them to feel that way?
• What is their potential value to the site? Could they be a key customer or referrer?
• Do they have prior experience of the brand, the market sector, the proposition, other similar web sites, previous versions, product range?
• Will they get shown, or trained in, how to use the site?
• What’s their likely frequency of use: one-off, irregular, regular?
• Where on the web have they come from – and why?
• What do they want to go away with?

More on this tomorrow …

Site Goals

One of the very first questions you should be asking yourself (or your colleagues) when starting work on a new website is … why? Why are we making this site? What is it for? These questions don’t go away when you’re doing a redesign – just because you already have a website, it doesn’t mean that it’s necessarily obvious why you have one. You may just have one because it seemed like a good idea at the time! You may have created the original site with a purpose in mind, but the purpose may now have changed. Perhaps the company’s aims have changed, perhaps they’re trying to reach out to a different audience. Whatever the reason, it seems that going back to basics and thinking about why you need the website is a very good place to start.

One of the places I have discovered on the wonderful web is Web Design from Scratch. Here’s what Ben Hunt has to say about this:

Know what the site needs to do

You may have a client who tells you what they want (e.g. “We want to break into the big time and sell more widgets.”).

Try to get really clear about what the goals of a site are. What does success look like? How will you know when you’ve got there?

Having this stuff clear in your mind helps you:

1. make the thousands of design decisions between now and a finished product
2. communicate with your client and maintain their confidence throughout the process
3. show that you’ve done what you set out to do

So what might the goal(s) of your site be?

• brand promotion
• selling products
• data capture
• marketing
• legal obligations
• knowledge transfer
• demonstrate effectiveness
• educate & inform
• collaboration opportunities
• recruitment

The next step is to look at your audience, your users – what are their goals when visiting your site? More to come …