Links

Rabbit holes for procrastivity.

Treejack - Information architecture testing

Treejack is a tool to help you test the effectiveness of an information architecture.  Use it to find out which categories are strong, which labels need tweaking and what tasks people are struggling with.  Because you can upload an existing or proposed IA, and test with participants remotely, you get rapid feedback at a fraction of the cost of in-person testing.

Often, usability testing only reveals flaws with the interaction and interface elements.  Treejack is a way to effectively test the quality of an information architecture itself.

Here is an example of a Treejack survey that a participant may complete:

Check out what Treejack results look like and sign up for free.

http://www.optimalworkshop.com/treejack.htm

ForeUI: Create Skinnable & Interactive Prototype

ForeUI is a handy UI prototyping tool. It can rapidly create skinnable and
clickable UI prototype for your website or software, and run the interactive
simulation in your web browser.

ForeUI provides a set of predefined elements for creating mockup, you can drag
them into the editing area and tweak them. You can also create your own elements
and libraries.

ForeUI makes prototype skinnable, by changing the UI theme, all elements in
the prototype will change their look. Currently ForeUI provides four UI themes
for prototyping, including Hand Drawing, Wireframe, Windows XP and Mac OS X
themes. These UI themes cover the high, middle and low fidelity degrees, you
can switch the UI themes at anytime, thus the fidelity of wireframe will be
switched as well. The figures below is the same mockup rendered with different
UI themes.

   
 
   
  

You can define the prototype behavior by creating the flow chart for handling
specific events, it will work as you expected during the simulation.

You can click the "Run Simulation" button to run the prototype in
your web browser. All defined behavior will be converted to JavaScript and work
in the browser.

ForeUI works on Windows, Mac OS X, Linux and Solaris. You can choose the tool
look and feel if you'd like. Here are some screen shots for ForeUI with various
look and feel.



ForeUI with the default EaSynth look and feel



ForeUI with Windows XP native look and feel



ForeUI with Mac OS X native look and feel

http://www.foreui.com/

Camtasia for Mac

TechSmith, makers of Morae and Snagit, have released a Mac version of Camtasia, the screencast video recording software. The software allows you to capture the screen, audio and iSight input, and provides simple drag and drop editing including a lot of built-in transitions and effects. You can then easily export the HTML and SWF for embedding in a web page.

Looks like an easy to use alternative that might take the work out of producing screencasts. The video suggests that TechSmith have really thought about the primary demo and training use cases.

http://www.techsmith.com/camtasiamac/default.asp

SlideSix Multimedia Presentation Sharing

SlideSix is a presentation sharing service that let's you upload presentations (PowerPoint, OpenOffice, PDF) with recorded narration or video imported from the web, e.g. from YouTube. Presentation pages provide social features (comments and chat), embedding info, and rating.

http://slidesix.com/

Napkee: Create Prototypes from Balsamiq Mockups

Napkee is a very exciting tool that extends the quick and easy wireframing process in Balsamiq Mockups by importing your Balsamiq files and generating interactive prototypes in Flex or HTML version.

To start off, you build your series of wireframes in Mockups, optionally creating links between pages. The screenshot below shows a wireframe of a fictional news site I created to try it out. I mocked up a site home page, and a login screen for my test.

Mockups lets you do all presentation you need with static images, and links between pages, but what's been lacking so far is the ability to demonstrate interactivity. The magic of Napkee happens after you import the mockups. The interface below shows the my 2 mockups in Napkee. The selected mockup displays tabs for viewing the BMML (Balsamiq's markup language), HTML, CSS, and JS source. If you're going to export to Flex, you'll see MXML and Action Script source.

The final step is to export the project to HTML or Flex. For the HTML version, Napkee creates all the markup and a stylesheet that lays out the elements with absolute positioning. It also generates the Javascript (jQuery) for any components you might have added that require animation or state changes, e.g. tabs and accordions. You'll have an html page that loads in your browser, with links, operational components such as accordions and tabs, and form fields that you can type into.

I haven't learned all of the rules for binding elements together, e.g. my radios aren't grouped, and my links appear to be broken at the moment. But you can play with the form fields and UI components in the 2 exported pages below.

This is a pretty cool tool for anyone that's been using Balsamiq, or has been considering using it, but have also wanted to more effectively demonstrate interactivity in their wireframes. I'll have to play with it a bit more to really understand how to make it work for me, but I think it'll definitely become a regular tool for a lot of web designers.

Napkee sells for $79 per user. As with Balsamiq, there are also gratis licenses for nonprofits. Check it out.

http://www.napkee.com

NonVisual Desktop Access (NVDA) Screen Reader

NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. Providing feedback via synthetic speech and Braille, it enables blind or vision impaired people to access computers running Windows for no more cost than a sighted person. Major features include support for over 20 languages and the ability to run entirely from a USB drive with no installation.

http://www.nvda-project.org/

Guide to CSS support in email clients

Campaign Monitor provides a table showing the level of CSS support in the 23 different email clients they test, and covers all the popular applications across desktop, web and mobile email. The web-based version of the guide focusses on the 10 most popular email clients on the market, and they provide a complete report on all 23 email clients in PDF format.

http://www.campaignmonitor.com/css/

Fireworks Script for iPhone App Prototypes

The iPhone extension helps create a mockup of an iPhone application in Fireworks. It automatically adds the iPhone wrapper when you preview the mockup, or package it for distribution as an AIR application. The slide-in, slide-out effects that are charecteristic of iPhone can be generated using this extension.Updated resolution to 480X320.

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1786031

OverSite: Wireframe Software

OverSite is a cross-platform application for wireframing and prototyping. It uses a drag and drop interface and can build HTL prototypes from your linked pages.

The app lets you define the hierarchy of your website or application, create sections and subsections, fill them with pages and screens, and rearrange your structure using a drag-and-drop interface. The app automatically generates a site map, and any changes you make to your structure will instantly be reflected. You can then wireframes using the UI component library and create your own reusable components. Construct templates that apply to all pages/screens within a section and create multiple versions of the same page or screen. The app also supports linking between pages. Finally, it allows you to use a built in prototype browser or export the project as HTML with absolutely positioned elements.

HTML exporting is not bad, but project/directory naming during export was a little confusing to me. The interface itself could be nicer to look at, as can the UI components. I wouldn't want to show ugly wireframes to my team or to clients. In the Mac version I also found it odd to have to click a component and click again in the canvas. More like click-click than drag-drop.

The concept looks promising and it feels similar to many of the other heavier wireframing/prototyping apps currently offered in this market. It's nice that it's a full-fledged app, and features, e.g. automatic notes, seem to be hinting at movement in the direction of tools like Axure, but it's laking some of the more interactive features.

http://taubler.com/oversite/

UserTesting.com: Automated usability testing

UserTesting is a commercial service that promises automated usability testing.

You might think of this as a series of task-oriented usability test sessions where you only need enter a number of tasks for a test that will take approximately 15 minutes, enter the demographics (age, income) and technographics (computer experience) for the user you'd like to target. UserTesting has a pool of paid testers who accept sessions, view your site with a floating layer that shows the tasks to complete while they record their voice, mouse clicks and movements, and page changes. Finally, the service asks the user to fill out a follow up survey. The cost is tiered by number of users per session.

Here's how it works:

1. You sign up for user testing, specifying the demographic profile of your target audience, how many users you want, and what tasks you want them to perform on your site. You can optionally enter more information about your user requirements, or enter names of specific UserTesting users you my have worked with in the past.

signup

2. Usertesting notifies users. When users have accepted your test, the status change appears in your control panel. Completed tests can be viewed from this page or via an email notification.

3. Users record their screen and voice as they use your website, speaking their thoughts as they browse. You watch and listen to them use your site. Each user's session - mouse movements, clicks, keystrokes, and spoken comments - is saved as a Flash video for you to watch.

4. Finally you are able to read a summary the user enters at the end of hte session: What they liked, didn’t like, what would have caused them to leave your site.

Observations

The product seems targeted at companies that don't have a person on staff with experience doing user testing, who don't want to invest in time for preparing and facilitating test sessions, or who don't want to hire a usability consultant. Seems promising on the surface, but I think it's not without challenges.

A few things stand out from my brief demo. Without the physical presence at sessions, follow-up questions to specific tasks have to be scripted as part of the given script, and you cannot ask follow up questions while the test is in session. On the positive side, you can't lead tasks at all, but a facilitator with experience wouldn't be likely to fall into that trap. The forms make some good suggestions for typical tasks and follow up questions and how to word them.

You do not do the screening yourself. This has pros and cons. The pros are that they save you time. The cons are that you cannot screen people out after talking with them through your own screener, with your specific questions. The best that the sign up form offers you is a field to enter additional needs, but you're at the mercy of the service to follow through on your requests.

Another thing I'd like to have seen is the ability to write my own follow-up questionnaire rather than use the set provided, as well as offering some simple questions with ordinal value answers perhaps.

The best benefit on the surface is cost. The biggest challenge in my opinion will be in proper screening, and most importantly in the analysis. I have no doubt that the right company might be able to find value in a service like this if they choose the right scenarios, word tasks well, and are able to analyze the results and make suggestions for the right improvements.

http://www.usertesting.com/

CSS 3 Cheat Sheet (PDF)

Smashing Magazine's printable CSS 3 Cheat Sheet provides a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

Infomaki: Open Source Usability Testing Software

Infomaki is a Ruby on Rails application developed by the New York Public Library as a way of rapidly testing alternate designs and navigation language with minimal disruption to users. NYPL are using it to power http://usability.nypl.org and test new designs for the main NYPL.org web site. More and documentation is available at the NYPL Labs blog, http://labs.nypl.org.

https://sourceforge.net/projects/infomaki/

SlickMap CSS: HTML Sitemapping Tool

Matt Everson of Astuteo has created SlickMap CSS, a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Via David Kaneda

http://astuteo.com/slickmap/

Pictaculous Color Palette Generator

Pictaculous is a color service provided by MailChimp that takes an image you upload, samples the colors, and then provides a palette from the color samples, color palette suggestions from Kuler and Colour Lovers, and a downloadable Adobe color swatch. Works on the iPhone as well by emailing photos to the service.

http://pictaculous.com/

Concept Feedback

Concept Feedback.com is a free community where designers and developers can exchange feedback on design projects. Registered users have the ability to post marketing concepts for free. Concepts may include, but are not limited to, websites, logos, newsletters, landing pages, advertisements and videos.

Reviewers can offer constructive feedback on each concept using a proprietary feedback tool. Feedback is automatically collected and archived for the user to help improve the final concept and get better results. In addition to a distinctive professional network, registered users have the capability to post concepts privately, for secure review by clients, co-workers, and friends.

http://www.conceptfeedback.com