This Friday will run as a full surgery from 10am-3pm (with half an hour off for me in the middle somewhere – for lunch).

If you could stick with your normal morning/afternoon arrangements with some cross-over in the middle that would be great. PLEASE DO NOT TURN UP AT 2.30PM expecting one to one attention. I’ll be ragged by then and will not appreciate it.  Depending on demand I can only spend 10-15 minutes with each student so make sure you come early.

See you on Friday.

Week’s nine and ten workshops will now be devoted to surgeries for your individual websites and there will be no additional learning – but refreshers on all topics covered so far – depending on what people want.

AT THIS STAGE YOU MUST BACK UP YOUR WORK SO BRING IN A USB DRIVE!!!!!!!

HAND-IN REQUIREMENTS – as I said above this is simply the assignment briefs with some additional notes

Start a blog
It might seem like you’re doubling up but a blog is one of the most useful tools in the marketing toolbox. Blogging software is great for SEO (Search Engine Optimisation) because they use database driven CMS software that pushes content out into the Internet. Use your blog to publicise your Website.

Create backlinks
Any link to your site from another site is called a backlink – and each backlink you have increases your website’s visibility. Twitter and Facebook links from your blog to your site create backlinks too.

Page Rank
The Google algorithm or Page Rank (named after Google co-founder Larry Page NOT referring to the ranking of pages – although it’s a neat/exploited coincidence) is a specific mathematical formula the ranks the importance of documents based on certain variables – backlinks being one, and the linking of that document by recognised hubs (like Wikipedia) being another.

Creating ‘important’ links to your content through generating legitimate – and sometimes illegitimate techniques (see Black Hat marketing). If Google discovers sites using BH techniques they will ban the site.

Black Hat techniques include keyword stuffing, invisible text and doorway pages

The more traditional White Hat techniques are:

• meta tags
• descriptions
• keyword density
• generating online editorial and backlinks through real audience demand

You should:

• choose your domain name/site name well
• ensure every page has a title
• ensure that the text content of your page relates to your title/domain name
• ensure that the keywords you use in the meta tags relate to key headings on your page
• Use a blog (either on your domain or elsewhere) to promote your site
• Use free CMS software like WordPress, Joomla or Textpattern.
• Publicise your site with Facebook/Twitter

Get the right tools
Google Web optimiser, toolkit and analytics are Gold Standard free web marketing tools. You can also use the site command in Google (simply type site:yrsite.co.uk) into the search bar and see how many pages Google has cached.

Advertise
Also Adwords and Adsense provide powerful solutions to INternet advertising on either sponsored links or pay per click basis. Set your own campaign guidelines and start promoting.

Use Social Networking at all times
Social networking as a way of augmenting traffic, as I’ve said, is an invaluable resource. Create a Facebook page for your product/company/service. Set up a Twitter account and start tweeting about what you do – and follow people who are interested in the same things as you. Then write as many blog posts on your blog that you can in a month and post the links to Facebook and Twitter.

Watch your website traffic grow.

Adding 3rd party functions is not just a fun thing to do – it makes your interface ‘sticky’ – literally extra functions make people stick around. Offer them nothing and your visitors won’t stay. Offer them fun things to look at, listen to, contribute to… etc, then they’ll stay longer – and maybe, they’ll even come back! Perhaps they’ll buy something, or pay for your services!!

Galleries

• Flash gallery
• Highslide
• Picasa Viewer embed files
• Flickr
• Flash gallery solutions

Audio

• Premiumbeat
• Hoover MP3 Player
• Embedding audio tutorial
• Add Internet radio (Last.fm) tutorial
• Soundcloud
• Audioboo

Forums
For those of you with your own webspace you can search for software (free) that will allow you to host your own forum.

Presentations
You can create embeddable presentations using Prezi, Slideshare, Sliderocket etc.

Analytics
Again for those with live sites you can keep an eye on your web traffic using various back-end apps – the best free one is Google Analytics.

Data Visualisation – links and tools/apps:

• Wordle
• IBM’s Visualisation tools
• Create a data visualisation in 3 steps (Many Eyes)
• NY Times Use of IBM Tools
• Google’s Visualisation Tools
• Best Visualisation Projects
• DabbleDB online database
• Chris Jordan’s images

Add RSS feeds

• Tutorial from homepage wizard
• RSS feed reader
• Tutorial from CreataWebsite

Add a map
You can use Google mapping software to add an interactive map to your websites. This works well on a contact page.

Social Media Links
Some of you already have these but buttons that allow users to keep in touch with you using social media are imperative if you want to stay ahead of competition. Twitter, Facebook, Digg, Flickr, Reddit, Delicious

You can find more information and videos and an in-depth look at Social Media, tagging etc in a previous blogpost from last term.

• You should keep your presentations short: 5-6 mins
• You should use your blogs to show the research you have done into your design (include sites that inspired you and talk about design, navigability, and functions that appeal to you or that you want to include in your final hand-in).
• Show your mock-ups (Photoshop) and site structure plans.
• If you have working templates in Dreamweaver make sure you bring them on a USB stick so that you can open them on the demonstration computer.
• You should be able to articulate a commercial/artistic rationale for the site

You will all receive formative feedback from me in writing on your progress so far and be prepared to offer feedback via blogs to your peers.

NB: If you have little/nothing to present a quick explanation of what you intend to create and why is fine – but make sure you have some research of sites and functions to show on your blogs.

NO LECTURE
Finally – groups are at the same time as usual but there will be NO LECTURE from 12-1pm:

Morning Group: 10-12
Afternoon Group: 1-3

See you all on Friday – and any queries about the presentation please use the comments on this blog so that everyone can see the thread. Mez

In simple terms accessibility is how easy it is to apprehend the meaning of the content on your site, and usability is how easy that content is to find and navigate. With the proliferation of mobile browsing the web developer must be aware that usability and accessibility have cross-platform implications.

Let’s begin with Accessibility: I don’t normally do this but good old Wikipedia has a comprehensive page on Web Accessibility.

The following links have some useful information

• The WAI (Web Accessibility Initiative) – an invaluable starting point for all your accessibility info
• The 10 quick tips for web page accessibility – a helpful checklist
• Also look at Dreamweaver CS4 accessibility features

Website Usability is generally achieved by Usability Testing

• Eye tracking
• Multivariate testing (using questionnaires and statistical analyses)
• Focus groups
• Google Analytics uses similar functions so you can track how others are using your ite and change the layout, functions etc
• The 10 heuristics for web site usability from Jakob Neilson
• The usability.gov website has some useful information

Remember the websites I showed you the other week in the Navigation and Wayfinding lecture, Or what this from JonesSchijoff – is truly impenetrable and example of amazing creativity but with absolutely no understanding of Interface usability or accesibility.

This is what using a screenreader is like – this video provides a compelling rationale for using a skip nav link:

You can see how an accessible site employs this code – Coventry City Council

A reminder: It is imperative that you read the assignment brief, Learning Outcomes and all other indicative content for this module. Make sure you address ALL areas of the brief and check hand-in requirements etc. All the information is hosted on the documents page. You should hand in your finished artefact on a CD/DVD ROM on December 13th 2010 – and make sure the hand-in contains a TYPED link to your blog, as well as a link to your blog from your website.

Remember CW1 is your blog – which should evidence all the blogging requirements outlined in the assignment brief – and CW2 is your artefact.

Galleries, slideshows, RSS feeds, newsletters etc can all make a website more ‘sticky’. But first lets find out how this integration developed. Earlier in the term I explained that technology drives design – a new plugin is released for Photoshop and suddenly every advertising agency uses the effect in the campaigns it produces. In fact technological advancements and the creative impetus to develop them go hand in hand.

But it was a bunch of programmes called Ajax that drove the kind of interactivity on the web we take for granted today. Ajax has allowed users to have huge power so that rather than the top-down sites of yesteryear we have dynamic, user-driven, customisable interfaces.

Social Networks Driving Design
Web 2.0 has allowed the user to become the content producer – in fact many of the webs most popular hubs are social networking sites. The company provides the Interface – the users provide the content: Facebook, MySpace, Bebo, Ning and many more – all work on this model.

Blogtastic
The prevalence of blogs and blogging has also driven the technology, with the rise and rise of Mashups on the web. Mashups are the integration of two or more APIs (application programming interfaces) that allow new functions to be born. This flexibility is free and open to all with big sites like Amazon, Yahoo, Google, Ebay, Last.fm, etc etc, all offering their APIs for free. (It’s always worth questionning however, why these companies let their APIs out for free).

• Flippity: Find anything – using Googlemaps and EBAY data from the US
• TuneGlue: Uses Last FM and Amazon to make a networked music interface
• Map Your Buddies: Uses Facebook, Googlemaps and Amazon
• Twittervision: Uses 3D World Map and Twitter to chart tweets across the globe
• ChicagoEveryblock.com: Uses public record data and mapping software to show crime stats in Chicago

You can easily make your own Mashups using Googlemaps or using Yahoo Pipes. If you want to you can have a go. Use this link to watch a tutorial. Or see the Mashup awards (held annually).Or search recent Mashups and APIs at Programmable Web.

With Internet users of the future demanding nothing less than customisable, individual, user-focussed design this poses problems for the ‘designer’ per se. He/she must design light, flexible interfaces with an emphasis on user-generated content, interactivity and company-customer dialogue. The age of top-down design (at least on the web) is over. The age of companies not communicating effectively with their customers, using the tools their customers use, is over too. American Airlines learned this the hard way:

This TED talk explains why companies need to tap into customers’ Tribal propensities

1. In week one I asked you to read the handout (documents page week one) about Internet Infrastructure and write a quick evaluation on your blog.
2. In week two I asked you to watch the Prometeus Project – PROSUMERS video (in Interface – All Change, below) and write a short piece on your blogs about the Interfaces of the Future. I also asked you to upload you initial web comps (designs) onto your blogs.
3. In week three I asked you to read the chapter on Interface Design on the Web Style Guide (linked on the document page) and, on your blogs, note which you think are the key points.

Navigation

Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.
—Steve Krug

Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design. The graphic user interface (gui) of a computer system comprises the interaction metaphors, images, and concepts used to convey function and meaning on the computer screen. It also includes the detailed visual characteristics of every component of the graphic interface and the functional sequence of interactions over time that produce the characteristic look and feel of web pages. Graphic design and visual “signature” graphics are not used simply to enliven web pages—graphics are integral to the user’s experience with your site. In interactive documents, graphic design cannot be separated from issues of interface design.

Web Style Guide

I’ve begun this week’s lecture by scavenging two quotes from other people – but I couldn’t have put it better myself… so! The main point is the seamless intersection, in the GUI, of form and function.

Wayfinding
Kevin Lynch first coined the term “wayfinding” when he talked about navigating the built environment and the WWW is a metaphor for navigating a virtual environment – but there are still places, destinations, directions etc. We hear people talk about ‘Internet backwaters’, terminals and hubs. We have transferred our geographical references into cyberspace.

When it comes to Interface Design we must be aware of these metaphors:

Wayfinding has four core components:

1. Orientation: Where am I am right now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right place?

Remember the ‘click here’ example I mentioned in week one? Click here is equivalent to a road sign that simply says ‘turn right’. Why? Where will it take me? are just two of the questions you’d ask if you saw such a sign.

However, unlike physical space, web space is magic. Hyperlinks are like Star Trek style transporters – all destination and no journey. The interface designer, therefore, has to be the Shamanic guide to this magical realm. It is up to us to create landmarks, nodes, paths and districts that correspond to the real world in some way.

It’s worth noting though that as users become more savvy a whole new visual literature is developing. Consider this Brazilian site (Cafundo is a creative agency) with its web iconography – it’s beautiful and very clever, but Internet newbies are not welcome here.

Or what about this from JonesSchijoff – truly impenetrable

The Web Style Guide identifies various ways we can make our users feel located:

• Paths: Create consistent, well-marked navigation paths
• Regions: Create a unique but related identity for each site region
• Nodes: Don’t confuse the user with too many choices on home and major menu pages
• Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented

Parachuting in
Unlike a normal journey however web users can literally land on your site ANYWHERE. It doesn’t have to be the front page for example and this means the chances of disorientation are increased. Users may never make a ‘complete’ journey through your site.

Helpful map location references and breadcrumbing techniques are imperative under these circumstances.

Browse or Search?
Interestingly web users are split 50/50 into browse or search. Some like to look down lists of links to find the right information while the other half go straight for the search bar. Basically both paradigms must be supported on any commercial interface. In addition orientation (breadcrumbing for example) with tabs links or headers that change colour – orientate the user.

Simplicity
Too much choice – too many moving parts, over stimulation visually, aurally – all these things are off-putting to the majority of users. KISS (Keep it Simple Stupid) is an old design adage – but oft quoted for a reason.

The best designs (for information sites) are ones you hardly notice. Obviously designs that are  all about design have another thrust and the impetus is to showcase design on another level – but again the web designer must never prioritise form over function.

Compare the busy market-stall style of Play.com with the more educative BFI store. Both these sites are successful – the main difference of course is audience.

However there are some sites that perform ‘aesthetic functions’ that don’t necessarily conform to the rigid commercial guidelines that The Web Style Guide lays down. See a list of ‘artistic’ or flash inspired sites on the links page.

See how many unorthodox sites you can find. Do they break all the rules? If they do then do they still work?

Finally, a list of contenders for Worst Website 2010 - ENJOY!