PBA Front-End

1. PBA Front-End Week 1

2. Communication Why do we communicate…?

3. Communication • Pass information • Persuation • Coordination • …?

4. Communication

5. Communication Why do we make websites…?

6. Communication • The purpose of a website is to communicate! • The purpose of a website is (usually) not to demonstrate technical brilliance  • What can we do with this wonderful web programming technology…? • How can we implement this wonderful web design…?

7. Communication • Specific purposes of communication can be as diverse for websites as for real life: • Pass information [READ THIS!] • Persuation [BUY THIS!] • Coordination [DO THIS!] • There are obvious overlaps…

8. Communication • What is the specific purpose (with regards to communication) for a website for: • A political party (UK Labor Party) • An online bookstore (Amazon) • A web design tutorial (WebStyleGuide) • An aid organisation (Red Cross) • An online universe for kids (Club Penguin) • A social media (Facebook)

9. Communication • How does communication work…?

10. Communication • Computers are lucky!

11. Communication • In the ideal world • The sender has a certain ”mental state” about some information • The sender communicates something about this information to the receiver • The receiver is now in the same ”mental state” about this information

12. Communication • Humans don’t work like that… What were you doing inside a closet…? Oh John, listen, I’ve decided to come out of the closet!

13. Communication • What hinders ”perfect communication”? • Language (verbal and non-verbal) • Noise (actual and ”semantic”) • Context (culture, background, assumptions,…)

14. Communication • Many theories and frameworks for analysis of communication • One prominent theory/model: Social Constructionism • The Constructionist View: ”How you say something determines what the message is” • Cannot separate form and content

15. Communication Wassup, d4wgg..?

16. Communication How are you today, my dear friend of African-American ethniticity…?

17. Communication • If we accept the Constructionist View, what are the consequences? • No absolute truths • No absolute messages • People – and groups of people – construct their own reality (consensus reality), so… • Always consider the point-of-view of the receiver of any information

18. Communication • Consensus reality • Is Nike the best brand of sports shoes…or have enough people agreed that it is so? • Is Global Warming a scientific fact…or have enough people agreed that it is so? • Is Facebook the best website for social inter-action…or have enough people agreed that it is so?

19. Communication • Cognitive bias • The tendency for people to make ”poor” decisions, based on a particular situation • Is this relevant when designing websites…? • Depending on your purpose – cognitive bias can be ”exploited” • Example: Red Cross (I would rather help ”this one child”, than all these anonymous thousands…)

20. Communication

21. Web Development Process Where do websites come from…?

22. Web Development Process • All websites start with an idea! • Wouldn’t it be great if people could find information about my company online…? • Wouldn’t it be great if people could buy our products online…? • Wouldn’t it be great to make a site so interes-ting that millions would visit it each day, and then earn millions on ads…?

23. Web Development Process • Wouldn’t it be great if people could buy our products online…? Now you know enough, start working!! …and the deadline is in three weeks, btw!

24. Web Development Process • Clearly, the idea itself is not enough • From idea follows purpose (mission) • Often close to the idea, but somewhat more specific • The website should enable people to buy a broad selection of our products online, at the same prices as in our physical stores

25. Web Development Process Sales Communication Presentation Informa- tion

26. Web Development Process • Information: • ”Hello, world” • Basic information about company/organisation • Contact information • One-way communication • Very static, rarely updated • http://www.jens-m-jensen.dk

27. Web Development Process • Presentation • Information, plus: • Presentation of products/services • Search function • Still one-way communication • Needs more frequent updates (Changes in prices, new products, …) • How are updates handled (CMS, Service,…)?

28. Web Development Process • Communication • Presentation, plus • Possible to ask questions (and get answers) • FAQ, guides,… • Chat, e-mail, Twitter,… • Two-way communication • Users expectations rise (fast response to questions, etc.)

29. Web Development Process • Sales (web-shop) • Communication, plus • Online sales of products and services • Standard solutions exist (Templates, CMS) • Numerous examples

30. Web Development Process Some websites will not fit this model! Sales Communication Presentation Informa- tion Useful model for initial work on establishing purpose

31. Web Development Process • Purpose established! • The website should make it easy for our customers to buy a broad selection of our products online, while having a positive user experience • Can be start designing now…?

32. Web Development Process • The website should make it easy for our customers to buy a broad selection of our products online, while having a positive user experience • …and one year later, how will you know if the website was a success…?

33. Web Development Process • The website should make it easy for our customers to buy a broad selection of our products online, while having a positive user experience • Subjective!!!

34. Web Development Process • The website should make it easy for our customers to buy a broad selection of our products online, while having a positive user experience • Try to define objective goals instead!

35. Web Development Process • ”Easy” • It must be possible for 80 % of the users to complete an online purchase within 90 seconds, when starting from the landing page of our website

36. Web Development Process • ”Broad selection” • At least 90 % of all the items in the company product catalog must be available for purchase online

37. Web Development Process • ”Positive user experience” • At least 80 % of the users participating in a user survey must give the item ”overall user experience” a rating of 7 or more on a scale from 0 to 10. At most 5 % must give the item a rating of 3 or less.

38. Web Development Process • Goals established, can we start working now? • Remember Social Constructionism • The Constructionist View: ”How you say something determines what the message is” • Who are we talking to…?

39. Web Development Process Defining a Target Audience

40. Web Development Process • Purpose and target audience will often – but not always – be rather closely related • Ideally, everybody should like our website! • In practice, only certain specific groups will be appealed to by our product, message, form of expression, etc. • Who are they…?

41. Web Development Process • How can you characterise a certain Target Audience? • Geography • Demography • Psychography • Level of competence

42. Web Development Process • Geography • Local/regional/national/ international • Urban/suburban/rural • Climate • Workplace/home

43. Web Development Process • Demography • Age • Gender • Civil status (single, married,…) • Occupation • Education • Income level • Ethniticity • …

44. Web Development Process • Psychography • Interests • Behaviour • Beliefs • Values • Culture/Subculture

45. Web Development Process • Level of competence (with regards to Web usage) • Novice • Casual • Intermediate • Expert

46. Web Development Process • Why is this relevant – what can the practical consequences be? • Imagine these target audiences: • Children age 5-8 • Senior citizens, age 60+ • Adults (age 18-60), elementary education • What is the influence on our design decisions?

47. Web Development Process