July 24th, 2009
I’m all for streamlining work flow and I just learned about this neat tool today which rolls site-mapping and wire-framing with auto-generated interactive prototypes and technical specifications into one application. Seems like a great idea and I’m surprised Adobe hasn’t jumped all over it. Unfortunately it’s only available on Windows but if anyone plans to develop a version for Mac, I’d be happy to try it.
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.
July 21st, 2009
I made myself a business card. Based the design on the look and feel of the site. It took about two or three days of playing around in Illustrator to come up with something I like and I think will serve the purpose. I still have to adjust kerning/tracking and all that and I’m not totally sold on the font yet, just because it’s the first thing selected in the font menu in Illustrator. Looks pretty good but I might try some more variations.
If you or anyone else might be interested I live in Toronto and am available for contract/freelance/maybe even full time work in the field of Interaction Design and User Experience.
July 17th, 2009
I just created a new blog category – Music Videos. It has nothing to do with User Experience Design, well at least not directly. But anyway this is brilliant. Watch at 0:47 when the camera pans off and follows the girl. I’ve played it back at least 20 times just setting up the scene in my head. I imagine the rest of them hanging around for a few seconds, running around in circles maybe, keeping the trafic stopped before she comes out of the cornfield and joins them. What a great idea and well executed.
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.
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.
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!
July 15th, 2009
That was going to be the title. It was going to be a short piece, written mostly as a reminder to myself of the importance of always keeping objectives in mind during a development project. There was a chance that such a title might lead me to drift off into existential thought, but most specifically I was just thinking about the importance of establishing, understanding and most of all remembering the objectives that are driving a development project in order to contain it, keep it on track and prevent it from spiraling out of scope, out of budget, and out of hand.
What’s ultimately driving a project is the person or group of people who initiated it – dreamed up the idea, got it going. These people are called the Key Stakeholders, and of course it’s their objectives that are of primary importance at the outset. These top-level objectives play a key part in defining and shaping the ideas and execution behind the entire job.
As we dig deeper into the objectives and requirements we will discover other stakeholders – people outside of the original group – secondary or external stakeholders, which includes partners, affiliates, suppliers, customers, clients and a whole array of other people/groups who either directly or indirectly have a stake, or a part to play in the ongoing development of your product/service.
Back in the day if you referred to someone as a user it meant they were a druggie – a junkie – they used some form of illegal narcotic substance, usually heroine, which I remember from being a kid was a big problem in parts of England back in the 80′s. Nowadays there are a much wider variety of street drugs and there’s also a new commonly used definition for user, meaning a person who uses a computer interface, usually a website. Whether or not the two subjects are linked is another subject for existential discussion, so I’m leaving that alone and getting back on topic.
Users are people who interact with your thing – your website, your application, product, whatever. They are your customers, your audience, your listeners, your fans (or maybe even your critics). But they are also your teachers and you have much to learn from them. This is of course the essence of User Experience – Know your users; know their behaviours, their preferences, their habits. Know their objectives and it will help define and refine your own.
This is where the existentialism comes back in. You see, User Experience is a very broad term that encompasses a wide variety of different aspects and variables that can make the subject itself appear quite abstract or hard to define. Mushrooms on the other hand are the fleshy, spore-bearing, fruity bodies of fungi. So where does the connection lie?
Well to start with the word mushroom(s), like user(s), can have several applications. If we were playing Family Feud (it’s called Family Fortunes in England) then the fungi definition would probably score highest. Elsewhere in the list though we might also find (as a noun): “anything of similar shape or rapid growth”, “a large cloud of smoke or rubble, formed in the atmosphere as a result of an explosion, esp. a nuclear explosion”, (as an adjective): “of, consisting of, or containing mushrooms: a mushroom omelet”, (or as a verb): “to gather mushrooms.”
Aside from this the obvious similarity is that mushrooms, like users, are living things that come in many different shapes and forms with many different types of qualities, different purposes, different objectives – all of these variables making them far more complex as a subject than can be summed up in a single definition.
Maybe you’re interested in mushrooms, maybe you’re not. Maybe you never thought about them much before. According to Ron Mann, there’s a whole lot more to mushrooms than those things we put on our pizza. And likewise, there’s a whole lot more to this discussion. I hope you’re still following. Let me sum it up.
Abstract thought
Remembering objectives
Who’s objectives?
Yours, mine
The “Users”
Know your Objective
Know your Users’ Objectives
Know your Mushrooms
We’re talking about understanding – furthering our knowledge on a subject, in this case User Experience. If you’re even remotely interested you can watch Ron Mann’s film and learn about the different kinds of experience certain mushrooms can have upon you as a user of the mushroom, which introduces yet another angle – that of mushroom as a user interface – but for the time being we’re talking about users as mushrooms, or in other words, understanding users, understanding objectives – putting those things together in order to define what I’ll attempt to write about more succinctly in the next post.
For now, please sit back and enjoy the in-flight movie (trailer)…
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.
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.
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.
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 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.
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.