Technical Design:User interface design

9.6 User interface design

Although the design of the human computer interface (HCI) has long been a fundamental activity in the system development process (figure 9.13), the area of graphical design for the Internet represents a significant departure for the traditional IS developer. IS development can indeed be a creative and innovative activity, but it is of a different type from graphical design. Creativity in IS development in the past has been characterized by novel applications of IT to business problems and opportunities, and in the production of elegant technical solutions such as database structures and program algorithms. Graphic design is intensely visual - it is about the surface rather than the deep and hidden aspects of IS design. It takes training, application, and many years to become a skilled database designer and programmer - becoming a graphical designer is no different and we should not expect a traditional developer to have in-built graphical design sensibilities and skills or to pick it up on the job over a period of weeks. To build a web site that is appealing and usable for customers and employees it is clear that an injection of graphic design skills will be needed for a web-based IS development project. Three options at least should be considered:

• Include an experienced web graphic designer as part of the development project team

• Train a traditional IS developer in web graphic design

• Buy a web site template off the shelf.

The first option is the recommended route to take for a commercial and business-critical web development projects. The second option might appear to be cheaper but is likely to be risky (does the IS developer have an aptitude for graphic design?) and time-consuming (how long will it take to become proficient?) and may well turn out more expensive in the long run (the developer was not comfortable with graphic design so the training was wasted, the project is delayed and the project has to hire a professional designer anyway). The third option - buy a web template - is not recommended for a business critical web development project where it is essential to communicate the organization's identity and brand image, but it can be worth considering where time and budget are constrained (see www.projectseven.com for Dream Weaver web site templates for under $100). All in all, the most likely route is the appointment of a professional web designer to the IS development team.

However, a basic knowledge of design principles is invaluable for any developer involved in web projects, particularly internal applications such as an Intranet where speed and cost are key criteria. Although an in-depth study of graphic design principles is outside the scope of this book, we will provide some basic guidelines here to help the new designer or traditional developer get started.

9.6.1 Page layout guidelines

The web page layout in figure 9.14 is poor - it is difficult to read and hard on the eye. Simple changes to the layout can improve this page significantly (figure 9.15). Some simple but effective guidelines for page layout are (these are taken from Williams & Tollett, 2001):

• Use one alignment - the mix of centred text and left justified text is messy

• Centred text can look weak. The left justification of text and image in figure 9.15 creates an imaginary ruler and interior cohesion to the layout. Centred text can be used effectively, but requires more advanced graphic design expertise to pull it off

• Tables are an essential layout device. The layout of figure 9.15 is controlled with a table; you can't see the table because the borders have been turned off. Tables with borders are another sign of amateurish design, although an experienced designer can use them effectively

• Don't get too close to the edges of the browser window - again, the table allows the spacing to be controlled

• Avoid major headings in all capitals - they are hard to read and look ugly

• Don't italicise words in capitals

• Remove screen junk, such as 'Built with Internet Explorer'

• Create a focal point; if all of the text is in the same font size then it is hard to see what is important

• Don't mix too many fonts - two should be enough (figure 9.15 uses just one serif font, Times Roman)

• It is usually best to keep the traditional blue underline for links as this is universally recognized - if you do change the link appearance make sure it is obvious that it is a link and that it stands out on the page, otherwise the user has a trial and error exercise of 'spot the link' mouse-over

• Don't underline text unless it is a clickable link

• Use a spell-checker! Bad spelling and bad grammar, such as abuse of the apostrophe, create an unprofessional image. The misspelling of 'philosophers' in figure 9.14 was a genuine error, made harder to see due to the text being all capitals and underlined.

Some further guidelines for web page design culled from Nielsen (2000), Spool et al. (2000) and the authors' practical experience include:

• Don't use complicated background images that interfere with the readability of the body text

• Never have a splash screen, especially if it has long-winded Flash animation

• Don't use animations. Animated images (GIFs) can be amusing first time but they tire quickly and then become intensely annoying. If you must have an animation, set it to run once and then turn off

• Don't require the user to have a plug-in and don't use grandiose Flash animations unless there is a good reason to do so

• Keep multi-media file sizes to a minimum and where they are used give the file size or clip time to give an idea of download time. Don't use photos unless they add value and think about providing thumbnails to speed up page loading time

• Open links in the current window rather than a new one; users don't like you cluttering up their screen and can feel trapped on your site

• Don't use pop-up windows, especially if they contain advertising

• Don't create images that look like buttons but are just decoration as this will confuse navigation

• Avoid white on black or white on blue if the aim is maximum readability - black on white is still the best. Don't compromise readability for visual impact

• Don't make the user scroll sideways. To be absolutely safe design for a 600 pixel width since the full 640 is never available due to the frame borders of the browser window

• Scrolling vertically is acceptable. Some designers keep the pages short so that nothing is 'below the fold' but this can lead to too many pages with low content. Users don't necessarily mind scrolling downwards

• A clean serif face is most readable for large amounts of text, such as Times Roman. Sans serif fonts create a pleasing image and can be used effectively for headings and diagrams

• Don't be too tied up with traditional measures of readability - users scan web pages more than they read them, so busy pages that are hard to read might actually be good for scanning

• Think about providing printer-friendly versions of web pages that users might want to print out (e.g., a programme of theatre events) or creating Acrobat pdf files

• To get the user experience at its ugliest, make sure you test your site with a dial-up connection and a 486 PC with a 14 inch monitor

• Check the site regularly for dead links.

The basic message is 'simple is usually better' - especially if your design skills are limited. However, these are only rules (remember to challenge 'universals', as we did in chapter 5) and with experience the developer will come to know how and when to break them.

9.6.2 Navigation schemes

The key to good navigation is to make the flow from page to page as easy as possible for the user. Navigation and content are inseparable, the navigation scheme should reflect the style and aims of the site. Most navigation schemes are hierarchical, where high-level categories are broken down into subcategories and sub-categories further broken down as needed. The hierarchical structure might be 'narrow and deep' with multiple levels of hierarchy but few items at each level. Alternatively, it might be 'broad and shallow' with few levels (perhaps just two) but many items at each level. Broad and shallow makes for faster navigation from the home page (fewer clicks) but the screen will be more cluttered with navigation buttons. An often-quoted rule of thumb for navigation design is that any piece of information should be accessible within three clicks. Valuable screen real estate should not be wasted on noncontent such as navigation and advertising. As a rule of thumb, navigation should account for no more than 20% of the potential content space.

Nielsen (2000) advises that 'deep-linking' be allowed, so that users can access a detailed page of information on a web site directly rather than being forced to navigate via the home page. Nielsen succinctly expresses the key aims of navigation as enabling users to know: 'Where am I? Where have I been? Where can I go?'. On any given page in a site the user should know where they are, relative to the site structure. A useful device is to display a location on each page, such as

home>products>software

When buying from Amazon.com the user can see where they are in the purchasing cycle - this helps them see where they are going and where they have already been. A site structure map is another way that users can get a feel for where they might go. An essential aid to navigation is a good site search facility, prominently displayed and easy to find (the top right hand corner of the page is a popular location). It is important that the site is consistent; the navigation menu should be in the same place on every page and the buttons presented consistently. The site should also cater for users with disabilities, such as the visually impaired, who may be accessing the site via a speech synthesiser. International and cultural aspects can also play a part, requiring local versions of the site to be prepared in different languages and styles.

Frames

If you see scroll bars anywhere than along the bottom or the righthand side of the page, then it is a frame set. If part of the web page stays still while another part scrolls, then it is a frameset. Frames are sometimes a more elegant solution to web design because the menu options stay on the screen in a frame while the user scrolls down the page of a content frame, as might be the case in a directory listing, where clicking on an item in one pane changes the content of another pane. If you must use frames then make them borderless. Because a frame set contains multiple individual web pages there are often problems with

search engines indexing a site's content - sometimes only the home page will be indexed. Most search engines work best with non-frames sites, but if frames must be used then provide <NOFRAMES> content to help with search engine indexing or, even better, have two versions of the site, one with frames and one without. Referencing frameset web pages is not only difficult for search engines but also problematic for users. If a page in a frameset is bookmarked then it will load without the frameset that gives the page its context and may be confusing for the user who expected to see the full frameset. There are ways of working around this with JavaScript to force the pages of a frameset to open the frameset rather than the individual page, but it is all extra work for the developer.

Although Nielsen (2000) suggests that frames be avoided (and most web designers would argue the same), Spool et al. (1999) consider that users do not find that frames necessarily hurt navigability. Perhaps it is web designers who feel most strongly about the frames issue? Generally, however, if a similar layout can be achieved using a single templated page then avoid frames unless there is a sound and compelling design reason for using them.

Summary

• Design ranges from an overall system design (architecture) to a detailed component design (software classes) and from a logical view to a physical view (software specific).

• A three-tier architecture allows the design to be divided into business data, business logic, and presentation - this allows work to be allocated to different developers and leads to a more robust and maintainable application.

• The UML class diagram is implemented as a relational database. This is a close approximation to the close diagram rather than a seamless transition.

• The business logic is separated from the database and the user interface using components in ColdFusion.

• The application flow of web pages is modeled using sequence diagrams - these are an implementation of the way objects collaborate to achieve use cases.

• User interface design principles need to be adhered to in order to create a web site that is visually appealing and easy to navigate.

Exercises

1. Translate the UML class diagram of the research student admissions system into a relational database design.

2. Create a set of sequence diagrams to show how web pages are used to implement one of the use cases developed for the research student admissions system.

3. Create a layout of how the web pages in the Research Student Admission System will appear and justify your choice of navigation strategy.

Search This Blog

information systems course