spagnolo luigi m673688 presentation

The Scuolab and HOC websites case studies

Master Thesis presentation by:Luigi Spagnolo (673688)

Supervisor:Prof. Paolo PaoliniAssistant supervisor:Prof. Nicoletta Di Blas

Finding information on large websites...◦ It is difficult (information overload, ambiguity of links)

E.g. on Regione Lombardia portal (www.regione.lombardia.it): law for technological aids to disabled people

◦ It takes too much clicks (and so too much time)

◦ Organizing information effectively, according to traditional principles of web design is a too complex (impossible?) task

◦ Users tend to use search (e.g. Google) why using it just as a secondary alternative when navigation fails?

Student: Luigi Spagnolo (673688) 2 of 18

http://www.regione.lombardia.it/

A novel approach in web design◦ Integrating search within websites as main interface to accesscontents

◦ It is a tendency...◦ But there is lack of previous scientific studies, just empirical application of search

From traditional info‐architecture to blended information architecture◦ A well organized mix of search space and traditionally designed navigation

Search as “dialogue 2.0”◦ The user asks the application for a topic, by formulating a query, the application replies with relevant search results


http://www.flickr.com/

www.scuolab.itPart of the PoliScuola program of the Politecnico di Milano ‐ HOC labGoals for the website◦ Repository for didactical projects developed within PoliScuolainitiatives

◦ Community of school teachers◦ The users can publish projects, rate and comment them

Problematic conditions of the old version◦ E.g. information not homogeneously structured in the database What has been done: complete redesign and implementation (the part concerning projects)


http://www.scuolab.it/

http://hoc.elet.polimi.itHypermedia Open Centre lab websiteGoals for the website◦ Provide effective access to projects, publications and staff profiles ◦ Presentation of research activities◦ Attract users with very different background (computer engineering, communication sciences, cultural heritage...)

What has been done: complete redesign


http://hoc.elet.polimi.it/

Individuate potential users and scenarios of usage◦ By interviewing the website staff and brainstorming

What does matter?◦ Which contents are better retrieved through search, and which ones are better obtained through navigation?Core information vs. Coverage/presentation information

◦ The language used by potential users: With navigation the users should understand what the website offersWith search the web application should understand what the user asks


Coverage/presentation information ◦ concerns the website itself , the organization behind it, its contents and services and how to use them

◦ More easily obtained through navigation◦ Traditional hierarchical Info‐architecture, but smaller and easier to navigate◦ Contents should be conceived to engage users and compel them to search and navigate core information

Core information ◦ is made of the key contents around which the website revolves◦ More easily retrieved through search◦ Tag‐based info‐architecture: flat structure◦ Information is treated as made of “content objects”, described by tags◦ Tags can be arranged into tag clouds ◦ Tags can be seen as metadata, and used into the description and keywords meta‐tags

◦ Delegate the task of choosing tags mainly to content editors Who makes the content is more aware of it


Less effort to find adequate tree structures Possibility to focus more deeply on relationships between topics◦ E.g. for Scuolab: from project to its author, from project to projectsmade in the same school

◦ E.g. for HOC website: “twinned” projects, similar publications Users gain access to contents by search or from tag clouds, then use transition links to expand their knowledge◦ Transition links keep users navigating on the websiteCloser to hypertext “philosophy”Transition structures can be reused as additional tag‐based access structures


Involves both marketing and technical issues Based on knowledge of the behavior of search engines algorithms Focuses on keywords ◦ Keywords must be placed inside webpages◦ Better in highlighted parts: title, heading tags, links, URLPractices for search‐friendly code (e.g. concerning JavaScript, frames)URL rewriting Attention to black hat SEO (cloacking, spam indexing)!


Google business custom search engine BCSE◦ Service that rely on Google.com public indexed data

Can be used to implement search within a websiteAllows to restrict the search set depending on the URL Easy to create and manage: wizards, code for copy&paste...Frequent queries RSS feedPossibility to manipulate results also in XML format

◦ Limitations: no control on crawlingTo control crawling search appliances are needed

Google API◦ Javascript/AJAX library: very flexible, but also complex◦ Wide range of applications: integration with image and video search and maps◦ Some methods can be used to store results on a server◦ Limitations: the ones of AJAX

“Breaks” the hypertext structure


Built in PHP 4 and 5 with MVC approachThe index.php is the controllerDAO/DTO pattern to manage access to databaseHelper classes implement actionsSmarty template to implement the viewE.g. manage data on projects


Create URLs that look like static◦ E.g. http://localhost:8080/scuolab/progetti/id/292‐alla‐scoperta‐del‐pianoforte‐un‐viaggio‐ipermediale/292‐abstract.htm

◦ Instead of http://localhost:8080/main/scuolab/index.php?id=292&page=abstract

With Apache/PHP: using mod_rewrite◦ Rewrite rules in .htaccess file, e.g.

RewriteRule ^progetti/id/([0‐9]*)/[0‐9]*‐([a‐zA‐Z0‐9]*)\.htm$ main/index.php?action=project&id=$1&page=$2 [NC,L]

Clearer URLs, easy to remember and keyword richIt also hides the real web application structure and the technology used


http://localhost:8080/scuolab/progetti/id/292-alla-scoperta-del-pianoforte-un-viaggio-ipermediale/292-abstract.htm

http://localhost:8080/scuolab/progetti/id/292-alla-scoperta-del-pianoforte-un-viaggio-ipermediale/292-abstract.htm

http://localhost:8080/main/scuolab/index.php?id=292&page=abstract

GoogleSearchManager class◦ Creates requests to CSBE service server◦ Parses BCSE results in XML results through simpleXML◦ Processes them to map old website pages to new onesDisplay results◦ Distinguish between content pages and pages with lists of linksFrequent queries◦ Parse RSS feed with PHP simpleXML functionsGoogle (and Yahoo) search engine sitemaps ◦ designed to facilitate search engines to spider a website◦ XML format for google, plain text for Yahoo◦ Can be generated programmatically◦ Possibility to notify changes in the sitemap (in the website) by “pinging” Google

Also programmatically when an update occurs


Tag cloud ◦ Links different in size◦ SQL View to retrieve data, smarty plug‐in function to display them

Rating projects◦ Set off best projects ordering them by rating ◦ Mean value, total score and number of votes◦ Rating bar based on AJAX and CSS, smarty plug‐in to display it◦ Some restrictions for expressing the votes

One IP address = 1 voteOnly registered users can vote

Comments on projects◦ Prevent spam registered users only


http://localhost:8080/scuolab◦ Search in action (e.g. “latte”, “storia medievale liceo”)◦ Frequent queries◦ Tag cloud◦ Project pages◦ Rating and comments◦ Google Sitemap


http://localhost:8080/scuolab

Needing for an evaluation method◦ Determining at which extent the scenarios emerged in the requirement phase can be accomplished through search

Measuring subjective relevance◦ How much the content is centred on the topic of search

Very relevant vs. Less relevant (too generic or too specific)◦ Calculate overall relevance for a list of search results

Proposed weighted mean:

Results of the evaluation◦ Search particularly useful for retrieve information on very specific topics◦ Simple SEO practices (change title tag) can sensitively increase the relevance ofresults

◦ Measures proposed cannot be enoughNecessary complete usability tests for more detail

( )1

Npage

scenario ii

r iR

a=

=∑


High flexibility◦ No limitation in how the query can be formulated adaptive to users needs and tasksAlso in a (simplified) natural language No dependence from the structure of the data source

Simplicity and accessibility◦ Easier interaction. The search form is a simple and “quick” interface. Can be used also by disabled people.With the traditional info‐architecture, the more access structures are added the more the pages become complex.

◦ Less development effort. The complexity lays in the search engine and is transparent both to user and to the developer, which takes care quite exclusively of the presentation and interaction aspects.


Information content and structure◦ Effective presentation information, also through search serendipityTags and keywords◦ Introduce “super‐tags” and “children tags”◦ Automatically extract tags from contentsSearch engine implementations◦ Search appliances, other search engines APIsInterface and display of results◦ Automatic query suggestion◦ Content preview and inline results◦ Filtering , ordering and archiving resultsEvaluation◦ Deeper evaluation◦ More comprehensive measures◦ Complete usability tests◦ Study how the application “grows” with usage


spagnolo luigi m673688 presentation

Business