Rebooting the campus map

We launched the first version of the interactive campus map back in 2012, and though we’ve made lots of improvements to it over the years, we felt it was time to give it a complete overhaul.

The new map

You can view the new map at www.york.ac.uk/map

We’ve introduced a number of new features, including:

Larger map

The map is now the full width of the screen. When you open the map, it’s focused on Campus East and Campus West. You can drag the map to move it around, or use the buttons on the right to centre in on Campus East, Campus West or King’s Manor.

The new map

Navigation by search and buttons

Whereas before you could only search for room codes, the new search allows you to find a range of locations, including buildings, departments and rooms, and facilities such as baby changing and car parks. Start typing a location, and then select from the dropdown list of closest matches.

Across the bottom of the screen are buttons for facilities, allowing you to see car parks, cafes, post boxes and so on at a glance. The buttons let you view more than one location at the same time. So, for example, you can search for a building and then locate the car parks that are nearby. You can also have multiple buttons selected at once, should you wish to view shops and cash machines at the same time.

We chose the button types by asking 25 volunteers to pick the facilities that they’d most like to see feature prominently on the campus map. We also took into account that some important facilities may not feature highly, such as baby changing facilities and prayer rooms, and we made sure they can be found via the search instead.

One area we were particularly keen to improve was car parking. All car parks are now displayed on the map, rather than just pay & display and short stay, and we’ve added in additional information such as number of spaces, and RingGo location numbers.

Mobile friendly

Mobile view

The new map has been designed to work on tablets and phones, making it easier to find the places you need when you’re out and about.

You’ll notice you can still access the facilities buttons, but they’re hidden at the bottom of the screen until you need them.

Future improvements

There are still a number of areas that we’re keen to work on:

• Walking and cycling directions between two points on the map
• Expanding the transport information to include bike racks, bike pumps, and perhaps live bus data
• At the moment, the room locations include directions to the room, but we’re only able to drop the pin on the building, rather than the exact location. We’re keen to be able to include more detailed room data using the precise coordinates.

Please take a look at the map, and feel free to leave any feedback either here, or using the feedback button on the map.

Our new homepage

After lots of design iterations, development work and usability testing, we’re pleased to say that the new version of our homepage is now live.

The homepage now uses the same new responsive design as the study and research areas of the site, so it’s optimised to work across a range of device sizes from small phone screens to large desktop monitors.

The homepage is optimised to work across a range of device sizes

As well as the change to how the page looks, we’ve also made changes to the content of the page and the navigation that surrounds it. This includes:

More links for internal audiences
We used data from Google Analytics to look at what staff and students were searching for when they visited the homepage. As a result we’ve added several links that haven’t been included on the homepage before, such as timetables and the library. These can all be found under the ‘Staff and students’ menu at the top of the page.

More content about campus and city life
In the previous design there were only four slots available to feature content in, which were also used to feature news and events, so campus and city life could only be included from time to time. This is very important content for prospective students, and we’ve put a lot of effort into revamping our student life content recently, so we decided to give it a dedicated space.

More links to factual content
Lots of visitors to our site just want to find answers to basic queries like when our term dates are, or how to get to campus, so we’ve added these too.

Behind the scenes, we’re using a new system that makes it easier for us to manage the content (Contentful, for those of you that are interested). We’ve also produced a content guide, to help us ensure that any everything we put up is on-brand and conveying the right message.

Guerrilla usability testing at our open days

With thousands of potential students descending on campus for our open days last week, we had an ideal opportunity to get out ‘into the wild’ and carry out some guerrilla usability testing on the recently launched study at York pages, our new course pages, and a new homepage design that we’re working on

What’s different about guerrilla testing?

In guerrilla usability testing there isn’t a recruitment or screening process to find participants, you’re basically walking up to willing-looking strangers and asking if they’ve got a few minutes to spare. The tests can take place anywhere that you can find people - coffee shops, train stations, shopping centres, etc. Open days are ideal because everyone who comes to campus is going to be in our target demographic!

How we did it

Although guerrilla usability testing is a lot less formal than a lab-style usability test, we still used a script (cribbed from Steve Krug’s Rocket Surgery Made Easy) to make sure that our introductions covered the basics of who we were, what we were doing, how long it would take, and perhaps most importantly, that we would reward participants with chocolate.

Essential supplies for a bit of guerrilla website usability testing at #YorkOpenDay!

A photo posted by Paul Kelly (@itspaulkelly) on Jun 24, 2016 at 8:38am PDT

Before we got our participants to use the site, we asked them a few questions about the course they were hoping to study and what specific bits of information that they’d look for to help them decide if a course was right for them. We then asked them about other factors that would influence their decision to apply to a particular university. Based on their responses we came up with some scenarios on the fly.

What we tested

Over the course of the two open days we ran 17 tests, using both laptops and phones. Each test took around 10 minutes.

As well as course information, our participants looked for information on accommodation, the college system, the city, sport, societies and nightlife.

What we learned

• Everyone likes a Yorkie bar!
• Overall our participants were able to complete all the tasks that we gave them and liked the look of our redeveloped pages. 
• It was reassuring to see a lot of our assumptions validated, especially on our new course pages (eg BA Politics) - students found it easy to tell what they’d be studying each year, and really liked seeing authentic quotes from current students. 
• We got a lot of positive feedback about the in-progress new homepage design, with students liking how it looked, finding it “professional” and “welcoming”. One area that caused some confusion was the section on research, so we’ll be refining that further to make it clearer.
• We found a few small bugs to fix with how the site works on mobile. It’s on our roadmap to set up a device lab so that we’ll be able to catch things like this sooner.
• Several students used the main site search (rather than the course search) to find courses, which resulted in a much less direct path. There’s some work to be done to see how we can improve that.

We’ll definitely be doing this again. As well as the value of the testing itself, it’s always great to get out of the office and meet the users of our site.

Further reading

• The Art of Guerrilla Usability Testing Guerrilla testing - UX Booth
• Guerrilla testing - Government Service Design Manual

Responsive 'quick-fix' live

In February we unveiled our plans for a responsive 'quick-fix' for key web pages. Our aim was to improve user experience across a range of devices, while avoiding the laborious process of rebuilding thousands of pages.

We're pleased to announce that the first pages to use the new designs went live at the end of March.

The About the University pages are now more usable on phones and tablets. They also present a more coherent user journey alongside the newly rebuilt Study branch.

We've begun to roll out these new templates to departments. Many are well underway checking existing pages to make sure they translate cleanly into the new designs.

If you're interested in moving your departmental pages into a responsive layout then contact us at digital-marketing@york.ac.uk to get started. You can even book time in our (very grandly named) Device Lab, to help speed the process along!

More information on responsive designs:

• Introducing a quick(ish) modernisation of the website
• Preparing for and opting in to new responsive designs for CMS pages

Embiggening the campus map

The eagle-eyed among you may have noticed a small addition to the online campus map: you can now switch the map to full screen mode, allowing you to see a lot more of the campus at once.

Hopefully this will make it easier to navigate around our ever-expanding campus.

We know that there's still a lot of other functionality that you'd all like added to the map - like being able to search for rooms and buildings - we're hoping to work on some more of these kinds of features in our upcoming sprints, so stay tuned.

New homepage and design: reflecting on the work so far

Having launched the new homepage and design for core pages of the website a few weeks ago, we held a team retrospective to reflect on the process and outcomes of the work so far. This helps us build on the things that went well and refine our process for the future. Below are the four categories of our retrospective and selected highlights from our thinking.

High points

1. It actually happened!
   It's been a long time coming, so we're really happy to finally launch something new.
2. Having a comprehensive preview available on a test server
   From early on in the process we were publishing the work-in-progress homepage and new design for core page on a test server. This made it so much easier to discuss the changes with the wide range of stakeholders who were involved.
3. Trying some new tools
   We used Usabilla and CrazyEgg in anger for the first time with this project. Both proved really useful, the former for gathering up useful feedback before launch and the latter for visualising usage of the new homepage in a really compelling way.

Things that went well

1. CMS implementation
   Despite its faults, and we know that lately a lot of you have been feeling the pain of slow previews and unreliable publishes (previews should be better now; publishes should get better later this week), the way we'd implemented the original design in Site Manager made it relatively easy to switch to a new look.
2. Developing a process to manage the homepage
   In conjunction with redesigning the homepage, we've redesigned the process by which features and promotions are added to that page. York staff can find information about how we manage promotions on the homepage on the wiki.

Room for improvement

1. Too many things, too little time
   The biggest challenge, by far, was finding time to do the work. We're a very small team of just four people: one manager, one full-time on training and support, two of us trying to do project work but constantly pulled in different directions (eg. CMS preview and publish issues, unplanned project requests). We reckon we get to spend, at best, the equivalent of 1 FTE on planned project work. Given that the recent redesign is just one of several projects ongoing, it's easy to see why we struggle to make quick progress.
2. Finishing what we start
   We sometimes found that we'd start some aspect of the work with gusto, but then other things would come up (see point above) and we might not quite finish what we'd started.

New ideas

1. Reporting on where our time goes
   There are no easy fixes to the problem of just having way too many things to do, but we think a good start might be to reflect on exactly where time is being spent. We track a lot of our time already (using the excellent Tick time tracker) and we track our support calls too, so we have data. We're going to trial having monthly reviews of exactly what we spent time on and hopefully identifying actions we can take to make more time for the most important projects.

Creating a new favicon for york.ac.uk

Alongside the launch of our new website design earlier this month, you may have noticed that our favicon has changed too.

It's a small thing (literally), but it's there at the top of the browser window for everyone looking at our website, and appears every time someone bookmarks one of our pages, so it feels like an important thing to get right.

Our existing icon used the 'Y' taken from 'York' in our full logo, which was starting to look dated and was also a violation of our very own visual identity rules (tut tut).

The old 'Y' favicon

As we're now using the University shield as our identifier across our social media channels, it seemed like a good opportunity to bring everything together by using the same icon here too.

Creating the icon

I created the icon at two sizes, 16 x 16 for normal resolution screens and 32 x 32 for retina screens. There are many other possible resolutions for everything from iOS home screen links to Facebook share thumbnails, but I'll come back to those another day.

It turns out that a 16 x 16 canvas doesn't give you much room for subtle details, and at that size the stripes in the shield are very close together and make it look like solid black. To get around this I simplified the shield slightly by removing half of the horizontal stripes in Illustrator, giving the shield the same overall feel as its full-size counterpart.

This was saved as a PNG from Illustrator and uploaded to a tool called X-Icon Editor, which lets you make edits to your icon and preview how it is going to look in the context of a browser toolbar. Once I was happy with the result, I exported my new icon (containing both image resolutions in a single file) and replaced the old one with it.

The new favicon (with lots of other icon friends)

One small step....

(Almost) 20 years of the University of York homepage

Last week we launched a new homepage and refreshed the design of core pages of the site. In the next week or so we’re planning blog posts that will give a behind-the-scenes insight into the recent changes and reflect on feedback and site usage since launch. But we thought we’d start with a longer-term look back at the homepage to see how far we've come.

1994: launch

The very earliest version of the homepage went live in 1994, just three years after Tim Berners-Lee invented the World Wide Web and at a time when the total number of websites in the world could be counted in the thousands.

One of the earliest versions of the University homepage,  this capture from 1997

It seems unlikely that anyone at the time really expected the web to become as ubiquitous as it now is, but it was a big enough deal for a reporter from Radio York and a photographer to cover the event.

Members of Computing Service (now IT Services) launching the new website (quite why the photo is black and white, we're not sure - it wasn't that long ago!)

• See the original homepage design, as captured in 1997 by the Wayback Machine

1997: design

The original 1994 homepage was pretty straightforward; text and links, top to bottom. By 1997 things had moved on a bit and the homepage had its first proper ‘design’. The colours and buttons look a bit primitive by today’s standards, but back then this would have been pretty advaned.

Homepage circa 1997. New in this version: news on the homepage and search to help track down information amongst the growing number of pages

• Visit the 1997 redesign on the Wayback Machine

2002: modernising

In November 2002, it was out with the blue and in with a cleaner and more recognisably modern style, plus photos on the homepage for the first time.

Homepage circa 2002. Information for prospective students is now the first link on the page; by now it was clear that the web was a key part of the decision-making process of university applicants.

• Visit the 2002 redesign on the Wayback Machine

2006: going green

In early 2006 the homepage was updated to a style that many of us have been used to ever since. More imagery, more colour and a stronger expression of an identity were key here.

Homepage launched April 2006

• Visit the 2006 redesign on the Wayback Machine

2008: focus on key audiences

This update was designed to help key audiences get to what they needed faster, in particular prospective students who now get 9 links to choose from (up from 1, in third place in a list, on the previous version).

Homepage launched April 2008

• Visit the 2008 redesign on the Wayback Machine

2010: menu bar

We introduced a horizontal menu in 2010 to provide a more standard way of getting to core audience- or topic-focussed sections of the site. We also introduced our first carousel at this point (see our recent post for some reflections on carousels) and added a subtle link to a listing of our social media accounts.

Homepage launched late 2010

• Visit the 2010 redesign on the Wayback Machine

2013: course search

Early in 2013 we added course search to the homepage to save prospective students having to click through to the study area to find it (better late than never, some may say!) The site handles up to 20,000 course searches per week, so putting it front and centre makes sense.

Homepage launched early 2013

• Visit the early-2013 redesign on the Wayback Machine

2013: redesign

While we’ve evolved the homepage a few times since going green in 2006, it had been over seven years since the site had a major redesign. The green had served us well, but it was time for a change.

We’ll cover some of the details of the new design in another post, but hopefully we’re hitting the right buttons: attractive and modern; clear navigation (this is the first time we've had global navigation across the core site; an important step towards us running one website rather than a loosely connected collection of sites); prominent course search; and plenty of space to tell the story of what makes York unique.

• Visit the 2013 redesign on the Wayback Machine (or, at the time of writing, the live website!)

The (near) future: responsive

As big a step forward as we feel this week’s changes are, there is much more to come next year. High on the list is making the site responsive so that the user’s view of the page is tailored to the device they’re using, whether that’s a desktop PC, tablet or mobile.

Watch this space...

What we’ve been up to, Spring 2013

Oftentimes it’s hard to know what other teams are working on and easy to miss interesting developments that get released without a big launch. With that in mind, we thought an occasional series of updates about things we’ve been working on might be of interest.

Festival of Ideas

One of the biggest things we worked on throughout May was the 2013 Festival of Ideas website, including listings and ticket bookings (via EventBrite) for over 150 events.

 

History of the University - a timeline

Built as part of our 50th Anniversary site, our interactive timeline of the University’s history features well over 100 entries, with videos and imagery to help tell the story.

Food and drink on the web

We’ve started a project working with Commercial Services to move catering and bars information into the Web CMS. There’s not much to see just yet, but work is underway to create a dedicated section of the website for catering and drinking outlets on campus, which should be coming soon.

Updating the campus map

The campus map page now has more location pins available, including a dedicated section for venues being used for Festival of Ideas events, in order to help those who may not be familiar with the University to find their way around.

Also pretty cool, but not one we can take the credit for (that belongs with IT Services and Estates), is internal mapping of campus buildings starting to roll out on Google Maps. If you zoom in close, internal mapping information for most buildings on campus is starting to appear. It’s early days, for both us and Google (they’re using us as a pilot for universities in the UK), so we’re not shouting about it yet but this should be really handy once everything’s in place.

York Research Database and the University search engine

We launched the York Research Database back in February, but it took us another couple of months to test and integrate results into our main University search engine, but they’re there now. The big challenge was not indexing too many pages - the research database contains such a vast amount of data that indexing all of it would have overwhelmed the search engine.

Foursquare

We’ve done a small piece of work to establish ourselves on Foursquare. After taking ownership of all our locations a few months ago, we’ve been updating them with accurate information, up to date imagery and links to additional resources.

Updated Twitter widgets

Twitter are in the process of retiring their v1 API, which meant that that our custom Twitter widget available in the Web CMS was about to stop working. We've updated the template to now use the updated standard Twitter widget and it’s working well.

Improving our YouTube channel and notes on video

If you’ve been following our YouTube channel you may have noticed that some of our videos now have a unified thumbnail scheme. This helps in maintaining a brand identity across the institution - we’ve used departmental colours on the bands across the thumbnails in order to better fit them in. We’ve also been doing something of a spring clean on the channel, deleting some old playlists and updating others.

The featured playlist is now a focus on our History Project, including a new series of oral history videos. If you’re interested in a more multimedia-based history of the University there’s some really interesting content here.

We also added some new tips on producing video for the web which are well worth a read if you’re considering adding video content to your site.

Welcome pages

The undergraduate welcome pages will be seeing a big overhaul for the 2013 intake of students. As well as cutting down on the number of pages, we’ve redesigned them to mesh more closely with the welcome booklet sent out to all new students. The pages will be going live in July, in time to help a whole new generation of students settle in at York.

Website redesign

In more behind-the-scenes news, we’ve been doing a lot of work on preparing for a big website redesign. If you’ve had a look at our 50th site you’ll have already seen an idea of what it’s going to look like, but there’s still a lot more to come!

History of the University - an interactive timeline

Recently we published an interactive timeline on which you can explore the key milestones, facts and figures of the University's 50 year history. There are over 150 entries, including historical images, newspaper clippings and videos of the University's past, all in an easy to use and attractive interactive format.

Building the timeline

The timeline was built using Tiki-Toki, an cloud-based timeline product. We tested quite a lot of alternatives and nothing really compared; it's a great product.

Users can pan, zoom, enlarge and browse stories quickly and easily, including on tablets and smartphones. The timeline can be filtered to just show a particular category of story or searched for keywords. We've been really pleased with the response so far - everyone who has seen it seems to like it.

The Tiki-Toki authoring interface

From the creator's end, too, it is incredibly easy to use, requiring only a date and some text in order to place a story on the timeline. The software automatically places an entry in the relevant spot and manages the spacing of multiple stories. The ability to embed images, audio and video is also helpful, and has allowed us to develop a rich gallery alongside the textual information presented.

Are homepage carousels effective? (AKA the Brad Frost Carousel Challenge)

After reading Brad Frost's blog post about the effectiveness of carousels a couple of months ago, I decided to take up his challenge and see just how well the carousel on the University homepage was performing.

We put a lot of effort into producing a steady steam of features to go into the carousel, but does anyone actually read them?

The University of York homepage, complete with carousel in the top right

Our carousel is of the auto-advancing variety, with controls for pagination and pause / resume provided below. We didn't previously set a limit on the number of items that could be displayed in the carousel, but there were often eight or nine items to cycle through at any one time.

The results are in

We started tracking clicks on the carousel slides towards the end of February, along with clicks on the pagination and play/pause controls below. Technical details of the tracking setup can be found towards the end of this post.

For the first two weeks of tracking (20 February to 5 March), the distribution of clicks on the carousel slides looked like this:

Click distribution on carousel slides, 20 Feb to 5 March

It didn't come as too much of a surprise that the slide in first position got the most attention, but I wasn't expecting to see such a large skew. Around half of the clicks were on the first slide, with numbers dropping off rapidly after that. The poor slides in position eight were barely ever seeing the light of day.

The pause / resume button is rarely used, with less than 300 events registered (257 pauses, 36 resumes) since we've been tracking it. This suggests that the button is probably not noticeable enough.

Fewer carousel slots = more clicks?

Given that the items in positions outside the first few slots weren't getting much attention, we decided to reduce the number of items we have in the carousel to a maximum of five.

Total numbers of carousel clicks, 20 Feb - 27 March

We reduced the number of slots to 5 on around 15 March. Since then we've seen consistently more clicks on the carousel than we did when there were more features to choose from.

A possible explanation is that some of stories that we've had in the carousel over the last couple of weeks have been a bit more high-profile than usual (the announcement of our new Vice-Chancellor, BBC Question Time being broadcast on campus and our China graduation ceremony), which may have generated more interest anyway.

A more interesting theory is that we're seeing the paradox of choice in action - that giving people more choices creates anxiety and results in them not choosing anything. By reducing the number of items available to choose from, it's easier to make a choice and click on something.

We'll come back to this in a few weeks and see if we're still generating more clicks with fewer features.

The technical bit

If you're interested in how we're tracking this, read on.

Clicks on each of the carousel slides are tracked as events in Google Analytics. Analytics requires three values when tracking an event (category, action and label), which we're tracking as follows:

• Event Category: Carousel
• Event Action: slide-N clicked 
• Event Label: Destination URL

So an example event might look like:
'Carousel', 'slide-1-clicked', 'http://www.york.ac.uk/50/events/china/'

The call for each event is automatically assembled with jQuery, so there's no manual tagging required each time a new item is added to the carousel.

Categorising events in this way seems to work well as it allows us to view the data in quite a lot of different ways within Analytics.

Look out for

Something that tripped me up at first was that not all of the clicks on the carousel were registering with Analytics, and were appearing as 'cancelled' requests within Chrome's inspector panel.

Look out for cancelled requests (shown in red) in Chrome's inspector panel

The simple solution to this is to delay the request by a fraction of a second so that the event has time to register before the destination page starts to load. See Google's documentation on tracking outbound links for how to do this.

New pages, and a new design, for the 50th Anniversary

The University is celebrating its 50th anniversary throughout 2013 and we're happy to have just launched some new web pages about the celebrations taking place and reflecting on our history: www.york.ac.uk/50/

We'll be adding more features reflecting on our achievements and documenting the events that are coming up as the year progresses, so check back occasionally to discover more.

A new design

The design is quite radically different from our standard template. We've been working with an outside agency on a revised design which ultimately will roll out across much of the website and this is the first pilot project using some of what we've been working on.

Many of you will no doubt have questions about the design change. I can answer a couple of likely ones straight away: For the enthusiasts I'm afraid, no, you can't have the design for your site just yet. For those a bit more cautious, don't worry, this is an early pilot and there is a long way to go before this will affect your pages. We'll share more details about the wider project soon.

We hope you like the design and the content. If you've any feedback then we'd be happy to hear it - leave us a comment or drop us an email at web-office@york.ac.uk.

Introducing our interactive campus map

We're really pleased to unveil our new interactive map of campus, which we've been working on over the last couple of months.

Easily find your way around campus with the new interactive map

With the new map, you can really quickly find any department, building or any of around 150 locations across campus. As well as departments and buildings, you can also see University services and facilities, colleges, cafés, bars, restaurants, shops, cash machines and car parks. So no more excuses for being lost around campus.

Within each category you also have the option to see all locations, useful for things like cafes and cash machines where you just want an idea of what's nearby.

"Show all" lets you see all the locations for any given category. Here's all the places to eat and drink on Heslington West

Anyone who has used Google Maps before will be familiar with the interface, which allows you to easily pan and zoom around the campus, and works great across all sorts of mobile devices.

Because we're using the Google Maps interface, you can switch to a satellite view of the campus and see what it looks like from above.

Looking down on the University lake with satellite view

In some parts of campus, you can also drag the orange "pegman" onto the map to enter Street View and see what the buildings look like.

Street View of Heslington Hall, home to Web Office HQ

Other improvements

We've made improvements to the rest of our maps and directions pages too, giving them a general tidy-up and have added a journey planner to campus, powered by Google Maps.

Get driving directions to campus from pretty much anywhere 

Still to come

This is the first version of the interactive map, and there's plenty more to come in the near future. At the top of our list we've got:

• Searching for locations by typing in their name, rather than browsing a list
• Walking and cycling directions between any two locations on campus
• Clickable pins to provide extra information about a location - such as an image of the building, links to websites, opening times
• Bus stops with live information about when the next bus is due

We're keen to hear what you all think would be most useful, so please let us know in the comments or via our feedback form.

We're really grateful to YUSU for sharing some of the work that they did for the map in the YUSU iPhone app. This gave us a great head start and meant that we could do this a lot quicker than we would have done otherwise.

Check back soon for our second post about the new map, where we'll go into the technical details of how it all works.

A year in the life of the Unviersity of York homepage

The current incarnation of the University of York homepage was launched this time last year, just in time for Christmas in December 2010.

Here's a look at how it has changed over the last year.

Signing up for Google Apps - a look behind the scenes

Posted on our Enhancing the University of York's student website blog:

• Signing up for Google Apps - a look behind the scenes

It's that time of year again

The run-up to Christmas can only mean one thing: advent themed blogs about web design and development! Here are some of the ones I'll be following this year:

24 ways 
Christmas wouldn't be the same without "the advent calendar for web geeks", which has been running since 2005.

The 12 Days of JISC Digital Media Christmas 
A set of quick tips that'll help you to up the quality of any video and audio you produce. Looks like it'll come in handy for people like us who are making some tentative steps into the world of video production.

HTML5 Adventure calendar
"24 days of killer demos, tutorials, community buzz, and other stuff that Steve Jobs would love". Lots of flashy demos that showcase some of the amazing things that can be done with HTML5 right now.

25 days of blog posts from Web Services at Edge Hill University
Once again I'm impressed that the folk at Edge Hill can pull off a post a day about what they're working on - more than one a month is impressive for me!

A new look homepage, coming soon

Over the past few months we've been looking at ways of improving the University homepage.

We're finally at the stage where it's ready to be revealed, so without further ado, here's how it's looking (click the image for a full size version):

What's changed?

A better overview of what's going on

One of the key aims of the redesign was to make the homepage a lot more lively and do a better job of representing the diverse range of activity going on throughout the University. Apart from the news items which changed every few days, most of the old homepage was static, staying the same for long periods of time. We wanted that to change, so that repeat visitors to the page (both internal and external) would get to see something different each time, showing them various aspects of university life.

Instead of showing a large random image, there's now a dedicated space for showcasing big research discoveries, high profile speakers coming to campus, achievements, campus expansion news, etc - anything that shows what a great place York is to study or work.

In the old design, we could just about cope with one of these features at a time, but the page became very cluttered when we had several of them:

We're now using a sliding interface to allow us to have multiple features at the same time. This is something that we've been doing on departmental sites for a while (eg see the Computer Science homepage) - but is new to the homepage.

Keeping it up-to-date

Having such a high profile space for featured content means that we'll have to make sure that there's always something new to put up there.

One of the first things that we've done is to set up a homepage editorial group, with representation from the press, publications, events and web teams. The job of this group will be to identify stories that could be featured on the homepage, and to also find / produce content that we can link to from the homepage.

Getting input from people across the whole University is going to be absolutely key to this, so keep an eye out for further messages.

Clearer paths to major areas of the site

The major sections of the site are now all together in a horizontal navigation bar across the top. The 'directory listing' type parts of the site (A-Z, departments, contacts, jobs, etc) are all grouped together, near the search box.

Simplified colour palette

We've moved away from the rainbow of blue, purple, orange and green, and are now using our corporate green. This brings the homepage in line with the other top-level parts of the site which have already moved into the Web CMS, such as About the University, Research and Campus development.

Links to social networks

A lot of online activity these days goes on beyond the limits of our website, particularly in places like Facebook and Twitter. There's now a link from the homepage to a new directory of social media activity, listing our main corporate presences and the ones maintained by individual departments and offices.

A first step, not the end of a process

We know that not everyone who uses the University website sees the homepage - just under half of our visitors never encounter it (usually having arrived at a lower level part of the site via a search engine). We need to continue to make improvements that will improve the experience of all of our visitors, no matter where they begin their journey.

One key piece of work is that we've started working with Student Recruitment and Admissions on making some big changes to our central student recruitment pages.

Launch date

We're planning on launching the new homepage next week, on Monday 13 December 2010.

If you have any questions or comments, please email them to web-office@york.ac.uk, or leave a comment below.

Update to freqently asked questions CMS template

If you're a CMS user you might have spotted that pages generated using the FAQ template have changed slightly in their appearance and behaviour, which should increase their usability a bit.

Before

Here's how they used to look. Clicking a question reveals the answer.



After

Here's how they look now:



Have a look at a live example on the Department of Physics website to see the full effect.

What's changed

• The answers now slide into place rather than instantly appearing. With the previous instant reveal there was always a chance of "blink and you'll miss it", and not quite noticing that the answer had appeared.
• The background colour and borders should help to tie the question and answer together - in the previous style it wasn't always clear where one answer ended and another question began, especially when the answer contained headings, or when FAQs have been used amongst normal page content.
  
• Minor change to font size and removal of underlines on headings to increase readability.
• The whole width of the question area is now a link, so there's a larger link target for people to hit.
  

Blogger Template Designer

Google recently announced the addition of some brand new template design functionality to Blogger (the tool that powers this blog). The new template designer is accessed via Blogger in Draft, which lets you see how any changes will affect your blog before you make them live.

I gave it a go this afternoon and was really impressed with the results. There are 15 templates available (with more planned for the future), which all look good straight out of the box. You can put your own stamp on them by making changes to the layout, fonts, colours, background image, etc, all of which are easily changed. The background images available are very impressive in themselves, with a choice of hundreds of high-quality photos, textures and patterns to play with. Each template comes with suggested colour palettes too, which makes it easy for non-designers to produce something that looks great.

What you're seeing now (view the blog here if you're using an RSS reader) is the result of just a few minutes of experimentation.

The video below gives a quick tour of what you can do with the new template designer:

Higher Education websites - made to stick?

What is it about some ideas that make them catch on and stick in our memories, while others are instantly forgettable? Why do we have no trouble recalling the details of urban myths but often have difficultly remembering vital facts that could benefit our health?

In their book "Made to Stick", authors Chip & Dan Heath argue that while there's no secret formula for coming up with a good idea in the first place, it will have a much better chance of sticking if it is:

• simple
• unexpected
• concrete
• credible
• uses emotion
• tells a story.

You may have spotted that spells out SUCCESs (which they openly admit is about as clichéd an acronym as you'll ever get - they could have used some different words and changed the order but CCUCES wouldn't have been quite as memorable).

What's that got to do with the web?

Although it's not a book specifically written about the web, the techniques that it describe can be applied to any form of communications, whether that's giving a presentation, contributing to a discussion, or indeed, writing web content.

The issue of simplicity was the one that resonated the most initially - as anyone who has attended a Writing for the Web session will have heard - simplicity is a vital part of producing web content that is easy for your readers to take in. So that means avoiding jargon, discarding any content that isn't essential to your core message, providing one clear call to action instead of seven vague ones, putting the most important information up front, etc.

Reading this book happened to coincide with some work we've been doing that has involved us looking at some of our competitor's websites. Amongst the more memorable ones I started to notice more aspects of the stickiness model at work:

Unexpected

I definitely didn't expect to see exploding buildings (Boston) or claims of the benefits of teenage pregnancy (LSE) on the homepage of a university website. They definitely caught my attention and encouraged me to read more.

Concrete

There's a greater chance of ideas being memorable if they contain concrete things that people can relate to, like names, actions, faces and places.

One challenge that universities face is making academic research understandable and appealing to a general audience. Many do this well by showing how it relates to real world problems that people can identify with, rather than using more abstract language that doesn't carry as much meaning amongst a general audience.

Take this example from Carnegie Mellon, which uses the act of making a cup of coffee as a "hook" that helps you to understand research about the world's water resources.

Credible

Most universities can claim to be the best at something or other, but it sounds a lot more believable when it's coming from someone else. Realistic quotes from staff and students can often be a lot more believable than anything that comes directly from the institution.

Using emotion

Sites such as Imperial are very good at using emotive language that helps you to imagine what it would be like to come to study there - "be inspired" and "an Imperial degree is something special" rather than just presenting a list of facts.

So, plenty of food for thought. I'll definitely be keeping my eyes out for more ways to make web content that "sticks".