Memorable Interaction

close

Once a year I’m invited by Lukas to give a lecture and workshop at Pellico5. This group of independent professionals across many fields including design, strategy, animation and User Experience, is one

of the solid groups which was established when we left the University. Thanks to Lukas we have the opportunity to share our knowledge and enthusiasm to design. I can proudly say as I said in one of my lecture at R/GA “these guys are who really cares”. Cares what is happening in our industry, in professional field as well as in design general. Cares if the work is done properly and cares where and how they work can help to people understand the power of the design in daily bases.

As many times we argued and tried to find the right way how to catch the idea. Many times we inspire each other in our personal even commercial projects. This time my lecture was focused on “Memorable Interaction” and how the interaction will affect our future in general.

Memorable Interaction

What is the interaction? I last couple of years internet and web design become more like psychology testament about – how we behave on-line and why we do it – do you agree! Our habits in terms of click and touch rapidly change our focus and industry itself. Even more our expectation how the content can be seen – rapidly generate new ideas which opening new opportunities not only for designers but also for OS developers. Trent walton in one of his posts talk aboutstop designing roll over position and primary focus to the CTA. In one of his other posts he also talked about multi-touch and and how the things rapidly change. So before we continue lets agree.

Let’s Agree

Real value of any interaction is not the act where you actually interact with graphic element but the fact why you interact -  the reason to get another (format of) information. This obviously changing our observation in our research and exploration. All necessary information such as requirements, technology and objectives become more focused how the actual User interact with our content. This also modify main purpose of the page.

is to communicate? interact?

Main purpose of any page is give the answer to your question. Never less guide you to the destination of your subject. More complex pages loosing in many respect the clarity of the main information that should go across. It’s not about CTA and big buttons its about why the page exist and why we generate the content for this view (scene) anyway. Many time we have been just optimizing the right mount of the content on the scene. Let’s have a look to the one real example on WDL was post about minimal design about …

Removing clutter from pages helps users focus their attention on the things that really matter. Page content, images, contact information, and the presentation hierarchy that removes gradients and web 2.0 distractions.

Let’s see how many cluttering you can find on thin page. I have found 27 beaners! Well guidance in deed.

This bring to us term “Visual Hierarchy“(very well done site about small principles which now become science) which you can search on-line. For our today presentation is not just about right elements in right proposition and right size – of course but it’s more about eye migration.

Reference: design-theorycashflow-protector

Eye Migration

We need to keep in mind when we designing more complex layout, why the User is here and what we want him to do.

Complex web app’s

Complex web applications brings another behavioural problems which we have to deal with. In general we need to be able to compare and validate what is necessary. What is functional as well as necessitous for the end user perspective. Either you will use horizontal or vertical approach for your app’s you’ll end up with many problems how to stay consistent.

I this respect is better if you change your focus to object and elements which build your app. Than you find combining these visual patterns on scene as a enormously effective way how to build your core elements on the scene. While back Paul Boag in one of his podcast refer to create your own pattern library select what you thing might work and from there utilize your pattern library. I started in 2003 and last couple of years I’m seeing real benefit of it. So if you don’t have one start right now!

UCD as a guide for your decision - I have seen many designers spending time to design something where the client doesn’t really have a clue what they trying to achieve. Elements and patterns you’ll collect will help you to focus to your design.

Workshop

After my lecture we had a small refreshing break. Discussion about practising and applying UCD in Czech is always interesting. Some of these stories getting better and better compare the time when I left Czech so I seeing more improvement than 2 or 3 years before.

Workshop start with general question - where do you see (online) publishing and consuming books in following three years? And more closely “Imagine digital education in 2015″. We create three groups where one of them was professors and two of them ware students with different access.

Professors - task was thinking about organizing, utilizing and managing course. Cross linking, collaboration and collecting information.  This group has have to find out what can be problematic in therms of content and robustness of the solution.

Student with unlimited access - have to think about how they can use data efficient way. Time line of the course and relation to all additional features such as sharing, notes, descriptions etc.

Student who has to pay - this group was focused to how they can get more information across to not pay for them.

I was so impressed – how they collaborate share and generate the ideas. How literally idea graduate and meaning of their propositions grow to final execution. On the end we had a short discussion about their thinking and applying these features in real live experience.

Thank you

Thank you all attenders for their time, passion and open mind to share the experience. Pictures from the Lecture and Workshop you find obviously under the tag Pelico5 on my @flickr.

Reference:

  1. IXDA - http://www.ixda.org
  2. Trent Walton - http://trentwalton.com/
  3. IDEO - http://vimeo.com/
  4. UIE - Visible narratives/
  5. tuts+ - Understanding visual hierarchy in web design/

Books

  1. Project-Guide-Design-Experience-Designers
  2. Mental-Models-Aligning-Strategy-Behavior/
  3. Storytelling-User-Experience-Crafting-Stories
  4. Card-Sorting-Designing-Usable-Categories
  5. Call-Action-Formulas-Improve-Results

Deck (was based on the HCI Research for RCA)

  1. Designing for Interesting Moments - By Bill Scott.
  2. Designing Rich Applications By Theresa Neil.
  3. 12 Standard Screen Patterns on Designing Web Interfaces
  4. DesignGalleRIA - A design gallery and showcase of the best Rich Internet Applications
  5. Web Form Design: Filling in the Blanks By Luke Wroblewski. Rosenfeld Media, May 2008.
  6. Prototyping: A Practitioner’s Guide By Todd Warfel. Rosenfeld Media, May 2008.
  7. The Designer’s Guide to Web Applications, Part 1:Structures and Flows By Hagan Rivers.
  8. Designing Web Interfaces: Principle and Patterns for Rich Interactions By Bill Scott and TheresaNeil. O’Reilly Media, January 2009.
  9. The Essentials of Interaction Design By Alan Cooper. Wiley, May 2007.
  10. Designing Interfaces: Patterns for Effective Interaction Design By Jenifer Tidwell. O’Reilly Media, November 2005.

If you find anything you want to share with others please place to comment. Thanks

Leave a Reply

COMMENTS

Hello there, to type your message you can use these tags:
<b> <code> <em> <i> <u> HTML links are populated automatically.