What's wrong with the UKAPW layout?

If the website layout fits the site content, the site will have a consistent look and feel and will be perceived to be user-friendly. Consistent layout should in turn drive consistent content. That means less wasted time for students, actuaries and potential actuaries and users of actuarial advice.

The UKAPW layout: more consistency required

The 2010 UKAPW is loosely based around a 3-column layout. The content and use of the third column (especially) is inconsistent from page to page, even among the "landing pages", which introduce the main areas of the site. Similarly, graphics are used inconsistently between these main pages. Good layout gives a sense of wellbeing absent on the UKAPW; on the UKAPW it's hard to get your bearings.

The "columns" and "graphics" aspects are explored further below. We then explore the link between layout and content. Finally we briefly summarise the intentions behind the myFIA layout and how it was implemented.

[1] Layout and columns

In the UKAPW's 3-column layout, the third column is used for a variety of purposes. But this seems more by accident than by design; sometimes the third column is empty.

Table: use of 3rd column, split by site area
High level page3rd columnHigh level page3rd column
Becoming an actuary Associated documents News Search news + contacts + European actuary graphic
Students Certificates for students (but almost empty) Events Search events + contacts
Members Find an actuary + actuarial directory Research and resources Search documents + contacts
+ European actuary graphic + publication of the month
Communities My communities Regulation Associated documents
Practice areas None About us Associated documents (but they're not)

[1.1] The 3rd column: suggested improvements

  1. Sort out "light" content: Students, Practice areas and Communities (what are "document libraries"?).
  2. Where there are "associated documents" make sure they are ... associated.
  3. Consider why some areas have search functionality and others don't.
  4. Consider putting "the European actuary" graphic in a more logical place(s).
  5. Find an appropriate place for the "publication of the month".

[1.2] Columns and the home page

The home page completely lacks focus. I suspect this is the lack of columnar structure; the four columns again seem to have come about by chance – an afterthought rather than after thought. Perhaps things would have been better if a simpler three column layout had been adopted. This would have meant some rationalisation and restriction of home page content. See also myFIA's critique of the UKAPW home page

[2] Layout and graphics

The 2010 UKAPW makes more use of graphics than its predecessor. Personally I think the graphics bring little of value, especially on the home page, but I'd at least like to see graphics used consistently. We don't get this.

Table: use of graphics split by site area
High level pageGraphicsHigh level pageGraphics
Becoming an actuary Yes News No
Students No Events Yes
Members Yes Research and resources No
Communities Yes Regulation No
Practice areas Yes About us No

[2.1] Graphics and the home page

In short, many of the graphics on the home page are irrelevant. They distract and take up space. The large graphics are self-congratulatory and lack content and value. The associated links behave oddly. The other graphics obscure rather than enhance the user experience, compounding the layout issues.

[2.2] Graphics: suggested improvements

  • Improve the implementation of "big graphics" at the top of the home page
  • Use fewer graphics, especially on the home page. Is there a text alternative?
  • Remember: brand is not a logo or graphics, it's delivery on promises

[3] Consistent layout, consistent content and a "use test"

We claimed that "Consistent layout should in turn drive consistent content." Here's how this might work:
  • Think about the content and what this might mean in terms of columns.
  • Confirm the purpose of columns 1 and 3 e.g. navigation, functionality, related links.
  • Start writing high level landing pages.
  • Confirm that you can populate columns 1 and 3 appropriately.
  • Continue this process with the lower level pages.

This process will confirm – probably quick quickly – that the 3-column layout is appropriate (or not). Are the columns being used as expected? Is this easy or artificial?

[4] How we planned and implemented the myFIA layout

As ever things evolve, but here's how it works:
  • The fundamental site design uses two columns.
  • The first column is main content. The second column is:
    1. myFIA navigation (always)
    2. Links from the UKAPW (to extent relevant)
    3. Other external links (to extent relevant)
    4. Additional content (occasionally, as only the main content prints)
  • There's some "clever" stuff on 2 and 3 above; where there are no relevant links the section is hidden, rather than being a heading with no content. For the technically curious, this works as follows:
    • The areas are identified with unique ids; #UKAPWlinks and #Extlinks
    • If we want to hide the #UKAPWlinks area we set the page's class to UKAPWlinks in the BODY tag
    • The CSS page sets ".UKAPWlinks #UKAPWlinks" to hidden
    • Similarly for the Extlinks area
  • A similar CSS technique ensures the active area (currently "Constructive Criticism") is coloured purple
  • The "positive alternatives" area demonstrates how the UKAPW could be re-engineered. A 3-column layout should work for UKAPW; the first column should contain functionality, while the use of the third column needs to tighten up.
  • To support the above we constructed 2-column and 3-column templates.