“There are three basic approaches to conducting quick remote interface tests, whether you’re testing live websites, designs, wireframes, or prototypes. The approach you take will depend mostly on how you feel about people—do you want to talk to users face-to-face, or use one of the many new UX tools and let computers gather the information automatically?”

From A List Apart. Really practical and thorough with lots of links, funny (choose your usability test method based on whether or not you like talking to people), and mentions my favorite free screen sharing application, Adobe Acrobat ConnectNow, that works with any operating system, Macs included.

URLs

http://www.alistapart.com/articles/quick-and-dirty-remote-user-testing/
http://www.adobe.com/acom/connectnow/

“To date, the most common approach to propagating a single user experience standard is the development of UI guidelines and principles documentation within an organization. Development teams — usually incorporating a user experience specialist — then reference this documentation during implementation and upgrade processes.

However, as the numbers of systems grow within an organization, so does the effort needed to maintain the quality and consistency of the user experience. For many organizations, it is now impossible to assign much, if any, time of a user experience specialist to all implementation efforts, and experience has shown that the UI guidelines and principles approach to propagating a single user experience standard does not scale well.”

From Boxes and Arrows. Besides a quick discussion of issues around how traditional guideline documents don’t scale, and alternative solutions, this article includes an excellent set of links to UI pattern libraries.

“Information architecture is an often misunderstood job title. Are they Designers? Developers? Managers? All of the above? In this article we’ll discuss what information architecture is, why it’s related to usability, and what are the common tools/programs used in information architecture.

Along the way we’ll share some of the tweeters, books, and resources we found useful for budding information architects. Even if you’re familiar with the discipline already, you can probably pick up something you’ve missed.”

From UXBooth. This article is comprehensive but the data is presented in neat little boxes, for example, links to the Twitter addresses for several information architects and links to software used to create information maps, not a ton of prose. But the insights are thorough. Information architecture is both a distinct skill set requiring you hire someone to do it and a skill that business and software program managers should possess.

”

Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears.

Wireframing is one of the first steps in your planning process and arguably it’s one of the most important ones. This is when the idea starts to take shape as an application, becoming boxes and buttons that users will interact with. This article will take you through a wireframing process; who should be involved, the tools to use and tips to enable you to make better wireframes.”

From Think Vitamin. I chuckled when I read the first paragraph above. If only it were that easy to develop online applications. Been there, done that. This is a quick but highly useful checklist for developing wireframes, whether you are a business person or an interface designer. I especially recommend #9 (UI is not UX) and #14 (Look for Repetition).

As a writer, I notice that a lot of business processes like wireframes are similar to writing. Repetition, in particular, is both a boon and a curse. With interface design, repetition can help people learn an interface more quickly but it also can make a user’s eyes glaze so they become blind to parts of the interface.

“In the broadest sense, all kinds of design artifacts are prototypes. Pencil sketches, blocks of wood, storyboards, wireframes, foam-core models, pixel-perfect state renderings, clickable demos, and functioning production code are all strategies for representing a thing being designed. However, in the world of interaction design, we usually reserve the term for ways of representing interactivity—not just the form but also behavior. For the purposes of this article, therefore, I’m going to focus on things that both look (at least somewhat) like the thing being designed and simulate a response to human actions (clicks, taps, selection, and navigation), even if the simulations are crude or fairly limited…”

From Adobe’s Developer Connection. This is a clearly written, easy to understand, overview of prototyping for interactive design, what prototyping is, how it’s done, and its limitations. Includes a link to an interesting article about how to use Adobe’s Fireworks to create prototypes.

“Unfortunately, we’ve found that many teams don’t know how to iterate effectively. Good iteration is a deliberate activity, with four important stages: planning, implementing, measuring, and learning. The best teams focus on each stage appropriately, making sure they get the most out of it. While iterations can be very short, (we’ve seen teams that can iterate a dozen times in a single day,) the best teams don’t short change any of the stages.

If you’re familiar with Agile development, these stages will sound very familiar. That’s because there are parallels between the types of iteration we do when designing great user experiences and what developers do when building applications. The big difference between UX iterations and Agile iterations is that most Agile iterations focus on coding something, whereas UX iterations can have alternative deliverables, such as wireframes, or persona descriptions.”

From UIE. While this process works for usability testing and interaction design, it also works for solving any problem.

“Since Apple opened up the iPhone and iPod Touch operating system to outside developers and gave them a place to sell their wares – the AppStore – a new breed of mind mapping tools has quickly emerged that enable you to capture your ideas any time, anywhere. These programs vary widely in their capabilities, but all offer some intriguing capabilities that promise a bright future for visual diagramming on this amazingly popular pair of mobile devices.”

From the Mind Mapping Software blog. I’ve got way too many pages of iPhone apps on my phone so I’m a sucker for new software. These look particularly good for mapping ideas when you’re not near a desktop or laptop computer. Of the 8 software tools reviewed, Zeptopad looks the neatest with its ability to hand draw objects and relationships.

“Whereas a design pattern is a common solution to a specific, recurring problem (such as pagination interfaces), an interaction design framework is a set of design patterns and other elements used together to guide the design of a complete system or site context.”

From UIE. This is a good overview of how you can take interactions within a software application, and across software applications, and distill them into patterns. Doing so helps reveal some of the strengths and weaknesses of those interactions. More importantly, thinking about interactions as a pattern helps identify opportunities to improve the interactions. And maybe even subvert or replace an interaction with something more direct and useful.

“The barrier between web pages and desktop software is beginning to disappear, and modern rich client user interface technologies such as Silverlight/WPF, Air, or Java FX enables designers to take the control over the whole user experience of a software product. Style guides for operating systems like MacOS or Windows become less important because software products are available on multiple platforms, incorporating the same custom design independently from OS-specific style guides. Software companies and other parties involved begin to use the power of a distinct visual design to express both their brand identity and custom interactive design solutions to the users.”

From Boxes and Arrows. Designers taking control of software interfaces can be a good thing and a bad thing. You start, of course, with common user assumption, for example, most software follows the Microsoft model and has the upper left navigation begin with File which leads to file management choices on a dropdown list. But these assumptions should be challenged over time and so this trend should be a good one.

What I liked most about this article, however, is that it is a great overview that explores how photos are used in software. For business people, it’s a great way to build a vocabulary that lets you discuss what you really like or don’t like in a software application that uses photos.

“Here is another very good Polypage HTML wireframe submitted by Joey Marchy from nGen Works. Two interesting uses of Polypage make themselves visible in this sample. First, on the upper left hand side, all of the various user types have been defined. Toggling them gives a good sense of what all of the various wireframes will look like for that particular user. Secondly, Polypage has also been used to annotate the wireframes and this is accessible through the upper right corner by means of such tags as “user roles” and “hash marks”. The really nice thing about this annotation technique is that no longer are the actual annotations separated somewhere in the right hand side from the main wireframe, but instead are contextualized right in the wireframe itself. This allows people reviewing the wireframe to read the annotations quicker as opposed to having to translate number references into actual notes, as it is done traditionally.”

From Wireframes. This article makes a nice contrast to the Boxes and Arrows article about using XHTML for designing interactions within software applications.

“One of the biggest problems with wireframes is the lack of a standardized notation. In other words, my wireframes certainly don’t look anything like your wireframes. This means that visual designers and developers who use wireframes are continually relearning how to interpret our work, leading to noise between author and reader. To compensate for the lack of a standard, we have to create highly detailed wireframes, with often lengthy annotations that explain what our wireframes mean and how elements in them work. These, in turn, are collected in large specification documents that usually are so labor-intensive they become impossible to maintain. When they are no longer kept up-to-date, the team stops trusting and relying on them as the design specification, which leads to all kinds of bad things happening.

In contrast to wireframes, XHTML is a standardized notation, anyone who knows XHTML can read your document. More importantly, it is a language spoken fluently by a key target audience of your design documents, the developers. And those who don’t know or care about XHTML can view the part they do care about, the page design, by opening the document in a browser.”

From Boxes and Arrows. It took me awhile to get the point of this article but it’s a terrific argument for using XHTML as part of the interaction design process.

“An interaction design pattern is not a step-by-step recipe or a specification. It’s a set of things we’ve learned that tend to work in clearly defined situations as well as some known issues that need to be balanced or sorted out or otherwise addressed. A pattern is closer to a checklist than to a mock or a wireframe.”

From Boxes and Arrows. This is a moderately technical discussion of how best to use patterns in interaction design. They also discuss how patterns and style guides compare and contrast. And the use of patterns and pattern libraries as competitive secrets, even patent-able.

“I often tell clients that IA [information architecture] establishes the baseline, or foundation, for a solid site structure. It helps create the traffic patterns and navigational routes that get the customer from A to B in language that is helpful and easy to understand. In fact, IA is the first step in meeting customer goals and can therefore increase brand awareness and product or service sales.”

From A List Apart. This is an excellent description of what information architecture is and how it benefits the business and helps keep projects on track. Includes gory details like deliverables and how they work. Photo from Flickr by Kaeru.

“People constantly ask me what the best prototyping or mockup tool is.  My standard answer is “whichever tool you are most comfortable/experienced with.”  But just to cover all the bases and make sure that I’m not missing out on the “silver bullet”, I decided to do a review of all the tools that I’m aware of.  You could (and probably should) distinguish between pure mockup tools (e.g. “Pencil”) and tools for creating interactive prototypes (e.g. Adobe’s soon to be released product code named “Thermo”), but for the purposes of this matrix, I lumped them all together, and I noted which have interactive capabilities and which don’t.”

From Russell Wilson at Dexo Design. This is a very thorough matrix that describes many different tools based on task as well as functionality and technology. The comments also include a lot more useful information.

“So my choice of using FW for prototyping is most definitely not a statement about it being a great prototyping tool overall, just that it works great for me personally because I can go all the way from wireframes to final design within the same app. That’s going to be one of the main things I was going to demo – recycling art assets from the wireframes to the final visual mockups.”

From a thread at IxDA about using Fireworks as a user interface prototyping tool. The thread includes a link to an article, Review: 16 User Interface Prototyping Tools, as well as a Meetup notice for Tuesday, February 17, 2009 at 6:45 p.m. in San Francisco where the person who started the thread, Al Abut, will speak and demonstrate how he uses Fireworks to prototype.