Filed under

usability

 

Wireframes for clients #wireframingforclients

Lately things have been pretty busy at Surface Media - probably the busiest we've ever been.  And I'm not complaining, as busy teams are happy teams (even if it does get a little intense at times). 

However during these times its not just our people that come under pressure. As our team grapples with a larger number of concurrent projects the successful and timely delivery of work depends more than ever on the performance of our processes and methodologies. As deadlines approach and dependencies collide, areas where things could be improved tend to get highlighted.

While its often not practical to break away from the tasks at hand and review processes whilst in the midst of a very busy patch, its well worth noting down any observations that you or your team make concerning the performance of processes during these times – even if its just so you can come back to them when things slow down a bit.

One such observation our UX team has been commenting of late relate to the effectiveness of communication of our old friend the wireframe.

Wikipedia defines wireframes as follows:

"A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed."

(http://en.wikipedia.org/wiki/Website_wireframe)

And this is a nice simple definition that we at Surface Media subscribe to. What we have been observing though recently is that quite often a client will approve a set of wireframes after much discussion only to be surprised by what they then see for the same set of pages after visual design (artwork) is applied.  Even when the visual designs show the positioning of elements in exactly the same places as the approved wires, it seems that as soon as graphics are applied many clients conclude their understanding of the meaning of certain elements within the wireframes was different to that intended by the designer when they were approved. While we are perfectly comfortable with the iterative process that occurs from this point, there is always a risk that the project could be derailed by these kinds of misunderstandings.

is there a better way to approach wireframing ?

There have been many suggestions by many very good UX people as to how to avoid, manage or at least minimise this sort of thing happening. From combining visual design with wireframes, to ditching them altogether to accepting that whether this problem arises is related to how good we are as UX professionals at communicating,

So lets have a discussion about it. I am interested to hear all your thoughts on this. 

Feel free to tweet to #wireframingforclients

Matt

Filed under  //   interaction design   usability   user experience  

Anyone for a website sandwich?

Recently I bought a new sandwich press for the studio. Now, I like to think the Surfacemedia staff are pretty savvy when it comes to technology. I mean they are generally pretty cool with really complex tasks like opening the kitchen fridge door and starting the microwave to warm their cup-o-noodles!

My decision to buy a relatively simple and basic sandwich press therefore wasn't based on my perception of whether or not my colleagues would find it easy to use. Rather, I bought a simple sandwich press because, as a designer, I am drawn to the aesthetic qualities of objects designed with simplicity in mind. So when I unpacked our shiny new sandwich press and found that it came with a detailed set of instructions on "How to Use" the thing, I was a little amused, i.e. I chuckled out loud. I mean,

HOW HARD IS IT TO USE A SANDWICH PRESS?

Surely everyone knows how to do this? Jokes aside for a minute though. Its fair to assume that different people may have different levels of experience using a sandwich press and indeed may have varying needs from the functionality of one, right? A commercial kitchen probably needs a press that can do more than one that is sufficient for a small design studio kitchen, and there would be levels in between. And one would expect to find increasingly thicker sets of instructions accompanying the more feature-rich models. This all seems to follow.

So why is it that on the internet websites generally don't come with usage instructions?

How is it possible then, that although a manufacturer feels it's necessary to include usage instructions with a simple sandwich press, usability experts can claim that its possible to design a website interface that is so intuitive that it doesn't require any instructions of use at all?

Is the experience of using a website for some reason more 'intuitive' than using a sandwich press? I doubt it.

While inclusion of instructions of use for even the most basic of appliances does remind us that manufacturers have legal obligations to inform consumers of the perils of misuse, it also reminds us that users are not all the same and that without even basic instructions some users simply do not cope. And it occurs to me that while I might laugh at the idea that instructions are needed to operate a basic sandwich press, it seems absurd that many websites demand that users have a much more than basic level of comprehension of interaction paradigms without providing any instructions at all. If there are people out there who struggle with a basic sandwich press, we have a long way to go with website design.

Anyway the interesting thing to me as a designer is that I bought a sandwich press that suits the need but looks great as well. I could have bought a more whiz bang one but they looked fussy and over-designed and I would probably have paid for features that I don't need and I would of had to spend time reading the instruction manual - which I find boring.

Sandwiches

Filed under  //   design   usability   user experience  

Experimental Interaction Design on the Web: My rookie mum beat me at Wii boxing in 1 hour, she's 52 years old

As is always in general internet sleuthing, one often stumbles across some strange but interesting concepts that move the user to think beyond the 'point and click' paradigm that has been setup by standards-based browsing. Below are two examples I found recently that I thought were worth sharing:

Magnetic North and Dont Click

Now these 2 websites are by no means new to those who are in the interaction design space but they do provide an interesting and somewhat divided discussion about user expectations and way-finding within a website. 

In my opinion, we're seeing a shift. As the newer generations (I believe they're called iGen or 'Gen Z' now) no longer live in a world where the internet and computers never existed, they're being branded "Digital Natives". These people will be asking things like "why point and click!.. why not rotate, shake, drag, drop, jump up and down, throw stuff.. hell, if the Wii does it, why doesn't the internet? What's all this old talk about using a touchscreen with one finger? The iPhone let's you do waaay more than that. Hang on, even the iPhone is, like, old news now!" But what they say is true... why doesn't the internet let us interact with it at this haptic, intuitively human level. 

The point and click paradigm has been been learned; it's not natural - it's an evolution of technology and we've adapted to it. As an interaction designer I spend my days thinking "will someone know to click there? How can we make it more obvious". It took a few weeks for my mum to learn how to get used to a mouse when she used it for the first time at age 45, it took her 1 hour to beat me in Wii Boxing at age 52. Technology's evolution is on an exponential path towards creating new user experiences and interaction paradigms that sure, our parents will laugh at; "how about playing reaaal tennis" they say after enjoying 4 hours of Wii games on Christmas day; and CEO's will be scared to adapt to, "This social media thing will pass, it's just a fad... same thing happened with the printing press".

As we prepare to exit the "Noughties" and head in to whatever they end up calling the next decade, one can only see a fundamental shift in the way users will begin to interact with websites and online interfaces. The expectations will be set at a different level and it will be a challenge for the older heads in business to respond to that, i.e. welcoming it with open arms. I strongly believe this shift is for the better - interacting will real things using methods that come naturally to all of us, regardless of age or 'computer literacy' can only be positive. People in the future will laugh at us "ancients", saying things like "I can't believe they had to sit at a computer to be on the internet, using a keyboard to type instead of just speaking, using a plastic "mouse" on a desk to touch things on a screen that had to be connected by a wire. Insane!

Well iGen, please, push the envelope when considering how we interact with eachother through the web... that is of course, if you're familiar with what an 'envelope' is by the time you grow up.

Sincerely,
Gen Y, Gen X and the few Baby Boomers that are left.

(download)

Filed under  //   cool stuff   interface design   usability   user experience  
Posted by Matt Shanks 

Comments [0]

Designers need to approach problem solving in a more child-like and playful way

In this brilliant talk, CEO from IDEO Tim Brown reminds us that as adults we can tend to kind of 'over think' and 'double guess' our creative ideas in a sort of self-auditing step to make sure we don't embarrass ourselves or appear foolish. By contrast, as children we tend to allow our creativity to flow without self regulation. Tim suggests that a childs playful exploration of their ideas, the building of things with their hands', and the playful acting out of different roles and scenarios, are skills that adult designers need to tap into in order to unlock deeper thinking, a greater number of ideas and more creativity.

Well enough of this. I'm off to deck the studio out with more plasticine!

Filed under  //   design   interface design   usability   user experience  

User experience is everything when choosing a CMS.... well, almost everything.

Over the last 10 years I've had an opportunity to poke around inside many different content management systems. I've seen some very good ones and I've been unfortunate enough to have had to deal with some very bad ones – and I'm the talking pull-your-hair out and bash-your-iPhone-on-the-table kind of frustrating! 

Lets face it. All a CMS really needs to do is allow someone to create, edit, publish and delete web pages. Sounds simple doesn't it?  

However CMS vendors can be so focussed on rolling out the broadest and fanciest suite of additional modules that in their haste to go to market they neglect to spend enough time testing their products with real users. The result is many CMS's just struggle to do the basics well.

Add to the mix poor support, and a reluctance by the same vendors to provide affordable customisation options, and its easy to see why choosing the right CMS for the job is mission critical for any organisation.

So here are my top 10 considerations for choosing a CMS that will be 'best fit' for your business:

  1. Do the research. There are many CMS's on the market. Explore a few options.
  2. Ask for testimonials from real customers. You need to hear what other users think about the product. Is the WYSIWYG editor nice to use? Does the system crash much? Don't take too much notice of what the CMS product sales guy says – he is just selling units. Focus on analysing the quality user experience.
  3. How flexible is the CMS product in terms of look and feel? Are there any restrictions on how the CMS can be skinned?
  4. How will you be supported? Are you happy with a ticket based support system for when things go wrong?
  5. How will you be charged? Will the vendor hit you up for an annual license fee? How will this fee be calculated?
  6. Genuinely user focussed CMS vendors are open to improving the way their products work based on what users are feeding back about the user experience? Indeed the good guys are proactively seeking feedback from customers and improving user experience at no cost to customers. If they are not, run away fast.
  7. What rates will the CMS vendor charge to customise the way an aspect of the CMS product works if your user tell you they would prefer it to work a little differently? What processes does the CMS vendor have in place to facilitate this sort of customisation? 
  8. Does the CMS product come with a warranty period? All reputable vendors offer this.
  9. Can the vendor demonstrate the code behind the CMS product is compliant with accessibility standards? Think twice if it isn't.
  10. Can the vendor demonstrate the code behind the CMS product is search engine friendly? What sort of control do you need over SEO? Does the CMS offer administrators the ability manage page title, page description and keyword metatags on a page by page basis?

So there it is. If you can come to grips with most of these points before you make a decision, you'll save yourself time and money – and you'll keep your hair longer too!

Filed under  //   development   usability   user experience  

Improve the user experience of your website or mobile interface. Prototyping basics.

User testing is something that many people responsible for managing a organisation's website are a little afraid of.

How do you do it? How much does it cost? How do we measure the benefits?

These are the kinds of questions many businesses get bogged down in answering and the whole user testing thing gets assigned to the 'too hard basket'.

But its important to realise that user testing can be carried out in many ways and on many levels, ranging from sophisticated eye tracking sessions to simple paper based A-B tests where two alternative versions of an idea can be critiqued for user preference before any development begins.

User testing saves time and money down the track because it enables designers to get the user experience right early on in the project.

Start simple. But please start! And start early!
Delve Prototyping In The Wild

Filed under  //   interface design   usability   user experience