Website Psychology
Upcoming SlideShare
Loading in...5
×
 

Website Psychology

on

  • 34,026 views

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

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

Statistics

Views

Total Views
34,026
Views on SlideShare
33,794
Embed Views
232

Actions

Likes
37
Downloads
725
Comments
1

20 Embeds 232

http://takeoneonion.org 99
http://www.slideshare.net 31
http://bbpreview.cuhk.edu.hk 29
http://www.consumingexperience.com 26
http://unjobs.org 20
http://www.linkedin.com 5
http://bbpreview.itsc.cuhk.edu.hk 4
http://nurture.nature.com 4
http://us-w1.rockmelt.com 2
http://users.unjobs.org 2
https://bbl.westfield.ma.edu 1
http://www.fuse54.com 1
http://www.takeoneonion.org 1
http://a0.twimg.com 1
http://74.125.93.104 1
http://paper.li 1
http://bb91tst-mt.uhcl.edu 1
http://grajdaru.3x.ro 1
http://asdemo2.blackboard.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very nice presentation, brief but to the point
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Website Psychology Website Psychology Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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”
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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?
  • 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.
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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 =)
  • 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.
  • 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.
  • 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.
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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
  • Questions ? Presentation will be available on slideshare.net/gavin further notes at gavinbell.com me at gavinbell.com 40