Today, I’ve been working at St Andrews for a decade

University of St Andrews homepage in 2006
The University of St Andrews website that I inherited in 2006

Today is exactly ten years since I started working at the University of St Andrews. I joined the web team within Business Improvements as assistant information architect/web manager. There were two of us in the team. I always said at the time that I liked my job title because with the forward-slash it looked like a URL.

I remember getting offered the post and thinking, “Well, if I don’t know it now I can always learn it on the job.” You read my reflections on the job interview here on my blog.

Ten years on I am now the web architect within the digital communications team (part of Corporate Communications) we have a team of 10, and I work mostly in Agile project management and business analysis. Ten years on, I still love my job, and I love my team. I’m still being challenged, I am still learning how to do my job better, and I still growing.

Obviously, I’m now even more involved in the life of the University having taken up the post as warden at Agnes Blackadder Hall. I will reflect on that in more detail in another post shortly, suffice to say here that I’ve agreed to stay on beyond my probationary period.

But today I’m celebrating ten years here… well, fourteen if you include my four undergraduate years from 1989 to 1993. I wonder where I will be in ten years from now.

The writing’s on the wall

Foam bath letters on the tiled wall.
I like Isaac’s categorisation by colour.

This afternoon after Isaac had been to the loo, like the good boy he is, he dutifully washed his hands.

About 20 minutes later I stood at the top of the stairs and noticed he was still standing at the sink in the downstairs loo. But now he had the plug in and had filled it with warm water and fetched a few of his Octonauts toys.

“Would you like a bath?” I asked.

“Yeah!” he said, quite enthusiastically and moved operations from the downstairs loo to the upstairs family bathroom. Isn’t it just as well we’re an upstairs family.

The bath was run and in jumped a very happy Isaac, two Captain Barnacles, one Lieutenant Kwazii, a GUP-B and a GUP-D, and they were off for a proper adventure. None of this paddling around in a sink nonsense!

About ten minutes later I noticed that the play had stopped and it was quiet in the bathroom, apart from the gentle lapping of water and the sound of Isaac doing… well something. So I went to investigate.

Isaac is taking a real interest in numbers and letters just now. At nursery he now has to literally sign in by writing his own name. So when I poked my head around the bathroom door I was delighted to see that he had tipped out both tubs of foam letters and was arranging them, by colour, on the tiled wall. That’s my boy! We’ll make an information architect out of him!

I can’t quite decide, though, if the two ducks (one has a knight’s helmet on, by the way) are watching what’s going on or being punished and told to look at the wall.

IA decisions in net magazine: why not match up the browser icons?

Since the net magazine rebrand a few months ago the projects section of the magazine, which is printed on a rougher paper to distinguish itself more easily from the glossier feature articles, often includes a handy guide to which browsers a particular technology supports.

The infographic shows desktop browser support on the left, mobile/tablet support on the right. But in the spirit of Steve Krug’s book Don’t me me think, the way it is currently laid out has me thinking too much. I want to know what their design reasoning is.

Here is an example from the current issue (May 2014), from an article on page 84 called “Slash design/build time with proportional RWD”:

List of desktop browser icons, in two columns: desktop on left, mobile on right
Why don’t the icons match up? This just makes me think too hard.

But whenever I see this it always makes me wonder why they have not matched up the icons. What is the order being shown here? It’s really not obvious to me. It’s not alphabetical, it’s not by version number, or popularity.

Why not simply show a comparison between desktop version and its comparable mobile version, and then any left over can be arranged at the bottom?

I often find myself thinking, “Okay, so this feature is supported from Chrome version 6 onwards, but from which version of mobile Chrome is this supported?” And then I have to go hunting for the Chrome icon on the right-hand list.

Why not match the icons up, like this?

...and relax! The top four icons are matched, leaving the unique browsers to fight it out at the bottom
…and relax! The top four icons are matched, leaving the unique browsers to fight it out at the bottom

That makes it much easier for me to read. My five year old Joshua thinks this makes more sense. What do you think?

PowerMockup – create wireframes using Microsoft PowerPoint

PowerMockup website
PowerMockup

When designing (or redesigning) websites I tend to follow a five stage process:

  1. Gather / discover
  2. Structure
  3. Design
  4. Build and test
  5. Launch and maintenance

During the second stage (structure) I will focus largely on two aspects of the website’s structure: the overall site hierarchy and the structure of each of the pages, what are traditionally called ‘wireframes’.

Site structure

To design the site structure, for years, I’ve used mind maps and my mind mapping application of choice is Mindjet MindManager.

I love MindManager, and each version just gets better than the last. An important thing for me is that the software interface doesn’t get in the way of capturing and organising the information. It’s packed with subtle but powerful features such as keyboard shortcuts and the ability to drag information from web pages and Windows Explorer directories).

Page structure and wireframes

When it comes to designing page-level structures I pretty much always start by drawing wireframes using a good old fashioned pencil and pad of paper.

Wireframes are visual guides that present a skeleton or framework for the information on the page. They are concerned more with where information and design elements should sit rather than how they look.

If you think of it in terms of architecture, the building blueprint will show you that the kitchen needs a window between the wall cupboards, and in front of the sink, but it won’t tell you what colour or make they are.

As I said, I usually start all my wireframe diagrams with a pencil and pad, but occasionally I want something that I can save, edit and share with others via email.

Until now I’ve usually used either Balsamiq or Mockingbird, both of which have limited, free accounts. But recently I’ve been trying out PowerMockup.

PowerMockup

PowerMockup is a wireframing tool that integrates with Microsoft PowerPoint 2007 or 2010. It is essentially a library of PowerPoint shapes offering

  • 89 fully-editable user-interface (UI) elements
  • 104 wireframe icons
PowerMockup stencil library elements
Examples of some of the PowerMockup stencil library elements

And it is as simple to use as finding the element you want to use and dragging it onto your PowerPoint slide. The UI elements and icons can all be resized, and recoloured too which provides a great deal of flexibility.

Page size

Also, remember, although you are working in Microsoft PowerPoint which, by default, is set up for a 4:3 or 16:9 aspect ratio screen you can adjust the page setup for any screen size and aspect ratio. That way you are not limited to only designing for ‘above the fold’.

Example

As a quick example, I mocked-up the PowerMockup website homepage using PowerMockup in Microsoft PowerPoint 2010:

Wireframe of the PowerMockup  website using PowerMockup
Wireframe of the PowerMockup website using PowerMockup

My experience

Intuitive

I have to say that I was very pleasantly surprised using PowerMockup. Because it integrates with Microsoft PowerPoint I didn’t have to learn a whole new application: it was very intuitive to use.

Design

I really like the design of the elements too. My main criticisms of both Balsamiq and Mockingbird is that their UI elements have quite a sketchy, cartoony feel to them; particularly Balsamiq.

In contrast the UI elements in PowerMockup are clean, unfussy and unobtrusive. While Balsamiq and to a lesser extent Mockingbird’s UI elements have a Comic Sans feel to them, PowerMockup’s UI elements feel more like something classical like Helvetica.

Price

PowerMockup costs US $39.95 (approx. £25 GBP) for a single-user license, although obviously you also need a licensed copy of Microsoft PowerPoint 2007 or 2010.

The cheapest, standalone version that I can find, Home and Student, will cost you £75.00 GPB on Amazon UK), so you’re talking about a total cost of around £100 for one user.

If you already own a copy of PowerPoint 2007 or 2010, however, then you’re laughing and you may even qualify for a free license.

There are also two team licenses available: 5 users for US $119.95 (approx. £74 GBP), and 10 users for US $199.90 (approx. £123 GBP).

Conclusion

I’ve been genuinely very impressed with PowerMockup. What is not to like? It has a very extensive, very attractive, and very usable collection of UI elements and icons, and most importantly it’s really simple to use.

What might be nice is if someone could throw together a number of PowerPoint template files (with sensible background grids) to emulate the most common page dimensions, e.g. Blueprint CSS’s 950px width, 960 Grid System’s 960px width, plus some responsive-style tablet and mobile templates. Coupled with PowerMockup these could be a very useful, very affordable combination for small design studios and individuals.

I can definitely see myself using PowerMockup on the next design project I need to work on.