Rabbit holes for procrastivity.
Touch Notation is a simple annotation system created by Matt Gemmell for documenting multi-touch gestures. It's an incredibly simple system when compared to the more literal annotation symbols that use hands, because the symbology can be quickly rendered in sketches as well as being used in wireframing libraries.
The Touch Notation page provides PSD, AI, and OmniGraffle templates. I've additionally created a Balsamiq Mockups version of the system on Mockups To Go.
DataTables is a plug-in for the jQuery Javascript library. It is flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:
AddUse is a commercial user research service that allow you to run and analyze web surveys and allows usability test facilitators to manually capture and analyze the results of test sessions.
Bounce is a new screen capture service from Zurb that lets you invite other collaborators to annotate screenshots.
Here's a test page of Konigi for you to defile, er, test.
Dapp is an Apple UI Standards professional rapid application development tool that runs in the iPhone. It lets you design iPhone app prototypes, publish a spec to PDF, and generate iPhone SDK code.
Elastic Lists is an open source project from Moritz Stefaner that allows you to create a faceted browsing interface for navigating large, multi-dimensional info spaces with just a few clicks, never letting you run into situations with zero results. Elastic Lists is an Apache licensed, AS3 project for use in Flash CS4 or Flex.
LiveView is a free remote screen viewing application created by Nicholas Zambetti to help designers create graphics for mobile applications, and for quick and dirty simulations, demos, and prototypes.
Visual Designers may use it to view artboard while you work. LiveView is compatible with both standard and Retina displays. Interaction Designers can use with iPhone or iPad tethered via WiFi, to interact with software prototypes and demos running on your Mac to communicate and iterate your concepts quickly.
Sencha Touch looks like an excellent toolkit for delivering HTML 5/CSS 3 mobile experiences. Check out these demos your mobile device to give it a test run: GeoCongress (makes use of geolocation), Solitaire (drag and drop and flip animations), Kiva (provides iPad popover controls).
Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices. It's built specifically to leverage HTML5, CSS3, and Javascript and makes use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. Altogether, the entire library is under 80kb (gzipped and minified), and it's trivial to make that number even smaller by disabling unused components or styles.
Via @threefour
things@kureno has a fantastic lorem ipsum tool that lets you select the type of copy you want to generate (paragraphs, headings, lists, etc.) and the voice of the writer (business, design studio, tech talk), and then copy the styled text as html.
Google Chrome’s developer extensions are useful in-browser web development tools for such things as testing pages on various screen resolutions, analyzing app performance, working with HTML, CSS, JS, generating lorem ipsum greeking, and more.
Chrometric is an excellent color application that simulates eight types of color blindness, blur ("forgotten glasses"), and reduced contrast (a.k.a my laptop screen on a sunny day). It is essentially a web browser, and allows you to check webpage address you enter into it. It's an Adobe AIR, so it works on Mac/Linux/Win.
Petr Stanicek's Color Scheme Designer is a web-based color scheme selector that allows you to select a color, generate a palette of color combinations, view the palette as a sample web page, and with color deficit simulators. Lastly, the color palette you generated can be exported as HTML/CSS or as a Photoshop palette.
GestureWorks is a multitouch authoring environment for Flash and Flex that ships with a library of over 20 unique gestures. This gesture library is built upon an open source gesture framework, allowing developers to customize and extend the “gesture object” to create support for new gestures. The library is available for GestureWorks, and posters in PNG, PDF and AI format are also provided.
Griddy is a simple JQuery plugin that overlays a customizable grid over any element.
Luke Wroblewski's Touch Gesture Reference Guide is a set of resources for software designers and developers working on touch-based user interfaces. The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures. Downloadable in PDF, EPS, and OmniGraffle formats.
Vyoopoint is an online design presentations tool. It makes it easy to create and review a website design presentation or any other design project. Suitable for creative professionals - from freelancers to large advertising agencies. It supports flash files, allows not only text comments but also image markups and video markups, has automated version control and many more... Check its features!
Can I Use provides compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.
Morten Just created wireframe templates using the new drawing tools available for Google Docs. The illustration tools in Docs gives you basic shapes you need to create UI elements that can be combined and grouped to create components. The biggest advantage is that since it's document authoring in the Docs cloud, you can do collaborative editing.
For what it's worth, I don't think this is ideal, but it is interesting because of the online collaboration. Like OmniGraffle, it wasn't created for wireframing, but clever designers will always find a way to make tools useful for our needs, beyond what they were intended for.
http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
Gesture icons created for wireframing touch interfaces. High resolution multi-touch vector icons, scalable and alterable (.pdf, .ai, .eps file types.) Free for personal use, and commercial licenses are available.
Gesture stencils based on drawings Rachel Glaves did for the book, "Designing Gestural Interfaces," suitable for using in documentation. The drawings are of hands performing common touchscreen gestures like tap, slide, point, drag, pinch, and spread. Available in OmniGraffle, Illustrator, Photoshop, Fireworks and SVG formats.
http://www.kickerstudio.com/blog/2008/12/touchscreen-stencils/
Since starting work at Balsamiq I've been doing customer support every day. Part of that work is repeatedly referencing the same URLS and instructions for frequently asked questions. Peldi and Val handle the volume by using Typinator, a Mac utility that lets you define text shortcuts that you trigger to complete these answers.
Years ago, pre-OS X, used something called TypeIt4Me to handle this and am stoked to have this kind of a tool back in my aresenal. The email response stuff is cool, but what I've been using it for most is for all the different kinds of Lorem Ipsum greeking I use. For instance, I have single paragraph, single sentence, title/description/author, etc. What I'm also starting to do is to create these greeked text blocks formatted in Balsamiq's text syntax, which is kind of like markdown or wiki editing syntax. So can text in some controls to use flags for icons, to create font styles. etc.
Simple software like this saves your life from the monotony. This is easily one of the best pieces of software I used daily.
Concept Feedback is a website review community with over 5,000 web designers and developers, marketers and entrepreneurs. Once a website is posted on Concept Feedback, members are invited to provide reviews. On average, a concept receives 12 or more unique reviews, while some can generate as many as 100. Because of the nature of the community, feedback can cover a variety of topics, including design, usability, content and strategy. Concept Feedback is best for getting design-related feedback from a wide audience and can be used at all stages of development.
Inspired by the 5 second test, a lot web-based services have cropped up to support remote usability testing. In the past few years, I've been experimenting with some of these to conduct super small, unmoderated remote usability testing sessions. I've used Morae extensively in the past, but for most of my needs, that's like using a sledgehammer on a pushpin.
I'd been successful using fivesecondtest and Usabilla, who decided to sponsor me after I participated in the beta and gave feedback. I then got wind of OpenHallway, which also provides unmoderated testing with the addition of recording the users' screen and voice using. I want to note that having agreed to participate in the beta, Open Hallway is also now a sponsor of Konigi.
I conducted a simple test with one task using Open Hallway. The observations below take you through the application in the current beta, and are based on my experience testing a common task in Balsamiq Mockups, updating your software.
To get started, you create a project and start creating scenarios for your test. The screen below shows the form for defining the scenario or task. I entered the name of my scenario, instructions the user will read, and the URL to use in the session.
When you're finished defining your scenario, you share a link for the test session with your recipients. The screenshot below shows the share link that displays when you click the "Recording link" text. The sessions that have been completed are also displayed here.
It appears currently that if you plan to have the user attempt multiple tasks, you have to either create each task as a separate scenario, and share the URL for each scenario.
Once you share the test session URL with your users, they're taken to a welcome page that asks for their contact information and diplays browser requirements.
After entering contact information, the next screen shows instructions and describes how the session works. It's a lot of text to read. My first reaction is that this could be a 1-2-3 graphic that's quickly skimmed. The second thing I think might be useful here is some type of consent form or agreement. This would be necessary for most people I would think. Just a quick paragraph in a form textarea and a checkbox to proceed would suffice. This way facilitators can include details about the usage of the recorded video/audio.
It would be useful to somehow show a persistent area in the browser that guides the user through the tasks. I'm thinking of a very unobtrusive box in a fixed position at the top of the page. I wanted to set up my test so that I could do a tasks for 2 different scenarios, but in between I would required a URL change. The fact that the instructions are only given up front once makes it a little hard to expect the user to remember the steps for task #2 without returning to the original screen. That kind of interruption would be a little jarring.
Next we move on to the last pre-test screen which shows the scenario or task to be performed. The test participant reads the task and clicks Start Recording to begin the session, and a new window is opened with the URL specified in the scenario.
After clicking through several pages, I felt like the copy of the task itself could easily be missed if the user clicked the start. My concern is that they would skip the copy and wouldn't know what their task was, and would have to return to the original browser window, looking for the task.
Once the session gets started, everything runs extremely smoothly. If the user performs the task while thinking aloud, their screen movements and audio are captured beautifully.
The only feature request I have regarding the actual session is that I'd love to have multiple tasks be supported in a single session. I like how Usabilla uses a slim iframe at the top of the browser viewport to display the description of the current task and asks the user to indicate when they're done completing the task. It then steps the user to the next task and screen. Something like this would be lovely in OpenHallway so that all tasks are tested in one session.
Once your test is complete, you head back to your project window and view your completed sessions. Clicking a session displays the video of the session. Test participant notes are shown below the video, and you can also add notes of your own. There are no tools or adding markers, e.g. to mark when a task starts. I don't know that you would want or need that in this tool. Viewing the session is simple enough as it is in my opinion, without aspiring to be Morae.
Finally, you can download MP4 video or share the URL for the session page with your team.
It's also noteworthy that while OpenHallway's proprietary video format and SSL data transfer are sufficient for most applications, premium plan holders also have the option to turn on OpenHallway's enterprise security features to further secure the storage of your test scenario results. Doing so, however, means you can't share your video URLs.
I found the experience using this tool to be effortless. The details in my review are largely to satisfy more complicated needs. For the most part, I can make do without these features because simpler is better in the end, and doing multiple small sessions more frequently works for me.
Overall, the experience of getting test sessions up and running was extremely smooth. If you're interested, you can also read more about my first test session on the Balsamiq UX Blog. I started by putting a session together at around 7am. I recruited via Twitter, got 5 respondents and waited while they ran their tests. By 10 I was watching their videos and wrote up notes and a plan for changes. I had lunch, and was making the changes by 1pm.
HTML Ipsum gives you HTML versions of lorem ipsum, with markup for stuff like lists and forms.
Dezinerfolio's free Drupal snippet library for the Coda editor (Mac OS only) provides a very useful set of code clips for theming Drupal sites.
The LESS Ruby gem compiles LESS code into CSS. LESS extends CSS with variables, mixins, operations, and extended rules, and uses existing CSS syntax. You simply rename your .css files as .less files and compile with a plugin or a simple app like LESS.app for the Mac.
iA have created an iPad stencil for OmniGraffle. Contains backgrounds, title bars, buttons, selectors, and other iPhone UI elements. Based the iPad PSD GUI by Teehan+Lax. Text is fully editable on lists, title bars, buttons, and scroll wheels
http://informationarchitects.jp/ipad-stencil-for-omnigraffle/
An iPhone OS OmniGraffle stencil for designing applications for iPhone, iPod touch and iPad devices. The stencil, for now, is targeted at developers familiar with the default characteristics of views and controls provided by UIKit. The stencil shapes are all vector based. The initial focus is on views and controls provided by UIKit and recommended application styles as discussed in the iPhone and iPad Human Interface Guidelines.
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android, Palm, Symbian and Blackberry SDKs, PhoneGap is for you.
Tableau Public is a free service that lets anyone publish interactive data to the web. Once on the web, anyone can interact with the data, download it, or create their own visualizations of it. No programming skills are required. Windows is required for the desktop application.
The free version of Tableau Public is for writers, bloggers, students, professors, hobbyists, journeymen, critics, citizens and more. It’s also meant for organizations, but only as an introductory service, and for continued use requires commercial licensing.