Chapter 14, 16 & 17 14Moving from choosing components into

design areas16Designing a graphical user

interface (GUI)17Designing for the Web

UIDE Chapter 14

◦ A single seamless whole.

◦ Simplicity is the key

Combining Interaction Devices and Software Components

UIDE Chapter 14

Principles of Good Layout◦ Create Natural Groupings

◦ Separate the Currently Active Components

◦ Emphasize Important Components Color, type size, positioning, animation

◦ Use White Space Effectively Spaces and gaps are important

◦ Make the Controls Visible Function of controls must be obvious

◦ Balance Aesthetics and Usability

In groups of two, sketch one web page for the home controller of:

Smart TVSmart SoundSmart HVAC

The smart TV has “displays” in 4 rooms; availability to cable, netficks and blue ray. The smart Sound has internal CDs, pandora, and radio. The smart HVAC can adjust temp in each room.

UIDE Chapter 14

CritiqueGrouping?Emphasis?White space?Control visible?Aesthetics?

UIDE Chapter 14

Exercise 14.2 from your book

Sketch a web page for selling computer printers.

Aimed at computer enthusiasts browsing on their home PCs.

Users are interested in the price and functionality of printers.

Show details of several printers, along with prices and images.

Achieved: Natural groupings Emphases

important Used white space

effectively Made the controls

visible Balanced aesthetic

and usability

UIDE Chapter 14

Defined by a set of design issues and design guidelines. For example:

◦ Graphical user interfaces (GUIs)

◦ Web pages

◦ Embedded systems, such as handheld devices

Are each of the above separate without overlap?

◦ “Technological convergence” (merging of diff design areas)

◦ “Ubiquitous computing”

What Is a Design Area?

UIDE Chapter 14

Perform the following:1. Identify the relevant design area,

principles, guidelines and issues2. Consider the conceptual design3. Combine the design components

For your GUI – do the above 3 steps. This goes in Part One # 6.

Design Components and Design Areas

UIDE Chapter 16

Typically the blending of ◦ Interaction styles

Menu selection Form filling Direct manipulation

◦ Components Widgets

◦ Building blocks of GUIs◦ Windows, dialog boxes, tabs, menus, tool bars,

command buttons, option buttons, check boxes, list boxes, text boxes, spin buttons, slide bars, picture boxes, progress bars, calendar picker, etc

Ch. 16 Designing a graphical user interface (GUI)

UIDE Chapter 16

Interface Hall of Shame Widgets Information for Windows Widgets Information for Mac OS

Hall of Shame

UIDE Chapter 16

Affordance of buttons◦Use of Color Wording

◦Shape Position

Example Design:

The Energetic Sports Center◦ Domain

Sport, activities available Toddler’s gym, football, fitness

room, women’s aerobics, squash

◦ Users Administrative staff, mature, limited experience with computer

systems, English speakers, one wheelchair user, one arthritic user

The Appearance of Widgets in Different Pieces of Software

UIDE Chapter 16

Main Tasks Task 1: Adding and Modifying Membership Details

At least once a day, takes about 5 minutes, telephone interruptions frequent, currently use paper forms

Task 2: Booking Squash Matches Recorded in a diary, bookings

made over phone, 20 slots each day, can book seven days ahead

Environment Busy, noisy, dusty, dirty

Technology Small network of computers,

one at reception desk, one in social area for squash bookings with touchscreen

The Energetic Sports Center (continued)

UIDE Chapter 16

Conceptual Design Primary task objects:

Member, booking.

Attributes

Actions

Metaphors

Choice of Guidelines

A section of the content diagram is given to the right.

The Energetic Sports Center (continued)

UIDE Chapter 16

◦ Using Primary Windows

◦ Using Secondary Windows

Message Boxes

Dialog Boxes

◦ Using tabs

Choosing Widgets to Structure the Interaction

UIDE Chapter 16

The launch pad

UIDE Chapter 16

Using Dialog boxes

UIDE Chapter 16

Using tabs

UIDE Chapter 16

◦ Using Menus

◦ Using Tool Bars

◦ Using Command Buttons

Choosing Widgets to Control the Interaction

UIDE Chapter 16

◦ Using Option Buttons and Check Boxes

◦ Using List Boxes

◦ Using Text Boxes

Combining GUI Widgets

Now Design a specific dialog box for your GUI that will collect information.

Document similar to Page 328:

Primary task object – Actions - Metaphors

Choosing Widgets to Enter Information

Chapter 17

Designing for the web

UIDE Chapter 17

The Lovely Rooms Hotel Booking Service◦Domain - hotel booking service, B&Bs, <=5 rooms

◦Users – vacationers, UK residents, business travelers

◦Tasks – recommend a choice of three hotels nearest, offers pecial rates and discount packages, book online.

◦Environment – easy to use site

◦Technology – low-spec PCs, download as quickly as possible.

UIDE Chapter 17

The Lovely Rooms Hotel Booking Service◦ Conceptual Design

Primary Task Object: Hotel

Attributes – B&B, converted older property

Actions – Browse and search

Metaphors – list and map results

UIDE Chapter 17

Design Principles for Web Sites◦ Homerun (Nielsen 2000)

High-Quality Content

Often Updated

Minimal Download Time

Ease of Use

Relevant to User’s Needs

Unique to the Online Medium

Net-centric Corporate Culture

UIDE Chapter 17

Conceptual Design

UIDE Chapter 17

Designing Web Sites◦Designing the Web Site Structure

◦Helping the Users Know Where They Are

◦Helping the Users Navigate around the Site

Structural navigation – other pages within the same site

Associative links – same page links

“See Also” links – to other web sites

◦Navigation Aids

UIDE Chapter 17

Color of text links Make names of links meaningful Buttons or graphical images Drop-down lists Site map Breadcrumb trail Geographical or visual maps Navigation bars

Navigational Aids1,2,3,4,5

UIDE Chapter 17

UIDE Chapter 17

How deep and how wide should the hierarchy be? Is it better to divide a block of information into

several short pages or leave it as one long page? Can several web pages be combined into one

larger one? Does the structure of the site reflect the structure

of the tasks the user wants to carry out? How should the site content be grouped?

Design Considerations

UIDE Chapter 17

UIDE Chapter 17

Find a Lovely Room

UIDE Chapter 17

Lovely Rooms web site

UIDE Chapter 17

Designing Home Pages and Interior Pages◦ Designing the Home Page

Tells the users where they are

Tells the users what the site does

1,2,3,4

◦ Designing Interior Pages

UIDE Chapter 17

Design Issues for Web Pages◦ Widgets on Web Pages

◦ Scrolling - 1

◦ Designing for Different Screens and Platforms – 1,2

◦ Using the Screen Area Effectively

UIDE Chapter 17

Design Issues for Web Pages◦ Using the Screen Area Effectively

◦ Using Style Sheets - 1

◦ Designing for Accessibility - 1

UIDE Chapter 17

Writing the Content of Web Pages◦ Keep Text to a Minimum <=50%

◦ Help Users to Scan – use headings and subheadings, bulleted and numbered lists, highlight

◦ Dividing Long Blocks of Text into Separate Sections

UIDE Chapter 17