Tag Archives: go

Mega Menus for GO

For anybody reading this blog from outside Edge Hill, we have a staff and student portal called GO. GO is intended to eventually replace the current intranet.

Due the the vast nature of the internal information, we decided that the current top navigation bar just didn’t provide enough direct access to the services that staff and students need on a daily basis:

Old GO navigation bar

For a while we’ve been working on a mega menu solution. Mega menus are springing up everywhere and even Jacob Neilsen feels that they are a much better solution than previous drop down implementations.

There are three features in our mega menus worth mentioning.

1. The mega menu content.

There are two flavours of the mega menu, one for staff and one for students. External parties with access to go will not see a mega menu.

The main mega menu drops down when the GO logo or the A-Z link is rolled over. The left hand colomn has some current news stories, and these will eventually appear automatically (they’re currently added manually so if they go out of date, bear with us). The other links have been deemed to have the most value and the A-Z link is repeated in the bottom right hand corner. Go on click a few and see where you end up.

2. A-Z

We have also added an A-Z page and this should cover all wiki pages sites for whom the user has access together with a few other areas of Edge Hill’s online services. The A-Z is quite extensive so to enable easier access the A-Z has it’s own navigation. When one of the letters is clicked the items beginning with that letter are displayed and all others are greyed out making it easy to hone in the links you need.

3. Top Navigator choices (+/-)

You may have noticed a +/- button on the top navigator.  Initially all users are offered Mail, Library, Blackboard and Files on the top navigator.  As long as the user is in GO, thay can use the +/- button to open a choice box and select the 5 items they prefer.

There is scope to add further items in the future, but choices will be limited to 5 in order to keep the top navigator consistent.

The mega menus should also function in the docs. library and wiki domains.

Go Success

Go was launched roughly three years ago and the overall aim was to make everything more accessible and easier for students. Specifically access to their Mail, File Storage, Discussion, Community, Library and Blackboard.

I would say over all Go has been a fabulous success, we have developed it a great deal over the past three years, improving it in ways more specific to certain groups of students. For example Health, Business School and Performing Arts students can all log into Go and see a taylor made area that allows them to submit assignments, get module updates and notifications about their course. Who’d of thought from this very first version we’d end up with something so dynamic.

The ‘news‘ area is split into four sections: general, support, learning and social. It serves to inform both staff and students of up and coming events; serious and fun alike and health and safety issues. It’s regulary updated to keep interest and to get out as much information as possible, too as many users as possible.

There are ‘panels‘ that can be moved around the page or removed completley, it’s up to you! In particular the ‘student learning‘ panel and the ‘student support‘ panel, they provide important information such as Term Dates and Exam Timetables.

Learning Services have created a video called ‘Learning Services 2010: Introduction to the Go Portal‘, it takes you through Go step by step: http://www.edgehill.ac.uk/study/accommodation/video/learning-services-2010-introduction-to-the-go-portal. It’s a very useful way to introduce you to Go, so if you are a student or a member of staff and you haven’t used Go, what are you waiting for!

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.

Rise of the Mega Menu

Mega Menus might sound like McDonalds’ latest attempt to Super Size your life but not in the web design community.  Here we’re talking about a relatively new development to help navigation around websites.

For quite a long time drop down menus have been a popular navigation feature on the web – our corporate website has used them for many years and they go some way to solve the problem of linking to lots of information while using a small amount of screen space.  Drop down navigation isn’t without its problems – nine years ago, usability guru Jakob Nielson advised to use them sparingly – and mega menus are an attempt to do drop downs better.

Our interest in expanding navigation isn’t for the corporate website but GO. As part of the staff intranet to GO migration we are facing the problem of vastly increasing the amount of information available and guiding people to their required system.  The top global GO navigation that shows in most internally facing services and currently contains half a dozen links won’t scale when every department and system is available through GO.

This isn’t an overnight surprise and we’ve seen this coming for over a year but now is the right time to make changes.

I don’t believe “mega menu” is a standard term and many sites implement the idea in different ways but the general idea is to have an expanding menu area linking to many parts of a site.  The first example is an extension of standard drop-down navigation.

image

Typically there will be several menu items each with their own drop down containing a variety of information.  The larger area means there is greater flexibility in how links are shown.

The second type of mega menu can be seen on the BBC websites.  In early 2008 they added an “Explore the BBC” button to the masthead of their pages. Unlike mega drop down menus, this is a button you must click on and opens up to a selection of links:

image

The explore button in provides a mix of fixed popular subsites – iPlayer, News, TV etc – and time-limited promotional links – currently Strictly, Democracy Live and Merlin.  There’s also a link to their full A-Z list (the topic of a future blog post!).

Jakob Nielson has something to say about mega drop down menus as well and it’s useful advice which we have hopefully applied to our own implementation.

Our planned approach is somewhere between the two design patterns.  We’re experimenting with ways to add “More” to the GO navigation.  We’re currently testing solutions and hope to launch something in the next few weeks.

What’s Up Docs?

image There are big changes coming to the staff intranet!  The staff intranet, also known as “docs”, is the default homepage for staff on campus and has served us well for the last… actually I don’t know how many years!  But it’s becoming increasingly apparent that the systems – both process and technical – are not able to scale with the growth of the University and with the increasing reliance on the web as a publishing point.

Along side the staff intranet, for the last three years we have had GO, our portal system available to both staff and students offering single sign on access to a range of web-based services from Edge Hill.  While it’s been possible to access the intranet via GO, it’s never been well integrated but our changes will move to a single platform.

For about a year we’ve been slowly growing our use of Confluence, an enterprise wiki system which will manage most of the content available through GO.  To date the Faculty of Health has been the largest user as part of their extranet project but over the next few months we will be implementing the migration of the contents of the staff intranet into Confluence.

We’ll be using this opportunity to give sites a good winter clean and give access to departments to enable them to easily create and update pages and link to files, all through a web interface.  The wiki offers a number of other benefits such as searching across pages and documents, and – of course – integrates with many other services available through GO.

GO and the staff intranet are very different beasts and so we’ll be making further developments to aid the transition.  Some of these might be temporary such as a new default homepage for people who haven’t yet taken advantage of the personalisation available through GO.  Other changes will apply to everyone including students.

I’m pretty excited by the changes that are coming and we’ll be introducing some possibly as soon as early December so stay tuned to find out more!

Burning down the house

image

This week Web Services started a new way of running some of the projects we undertake.  It’s still early days (five of them!) but I thought it might be useful to explain what we’re doing so that we can reference it in future.

The system we’ve adopted is called Scrum – the name comes from the game of rugby – and is a commonly used agile development technique.

As with any project management system there’s a whole load of terminology and scrum is no exception.  We’ve got pigs and chickens, scrum masters, product owners, sprints, backlogs and daily standups!  I’m not going to explain everything now but here’s a few of the things we’ve done this week.  I’m sure we’re doing some things “wrong”, but that doesn’t bother me too much.

The first project we’ve introduced this technique to is the migration of the staff intranet into GO.  We’ve set ourselves an ambitious timescale to get it moved across by the end of the year and it has a good balance of development, design, content creation and training meaning everyone in the team is involved.  Again, there will be more information about the intranet to GO migration coming out soon!

I was advised by Alison Wildish Kerwin (formerly of this parish) that the roles of product owner and scrum master should be distinct so Steve, whose work for the Faculty of Health involves a lot of development work on GO, agreed to take on the latter role.

The process started off at the end of last week when Steve and I – now undertaking the role of product owner – met to draw up the product backlog.  This is the list of things that need to be done on the project.  We already had lots of things to do to GO and added in a bunch of jobs related to the migration.  We tried to make sure each job was well defined so that anyone undertaking the task could get going straight away.

Fast forward to Monday morning, 10am and our first team scrum meeting.  After I’d explained what I understood it to be about we took a break to play poker.

Planning Poker CardsBefore I get into trouble, we weren’t sat round a table with a stack of chips playing Texas hold’em, we were playing Planning Poker.  This is a way for the team to collectively decide how difficult each task is.  In our case we’re using story points instead of time as a measure of complexity as everyone has different skills so what takes me a few hours might be done by someone else in a matter of minutes, but the complexity doesn’t change.

Aside: I’ve seen some really nice planning poker cards from Moo and other companies but I’m cheap and don’t want to pay $$$ for them so I made a set with a marker pen and some of the hundreds of old business cards that are in my drawer!

In Planning Poker, each task is read out and players each choose a card.  If there is a consensus, the ticket is allocated that point score, otherwise the highest and lowest players are given the opportunity to argue their case.  The process is repeated until there is agreement before moving on to the next ticket.

Once this was finished I quickly sorted through the tickets and gave each a priority from one to five before passing the product backlog back to the team to select tasks.  Some tasks were selected by individuals, others by pairs to undertake during the first sprint.  I didn’t try to influence this process too much but if a job was selected, it had to be completed by the end of the week.

Nine tasks totally 65 story points were selected to form the Sprint #1 backlog and the project was now underway.

Sprints are short, iterative cycles in the project development where each final output should be a “finished” product.  I consider finished not necessarily to be something we’d release to the public but at least something that we’d show to stakeholders and clients.  In most scrum teams, sprints are 30 days long but I think this is probably too long for many web development projects where there are fewer hard software engineering problems.

So we have adopted one week sprints.  This may turn out to be too short but for now it’s giving us the opportunity to see how the cycles work in a shorter time.

Each day at exactly 11am we have our “daily standup”. So far there hasn’t been much standing up going on but I can let that slide.  Each person in the team has the opportunity to say:

  1. What they did yesterday
  2. What they’re doing today
  3. Any problems preventing them from achieving their goal

Sprint #1 Burndown ChartThese meetings last at most 15 minutes (and so far much shorter) but are really useful to give everyone an awareness of how the project is progressing. As tasks are completed they are closed in our ticket tracking system and we can update our burndown chart. This is a graph showing how many story points are outstanding each day and means we can see at a glance how work is progressing.

Today after the daily scrum meeting we took the remaining items from the product backlog (with a few additions) and started the next cycle, first playing planning poker, then choosing tickets to undertake next week.  For next week we’ve introduced one task from another project – Topics/125 – and we’ll be using scrum for more work over the next couple of months while we assess its long term effectiveness.

So that’s all for our first week of scrum! I need to thank Alison and Andy Male from the University of Bath Web Services.  They’ve been very patient in answering all my questions about how they use scrum over the last few weeks (and months!).

Google Apps Mail – POP/IMAP/iPhone

As mentioned by our colleagues in Core Services first year students have been given Edge Hill University Google Mail accounts. We’re a couple of months into the semester and roll out seems to have gone OK. Students have been able to happily click on the Mail link in GO and be taken directly to their mail. On their main GO Home tab they’ll also have seen the Mail box which unfortunately wasn’t compatible with Google Mail. This has now been fixed as you can see here:

googlemailpanel

Clicking on the “Google Mail” title will take you to your inbox. But a new thing with Google Mail is that you can now click on individual emails and be taken directly to that message in your inbox.

Please note that the Google Mail box only shows you unread mail. So if you haven’t got any new messages waiting then they won’t appear.

This was all made possible due to a new development we’ve recently completed. Password syncing to Google Apps. Previously when you logged into Google Mail you either came through GO or you were redirected through GO to login. This meant that we were dealing with authentication and checking your passwords directly against our systems before handing you off to Google. Now we sync GO passwords with Google so if your not accessing your email through a web browser Google can check your password with it’s copy.

Doing this enables you to get your Google Mail in any format you like. You can now follow Google’s instructions on how to setup your client for POP, IMAP and even ActiveSync for Windows Mobile and iPhone!

When following the instructions remember that you are a Google Apps user, and that your username for this is the one shown on the top right when your accessing your Edge Hill University Google Mail account.

googleusername

Before contacting us with any problems ensure you check out Google’s very extensive Google Mail help.

Ste Daniels

GO Faster!

The Edge Hill GO portal has recently had a couple of little updates, both of which I hope will improve your usage of it.

Until recently whenever you logged into GO you where taken to your last used Tab at this address https://go.edgehill.ac.uk/. This was all well and good when the majority of people only had the one “Home” Tab.

GO Home Tab

A selection of people had also added their own custom tabs by clicking the old “New Tab” link, or now the “+” link at the end of the list of Tabs. But this behaviour wasn’t prevalent across the majority of users.

Performing Arts users have had their own Tab for a while now, and also recently Health students have had a Health Tab. Students have had the “Student Central” Tab for some time too now which contains a growing number of services.

GO Home - Student Central Tabs

Always going back to your last Tab on login meant an extra click to get back to Home. Or if you used a Tab regularly you couldn’t bookmark it’s address individually, or have multiple GO Tabs open at once in your browser. Since in my work for the Faculty of Health I will be driving them to make more and more use of GO and the services it provides I need a solution for this problem.

GO Tabs are now individually addressed in GO. This means your Home tab is always accessible at:

https://go.edgehill.ac.uk/

Other university provided Tabs are available at addresses such as:

https://go.edgehill.ac.uk/student_central
https://go.edgehill.ac.uk/health

With custom tabs that you’ve created being available at addresses like this:

https://go.edgehill.ac.uk/tab/news

This’ll hopefully help people get to where they want to go faster 🙂

Other news.. To also improve uptake of GO usage in the Faculty of Health I’ve spent a lot of time speeding up the page load times of GO. I think this is an important aspect because people just don’t use slow unresponsive systems. A few facts and figures.

Before my work a standard GO Home Tab took 2-3 seconds to load and made 34 database calls.

Since my work a standard GO Home Tab takes 0.5 seconds to load, makes 13 database calls, and uses a third less memory resources on the server, which makes for a much faster experience. (I hope at least one or two people noticed!)

Steve Daniels

How To Skin A Wiki

Lay the Wiki on its back on a flat surface, and pinch the skin at the loose part in the lower belly………

Only joking, as we know a wiki isn’t a furry woodland critter that makes a durable Davy Crockett style hat. A Wiki is a website, with pages that can be easily updated via an interface, using simplified mark-up language. We are using Confluence, a “simple, powerful wiki that lets you create and share pages, documents and rich content with your team.”

What is the Difference between Designing and Skinning?

I’d define skinning as styling pages that already exist, a bit like redecorating a hall with outdated floral borders along the skirting boards. Whereas design is a process, where every stage is considered, from conception to sign-off.

I have already written about when you should and shouldn’t re-skin a site, it is generally frowned upon unless fresh functionality is being added. Skinning a wiki is different; it is a way of creating a bespoke skin that is true to the branding of your company or institution.

Aims

  • I wanted to approach the project as if I were designing for the corporate site. Even though I knew I would be working with pre existing code and structure, I still wanted to work from a finished design developed in Photoshop.
  • I wanted to work with the same web fonts as the corporate site: Arial for headings and Verdana for regular text. Also to use consistent spacing, line-heights, link-colours etc
  • I wanted to create a look and feel consistent with the GO portal, to contrive the semblance of a single application when navigating between the two.

Photoshop Designs

As noted in my previous post about GO, I’ve been determined to dispense with any conspicuous decoration, especially repeated background images and drop-shadows, I wanted the design to have a clear, utilitarian quality.

standard layout

The wiki breadcrumb and dropdown menus match the tabs in GO. The background images are white PNGs with their alpha transparency set to 30%; the background colour of the header can be altered, and consequently the tab’s transparent background image appears as a tint of that colour.

An example of this colour effect with the skin applied to the mail system:

Web Mail

The wiki will include intranet sites for University departments; they will be accessed via customised GO panels. We intend these sub-sites to have visually interesting and instantly navigable homepages.

Applying the design to Confluence

I soon realised that my idealistic intentions were a little impractical, when I noted the amount of page layouts, and methods of displaying data that Confluence offered. To try to design up front for every consequence was naïve, so I decided to stick to the most basic layouts only, and then play it by ear.

Confluence has a whole heap of style sheets with many generations of classes. Without Firebug and the Web Developer toolbar for Firefox, it would have been like deciphering the riddle of the sphinx.

As designers tend to do, I started from the top. Getting the breadcrumb, search-bar and drop-down menus to look indistinguishable from GO, this seemed fairly straightforward; then I cross checked it in IE7 and Opera and I quickly remembered how much easier it is to style your own code.

After this I concentrated on the basics: headings, paragraphs, lists, links, tables and forms, really trying not to be drawn toward the more idiosyncratic elements. When I approached elements that were unconsidered in the preparatory stage, I tried to apply principles that were consistent with what I already had. I removed borders, margins and text indents that busied the page composition, defining spatial consistency and alignment.

Was I Successful?

Well I’m still trying to iron out some cross browser quirks, especially where elements are floated, and CSS attributes have been inherited in varying orders, so this question is slightly premature. This will be an ongoing project that will throw up conflicts as different departments evaluate how they want their content to be displayed.

Evaluating things from how it looks in Firefox, I’m fairly pleased with the results; the pages look less like Confluence pages, and more like Edge Hill web pages, but there are still many echoes of the default look and feel. I think I have been successful in spacing the layout so that the pages flow better, and are easier to speed-read and analyse at a glance.

Where Now?

  • Internal faculty and departmental sites will gradually be moved into Confluence over the coming months replacing the current intranet.
  • The skin will be adapted appropriately for other systems like online mail and Blackboard.