Blogs

City University London Web Team

Category Archives: Usability

Responsive Navigation

Information Archiecture, Responsive Design, Usability.

The Web Team have recently launched two responsive websites: a resource for New Students packed with useful information about the induction process and a micro-site celebrating Cass’s Ten Year Anniversary.

One of the biggest challenges in developing these sites was tackling navigation. For better or worse, City’s website has a complex navigation system and shrinking this down to fit into the limited real-estate of a mobile phone screen threw up a number of IA, design and coding challenges.

Given that responsive design is a relatively new phenomenon, a number of design patterns have emerged to deal with navigation on small screen devices. After prototyping and testing a number of different options, we settled on a hybrid approach that prioritises search and gradually reveals layers of navigation when users click a “toggle” button.

Here’s an example from the Cass website:

Mobile navigable – collapsed and expanded

Desktop Navigation

These screenshots illustrate how on smaller screens the global navigation is collapsed and hidden. When users click the menu icon, the navigation then slides down. This emerging “toggling navigation” pattern has sparked an interesting debate amongst the web design community about which icon best represents a hidden menu. We went with the three horizontal lines approach as this appears to be emerging as the most popular pattern and has been adopted by major sites such as Facebook, Twitter and Google. Also, when we tested the design with users it didn’t cause any confusion – it appears to be a design pattern that many users instinctively understand.

To aid user’s understanding of the icon we included the label “menu”. Again, there is debate over the best label: “navigation”, “navigation menu” etc. but “menu” appears to be emerging as the most widely used. In time I suspect that enough users will understand what the three horizontal lines means that the label can be dropped altogether.

The global navigation differs between the Cass and City website but we have adopted a very similar pattern to keep some consistency between the two.

Here the navigation works in exactly the same way except that the sub levels have been removed to simplify the experience, and we retain the “Cross domain” navigation above the global navigation.

These sites are still very much our first forays into responsive design and we will continue to test and refine these patterns as we “responsivise” more of City’s websites.

New student section and responsive design

Development, Usability, Website , .

Just in time for the start of the year, we released a responsive version of the design for the new student section.

It’s a first step into switching the entire site to a responsive design and over the next few months, we’ll look into rolling it out to other sections. We will also be improving the design and functionality as we go along.

CSS media queries target different screen sizes and adapt the design to the size of the user’s screen. We opted for an approach favouring fluid transitions: rather than using fixed breakpoints set by specific hardware device sizes, the elements are rearranged to fit any screen size.

We introduced Bootstrap with the release of this new design, to handle the grid, scaffolding and responsive functionality. We also took this opportunity to switch this section to HTML5. A change that has previously been made elsewhere on the site and that we will continue to apply across different sections.

If you want to learn more about responsive design, A List Apart published an interesting article on this design process.

Iterating the global navigation of a university website

Information Archiecture, Upgrades, Usability, Website.

I’m pleased to announce that we’ve released a new version of our global navigation for the University website. We will be rolling-out bespoke versions to Moodle, Library Services and the Intranets, shortly.

These changes make it easier for our two major types of user — loosely internal and global — to find information and complete tasks in a simple, predicable, efficient and consistent manner.

(more…)

Find us

City, University of London

Northampton Square

London EC1V 0HB

United Kingdom

Back to top

City, University of London is an independent member institution of the University of London. Established by Royal Charter in 1836, the University of London consists of 18 independent member institutions with outstanding global reputations and several prestigious central academic bodies and activities.

Skip to toolbar