Internet Applications

1. Internet Applications Spring 2008

2. Review • Last week • Internet Overview • History / important events • Anatomy of an Internet Application

3. This week • Questions about assignment 1 • Information Architecture • User centered design & personas • Introduction to Unix & Ruby (the server) • Overview of scripting

4. Facets of information • Utility • Does information have to be useful? • Physicality • Does it have a physical form? • Structure / process • Does it consist of pieces of a whole (an image), or is it a process (series of steps) • Intentionality • Is there an intention in communication? • Truth • Is it true / is it false?, misinformation Case, 2007

5. Uses of information • Perspectives • Personal, Social, Political • Utility • What impact does possession (or lack of) have? • Structure • What structure does information have & how does that structure influence use? • Processes • What processes does the information describe, what processes does it enable? • Relationship to organization • Data vs. Metadata, Contextualization

6. Information Architecture • Wikipedia • “The art and science of expressing a model or concept for information” (Wikipedia) • Google • Peter Morville • “The structural design of shared information environments. • The combination of organization, labeling, search, and navigation systems within web sites and intranets. • The art and science of shaping information products and experiences to support usability and findability. • An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape. “

7. IA – disciplines • Organization / representation • Information retrieval • Usability engineering • Systems design / analysis • Marketing • Graphic design • Computer science • Product management • Technical writing • Knowledge Management

8. Garrett’s User Experience Model http://www.jjg.net/ia/elements.pdf

9. IA - Components • Content – Data, documents • Context – Organization, user need, system purpose • Interface – User interaction, navigation, links, labels, graphics, media • Design – Flow, accessibility

10. Internet Application model Select a data model Define valid transactions on that model Design page flow – user interaction Implement individual pages Information architecture Information organization, structure Software development, business logic, interaction Usability and user experience, graphic design Graphic design, software development Development process

11. IA - Examples • Dell – http://dell.com • Complex computer ordering system centered around user-purchasing experience • Ruckus – http://ruckus.com • Music database, social networking site • Ikea - http://www.ikea.com/us/en/ • Tasks, data, comparison to store

12. IA Concepts From Information Architecture for the world wide web

13. Information ecology • Users • Who is your “prototypical user” • What are they going to do at your site? • What experience/skill background do they have? • Content • What data do you have, what qualities does it have? • What organization structures make sense? • What encoding structures make sense? • Context • What is the context of the site? • What is the context of the interaction? Graphic from Information Architecture

14. Users • Information seeking theory • Communication theory (Shannon) • Sensemaking (Dervin) • Information foraging theory (Pirolli) • Berrypicking (Bates) • Information encountering (Erdelez) • Morville’s taxonomy

15. The process of communication • Claude Shannon & Information Theory • Noise, entropy, Uncertainty • http://www.shkaminski.com/Classes/images/Shannon-Weaver%20Model.gif

16. Dervin’s Sensemaking http://www3.interscience.wiley.com/cgi-bin/abstract/112593524/ABSTRACT?CRETRY=1&SRETRY=0

17. Information Foraging • Definition: • “The theory is based on the assumption that, when searching for information, humans use "built-in" foraging mechanisms that evolved to help our animal ancestors find food. (Wikipedia)” • Concepts • Informavores • Information source – patches • Discovery strategies – scents • Cues to search and explore • Discovery tools • Benefit / Information diet

18. Berrypicking (Bates) • Informed by “link” model • Iterative process of querying, re-querying • The Article

19. Information encountering • Information seeking is not always active • Relationship between • User • Environment / context • Background information needs • Information encountered • Serendipity, “point of need” model. • Sandra Erdelez – ASIS bulletin article

20. Morville’s taxonomy • Fishing metaphor • The “perfect catch” – known item searching • “Lobster trapping” – some limiters, exploratory • “Indiscriminate driftnetting” – get everything, exhaustive research • “Moby Dick” – refinding

21. Information seeking behavior • What do these models explain? • How do they inform Information Architecture? • How do they inform site design?

22. User centered design • About answering questions like: • Who are my users, what are their goals, what are their tasks? • How do they think this site should work, what are their use-characteristics? • Includes monitoring of concepts such as • Cognitive load, text visibility, accessibility, site orientation, user satisfaction • Guidelines • Involve users from beginning • Identify their traits, tasks • Iterative design

23. Key elements of design • From The design of everyday things: • Visibility • Items should be visible and easily recognized • Natural mappings / clues • between what you want to do and what appears possible • Feedback • Touch, hear, see • Conceptual models • Make your design look like what it does • Elements of materials • Affordances, constraints, mappings, conceptual models

24. UCD research methods • Participatory design • Active inclusion of users in design process • Contextual inquiry • Watching how participants work • Action research • Real world, collaborative, problem/action/solution • Usability testing • Seek feedback on specific application

25. UCD research methods (2) • Focus groups • Identify trends, build consensus • Interviews • Intensive, individual research • Surveys • Broad, statistical • Prototyping • Focused on specific task or look - paper prototyping, card sorting An overview of methods

26. Research purposes • Identify key functional requirements • Identify interface issues (look, feel, accessibility • Identify your users

27. Prototyping users • Alan cooper – The inmates are running the asylum (1999) • Introduces the idea of “personas” • Design with a specific user in mind • Think about beginner, intermediate, advanced users • Create scenarios to present specific use cases • Context – who is using the site and why? • Key path – What are the most common tasks? • Key path variants – what happens when things go wrong?

28. Identifying personas • Think of the different types of potential users for your site • For each user – ask yourself if they have to be able to use your site • Identify solutions that work for that persona – how does the site work? • Compare potential personas – identify which features of them are complimentary, and which ones are at odds • If you have personas who are at odds, consider which (or if both) are your users. Set aside personas which are complimentary to your primary user & focus on the primary user http://www.webdesignfromscratch.com/about-personas.cfm

29. Persona example • Persona Examples • Example 1 • Example 2 • Scenario Examples • Example 1 • Example 2

30. Process review • Find users • Build a hypothesis about who your users are & how they use the site • Verify – find data that supports/contradicts your hypothesis • Find patters, commonalities • Create the persona – Body, psyche, background, emotions, traits • Define situations • Validate and get buy-in • Disseminate • Create use scenarios http://www.hceye.org/HCInsight-Nielsen.htm

31. Persona research • Personas should be grounded with research • Methods include • Interviews • Surveys • Focus Groups • Market research review • Have users complete primary tasks, ask them about their use of systems, about goals & tasks • Some criticisms • Personas should be grounded and specific • People change, personas should too

32. Group discussion • Break into four groups, each group should pick a site to use to form your persona/scenario. • E-commerce - Amazon.com, staples.com, ebay.com, etc. • Academic – ebsco.com, unc.edu, etc • Brands – addidas.com, h&m (hm.com) • Come up with a persona / scenario based on looking at the information architecture and design of the site • Use one of the two processes reviewed • http://www.webdesignfromscratch.com/about-personas.cfm • http://www.hceye.org/HCInsight-Nielsen.htm • Define a scenario that describes a specific task • How would you test this persona/scenario?

33. History of Unix • Created by Bell Labs in the 1970s • Dennis Ritche, Ken Thompson • Centralized server model • Multi-user • Multi-task capable • Portable across hardware • Library of applications • The first “open” system

34. History of Unix (2) • 1980s, 90s • Saw competition between AT&T, Novell, Sun, SCO • 1982 • Richard Stallman starts GNU project • 1992 • Linux is released under GNU license, created by Linus Torvalds • Linux is on ~12% of servers (while Apache runs nearly 50% of websites) • 1994 • Red Hat Linux released using a vendor support model

35. UNIX files/permissions • Unix file system • Based on file/folder structure • 4 Types of files • Regular files (containing ascii or binary data) • Directories (also files, just files that represent a hierarchy) • Device files (controls the hardware and I/O systems) • Link files – creates links to ‘real’ files

36. Unix permissions • Based on 3 groups • Owning user, owning group, all users/groups • Represented as: drwxr-xr-x 3 mitcheet users 4096 Jan 10 16:45 public_html -rw-r--r-- 1 mitcheet users 813 Jan 28 05:17 index.html Owning group Owner All Users

37. Unix permissions (2) • Use chmod to modify permissions • Example • Chmod 755 index.html • 2 arguments • 3 numbers • File or files to modify permissions on • Each number assigns permissions to a group (owner, owning group, all users) • The numbers add to 7: • 4 = read • 2 = write • 1 = execute

38. Common commands • Cd • change directory (cd ./public_html) • Ls • list files/folders (ls –l) • Cp • copy file (cp index.html index.bak) • Mv • move file (mv index.html ./backup/index.html) • Mkdir/rmdir • Make directory • Remove directory • Rm • Remove (use with caution – no undo!)

39. Common actions • Cat • Show the contents of a file • More/less • Show contents of a file one screen at a time • Show the contents of a file in reverse • Head/tail • Show beginning / ending of file • Grep • Search files (grep “unc” *) • Pipes | • Combine actions • Output/input >, >>, < • Direct output to file or program • Good for combining files, keeping logs, etc

40. Ruby Exercise • Goals of exercise • Become familiar with SSH client • Get connected to Ruby • Become familiar with UNIX file system

41. HTML overview • HTML is: • A text standard that creates pages that can be read by web-browsers • The foundation for the php scripting language • Based on XML

42. Basic HTML tags • <html></html> • Wrapping element for page • <head></head> • Header information, scripts, style sheets • <body></body> • where the main page goes • <h1>level 1 header</h1>... • Header tags – default styles (1,2,3,4,...) • <p>paragraph text</p> • Paragraph tag • <a href=“http://www.unc.edu”>UNC</a> • Link tag • <ul><li></li></ul> • Unordered lists • <div></div> • Groups elements for layouts • <table> • A series of tags for tabular design • Reference sites • http://www.w3schools.com/tags/default.asp • http://www.w3.org/TR/html401/

43. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Class 3 Exercise</title> </head> <body> <div> <h1>This is a top level header</h1> <p>This is a sample paragraph. Paragraph elemements are a good way of wrapping text. You can embed href elements <a href="http://www.unc.edu">unc.edu</a> links and all sorts of stuff in p elements</p> <ul>This is an example of an unordered list <li>list element 1</li> <li>list element 2</li> <li>list element 3</li> </ul> <dl>This is a definition list <dt>Metadata</dt> <dd>data about data</dd> <dt>The Internet<dt> <dd>A global electronic data network based on open protocols that is used to exchange information</dd> </dl> </div> </body> </html> Example webpage

44. HTML Exercise • Become familiar with the public_html folder • Become familiar with permissions • Create some initial pages

45. Scripting languages • Scripting basics • Components • Processes • The idea of run-time • Scripting & connectivity

46. Scripting basics • Programs (on the web) usually run with scripting engines embedded within the web server or as standalone CGI applications • PHP uses a mixed scripting approach which embeds HTML and PHP code in an HTML page • The wrapping php tag is: • <?php ...... ?>

47. Introduction to PHP • Created in 1994 by Rasmus Lerdorf and Kevin Tatroe • In version 5.x - http://php.net/ • Ruby runs 4.3.9 • Has approx 34% of scripting market • Writing PHP is like writing advanced html

48. Important concepts • Syntax • Each line ends with ; • // comment lines out • <?php ?> can be used multiple times in a page but all php code must be within these tags • Functions • Groups of code that do something specific • Phpinfo() • Echo – prints stuff out • Control structures • If (TEST) { } • Variables • Placeholders that store dynamic information (always prefixed with $) • Built-in variables • $SERVER, $_POST, $_GET, $_ENV

49. PHP Exercise • Become familiar with PHP application framework • Introduce PHP documentation • Try a few interesting scripts

50. Exercise 1, 2, 3 text • Exercise 1 <html> <head>  <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?>  </body></html> • Exercise 2 <?php phpinfo(); ?> • Exercise 3 <?php echo $_SERVER['HTTP_USER_AGENT']; ?>