Internet Applications

Spring 2008

Review

• Last week– Internet Overview– History / important events– Anatomy of an Internet Application

This week

• Questions about assignment 1

• Information Architecture

• User centered design & personas

• Introduction to Unix & Ruby (the server)

• Overview of scripting

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

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

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

IA – disciplines

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

Garrett’s User Experience Model

http://www.jjg.net/ia/elements.pdf

IA - Components

• Content – Data, documents

• Context – Organization, user need, system purpose

• Interface – User interaction, navigation, links, labels, graphics, media

• Design – Flow, accessibility

Development process

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

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

IA Concepts

From Information Architecture for the world wide web

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

Users

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

The process of communication

• Claude Shannon & Information Theory– Noise, entropy, Uncertainty

– http://www.shkaminski.com/Classes/images/Shannon-Weaver%20Model.gif

Dervin’s Sensemaking

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

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

Berrypicking (Bates)

• Informed by “link” model

• Iterative process of querying, re-querying

• The Article

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

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

Information seeking behavior

• What do these models explain?

• How do they inform Information Architecture?

• How do they inform site design?

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

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

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

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

Research purposes

• Identify key functional requirements

• Identify interface issues (look, feel, accessibility

• Identify your users

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?

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

Persona example

• Persona Examples– Example 1– Example 2

• Scenario Examples– Example 1– Example 2

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

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

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?

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

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

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

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

Owner Owning group All Users

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

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!)

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

Ruby Exercise

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

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

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/

Example webpage<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>

HTML Exercise

• Become familiar with the public_html folder

• Become familiar with permissions

• Create some initial pages

Scripting languages

• Scripting basics– Components– Processes

• The idea of run-time

• Scripting & connectivity

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

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

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

PHP Exercise

• Become familiar with PHP application framework

• Introduce PHP documentation

• Try a few interesting scripts

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<?phpecho $_SERVER['HTTP_USER_AGENT'];?>

Exercise 4 text<html><body><form action="ex4.php" method="post"> <p>Your name: <input type="text" name="name" /></p> <p>Your age: <input type="text" name="age" /></p> <p><input type="submit" /></p></form>

<?phpif ($_POST['name'] > "") {

echo "Hi ";echo htmlspecialchars($_POST['name']);echo ", You are ";echo $_POST['age'];echo " years old! </br>";

}?></body></html>

Next week

• Information Organization (content, context of Information Architecture)

• Presentation & discussion on application surveys