iOS Stencils for OmniGraffle

I’ve been asked several times in the past to add iOS stencils to the wireframe stencil set I make. These are some that I know of, and have been recommended to me by @OmniGraffle and @jmk.

I prefer to link to these than to throw together something myself until I actually work on an iOS project. Why re-invent the wheel? I think the difference among these and the stencils I create is that these are all high-fidelity, rather than the mid to lower fidelity shapes I would wireframe with, even for the iPhone or iPad.

If you know others that deserve to be on this list, let me know via Twitter or using the Contact link in the footer.

http://www.informationarchitects.jp/en/ipad-stencil-for-omnigraffle/

Usaura: Free 5-second tests

Usaura is a free service for conducting 5-second tests. Upload a screenshot. Enter a question asking your respondents to respond by clicking somewhere on your screenshot. Copy the test url to give to participants or use Twitter to share the test. View the results as a heatmap or as click nodes with time-to-click data.

I set up a dummy test to try here.

http://www.usaura.com/

CSS Techniques for Horizontal Rules

I like to use HR tags. I use the technique in the first example below, but occasionally want a nicer separator, and hate having to use a graphic to show that chiseled aqua-style divider or to created the faded line of a gradient. Examples 2 and 3 use background gradients in webkit and mozilla. All versions of IE just show the solid rule.

Normal

Demo


HTML & CSS

<hr />


hr {
  background: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: 1px;
  margin: 0 0 1.4em;
  border: none;
}

With Faded Edges

Demo


HTML & CSS

<hr class=“faded” />


hr.faded {
  clear: both;
  float: none;
  width: 100%;
  height: 1px;
  margin: 1.4em 0;
  border: none;
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(221,221,221)),
      color-stop(0.9, rgb(221,221,221)),
      color-stop(1, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(221,221,221) 10%,
      rgb(221,221,221) 90%,
      rgb(255,255,255) 100%
  );
}

Carved

Demo


HTML & CSS

<hr class=“carved” />


hr.carved {
  clear: both;
  float: none;
  width: 100%;
  height: 2px;
  margin: 1.4em 0;
  border: none;
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.5, rgb(221,221,221)),
      color-stop(0.5, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      center top,
      rgb(221,221,221) 50%,
      rgb(255,255,255) 50%
  );
}

Edistorm

Edistorm looks like an interesting tool for collaborative brainstorming. Group brainstorming sticky note boards (storms) can be set up with a background template, e.g. 5 up, SWOT, venn diagrams, etc. You place colored sticky notes with text, organize however you want, you can add +1 votes using a voting system, and add comments to notes. There’s some kind of recomendations feature that will suggest new topics, which I guess might only work well with certain content types.

You can export a report that shows the stickies added and their votes and comments in a nicely laid out PDF or as an Excel doc. You can also export the laid out sticky note workspace as a PDF graphic. An iPhone app gives you mobile access to your storms.

Pretty sweet. Looks like public storms are free for now. I'm liking it.

http://www.edistorm.com/

UX Stickynotes

I’ve had a UX Stickynotes pad near me for a few weeks to play with. I’m kind of a sticky notes nerd. I mostly like to place them in sketchbooks to mark and annotate, but also like them for brainstorming and doing info organization exercises. Sticky notes for UI sketches and sketchboards makes sense.

The sticky notes are A5 sized, with light non-photo blue dot grid, and the browser version has 960gs markers. The adhesive is on the right side, which I didn't quite like at first, thinking it made more sense to put the adhesive on the top for white board/wall use. However, I ended up sticking them on the side of my MacBook Air while I was wireframing from a sketch, so that turned out to be pretty cool.

They have browser and iPhone sticky pads, and free templates as well. They ship from the UK.

http://www.uxstickynotes.com/

Cohdoo Highlight: Voice recording iPhone app

Cohdoo, the company that makes the iPhone whiteboard magnets that I’ve posted about have just released Highlight a nice iPhone app for voice recordings. It’s aimed at helping user researchers record interviews, and is just as useful for recording meetings and conference talks.

To start new sessions, press the New Recording button, and during the recording you can tap the huge green Mark Highlight button, which I could see being useful for marking new questions during interviews, or marking sections of conference talks. Afterwards during playback, you can press a marker to jump to it, and swipe a marker to label it. You can then sync and access your recordings via iTunes, or email the audio recordings. Really nice app. I can see myself using this for more than just user research recordings.

More info in the App Store or on the Highlight site.

http://cohdoo.com/highlight.php