May 27th, 2011
A few weeks ago, I started a personal pattern project which I’m finding useful and thought to share as a potential design activity. After grabbing a blank notebook, I basically began sketching out and writing down various examples of interesting interactions I find all over the web. The idea isn’t completely new as design and interface patterns have been around us for quite a while now. In fact, some really awesome collections have sprung up that are great for designing interactions and interfaces. If you’re seeking inspiration from these publicly available pattern libraries some existing resources include:
- UI Patterns
- Pattern Tap
- Little Big Details
- Designing Web Interfaces: Principles and Patterns for Rich Interactions (Book)
- Welie.com – Patterns in Interaction Design
By personalizing these patterns however, there could be a few added benefits beyond just observing other people’s work passively. For one, I’m beginning to notice that after drawing out some selected examples it becomes easier to internalize and remember them later on in the future. When working on projects, these sketched patterns tend to emerge from memory more vividly than ones that were just seen somewhere. Secondly, when recording these patterns personally it is also possible to gain another chance at practising and evolving your own personal sketching style. Patterns are a great source of more complex user-interface interactions which may push the boundaries of your visual communication and sketching abilities.
There is no set standard on how to record them. Some things which I thought might be useful to include were elements such as: a title, a few screens (tied together with user actions), a simple description, a date, and an example URL. But really, these being personal, it’s all up to you to come up with your own style. So go ahead and grab that fresh notebook …
Credits: Jakub Linowski
May 19th, 2011
App Sketcher is a lightweight prototyping tool for developing interactive HTML prototypes or wireframes. The software installs as a standalone Adobe AIR application and therefore may run on a number of platforms. There is a left hand pane which contains draggable and editable user interface components – perhaps one the most common features shared across some other tools out there. Unlike most other tools though, App Sketcher uses real web controls such as HTML elements, jQuery components and Google Maps in this pane.
App Sketcher’s end deliverable is a fully interactive HTML prototype. Clicking on the prominent “Run in Browser” button results in a seamless transition into the browser window where the prototype can be experienced (or shared with someone else without the need for any additional plugins).
One small detail which caught my attention is how interactivity is discoverable in the final prototypes. App Sketcher does this by showing a tiny lightning icon wherever an action is assigned to. This small but useful feature might help people notice and differentiate what is actually clickable from what is not.
Other features that are also present include such things as: multi-page support, CSS themes, object alignment, and multi level undos.
Download and try out the software.
Credits: Feng Chen
April 26th, 2011
PowerMockup is a simple UI design plugin for Microsoft PowerPoint that makes it easy to create low fidelity wireframes. Perhaps one of its core strengths is that it has a low barrier to entry, since many people out there already have access to PowerPoint. The plugin speeds up the design process by letting users insert fully editable UI elements (containers, navigation items, icons, and text elements) onto the canvas.
The merits of PowerPoint as a prototyping tool have been discussed in the past and are definitely worth to consider. For one, PowerPoint supports basic interactivity and nonlinear page linking. Personally however, I still like to think of a the page-by-page linear narrative nature of PowerPoint as an equally strong alternative presentation style to interactive prototypes. With a defined beginning and an end, a PowerPoint deck ensures that viewers don’t have to discover interactivity, but instead can be guided across flows.
Would I personally use this tool as an interaction/interface designer? I’m not sure. I’ve come to love Illustrator, endless canvases, and free-form electronic sketching as a technique. So moving away from that style of working would require something more than a set of pre-canned elements. I’d still recommend it to others on a more multidisciplinary team – especially if there were people with less of a design background, but still a desire to express their ideas quickly.
Overall, a great little product. Thanks Andreas!
Credits: Andreas Wulf
April 15th, 2011
I’ve been thinking about ways to communicate how a user interface scales over time as the amount of information it needs to support varies. For example, sometimes the UI has to support multiple cases ranging from no results, to just a few results, to thousands of results. A good interface designer would probably think this through and come up with a UI that fulfills all of the relevant cases. For this, I began exploring a couple of visual language ideas to help myself and others who would like to tackle UI scaling. Here are some open and experimental thoughts:
A) Scale Marks. These are just floating reminder notes alongside a screen with a range of information that ought to be supported. Sometimes it’s easy to forget (or not know) how much data a UI really needs to support and these could be used as small self-targeted tests of sorts.
B) Scale Sets. This is a grouping of all the multiple UI states for those times when we actually want to draw out all of the relevant state ranges.
C) Spatial Scales. When there is more information, perhaps we might wish to communicate a maximum size of an element (max width / max height).
These are just a couple of thoughts which some day I might bring into the next release of the ISN. If you have other ideas, please share. :) Hope it’s useful.
Credits: Jakub Linowski
March 25th, 2011
Do you use Omnigraffle and annotate your work with little, round and numbered circles? Meredith just recently created a bunch of scripts which help with these dot annotations. The scripts automatically generate the numbers and thus make it easier to add and remove notes without having to readjust the numbering all the time on all remaining dots. Looks useful. Thanks!
In her own words:
The problem is that it’s not uncommon for me to have 20-30 dots on a single wireframe. What happens if I need a new “1″? Without a script, it means creating a new “1″ dot, then changing the old “1″ to “2″, the old “2″ to “3″, etc. I don’t have time for that!
Credits: Meredith Noble (Usability Matters)
March 18th, 2011
Here comes another mobile template for Fireworks for mocking up Blackberry screens. It has been released publicly sometime a month ago by UNITiD – a small company from the Netherlands. Enjoy if it’s useful.
In their own words:
For all interaction designers who will be designing apps for the BlackBerry platform, we’d like to share our Fireworks template. The template is made for BlackBerry devices with resolution 640×480 but as all UI elements are vector images they can easily be resized.
March 1st, 2011
A persona template has just been shared by the folks over at Orange Bus. Perhaps what might be interesting about this particular one is that it invites quick and dirty hand drawing or writing. A lot of the other personas out there, from what I’ve seen in the past, look pretty well polished. This one on the other hand is a lot more doodle compatible. It comes with fill in the blank spaces for basic naming, portrait, a back story, motivations, frustrations, their ideal experience, and a summary quote. Nice!
Credits: Joanne Richardson
February 23rd, 2011
The guys over at nForm recently shared their home brewed sketching table composed of IKEA bits and pieces. It has the ability to store past sketches in a number of compartments right underneath, and an awesome kraft paper roller on top (possibly for saving large canvases of related sketches). More importantly, it looks like it’s inviting collaboration as Gene Smith suggests:
The total cost was about $500, and we’re seeing two benefits: it’s much easier for us to incorporate sketching into our daily workflow, and we’re having lots of quick feedback sessions since the table makes it easy for us to share and sketch ideas.
Thanks for sharing.
February 7th, 2011
Tiggr has recently surfaced as an additional tool to choose from for people interested in building interactive UI prototypes. It is currently in beta phase and is being developed by a team over at Exadel. It comes loaded with a set of typical features you would expect from an online prototyping tool. Among these there are: a snapping grid to place work on, multiple project/screen support, and the option to drag and drop existing controls. At a high level, controls here have been organized into two sets belonging to web based and mobile ones. The mobile components are based on the jQuery Mobile framework (pretty cool?). And yes, the tool also allows you to link up pages in order to inject a greater degree of interactivity in the preview mode.
Tiggr prototypes are also very easily shared with a team. Since the tool is hosted online, when previewing the prototype in a browser, the link can simply be sent off to others for review. With a comment and chat system in place, the tool invites users to provide feedback. Additionally, the prototype can also be exported as a standalone HTML bundle that can further be worked on locally and separately from the web based interface.
As far as I know today, these guys will always have a free version and there might be some paid plans in the future. I believe they are also planning to extend the components library and provide more ready to use elements.
Jump in and give it a try to see if it’s for you.
February 2nd, 2011
Adding this iPad Omnigraffle Stencil to the list for all those MAC users out there (thanks Ivana for finding it). The set looks pretty decent with a great deal of popovers, buttons, bars, icons, keyboards, alerts, and so on. As an added bonus the set also comes with a few blank and printable PDF sketchsheets – handy for all those times when you don’t feel like drawing out hundreds of screen outlines over and over again. Enjoy.