Insights
Joel Flom's place to pass on new design morsels, taste-test design ideas and brew up Elavision's latest concoctions using only the finest ingredients.
Oz-IA conference approaching
Oz-IA is an excellent conference for those working with technology, information and interaction. It runs from September 20-21 in Sydney, Australia.
I attended last year and felt it was well organised, insightful and a great opportunity to meet Australian designers and developers. Well worth the ticket.
They just put out their call for presenters if you're interested.
Agile development principles
Agile development principles can be applied to most business problem-solving methods -- satisfy the customer, welcome change, encourage face-to-face communication, keep it simple and stay loose.
I highly recommend reading these principles behind the Agile Manifesto.
Continue reading "Agile development principles" »
People in the driver's seat
Missed this December 2007 post from David Armano on People-Driven Design. Armano points out that although usability-, creative- and tech-driven approaches must factor into the equation, it's still the people that drive the design:
Most of us would agree that the best experiences are designed with people in mind. But the fact is that it's still really easy to forget about the end user or person that you are ultimately trying to serve.
Five key attributes for information-based websites
When it comes to the web, Elavision's portfolio is mix of transaction-based and information-based websites. Although transaction-based websites tend to deliver a better user experience -- allowing people to actively connect (e.g. Facebook, Twitter), manage (e.g. online banking) or buy/sell (e.g. eBay, Amazon) -- there is still a place for information-based websites.
Many of Elavision's clients don't have the need to provide services or online tools on their website, just timely and actionable content (often leading to an email or telephone exchange). In order for an information-based website to be effective, it must quickly communicate a message, empower the end user (i.e. knowledge) and provide multiple options for next steps.
Where to start? Although website audits or expert reviews can uncover a variety of usability violations and content issues, these techniques can't determine if the content or user engagement will be effective. So before you get tied up in the nitty-gritty of site structure, navigation standards, media formats and authoring guidelines, I suggest looking at your website with five key attributes in mind: focused, useful, usable, inviting and manageable.
Focused
Many factors contribute to an effective website strategy -- leadership, clear business objectives, consensus amongst team members and dedicated content authors to name a few. Yet, there is one element that far exceeds the others in terms of contribution and return on investment: your target users.
While it's true that anyone with a web browser can access your site, it’s your target users who depend on your site to access timely information, answer questions and identify the best contacts. The success of selling your company's value and services will largely depend on meeting the needs and expectations of this pre-defined group of people.
After all, the principle means for gauging an information-based website's effectiveness (e.g. customer leads, partnerships, marketing exposure) are your target users and their actions. A detailed understanding of your target users will provide you with an effective metric by which to evaluate all subsequent design decisions.
Useful
Although there are a number of elements that contribute to a compelling web experience –- findability, usability, accessibility, technology –- it’s engaging, timely and ultimately useful content that will dictate the success and longevity of your website.
In order for web content to be engaging, it must quickly capture people’s attention, instil confidence, address a need and then offer numerous ways for users to learn more on their own terms (e.g. PDF fact sheets, email, personal contact).
The goal is not to address every aspect of your business, instead the goal is to strike a chord and call someone to action.
By writing content with the user in mind, presenting information in easy-to-scan sections and grouping business tools in a consistent manner, you enable users to find the answers they’re seeking and begin transacting with your company or organisation.
Usable
Although only a factor if the content is deemed useful, a usable website adds the element of reliability to your content. It enables users to quickly learn the interface, find their bearings, efficiently complete tasks and fulfil their needs.
The goal here is to make your website enjoyable in a productive way by providing a consistent experience and tools with a low learning curve.
Inviting
Visual design has three main functions: land the brand, land the page and therefore, land the message.
Applied correctly, it guides users through the content, from the main message to supporting navigational aides. It applies colour and texture to elements to indicate weight and visual hierarchy. It communicates your message by engaging the user emotionally, drawing attention to the messages that matter most.
Manageable
Your website is focused, useful, usable and inviting... but will be nothing if it's not manageable. An effective content management strategy starts with user goals and business strategy, but then is built around business imperatives, daily operations and individual capabilities.
Processes vary from organisation to organisation, however the following key factors need to be in place to improve uptake and encourage regular contributions:
- Energetic, enthusiastic authors who are publicly and professionally recognised for their work effort.
- Shared understanding of voice, message and marketing focus.
- Universally accepted content authoring guidelines and procedures.
- Proper training in processes and systems.
- Self-sufficiency, including easy access to systems and access to all other business unit contributors.
Relationship between Marketing and Interaction Design
Very quick and clever video on the relationship between Marketing and Interaction Design.
Richard Ziade (sketch.basement.org) points out that marketing is the art of getting people to the purchasing point, whereas Interaction Design is the dialogue and relationship a person forms with whatever they purchase. The first delivers the sale, the latter creates long term loyalty. Examples include products such as the iPod or services such as Shutterfly.
You could look at Search Engine Optimisation (SEO) and Interaction Design in the same way. SEO is about getting people to your web site or service, whereas Interaction Design is the dialogue and relationship a person forms with your information and tools once they are there. SEO is user discovery, Interaction Design is user experience.
10 commandments of web design
Matt Vella spent some time with the experts (Don Norman, Khoi Vinh, John Maeda) to come up with The 10 Commandments of Web Design for BusinessWeek.
Although obvious to some, these truths are overlooked more often than not. Simple, but true.
- Thou shalt not abuse Flash. Don't overwhelm the viewer.
- Thou shalt not hide content. With advertising.
- Thou shalt not clutter.
- Thou shalt not overuse glassy reflections. Apple.
- Thou shalt not name your Web 2.0 company with an unnecessary surplus or dearth of vowels. Meebo?
- Thou shalt worship at the altar of typography. Check out Daring Fireball.
- Thou shalt create immersive experiences. Perhaps the most important.
- Thou shalt be social. Hmmm. Maybe this is the most important.
- Thou shalt embrace proven technologies.
- Thou shalt make content king. Content trumps pretty.
Not just a pretty face
Jonas Löwgren talks about the relationship between Interaction Design and aesthetics in Five things I believe about the aesthetics of interaction design (PDF). He states:
In interaction design, we are not doing visual art. The user's aesthetic experience lies in the interaction, the way in which the system behaves and responds over time in interplay with the user. To put it simply, when we talk about aesthetics we need to talk about look and feel, not merely about look.
Don't just inform... guide me
Contextual help is often used to alert users of particular requirements of a tool, input form or function that may not be readily understood.
A common example exists in form design, where representative text (e.g. "Enter phone number as 555-555-5555") informs the user of the correct syntax to prevent an error. This preventive, heads-up approach has been implemented and adopted widely across the Web.
The other side of the coin is contextual help in the form of post action error messaging. A user enters invalid data or submits incomplete information, and the system immediately responds with an error message (e.g. "Username already exists. Please enter a new username").
In both examples above, it's about error prevention. Normally dictated by internal needs (e.g. data integrity, marketing, technical limitations), but delivered in a customer-friendly way.
However, I hadn't come across contextual help that focused on guiding a user through a process until I searched for something on The Independent.
When searching for "tom waits", I received the standard list of results:
Fairly standard presentation. Some sort options, some pagination controls to move along.
However, notice the "Refine your search" field. It's simple, but it's contextual help. It quietly points out that narrowing my search (i.e. "tom waits AND") may be the best way to reduce noise, instead of forcing me to use advanced search -- which often fails miserably in usability tests -- or faceted search options (e.g. "Narrow by Category").
A simple presentation of a quite powerful method (i.e. boolean logic) delivered in a timely manner. Now that's contextual help.
Monkeys with money and guns
Tom Waits, the back-alley troubadour whose music has a way of slowly seeping into your brain, then squatting there for years, delivers this insightful quote for the information seekers out there who scramble around in search of content:
We are buried beneath the weight of information, which is being confused with knowledge; quantity is being confused with abundance and wealth with happiness. Leona Helmsley's dog made $12m last year... and Dean McLaine, a farmer in Ohio, made $30,000. It's just a gigantic version of the madness that grows in every one of our brains. We are monkeys with money and guns.
I often remind my clients to think about their message and carefully consider the knowledge they want to impart to their customers or employees. With all the noise on the Web, it's essential that you look at quality vs quantity. Most people don't have the time to sift through your content; and those who do are already past the point of no return in terms of understanding what they're seeking.
Keep it rich by keeping it simple.
Wireframes out, prototypes in
Wireframes have been a valuable tool in my design toolbox for the last 10 years.
I've used lo-fidelity wireframes to quickly flesh out ideas, draw attention to problem areas (e.g. "what do you mean we'll need to rethink our content?") and get design teams and stakeholders all on the same page (sorry for the pun). These rough conceptual versions also come in handy during paper prototype tests, where walking a user through a series of tasks using paper is much more effective than walking them through hypothetical situations or waiting until a system has been developed to discover errors in your thinking.
I normally switch to hi-fidelity wireframes when most of the issues have been sorted out and it's time to sell ideas or seek approval from management. In addition, these hi-fidelity wireframes become the anchors for my documentation and communication with graphic designers, front-end developers and back-end developers.
However, things have been changing over the last few years. With more and more rich internet applications hitting the Web (think drag-and-drop, smooth transitions, sliding panels) and changes in how users interact with devices (i.e. touching replacing point-and-click), it has become more difficult to communicate screen and component ideas using the wireframe. I often spend more time annotating each interaction on the wireframe than I do creating it in the first place.
Enter protoyping. Prototypes are fully functioning models that focus less on the screen and more on the individual interactions. Done crudely on paper, or more precisely with drawing tools (e.g. Visio, Axure, Omnigraffle) or HTML, prototypes allow stakeholders, designers and developers to experience the design, not just interpret it.
David Verba hits it on the head in his article, Sketching in Code: the Magic of Prototyping:
Prototyping allows us to see problems more clearly—and often earlier—in the design and development process. As we move beyond corporate content sites and into applications that have rich, complex functionality, our ability to sit down at the beginning of the project and foresee potential interactions and problems is diminished. The problem-space is just too complex. This is the reason we started using wireframes in the first place. Often the only way to really understand where problems are going to arise or to figure out potential solutions is to sketch them. We use wireframes to sketch content and layout, but as we move into more interactive interfaces, wireframes aren’t as effective. We need to sketch with actual functionality—to “sketch in code,” so to speak—so we can see how the application will really behave.
As part of my ongoing effort to reduce documentation (i.e. Section 11.3.15.4a) and increase communication, prototyping is quickly superseding my wireframing ways. Prototypes sell ideas through interactions and aren't subject to the interpretation and translation issues normally associated with wireframes (e.g. "Just imagine the dropdown menu includes all the colour choices").
There's nothing better than seeing your ideas in action and watching users validate or nullify them. In the same amount of time -- often less -- it takes to write a lengthy IA specification, you can deliver twice the results to developers and stakeholders who have already witnessed, experienced and more than likely, approved the designs.
