Home > Computing > Web design issues

Web design issues

Broader issues of web design

Overview of WWW Design.

Comments and notes from Tim Berners-Lee:

…websites should be readable by everyone, and this should include people with slow modems, different browsers, or screen readers. This should also include those who cannot use either a keyboard or a mouse and those who are colour blind or have poor eyesight.

 

Website design issues from Cornish Webservices Consultancy:

design is not about graphics, it’s about using graphics effectively in conjunction with text to convey the maximum information in the most attractive and efficient way possible.


Good and bad web design features from Ratz.com

 

Nielsen says sites that attract and retain readers take little time to download, present information in a succinct fashion, underline relevant links (but not the entire sentence in which the link is contained) and contain fresh information. The bottom line, Nielsen says, is that web sites should be designed to help visitors find what they want — not what publishers or the marketing department want to promote.

An important issue about web design is that the product has to work effectively across the range of web browsers available. This is not always easy, although browser design is getting better. Internet Explorer 6, long maligned by knowledgeable web users, is about to disappear.

.

Web usability issues from Nielsen-Norman Group

Web design articles from Page Resource.com

Web style guide from Lynch and Horton

It is important to make sure that your visitors can find what they want quickly and easily. By following the 3 click rule, you can improve your sites navigation and ease of use.

A web site is often a marketing tool, and requires more than just the presentation of technical information. However, there is a danger that the marketing aspects of the site become the main focus. Usability, accessibility and security (for the user) are often forgotten in the drive to make the web site look appealing from a purely visual design perspective.

Web site design issues from TechScribe

One way to learn about good page design is to cruise other people’s well designed pages…

Website design issues from Website Copyright

Design issues and techniques from WannaLearn.com

Web safe colours.

Various articles on design issues from MCU

Whitespace, various from Wikipedia

Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Couples with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive.

Whitespace from Mark Boulton

Tables from http://www.w3.org

Accessibility issues, Frames and Cascading Style Sheets

Accessability issues from Jim Byrne

frames or no frames from Taming the Beast.net

Why frames suck, from Jacob Nielsen

Cascading Style Sheets from Wikipedia

Cascading Style Sheets from Web Design Group

Cascading style sheets from Learn how to

Cascading Style Sheets tutorials from w3schools.com

CSS Tables gallery from icant.co.uk

More CSS templates Boxes

See Zen Garden:The Beauty in CSS Based Design.

Creating killer web sites.

Academic paper: Tauscher, L. & Greenberg, S.

How people revisit Web Pages: Empirical Findings and Implications for the Design of History Systems.

Aspects of Web Design

Hot Sites?


Web design is a very personal activity and it is difficult to lay down hard and fast rules with respect to what makes a good design and what makes a bad one. A few general rules apply, but these are often broken for a variety of reasons. It is more useful to look at some of the issues and discuss them rather than lay down rules.

The now defunct (?) Digital Information Office (DIO) provided guidance for academic website design. These can be seen here.

There are a number of books on design, which you might find useful. I have this one, but am sure that there are a number of more recent ones.

What makes for good design?


  • It must look good, be pleasing to the eye
  • It must be easy to read
  • It must be easy to navigate
  • It must be easy to bookmark
  • It must make you want to come back.

...sites that attract and retain readers take little time to download, present information in a succinct fashion, underline relevant links (but not the entire sentence in which the link is contained) and contain fresh information. The bottom line, Nielsen says, is that Web sites should be designed to help visitors find what they want — not what the publishers or the marketing department want to promote. Jacob Nielsen

 

See Jacob Nielsen’s comments on the top ten design faults.

Nightmare web design clients.

See Wendy Boswell‘s Good Website Design for Website Optimisation.

10 most important web design tips .

 

Choices

Web design packages allow one to work in a wysiwyg environment, simplifying layout and providing a high level of control over layout and look. Most designers buy into a suite such as Macromedia or Microsoft. These usually include web and graphic design packages, which integrate well. The Macromedia suite includes Dreamweaver, Fireworks and Flash, which provide an integrated suite of web design tools.

Some people still design at code level, and it is useful to have an at least rudimentary knowledge or understanding of the underlying code. Try Elizabeth Castro – Creating a Web Page with HTML (2004) Peachpit Press as a start.

Microsoft Front Page is a popular design package. However, many designers find Macromedia or Adobe GoLive more powerful user-friendly once they get serious about design. Essentially it is a matter of choice, or perhaps what one is used to working with.

Certain HTML editing packages provide an interface that allows you to drag and drop code, rather than type it in. These include Hotdog by Sausage Software and HotMetal by Softquad.

 


 

 

More advanced design can can be achieved using CSS. See the contents of this book here.

 

 

Some design and accessibility issues

White space

Web pages should ideally be short and easy to read. Unfortunately, many are terribly dense, offering too much information and causing confusion. The reasons for this are varied – some pages are text based (such as our own) which makes them unavoidably wordy. The same applies to many service provider pages, which need to provide something for everyone because of the highly varied requirements of the clients.

A ‘good’ page has plenty of white space, which provides rest areas for the eye. Good design enables the designer to include the necessary information without the page looking cluttered. Generally, less is more. Web sites should not include every single fact about your company. Instead, provide the essential data in a well-organised and understandable way, providing forms and/or email links for more info.

Graphics and image size

A picture is worth a thousand words. Using photographs provides information and helps to balance and break the monotony of text.

Animated Gifs

Gifs can be set up in such a way as to seem as if they are moving. In reality, a number of different images are presented in a sequence, rather like a film. A useful free package called Xara allows one to create such images easily.

Photographs are used a great deal more than they were before, possibly because of broadband.

File size is important for rapid downloading of sites and pages. Large jpg images can be made progressive and have unused colours removed. Large gifs can be interlaced. This allows them to download in a more user-friendly manner. A further trick is to slice large images into pieces and to recombine them in a table. 10 small images download faster than one image ten times the size. Using a package like Fireworks provides these facilities. A cheaper option is a free package like Jpeg Optimiser. Upgrades (at a small cost) allow optimisation of a variety of image types.

Colours, Typefaces and font sizes

Generally speaking:
Use one typeface only and a maximum of three. Different typefaces can be used for headings and general text. Use underlining sparingly… it is easily confused with hyperlinks. Use bold or italics to highlight issues.

Avoid garish colours for backgrounds as they make the text difficult to read. Be aware of colours that do not provide a good contrast… they make life difficult for people who are colour blind.

Black text on a white background is easiest to read. Use non-serif for headings (Ariel, Verdana, Helvetica, Georgia). You might consider serif typefaces for the main body (Times Roman) but experiment for readability and overall effect. Personally, I avoid serif typefaces for for anything I expect people to read on screen. See Austin, B (2000: chapters 4 and 6)

Avoid using font sizes which are difficult to read. Minimum of 10 point?

Controlling your page

1. Cascading Style Sheets

Scenario

That’s great, we really like it, really great… However, the boss asked me to ask you whether you could make the paragraph headings a little smaller, say a point or so… and whether it is possible to use italics for all the photo descriptors…

Clients will often agree to one set of specifications at the beginning of your design job, only to change them at the end, when the web site is complete. In the past, this could involve hours spent changing individual paragraph headings and the like, because normal HTML has a number of locked in formatting rules, which one can neither see nor control. Cascading Style Sheets make this type of nightmare a thing of the past.

CSS provide a high level of control over things like typeface, font size, spacing etc. CSS allows a web designer to create his or her own rules to override the normal HTML rules.

The term cascading refers to the way in which the general rules within a system are overridden by local rules. With CSS one can create general rules or local rules, with local rules overriding general rules.

On a practical level, Cascading Style Sheets allow one to set up formatting for things like headers, paragraph headings, certain types of text (eg general text in your page, small text for describing photographs, italicised text (possibly) in your tables. The power of CSS is that the styles can be applied throughout the entire website. A change to the style will therefore impact on the entire site, so one no longer has to spend time editing individual pages. Dreamweaver’s CSS are easy to work with and control.

2. Frames

Frames are useful for controlling the layout of your site and for making changes easier. A frame that contains a series of navigation buttons makes it easy to add or delete pages. If each page has a set of navigation buttons, each and every page needs to be changed. This can be extremely tedious. If using frames, make sure you know how to ‘point’ to specific frames or call up a fresh window. Some design packages allow you to do this easily at menu level.

However, frames come with usability issues. As the frame is simply a space for a page to rest in, it causes boookmarking problems. The general consensus today is to avoid them and to use templates to control layout instead.

3. Tables

HTML is quite difficult to control with respect to placement of text and images and the relationship between them. The easiest way to control layout is to use tables. These allow you to control the various aspects of your page and to keep pictures neatly lined up. It helps to keep picture size under control. This can be done by sizing the image, preferably using a graphics package which optimises the pictures as it sizes them, giving control of both the optical (physical) and file (megabyte) sizes.


General advice about structure

Folders

When designing a site, keep all files (html, image, sound etc) in one major folder. Subfolders for images and sounds can be created. This makes the management of your site much easier, as it is easy to see and manage the different files. It also makes ftping the site onto the server very much easier. Any pictures from the www or from other folders on your computer should be copied into the main web folder.

 

 

Getting your site on the WWW

1. Registering a domain

Your domain is your own unique web address. Domains can be registered from a variety of sources. Try http://www.powerpipe.com/ or http://www.directnic.com/

Shop around!!! Prices vary.

2. Getting a host

Dozens of organisations and individuals provide a web hosting service. Prices vary from free (??) to major money. Make sure that the host offers any special needs you require. This could include secure directories (https://) for financial transactions, email support, 24 hour access, automatic ftp synchronisation and a control panel which allows you access to email addresses and passwords for your site

3. Uploading

Use a good ftp package. Free packages tend to be limited with respect to features. Top grade ftp packages enable you to upload directories and subdirectories automatically, as well as automatic synchronisation and editing directly on the server. FreeFTP can be downloaded from http://www.tucows.com/

 

 

Search engines – allowing others to find your page.

Search engines need to find information about your site if they are to list them. You need to think about the kind of words that someone looking for the kind of information you are providing might use. These words need to be placed in the head section of the page.

A number of organisations will submit your page to a variety of search engines for a fee. How effective this is open to question. A variety of software packages claim to do the job for you.

When things go wrong… solving problems in web design.

About.com guide by Jennifer Kyrnin


Frivolities – hit counters, mouse pointers

Counters

There are a number of vendors offering counters, some for free, some by annual subscription. Try http://www.thecounter.com/ and see the post which follows for others They keep a check of the number of hits your site gets, and supply stats of various sorts. You will need to register and download the necessary code for inclusion in your index page. Accessing the Counter site (remember your username and password) will provide further info, such as types of browser used to access your site, and an analysis of hits by country etc.

Hit counters from Amazing Counters

Hit counters from Ultimate Counter

Hit counters from Shiny Stat

However, the most important thing to consider is whether we need to display this information to all an sundry. It is perhaps best kept hidden and only used if it is of use to you.

Mouse pointers

Comet Cursor allows you to change your mouse pointer. Specific mouse pointers can be called from within a page while you are browsing. Register with Comet (http://www.cometcursor.com/) and download the coding. Comet tells you exactly how to do this and exactly where in the page to place the code. There are links to other vendors on the post which follows.

Mouse pointers from Free Mouse Pointers

Alternative mouse pointers from PC World

Mouse pointers from Goldfiles

Again… consider whether we really need these. I would suggest not.


Forms

Forms allow you to collect collection information from someone looking at your site. This could be from simple (name, comments) to highly complicated involving highly confidential data that needs special encryption for protection. Forms also have hidden fields, which provide the correct email address for the webmaster (recipient), a title, which enables him to see what the mail involves (subject), a redirect field, which generates an automatic response.

Forms have a number of other field types. These can include text fields, check boxes and radio buttons. Only one radio button a cluster can be switched on – ideal for forcing a single selection.

 

Copyright issues

The ease with which photographs and other graphics can be copied from the web raises the issue of copyright infringement. Strictly speaking, the use of graphics, be they photographs, cartoons, animated gifs , other images or other information needs to be done with permission. The fact that it is often difficult to gain permission, be it because it is difficult to a) identify or b) contact copyright holders, is not a defence should one be prosecuted. To be safe – do not use anything which you do not have permission to use unless you are sure that it is open to general use.

The proliferation of social software makes it even easier to fond photographic material which can be of use. Sites like Flickr make it easy for users to provide a clear indication of copyright limitations using the Creative Commons conventions. These are easy to follow and well worth considering for your own work.


UK Copyright Service

Example of good usability for visually impaired users.

Some useful recent papers on web design.
David Kember, Carmel McNaught, Fanny C.Y. Chong, Paul Lam, K.F. Cheng (2010) Understanding the ways in which design features of educational websites impact upon student learning outcomes in blended learning environments. Computers & Education, Volume 55, Issue 3, November 2010, Pages 1183-1192.

Taeko Ariga, Takashi Watanabe (2008) Teaching materials to enhance the visual expression of Web pages for students not in art or design majors.  Computers & Education, Volume 51, Issue 2, September 2008, Pages 815-828.

Tom Boyle (2010) Layered learning design: Towards an integration of learning design and learning object perspectives. Computers & Education, Volume 54, Issue 3, April 2010, Pages 661-668.

Hyung Nam Kim (2008) The phenomenon of blogs and theoretical model of blog use in educational contexts. Computers & Education, Volume 51, Issue 3, November 2008, Pages 1342-1352.

Piers MacLean & Bernard Scott (June 9, 2009) Competencies for learning design: A review of the literature and a proposed framework. British Journal of Educational Technology.

Gek Woo Tan & Kwok Kee Wei (2006) An empirical study of Web browsing behaviour: Towards an effective Website design. Electronic Commerce Research and Applications 5 (2006) 261–271.

Useful books on web design.

Bishop, S. Adobe Dreamweaver CS5 Revealled

Hart & Feller. Adobe DreamweaverCS5 Comprehensive

Willard, W. Web Design. A beginners Guide (2nd Edition)

Academic posters.

Edinburgh Napier University.

University of Leicester.

Academic Posters – what are they? University of Melbourne.

Creating Academic Posters using Powerpoint. University of Stirling

Advertisements
Categories: Computing
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: