Category Archives: Interaction

Nov 18

Paper prototyping iPhone apps

Found link via youtube:

The process feels a little disjointed and could be smoother, but this is a common problem with paper prototyping and on the whole I think it’s a nice idea.

One concern I do have however, is how long the paper templates took to create. Surely you could put something together Axure or similar in a shorter time, and which would be more reusable than these pieces of paper…?

Feb 3

Tap is the New Click

Dan Saffer gave this fascinating presentation on the rise of touch-screen and gestural technologies at the recent IXDA conference in NYC.

Even though the technology has been around for decades, only now are we starting to see mass production and adoption of touchscreen and gestural devices for the public. Jeff Han’s influential 2006 TED demonstration of his multitouch system, followed by the launches of Nintendo’s Wii, Apple’s iPhone, and Microsoft Surface, have announced a new era of interaction design, one where gestures in space and touches on a screen will be as prominent as pointing and clicking.

But how do you create products for this new paradigm? While most of us know how to design desktop and web applications, what do you need to know to design for interactive gestures?

This introduction to designing gestural interfaces will cover the basics: usability and ergonomics; a brief history of the technology; some elemental patterns of use; prototyping and documenting; and how to communicate that a gestural interface is present to users.


NYC IxDA – Tap is the New Click – Dan Saffer from Interaction Design Association on Vimeo.

Original article: http://vimeo.com/2761844

Jan 21

Usable ‘Store Finders’

I’ve been doing some investigation into Store Finders recently and I’ve found one that is so quick, simple and easy to use that I thought I’d mention it here.

It’s for women’s fashion retailer Jane Norman, and can be accessed here:

http://www.janenorman.co.uk/pws/StoreFinder.ice?country=GB&page=Stores

The design is uncluttered and the finder guides the user towards their goal with a couple of simple clicks.

The Store Locator page in its initial state

The Store Locator page in its initial state

Choices are made using Drop-down lists, which have known usability and accessibility implications, but the implementation here seems to fit with general best practice recommendations while avoiding most of the pitfalls, such as overly long lists.

Choosing a region:

A drop-down list to choose the region you are looking for

A drop-down list to choose the region you are looking for

At this stage the region break-down seems to find the right balance between being too broad/generic and too narrow/restrictive.

Picking the store in your chosen region:

A drop-down list to choose a specific store

A drop-down list to choose a specific store

The item labels in the drop-down list are descriptive enough to give the user some meaningful options, without being too wordy.

If you were simply looking to verify a store’s general location this might be enough detail for you already.

Results page:

The Store Locator results page showing useful store information and an embedded Google map

The Store Locator results page showing useful store information and an embedded Google map

The results page contains lots of useful information:

  • full address
  • contact details
  • store opening hours
  • embedded google map

The implementation of Jane Norman’s Store Finder uses traditional form posts, which result in page refreshes after each selection, but I don’t see any reason why it couldn’t all be done inline using a bit of JavaScript (where available) for an even smoother experience, although this may have accessibility implications.

Additionally, it would also be nice if the results page could also offer a ‘permalink‘, so it can be easily bookmarked for later reference.

Using the feature feels much more friendly than asking the user to enter a postcode, which is the other commonly used technique.

Further reading

Jan 13

10 Useful Web Application Interface Techniques

There’s a great article from Smashing Magazine today which outlines 10 simple interface ideas which contribute hugely to a good user experience. A few of them are common in many well-designed web applications, but there’s a couple of really good ideas in there that perhaps aren’t quite so well known.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

Summary

1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video

The article itself goes into much more detail about each point, with useful illustrations and screen-shots of these techniques in practice.

Sample screen-shots

Hide or conceal advanced functionality
Hide or conceal advanced functionality

Using empty states to motivate users and animate actions
Using empty states to motivate users and animate actions

More emphasis on key functions
More emphasis on key functions

Original article: http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

Dec 18

Flash Catalyst – new wireframing tool from Adobe

Now this is interesting…

Flash Catalyst (Fc) is a new product from Adobe. It’s still in early beta at the moment but its generating a bit of a buzz.

It aims to be an interactive wireframing and prototyping tool, along the same lines as Axure, with a strong designer/developer workflow built in.

Fc produces swf files instead of HTML files and can either be used to create wireframes from scratch or can import ‘well-formed’ Adobe Photoshop and Illustrator documents, converting their layers into interactive elements within your prototype (it can also export Adobe Flex prototypes if required…)

http://labs.adobe.com/technologies/flashcatalyst/

This is a great demonstration/presentation given at the recent ADOBE MAX 2008 conference:

(Source: http://tv.adobe.com/#vi+f15384v1003 )

I’ll certainly be keeping my eyes peeled for a public beta in the near future!