Web Design Analysis Considerations

We have identified 3 broad areas for design consideration

1. Content

– what the site purports to be about.

2. Form

–n the layout and visual appearance of the site

3. Function

– how you use the site

Successful sites follow a user centric model

– i.e. they are focused on the experience of the site the user will have:

1. Why they are visiting or using the site ?

a. is it to find information?

b. to access a service

c. for entertainment.

d. Why else ?

2. Who and how will they be viewing the site?

a. high speed broadband from Glenorchy or dial up from Bangladesh?

b. large screen monitor or mobile phone?

c. old or new hardware / software – what standards should you comply to.

d. General public/specific demographic

3. Will this be a visit once site? or do you want them to regularly revisit.

4. How are you going to identify what sort of experience the user expects?

Some things to consider:

Content:

• How long should it take a page to load?

(answers vary depending on usage and content between

4 and 15 seconds – how big the media on the page can be will depend on bandwidth of the typical user).

• Is the site complete and fresh? (as opposed to half done, full of under construction signs and last updated 5 years ago)

• Is the content compelling? (high quality)

Form:

• Does the site adjust standards, is the viewing experience similar on a range of web browsers.

• Where is the most significant content on the page

(http://browsersize.googlelabs.com/)

• Will the user have to scroll to access important content

(http://blog.clicktale.com/2007/10/05/clicktale-­‐scrolling-­‐research-­‐report-­‐ v20-­‐part-­‐1-­‐visibility-­‐and-­‐scroll-­‐reach/) • Is

the design flexible or rigid, do parts of the design ‘float’ to allow for different window

sizes – is the optimal design size appropriate for your users.

• Does the site degrade gracefully (i.e. if css doesn’t work or images don’t is it still possible use site).

• Will blind or visually impaired people be using site ?

(http://wave.webaim.org/)

• Are font sizes legible, and contrast between foreground and background text sufficient.

Function:

• Do all the links work in the site? (http://validator.w3.org/checklink)

• Navigation should be intuitive and seamless, you shouldn’t really have to think about it.

• Where is navigation located, is it accessible from a variety of positions on the page?

• Are the categories clear in their description - icons only can be difficult to understand?

• How many choices are there (in general there should be no more than 6).

• How many clicks does it take to get somewhere (in

general it should be no more than 3)?

• Will your users get lost or go around in circles?

How do they know where they have been.

Finally a really good way to learn about best practice in web design is to look at what doesn’t work.

I highly recommend this site

http://www.webpagesthatsuck.com/ for an instructive and entertaining look at what not to do when designing a

site.

HTML

today we looked at HTML, HTML is intended to be used to describe the content of a page, its structure, headings, paragraphs, lists etc - NOT its form, the way it looks.
The visual appearance or form of the page is supposed to be done using CSS - cascading style sheets. A well designed site uses common css files which allow the visual appearance of the whole site to be modified and updated very quickly - and to be repurposed for different applications, like print, mobile phones etc.
See the website http://www.csszengarden.com for an example of the power of css.
The final part of the equation is function - how you use a web site - discussion to come.
An excellent design marries all three, content with form and function.

We got introduced to a very helpful website; www.htmldog.com

its tutorials include:

HTML beginner

getting started

Tags, Attributes, and elements

page titles

paragraphs

headings

Lists

Links

Images

Tables

Forms

Putting it all together

CSS Beginner

HTML Imtermediate

CSS intermediate

HTML Advanced

CSS Advanced

Subject: What you see is not what someone else sees	Topic: Class Notes
Author: Mr William Hart	Date: 18 March 2010 12:02 PM

One of the key lessons for a designer to learn when designing for the web, is that you can not easily control the visual experience that the viewer has.

Key to successful design is understanding that

1. The viewer will be doing several things at once, not just looking at your site design.

2. The viewer expects the site to just work for them, no matter what browser or device they use to view your site. They won't switch to the browser you tell them to use or adjust the window or screen just to view your site. If it doesn't just work - its your fault.

Several things you have to content with:

1. Individual users preferences

2. Different browsers work differently

3. People use different sized screens and windows.

Some useful resources

http://www.browsershots.org - (give you screen shots of a site in different browsers on different operating systems)

http://browsersize.googlelabs.com/ - a graphic representation of screen size use.

http://www.w3counter.com/globalstats.php - global usage statistics of different browsers

Separating form, content and function

In session 2 we looked at HTML, HTML is intended to be used to describe the content of a page, its structure, headings, paragraphs, lists etc - NOT its form, the way it looks.
The visual appearance or form of the page is supposed to be done using CSS - cascading style sheets. A well designed site uses common css files which allow the visual appearance of the whole site to be modified and updated very quickly - and to be repurposed for different applications, like print, mobile phones etc.
See the website http://www.csszengarden.com for an example of the power of css.
The final part of the equation is function - how you use a web site - discussion to come.
An excellent design marries all three, content with form and function.

Class lecture

HYPERTEXT

The Memex - 1945

As we may think - http://www.theatlantic.com/ magazine/archive/ 1969/12/as-we-may- think/3881/

By Vannevar Bush

(published 1945 in the Atlantic Magazine)

XANADU - 1960

What is Xanadu?

The Xanadu Australia formal problem definition is:

We need a way for people to store information not as individual "files" but as a connected literature. It must be possible to create, access and manipulate this literature of richly formatted and connected information cheaply, reliably and securely from anywhere in the world. Documents must remain accessible indefinitely, safe from any kind of loss, damage, modification, censorship or removal except by the owner. It must be impossible to falsify ownership or track individual readers of any document.

This system of literature (the "Xanadu Docuverse") must allow people to create virtual copies ("transclusions") of any existing collection of information in the system regardless of ownership. In order to make this possible, the system must guarantee that the owner of any information will be paid their chosen royalties on any portions of their documents, no matter how small, whenever and wherever they are used.

Project Xanadu http:// www.xanadu.com.au

1965 - Ted Nelson- coined the term "hypertext"

Ted Nelson, a professional visionary,¹ wrote in 1965 of "Literary Machines,"² computers that would enable people to write and publish in a new, nonlinear format, which he called hypertext.³ Hypertext was "nonsequential" text, in which a reader was not constrained to read in any particular order, but could follow links and delve into the original document from a short quotation.⁴ Ted described a futuristic⁵ project, Xanadu[®⁶], in which all the world's information⁷ could be published in hypertext. For example, if you were reading this book in hypertext, you would be able to follow a link from my reference to Xanadu to further details of that project. In Ted's vision, every quotation would have been a link⁸ back to its source, allowing original authors⁹ to be compensated by a very small amount each time the quotation was read¹⁰. He had the dream of a utopian¹¹ society in which all information could be shared among people who communicated as

equals.¹² He struggled for years to find funding for his project, but success eluded him.

FOOTNOTES CORRECTING THE ABOVE:

1. No one has ever paid me to be a visionary.
2. I don't believe I used the term "literary machines" until 1981, when I made it the title of a book. However, 1965 is when I first used the word "hypertext" in print.
3. It is vital to point out that Tim's view of hypertext (only one-way links, invisible and not allowed to overlap) is entirely different from mine (visible, unbreaking n-way links by any parties, all content legally reweavable by anyone into new documents with paths back to the originals, and transclusions as well as links-- as in Vannevar Bush's original vision).
4. Going back to the original must not be done by links but must be done by deeper transclusive means. The link mechanism, particularly the embedded link of the Web, cannot do this correctly.
5. "Futuristic" is one of those words which implies that an idea is not a possibility-- just a crazy dream, and thus only an inspiration. I believe Tim thinks he made my ideas practical, whereas I think he oversimplified them-- with today's extreme complexity as the result.
6. "Xanadu" is a registered trademark which I maintain at considerable cost, and I ask all parties to respect this by using the "®" or "(R)" symbol for the first use of the trademark "Xanadu" in each document.
7. Not "all the world's information", but all the world's documents. The concept of "information" is arguable, documents much less so. I believe Tim is finding his concept of pure information, the "Semantic Web", much more difficult to achieve than hypertext documents.
8. No, not a link; a transclusive pathway. The two mechanisms are entirely different. A link connects two things which are different. A transclusion connects two things which are the same.
9. Not authors, rightsholders. Sometimes the author is a rightsholder, sometimes not. A rightsholder is generally someone who has bought or contracted the rights from the author. While we have sentimental concern for authors, in our system of law the rightsholder can be anyone, just as the owner of land is rarely the original settler any more. Besides fairness to authors and artists, a key objective is to bring in the commercial rightsholders-- big publishers, university presses, movie studios-- who will not otherwise publish their content digitally. Many people think I am against free content; nonsense. I want to create a shared world of mixable content both free and paid.
10. No, not every time it was read (pay per view) but the first time purchased, as with a paper document.
11. "Utopian" is another synonym for "impossible", like "futuristic" in footnote 5. This shows a problem of understanding.
12. "Communicated as equals" is a gracious but confusing phrase. The author and the reader are not exactly equal, they occupy different roles with frequent conflict. If he means that anyone can be an author and anyone can be a reader, that has always been true (since self-publishing has always been respectable). I would say "shared a level playing field". But I appreciate the spirit of this phrasing.

http:// ted.hyperland.net/

NLS "ONLINE SYSTEM' - 1968

• Douglas Englebert
• The screen/Mouse and 'The journal'

Welcome to the Invisible Revolution, the story of Doug Engelbart, the man who invented much of the information environment we live in today - the computer mouse, word processing, email, hypertext and so on. In short: Interactive computing.

This is his story, and the story of his fellow dreamers, thinkers, doers - revolutionaries - who changed our lives forever.

How did we go from using computers with punched cards - where you'd have to wait a day for the results of your calculations - to sitting around in coffee shops with laptops? It's a long and fascinating story, told here with text, voice and video.

We hope you find Doug's story as important and inspirational as we do and that you will take the time to look beyond the tools he invented and reflect on the reason he invented them.

The 40th anniversary of Doug's demo was celebrated December 2008. Have a look at why it's such a big deal for our history and our future: The Significance of Two Pasts.

Frode Hegland & Fleur Klijnsma
London

• http://www.invisiblerevolution.net/

ASPEN MOVE MAP 1978

Hypermedia - MIT media lab

• http://www.naimark.net/projects/ aspen.html

HYPERCARD - APPLE 1987

Bill Atkinson

International HyperCard User Group (iHUG)

Pantechnicon Wiki, created by Alain Farmer has become a boon recently for serving as a center of information. This page highlights worldwide efforts and activities the past several years that have kept HyperCard visible to the public, and to Apple Computer.

iHUG visited the O'Reilly Open Source Convention in 2003 and published an interesting review of open source technologies from a HyperCard user perspective.

---

Did you know Apple HyperCard lights the concert hall of the two tallest buildings in the world? The Petronas Towers in Kuala Lumpur (Malaysia). A Performa controls the fiber optic lighting system in the concert hall at the base. HC and a couple of I/O gadgets choreograph ninety separate illuminators; color, timing, scenarios, the works. A display of the hall in plan view shows the status in real time.

---

We are a virtual user group. Many of our members have used HyperCard for years. We include professionals in education and businesses all over the world. Many are seasoned scripters and carry an amazing knowledge of the software.

iHUG Membership is free. We meet virtually real-time on the mailing list. iHUG offers a place to present what can be achieved with the software. We also create CD-ROMS that promote the strengths Apple HyperCard provides Macintosh users, especially its relevence to Apple's QuickTime and AppleScript technologies.

Please contact us if you have questions. Join our mailing list and ask online if you like. It's a fun and enjoyable experience learning with people who regularly think about Apple HyperCard.:)

Apple HyperCard was used to create the HTML on this web site.

WWW - 1989

Tim Berners Lee @ CERN

A graduate of Oxford University, Tim Berners-Lee invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory, in 1989. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread.

He is the 3Com Founders Professor of Engineering in the School of Engineering with a joint appointment in the Department of Electrical Engineering and Computer Science at the Laboratory for Computer Science and Artificial Intelligence ( CSAIL) at the Massachusetts Institute of Technology (MIT) where he also heads the Decentralized Information Group (DIG). He is also a Professor in the Electronics and Computer Science Department at the University of Southampton, UK.

He is the Director of the World Wide Web Consortium (W3C), a Web standards organization founded in 1994 which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. He is a founding Director of the Web Science Trust (WST) launched in 2009 to promote research and educaton in Web Science, the multidisciplinary study of humanity connected by technology.

He is also a Director of the World Wide Web Foundation, launched in 2009 to fund and coordinate efforts to further the potential of the Web to benefit humanity.

During 2009 Tim also advised the UK Government's "Making Public Data Public" initiative.

In 2001 he became a Fellow of the Royal Society. He has been the recipient of several international awards including the Japan Prize, the Prince of Asturias Foundation Prize, the Millennium Technology Prize and Germany's Die Quadriga award. In 2004 he was knighted by H.M. Queen Elizabeth and in 2007 he was awarded the Order of Merit. In 2009 he was elected a foreign associate of the National Academy of Sciences. He is the author of "Weaving the Web".

HTML - HYPERTEXT MARKUP LANGUAGE

Standards W3C http://www/w3/org

HTML 4/XHTML I.x,XML etc

HTML5-"plugin killer"