Form Follows Function, But How Far Behind?


I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

Making the best use of the Information Screens

Digital SignageIT Services Information Screens (Digital Signage) are located in some of the most vibrant areas of Edge Hill’s campus. These screens are able to display announcements as well as play video clips such as the recruiting TV advertisement for the University.

These signs improve communication as well as provide an important and compelling information resource, a real opportunity to capture the imagination of viewers.

What Can Be Displayed?

The screens can be used for advertising events, displaying University information such as: Conferences, Seminars, Awards, Special Events, Faculty recognition, Community information i.e. Rose Theatre, Sporting Edge and much more.

The information on the Digital Screens differs from other communication mediums such as websites, (newspapers), posters, circulars, TV and other types of advertising, as each medium is unique in what a viewer is typically doing when they see messages. Web users interact with the information by clicking, TV viewers are sitting and flicking within the channels, (newspaper) readers are flipping pages, etc.

DS viewers are typically on the move from one place to another or involved on some other activities such as eating, studying or resting. Therefore they will only see your message for a few seconds as they won’t stand in front of the screen waiting to read all the information on them.

The content is most effective when it is clear; fewer words are better combined with a clear headline and/or an eye-catching graphic. The best messages present basic information and ask for action in a succinct and direct manner. The duration (i.e. length) of a message should be in the context of the viewing time and the overall playloop time.

“Content” messages are composed according to a style guide that assures that branding and messaging are suitable and the presentation through fonts and colours are “professional” looking and compelling.

Communications objectives are achieved based on information presented along with a “Call to Action” implicitly or explicitly directing a viewer to do something such as “plan to attend”, “visit the site,” “remember”, “take note”, register, visit, dial, etc…

For more information please contact: webteam@edgehill.ac.uk. Web services will initially request 2 weeks notice where possible and may not be able to accommodate a late submission so please plan accordingly. Events must be advertise at least 4 weeks before they are taking place.

Times a changin

15 años de Playstation by Dekuwa
Christmas has changed for me over the years, from the excited, little, fresh-faced kid with Subbuteo (and tube of UHU glue) to the worn-out parent, with the jaunty paper hat and half-empty glass of beer.

One of the things that hasn’t changed, at least in our house, is the bumper, double issue Christmas Radio Times. Wouldn’t be Christmas without it. its a wonderful life by s_hermanCheck out some of the older covers, some are so familiar it feels like yesterday that I was thumbing through them to find It’s a Wonderful Life.

Until the deregulation of television listings in 1991, everybody I knew bought the Radio and TV Times (also a double issue at Christmas) The Radio Times published only BBC programmes and the TV Times, only ITV and Channel 4. During the holiday season, to keep track of what was on TV, both had to be read, the unwritten rule being: You must fold them into each other to re-access quickly.

RTAfter 1991, both publications were able to publish programmes from all channels. At this point I dumped the TV Times in favour of the Radio Times (it had the radio listing too, hence the name).

Satellite and Cable services also forced RT to change, moving the Radio information to a separate section near the back and listing digital services on the pages following terrestrial channels.

I began subscribing to cable TV services in about 2001, and with that came a very handy on-screen, programme guide. The guide only shows the next 24 hours of programmes but it’s quick and it’s easy to set reminders, switching channels at the start of the programme. Bundled in is Catch-up TV, BBC iPlayer and TV on Demand, all make by-passing the schedules easy, but I still had to buy the Christmas RT.

This year I took delivery of a HD recordable box. In addition to viewing the programme guide, I can set it to record the selected programme at the push of a button. It can also pause live TV – Nightmare – it’s like Groundhog Day when the kids get hold of it.

Radio Times is also available as a website. The site clearly has more than a hat-tip to the BBC site with a panel-style interface and rounded corners. The schedules have hCalendar microformats (remember them) so you could add your programme watching habits to Google or any other iCal enabled calendar.

micro

This isn’t the first publication to go digital, but I hope they never pull the hard copy like PHPArchitect have just done.

New technology! Bah humbug, give me the Radio Times to fall asleep to on Christmas day every year!

Your Wiki!


In an earlier post on our wiki I mentioned that we use Confluence from Atlassian this company has a good and steady release cycle. Currently we’re couple of versions behind the latest, but hopefully that’ll soon be addressed by a move to a new much faster server!

Some of the fixes and new features that we’ll get when we upgrade are:

  • The Widget Connector – a quick an easy way to embed content from Youtube, Flickr, etc etc.
  • Various fixes and upgrades to the Rich Text Editor
  • The Macro Browser – this is an awesome new tool that is part of the RTE that allows you to browse for useful macro’s to add features to your confluence pages in a quick and easy way
  • Various performance issues have been solved
  • The Confluence PDF export has been drastically improved, especially that you can provide a PDF CSS stylesheet
  • Office 2007 files are now fully supported, searchable and embeddable in the latest version of Confluence which is just great!

Is the wiki being used?

We’ve had over 20,000 page views in the past month and we still haven’t fully launched the system to the university at whole! That being said, the Faculty of Health whom I work for have been using it extensively over the past year at least.

A quick breakdown:

graph

Currently we’ve got about four and a half thousand pages in the wiki, with about sixteen thousand versions of these pages. That averages out to about four and a half versions of each page. There are also almost ten thousand documents attached to pages on the wiki.. Good work on editing people!

A load of “Gobbledigook” from an online form

You have Spam!

Web content editors, designers and developers have all worked hard to make their website interesting, attractive and functional.

A lot of time and money is spent promoting the website. People find the website talk about it and link to it from their website, blog, wiki, bulletin board ect.

Search engines then trawl through the internet looking for links and keywords (among other things). The more links the search engine finds the more interesting the target website must be (all these people linking to it, it must be good)

The search engine goes away tots up all the scores. The one with the most incoming links is the winner. They will be at the top of the search engine ranking for that month (Its not really that simple but I think this is basically what the spammers tell their clients).

The Gobbledigook you receive from the form submission always contains links to websites. The spammer is not trying to get you to click the link. Spammer wanted a link published on a website by filling in a form that would update the blog, wiki ect. Spammer is trying to get as many links as possible pointing at the clients website, increasing the site’s search engine ranking. The results can then lead to the site being listed ahead of other sites for certain searches, increasing the number of potential visitors and paying customers.

How is it done?

A computer programme is used this searches for publicly accessible forms. Once a form is found it adds content into all text fields, a non existent email address into the email field and HTML containing a link into the text area field usually comment, content or message field.

All websites that accept content via a form are at risk of receiving spam via their forms.

Solutions

Disallowing multiple consecutive submissions
Spammers often reply to their own comments. Checking that the users IP address is not replying to a user of the same IP address would help reduce the spam flooding our in boxes.
This however proves problematic when multiple users, behind the same proxy, wish to submit the same form which is quite often the case here.

Blocking by keyword
Spammers have to use relevant and readable keywords so the search engines can index them effectively
Spam could be reduced by blocking the keywords they use simply banning names of casino games, popular pharmaceuticals and certain body enhancements.

Drawback the list could be quite extensive and would have to be maintained.

CAPTCHA
Is a method used to display an automatically generated image of a combination of numbers and letters. The user then enters the letters in to a text field to validate the form.
A computer programme can not read the image and the form will not validate.

Drawbacks sometimes difficult to read and the form needs to be refreshed or submitted several times before you get a readable image.
This system can prove difficult or impossible for the visually impaired who rely on screen readers. Providing an audio version of the characters can resolve this.

CSS
Use CSS to hide a text field. A programme will find the field enter data our validation checks the field if it contains data the submit fails.

Drawback if a screen reader is used it will find the form filed and ask for data the form will then fail validation.

Distributed Solutions
Originally developed for use on blogs but now most form data can be submitted to one of the services.
When a user submits a form the content is sent to one of the services. The content is then filtered. The service looks for links and keywords it also compares the content against a database of known spam content already submitted. The content is then given a score and sent back to your server. The server then accepts,flags or rejects the content based on the values you set.
Akismet, Defensio, Mollom are some of the web based distributed services.

Drawback Valid users can be blocked. If a user is wrongly flagged as being a spammer it can be difficult for that user to post data to websites using the same service.

Handling sales calls

I receive quite a lot of sales calls and I’m certain I’m not handling them properly.  The problem is that I’m probably not interested in what they’re trying to sell me yet I don’t want to miss out on something that could interest me. So generally I’ll ask them to email me some details and I try to take a look.

But it doesn’t stop there.  They want to follow up with me to see if I’m interested yet and this goes on and on ad infinitum! So how can I deal with them better?

My idea is to put stuff out in the public. I’ll tell you what I’m interested in hearing about and you tell me what your offering is.  If I like it, we can talk further about the offering with the possibility of using your software or service.

If on the other hand I’m not impressed or it’s not something I’m interested in then I’ll tell you, and the rest of the world.  How does that sound for a deal?

So here’s a few things to get you started with my thoughts…

Content Management Systems

I am almost certainly not interested in acquiring a content management system.  This blog contains lots of posts about our approach to building websites and you’ll quickly see that doesn’t involve decentralising control to several thousand content publishers.  A good place to start is my presentation “Building an Anti-CMS” from PHP North West.

Having said that, if your approach offers something genuinely different – I’m thinking along the lines of an approach to openness that isn’t usually seen – then I’m interested in seeing your product, but it’s still unlikely we’d adopt it in the next 18 months.

Search Engine Optimisation / Paid Advertising

If you make any claims that you can control anything in this sphere, I don’t want to hear from you.  Far too many people are peddling snake oil and it’s not funny.  If you want to send me a “free report” and it’s simply an output from some free tool then don’t be surprised if I’m not impressed.

The only thing I’m likely to be interested in related to SEO/Adwords is good value training to allow us to do some stuff in-house.  Ideally you would be able to cover a variety of technical and content-editing topics over a day’s course.

Virtual Tours

Some interest in these but you need to be honest about what you’re offering.  If you’re making use of a free package to create the 360-photos then admit it – I can tell from the Flash player you’re using anyway.  Show us what value you can add to the offering.

Open for submissions now

I don’t have the time to build a fancy submission system so I suggest using this blog post.  If you want me to have a look at something leave a comment below with a link to the demo website or any other information you have.  Comments are approved prior to appearing and it’s possible Akismet will spam trap them even earlier – if that’s the case then you might want to look at your sales description 😉

Apologies to all the people who’ve phoned me over the last 12 months and I’ve fobbed off – it’s a fresh start from here so feel free to submit now!

Wiki Meetings


Early on in the New Year the old Intranet here at Edge Hill will be abolished. All of its content will be available directly through GO. The platform we’re hosting this content under is called Confluence and it’s a wiki.

To the majority of people this won’t mean much right now but we’re hoping in the future it will. You’ll be able to manage your own content on GO for dissemination to colleagues you work with on a daily basis and those you work with across the university.

This new way of managing things will hopefully reduce the amount of out of date information that is out there. You shouldn’t be emailing around Word documents within the university. Because the moment you send that document it’s out of date, your recipient just doesn’t know it yet!

Lets take Meeting Agenda’s as an example. The below video describes why you shouldn’t be emailing meeting agendas and why you should start using a wiki:

The Faculty of Health is already doing stuff like this, posting meeting dates in their calendar, having agendas online, with misc documents for the meeting available on each meetings dedicated pages. You department can too!

Another brilliant use of the wiki is to keep track of action points:

These excellent videos are courtesy of Stewart Mader’s 21days you can find a lot more videos there and other extremely useful wiki related resources.

What Matters in Digital Marketing

9

Guest blogger Roy Bayfield is Director of (deep breath) Corporate Communications and Student Recruitment at Edge Hill University, a department that enjoys a unique, symbiotic relationship with Web Services.

Last month I spoke at the annual Effective Marketing in Higher Education conference in London. I’ve been going to things like this for 20 years now, and it’s interesting how they have changed. When I first ventured beyond the campus to see what others were doing and to discover what professionalism might mean in the world I had fallen into, HE marketing conferences were often sponsored by printing companies. The obligatory exhibition in the foyer would often have printers displaying their wares, and there might even be a tongue-tied printing MD on the bill, or an optional field-trip to admire a new 10-colour Heidelberg.

It’s different these days – the exhibitors tend to be webby consultants, and products and services such as CRM and online branding get the most visibility. (This is a loss in a way – the opportunities offered by ink-on-paper media for direct communication have never been more exciting, and the role that printed artefacts have as physical manifestations of relatively intangible organisations such as universities remains highly important. But that’s another discussion.)

iStock_000007471090XSmall

Conversation amongst delegates has changed too. Prospectus deadline crises and calls from journalists seem to have faded into the distance, whilst the sudden appearance of an inappropriate tweet on a marketing director’s Blackberry can create a moment of high drama.

I expect in another 20 years things will have evolved further, and the fact that ‘people’ ‘travelled’ to ‘London’ to ‘talk’ about ‘online’ ‘marketing’ (any or all of which might be outmoded concepts by then) will seem quaint. The sf reader in me predicts advances biotechnology, reverse-engineering back to feudal times, or of course the long overdue Martian invasion as potential opportunities/threats to the HE marketing scene as I enter my twilight years.

Anyway, I said I would summarise my talk here. The title I was given was ‘Digital Marketing – keeping it ahead of the rest’ so I tried to come up with some points about what really matters; what marketing folks should be thinking about when it comes to the digital aspects of their marketing. These were the just notes on the handout – you need to imagine each point expanded upon with enlightening verbal eloquence, any deficiencies in content finessed out of existence by my personal presence, and a host of witty asides.

iStock_000010768170XSmall

I’m happy to expand on any of this in the comments.

Intro
We’re already beyond digital. Computers have almost disappeared into other devices, the technology itself is becoming taken for granted. Just as ‘digital’ communications and experiences aren’t a separate part of people’s lives, ‘digital marketing’ isn’t a separate silo of marketing activity. So ‘keeping ahead’ involves focussing on the digital dimension of all of our marketing work.

Some thoughts about what’s important – some ‘people stuff’, some ‘brand stuff’ and some ‘marketing stuff’.

People stuff

Having quality conversations
between you and your markets, using the market members’ channels of choice

Helping your potential students communicate with each other
creating opportunities for additional student-to-student communication, over and above the Facebook (etc) stuff they can do themselves

Inspiring and influencing other people’s communication– all our staff, students and alumni are empowered to share their views online; what do we want them to be sharing?

Reaching all of our audiences
how does your online presence work for international, part-time, mature etc

Playing– someone needs to be playing, experimenting, networking to develop cool new stuff. Is this happening and is it happening in/with/for marketing?

Training, developing, leading and managing staff
to deliver effective marketing communications to Generation Y audiences. May involve…

…getting your hands dirty
so you know what social networking feels like and how it works.

Brand stuff

Reflecting your brand personality online
HEIs are diverse, multi-facetted organisations – our online presences reflect this – but what really important messages need to be most highly visible? eg research, student experience, business focus – what share of voice do the key messages have?

Managing your image
there is likely to be a blend of authentic, instant, user-created content and high-quality professional image-building – need to avoid dissonance

Creating constant streams of content
small inputs, big results

Making your key messages shareable– I like your course page, news story or photo – how easy is it for me to put on Facebook, share on Twitter, embed in my blog etc.

Marketing stuff

Integrating online and offline marketing communications

Communicating through the recruitment lifecycle
giving the right messages at the right time, building trust and engagement, harvesting data (CRM)

Being efficient
using new ways of communicating, less print, less post, less reliance on phone… but
…not throwing the baby out with the bathwater
quality print, phone calls when needed, all still have a place

Monitoring and maximising online impact
seeing and taking opportunities to get your message across, being everywhere

New ways to do old-school marketing communications:

Creating awareness
online search, advertising,
presence on the web, + in the mobile environment (?), in the gaming environment (??)
online PR, online ambassadors

Fulfilling information needs
still need a really good ‘classic’ website but also consider providing bespoke web pages for individuals, opportunities to ask questions through chat, forums etc.

Building interest
encourage people to stay connected and interact through Facebook, Twitter, your own website
provide compelling media rich content, student-created content, interesting apps

Harvesting marketing information
research, surveys, real-time metrics, ‘quality conversations’ online with markets

Delivering real benefits
making things easier, quicker and more fun – in the recruitment process (eg booking for Open Days, asking questions) and also as part of the student experience (eg enrolling, accessing services, mobile applications)

Green is the new White!

Day 8Liverpool city centre is to have the city’s Greenest most environmentally friendly Christmas tree ever to celebrate the city’s Year of the Environment.  The project comes after the city has basked in the lime light as European City of Culture and also enjoyed its Bicentennial celebrations. 

Thursday 19th November 2009 saw Liverpool’s  greenest Christmas tree  unveiled.

The tree, takes centre stage in Church Street, the city’s main shopping street and is decorated with miles of eco-friendly Christmas lights.  A record-breaking 9000 eco-LED lights are helping save energy and reduce the tree’s carbon footprint considerably; the tree also has 298 baubles decorating its branches.  The eco friendly lights are also making their debut in the Cultural Quarter and will illuminate the streets all the way to William Brown Street and the sparkling new Liverpool One development, a major part of the new look Liverpool City centre. Year of the Environment 2009

The tree has been sourced from the sustainably managed Kielder forest in Northumberland, saving even more energy from previously Scandinavian sourced trees.  The tree is part of the city’s best and greenest ever Christmas light show, with 4km of cables illuminating a staggering 139500 individual eco friendly lights, the lights will also entertain record Christmas crowds for the rejuvenated City where hundreds of thousands of festive visitors will celebrate the Christmas period.

Amongst the special displays this year are the Go Penguins Winter Trail, 2010 Shanghai EXPO display and Bold Street traders amongst many other superb displays, all in all the City despite having more lights than ever will use 44% less energy than just 2 years ago in 2007.  A massive positive step in the right direction for a city determined to make Liverpool’s Year of the Environment make a real difference. 

Culture

Heritage

Christmas Tree

Blue Coats

Lord Street

Ballbells

Happy Green Christmas.

>