James Wanless » design

Customizing menus and widgets for my new WordPress theme

James — Mon, 23 Aug 2010 05:33:12 +0000

I have a history of somewhat routinely tweaking or fully redesigning my theme, but it’s usually just a matter of moving some elements around, changing a colour here and there and calling it a day. With the release of WordPress 3.0, I took a slightly different approach this time. This release brings with it some major changes and I decided to begin digging into WordPress a little more deeply than I usually do this time.

In particular, I decided it was high time I really began grokking widgets to a degree I hadn’t before and I was determined that the new WordPress menu system would be my friend. This meant a different approach to the usual. I’ve built a number of sites with WordPress where I presently work, and for clients in the past. As we move more deeply into WordPress for blogs and other projects at BCIT, I felt that leveraging the platform’s features for my personal use would be useful.

Simple menus – different mindset

I’ve always written custom menu code in the past. For the most part, I did this because I could ensure that I maintained states for styling on families of pages and I could include exactly what I wanted to in various areas of page real estate. However, I’ve always been bothered by this to some degree because, once I’ve finished designing a theme, I’m still opening up my code editor and FTP-ing something or other to the server as I make a tweak here and a tweak there, as opposed to simply updating my site through the admin panel.

Taking a look at the two menus in the header area above, the upper-most menu contains the core static pages of the site. Originally when styling this theme on my test server I was worried that I’d have a hard time preserving parent menu styling when on a child page of that page. However, with the automatic generation of current_page_parent and current_page_ancestor classes, I can easily make my menus behave just the way I want and not write a single line of conditional PHP menu code. The ability to build any number of custom menus and use them wherever you want, is a game-changer.

While I’ve usually implemented journal categories and archives in drop-down or bullet sidebar lists for all blog and archive pages, I decided I would reduce the number of categories significantly and implement them as the lower of the two header menus above. I don’t use tags and this also helps ensure that I use a few key categories or topics for my writing, and that those categories are always on top for visitors to find. I couldn’t find an easy way to implement a label for this menu, even looking closely at the parameters and arguments for the wp_nav_menu function.

My hardcoded category menu label

What I ended up doing was placing a margin on the menu code and wrapping it in another div, with which I hardcoded the label for the menu (pictured at left). Imperfect I admit, but perhaps I’ll be able to figure out how to do it with only the menu code, as I know I can set the wrapper div for the menu, but just haven’t found a label argument so far.

For a simple explanation of how to implement 3.0 menus in your theme, check out Digging Into WordPress’s explanation.

The trouble with widgets

Even when widgets first came out, I resisted the urge to use them on my personal site because I like more contextual elements on my pages and have generally preferred to control things with PHP. The difficult-to-style/control markup generated by functional widgets, coupled with the fact that widgets would be site-wide once implemented, turned me off using them. I was also a little unclear about how to widget-ize various areas of my theme without screwing things up.

If you’re looking for a simple explanation of how to add widgets to your WordPress theme, the guys at Digging Into WordPress have done it again. I found this article simple and to-the-point. It allowed me to enable widgets in my existing theme through the functions.php file and then place the widget code in the various places in my theme where I want them to appear. I addressed most of my issues around styling widget markup by trial and error. Where the WordPress default or plugin widgets I tried didn’t produce the markup I wanted I often got around this by inserting WordPress functions directly in the widgets, just as if they were coded into my theme’s sidebar.php file.

You may be saying, “That’s all well and good, but you can’t run PHP code in your widgets.” You’d be right, unless you first enabled the handy little ExecPHP plugin, which I’d recommend being careful with, as it allows you to execute PHP in posts, pages and widgets.

Contexutalizing widgets

While this fixed most of the issues I had with how widgets worked and styling their markup, the concept still posed a significant issue for me, as I couldn’t control where they appeared and where they didn’t appear. It turns out that there are a few options that allow you more granular control of where widgets will appear on your site. In my case, I wanted a fat footer with some Flickr photos and couple of my external feeds to appear only on my homepage, while I generally have a different sidebar for posts, archives, static pages, pages with children and my homepage, to name a few.

When I first started looking for ways to make widgets appear conditionally, I stumbled upon what I thought was the perfect solution in the Widget Context plugin. When editing a widget, a large second panel appears below the widget content which allows you to include (or exclude) the widget in any or all of your theme’s templates via checkboxes, or to select pages on your site by URL (see below).

The Widget Context plugin editing panel

This implementation makes sense to me, as setting the options as you create or edit the widget works well and so does the plugin, provided you only use the checkboxes. The real power in the plugin is the ability to use specific URLs for widgets on your site, if it worked. I’m not sure if it’s due to the fact that this plugin has not been updated since before the release of WordPress 3.0, but implementing by URL doesn’t work, and having to live with templates as the deepest level of widget granularity doesn’t allow you to override widget appearance on a page-by-page basis if needed.

As I did a little more searching, I came across Kyle’s post about Shiba’s Custom Widgets plugin. That led me to make my way to Shiba’s own site, where I found a lot of good WordPress plugin work happening.

In large part, it does just what Widget Context does, but through a different type of implementation. It adds new widget creation, management and options links and, frankly, having duplicate widget panels (and several instances of the same widget in them) is a little confusing until you get used to the concept. What I really like about it, though, is that the granularity of widget control is perfect and, when you want to override the template settings you do so through the post, page or category editing panel. In other words, using Shiba’s Custom Widgets, you can place widgets exactly where you want them on your site, provided you’ve enabled widgets in that part of your theme and factored the widget into your CSS.

In closing and next steps

I still have a few pages to whip up, but most of the work is done. What I like is that I finally dug into a few things I wanted to and found that, with a little sleuthing, I was able to do pretty much exactly what I wanted despite my old-school attitude that I needed to hand-code all the custom stuff. I can build the menus I want with the styling I want, and I can build the widgets I want, styled as I want and placed where I want. I’m really looking forward to exploring more menu and widget customizations as we start using WordPress more and more at work.

Anticipating intentions and meeting expectations

James — Sat, 13 Jun 2009 19:58:53 +0000

This week was a frustrating and interesting experience at work. At the end of the week prior, I finally launched the new design of our program catalogue. It’s a little hard to explain or show what this means. It’s a new interface for a specific kind of site that will blend two sources of program data together once program staff update their content, which used to be displayed in different places on our site. One particular design feature has caused significant amounts of both elation and consternation. Would you have thought it would be the addition of a contact form? Me neither, but I’m oversimplifying and that’s not really what this post is about.

What I’m really getting at here is a fundamental design truism. Whether it’s learning, marketing or consumer products, a successful design is predicated on the quality of a user’s experience with it. In my mind, the two absolute most important elements of that are the user’s intentions and expectations and how well you anticipate the first and meet the second.

A little background

A main requirement for this project was to ensure we drew attention to the key calls to action. The image at right shows the actual size of the main calls to action on the new program UI. They are the single largest text elements on the page and speak to the issue of anticipating user intentions.

If we know or can surmise what it is our users want to do (particularly to meet our business goals), we should make those tasks easy for them. If they’re considering applying to a post-secondary program, it should be simple to request more information, get in touch with us or to simply submit an application. Making these obvious and placing them on good page real estate has increased contact requests roughly ten-fold and requests for more information by roughly six times

Anticipating intentions

Does this mean we made the best decision we could have? It’s hard to know. We can’t accurately track program applications through the web (don’t ask), so I don’t know if we’ve had a significant spike, but clearly there was a previously unmet need for our site visitors to communicate with us about programs.

However, we’re somewhat a victim of our own success. At launch we had to send all contact inquiries to our program advising group, who’d never seen a tenth the volume they suddenly got. Where possible since launch, I’ve been pointing those forms directly to program staff in the schools (who’d been the prime point of contact on half our 420 programs anyway) and am currently about halfway through, so the flood is beginning to disperse. Of the feedback I’ve received from the schools, some are ecstatic with the increased interest and some are naturally worried about response standards.

The ‘request more info’ link requires them to provide a certain amount of demographic data and we tell them up front that this will generate a follow-up contact and some snail mail. With the ‘contact us’ link, the requests which previously went through program advising, were met with a form which asked for a fair bit of information upfront. Difficulty finding it and then having to answer a few questions probably disuaded a good number of users from filling it out. The new form by contrast automatically picks up the program from which it came, and asks for a name, email address and comment. Couple that with how prominent it is and I think we did a good job of anticipating needs with the redesign.

Meeting expectations

This is where we now need to move quickly on number of fronts. If you decide you want to apply to a program, you’ll end up here. This is legacy content, which will then drive users into one of four longer pages, most of which ask them to go search for the program they want to apply to. We need to provide them that information if they came from a program and clicked ‘apply now’ and make it fast for them to get to our Banner application process. As we can’t do much to improve that piece (and we are upgrading Banner fairly soon), the most important thing we can do is meet expectations for a useful thing to happen if our users decide to apply.

Similarly, with the contact form. We may have to temporarily send users through the form with the multiple questions while we build a slightly better process for our contact forms, and I’m worried about doing so. The end user isn’t worried about where their query went – they just want a timely answer that helps them make a decision. Since, like all post-secondaries, we ultimately want course registrations and program applications, we want to do everything we can to answer their question. The problem we need to solve is, with a severe increase in queries, due to simple design improvements, how do we ensure our internal process meets the expectations that result from anticipating intentions.

Testing designs on non-functional prototypes

Can you really design experience?

James — Fri, 01 May 2009 06:48:14 +0000

I don’t think so. I often think of the way we phrase things or the terms we use to refer to things. While ‘user experience design’ is actually in my own work title, I don’t think it applies to what I do. Oddly enough, I was reminded of this issue as I was congratulated for my recent completion of the Boston Marathon. I really appreciate support for endurance events and I know that congratulations are nothing but well-intentioned. The issue that comes to mind, which relates to so many things, is that you can’t really understand successful experience from the outside.

For example, my race time was my worst ever. I won’t go into my long layoff from running, the past injury-laden year I’ve had, or that I’m presently nowhere near as fast as I used to be. With regard to Boston, while I had a great time it simply wasn’t a good race for me. When people congratulate you on an awesome race, you accept it as kind words, but in the back of your mind it actually draws attention to the fact you are unhappy with the results. At least in my head, that’s the way things work. A race time only has any meaning when viewed in the context of individual expectations and capabilities – or individual experience.

Experience is individual

What does this have to do with interactive design? In my mind, it’s the X-factor. I can follow all the UCD principles I want and I can probably do a pretty good job for most users of a web site or application. However, experiences are very personal things and I don’t believe I can design those for anyone. I can design quality interactions and build a solid site architecture as a framework for user experience, but that’s as far as it goes in my mind. That is, of course, within the realm of business and politics that exist in large organizations, like the one where I work.

Just like I can’t tell if a given race time is good unless I ask the runner whether they were happy with it, I can’t tell if a user’s experience is good with something I design until after it’s done, and often not even then. Prototyping and user testing will help me move toward the best design I can achieve, but it doesn’t measure the uniqueness of experience for the user. The notion is also applicable to learning. Particularly when referring to online learning, the quality of the interactions in the instructional design goes a very long way to determining the success of the endeavour, but the interactions are not the learning experience, itself. Adult learning is generally seen to be situated, authentic, experiential and both social and individual. Some aspects can be measured against prescribed outcomes, but there are way too many nuances to design a complete learning experience. The best I believe you can do is provide the environment, activities, pacing, tools and support to frame the experience.

Interactions and features frame experiences

Now that I’ve segued nicely from running to web and online learning design, the similarities between the latter two become greater. Social features abound on the web today. I rarely come across any site that doesn’t have a blog component, RSS feeds, and/or discussion forums. Many web applications now publish an open API so that users can build their own functionality on top of the platform and create something new. However, the important thing to remember is that these are all features or interaction capabilities. They are enabled, hopefully made easy to use, and feedback solicited about their use to continually improve them. They are not, though, experience in and of themselves. They are pieces of the framework of the user experience. You do all these things well and your users have a better chance of having a good experience, but there are no guarantees.

Your typical LMS is also a user experience black hole. The complaints one often hears about Blackboard or Desire2Learn are that they are closed systems, difficult to use and manage , have excessive licensing models and are a bit weak on social features. Starting from this place makes a good user experience all the more challenging, but the elements I mentioned earlier, done right, will do a lot to mitigate the problems with the LMS platforms. Again, though, regardless of how good or bad the software, instructional design, community-building efforts or support provided, no one can really design a learning experience. Constructivism tells us that while learning is a social endeavour, it is also highly individualized to each learner. I would have to be able to define the new knowledge that will be acquired to design the experience and that’s simply not possible.

Only one opinion

Web design and online learning are but two of many examples I could use, but they’re the two I have some understanding of and at some point they can up being closely related. When framing interactive experiences, I believe I can only do so much to give the user the best chance of having a good experience. Hey, but that’s only my experience and it may be individual to me.

Web trends interactive map

James — Wed, 08 Apr 2009 19:57:57 +0000

This came by way of a couple intermediaries, but it’s cool nonetheless. In the embed above, you can zoom in as deep as you want and pan and drag to see web domain trends and more. A great way of visualizing the state of the web. The embed above is a little clunky, but if you click the arrows to start and then click within the animation, you should be able to zoom in and out (at least I can with my scroll wheel).

From Flowing Data:

Information Architects, a design firm with offices in Japan and Zurich, release their annual web trends map. This is the fourth one in the series. Popular domains on the Web are mapped to the Tokyo Metro and organized by how they are most related to the cities. Heights represent success in traffic and branding. Subway lines are colored by area of interest. For example, take the orange line to find the creatives. Notice that there are several colors passing through Apple.

Is it Cancer or Walmart?

James — Sat, 28 Mar 2009 02:17:49 +0000

This is actually a still that I pulled from here, but you’ll find it more interesting if you go to the Flash animation showing the spread of Walmart in the United States, starting from one location in 1961 and growing to 3176 in 2006. Very cool.

You can click in as deeply as you want and click ‘n drag the map. I wish it had an embed code, but didn’t want to go as far as trying to pull the SWF and place it here.

This animation is now nearly a year old, and nearly three years past the data currency, so who knows how many stores there are now – and this is only in the US. It really reminded me of a disease or tumours in the way it grew and spread. And, that’s kind an appropriate analogy in my mind.

A facelift I can probably stay with

James — Fri, 20 Mar 2009 07:10:10 +0000

I’ve always been a little schizophrenic about the designs I slap on my web sites. I really like mucking around with XHTML and CSS, but don’t have time to play with it in my spare time anymore and my work now focuses almost entirely on project management, interaction design and information architecture. So my own sites are really my only opportunity to have a little markup fun. I think I can live with this one for a while, though.

I wanted to make sure I took a slightly different approach this time. While it’s still a blog at it’s core, I wanted to make the static pages stand alone more, to hopefully accommodate a little more professional and academically related content as I move forward. Maybe papers, presentations and other pieces of progress as I go wherever the MA I’m working on, takes me – but a journal on steroids.

My basic strategy was to make the landing page a digital aggregator of most of my online life, while I can easily add and separate more static content and focus the pages a little more. I like trying to bend the WordPress structure a little with a few conditional statements and typography, for the most part. The sparse layout is no accident, focusing on words and the odd image, while allowing it all to breathe. A slight newspaper look was my overall inspiration.

A word or two on WordPress

WordPress makes it very easy to play around with markup and style to your heart’s content. With the various domains, blogs and personal sites I’ve had over the past few years, I’ve experimented with lots of things, including the root for the wanless.info domain, which is there largely for posterity. However, that’s not WordPress, just a hand-coded site that I put together entirely with PHP and flat text files. I gotta remember to retire that at some point.

I’ve built my share of WordPress sites, like the one you’re on, this, or this. At other times I’ve done more interaction and IA while someone else coded, like this and this. Unfortunately, at BCIT we’re doing mostly Drupal for standalone projects like our student blogs, Five Forward, or What Would You Change – let’s just say I’m no big fan.

I’d love to be able to do some more WordPress work at BCIT, but I think I’ll just have to live without it.

Don Norman from TED2003 on design

James — Mon, 09 Mar 2009 23:23:26 +0000

What makes for good design? Don Norman has an interesting take on what design is. For him, design works (or at least it did in 2003) on three levels – visceral, behavioural and emotional. He argues that we perceive design on almost entirely a subconscious level, as with most things we do. I know one thing. If something I have to use is well-designed and designed for me, then using it should be second-nature, or close to subconscious.

No related posts.

Low Fi Concept Demos

James — Mon, 02 Mar 2009 20:19:07 +0000

Originally got this at Konigi. Very effective.

5 weeks to Boston – recovery and low mileage

Ridiculous rollovers add nothing

James — Tue, 17 Feb 2009 01:13:47 +0000

Sometimes a nifty CSS or Javascript trick to provide contextual information or a useful visual cue to your users adds a real touch. The web is full of good examples. Below are not three of them. Sure, Web Designer Wall has some good tutorials, the requisite colourful background, drop shadows and is a nice looking visual piece of art. It seems to suffer from a general lack of focus that often happens (at least for me) when everything is colourful. However, that’s not what I’m driving at here and I’m not picking on this site – it’s just the most recent and blatant example that caught my eye.

The main navigation tabs at the top take site visitors to three main pages, home, about, and a jobs board. Do I really need a rollover effect to tell me that:

Clicking home will ‘go to home’ …

Or clicking about will let me ‘check them out’ …

Or, finally, that the jobs link will actually take me to a ‘job board’ …

If you’re going to bother to code rollovers, whether through CSS pseudo elements or with JS (or both), then make them worthwhile, providing something of value to your users. Contextual information to clarify something, definition of a term on hover, whatever …. just something more than a repetition of the link in almost exactly the same wording.

Siftables, a brilliant interface

James — Fri, 13 Feb 2009 22:50:34 +0000

I already bookmarked and tweeted this, brought to my attention by one of my RRU cohort. However, as I thought about the educational implications for such a usable human-computer interface, the possibilities seem only limited by programming and concept.

David Merrill is my interaction and usability hero at the moment.

One gigantic learning cycle experiment

Slight re-design launched

James — Thu, 11 Dec 2008 01:00:57 +0000

It’s not a massive change by any means, but I made some template adjustments over the past couple weeks and published them today. I don’t do a lot of colourful Photoshop work, so that’s not where I focus my efforts. I’ve found the variety of ways I’ve approached my own site design in the past haven’t really leverage my personal domain as a digital hub, so I’m hoping now I’ve done a bit better job of that.

The main changes:

made the homepage more of a live aggregator of my digital life, with feed links for everything
arranged homepage content in order of importance, from left-to-right
moved the global navigation back up to the header and actually used WordPress to list my pages for a change, instead of custom ones
made the header colours a little bolder and more pronounced
made sub-page sidebars contextual to their focus
made it easier to add new site sections or sub-pages
still haven’t given in to widgets and other WYSIWYG Ajax-ification

Testing designs on non-functional prototypes

James — Tue, 16 Sep 2008 21:53:39 +0000

I find myself grappling with the odd project management and user feedback issue as I trundle through the big project that takes up the bulk of my working day at present (and likely will through to next summer). In particular one issue has been eating at me for a while. I find it challenging to do really useful user testing on click-through HTML prototypes when they’re not yet functional enough to just hand off to an end user for something like task completion analysis. Any thoughts readers may have would be helpful.

A little background

The project I’m dealing with is a major redesign of the course and program catalogue on our public web site. The phase I am presently working on is only focused on blending what have previously been completely separate data sources which publish separate program marketing ‘sitelets’ with official institute program pages into one ‘micro-site’ for each program we offer. The part-time course catalogue and search functionality are later phases.

The process to this point

In getting to the point where we’ve got a visual design and web-based prototype, I followed a pretty standard development approach:

examined existing usability analysis on our catalogue for key issues
conducted primary stakeholder research to uncover additional content management and presentation issues
developed a comprehensive design and functional requirements document
developed rudimentary IA and tested it with stakeholders via online AJAX card sort exercise
produced application storyboard/userflow and wireframes (with interaction notes) of all key presentation and content management interfaces
our team produced photoshop composites and HTML prototypes to demonstrate rudimentary end-user features
multiple presentations and demos have been conducted for broad, management and school-based stakeholder groups to solicit feedback, including current summer students
the feedback will be amalgamated in the next couple weeks into a design ‘lock-down’ so that we can code the application

My problem

While satisfying all stakeholders or blending data might seem like the obvious issue, it’s not. While the coding process will create a fully functional beta application which we can use for user testing, I have desperately wanted to test the prototype, but found it difficult. The best solution I could come up with was to present the demo to the group of students and then have them answer a short paper-based survey to solicit their opinion, particularly since so much of it is not functional that any user testing would have created more questions than answers.

The survey methodology is not nearly as valuable in my mind as observing them interacting with it, because my concern is that certain visual or interaction design issues which might be caught while someone is using it, won’t become apparent until we’re beta testing the application, after it’s too late for design changes.

I’d love to hear thoughts from anyone who’s had to conduct user tests on prototypes.