2503ICT: User interface design and implementation


Under construction!

We present some ideas on user interface design and implementation in Web applications, in particular using CSS, SASS and Bootstrap.

References

User interface design principles

Here are some notes based on Marilyn Ford's old (PowerPoint) slides for 2505ICT User Interface Design. (I don't guarantee that my links are correct.)

Prototypes

See 2505ICT Lesson 5 - Prototypes - PowerPoint slides.

Layouts

See 2505ICT Lesson 6 - Layouts - PowerPoint slides.

Colour and typography

See 2505ICT Lesson 7 - Colour and Typography - PowerPoint slides.

Usability testing

When performing usability testing, consider the following issues:

See 2505ICT Lesson 8 - Usability testing - PowerPoint slides.

Web interface design practice

There is widespread agreement between popular Web site developers about page layout. See, e.g., amazon.com, apple.com, ebay.com, facebook.com, flickr.com, google.com, microsoft.com, nab.com.au, telstra.com, twitter.com, wikipedia.com, yahoo.com. They all have the following structure:

Look again at examples of popular Web sites to convince yourself of the ubiquity of this practice.

All developers should therefore follow this standard practice for page layout.

Common practice is different on small screens, particularly on smartphones. There, the practice is single column, one-line header, content, then navigation and footer.

Layouts may be fixed-width or fluid. Many popular Web sites use fixed-width layouts, some use fluid layouts, but I believe fluid layouts should be used whenever possible, following the principle to respect the user.

Web interface implementation

CSS and SASS

CSS is an embarrassingly bad language that requires much repetition.

SASS (syntactically awesome style sheets (sic)) is an improved version of CSS that provides many extensions such as variables (gasp!), nesting, partials and import (cf. ERB partials) , mixins (inline procedures), inheritance, operators. This combination of features makes it possible to write shorter, clearer, more reusable CSS specifications.

At present, SASS is implemented by a server-side preprocessor that converts an SASS specification into an equivalent (but longer) CSS specification that is sent to the client for application by the browser. Maybe one day in the future browsers will apply SASS specifications directly.

Rails uses SASS. The .scss in its stylesheet file names stands for "sassy css" (sic).

Here are a few examples from the SASS introduction.

$font-stack: Helvetica, sans-serif;
...
body { font: 100% $font-stack; }

nav {
  background-color: gray;
  ul { 
    margin: 0; 
    list-style: none;
    li { display: inline-block; }
  }
}

@import 'reset' /* includes the partial '_reset.scss' */

sidebar {
  float: right;
  width: 300px / 960px * 100%;
}

SASS is very easy to learn. You'll never want to use plain CSS again!

Rails supports SASS and you get it for free by simply using filenames of the form style.css.scss.

An alternative to SASS is LESS.

Multicolumn layout

The two most challenging aspects of page layout are:

Multicolumn layouts may actually be implemented using tables (semantically inappropriate and inefficient), frames (deprecated and don't allow proper bookmarking) and style sheets (recommended and standard practice even though they have significant disadvantages).

Here are three examples of style sheets that can be used for 2-column layouts. Two properties of a desirable 2-column layout are that it should work reasonably when the window width changes and that it should work reasonably whichever column is longer. These examples are not guaranteed to have these properties.

Example 1. The HTML document and the style sheet.

Example 2. Then HTML document and the style sheet.

Example 3. Another (SASS) style sheet from the Ruby et al. text

For any CSS layout it's important to be familiar with the CSS box model as summarised at w3schools.com. This model distinguishes between an element's content (specified by height and width attributes) and surrounding padding, border and margin spacing.

Another good introduction to the CSS box model and positioning is in this HTML and CSS guide.

Specification of two- and three-column layouts using style sheets requires a good understanding of CSS positioning.

This is described in Chapter 24 of Web Design in a Nutshell, 3rd edition by Neiderst Robbins and also at w3schools.com.

The best online description of CSS positioning that I know is CSS Positioning 101 by Noah Stokes on the excellent A List Apart Web site. It very carefully describes the difference between static, relative, absolute, fixed and inherit positioning.

Here is simple example from this article that illustrates a fixed footer and here is a more complex example.

Exercise. Write a page with a fixed left column and a scrolling right column. Hint. The left column should have fixed position and the right column should have relative position.

It's also important to understand CSS float. The best online description of this topic that I know is CSS FLoats 101 on A List Apart. Again, see also w3schools.com.

Other older, more complex, online descriptions of CSS layout are In Search of the Holy Grail and The Holy Grail Refactored.

Twitter Bootstrap

Bootstrap is a front-end framework that is intended to simplify the task of designing page layout (using CSS) and page behaviour (using JavaScript) and to support responsive designs (described below).

Bootstrap works with both SASS and LESS. Rails supports Bootstrap with both preprocessors, but to use it (with SASS, say), you have to import the gems bootstrap and bootstrap-sass.

However, Bootstrap appears to be more complex to describe than SASS.

Roughly speaking, you have to learn a large number of HTML element class names and values. If you use these class names and values in your HTML elements, and specify a Bootstrap template, your browser will render your elements according to the template.

Fortunately, Rails commands that generate HTML (e.g., with scaffolds), automatically include these Bootstrap class values. (I think.) But for your own HTML, you have to learn a fairly large number of class names and values and how they work together. Taking advantage of it to support page behaviour (using JavaScript and jQuery) requires learning another set of conventions.

For these reasons, and because page layout is not the primary concern of this course, I'm not going to attempt to summarise Bootstrap here.

However, the documentation seems to be clear and easy to follow, and Hartl's Tutorial uses it, so if you wish to learn it yourself, at some stage, it should be fairly straightforward.

Zurb Foundation is a similar front-end framework that can also be used with Rails and that is indeed used by Kehoe's sample applications.

Managing different media and screen sizes

With the growth of Web access from mobile phones and tablets (as well as laptops and desktops), this problem has become more important than ever. How can a developer design a site for such a range of screen sizes?

First, in CSS 2, one can specify alternative style sheets in a document head, and distinguish them by the media atttribute, with values all, handheld, print, projection, screen, and others.

<link rel="stylesheet" type="text/css" media="all" href="styles/basic.css">
<link rel="stylesheet" type="text/css" media="handheld" href="styles/handheld.css">
<link rel="stylesheet" type="text/css" media="screen" href="styles/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css">

Only the stylesheet that matches the media of the client will be loaded.

Now, in CSS 3 (becoming widely implemented), media queries allow finer grained distinctions based on the physical characteristics (e.g., screen size) of the client.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />
<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="orkney.css" />

This allows us to use different stylesheets depending on the physical characteristics of the client.

Designing Web pages that are attractive and usable on devices with very different physical characteristics is very challenging, even if different stylesheets are used for different devices. The technique for achieving this is called (misleadingly?) responsive design. The article Responsive Web Design at A List Part introduces this topic.

Some of the main principles of responsive Web design are:

The book by Marcotte cited above gives a more detailed description.

When specifying layouts for small screens (e.g., mobile phones), the fundamental principle is Content first! I.e., content first, navigation second. This contrasts with the normal layout for large screens, which is to put navigational elements at the top or on the side.

Some developers find this task too difficult, and simply return different documents to the client depending on the properties of the client as expressed in the HTTP request. Hence, you may see URLs on your mobile phone, e.g., of the form m.ebay.com and m.facebook.com. This has the disadvantage of requiring the developer to maintain essentially two (or more) different Web sites (as opposed to two different style sheets).

Other implementation principles

Users are more important than developers. Therefore: