FlexManiacs - Day 2 - Mike Sundermeyer and Tom Hobbs - Adobe Experience Design

The XD Team is working with companies who want to push the envelope. Including RIAs and Mobile phone interfaces in Flash and Flex. Now working on new Flex components.

Mike and Tom outlined a typical scenario involving the development of page wireframes, then graphic design, then code in Flex or HTML. They then showed a series of new techniques and thinking that would allow much better user interfaces to be developed.

They are thinking of a new approach. A car manufacturer thinks more about a prototype and solving problems from the users point of view. Iteration is normal with car manufacture. Current applications are like early cars which were just horseless carriages and look like the applications they are replacing.

Don't design the interface, design the content.

What information do we want to know about this data? For example in a banking interface you might want to know:

• When am I going to run out of money?
• What bills are due?
• Where does my money go?

Animation is used to draw the users attention to what is changing.

Video help is context sensitive.

Amazon example

Just the electronics tab was changed to be a flex interface. Hover effects bring up controls when they are needed. Animation is used to show the user where to find things when buying things they are animated into the shopping cart.

Premier Express example

Drag and drop is used extensively. Very untypical interface where user interacts with the content.

The more features you add the more difficult it is to use software. It is important to identify the core items and do those really well and hide all the other things.

It's hard to make applications simple. It's easy to add new features.

Insurance Form example

Company was spending lots of money having people call in with insurance claims. The requirement was for a way to help user make the report.

The key is to do more where you are and only show the user what they need. Fields only appear if needed.

They provided a visual way of describing the accident. A small map od the intersection or bend where user could put icons for cars and movement to point of accident.

Make the computer think like the user rather than the user think like a computer.

The loss adjuster uses a hand held computer to see his schedule and a map of the visits required. The application allows him to take photo of damage, call the claimant, call the nearest approved garage.

Bike Race Example

GPS is used to report position of riders and show video of the race. Linked to standard Fliker RSS feed.

Key thoughts

• Focus on 80% of what user will do and spend most time on that.
• Show only tools needed for task. Do more where you are.
• Let content breath – content is the interface, chrome is just a barrier.
• Animation can be used to guide users. In TV panning is used to move from scene to another. Evokes emotion and focuses attention.
• Task based rather than tool based controls. Spend less time designing the button and more time designing what happens when the button is clicked.
• Like a house one person or team should do the design.
• If any features change the whole should be reconsidered.
• Personality and community rule. You must think about who will be using the application. Community creates better content.
• Identity and Brand matter. Personality is important. Make things people will love to use!