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.
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.
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.
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.
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.
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.
Know Your Users
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.
So What about Mushrooms?
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.
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)…
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.
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.
This is a great publishing tool. Not only does it let me reach out to a potential audience and give me a place to showcase work, it helps me keep track of what I do and over time becomes an excelent case study in all the things I do.
I owned this domain name for a few of years and had originally put together a quick ColdFusion based site which had a private area for uploading files. It was quick and dirty but it got the job done. In fact it got me a job. I recently moved a number domains including this one to a new hosting service with Media Temple and felt it was time for a total refresh. I’d been meaning to get into WordPress for a while and so decided to use it and attempt to get into “blogging” or whatever you want to call it.
I’m really happy with WordPress as a blogging publishing platform and have since gotten my hands dirty under the hood – modifying themes and tinkering with the php code. The learning curve has been very fast and I’m happy with the results thus far. The next step is to put some of my IA/UX skills to work and organize the content a little better, specifically in the portfolio section. Thumbnails and Lightboxes anyone?
I’m slowly but surely getting the site together and am currently adding content to the portfolio section. The design of the site has changed somewhat. The title isn’t just a cliché. I actually am.
