This document provides a summary of a presentation on cognitive psychology and its applications to web development. The presentation covers several key areas: - Cognitive psychology and how it studies internal mental processes like memory, problem solving, and language processing. - Several cognitive psychology concepts are discussed that are relevant to web design, including schemas, affordances, cognitive dissonance, flow, reinforcement, attention, and collective intelligence. - Examples of how to apply these concepts are given, such as designing for gradual change to match users' schemas, using common conventions to leverage affordances, and managing attention by allowing users to "mute" updates. - An iterative development process is recommended to continually adapt designs based on user feedback

1. Website
Psychology
Jedi mind tricks 101
Gavin Bell
BarcampLondon3 - 24-25th November 2007
1
Iʼm Gavin Bell
I design social software at Nature, the scientific publisher,
Nature is one of the pre-eminent science journals in the world
my role is part architect / part interaction designer / part geek
Iʼll reference people and sites a lot in this talk, not to name drop
but to give you a sense of what to follow up on,
Iʼll post all the references to del.icio.us with the slides

2. Psychoanalysis
Psychiatry
2
Ok, you are all thinking about couches and mafia films
that is psychoanalysis
or prosac and loony people
Well that is Psychiatry, not psychology
if youʼre looking for star wars, sorry that was a ruse

3. Cognitive
Psychology
3
Cognitive = thinking, Psychology = study of the mind
The process of understanding and processing information
internal mental processes such as problem solving, memory, and language
http://en.wikipedia.org/wiki/Cognitive_psychology
The field is 40 years old
Cognitive Psychology: A Student's Handbook (5th Edition): A Student's Handbook
(Paperback)
by Michael W. Eysenck (Author), Mark T. Keane (Author)
Iʼm going to overview three core areas of psychology which are relevant to the web schema theory, flow and reinforcement and touch on several
others.
We are all systems of human behaviour
we make decisions based on the information we extract from the radiation bouncing around this room
we understand other people on the basis of this processing,
we form social relations on the basis of these descions
Kathy Sierra on creating passionate users
http://headrush.typepad.com/creating_passionate_users/2006/04/cognitive_seduc.html
Josh Porter has a great talk on social psychology
http://bokardo.com/archives/psychology-of-social-design-talk/
Andy Rutledge has a great essay on colour and visual design psychology
http://www.andyrutledge.com/designpsych.php
why is this useful?
shoulders of others via many years of research
provides a basis upon which to model human behaviour,
gives a framework for managing the design process
reduces complexity and expectations,
so lets get started

4. Schema
4
A schema is a model of understanding of the world
It helps us manage expectations of the world
eg a restaurant schema
cutlery plates waiters menu food
however some restaurants serve different types of food so we have some ability to vary
chopsticks rather than knife and fork still works as everything else is present
barlett schema and correction we ignore the things which donʼt fit in
teddy bear with missing leg is still a teddy bear
http://www2.qeliz.ac.uk/psychology/Barlett1932.htm
take away is not a restaurant
or if we went to a restaurant and they didnʼt serve food -
we might decide it wasnʼt a restaurant maybe that is a bar or a coffee shop

5. Congruence
5
agreement with schema that it meets our expectations
we eat in a restaurant and we expect it to have a menu
we look at the web on a browser and expect there to be pages defined by urls
situations of schema incongruence are uncomfortable
eg flash websites - no urls - this is why people donʼt like flash sites (well one reason)
restaurants with no food
petrol stations with no petrol would be odd and are very challenging to us when they occur, eg the 2000 petrol disputes in Northern England http://
news.bbc.co.uk/1/hi/uk/920527.stm
they can be used in humour the pop gun bang banner

6. Adaptation
6
schemas are not set in stone, they adapt according to experience
We are all now comfortable with the idea that we can browse the web on a phone.
We can take gradual changes in our schemas, too fast or too big a change will feel incongruent.
society takes time to adapt too,
jet packs might take a while to fit into our lives.
too fast a change and people panic, eg the petrol crisis

7. Web
Development
7
what does schema theory tell us about how we approach web development
two things
Gradual change is better as it lets our users adapt their schemas to fit the new world
iterative development,
not large scale changes to site structure, navigation or layout. Notice how “static” google and apple.com are vs say IBM recently
Schemas come into our world as mental models,
Secondly we need to design our products to support existing mental models we have of the everyday world
so we get shopping cart and filing systems and message boards
Social software is a good example of schema change
the church notice board or newsagents window is a long way from punBB, but the underlying traits are still there
the concept of a bulletin board is based on these notices in the window
we have added to the concept with replies etc
yet we still know what is happening
Even our language has shifting to the more modern usage over the past 15 years
bulletin board for most people no longer means the physical board

8. Affordances
8
Gibson, J. J. (1979). The Ecological Approach to Visual Perception
http://en.wikipedia.org/wiki/Affordance
He defined affordances as all quot;action possibilitiesquot; latent in the environment, objectively measurable and independent of the individual's
ability to recognize them,
they are perceived relationships, so not quite the same as schemas
a door affords an opening, a pit glass holding, a chair sitting.
computers in general only offer perceived affordance, though the iPhone is changing that slightly
useful in terms of visual metaphor
use common conventions, we have a history of usage with these items, cf a basket and a bin similar function, different representations
however they are contextually bound the basket vs bin metaphor see later
words and images are better than images alone, the words confirm and strengthen the message
be coherent in their usage, people should be able to take something learned in one place an reuse it elsewhere on your site.
eg the plus symbol adds it to a shopping basket,
Then donʼt use the same metaphor to mean “give me a bigger image”

9. Cognitive
Dissonance
9
another way of describing incongruent events
in general we misuse this term Wikipedia defines it as
Cognitive dissonance is a psychological term describing the uncomfortable tension that may result from having two conflicting
thoughts at the same time, or from engaging in behavior that conflicts with one's beliefs.
http://en.wikipedia.org/wiki/Cognitive_dissonance
It is frequently mentioned in connection with the situation where one moves from one site to another
the idea of always being on the same site is I think much less true that it was, it is one of the schemas which is adapting
We are much more expecting that links can take us off site, another impact that blogs have had on the web

10. Consistent or
Coherent
10
A good debate can be had about the relative merits of one vs the other.
I would argue it is impossible to be both coherent and always consistent
consistency is rule following, weʼve always done it that way
coherency values context more and through following this you may end

11. Flow
11
Immensely enjoyable state of being fully immersed in what he or she is
doing,
“ energized focus, full involvement, and success in the process of the
activity.”
Proposed by psychologist Mihaly Csikszentmihalyi, . Chicksent-me-
hiee
came from interview lots of climbers etc, then generalised by further

12. Challenge
12
So flow is important to us, we really value it
One of the core components of flow is that there is a degree of difficulty.
skill matches challenge level
If you play a game against people who are a lot better than you, it isnʼt much fun, as you get beaten all the time.
However if you play against people who are a bit better then it is very satisfying you get the sensation of flow.
Looking at how we plan and build websites, we donʼt really take this into account
One of the core ambitions we have is to make things easy, are we right?
Probably, but we can make things easy to use, but not imply a lack of intellectual effort.
Krug is both wrong and right, donʼt make me think how to use your site,
but do make me think when Iʼm using it.
eg the game freerice.com it is sticky (sorry) because it engages you cognitively and encourages flow

13. Curiosity
13
Following and making connections is one way to engender flow.
People enjoy the process of discovery
tags on flickr, upcoming and delicious
person to topic and looping back again, following people places and themes
the joy of following your nose and exploring

14. Pivots
14
Once you start to follow your nose you end up with pivots
you look at a friendʼs recent picture, notice the place is familar, follow the tag to other pictures of the same place, find nearby places and friends
from that city.
location to people to photos to tags, we are moving through different types of object.
This polymorphism which we get from the use of tags can generate great flow if properly enabled as navigation
Context is important, tags come from people, so the meaning is one they have supplied, we need to respect that.
eg the flickr photos tagged with this tag from this person or from everyone.
hence tag clusters to disambiguate meaning from the personal to the general
weʼve been exploring the tags on Nature Network allowing scientists to use tags to follow conversations inside message boards, but Iʼll return to
that later. tagging conversations inside a message forum creates a sub forum inside the parent
a Physics forum with an optics tagged topic creates an optics subforum of the physics forum, but you can pivot away to show the optics tagged
topics in all forums.
Thomas Van Der Wal
http://www.vanderwal.net/random/entrysel.php?blog=1668

15. Reinforcement
15
back to some basic psychology
Why do we carry on doing some things very frequently
and give up doing others
It depends on how we are reinforced for what we do

16. Operant
Conditioning
16
BF Skinner ran a series of experiments
http://en.wikipedia.org/wiki/B._F._Skinner
rats and bars to press for food.
comparing always giving a pellet of food in exchange for pressing a bar
vs
giving it on a regular schedule, say evey 5 presses
vs
Give them food randomly
In the random condition they will press the bar a lot more than often during the training
once the training is over in the random condition they press the bar for much longer
this is about expectation, the rat is never sure if the next press of the bar will produce a pellet of food
remind you of anything?
the web, email and RSS in fact intermittent reinforcement
Where is the new information?
we never know when there is an update so we keep checking and checking.

17. Social
Software
17
Social software exhibits the same properties as email with an intermittent reinforcement schedule
checking facebook or flickr or twitter to see who has updated
usually there is some sort of update, but is it new content from others or content directed at us.
We get a stronger reward from the content aimed at us
most of us have broken Dunbarʼs 150 limit, the predicted maximum number of people we can socialise with comfortably based on the size of our
brains.
http://en.wikipedia.org/wiki/Dunbar's_number
However some of the updates are less satisfying, as they come from people we are less close to, or those we feel “obligated” to follow
friends vs contacts
we even provide lossy updates, the deniability of not receiving every update is important, it aides social relationships and stops us drowning in
information.
So we are very prone to wanting more from these kinds of systems, so we need to factor this addiction into our designs so that we do not create an
unsatisfactory experience for them, unsatisfied desire is not healthy

18. Attention
18
managing attention is one way of looking at controlling this latent desire
we have a finite amount of time in the world and a finite capacity for attention (classic research Donald Broadbent 1958)
CPA and Linda Stone
http://itc.conversationsnetwork.org/shows/detail739.html
modern life consists of multiple projects and multiple competing demands on our time
anywhere from three - a dozen projects etc
generally not a bad thing, but we need to be able to switch off
sometimes we need to be able to focus, hence the rise in GTD like tools
BUT we should enable this in our software, the ability to “mute” some people is helpful.
weʼre missing an option to say, I still like you, but Iʼm kind of busy
we have contact and friend, but no “mute”
I like the flickr 1 or 5 pictures at a time and friends vs contacts
dailing down the number of people and the amount of content is socially respectful,
Essentially these are filters and aggregators on the stream of content we are all making.
so how are we making use of this aggregation?

19. Collective
Intelligence
19
the essence of a web 2 app these days, Toby Segaranʼs book is excellent
http://www.oreilly.com/catalog/9780596529321/
A good exploration of machine learning, which is an aspect of AI, a close cousin of cognitive psychology
cloud tags came and went, more or less.
they where an interesting snapshot on some data, but as time progressed we realised that they become a list of the same static big words.
I think time is an essential / important factor in these tools, change is important, just like in a roller coaster, it is the change in speed which is exciting
not the overall speed.
So when making visualisations respect the schemas you already are using, provide your users with tools to explore the space and think about how
they change over time. Stamen do a lot of great work in this area
which is a good juncture to move on to the next section of the talk.

20. Waterfalls &
Washing
Machines
20
When we set out to make a new website we have a huge range of approaches we can take
the basic pattern is shoot for v1, drop some stuff on the way and then launch and manage the feature list
Leisa Reichelt gave an excellent talk on combining UCD and Agile methodologies
http://www.disambiguity.com/waterfall-bad-washing-machine-good-ia-summit-07-slides/
These can seem in oppostition to one another.
Agile really likes solid month long blocks of coding
Having a bunch of user centred design mucks this up a bit
Leisa proposes the model of a washing machine rather than the waterfall to describe the process
lots of interation as the cycle iterate, design, development and product working together, rather than handing over
I think the best teams probably already work like this,
but you still end up with the feature list to manage which can be a problem, so lets step back a bit

21. Vision
21
What gets you to launch something
hopefully passion and vision
President Kennedy had this in spades
“Weʼll put a man on the moon before the end of this decade”
“Doing it because it is hard, not because it is easy”
Fantastic vision
Easy to figure out if your project met the “will this put a man on the moon” critieria
Makes saying no easier too
BUT once they got there there was no v2
Apollo 15 did drive the first lunar buggy the day I was born, but I think that was coincidence...
http://www.historylink.org/essays/output.cfm?file_id=1505
So vision is great at getting you to launch, but like everything in a project it needs to be reviewed
you need to hold on to it and stick to it, we are building X, it should be clear and unambiguous
but like the schemas it needs to evolve to fit the new context
Launching puts new stresses on your project. It is now most of all that you need to be closest to your users

22. W words
who where why what when
22
so what are your audience asking
whoʼs runing this thing
what does this offer me
why should I stick around
what can I do next
are my friends using it
how do I signup
not focusing on features, your newly signed up people are in general not asking for a whole bunch of new things - yet
Look at your site in terms of complete actions.
As sites become applications flow becomes even more important
websites only form part of the social interactions between people,
these interactions do NOT start and end at the edges of your site.
They donʼt even start and end at the web.
This is a bigger sweep of these are not just the users of your site.
Your documentation style needs to reflect the interconnectedness of the site.
So that a small change in one section doesnʼt force an incongruous schema change elsewhere or just broken tools

23. Recipes
23
It is a bit like cooking
If you follow the feature approach, which it is easy to get involved in then you read line by line
Proper cooks read the recipe twice, they donʼt cook it line by line
Respect for the context of action is vital
Or if you like carpentry measure twice, cut once
You can of course reduce down to line by line afterwards, but only when you've understood the context
blend the cream with the eggs means something quite different if you were meant to have separated the whites from the yolks first.

24. Verbs
24
One technique we have been exploring is a high level task capture approach, a task analysis
What can the user do - what are the verbs which define there actions.
not at the level of the controller or function, but at a higher level.
tracking these at a high level will help you see when you are changing the context
This came from working on a scrum driven project, with a long product back log and various team changes.
How do you communicate the essence of what is going on on the site so that as new team members join they can make the right decisions
intuitively.
they missed out on all the decision process at the beginning.
modelling at the level of the verbs gets closer to the schemas that the people using the site have.
However different people will have different models for the same sections depending on role and confidence
Donʼt dismiss this, but use it to try to get people up the ladder to confident quickly.
this is a design process, we are creating and understanding experiences

25. I hate “design”
the word
25
Well I hate the word, it is so over used describing any non-verbal creative process
interaction design
visual design
graphic design
experience design
api design even
interior design
At least typographers and architects know what they are
however like user I think weʼre stuck with it.
NOTE this is humour =)

26. Experience
Design
26
(slight return now)
All this focus on high level product design comes from looking highly successful products
why does the Renault Scenic sell so well great car defined a genre, continues to sell well, the design understands family needs.
why is the iPod right?
experience not data or features - James Jesse Garret
understanding the context of usage
“ Steve Jobs - Innovation is not about saying yes to everything. It’s about saying NO to all but the most crucial
features.quot;
from http://www.oreillynet.com/onlamp/blog/2004/08/say_no_by_default.html
experience is the product, but we get lost in adding features. It
is seductive, our users ask for x and y, we need a, b and c for
this business or group
These complicate the schemas of our users and can interrupt
their potential for flow.

27. Experience
Arcs
27
When we make a site we commonly start with the signup process
We often fail to explore the whole life cycle of our users from unawareness of need through using our site to no longer using it and long gone.
Various product designers have tried to capture the entire process from the point at which the person is unaware of the need for your service.
Adam Greenfield wrote up a fascinating study on the strengths and weaknesses of this approach
http://speedbird.wordpress.com/2007/06/22/on-the-ground-running-lessons-from-experience-design/
essentially it is a strong concept, but you cannot control everything, breakdowns in customer service marr the experience
The Acela express between Boston and New York and the now shoddy end points in the stations
Puma Trainaway the running shoes in the W (unable to get the running guides / no awareness of the scheme even
If you try to manage the entire lifecycle to your tightly defined model then it will fail. Customer support along the entire chain is very hard to achieve
well. The further from your core product, then the less incentive these people have to support your vision of how the world should operate.
however I think it is a strong concept for websites, as long as we can figure out the right relationships between us and our customers
if we understand the whole schema driven life cycle then perhaps we can make the smallest useful product that works
Essentially this is all about managing Strategy and Scope, cf James Jesse Garret.

28. Experience arc – use to track person vs organisation interactions during lifecycle of relationship
Project: Enter project title
Version: 1, dd-mm-yyyy
Notes: Describe the relationships being captured in the arc
Individual Stage Organisation
Thinking or needing A person can skip stages and Offering or hoping for
loop back, but fill them all in (means missing feature)
Pre-awareness
Describe the needs or Describe the marketing or
thoughts of the individual at features which reach out to
Before the individual is
each stage. the individual, note which
aware of need
features could be added.
Awareness
Recognition of need
Search
Looking for a solution
Analysis
Choosing the right
“product”
Acquisition
Making the purchase or
commitment
Membership
Deeper involvement, self-
describing, I am a…
Integration
Part of regular life, peer
recognition in community
Expertise
Extending their knowledge,
more depth
Withdrawal
Leaving the community
interest or need satisfied
28
Example of how to do an experience arc, tracking the whole experience of the person. Developed by Gavin Bell at Nature.
the central section is the thing to pay attention to
the 9 stages break down into the first four about discovery of a new product to use
The following three are about using the site,
the 8th of expertise is one that a few people will get to, hopefully many.
The last stage is inevitable and one that we donʼt generally manage well.
How do we close out a relationship or bring the person back again.
the first few we often give scant attention to, certainly post launch
we do use personas and similar, but too often we fall into the feature pit trap
retainment is also important, not just building new stuff for the most vocal
The experience arc ties in nicely with personas, but helps you to see the entire lifecycle of your users and non-users.

29. Process
29
If there is this broad scope then how do you work out what to do for your audience
capturing the variety so that you know what to throw out is a good starting point
There are many different document forms that work for different types of process capture
they range from the much maligned specification document, to the common wireframe
Neither of these are terribly helpful
the spec doc is seldom revised
The wireframe is too declarative in terms of graphic design
So what does that leave, well there are many many document formats out there
There are 20-30 different IA / ID / Usability tasks and at least as many ways of writing them up
Many of the better ones seek to capture process, rather than page layout
Task breakdown is important, the following are all useful, but they are internal tools for IA/ID people tp figure out systems, not necessarily for client
presentation.
task analysis - what are the actions that are happening
task flow
personas and use cases
sketches- I use these a lot, virtually every system starts on a few sheets of crisp white paper
Iʼll describe two documents which weʼve been using a lot at Nature across Editorial, Technical, Product and Design teams.
One weʼve come up with is the Service Functionality Diagram

30. Service Functionality Document Gavin Bell, 28/03/07, revision 2
Add publications
Section
Allow users to be able to maintain a publications list more easily
Aim
Allow review and deletion of publications
Goals
Allow pubmed id based retrieval of publications
Allow entry of publications by DOI urls
Enable assignment to group per publication
Publications are owned by Users
Assumptions
Users must be a member of group to assign publication to that group
Any retrieved publication information is not editable on Nature Network
Bad pubmed or DOIs are handled gracefully
Group administrators have control over which publications appear on their
group pages
Member only and private groups can optionally have an approval queue for
user assigned publications
Where possible the publication should link to a source to obtain the
publication
If the same DOI or PubMed ID is referenced, it is a single entry and both
authors are linked to the same publication.
SFD
Publication entry on behalf of someone else
Out of scope
Tagging of publications on user or group pages
User: any user can add publication to their own profile
Who will
User: any user can assign a publication to a group
use this
Group Admin: can review and remove publications assigned to a group
Group Admin: can enable approval and then approve publications assigned
to a group
Two flows are present in this service, user based and group based.
Tasks
User
View list of publications
Add publication (hand entry, DOI or pubmed id)
Delete publication (also removes from groups)
Assign to group (presents list of groups)
Edit publication (hand entered only)
User tasks
Edit
Add new View list of
(only hand
publication publications
entered)
Delete with
by
confirm
by hand by DOi PubMed
id
Assign to group
30
Service functionality document, developed by Gavin Bell at Nature.
born out of frustration at detailed spec documents
and a need to have a simple to update document which captures the high level functionality
go through each section and explain importance
Capturing the basis shape and behaviour of a system, useful for describing features of a web application and avoiding a heavy spec document to
early and going straight to wireframes. This acts as a “define what we are planning” document.
Aim - why are we making this, what need does it satisfy (only one aim)
Goals - what are the intended tasks which need to be implemented (generally at most 2-3 goals)
Assumption - upon what is this based, the place to capture expectations (usually the longest section)
Out of scope - ensuring early management of scope creep for a feature, explicitly stating what should not be built
Who will use this - defining the roles of each person in the system, including state for people, eg has commented.
Tasks - what are the concrete tasks which need to be performed
Navigation - what is the task flow, not necessarily defining pages, but captuing the result of form based input.
Links to other SFDs - which other SFDs are related to this, often user profile etc.
this gets high level buy in on the behaviour of how the system should operate.
the other we are using a lot is the Page description diagram from Dan Brown

31. high priority items low priority items
1 2 3
LOOK-UP SCHEDULE/FARES PROMOTIONS GUIDE FOR TRAVELERS
The Check Flights function provides a gateway into the Travelocity booking US Airways offers several different kinds of promotions. The home page will allow The Web site contains a lot of important information for travelers, including in-
engine. Customers supply an origin, a destination, a departure and a return time. customers to get more information about all the promotions, get information flight entertainment, terminal maps, and weather. This almanac must be
The engine returns a list of relevant flights. The form requesting this information specifically about E-Savers, or look at other current specials. This area of the available, but must not overwhelm the user experience. Customers can easily get
appears on the home page. The form might look like this: page might look like this: lost in this information. Making it easy to navigate will make it more valueable to
customers. The mechanism for accessing this information from the home page
might look like this:
more
Origin PROMOTIONS info
Destination Guide for Travelers
E-SAVERS
January 1 morning
Departure go
-- select a travel document --
Information about E-Savers
January 1 morning
Return our travel guide includesweather, terminal ma ps, andaircraft diagra s
m
Current E-Savers Promotions
This device may be used throughout the site to give customers a means for
search Enroll in the E-Savers Program
accessing travelers guide information.
SPECIAL S
Washington, DC -> Atlanta $69
LOG INTO DIVIDEND MILES ACCOUNT CORPORATE INFORMATION
Atlanta -> Miami $69
A small form allows Divident Miles customers to log into their account. The form The home page will include a link to US Airways corporate information.
PPD
Atlanta -> Dallas $69
requests the account number and pin. This area of the page also includes a link
to the Dividend Miles enrollment form, and a link to information about the Divident New York (JFK) -> Pittsburgh $69
GLOBAL NAVIGATION
Miles program. The form might look something like this: New York (JFK) -> Baltimore $69
more specials...
DIVIDEND MILES enro l l
Global Navigation must be scalable to accommodate
!Home
US AIRWAYS VACATIONS some new tools. We recommend, however, limiting
Account # !Customer Service
this area to essential items (like Customer Service
PIN more information... !Contact Us and Contact Us) and travel tools (like Look Up
forgot your PIN? clickhere.
Schedules).
!Fares
log in
program information US AIRWAYS GROUPS AND MEETINGS
!Schedules
!Flight Status
more information...
!Dividend Miles
LOOK-UP FLIGHT STATUS (FLIFO) !Reservations
SERVICES
Customers supply a flight number, and the system returns the current flight
status. To help customers understand quot;flight status,quot; the form includes the
We recommend that US Airways spell out value proposition, particularly when
verbiage quot;arrival timequot; and quot;departure time.quot; The form might look like this:
services use common words like quot;expressquot; or quot;shuttle.quot; The home page must
contain some messaging to help customers understand the value US Airways
Arrival Time provides in its services. We recommend that US Airways uses no more than six
Departure Time go items. This messaging could take the form:
Status flight number
Economical travel on MetroJet
!
Flexible schedules on US Airways Express
!
Luxurious comfort on US Airways Shuttle
!
LINK TO BOOKING ENGINE Speedy delivery with CargoWorks
!
The home page must also include a link to the booking engine. In the future,
depending on the technology, we could eliminate the link from the home page.
Customers would move to the booking engine from the schedule and fare look-up
applications.
31
Describe PPD, the page description diagram is a tool allowing definition of the elements on a page without prejudging the layout of the elements,
only their relative priority is listed in three groupings. Internally we have modified this slightly and have a much more explicit notes section. These
are used for key pages in an application.
They avoid wireframes being seen as “design” and encourage people to think about IA and functionality.
usefulness in getting early agreement between editorial, design and development
What is on each page and what is important.
UI first a la 37signals is an interesting approach, but when there is a strong editorial involvement people get caught up in the surface features and
donʼt look beneath to see what is actually happening.
Most people are not very good at application design
The PPD gives a neutral space for discussing overall functionality
Dan Brownʼs example from boxes and arrows
http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3

32. Website or
Applications
32
what are we making these days?
weʼre sort of making both of these
Ajax and AIR muddy the water, then add in widgets, embedded webkit or prism and it isnʼt clear what is being made other than something that can
render information from the internet on a screen.
Do you think our userʼs schema has caught up yet, Iʼm not sure. For the alpha-geeks change is the norm, for the iLife or Office user who has a
gmail or facebook account, maybe less so.
is twitterific an application or not
what about pyro - website or application
or MarsEdit
or mike Pointekʼs delivery status widget
They all live on my computer but they all behave in quite different manners
does this matter, well yes.
if we choose the wrong platform to host the interactivity then we can create an incongruent state.
overly complex ajax app, with flash in support (several music sites)
desktop apps that break without the internet
Lots of issues become pertinent when we embed a stateless system HTTP inside applications which may not be connected to the internet.

33. Kitchen Sink
33
Another approach is the everything in one web app
how most people start, the right way arguably until this year. From this you get suites like Drupal.
one login
one look and feel
one system
huge user complexity
Nature Network is one of these and moving away from it.
Why do these exist, data driven reasons and business reasons
It is (was) much easier to get a single app up and spinning than a series of interoperating applications
framework apps are not good at interoperation, much easier to add to one app than make two interoperate
until recently it was hard to get two rails apps to share user data
message passing via Rest and AtomPub & Oauth will help to break these monoliths down
perhaps rubycocoa and rubyonrails apps under cocoa will break them down further
new patterns of development which are still a good fit for the current schemas in web users heads
for the back end to this, see Matt Biddulphʼs talks from Dopplr on asynchronous messaging passing

34. Tailored
34
At the other end there are a range of small single purpose apps which are very focused
The 37 signals apps, twitter, blinksale etc
this new breed of app tends to do one thing well and stays focused on it
Often they *are* framework based apps coming from small companies, but they stay small
they exhibit good behaviours in being small and remixable
However why canʼt I integrate these web apps into my desktop based work flow.
I should be able to use highrise to manage contacts synced to my macosx address book and raise invoices on blink sale from within highrise on
the basis of a complete task in basecamp
If these were desktop apps I could do this,
So as the web bleeds further into our computers,
I think we are setting these expectations up with our audiences
one of these is around credentials

35. OpenID
35
We need to know who people are in this world
The management of identity in relation to this swathe of social objects is critical
the user model /schema for OpenID is I think one of the most exciting developments on the internet for years.
if we can manage the phishing issues we can enable a new world of schema congruent focused applications which cooperate with one another
(web on the desktop as Mozilla refer to it)
we need to do our best to encourage good schema formation for Openid, it is quite a radical change for users and with OAuth launching at the
same time, they are giving different messages.
oauth donʼt tell other sites anything
openid - only tell this site about your identity.
how oauth and openid interoperate needs thought
What happens if you try to authenticate access to a website from a desktop application using OAuth, but you use OpenID to login to the website
application, do you get redirected to the openID provider. This seems quite confusing, but will become commonplace if these trends get widespread
adoption.
Managing identity for machines is one aspect of the story.

36. Identity
Profiles
36
I suggest that there will be a dramatic consolidation of openid providers in the near to mid term
the majority of these providers will also manage your social graph
Many people will use more than one OpenID, eg a company one like Sun and a personal one, maybe a professional one.
the identity manifest on these profiles will embody the user, supporting this schema creation is important.
Why is this important,
we are already the same person across multiple sites, with openid we really will be the same sequence of keystrokes
this means we really can enable flow like situations between sites, using apis to exchange information
for the beginnings of this look at dopplr and its integration with flickr
“provenance” is what I call this deeper knowledge it is possible to glean about someone, but with this knowledge comes responsibility see http://
2007.xtech.org/public/schedule/paper/69
portable social networks are more than a list of people to move around should there be a private history of transactions Iʼve had with my friends.
Privacy becomes an important issue

37. Privacy
37
Some thing else that becomes more important as we move to a world of interconnected application is the management of privacy.
spock freaks people out, losing 25 million personal details too, as the UK
http://news.bbc.co.uk/1/hi/uk_politics/7103566.stm
only a few sites manage privacy in a coherent manner, they are mainly social blogging sites like flickr, vox or livejournal
we seem to be more focused on rights management than on managing privacy.
everyone contact and friend are a start with increasing content for each.
we need to ensure that this is adequately implmented across the api, the user interface and in the feeds.
People get confused when their content is “reused” elsewhere and theyʼve not given permission
but if it is public then it is up for reuse, if the licence is right
however people donʼt get this, Jeremy Keith has recent experience of this with a flickr app
http://adactio.com/journal/1354

38. Summary
38
Iʼve given an overview of cognitive psychology as it applies to web development, looking at schema theory, flow and reinforcement schedules.
Iʼve looked at the process of web application creation and explored some of the issues around feature list management.
Lastly Iʼve looked at how newer forms of web application are challenging the basis on which our current user schemas are founded. It is no longer
desktop and websites, there is a blur in the middle, we need to ensure we give good examples to our users so that they can develop good models
for how to fit these developments into their lives.
there is a lot more to say, in fact cog sci is the basis of HCI, usability and interaction design
Tim Berners-Leeʼs call for the study of this thing we call the web - Web science
http://webscience.org/
Iʼm really excited by these new developments, OpenID, OAuth and rubycocoa in particular
It is important though not to get caught up in the new features rush and look at the broader sweep of our users interactions and experiences.
thanks

39. Thanks
to Lucy Serpell
and to you for listening
39
Thanks to my wife Lucy for helping me block out the shape of this talk
and thanks for listening

40. Questions ?
Presentation will be available on
slideshare.net/gavin
further notes at gavinbell.com
me at gavinbell.com
40