theThought's thoughts

Future of Web Design (Day 2) - Aarron Walters And Sarah Parameter

Welcome to the afternoon, lunch has been consumed (at Starbucks) and we are raring to go for the third of four sessions for the day.  In this session two very different presentations around the key concept of design (not development).

Aarron Walters – Learning to Love Humans

This presentation is by one of the founders of mailchimp (http://www.mailchimp.com) not a service I have thought of subscribing to but one that is recognised in the industry for its innovative design.  The presentation was called amusingly “Learn to Love Humans”.  It aimed to show that emotion should be a strong factor in the development of a website design.  It started with the premise that the changing nature of the internet (specifically the increasing use of social media) means that people are starting to expose themselves as human beings rather that remote non-entities and that web design should reflect that.

This was followed by an glimpse of Maslow’s Pyramid of needs which Aarron indicated could be translated into an equivalent pyramid of interface design needs.  Aarron stated that interface design needs to be functional, reliable, usable, pleasurable.  Today’s designs tend to be able to fulfil the first three of these to varying degrees but few (if any) could be described as pleasurable.  For example 37Signals designs implementations for BaseCamp are often heralded for their ease of use and functional approach to project management but they cannot be described as pleasurable.  On the other hand WuFoo (a forms creation tool) brings a colour delight to forms creation so increasing the pleasure of what is basically a database interface.

In effect Interface Design needs to incorporate the concept of personality, personality is an important part of every individual.  More importantly it is a platform for emotion and emoting is one of the first things we do when we are born.  We quickly learn that broadcasting emotion can result in the satisfaction of needs.  Interface Designs need to bathe users in emotion.

Tapbots is a company that have succeeded in this concept.  Their iphone applications are a brilliant example of bringing pleasure to non-pleasureable activities. 

Weightbot, for example, brings just the right blend of function and pleasure to the tracking of weight (an activity that usually indicates a not too positive frame of mind).  Designed on the concept of Wall-E, they combine clean, functional design with the basic features of a face to make their application more attractive, more pleasurable to Humans.

Aarron indicated that there were a number of approaches to the adding of pleasure including:

Treats – Providing mild amounts of humour within the site

Discovery – Using easter eggs to deliver additional pleasure when something good or bad happens

The main aim of this type of design can be used to overcome humans natural inclination to doubt, it can also have the additional benefit of bringing forgiveness when something goes wrong.

Overall this presentation was just what this conference needed.  An emotion response to design issues, not steeped in the technicalities of how to deliver such experiences but a real view into how designers should be thinking when building the websites of the future.

Sarah Parmenter – 10 Tips for iPhone Interface Design

Sarah is a designer focused on the field of iPod/iPhone/iPad design.  She provided 10 key thoughts crucial to successful design of an Apple App (how to get it past Apple’s approval process and into the hands of users).  Sarah brought her not inconsiderable knowledge of app design and the oddities of Apple to an audience who are probably unfamiliar with many of these issues.  Her ten thoughts focus on:

• Making a clear Development choice between App and Web App
• Clearly defining the purpose of the application from fun tool to serious entertainment
• Provide Inspiring design documents – do not just send designs by e-Mail
• Be Prepared for UX interjection – expect clients to have their own ideas
• Understand the orientation, dimension an hierarchy elements of iphone design
• Unravel Hi-Fidelity UI – know when to bring this into the discussion
• Take time to design a beautiful icon – it is the flagship of the product
• Understand the App approval process

This presentation was clearly targeting freelance designers (as opposed to developers or those of us who work for corporate). It talked about the right ways to approach pricing and hints on how to engage customers effective.  It was concise clear and great content for this type of event.

These two presentations were by far the best of the day the presenters knew their audience, pitched their content at the right level, had a clear message and brought it forth in a commanding way.  Its great to be able to attend events with this level of quality.  Long may it continue.

Future of Web Design (Day 1) - HTML 5/CSS 3 workshop

This week (17th to 19th May).  I am attending the Future of Web Design conference in London. Today was Day 1 (workshops) and consequently I attended a HTML 5/CSS 3 introductory workshop run by Molly Holzschlag a web standards advocate for Opera (www.Molly.com).

Having said that is became clear as the morning progressed that as far as HTML 5 is concerned commercial implementation of the standard is not something that should be considered right now.  Very few of these browsers have implemented some of the new capabilities and consequently there is little advantage in implementing the features let alone a lot of effort in terms of handling those browsers that do not give any support.

The morning of the workshop focused on HTML 5, the afternoon on CSS3.

HTML 5

The session started with a little scene setting.  Effectively a “Why should we be interested, what is HTML 5?” introduction.    The key justification being that today all the major browser manufacturers (Google, Microsoft, Opera, Firefox, Mozilla) have agreed to adopt HTML 5 and are currently working on their implementations.  This is the first time in the history of the Internet that all of them have made a concerted effort to agree on one standard (although their implementations of that standard are less likely to be consistent).

There seem to be five design principles behind the implementation of HTML 5:

• Backward compatibility
• Interoperability
• Clearly Defineable UserAgent Behaviour
• Improved Error Handling
• Evolve Don’t Recreate

Each of these is a challenging objective, for example backward compatability has always been a key driver for many software developments however every iteration makes this more and more difficult.  At some point the Internet is going to have to forget the past or be bogged down by it.  In terms of HTML 5 backward compatability is about equally supporting those who write in HTML 4 and those who write in xHTML 1.0 formats.  The new DOCTYPE declaration was discussed especially in terms of its simplicity.  HTML 5 has no equivalent DTD definition (due, at least partly, to the fact that the concept of DTD’s is dead) consequently the declaration is much simplified.  HTML 5.0 does not have to be a precisely formed as xHTML it was generally thought by the audience that this was not a good idea as it would lead to sloppiness (someone not closing <p> tags can get away with it).   This is no different to coding where someone can use Goto if they want (just don’t expect to get a programming job if someone notices).

The next section focused, briefly on the new elements being introduced in HTML 5 including:

• Section
• Article
• Aside
• Header
• Footer

The key objective here seems to be the removal of DIV tags that are simply sectioning out key parts of the document structure.  It was not made clear whether any of these would have any real advantage over the current use of DIV tags except clearer markup and more obvious CSS 3 synchronisation (as CSS 3 supports these element types as well).

There was also a brief mention of the other elements being looked at such as Mark, Meter, Progress, Time, Command, Datagrid and Details but as these are not yet fully defined no details were really provided.

The next section focused on the improvements to Forms.  Many of the concepts of Web 2.0 will be supported.  The autofocus and required attributes for example significantly reduce the amount of JavaScript that has to be written to deliver client side verification.  New Input types such as Range (for sliders) and search provide new ways of capturing data from the user.

The link tag has also been enhanced with new types such as icon, prefetch, archives, external and license.  The session closed around a discussion on the three most talked about new elements, those that provide embedded media without the need for a plugin.  Canvas provides a drawing palette which can be based on a combination of SVG and javascript to create a fully interactive visual experience.  Video and Audio provide broadcast components reducing the need for Flash (maybe).  The  key argument with the latter two is codec’s.  Which ones will be royalty free and therefore available in browsers?

There was also a brief mention of ARIA (accessibility for Rich Interactive Applications).  This extended only to a definition of the term and the fact it is an offshoot of WIA (Web Accessibility Initiative).

CSS 3

It would be a mistake to think that the whole of the afternoon session was dedicated to the new features of CSS 3.  In fact nearly 90 minutes was a discussion around the basic concepts of CSS including a definition of the term cascading, several discussions regarding specificity (including how to say it in German) and other general rules regarding the use of CSS.  Probably the most stressed point made during this 90 minutes is to not use the !Important facility.  It was identified that this is a hack and a poor one at that that designers should avoid using.

Once discussion did get around to CSS 3 most of the new features were very briefly discussed such as:

• The new Selectors
• Border changes including the use of images and rounded corners
• Multiple columns
• Real Font Support
• Colour control through Hue Saturation and Luminence (HSL)
• Animations
• Transparency
•  Shadows

Each point was glossed over with simple examples of most of them.

Probably the most poignant aspect of the afternoon was the constant switching between Safari, Chrome and Opera as Molly attempted to demonstrate the effects.  This really brought home the fact that no one browser has fully implemented CSS 3 as it currently stands and that the implementations are not consistent.

The session ended with a discussion regarding some of the newer concepts of CSS 3 (those that have not been implemented properly by anyone yet) these included concepts such as FlexBox (a flexible way of creating boxes of content within boxes) and some ways of creating grid structures without using tables.

Some of these latter examples showed how truly complex CSS 3 might yet become.  In its attempt to increase the presentation and dynamics of the internet it is becoming more like a programming language, unfortunately it is unwilling to be verbose so some of the codes are getting shorter and shorter (many are just two letters long).

In Summary

I have to say I was a little disappointed with today.  As a workshop I had hoped that we would go indepth regarding the attribute and reasons for using HTML 5 elements with some good examples of how they might be used.

I had hoped to be told more about how we could implement them today even though most browsers can fully support the features, how graceful degradation  and progressive enhancement could be applied to bring these new features to today’s customers.

This, sadly, was not the case.  Too much time was spent explaining principles I had hoped those in the room already new.  Yes we all learnt something but I think we could have all learnt more.  As a HTML 5/CSS 3 primer it was okay but I could have and have already got 90% of that just “Googling” on the internet.  Lets hope that the next two days brings more realism and less theory.