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.

Reinstalling Windows XP Professional SP3: Operation PC Forgiveness 2008

Screenshot of Windows XP

This week I’ve been enjoying a holiday at home with Jane: a chance to enjoy peace and quiet together for the last time before the children arrive, and to reinstall Windows XP on my main desktop PC. That’s been the main reason for my lack of recent blogging, and not laziness — oh no! Not that. No way!

Slowdown to upgrade

It’s a common problem with Windows: it gradually slows down over time. I install and uninstall all sorts of software on it, I use it every day for everything from checking emails to coding, photo editing to video creation. I’m not surprised it slows down over time.

But this time it was getting really bad. At times it wouldn’t boot properly (hardware driver conflicts I think). There was a serious issue with my sound card: if I played a Flash movie (e.g. YouTube) while listening to an MP3, for example, it would send my audio player crazy when I closed the browser window, playing any non-Flash audio two or three times too fast. It made everything sound like the Chipmunks had formed a metal band!

I also wanted to upgrade a couple of major pieces of software:

as well as various hardware drivers:

It was clearly time for Operation PC Forgiveness 2008.

Backup

On Monday and Tuesday I backed up everything. I used Second Copy 7.1 to copy the contents of each partition one-by-one to my external harddrive (Freecom 500GB).

I’ve tried various other applications over the years that take either images of the partition, or backup to a proprietary format, or first compress the files before storing them in a zip file, but in the end I’ve returned to a simple 1:1 copy on an external drive. That way I can access these files at any time from any PC without having to first install any 3rd party applications.

Second Copy

Second Copy allows you to create backup profiles that can be run either individually or within groups. So I have groups for:

  • Applications (e.g. Microsoft Money files, Microsoft OneNote data, WeBuilder settings, Windows Boot.ini file, Second Copy profiles, etc.
  • Outlook PST files, backups and stuff
  • WeBuilder reinstallation
  • Ultimate Backup to external hard drive

There are a few backups that I do manually, for example Firefox bookmarks and anything else that needs to be exported.

Screenshot of Second Copy

This way I can make sure that all my personalized settings have been backed-up before I run the “Ultimate” backup group profiles and copy it all to my external drive.

A couple of things that I always do when doing a reinstallation are:

  • Install and take a print out of all my installed applications using Installed Program Printer.
  • Take a screenshot of desktop (for location of icons).
  • Take a screenshot of Start Menu (for labels and icons).
  • Take a screenshot of the Firefox add-ons that I have installed.
  • Backup Programs folders within Start menu (both All Users and my username profiles). This way I can see how I organized my Start menu.

Reinstall Windows XP

With the backup complete it was time to bite the bullet and reformat my C drive. I have 12 partitions on my hard drives so wiping C simply takes out Windows and programs, all my data, images, videos, music, etc. are safely stored on the other partitions (and now also backed-up).

One thing that I forgot to do before I set the Windows XP installation CD loose on C: was to deauthorize iTunes. D’oh!

Essentials for a Windows XP reinstall:

  • Windows XP with SP3 and IE7 slipstreamed into it.
  • Latest hardware drivers, already downloaded and saved to another partition, external drive or CD-ROM.
  • TweakGuides Tweaking Companion for XP to follow advice on best order to install drivers, and various system tweaks to improve performance.
  • Notebook and pen (to write down everything you do, error messages, settings, passwords, etc.).
  • Laptop (or other PC) for looking up advice, error messages, etc. on the Web.

Reinstalling XP and hardware drivers took a couple of hours. Reinstalling the rest of my software took the best part of a day and a half. I have almost all my applications stored on another partition (I:\) and categorized which makes it very efficient to reinstall:

Screenshot of Install partition

Reorganize All Programs within the Start menu

Once I’ve installed the bulk of my applications, run Windows (or Microsoft) Update a couple of times to make sure that Windows and Office are up-to-date, and done a cursory defrag I always reorganize the Start menu.

This is how the All Programs part of my Start menu looked after I’d installed most of the applications that I use regularly:

Start menu with three columns of programs

That’s three columns with around 85 entries. Even though I’ve done a “sort by name” on the list it’s still a mess! What it needs is some categorization to group similar applications together.

All users

I generally start with the “All Users” folder (right-click START and select “Explore All Users”). I then create a number of new top-level folders to act as my main categories. These are generally the folders that I begin with:

  • Accessories
  • Bible
  • CDRW
  • Fonts
  • Games
  • Graphics
  • Internet
  • Labels
  • Mindmaps
  • Money
  • Multimedia
  • Office
  • PDF
  • Printers
  • Programming
  • Scanner
  • Startup
  • System
  • Windows Mobile
  • WinZip

All Users Start Menu Programs

As it happens, these are also the main category labels that I use on my Install partition (I:\). Keeping a one-to-one relationship between the start menu and the install partition makes it really easy to find installers should I need to perform an upgrade or reinstall.

Having a limited taxonomy makes it really easy to find any application that I have installed: all my graphics applications can be found under Graphics, office applications under Office, etc. It sounds obvious but I’ve seen too many users wasting precious time hunting through an unordered list of 60+ applications.

Sort the rest

Having created these new folders, I then move the remaining installation folders and icons into them before performing the rest of the clean-up on the Start menu itself, creating any sub-folders as necessary. For example, within Internet I always create:

  • Browsers
  • Email
  • Firewall
  • FTP
  • Instant Messenger
  • RSS
  • Server
  • Twitter
  • VoIP
  • Web Building

I prefer to use generic terms such as “Instant Messenger” and “Firewall” than “Windows Live Messenger” and “ZoneLabs ZoneAlarm Pro” as I find it easier to find them this way, it also doesn’t lock me into a particular application as I can use the same folder structure regardless of the applications that I have installed.

I also use this arrangement on my PC at work and on my laptop so it allows me to have different applications installed but use the same organizational structure.

Start menu lite

While it usually takes me about 30-45 minutes to sort out my Start menu at the start it must save me hours each month when looking for applications.

My new, slimmed down start menu then looks a bit like this:

Start menu

Now I have a clean installation of XP, with (almost) all my software installed and I can find things on my Start menu. Now I can get on and do something productive!

Other

bought an Oyster card online last week, so that I was prepared when I arrived in London village later today.

The application form asked for my Title. Options were:

  • Miss
  • Dr
  • Mr
  • Mrs
  • Ms
  • Prof
  • Other

Naturally, I selected “Other”.  But there was then no-where to enter my actual title, my “other” title.

So last week I received a letter addressed to “Other Gareth Saunders”.

While I’m here

Who on earth ordered that list?!  How about the male-centric ordering of:

  • Mr
  • Mrs
  • Miss
  • Ms
  • Dr
  • Prof
  • Other

Or the ladies-go-first option of:

  • Ms
  • Miss
  • Mrs
  • Mr
  • Dr
  • Prof
  • Other

Or even the mostly-alphabetical but turns out to be partly hierarchical (by placing Other at the end):

  • Dr
  • Miss
  • Mr
  • Mrs
  • Ms
  • Prof
  • Other

We got slideshow of the day!

Screenshot of Slideshare

Since I posted our presentation on Mind Mapping for effective content management on Slideshare yesterday I woke to discover that

  1. “IWMW 2008, Aberdeen, Scotland” was the first “Spotlight” on our presentation sharing service of choice,

    and more remarkably that

  2. Our presentation was being featured as “Slideshow of the Day” on the homepage!

There have a few more developments resulting from delivering the presentation and posting it on Slideshare, but I’ll share those at a later date when things have been sorted out.

In the meantime, I’m heading to bed. It’s been a long, tiring, incredibly hot but satisfying trip to The Granite City for IWMW 2008.

Mind Mapping for effective content management

I’m currently in Aberdeen at the Institutional Web Management Workshop 2008 conference, blogging this during a presentation by someone at JISC. Because you can do that at a geeky conference without it looking rude!

There are currently about 30 delegates (including one of the joint chairs of the conference) sitting in front of their PC laptops, Macs and mobile devices checking e-mail, Twittering (you can read all the #iwmw2008-referenced tweets at http://twemes.com/iwmw2008), adding content to the conference Ning social-network site: http://iwmw2008.ning.com/ and probably a bunch of other stuff.

Eduroam

I’m just delighted to have connected to the Web via Eduroam, which allows users from participating institutions to connect to the network on another participating institution’s network.

So because Aberdeen and St Andrews both use Eduroam I am now able to connect to the Aberdeen WiFi connection using my St Andrews username and password. It’s a great system and I’m delighted that it works.

Mind you I had to install a piece of software from St Andrews that automatically configured my networking settings before it would work properly, and I was relieved that I’d been long-sighted enough to have saved that application to my flash drive just in case I ever needed it.

Today I needed it.

  • Install.
  • Reboot.
  • Connect.
  • Happy user.

Glorious Aberdeen

The weather is glorious! Too hot for me, I must admit … is it always like this in Aberdeen? I thought “Aberdeen … cold!” so I packed two jumpers and a couple of coats. It looks like I’ve come for a month, to the land of the Polar Bears.

I’ve been in shorts (and kilt) since I arrived.

Workshop presentation

Yesterday my colleague and I gave a 90 minutes workshop presentation entitled “Mind Mapping for effective content management” which introduced the concept of mind maps, showed why it was a good tool for use with Web projects and then gave a case study on how we used it in our university project to migrate 3,000+ Web pages into a new information architecture.

The slides are now available online at SlideShare: Mind Mapping for effective content management (and embedded above).

The workshop was really well attended, we had nearly 30 people packed into a small, stiflingly-hot tutorial room, and we both enjoyed sharing our experience and getting great feedback and questions from folks. But then it’s quite easy talking about something that you love doing and are passionate about.

On reflection, both during and after, we realised that we could have presented some of the concepts much more clearly, or at least in a more step-by-step fashion. Particularly when we made the leap from auditing a website structure using mind maps to auditing the content of a Web page.

However, with only 90 minutes to play with I think we managed to pack in as much as we could, as well as we could. We even finished bang on time, not a second before or after.

And then we could relax and enjoy the rest of the conference.

Update: You can see Mike Whyment’s photo taken during our session on Flickr.