Author Archives: Carl

About Carl

Web/UX Developer for Hampshire County Council. Passionate about streamlining and building robust, clean, beautiful, scalable but flexible web sites and services. Also passionate about painting, crochet, cooking and my little baby son.

Rethinking responsive navigation – a real world case study

Carl, December 29 2015

We started designing a content first, mobile first template framework back in 2013. At the time, we had a clear view that the site would be user focused and task based. The main difficulty is that we deliver around 150 different services. All of these have a wide range of different users. We needed a way to deliver a consistent navigation across the whole site. This navigation needed to work across devices and be usable by everyone.

Research

We spent a few weeks researching different navigation models that already exist. We looked in detail at navigation for smaller screens with limited space. I’ve already written about the navigation models we shortlisted and won’t detail them here.

The option that gave us most flexibility was the off-canvas model of navigation “drawers”. This model stacks navigation menus to the sides, sliding them in on a button press. We thought this was great, we could have as many menus as we liked, all just a click away.

Implementation

The tool to achieve this was mmenu.js  – a jQuery plugin with solid updates. Implementation into our template was a little tricky. Some CSS modification here, a few parameters for cloning menus there. But we got it in, working well and performing across devices.

The main template had three off-canvas drawers:

  • Main header menu
  • Search form
  • Footer menu

These were the items that appeared in-page on larger screens, off-canvas on smaller screens. Mmenu even dealt with having sub-menus, which just seemed perfect to us!

As well as those three menus, some sections could also have their own menus:

  • Microsite/campaign navigation
  • Search filters
  • Anything else that doesn’t fit (I know…)

This did result in some pages having 5 menus that slid in from off-screen on a press. The behaviour and styling of these menus was consistent, but something felt wrong. It felt like a lazy option – hiding navigation instead of providing what users needed.

Also, that hamburger icon.

anav-hamburger

To be fair, we never had the hamburger on it’s own. It would always sit with the word ‘menu’. We had a magnifying glass next to ‘search’. A little stack icon next to the breadcrumbs link. Finally, a small funnel icon in the label for search filters. No mystery meat, and tidy little icons. Clever, eh?

anav-filter

I just felt unhappy having everything hidden away (even the users current location). It allowed more room for content, but at the cost of context.

The design had got lazy, as had our solutions. But what to do?

Surfacing

I wrote a wishlist of what I wanted the main header to show at all screen sizes:

  • Breadcrumb menu
  • Search form
  • Core menu options:
    • Accessibility (has a sub-menu)
    • Services (has a sub-menu)
    • Contact

In short, the main header needed to show the same content at all screen sizes.

One thing I was comfortable with losing at small sizes was the council logo. Hantsweb is the brand, as long as that remained, the council logo was optional. Besides, the council logo is in the footer anyway.

Finding a better way

Displaying the breadcrumb menu at all sizes was simple. I just needed to remove the mmenu attributes from the list and delete the button. A couple of tweaks to line-height and it was all good.

Adjusting the main header bar was going to be harder. With three distinct areas (logo, search, menu) the layout seemed clear. For larger screen sizes (>=37.5em):

  • [logo] – [accessibility, services, contact] – [search]

For smaller screen sizes (<37.5em):

  • [logo] – [search]
    [accessibility, services, contact]

But how to achieve such a switch at different sizes? Flexbox to the rescue!

Using flexbox, I was able to specify with CSS the space available to elements. I was also able to change the display order (menu after search on small screens). This got me my core layout with just a few lines of CSS.

It also allowed me to remove redundant CSS and HTML too – a win. But it looked a bit ugly.

Unpolished and clunky was all I could see. The first thing to do was sort out the spacing of the logo and search form.

Then, concentrate on those menu options. They just looked lost and out of position. Setting them to take up a third of the space and center the text helped. I also opted to reduce the size of the text for these options.

anav-top

With these changes in place, I felt much happier with the navigation.

The complete CSS, for all device sizes:

.global-header{
   display:flex;
   flex-wrap: wrap;
   flex-direction:row;
   justify-content:space-between;
   align-items:center;
   padding-top:0.5rem;
}
.global-brand{
   order: 0;
   flex:0 1 40%;
}
.global-search{
   order: 1;
   flex:0 1 60%;
}
.global-nav{
   padding:0.5rem 0;
   order: 2;
   flex:0 1 100%;
}
.global-nav li{
   width:33.3%;
   text-align:center;
   font-size:0.875rem;
}

Wrapping it all up

What I want to achieve is a more obvious navigation for our users. If I can also cut out a jQuery plugin and lose 36kb of JavaScript and 40kb of CSS, even better.

This navigation model will force us to take a critical look at what we present to users. It doesn’t allow for laziness or just making lots of navigation options. Focus on the user and their tasks, and create navigation to suit.

Sidenote: I wrote this whole blogpost in Hemingway.app. The instant feedback from the app means this article has a reading age of Grade 5. No hard sentences to read.

Registration services

Carl, April 24 2015

Work has been progressing over the last couple of months on rebuilding the registration service on Hantsweb.

Here’s a current work in progress on the homepage:

http://www3.hants.gov.uk/registration.htm

This shows the common features of the template as applied to statutory content. In this case, registration services are also actively trying to promote Hampshire for weddings. We’re trying out a way of promo-ing a topic or task as you can see with the featured image and overlaid task panel.

It looks quite classy – I think – and is something I’d like to extend to other services too.

Comics to communicate

Carl, April 2 2015

I’ve been reading a bit recently about using comics to communicate ideas, processes, instructions – anything really.

Here’s one I’ve put together as a simple example:

http://www3.hants.gov.uk/wastepermits.htm

It’s a little rough in parts, but is intentionally simple in order to communicate how the permits scheme works. It wouldn’t replace the more detailed content needed – still figuring out how to tie them together more closely.

For comparison, the current guidance is here:
http://www3.hants.gov.uk/waste-and-recycling/tradewastecontr…

And the updated/compact version is here:
http://www3.hants.gov.uk/wasteandrecycling/recyc…

Do you really need an app for that?

Carl, February 28 2015

Very insightful article by Paul Boag.

http://www.sitepoint.com/really-need-app/

Takeaways for me:

“Even if a user does see your app and downloads it, that does not guarantee they will keep it. With limited storage space users only keep so many apps on their device. They’re ruthless when it comes to deleting apps. Users tend to only keep apps that they are using on a regular basis.”

“It is not only expensive to build your application in the first place but also to maintain it over time. Every new device released could force you to update your app. Changes in the screen size, resolution and OS can lead to alterations in your application.”

“We cannot respond in a knee jerk reaction of ‘everybody has an app so we need one too.’ Instead, there needs to be a solid business case.”

Waste and recycling – completing the circle

Carl, February 12 2015

Domestic waste search (what do I do with…?)
http://www3.hants.gov.uk/wasteandrecycling/wastedisposal.htm

– this search lets you find a type of waste and then tells you what you can do with it! A few hyperlinks need to be added to some of the text, but otherwise complete.

Find your nearest recycling centre:
http://www3.hants.gov.uk/wasteandrecycling/recyclingcentres.…

– this pulls together and completes the circle of the work we first started on the new template almost 18 months ago.
– I’m particularly pleased with how each centres details are displayed onscreen. The format of hours, address and map woks for every kind of venue.
– the nice expand/collapse details for types of waste make use of the HTML5 <details/> and <summary/> elements. Basically, a standards compliant way of making “accordian” content, with JavaScript only needed for browsers that don’t support it. Win!

Waste accepted at HWRCs:
http://www3.hants.gov.uk/wasteandrecycling/recyclingcentres/…

More importantly – all of these three areas use the exact same source content. We found, when reviewing the current site, that the domestic waste search, waste accepted and recycling centre pages all displayed the same type of information, but stored specifically for each area. That meant three places to update the restrictions on disposing of dog poo!

We’ve simplified that to onew master set of waste types and one master set of HWRCs, which can be meshed together for presentation.

Only by doing a complete content review and inventory can we uncover things like this, which highlights how important it is to understand your content needs before even begin to think about buiding anything.

What’s new in the Hantsweb template?

Carl, February 9 2015

Alice in Hampshire:

A small campaign site about 150 years since the publication of Alice in Wonderland:

http://www3.hants.gov.uk/library/whatson-library/alice150.ht…

This will grow to feature an alternate main page if the number of events increases.

On browsers that support it, the pictures have some small animated effects.

ePayments changes:

Enhancements to the current ePayments service to both support the new Hantsweb template and accomodate provision of ePayments and invoice payments to Oxfordshire:

http://www3.hants.gov.uk/epayments-invoice-start
http://www3.hants.gov.uk/epayments-purchase-2
http://www3.hants.gov.uk/epayments-account-2

These screens are non-functional as the actual build is being done by .NET developers.

It’s a great way to show how we can rapidly prototype and iterate design solutions before handing them over to colleagues for build in a different technology. Our current content management system WPS and the new system Contensis – both allow this kind of fast prototyping of pages and services with dummy data.

Waste and Recycling:

One of the earliest things we designed and built when prototyping the new template was HWRC details. Really pleased to say that we are going ahead with a full rebuild of the Waste and Recycling site.

Here’s a slightly updated alternative waste disposal finder for commercial waste:

http://www3.hants.gov.uk/wcms-wasteandrecycling/…

We are still very much at the content requirements and content strategy stages on this site – but once that is fully drawn together, the build should move forward very rapidly.

What’s new in the Hantsweb template?

Carl, January 15 2015

LIVE

Film Hampshire has gone live in the new template:
http://www3.hants.gov.uk/filmhampshire.htm

This site is HCC but geared around marketing and promotion – hence the use of the navigation bar across all pages. It’s a much fresher site than the old one and one that attempts to blend task-based design with promotional elements.

PROTOTYPING
We are exploring different ways to publish and find mobile libraries stops, with a couple of examples already to review and test, and with a few more ideas in the pipeline:
http://www3.hants.gov.uk/mobile-libraries-map
http://www3.hants.gov.uk/mobile-libraries

We are exploring how to present charts in a more interactive way, and to provide guides of chart-based data:
http://www3.hants.gov.uk/roadaccidents

We are looking at how to design payments screens for partnership working with organisations like Oxfordshire – where we host and provide the payment facilities, but citizens might be coming from Oxfordshire County Council websites. It’s a difficult one to get right, but here is some early thinking:
http://www3.hants.gov.uk/epayments-purchase

That’s just a little update of some of the things that have happened, or are happening at the moment.

Indicating required and optional fields

Carl, December 16 2014

Been looking at best practice for indicating required and optional fields in forms as we are very inconsistent.

This article is very informative, with lots of research cited baymard.com/blog/required-optional-form-fields

“During testing we frequently observe users having a laser-focus on the current field as they progress throughout the form – especially as they enter a new field and try to work out its context.”

“one may be tempted to simply state at the top of the page that ‘All fields are required.’ Alas, testing shows that this doesn’t suffice as some users inevitably end up overlooking the disclaimer.”

I have put together an example here, which marks all fields as either required or optional:
http://www3.hants.gov.uk/portal-help/helpmelogin…

Ignore the inconsistent validation on my mock-up – does this approach work in a clear and consistent way?

What’s new in the Hantsweb template?

Carl, December 14 2014

School term dates
http://www3.hants.gov.uk/education/schools/schooldates
A fairly simple update to the older page. The underlying data remains the same, but with a clearer layout, in-context download options, and with the next/current holiday pulled out and highlighted. The current page is here for comparison: http://www3.hants.gov.uk/education/schools/schoolholidays

Our Performance
http://www3.hants.gov.uk/wf-performance
A simple set of performance measures, as a handy stepped article. Using a lovely illustrative icon set I bought for us to use.

Hampshire Now
http://www3.hants.gov.uk/hampshire-now
A very magazine style layout for Hampshire Now, with a focus on strong imagery and using colour and layout on individual articles. Some great work by Nigel Barker on getting these made and pushing the template with some new modular styling options. Also really proud of the performance page http://www3.hants.gov.uk/hampshirenow/hampshire-now/hnow-per… using SVG graphics for resolution-independent imagery.

Film Hampshire
http://www3.hants.gov.uk/wcms-filmhampshire.htm
A self-contained “micro-site” promoting Hampshire as a film location.
Their current site can be seen here for comparison http://www3.hants.gov.uk/filmhampshire.htm

Road accidents
http://www3.hants.gov.uk/roadaccidents
A very work-in-progress page, but one that will pull together the road casualty stats here http://www3.hants.gov.uk/roadsafety/road-casualty_statistics… into clearer, more usable charts that are generated from in-page data, rather than being JPEG images.

js

Unobtrusive JavaScript

Carl, May 23 2014

Sites like Hantsweb consist of many dozens of applications and snippets of rich functionality, sitting alongside and integrated with all of the text-based content on the site.

Increasingly, rich functionality and content are one and the same, and we work hard to create the user experiences that best suit the discovery and use of our services.

Continue reading