Touch Design Principles

Shane Morris outlined some design prinicples when designing for the Surface, but many would apply to designing for smaller touch screen devices.

• Don’t deploy a desktop application to a new device, consider the specific requirements of a touch interface
• You may be designing for more than one simultaneous user. Users may be interacting from different directions so the app should be ‘direction-less’.
• Non functional gestures need to be acknowledged. (Vapour trails have been built into the Surface platform to orient the user and show non consequential hand gestures.)
• Use large targets. Avoid traditional controls.
• Design for the super real i.e. design digital objects using real world objects as inspiration. Think about how the object  behaves in the real world, to design how the virtual object responds to touch.

Below are some amateur video clips of me and others playing around with the Microsoft Surface.

Switching it on

The Surface is not a magic table. Under that huge resistive touch screen is a machine. Weirdly, a convenient button to switch it on, located on the outside, does not seem to have been included in the design brief.

Social

People are happy to clean up the debris left by other users on the Surface, and its all part of the fun and learning.

Hold on! Those 2 demos show it working great but …

One handed, while I was holding the camera, I was having a bit more trouble than the peeps in the Lonely Planet demo. I had objects spinning out of control all over the place but it was still fun.

The point of the Lonely Planet Surface app is to load a passport with information, like photos and videos from the store, that you can look at later online. Each “passport” has a barcode type sticker so the machine can read it. Each Lonely Planet book also has a “barcode”, so as soon as you plonk it on the table it reveals relevant content.

Resistive Screen

Touch devices are either resistive or capacitive. The Surface is obviously resistive, so the pressure you apply affects the interaction as this simple Ribbons app demonstrates.

Design for the Super Real

This wine store didn’t quite work for me. It used pretty conventional controls, and I kept trying to do something with the bottles themselves. The workflow seemed kinda busted too.

But the piano app works great.

Another learning from this blog post is that videos take forever to upload on Youtube. FOREVER!

Often it is difficult for speakers to share lessons learned in work, because of client confidentiality, and because sometimes it’s not good business to give too many secrets away. To solve this dilemma Collis delivered his presentation on how to start a web business by discussing a hypothetical case study. His words of wisdom are summarised below.

How do you come up with an idea?

• Solve a problem you have yourself experienced.
• Observe and look for audience niches that experience this problem.
• Your solution should help other people make money
  • e.g. the 37 Signals Basecamp application wasn’t making money from the consumer market but became a success when it was marketed to business.
• Test your idea with research.

How do you do good business?

• Not all businesses are equal. The Envato network has dual business models of publishing and market places.
• Don’t underestimate marketing. While its essential to have a good product, it’s vital to have great marketing.
• Spread the word. Present and blog about tangential topics that appeal to people who want to use your service.
• Build your user base with free content then add paid services.

Collis was one of the highlights of weDU for me. Keep an eye out on the webDU site. They will be publishing audio of the talks in coming weeks.

In the Day 1 keynote Mike Chambers from Adobe came out at the gates in defense of Flash (hi Mr Jobs). Acknowledging how CPU intensive flash video can be he spoke of Flash performance improvements on mobile and the desktop. He also demoed the new flash touch apis on tablets, phones and larger screens. Microsoft were there and to the delight of many brought along a Microsoft Surface. It was a blast to play with. It was interesting to hear from Shane Morris about what constraints were put into the behaviour of the Surface. In his talk Shane outlined design principles with case studies of applications designed for ANZ, Lonely Planet and Cochlear. This was my highlight of the conference. Other more technical sessions that I did not attend talked more specifically about touch technologies e.g. Dmitry Baranovskiy demonstrated the gestural capability of his Raphael javascript library.

I am pretty much a wannabe geek, i.e. not very geeky, so I left the tech streams up to the developers and spent most of my time in the UX/team stream. There was a good mix in this stream of usability, design sessions, specifically design for mobile, wireframe design, and a mix of broader project sessions. These included:

• Robin Hilliard introducing a framework to define problems and come up with sound requirements
• Mathew Hodgson evangelising agile. This is a hot topic, but especially relevant to a developer audience from where the concept arose. It was helpful to see this explained through a warts and all case study; and
• Tim Buntel from Atlassian talking about managing developers.

What was great about this year’s webDU was that it was not a tutorial conference, nor were the sessions so general that you came away with nothing but a new vague idea. The sessions introduced applicable principles and approaches that rang true with real life case studies and inspirational examples.

Anyone who knows me knows I take A LOT of notes so instead of trying to summarise my favourite take outs from WebDU in one post I will try and publish a series of webDU posts over the coming days. OK. Weeks.

Until next year!

Posted via email from everyday eri

Posted via email from everyday eri

webDU logo

May 21 and 22 was the 7th webDU and my 3rd as part of the Daemon team who organise the event. WebDU is a technology conference, primarily but not solely, focused on developers. Amongst all the code and whiz bang-ery this year was an entire track dedicated to the consulting and planning side of projects: Team/UX (user experience). The room was packed for the whole two days.

As a non developer, the theme I took away from webDU 2009 was prototyping. Delivering prototypes be it a wireframe or design, that are closer to the final web page or web application.

Both Adobe and Microsoft debuted products at webDU. Steven Heintz of Adobe talked up the re-branded Flash Catalyst. Anyone familiar with the Creative Suite can now deliver interactive wireframes and designs to developers. As Steven put it in the keynote Flash Calatyst seeks to “make interaction more of a design experience“.

Shane Morris of Microsoft switched off the microphones (the recording) at the end of his talk, for the Australian debut of Sketchflow; which is all my dreams come true. It’s Visio on steroids and is more of a drawing tool where interactive elements can be produced easily. Not only does Sketchflow provide stencils for re-usable elements like controls and buttons but it lets you use and repurpose data, for instance creating different views. Information can be exported by developers for use as their sample data.

It was interesting to me that Adobe and Microsoft were both on such similar tracks. Both products get the prototype looking more like the design and both the wireframe and design behaving and functioning more like the application. Or as Steven Heintz put it “build[ing] high fidelity earlier in the process and bridging the gap between designers and developers“.

It wasn’t all new product releases though. Richard Turner Jones showed us how to use Fireworks for prototyping. He used it as a hybrid Visio/Photoshop tool. I love seeing how other people work. Richard went from sketch to wireframe, to design, to interactive prototype in an hour. He shared lots of tips and tricks. I had long forgotten Fireworks but Richard’s demo of the Pages utility in Fireworks to walk a client through each stage of the design process was compelling.

Simon Reid bought it back to the user defining user experience as a wholistic change to workflow not a redesign. He took us through his four pillars of user experience in his session “Pixel Envy: The Digital Art of Pencil and Paper” emphasizing that aesthetics should be the last step to avoid mimicry. He then spelled out his seven step design process which included people watching (contextual research) and persona development. My biggest take away from this session will be incorporating a process map to illustrate what a user is thinking at each step and not just drawing application workflows.

Since I am part of the organising team I wont speak to the atmosphere or awesomeness of the conference. I am clearly biased ;-) So I will instead leave you with the following reviews to check out more details of the event from impartial third parties.

• http://www.insideria.com/2009/05/webdu-2009-that-geeky-rock-con.html
• http://blog.magda-stremeski.com/2009/06/webdu-2009/
• http://artselearning.wordpress.com/2009/06/02/webdu-2009/
• http://portal.lacaterinca.com/w-w-webdu/
• http://www.sitepoint.com/blogs/2009/05/28/the-future-of-flash-and-the-return-of-coldfusion/
• http://www.sitepoint.com/blogs/2009/06/04/webdu-2009-how-to-be-a-rockstar-developer/
• http://dalerankine.com/index.php/2009/05/thank-you-webdu-2009/
• http://www.actionscript.org/resources/blogs/29/WebDU-2009-Day-One.html

I cannot wait until next year.