Etech : Designing the Next Generation of Web Apps

Here we go for Etech 2006 withe the first session

We start off with a what they do, one is with Google (is anyone not going there lately) and then we move to a hands up.
  • Web designers 1
  • Technical – lots
  • Marketing – a few
  • All of the above – a few laughs
First geek joke  – ” I don’t even know what Web2.0 means”
We go into a “what does Web2.0” mean, what is the definition, lumping technologies together?
Boom and bust comes next and we get a disection of the tulipmania, in fact its a breakdown of something getting very popular and the market grows huge and eventually (and inevitably) the market collapses, but it does leave one or more key new features or innovations in it’s wake
In the row in front one guy is on his Yahoo! mail, the next is scrolling his RSS feeds through Google, another on Google mail but some evidence of Blogger and Wordpad around too
So how do we effectively use all the Web2.0 knowledge and memes using a framework developed called “The Elements” broken down as: “Surface, Skeleton, Structure, Scope, Strategy” – find the material here
He runs through the elements that all make some sense, similar to the Carson Workshop, as in make sure you know what you are trying to do, who you are trying to do it for and why in a nutshell
  • Users see web as an information source
  • Developers see it as an application
Now break down the five elements of the Framework against these two definations
Strategy
User needs, what the site must do
Site objectives, what the site must do
Scope
Functional Spec
Content Requirements
Skeleton
Information design
Interface design
Navigation design
Surface
Visual Design (usually the thing a user thinks of when you say “web”)
being Orange branded no need to stress the need for good look and feel here!
They take us through taking a pure set of data and making it a good look&feel, some funny examples from USA Today and the Onion, converted – preaching?
He now claims that designers are now stepping back from being in control and letting the users be in control of their data to allow them to do what they want to do, very true
Interesting set about an experiment run to check how users feel about trust and website design, they showed frontpage screenshots only for 1/20th of a second, themes that surfaced was:
If the site looked good they will persevere with it no matter how bad it is
If it looks bad then no matter how good it is they will drop it
Check out Don Norman and emotional design
B.J. Fogg – pervasive technology (creator of YackPack)
People are now treating technology/websites like they treat people, i.e. on an emotional relationship level, having an abusive relationship with a website (our corporate email for instance!)
James now tells us how AJAX came about and what an interesting year he has had, we start with what is Asynchronous interaction which is the new norm versus the ‘old’ synchronous
Bruce Sterling quoted “Roller blades for the Web” after reading his AJAX article (the Java engine is the wheels – get it) but roller blades aren’t the safest thing in the world, you have to learn how to use them effectively and safely !
He predicts we will see some very bad implementations or designs on AJAX this year.
Desktop Responsiveness – Web simplicity
What does it all come down to – interaction design – so that’s why we have them!
websites that get attention have good interaction design…..
Browser-native technologies
no compromises anymore, if you want a rich interaction you always had to compromise (IE6 on Windows with latest Flash), not anymore…
  • Incremental changes are possible now – not like having to port an entire app across
  • View source – the biggest advance in web design as anyone can see anyone else’s work and copy/modify/remix
  • why now – beneficiaries (we are) of the browser wars, the rise of scripting languages which are now getting some industrial backing
    • PHP
    • Python
    • Perl
  • Google have pushed with Gmail and Google maps to the point where people to question what they can do with the web? Gmail re-opened a dead category and made others (Y!) to look again at their product portfolio and see where their market share would be affected by new innovation
  • who benefits – first mover advantage is huge in this space

One question from the crowd brings a good answer “What makes this different from the Netscape days”, Microsoft is now behaving differently, they are adopting standards or at least being in invovled now rather than doing their own thing, plus there is now a much larger set of developers out there now. Also where there used to be a requirement to support multiple versions or not everyone and that this negatively affects the business case !!

What’s happening with Mobiles someone asks, we get the usual story of carriers being bad, web is good, US is a few years behind in the mobile world – all crap in my opinion of course

Interaction Design

Discoverability – make finding stuff easy – pages dont go away anymore they just update so the back button may change for example?

Does an interface ‘get out of the way’ and favour mental efficiency ?

Some homepage examples and how they miss this, new W2.0 apps are delivering a clean and simple message

Recoverability – actions should be without cost (we digress to a conversation on how broken the Patent system is and how it doesn’t really fit with W2.0 apps)

Are actions cheap enough – make an interaction come with zero or no consequence of doing something wrong

BANG – the power goes out on the presentation stand so we jump to “any questions” to fill while the techie runs about trying to figure it out

we move into a lengthy chat about calendar apps, seemed mundane at first but the interesting part is that what one person wants from an interface is different from someone else – are you sensitive to price, times, dates etc etc

Kayak flight search engine is a W2.0 example of putting all the above into effect, especially when you worry about clicking a link and getting lost or losing data – no penalty of navigation

several examples of good and bad interaction designs

One of the best examples is iFilm which as you fill in fields to register it checks with the server and dynamically tells you your desired username is taken or not, password errors etc

The user needs to know the consequence of an action, what will happen next, what if something goes wrong

The First Impression

Getting a good impression over in 2 seconds, as in what is this site I just landed on, what is the value of doing something at this site and finally what should the user do next?

Blogger case example given. from most powerful, overly techie site to a simple and easy makeover

Feedback

older style tech gives you a new page that tells you to wait while it does something and users are very familiar with it, the problem now is that when AJAX does something a user can’t see that something has happened and starts to get worried that anything is happening , one example is that an autosave enabled page was given a manual ‘save’ button to make the user feel in control, however the button did nothing.

Notes

  • the presenters both feel that ‘we’ are not ready for drag n drop yet
  • we now have to worry about ‘back buttons’ and sending URL (the page will be different to someone else)
  • Flash objects in an AJAX page give excellent results, for example when something in AJAX is too hard
  • Stop thinking about where to file something but more about what you were thinking/doing at the time

Closing Thoughts

Narrow down what you are trying to do rather than trying to be all things to all people

  • old platforms
  • new platform
  • participation

Nothing overly new but another good reinforcement of the principles that are going into our project (hopefully), good speakers and interesting examples given

Presentations can be found here and here

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s