Pear Note: Note taking utility for Mac

Pear Note from Useful Fruit Software is a powerful note-taking tool for Mac OS X. The application integrates text notes with audio and video you can record from interview sessions, meetings, etc.

The notes are time-marked to the video and slides that are being viewed during the recording, so you can click text from your notes, and the app will jump to that time in the recording so you can watch the video or see the slide that went with the note. While you're playing back, text notes are highlighted as you follow along with audio/video.

This is a pretty amazing looking tool to supplement your user research toolbox, and fills a well defined need for researchers, but is just as useful for meetings, conference calls, remote design reviews, and classes.

More info in the Mac App Store or at the Pear Note site.

http://www.usefulfruit.com/pearnote/

YouEye: User testing with webcam eye tracking

<a href="http://www.youeye.com/‘>YouEye looks interesting. The usability testing service allows you to create remote, unmoderated usability test sessions with a small number of tasks, and using the test participant’s web browser and web cam, they record eye-tracking results during the test. The service allows you to use paid self-identified test participants from different demographics. Would hope that you could recruit your own testers as well.

http://youeye.com

Phonedoo: Dry erase iPhone sketching

Cohdoo makes a nice iPhone UI sketching product called Phone Doos. They are 6.8" by 3.5" dry erase iPhone surfaces with faint grid lines and magnetic backing. A pack contains 10 Phone Doos.

I like that these gives you a surface to work on that can be re-arranged easily on a table and presented on a metallic wall. They have some good screenshots using them arranged on a whiteboard with flow arrows pointing between them, which is another thing that's probably much easier with these as opposed to using paper. Dry-erase also saves paper, which is nice. You'll just have to photograph your work, or make sure you have enough of them to keep making more screens.

The Cohdoo guys have web browser magnets planned as well. I'm looking forward to getting my hands on those to review as well.

http://www.cohdoo.com/

Wirify: Create wireframes from web pages

Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. Similar to the Web Without Words, it converts all of the elements on a web page to gray boxes, so you can visualize the page as a schematic without content.

screenshot

This reminds me of a a technique used in painting and design where one steps back a distance from the canvas or screen and blurs the eyes to get a view of the placement of parts of the design, the relationship of the parts to each other, the white space, and the hierarchy of elements. For people working primarily in HTML wireframes, and for those that have moved from wireframes to prototypes or working code, this would be a great tool for doing the same sort of visual check.

To install the Wirify bookmarklet visit the article at Volkside.

http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Clue: A 5 Second Test Service

Zurb’s Clue is another great 5 second test service. They describe it as a fun and easy way to test what people remember on your website.

To use, enter a URL for a page you'd like to test, they generate a screenshot, and provide you with URLs for the test and the test report. Here's an example using this site: test and report. Feel free to mock my home page at will. ;)

Users will see a screen with these brief instructions, "Look at this screenshot and remember what you see," and upon clicking the Take the Test button, they are flashed the screenshot for 5.5 seconds. Afterwards they're given 5 inputs to describe what they remember seeing. Go to Clue App to create your own.

If you're interested in learning more about this type of first impression task, read about it UIE's article about the technique.

http://www.clueapp.com/

UXPin: Paper prototyping redesigned

UXPin just made it a little easier for you to paper prototype. They’ve created a kit with sticky note interface elements (buttons, combo-boxes, check-boxes etc. – 50 each), universal elements (to easily make menus, lists, boxes – 50 each) and a 50 page paper browser notepad packaged in a hard cover case.

http://www.uxpin.com/

CSS Tooltips and Speech Bubbles

I’ve been using some new CSS techniques lately, and thought it was time to start experimenting with ideas. One thing that I thought was really cool was that you could use the :before and :after pseudo-classes to create boxes before and after an element and position those. I did that on the little screenshot images on this product page, to position the little + icons.

I was also interested in how I could replace some of the jQuery techniques I was using to make tooltips in myBalsamiq. One thing that bothered me about the technique in jQuery UI was that I had to use an image to create a triangle below the tool tip box. A quick search turned up a technique for creating a triangle with CSS on a demo by Jon Rohan. Jon’s technique uses a few spans to create the awesome outlined bubble. I thought I’d go simpler and just put a box shadow on the main part of the bubble so I could get rid of the spans, and then I’d just use the :after pseudo-class to position a box that created the triangle below the bubble. The result is below. This has been tested in Webkit only.


Speech Bubble

Demo

Hi there. I like turtles.

Mikey sez

Code

<div class=“bubble”>Hi there. I like turtles.</div>
<p style=“margin-left: 1em;”>Mikey sez</p>

.bubble {
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:10px;
  text-align:center;
  width:180px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after {
  position: absolute;
  display: block;
  content: “”;
border-color: #eee transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom:-19px; left:1em; }


Tool Tip Try 1

This one is a little trickier, because the browser will display the yellow tooltip fro the anchor as well. You could hide the title attribute by using $(“a.tip”).removeAttr(“title”); but that’s where I’m getting the tip from. This is one case where using a hidden span nested in the link might be smarter.

Demo

Hover over me!

Code

<a href=“#” class=“tip” title=“Hi, There. I like turtles.”>Hover over me!</a>

a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: absolute;
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
color: #fff; font-size: .86em; } a.tip:hover:after { position: absolute; display: block; content: “”;
border-color: rgba(0,0,0,.8) transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; top: -8px; left:1em; }



Tool Tip Try #2

This time using a span without the pesky anchor tooltip.

Demo

Hover over me!Hi, There. I like turtles.

Code

<a href=“#” class=“tip2”>Hover over me!<span>Hi, There. I like turtles.</span></a>

a.tip2 {
  position: relative;
  text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
  display: block;
  position: absolute;
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
color: #fff; font-size: .86em; } a.tip2:hover span:after { position: absolute; display: block; content: “”;
border-color: rgba(0,0,0,.8) transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom: -16px; left:1em; }