July 22nd, 2009

On the surface any user interface relies on “scenery” and “props” the same way a stage does, or the same way any “real” space does when it’s being staged. Coats of paint and layers of wallpaper along with pictures, soft and hard furnishings, lighting effects, gadgets, devices and other types of objects define the spaces in which we live and function in the same way layers of shape and color, images, objects and devices are used to define a user interface. Structures and Frameworks are also words that are common to both physical places and online spaces, and Circuits, Switches and other types of hardware ultimately facilitate the construction of both “real” and “virtual” worlds.

User Experience Design is about understanding the needs of an individual or group of individuals who intend to use and connect with your product/service in whatever form it exists. Whether we’re talking about the audience of a stage show, consumers of a product, subscribers of a service, buyers of property, observers of an event, listeners of a message or broadcast, users of a website or other type of graphical user interface, we’re dealing with the same thing – people interacting and connecting with your product, service, device, object, message, identity, or whatever you like to call it.

Going behind the scenes involves not only looking at what drives the “back-end” of your User Interface and understanding the functionality and methods that enable what’s “in there” to operate, but also going “out there” and discovering what lies “behind the scenes” of your users. Think of the interface as a point at which two individual realities meet. Actually it’s way more than two, but in any one instance there is a two-way communication between what’s on your side of the interface and what’s on the user’s side. It’s a little bit like Alice Through the Looking Glass.

On your side you have your content, your infrastructure, your processes, your platforms, delivery methods, and so on. Organizing and structuring information should be done independent of specific user preferences and align with a more general understanding of best practices. Use logical categorizations and store content in a relational database that can be cross referenced with tags and keywords. Develop back-end systems that are built on scalable architectures and which utilize sturdy frameworks that can be implemented quickly and reused independent of the specific requirements. Design interfaces that are Web Standards compliant and build them to run on any platform. These, and many other requirements are part of going behind the scenes from your side of the interface. Understanding the variables that determine what content is being displayed in what template at what time and with what kind of message are all factors of going behind the scenes of the stage which lies on the other side of the interface – the other side of the looking glass.

• Information Architecture , User Experience Design
• Comments(0)

July 17th, 2009

I was just reading this interesting article about UX Design-Planning by Holger Maasen which provides some rather deep insights into the subject. In this article Holger addresses the need for a better understanding of UXD/UXP. He asks the question “do we need more UX planning teams?” and goes on to explain some of his own techniques and approaches, using some really great diagrams (who would have thought?) to compliment the writing. I don’t know Holger Maasen at all but I’ve seen his comments on Boxes and Arrows a number of times. It seems he works for ArgonautenG2 – a company in Germany that is part of the WPP network of companies. Did I mention my last contract job was at Y&R Toronto? That reminds me, I need to work on my Linked-In profile.

• Information Architecture , User Experience Design
• Comments(0)

July 16th, 2009

Added a “Case Study” page containing detailed information about the project along with image gallery and optional video content. Minor changes to Landing page to reflect the detail page and provide slick transition between pages.

Next step – Site Map.

• Building This Website , Information Architecture , User Experience Design
• Comments(0)

July 16th, 2009

I moved on from the quick sketches I did the other day and put together a wireframe for the portfolio landing page. Here’s the portfolio page as it stands now:

And here’s the Wireframe. I experimented with some other options but this seems to work with what I had in mind.

As you can see I have devised a way to better organize the content by reducing the number of posts per page on initial load and providing the user with the option to select how many records they wish to see. At the bottom of the page I have placed pagination links along with a line of text indicating which records are being viewed (showing x to x of x results). Along with “Browse by Category” the user can also find links to some of my other websites, which will open in new browser windows, as well as a quick “contact me” button and a link to my Twitter page (which reminds me I better start updating my tweets more often). I can also place links to other pages here, such as my facebook or linked-in profiles (which reminds me I better start updating my Linked-in profile).

In addition to the new method of organizing the existing posts I have included a “Featured Work” module which will allow me to select, say 3 projects that I wish to call attention to. The summary information for projects in the Featured Work module will also include a quick mouseover thumbnail display of the various images.

In both cases the Featured Work and Display by Category sections of the page include the name/title of the project, a quick summary description, thumbnail image(s), a list of tags or keywords relevant to the project and a link to find out more.

My next step is to design a template for single.php or in other words the page that one sees after selecting an individual post.

Keep watching!

• Building This Website , Information Architecture , User Experience Design
• Comments(0)

July 14th, 2009

WireSketches are rough outlines, hand-drawn (or hand-scribbled) in a note book, on a piece of paper, back of a napkin, etc. They illustrate high-level concepts usually in the form of site-maps and/or page level diagrams that present a snapshot of the general thinking behind the overall functionality or experience of a website or application. WireSketches give us an idea about the type of layout that might work for any given page and they help identify key pieces of content and functionality. As we gather the content and start organizing it into a structure we can refer to our WireSketches as we start to plot the various content objects that might appear on the page. WireSketches also allow us to test ideas, even if sometimes abstract, and as we refine the ideas through the process of elimination, we arrive at some solid ideas that can then be turned into WireFrames/Comps before moving on to development.

T.Scott Stromberg has written a great article about the use of sketches as a legitimate IA tool. Of course, it stands to reason really, especially if you can see the art in Information Artchitecture. There are a number of interesting articles online – just google Wireframe Sketching and see what comes up. Here’s one in particular that I like – Sketches, Wireframes and CSS by Jeffio.

• Building This Website , Information Architecture , User Experience Design
• Comments(0)

July 14th, 2009

Figure 1.1

Yesterday I uploaded quite a bit of content to my portfolio. One of the primary objectives of this site being of course to showcase my work and market myself as an Information Architect, User Experience/Interaction Designer, or whatever term fits best, it was a priority to get my work up online as fast as possible.

After creating a second installation of WordPress on my web server I created JPG/GIF images of some selected pieces of work  and uploaded them into individual WordPress posts. The result was a long scrolling page with the heading A SAMPLE OF WHAT I CAN DO in the main banner (Figure 1.1).

I was happy that I had some content in the portfolio but it didn’t take long to realize that this just wouldn’t do. I mean, this might well be a sample of what I can do, but it’s certainly not the BEST sample, not when you consider I placed the words Interaction Design and User Experience under my name up there in the masthead.

What Kind of Example?

Now, this might well be a pretty good example of a site that was thrown together in a few days with only a rudimentary working knowledge of WordPress. It might show some graphic design skills, and an understanding of HTML and CSS. If you knew what I had to go through to reinstall the entire thing and rebuild the database content after I accidentally deleted the initial installation a few days ago, it would show aptitude for problem solving and I’d definitely not be considered a WordPress rookie anymore. As for the images on the page, they’re clearly an example of engaging and interesting content. In fact, on a number of levels this site really ain’t bad at all.

However, what this site is NOT a great example of is Information/Interaction/User-Experience Design. See, I really didn’t start out with much more than a few sketches and ideas in my head and then simply relied on the WordPress architecture to “throw it together.” While this is useful in the sense that it helped me deploy the concept quickly and I do actually have some content online that I can share, because the content hasn’t been organized and sorted and I haven’t yet modified the default “list-o-posts” layout, what we’re left with is a rather uninspiring long page that is a real pain to navigate.

Start at the top

Realizing the page needed some improvement I changed the main heading to  “SOON IT WILL BE ORGANIZED BETTER” which at least spoke to the fact that I was well aware of the need to do something about it. I also added one more project to the page, but this didn’t solve the scrolling page issue – rather it added to it. My intention in changing the heading was initially to explain the state of the page contents, however the words seem appropriate not only in this case but in terms of what I’m on here trying to promote in the first place. The title has a catchy sound, I like it, and it may stick, at least for a while.

17,000 Pixels

17,000 pixels is the height of the original screen capture seen in figure 1.1. That was the HTML content without the browser chrome. With the chrome the height would have been, well, over 17,000 pixels and that’s just too damn long. Heck, even 17,000 is too long. But that goes without saying.

So the next step was to cut down on the page height. How does 3,400 sound? It still might be a little long but it’s an improvement over 17,000 and so it’s a good start. How did I do it? I reduced the size of the images as they appear in the posts and aligned each set of images within a single post side-by-side rather than stacked one on top of the other. I then implemented the WordPress Lightbox 2 plugin so that a more detailed image can be seen when the smaller image is clicked. The results can be seen in figure 1.2 and figure 1.3.

Figure 1.3

Figure 1.2

Now that’s not a bad amount of progress made in one day but it doesn’t end there. I can still do a lot to improve not just the organization of items but also make it more functionally intuitive and a lot more engaging. So here we are at the beginning of a process. This is where I get to show what it is I have been saying I can do. This is where I take the work done so far and refine it. It’s almost like a site rebuild, except the site itself is only a few days young and we’re not really “rebuilding” any components of the site, just reorganizing the information and doing some neat things to make the content more engaging and the user experience more pleasant. In order to accomplish that we’ll do a bit of reverse engineering.

What’s Next?

Since I already have the site online and there’s content in the portfolio, I’m already well into the publishing stage before I’ve even started what would usually be the planning and preparation stage, so I’m going to have to backtrack a little in order to move forward. I’ve already spent time on the overall design of the pages and I’m quite happy with the graphical treatment so there will be no need to get into much of that – most of it is already done, partly thanks to the ease and simplicity of WordPress+Free WordPress Themes. Sure I can tidy up some of the page formatting, adjust font sizes, spacing and so forth, and I have actually yet to test the site outside of Firefox on a Mac, but most of that will be taken care of as I work through the rest of the work. After all, this is a somewhat ad-hoc project with no launch date and in fact most of the content appearing in a “publish now, proof later” fashion.

What I’m going to do first is take what I’ve got so far and reverse-engineer some mockups/wireframes of the portfolio page to determine what kind of layout works best. Here’s the first step in this process – Hand sketched low-fidelity wireframe concepts.

I’d say “now this is where the fun begins” but it’s already been going on a while. Don’t worry you didn’t miss anything that won’t come up again.

• Building This Website , Information Architecture , User Experience Design
• Comments(0)

February 7th, 2009

When I tell people this is what I do for a living, the first question is usually “What’s that then?”

“Information Architecture and User Experience Design” I tell them.

“What’s that then?” they ask.

Information Architecture is the practice of, well, architecting information. Is architecting even a word? I’m not sure it is. OK so it’s the process of ORGANIZING information – specifically organizing information contained within a website. As an Information Architect it’s my job to collect and organize the information/content that exists across the numerous pages and files of a site and basically design the structure and hierarcy of that information into a site map and user-flow diagram. From there I create a detailed breakdown of each page in the form of a wireframe, which shows the various elements that appear on each page. Put simply I help design and build websites by preparing a “paper-version” of the website which is used as a reference and tool for the entire team – most specifically the graphic designers and programmers who will create the finished site. This documentation is invaluable as a resource not only for designers and developers but also to clients and anyone else involved in the design and build of the site because it provides a top-level view of the site and enables anyone to better understand how the site is/will be organized as well as what kind of functionality and user experience should be expected. There is a great deal more to Information Architecture and User Experience Design. Perhaps I will write more about it, or perhaps I will just refer anyone who is interested to check out Boxes and Arrows.

“What is it you do again?”

• Information Architecture , Miscellaneous , User Experience Design
• Comments(0)