Website Psychology

40
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

description

A talk at barcamplondon3 by Gavin Bell about cognitive psychology and how this should be influencing web development.

Transcript of Website Psychology

Page 1: Website Psychology

Website Psychology

Jedi mind tricks 101

Gavin Bell

BarcampLondon3 - 24-25th November 2007

1Iʼ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 dropbut to give you a sense of what to follow up on, Iʼll post all the references to del.icio.us with the slides

Page 2: Website Psychology

PsychoanalysisPsychiatry

2Ok, you are all thinking about couches and mafia filmsthat is psychoanalysis

or prosac and loony peopleWell that is Psychiatry, not psychology

if youʼre looking for star wars, sorry that was a ruse

Page 3: Website Psychology

Cognitive Psychology

3Cognitive = thinking, Psychology = study of the mindThe process of understanding and processing informationinternal mental processes such as problem solving, memory, and languagehttp://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 behaviourwe make decisions based on the information we extract from the radiation bouncing around this roomwe understand other people on the basis of this processing, we form social relations on the basis of these descions

Kathy Sierra on creating passionate usershttp://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 psychologyhttp://www.andyrutledge.com/designpsych.php

why is this useful? shoulders of others via many years of researchprovides a basis upon which to model human behaviour, gives a framework for managing the design processreduces complexity and expectations,

so lets get started

Page 4: Website Psychology

Schema

4A schema is a model of understanding of the worldIt helps us manage expectations of the world

eg a restaurant schemacutlery plates waiters menu foodhowever 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 inteddy bear with missing leg is still a teddy bear

http://www2.qeliz.ac.uk/psychology/Barlett1932.htm

take away is not a restaurantor 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

Page 5: Website Psychology

Congruence

5agreement with schema that it meets our expectations

we eat in a restaurant and we expect it to have a menuwe look at the web on a browser and expect there to be pages defined by urls

situations of schema incongruence are uncomfortableeg 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

Page 6: Website Psychology

Adaptation

6schemas 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

Page 7: Website Psychology

Web Development

7what 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 worlditerative 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 worldso 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 therethe concept of a bulletin board is based on these notices in the windowwe have added to the concept with replies etcyet we still know what is happeningEven our language has shifting to the more modern usage over the past 15 yearsbulletin board for most people no longer means the physical board

Page 8: Website Psychology

Affordances

8Gibson, J. J. (1979). The Ecological Approach to Visual Perceptionhttp://en.wikipedia.org/wiki/AffordanceHe defined affordances as all "action possibilities" 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 schemasa door affords an opening, a pit glass holding, a chair sitting.

computers in general only offer perceived affordance, though the iPhone is changing that slightlyuseful in terms of visual metaphoruse common conventions, we have a history of usage with these items, cf a basket and a bin similar function, different representationshowever they are contextually bound the basket vs bin metaphor see laterwords and images are better than images alone, the words confirm and strengthen the messagebe 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”

Page 9: Website Psychology

Cognitive Dissonance

9another 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 anotherthe 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

Page 10: Website Psychology

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 consistentconsistency is rule following, weʼve always done it that waycoherency values context more and through following this you may end

Page 11: Website Psychology

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-hieecame from interview lots of climbers etc, then generalised by further

Page 12: Website Psychology

Challenge

12So 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

Page 13: Website Psychology

Curiosity

13Following 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

Page 14: Website Psychology

Pivots

14Once 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 parenta 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 Walhttp://www.vanderwal.net/random/entrysel.php?blog=1668

Page 15: Website Psychology

Reinforcement

15back 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

Page 16: Website Psychology

Operant Conditioning

16

BF Skinner ran a series of experimentshttp://en.wikipedia.org/wiki/B._F._Skinnerrats and bars to press for food.comparing always giving a pellet of food in exchange for pressing a barvsgiving it on a regular schedule, say evey 5 pressesvsGive them food randomly

In the random condition they will press the bar a lot more than often during the trainingonce 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 reinforcementWhere is the new information?

we never know when there is an update so we keep checking and checking.

Page 17: Website Psychology

Social Software

17Social 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 contactswe 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

Page 18: Website Psychology

Attention

18managing 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 Stonehttp://itc.conversationsnetwork.org/shows/detail739.html

modern life consists of multiple projects and multiple competing demands on our timeanywhere 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 busywe 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?

Page 19: Website Psychology

Collective Intelligence

19the essence of a web 2 app these days, Toby Segaranʼs book is excellenthttp://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.

Page 20: Website Psychology

Waterfalls & Washing Machines

20When 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 methodologieshttp://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 codingHaving 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

Page 21: Website Psychology

Vision

21What 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 visionEasy to figure out if your project met the “will this put a man on the moon” critieriaMakes saying no easier too

BUT once they got there there was no v2Apollo 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

Page 22: Website Psychology

W wordswho where why what when

22so what are your audience asking

whoʼs runing this thing what does this offer mewhy should I stick aroundwhat can I do nextare my friends using ithow 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

Page 23: Website Psychology

Recipes

23It is a bit like cookingIf 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.

Page 24: Website Psychology

Verbs

24One 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 confidenceDonʼ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

Page 25: Website Psychology

I hate “design”the word

25Well I hate the word, it is so over used describing any non-verbal creative process

interaction designvisual designgraphic designexperience designapi design eveninterior design

At least typographers and architects know what they are

however like user I think weʼre stuck with it.

NOTE this is humour =)

Page 26: Website Psychology

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."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.

Page 27: Website Psychology

Experience Arcs

27When 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 approachhttp://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 stationsPuma 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.

Page 28: Website Psychology

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 Thinking or needing

Stage A person can skip stages and loop back, but fill them all in

Organisation Offering or hoping for

(means missing feature) Describe the needs or thoughts of the individual at each stage.

Pre-awareness Before the individual is

aware of need

Describe the marketing or features which reach out to the individual, note which 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

28Example 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 tothe 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 launchwe 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.

Page 29: Website Psychology

Process

29If there is this broad scope then how do you work out what to do for your audiencecapturing 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 wireframeNeither of these are terribly helpful the spec doc is seldom revisedThe wireframe is too declarative in terms of graphic design

So what does that leave, well there are many many document formats out thereThere 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 layoutTask 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 happeningtask flowpersonas and use casessketches- 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

Page 30: Website Psychology

SFD

Add publications

Allow users to be able to maintain a publications list more easily

Allow review and deletion of publicationsAllow pubmed id based retrieval of publicationsAllow entry of publications by DOI urlsEnable assignment to group per publication

Publications are owned by UsersUsers must be a member of group to assign publication to that groupAny retrieved publication information is not editable on Nature NetworkBad pubmed or DOIs are handled gracefullyGroup administrators have control over which publications appear on theirgroup pagesMember only and private groups can optionally have an approval queue for user assigned publicationsWhere possible the publication should link to a source to obtain the publicationIf the same DOI or PubMed ID is referenced, it is a single entry and both authors are linked to the same publication.

User: any user can add publication to their own profileUser: any user can assign a publication to a groupGroup Admin: can review and remove publications assigned to a groupGroup Admin: can enable approval and then approve publications assigned to a group

Two flows are present in this service, user based and group based.

User

View list of publicationsAdd 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)

View list of publications

Add new publication

by hand

Out of scope Publication entry on behalf of someone elseTagging of publications on user or group pages

Service Functionality Document Gavin Bell, 28/03/07, revision 2

Section

Aim

Goals

Assumptions

Who will

use this

Tasks

by DOiby

PubMedid

Assign to group

Edit(only hand entered)

Delete with confirm

User tasks

30Service functionality document, developed by Gavin Bell at Nature.

born out of frustration at detailed spec documentsand 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 builtWho 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 performedNavigation - 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

Page 31: Website Psychology

PPD

high priority items low priority items

PROMOTIONSUS Airways offers several different kinds of promotions. The home page will allowcustomers to get more information about all the promotions, get information

specifically about E-Savers, or look at other current specials. This area of thepage might look like this:

PROMOTIONSmoreinfo

Washington, DC -> Atlanta $69

Atlanta -> Miami $69

Atlanta -> Dallas $69

New York (JFK) -> Pit tsburgh $69

New York (JFK) -> Baltimore $69

more specials.. .

SERVICESWe recommend that US Airways spell out value proposition, particularly whenservices use common words like "express" or "shuttle." The home page mustcontain some messaging to help customers understand the value US Airways

provides in its services. We recommend that US Airways uses no more than sixitems. This messaging could take the form:

! Economical travel on MetroJet

! Flexible schedules on US Airways Express

! Luxurious comfort on US Airways Shuttle

! Speedy delivery with CargoWorks

E-SAVERS

SPECIALS

Information about E-Savers

Current E-Savers Promotions

Enroll in the E-Savers Program

US AIRWAYS VACATIONS

US AIRWAYS GROUPS AND MEETINGS

more information...

more information...

2LOOK-UP SCHEDULE/FARESThe Check Flights function provides a gateway into the Travelocity bookingengine. Customers supply an origin, a destination, a departure and a return time.The engine returns a list of relevant flights. The form requesting this informationappears on the home page. The form might look like this:

LOOK-UP FLIGHT STATUS (FLIFO)Customers supply a flight number, and the system returns the current flightstatus. To help customers understand "flight status," the form includes theverbiage "arrival time" and "departure time." The form might look like this:

Arrival TimeDeparture TimeStatus

goflight number

Origin

Destination

Departure

Return

January 1 morning

January 1 morning

search

LOG INTO DIVIDEND MILES ACCOUNTA small form allows Divident Miles customers to log into their account. The form

requests the account number and pin. This area of the page also includes a linkto the Dividend Miles enrollment form, and a link to information about the DividentMiles program. The form might look something like this:

Account #

PIN

log in

forgot your PIN? click here.

LINK TO BOOKING ENGINEThe 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.

DIVIDEND MILES enrol l

program information

1GUIDE FOR TRAVELERSThe Web site contains a lot of important information for travelers, including in-flight entertainment, terminal maps, and weather. This almanac must be

available, but must not overwhelm the user experience. Customers can easily getlost in this information. Making it easy to navigate will make it more valueable tocustomers. The mechanism for accessing this information from the home pagemight look like this:

Guide for Travelers

-- select a travel document -- go

our travel guide includes weather, terminal ma ps, and aircraft diagrams

This device may be used throughout the site to give customers a means foraccessing travelers guide information.

CORPORATE INFORMATIONThe home page will include a link to US Airways corporate information.

3

Global Navigation must be scalable to accommodatesome new tools. We recommend, however, limitingthis area to essential items (like Customer Serviceand Contact Us) and travel tools (like Look Up

Schedules).

!Home

!Customer Service

!Contact Us

!Fares

!Schedules

!Flight Status

!Dividend Miles

!Reservations

GLOBAL NAVIGATION

31Describe 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 developmentWhat 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 arrowshttp://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3

Page 32: Website Psychology

Website or Applications

32what 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 notwhat about pyro - website or applicationor MarsEditor 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.

Page 33: Website Psychology

Kitchen Sink

33Another 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 loginone look and feelone 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 downperhaps 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

Page 34: Website Psychology

Tailored

34At 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 itOften 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

Page 35: Website Psychology

OpenID

35We 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 anythingopenid - only tell this site about your identity.

how oauth and openid interoperate needs thoughtWhat 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.

Page 36: Website Psychology

Identity Profiles

36I 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

Page 37: Website Psychology

Privacy

37Some 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 permissionbut 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 apphttp://adactio.com/journal/1354

Page 38: Website Psychology

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 sciencehttp://webscience.org/

Iʼm really excited by these new developments, OpenID, OAuth and rubycocoa in particularIt 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

Page 39: Website Psychology

Thanksto Lucy Serpell

and to you for listening

39Thanks to my wife Lucy for helping me block out the shape of this talk

and thanks for listening

Page 40: Website Psychology

Questions ?

Presentation will be available onslideshare.net/gavin

further notes at gavinbell.comme at gavinbell.com

40